/* The marketing site's only design-token set (ADR-0045). Palette, spacing and
   radii mirror ReadySteps docs/design-system/tokens.json. styles.css and the
   page stylesheets read these tokens; every page's <body> has .marketing-home. */
.marketing-home {
  --surface: #ffffff;
  --cream: #fbf3e7;
  --paper: #fffdf8;
  --sky: #cfe8ff;
  --mint: #d7f3ea;
  --coral-tint: #ffd9d2;
  --sun-tint: #fff7df;
  --teal-tint: #e4f7f4;
  --navy: #142b54;
  --ink-soft: #2a4270;
  --ink-muted: #5d6f8a;
  --blue: #2f6fef;
  --blue-deep: #1f5fd6;
  --teal: #14a79a;
  --teal-deep: #0e7d73;
  --red: #e8412e;
  --red-deep: #c8321f;
  --yellow: #f6b52c;
  --yellow-deep: #9a5800;
  --success: #1fa971;
  --hill: #58c46e;
  --hill-deep: #3fae57;
  --neutral: #ece7dd;
  --neutral-ink: #a39c8d;
  --token-empty: #c9d3dd;
  --token-empty-fill: #eef5f8;
  --hairline: #142b541a;
  --space-xs: 6px;
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-section: 88px;
  --gutter: 40px;
  --content-width: 1180px;
  --tap-target: 44px;
  --radius-choice: 14px;
  --radius-field: 16px;
  --radius-control: 18px;
  --radius-choice-card: 20px;
  --radius-card: 28px;
  --radius-tablet: 34px;
  --radius-pill: 999px;
  --shadow-card: 0 26px 54px rgba(20,43,84,0.12);
  --shadow-button: 0 12px 22px rgba(20,43,84,0.18);
  --shadow-tablet: 0 30px 60px rgba(20,43,84,0.25);
  --font-display: "Fredoka", "SF Pro Rounded", ui-rounded, "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", "SF Pro Rounded", ui-rounded, system-ui, sans-serif;
  /* Website-only values derived from the palette above (not in tokens.json). */
  --navy-hover: #1c3a70;
  --label-ink: color-mix(in srgb, var(--navy) 78%, transparent);
  --control-border: color-mix(in srgb, var(--blue) 18%, transparent);
  --card-caption-ink: color-mix(in srgb, var(--navy) 66%, transparent);
}

@font-face { font-family: Fredoka; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/fredoka-700.ttf') format('truetype'); }
@font-face { font-family: Fredoka; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/fredoka-600.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/nunito-600.ttf') format('truetype'); }
@font-face { font-family: Nunito; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/fonts/nunito-800.ttf') format('truetype'); }

.marketing-home {
  --header-height: 80px;
  --header-clearance: 104px;
  --button-height: 52px;
  --outline-width: 3px;
  --card-padding: 28px;
  --copy-width: 640px;
  --hero-space: 64px;
  --hero-text-offset: 32px;
  --hero-tablet-offset: 64px;
  --hero-sun-top: 88px;
  --hero-cloud-width: 210px;
  --hero-cloud-top: 0px;
  --hero-cloud-left: 0px;
  --hill-height: 200px;
  --hero-sun-size: 88px;
  --tablet-aspect-ratio: 10 / 7;
  --tablet-star-offset: -24px;
  --tablet-star-stroke: 5;
  --hero-phone-width: 176px;
  --hero-phone-border: 8px;
  --hero-phone-height: 300px;
  --hero-phone-overlap: 72px;
  --hero-phone-outset: 12px;
  --hero-phone-copy-size: 11px;
  --hero-phone-label-size: 10px;
  --hero-phone-title-size: 18px;
  --hero-phone-speaker-width: 54px;
  --hero-phone-speaker-height: 10px;
  --hero-phone-top-space: 32px;
  --hero-phone-indicator-height: 4px;
  --hero-caption-size: 14px;
  --hero-caption-phone-clearance: 20px;
  --badge-size: 32px;
  --vignette-height: 180px;
  --vignette-stroke: 2.5;
  --phone-width: 350px;
  --phone-pair-width: 560px;
  --phone-stack-width: 280px;
  --type-hero: clamp(48px, 5.5vw, 72px);
  --type-section: clamp(32px, 3.8vw, 46px);
  --type-footer-heading: 24px;
  --footer-brand-size: 32px;
  --footer-mark-size: 56px;
  background: var(--surface);
  color: var(--navy);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.55;
}
.marketing-home :is(h1,h2,h3,.brand) { font-family: var(--font-display); letter-spacing: -0.01em; }
.marketing-home :is(h1,h2,h3,p,figure) { margin: 0; }
.marketing-home h1 { font-size: var(--type-hero); font-weight: 700; line-height: 1.02; }
.marketing-home h2 { font-size: var(--type-section); font-weight: 700; line-height: 1.08; }
.marketing-home h3 { font-size: 28px; font-weight: 600; line-height: 1.15; }
.marketing-home p { color: var(--ink-soft); }
.marketing-home p + p { margin-top: var(--space-md); }
.marketing-home h2 + p, .marketing-home h3 + p { margin-top: var(--space-md); }
.marketing-home :is(a,button,input,select,textarea,summary):focus-visible { outline: var(--outline-width) solid var(--navy); outline-offset: var(--outline-width); box-shadow: 0 0 0 var(--outline-width) var(--yellow); }
.marketing-home :is(section[id],details[id],main[id]) { scroll-margin-top: var(--header-clearance); }
.marketing-home .section-inner { width: min(var(--content-width), calc(100% - var(--gutter) * 2)); margin-inline: auto; padding-block: var(--space-section); }
.marketing-home .eyebrow { margin-bottom: var(--space-md); color: var(--blue-deep); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.marketing-home .button { min-height: var(--button-height); display: inline-flex; justify-content: center; align-items: center; padding: var(--space-sm) var(--space-lg); border: 2px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: 17px; font-weight: 800; line-height: 1.3; transform: none; box-shadow: none; cursor: pointer; text-align: center; }
.marketing-home .button.primary, .marketing-home .nav-action { background: var(--blue-deep); color: var(--surface); }
.marketing-home .button.primary:hover, .marketing-home .nav-action:hover { background: var(--navy); color: var(--surface); }
.marketing-home .button.secondary { background: var(--surface); border-color: var(--navy); color: var(--navy); }
.marketing-home .button.secondary:hover { background: var(--sun-tint); }
.marketing-home .button.navy { background: var(--navy); color: var(--surface); }
.marketing-home .button.navy:hover { background: var(--blue-deep); }
.marketing-home .card-actions, .marketing-home .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.marketing-home .text-link, .marketing-home p a { text-decoration: underline; text-underline-offset: 3px; }
.marketing-home :is(.card-note,.section-note,figcaption) { font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.marketing-home .card-note { margin-top: var(--space-sm); }
.marketing-home .site-header { height: var(--header-height); min-height: var(--header-height); padding: var(--space-sm) max(var(--gutter), calc((100vw - var(--content-width)) / 2)); background: var(--surface); backdrop-filter: none; }
.marketing-home .site-header.is-open, .marketing-home .site-header.is-scrolled { background: var(--surface); }
.marketing-home .brand { font-size: 26px; font-weight: 700; gap: var(--space-sm); }
.marketing-home .site-nav { font-size: 14px; gap: var(--space-lg); color: var(--navy); }
.marketing-home .site-nav a { min-height: var(--tap-target); display: inline-flex; align-items: center; }
.marketing-home .nav-action { border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); }
.marketing-home .nav-toggle { width: var(--button-height); height: var(--button-height); border: 2px solid var(--navy); border-radius: var(--radius-control); background: var(--surface); }
.marketing-home .nav-toggle > span:not(.sr-only) { background: var(--navy); }
.marketing-home .skip-link { position: fixed; top: var(--space-sm); left: var(--space-sm); z-index: 20; background: var(--surface); padding: var(--space-sm); transform: translateY(-200%); }
.marketing-home .skip-link:focus { transform: none; }

.marketing-home .hero { position: relative; display: block; min-height: 0; margin-top: var(--header-height); padding: 0; background: var(--sky); overflow: hidden; }
.marketing-home .hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: var(--space-section); padding-top: var(--hero-space); padding-bottom: var(--hill-height); }
.marketing-home .hero-content { position: relative; z-index: 1; top: var(--hero-text-offset); }
.marketing-home .hero-cloud { position: absolute; z-index: 0; width: var(--hero-cloud-width); height: auto; top: var(--hero-cloud-top); left: var(--hero-cloud-left); fill: var(--surface); pointer-events: none; }
.marketing-home h1 span { color: var(--blue); }
.marketing-home .hero-copy { margin-top: var(--space-lg); font-size: 20px; max-width: var(--copy-width); }
.marketing-home .hero-note { margin-top: var(--space-lg); font-size: 14px; }
.marketing-home .hero-sun { position: absolute; z-index: 0; width: var(--hero-sun-size); height: var(--hero-sun-size); border-radius: 50%; background: var(--yellow); top: var(--hero-sun-top); left: 46%; pointer-events: none; }
.marketing-home .hero-hills { position: absolute; height: var(--hill-height); width: 130%; bottom: 0; left: -15%; pointer-events: none; border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--hill); }
.marketing-home .hero-hills::after { content: ''; position: absolute; background: var(--hill-deep); width: 65%; height: 60%; bottom: -10%; left: 12%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.marketing-home .hero-devices { position: relative; z-index: 1; padding-top: var(--hero-tablet-offset); }
.marketing-home .hero-device-stage { position: relative; container-type: inline-size; padding-bottom: calc(var(--hero-phone-height) - var(--hero-phone-overlap)); }
.marketing-home .hero-parent-phone { position: absolute; z-index: 2; width: var(--hero-phone-width); height: var(--hero-phone-height); bottom: 0; right: calc(-1 * var(--hero-phone-outset)); border: var(--hero-phone-border) solid var(--navy); border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); }
.marketing-home .hero-phone-screen { padding: var(--hero-phone-top-space) var(--space-sm) var(--space-sm); font-size: var(--hero-phone-copy-size); line-height: 1.35; }
.marketing-home .hero-phone-speaker { position: absolute; top: var(--space-sm); left: 50%; transform: translateX(-50%); width: var(--hero-phone-speaker-width); height: var(--hero-phone-speaker-height); border-radius: var(--radius-pill); background: var(--navy); }
.marketing-home .hero-phone-family { color: var(--ink-muted); }
.marketing-home .hero-phone-title { font-family: var(--font-body); font-size: var(--hero-phone-title-size); font-weight: 800; line-height: 1.3; margin-top: var(--space-xs); }
.marketing-home .hero-phone-plan { margin-top: var(--space-sm); padding: var(--space-sm); border-radius: var(--radius-choice); background: var(--cream); }
.marketing-home .hero-phone-plan p { font-size: var(--hero-phone-label-size); margin-bottom: var(--space-xs); }
.marketing-home .hero-phone-plan strong { font-size: var(--hero-phone-copy-size); color: var(--navy); font-weight: 800; }
.marketing-home .hero-phone-choice { margin-top: var(--space-sm); font-weight: 800; color: var(--navy); }
.marketing-home .hero-phone-screen ul { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0 0; padding: 0; list-style: none; color: var(--ink-soft); }
.marketing-home .hero-phone-screen li::before { content: '•'; color: var(--teal); margin-right: var(--space-xs); }
.marketing-home .hero-phone-home { display: block; height: var(--hero-phone-indicator-height); border-radius: var(--radius-pill); margin-top: var(--space-sm); background: var(--mint); }
.marketing-home .hero-device-caption { position: absolute; top: calc(100% - var(--hero-phone-height) + var(--hero-phone-overlap) + var(--space-lg)); left: 0; right: calc(var(--hero-phone-width) - var(--hero-phone-outset) + var(--hero-caption-phone-clearance)); margin: 0; color: var(--teal-deep); font-size: var(--hero-caption-size); font-weight: 800; text-align: center; }
.marketing-home .practice-tablet {
  --tablet-border: clamp(9px, 3.3cqw, 18px);
  --tablet-radius: clamp(18px, 6.2cqw, 34px);
  --tablet-choice-radius: clamp(10px, 3.7cqw, 20px);
  --tablet-photo-radius: clamp(6px, 2.6cqw, 14px);
  --tablet-star-size: clamp(56px, 16cqw, 88px);
  --tablet-padding: clamp(12px, 4.4cqw, 24px);
  --tablet-prompt-size: clamp(16px, 5.2cqw, 28px);
  --tablet-token-size: clamp(12px, 4cqw, 22px);
  --tablet-token-gap: clamp(1px, 0.4cqw, 2px);
  --tablet-choice-gap: clamp(6px, 2.2cqw, 12px);
  --tablet-choice-padding: clamp(3px, 1.1cqw, 6px);
  --tablet-choice-space: clamp(12px, 4.4cqw, 24px);
  --tablet-eyebrow-size: clamp(9px, 2.4cqw, 13px);
  --tablet-choice-border: clamp(2px, 0.55cqw, 3px);
  position: relative; z-index: 1; width: 100%; box-sizing: border-box; aspect-ratio: var(--tablet-aspect-ratio); border: var(--tablet-border) solid var(--navy); border-radius: var(--tablet-radius); background: var(--paper); box-shadow: var(--shadow-tablet);
}
.marketing-home .tablet-screen { position: absolute; inset: 0; padding: var(--tablet-padding); border-radius: var(--radius-control); }
.marketing-home .tablet-screen .eyebrow { font-size: var(--tablet-eyebrow-size); margin-bottom: var(--space-xs); }
.marketing-home .tablet-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--tablet-choice-gap); }
.marketing-home .tablet-heading h2 { font-size: var(--tablet-prompt-size); }
.marketing-home .sample-tokens { display: flex; color: var(--token-empty); font-size: var(--tablet-token-size); gap: var(--tablet-token-gap); }
.marketing-home .sample-tokens .earned { color: var(--yellow); }
.marketing-home .sample-choices { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--tablet-choice-gap); margin-top: var(--tablet-choice-space); }
.marketing-home .sample-choice { padding: var(--tablet-choice-padding); border: var(--tablet-choice-border) solid transparent; border-radius: var(--tablet-choice-radius); background: var(--surface); text-align: center; }
.marketing-home .sample-choice img { width: 100%; height: auto; aspect-ratio: 11 / 9; object-fit: cover; border-radius: var(--tablet-photo-radius); }
.marketing-home .sample-choice.is-match { border-color: var(--teal); background: var(--teal-tint); }
.marketing-home .tablet-star { position: absolute; top: calc(var(--tablet-star-offset) - var(--tablet-border)); right: var(--tablet-star-offset); width: var(--tablet-star-size); height: var(--tablet-star-size); fill: var(--yellow); stroke: var(--navy); stroke-width: var(--tablet-star-stroke); stroke-linejoin: round; pointer-events: none; }

.marketing-home .routine-intro { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.marketing-home .routine-photo { width: 100%; height: 360px; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.marketing-home .step-grid { margin-top: var(--space-section); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-lg); }
.marketing-home .step-card { background: var(--sky); border: 0; border-radius: var(--radius-card); padding: var(--space-lg); box-shadow: none; --vignette-accent: var(--blue); --badge-accent: var(--blue-deep); }
.marketing-home .step-card:nth-child(2) { background: var(--mint); --vignette-accent: var(--teal); --badge-accent: var(--teal-deep); }
.marketing-home .step-card:nth-child(3) { background: var(--coral-tint); --vignette-accent: var(--red); --badge-accent: var(--red-deep); }
.marketing-home .step-timing { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); }
.marketing-home .step-timing p { font-size: 12px; font-weight: 800; text-transform: uppercase; color: var(--navy); }
.marketing-home .step-card .step-number { width: var(--badge-size); height: var(--badge-size); flex: 0 0 var(--badge-size); display: grid; place-items: center; border-radius: 50%; margin: 0; background: var(--badge-accent); color: var(--surface); font-size: 17px; }
.marketing-home .step-visual { background: var(--surface); border-radius: var(--radius-choice-card); margin-bottom: var(--space-lg); }
.marketing-home .routine-vignette { display: block; width: 100%; height: var(--vignette-height); }
.marketing-home .vignette-wash { fill: var(--vignette-accent); fill-opacity: 0.14; }
.marketing-home .vignette-paper { fill: var(--paper); }
.marketing-home .vignette-accent { fill: var(--vignette-accent); }
.marketing-home .vignette-teal { fill: var(--teal); }
.marketing-home .vignette-gold { fill: var(--yellow); }
.marketing-home .vignette-ink { fill: var(--navy); }
.marketing-home .vignette-empty { fill: var(--token-empty-fill); stroke: var(--token-empty); stroke-width: var(--vignette-stroke); }
.marketing-home :is(.vignette-line,.vignette-accent-line,.vignette-white-line,.vignette-blue-line) { stroke-width: var(--vignette-stroke); stroke-linecap: round; stroke-linejoin: round; }
.marketing-home .vignette-line { stroke: var(--navy); }
.marketing-home :is(path.vignette-line,.vignette-accent-line,.vignette-white-line,.vignette-blue-line) { fill: none; }
.marketing-home rect.vignette-accent-line { fill: var(--paper); }
.marketing-home .vignette-accent-line { stroke: var(--vignette-accent); }
.marketing-home .vignette-white-line { stroke: var(--surface); }
.marketing-home .vignette-blue-line { stroke: var(--blue); }
.marketing-home :is(.section-note,.routine-link) { margin-top: var(--space-xl); }

.marketing-home .parent-app { background: var(--navy); }
.marketing-home .parent-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-section); align-items: center; }
.marketing-home .parent-app :is(h2,p,li,a,figcaption) { color: var(--surface); }
.marketing-home .parent-app .eyebrow { color: var(--sky); }
.marketing-home .parent-facts { padding-left: var(--space-md); margin-block: var(--space-lg); }
.marketing-home .parent-facts li::marker { color: var(--teal); }
.marketing-home .parent-facts li:nth-child(2)::marker { color: var(--yellow); }
.marketing-home .parent-facts li:nth-child(3)::marker { color: var(--red); }
.marketing-home .parent-screenshot { width: 100%; max-width: var(--phone-pair-width); margin-inline: auto; }
.marketing-home .phone-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); align-items: start; }
.marketing-home .phone-pair .phone-frame { padding: var(--space-xs); border-radius: var(--radius-card); }
.marketing-home .phone-pair .phone-frame img { border-radius: var(--radius-choice-card); }
@media (max-width: 1040px) { .marketing-home .parent-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .marketing-home .phone-pair { grid-template-columns: 1fr; justify-items: center; }
  .marketing-home .phone-pair .phone-frame { width: 100%; max-width: var(--phone-stack-width); box-sizing: border-box; }
}
.marketing-home .phone-frame { padding: var(--space-sm); background: var(--ink-soft); border-radius: var(--radius-tablet); box-shadow: var(--shadow-tablet); }
.marketing-home .phone-frame img { width: 100%; border-radius: var(--radius-card); }
.marketing-home .parent-screenshot figcaption { margin-top: var(--space-lg); text-align: center; }
.marketing-home .shared-activities { grid-column: 1 / -1; }
.marketing-home .shared-activities h3 { color: var(--surface); }
.marketing-home .shared-activities figcaption > p { margin-top: var(--space-sm); color: var(--sky); }
.marketing-home .shared-activities-flow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section); padding: 0; margin: var(--space-lg) 0 var(--space-md); list-style: none; }
.marketing-home .shared-activities-flow li { position: relative; min-width: 0; display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-choice-card); color: var(--navy); }
.marketing-home .shared-activities-agreement { background: var(--mint); }
.marketing-home .shared-activities-app { background: var(--sky); }
.marketing-home .shared-activities-flow strong { display: block; font-size: 20px; font-weight: 800; }
.marketing-home .shared-activities-flow p { margin-top: var(--space-xs); color: var(--ink-soft); }
.marketing-home .shared-activities-icons { display: flex; align-items: center; gap: var(--space-xs); flex: 0 0 auto; }
.marketing-home .shared-activities-icons svg { width: var(--tap-target); height: var(--tap-target); }
.marketing-home .shared-activities-icons span { font-size: 24px; color: var(--teal-deep); }
.marketing-home .shared-activities svg { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.marketing-home .shared-activities-phone { flex: 0 0 var(--tap-target); width: var(--tap-target); height: 60px; }
.marketing-home .shared-activities-arrow { position: absolute; width: 40px; height: var(--space-lg); left: calc(100% + var(--space-section) / 2); top: 50%; transform: translate(-50%, -50%); color: var(--yellow); }
.marketing-home .shared-activities .shared-activities-note { color: var(--sky); font-size: 14px; }
@media (max-width: 1040px) {
  .marketing-home .shared-activities-flow { gap: var(--space-xl); }
  .marketing-home .shared-activities-flow li { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .marketing-home .shared-activities-arrow { width: var(--space-lg); left: calc(100% + var(--space-xl) / 2); }
}
@media (max-width: 760px) {
  .marketing-home .shared-activities-flow { grid-template-columns: 1fr; gap: var(--space-section); }
  .marketing-home .shared-activities-arrow { width: var(--space-xl); left: 50%; top: calc(100% + var(--space-section) / 2); transform: translate(-50%, -50%) rotate(90deg); }
}

.marketing-home .while-waiting { background: var(--sun-tint); }
.marketing-home .while-waiting .eyebrow { color: var(--yellow-deep); }
.marketing-home .waiting-intro { max-width: 720px; }
.marketing-home .waiting-grid { margin: var(--space-xl) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-lg); }
.marketing-home .waiting-card { padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-card); }
.marketing-home .waiting-card svg { display: block; width: 44px; height: 44px; margin-bottom: var(--space-md); fill: none; stroke: var(--teal-deep); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.marketing-home .waiting-card:nth-child(2) svg { stroke: var(--yellow-deep); }
.marketing-home .waiting-card:nth-child(3) svg { stroke: var(--blue-deep); }
@media (max-width: 760px) { .marketing-home .waiting-grid { grid-template-columns: 1fr; } }
.marketing-home .clinic-panel { padding: var(--space-xl); border-radius: var(--radius-card); background: var(--teal-tint); display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: var(--space-section); }
.marketing-home .clinic-panel .eyebrow { color: var(--teal-deep); }
.marketing-home .clinic-panel h2 { font-size: 36px; }
.marketing-home .common-questions { background: var(--sun-tint); padding: 0; }
.marketing-home .common-questions .eyebrow { color: var(--yellow-deep); }
.marketing-home .question-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); margin-top: var(--space-xl); }
.marketing-home .group-label { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-body); font-size: 20px; color: var(--blue-deep); margin-bottom: var(--space-md); }
.marketing-home .group-label::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.marketing-home .clinic-questions .group-label { color: var(--teal-deep); }
.marketing-home .clinic-questions .group-label::before { background: var(--teal); }
.marketing-home .question { padding: var(--space-lg); border-radius: var(--radius-choice-card); background: var(--surface); margin-bottom: var(--space-sm); border: 0; }
.marketing-home .question summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); cursor: pointer; min-height: var(--tap-target); list-style: none; }
.marketing-home .question summary::-webkit-details-marker { display: none; }
.marketing-home .question summary::after { content: ''; width: 8px; height: 8px; flex-shrink: 0; border-bottom: 2px solid var(--navy); border-right: 2px solid var(--navy); transform: rotate(45deg); }
.marketing-home .question[open] summary::after { transform: rotate(225deg); }
.marketing-home .question h3 { font-size: 21px; }
.marketing-home .question p { margin-top: var(--space-sm); }
.marketing-home .team { --expertise-art-scale: 1.3; --expertise-label-size: var(--type-section); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-section); align-items: center; }
.marketing-home .expertise-graphic { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; max-width: var(--phone-width); aspect-ratio: 1; margin: 0 auto; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--mint); text-align: center; }
.marketing-home .expertise-graphic img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; transform: scale(var(--expertise-art-scale)); }
.marketing-home .expertise-graphic figcaption { margin-top: var(--space-md); color: var(--navy); font: 700 var(--expertise-label-size)/1.08 var(--font-display); }
.marketing-home .team-copy { max-width: var(--copy-width); }
.marketing-home .next-steps { background: var(--sky); }
.marketing-home .next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-top: var(--space-xl); }
.marketing-home .next-card { padding: var(--card-padding); background: var(--surface); border-radius: var(--radius-card); }
.marketing-home .next-card > .button { margin-top: var(--space-lg); }
.marketing-home .contact-panel { margin-top: var(--space-xl); max-width: var(--copy-width); }
.marketing-home .contact-panel summary { min-height: var(--tap-target); cursor: pointer; font-weight: 800; }
.marketing-home .contact-form { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; margin-top: var(--space-lg); }
.marketing-home .contact-form :is(input:not(.visually-hidden),textarea,select) { min-height: var(--button-height); border: 2px solid var(--hairline); border-radius: var(--radius-field); padding: var(--space-sm) var(--space-md); background: var(--surface); color: var(--navy); font: inherit; width: 100%; }
.marketing-home .contact-panel .contact-form :is(input,textarea):focus-visible { outline: var(--outline-width) solid var(--navy); outline-offset: var(--outline-width); box-shadow: none; }
.marketing-home .contact-form label { color: var(--navy); }
.marketing-home .waitlist-section { padding: 0; background: var(--blue-deep); }
.marketing-home .waitlist-section :is(h2,p,label,a) { color: var(--surface); }
.marketing-home .waitlist-copy { max-width: var(--copy-width); }
.marketing-home .waitlist-form { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) auto; gap: var(--space-md); align-items: end; max-width: 850px; }
.marketing-home .waitlist-form :is(input:not(.visually-hidden),select) { border-radius: var(--radius-pill); }
.marketing-home .waitlist-form .button { background: var(--yellow); color: var(--navy); }
.marketing-home .waitlist-form .button:hover { background: var(--sun-tint); color: var(--navy); }
.marketing-home .signup-note { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
.marketing-home .form-status { grid-column: 1 / -1; background: var(--surface); border-radius: var(--radius-field); padding: var(--space-sm); }
.marketing-home .form-status:is(.is-success,.is-error), .marketing-home .waitlist-section .form-status { color: var(--navy); }
.marketing-home .site-footer { max-width: none; display: block; padding: var(--space-section) 0 0; color: var(--navy); background: var(--surface); font-size: 14px; }
.marketing-home .footer-main { padding-block: 0 var(--space-section); }
.marketing-home .site-footer .footer-brand { min-width: var(--tap-target); min-height: var(--tap-target); font-size: var(--footer-brand-size); }
.marketing-home .footer-brand .brand-mark { width: var(--footer-mark-size); height: var(--footer-mark-size); }
.marketing-home .footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-xl); }
.marketing-home .footer-group h2 { color: var(--navy); font-size: var(--type-footer-heading); }
.marketing-home .footer-links { display: flex; justify-content: flex-start; gap: 0; margin: 0; padding: 0; list-style: none; }
.marketing-home .footer-link-list { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; margin-top: var(--space-sm); }
.marketing-home .site-footer .footer-links a { min-width: var(--tap-target); min-height: var(--tap-target); display: inline-flex; align-items: center; color: var(--blue-deep); }
.marketing-home .site-footer .footer-links a:hover { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 3px; }
.marketing-home .footer-legal { border-top: 1px solid var(--hairline); padding: var(--space-lg) 0; }
.marketing-home .footer-legal-inner { padding-block: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.marketing-home .footer-legal-links { flex-wrap: wrap; gap: var(--space-lg); }


@media (max-width: 1100px) {
  .marketing-home .site-nav { gap: var(--space-sm); }
  .marketing-home .hero-grid, .marketing-home .parent-grid { gap: var(--space-xl); }
}
@media (max-width: 1040px) {
  .marketing-home { --hero-text-offset: 0px; --hero-cloud-top: 0px; --hero-cloud-width: 140px; }
  .marketing-home .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-home .hero-devices { padding-top: 0; }
  .marketing-home .hero-device-stage { padding-bottom: 0; }
  .marketing-home :is(.hero-parent-phone,.hero-device-caption) { display: none; }
  .marketing-home .site-nav { position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--surface); padding: var(--space-lg) var(--gutter); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
  .marketing-home .site-header.is-open .site-nav { display: grid; }
  .marketing-home .clinic-panel { gap: var(--space-xl); }
}
@media (max-width: 760px) {
  .marketing-home { --gutter: 20px; --space-section: 56px; --hero-space: 28px; --hill-height: 150px; --hero-sun-size: 56px; --type-hero: clamp(40px, 10.5vw, 60px); }
  .marketing-home .hero-grid, .marketing-home .routine-intro, .marketing-home .parent-grid, .marketing-home .clinic-panel, .marketing-home .question-groups, .marketing-home .next-grid, .marketing-home .step-grid { grid-template-columns: 1fr; }
  .marketing-home .hero-grid { gap: var(--space-lg); padding-bottom: calc(var(--hill-height) + var(--space-xl)); }
  .marketing-home .hero-sun { left: auto; right: 0; top: 110px; }
  .marketing-home .hero-content .eyebrow { max-width: 100%; font-size: 12px; }
  .marketing-home .hero-cloud { display: none; }
  .marketing-home .team { grid-template-columns: 1fr; gap: var(--space-xl); }
  .marketing-home .hero-copy { font-size: 17px; }
  .marketing-home .hero-actions { flex-direction: column; }
  .marketing-home .hero-actions .button { width: 100%; }
  .marketing-home .hero-note { display: none; }
  .marketing-home .practice-tablet { box-shadow: none; }
  .marketing-home .routine-photo { height: auto; aspect-ratio: 4 / 3; }
  .marketing-home .step-grid { margin-top: var(--space-xl); }
  .marketing-home .waitlist-form { grid-template-columns: 1fr; }
  .marketing-home .waitlist-form :is(.signup-note,.form-status,.button) { grid-column: auto; grid-row: auto; }
  .marketing-home .footer-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .marketing-home *, .marketing-home *::before, .marketing-home *::after { transition: none; animation: none; }
}

@media (max-width: 760px) { .marketing-home .tablet-star { display: none; } }

/* Reset shared-page image and team presentation to the homepage layout. */
.marketing-home .phone-frame img { height: auto; }
.marketing-home .team { background: none; }
.marketing-home .team-band { background: var(--sky); }
.marketing-home .site-nav .nav-action:focus-visible { color: var(--surface); background: var(--navy); }
.marketing-home .footer-links a { color: var(--navy); }

.marketing-home :is(.parent-app,.waitlist-section) :is(a,button,input,select,summary):focus-visible { outline: var(--outline-width) solid var(--yellow); outline-offset: var(--outline-width); box-shadow: none; }

.marketing-home .footer-social { --social-icon-size: 24px; }
.marketing-home .footer-social .footer-link-list { flex-direction: row; gap: var(--space-sm); }
.marketing-home .footer-social .footer-links a { width: var(--tap-target); justify-content: center; }
.marketing-home .footer-social svg { width: var(--social-icon-size); height: var(--social-icon-size); }
.marketing-home .footer-social a[aria-label="Facebook"] svg,
.marketing-home .footer-social a[aria-label="LinkedIn"] svg { fill: currentColor; }

/* Shared rules for every page (moved from the page stylesheets). */
.marketing-home [hidden] { display: none !important; }
.marketing-home [tabindex]:focus-visible { outline: var(--outline-width) solid var(--navy); outline-offset: var(--outline-width); box-shadow: 0 0 0 var(--outline-width) var(--yellow); }

/* Secondary pages: every page except the homepage (ADR-0026, ADR-0027). */
:is(.marketing-child-demo,.marketing-clinic-demo,.marketing-get-started,.marketing-privacy,.marketing-subscriptions,.marketing-support,.marketing-terms) h1 { font-size: var(--type-hero); font-weight: 700; line-height: 1.08; text-wrap: balance; white-space: normal; overflow-wrap: anywhere; }
:is(.marketing-child-demo,.marketing-clinic-demo,.marketing-get-started,.marketing-privacy,.marketing-subscriptions,.marketing-support,.marketing-terms) .site-footer { padding-top: 0; }
/* Subscriptions offsets its intro band instead (subscriptions.css). */
:is(.marketing-child-demo,.marketing-clinic-demo,.marketing-get-started,.marketing-privacy,.marketing-support,.marketing-terms) main { padding-top: var(--header-height); }

/* Legal reading pages: Privacy, Terms and Support share one reading layout. */
:is(.marketing-privacy,.marketing-terms,.marketing-support) { --reading-width: 680px; --reading-heading-size: 28px; --reading-caption-size: 14px; }
:is(.marketing-privacy,.marketing-terms,.marketing-support) h2 { font-size: var(--reading-heading-size); font-weight: 600; line-height: 1.15; }
:is(.marketing-privacy,.marketing-terms,.marketing-support) .updated { margin-top: var(--space-md); color: var(--ink-soft); font-size: var(--reading-caption-size); font-weight: 800; }
.marketing-home :is(.privacy-reading,.terms-reading,.support-reading) { max-width: var(--reading-width); }
.marketing-home :is(.privacy-reading,.terms-reading,.support-body) p { max-width: var(--copy-width); }
.marketing-home :is(.privacy-reading,.terms-reading,.support-body) section + section { margin-top: var(--space-xl); }
.marketing-home :is(.privacy-reading,.terms-reading,.support-body) a { color: var(--blue-deep); font-weight: 800; text-decoration: underline; text-underline-offset: var(--outline-width); overflow-wrap: anywhere; }