/* Home only (loaded after site.css on / and /<locale>/). Liquid-glass week journal:
   depth from material and hairlines, one lavender accent, no drop shadows (DESIGN.md). */

.home-simple ::selection { background: var(--accent-line); color: var(--text); }

/* Glass, not shadow: keep the inner highlight, drop the drop shadows. */
.home-simple :is(.hero, .info-card, .legal-links) { box-shadow: inset 0 1px rgba(255, 255, 255, 0.35); }
.home-simple .button { box-shadow: none; }
.home-simple .hero::after { display: none; }

/* Hero: the headline says what DoseWeek is; tinted glass wash instead of a blob. */
.home-simple .home-hero {
  padding: clamp(28px, 6vw, 64px);
  border-color: var(--accent-line);
  background:
    linear-gradient(150deg, var(--surface-raised) 0%, var(--surface) 46%, var(--accent-soft) 100%);
}
.home-simple .home-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.125rem, 1.35rem + 3.4vw, 4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.home-simple .home-hero .hero-copy { max-width: 58ch; margin-top: 20px; }
.home-simple .store-row { margin-top: 32px; }

/* Sections: more air above a heading than below it. */
.home-simple :is(.home-new, .home-platforms, .home-help-pair, .legal-links) { margin-top: clamp(40px, 6vw, 64px); }
.home-simple :is(.home-new, .home-platforms) > h2 {
  margin: 0 0 20px;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 760;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* What's new: one glass panel, a ruled two-column list, the new tab leads. */
.home-new {
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: var(--surface);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 0 clamp(24px, 4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.feature {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.feature h3 { margin: 0 0 4px; font-size: 1.0625rem; font-weight: 720; line-height: 1.4; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--secondary); line-height: 1.65; }
.feature-icon {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.feature-icon svg { width: 1.5rem; height: 1.5rem; }
.feature-together { grid-column: 1 / -1; grid-template-columns: 3.5rem minmax(0, 1fr); padding-top: 4px; border-top: 0; }
.feature-together .feature-icon { width: 3.5rem; height: 3.5rem; border-radius: 18px; }
.feature-together .feature-icon svg { width: 1.875rem; height: 1.875rem; }
.feature-together h3 { font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.375rem); }
.feature-together p { max-width: 62ch; }

/* Plans: shared line once, then only what each plan adds; fine print stays quiet. */
.plan-common {
  margin: 0 0 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-medium);
}
.plan-common h3 { margin: 0 0 4px; color: var(--secondary); font-size: 0.875rem; font-weight: 680; }
.plan-common ul { margin: 0; padding: 0; list-style: none; }
.plan-common li { font-weight: 600; line-height: 1.6; }
.home-simple .plan-card h3 { font-size: 1.125rem; }
.home-simple .plan-card ul { margin-top: 8px; }
.plan-notes { margin-top: 18px; }
.plan-notes p { max-width: 75ch; margin: 0; color: var(--secondary); font-size: 0.9375rem; line-height: 1.65; }
.plan-notes p + p { margin-top: 6px; }

/* Help pair: moving records in, and the manual, side by side. */
.home-help-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 16px;
}
.home-help-pair .home-transfer {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 0;
  background: var(--surface);
}
.home-help-pair .home-transfer > div { max-width: 52ch; }

/* Links: one column as soon as a label would wrap; keep the arrow with its label. */
.home-simple .legal-links ul { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.home-simple .legal-links .page-link { display: inline-block; min-height: 0; padding-block: 10px; line-height: 1.5; }

/* The medical notice is read, not shouted: no accent fill or side stripe. */
.home-simple .home-note {
  margin: 28px 0 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: 0.875rem;
  line-height: 1.7;
}

@media (max-width: 720px) {
  .home-simple .home-hero { padding: 26px 22px; }
  .home-new { padding: 20px; }
  .feature, .feature-together { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 12px; }
  .feature-icon, .feature-together .feature-icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; }
  .feature-icon svg, .feature-together .feature-icon svg { width: 1.375rem; height: 1.375rem; }
  .home-help-pair .home-transfer { align-items: stretch; }
}

@media (forced-colors: active) {
  .feature-icon { forced-color-adjust: auto; border-color: CanvasText; }
}

/* Platform pair: side by side only while both cards fit their copy. */
.home-simple .platform-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
/* Both platform cards stack their actions the same way at every width. */
.home-simple .platform-card .button-row { flex-direction: column; align-items: flex-start; }
@media (max-width: 720px) { .home-simple .platform-card .button-row { align-items: stretch; } }

/* Header glass without drop shadows on the home. */
.home-simple :is(.language-nav, .brand-mark) { box-shadow: inset 0 1px rgba(255, 255, 255, 0.35); }
.home-simple .language-link[aria-current="true"] { box-shadow: none; }
/* A clear step from body text to these headings. */
.home-help-pair .home-transfer h2 { font-size: 1.25rem; line-height: 1.35; }
.home-simple .legal-links h2 { font-size: 1.25rem; margin-bottom: 8px; }