/* ============================================================================
   Lenaya Health — marketing site
   ----------------------------------------------------------------------------
   Palette is sampled from the logo mark itself (assets/logo.png): a deep navy
   stroke, a sea-teal wave, and a warm blush wave. Nothing here is invented —
   the teal is also the action colour the iOS app already uses for its primary
   button, so "the button you tap" is one colour across print, web and app.

   Base size is 18px, not 16px. The PRD's primary persona is a patient in their
   60s-80s (docs/prd/AfterCare-PRD.md §6.3); this page is read by the same eyes.
   ========================================================================= */

/* Fonts are self-hosted (T6): loading them from Google told Google about every visitor. Latin + Latin-extended
   subsets only (covers English and Spanish), variable files from Google Fonts, SIL Open Font License — see
   assets/fonts/OFL-*.txt. */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/fraunces-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/source-sans-3-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme: light;

  /* --- from the mark ------------------------------------------------------ */
  --ink:      #10203a;   /* deepest navy — display type */
  --navy:     #1c3355;   /* brand navy — headings, dark bands */
  --slate:    #34506f;   /* the mark's lighter navy */
  --teal:     #4f918f;   /* the mark's sea teal */
  --teal-dp:  #2f6866;   /* darker teal — buttons, links on light */
  --teal-lt:  #e6f1f0;
  --blush:    #e0b6a6;   /* the mark's warm blush */
  --blush-lt: #fbf0ea;

  /* --- neutrals ----------------------------------------------------------- */
  --body:     #3f515e;
  --muted:    #6b7c89;
  --rule:     #dce4eb;
  --rule-sf:  #eaf0f4;
  --mist:     #f2f6f9;
  --paper:    #ffffff;

  /* --- carried from the printed collateral so links match the brochure ----- */
  --blue:     #2c6c98;

  /* --- type --------------------------------------------------------------- */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;

  /* --- measure ------------------------------------------------------------ */
  --shell: 1140px;
  --shell-tight: 760px;
  --gutter: clamp(20px, 5vw, 56px);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  /* No section is allowed to scroll the page sideways — a long unbroken word in
     future copy should be clipped, never turn the whole page into a slider. */
  overflow-x:hidden;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.65;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block }

a{ color:var(--blue); text-decoration-thickness:1px; text-underline-offset:3px }
a:hover{ color:var(--teal-dp) }

:focus-visible{
  outline:3px solid var(--teal-dp);
  outline-offset:3px;
  border-radius:3px;
}

/* Skip link — the page is long and keyboard users shouldn't tab the nav twice. */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 8px 0;
  font-weight:600;
}
.skip:focus{ left:0 }

/* ============================================================================
   Type scale
   ========================================================================= */

.d1,.d2,.d3{
  font-family:var(--display);
  font-optical-sizing:auto;
  color:var(--ink);
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.08;
  margin:0;
  text-wrap:balance;
}
.d1{ font-size:clamp(2.6rem, 6.2vw, 4.3rem) }
.d2{ font-size:clamp(2rem, 4.2vw, 3rem); line-height:1.12 }
.d3{ font-size:clamp(1.45rem, 2.4vw, 1.85rem); line-height:1.2 }

.eyebrow{
  font-family:var(--sans);
  font-size:0.775rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--teal-dp);
  margin:0 0 18px;
}
.eyebrow--onnavy{ color:var(--blush) }

.lede{
  font-size:clamp(1.1rem, 1.7vw, 1.32rem);
  line-height:1.55;
  color:var(--body);
  margin:22px 0 0;
  max-width:56ch;
  text-wrap:pretty;
}

.note{ font-size:0.94rem; color:var(--muted); line-height:1.55 }

/* ============================================================================
   Layout
   ========================================================================= */

.shell{ max-width:var(--shell); margin:0 auto; padding-inline:var(--gutter) }
.shell--tight{ max-width:var(--shell-tight) }

.band{ padding-block:clamp(64px, 9vw, 116px) }
.band--snug{ padding-block:clamp(44px, 6vw, 76px) }
.band--mist{ background:var(--mist) }
.band--navy{ background:var(--navy); color:#c9d7e4 }
.band--navy .d1,.band--navy .d2,.band--navy .d3{ color:#fff }
.band--blush{ background:var(--blush-lt) }

.rule-top{ border-top:1px solid var(--rule) }

/* The masthead is sticky, so anything the nav jumps to (#advisory, #data,
   #plans, #trial, #faq) would land underneath it. Reserve its height. */
:target,
section[id]{ scroll-margin-top:96px }
@media (max-width:960px){ section[id]{ scroll-margin-top:150px } }

.head{ max-width:40rem; margin-bottom:clamp(36px, 5vw, 60px) }
.head--center{ margin-inline:auto; text-align:center }
.head--center .lede{ margin-inline:auto }

/* ============================================================================
   Buttons
   ========================================================================= */

.btn{
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  font-family:var(--sans); font-size:1.02rem; font-weight:650;
  line-height:1; text-decoration:none;
  padding:17px 30px; border-radius:999px; border:1.5px solid transparent;
  transition:background-color .16s ease, color .16s ease, border-color .16s ease,
             transform .16s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }

.btn--go{ background:var(--teal-dp); color:#fff }
.btn--go:hover{ background:#255653; color:#fff }

.btn--line{ background:transparent; color:var(--navy); border-color:var(--rule) }
.btn--line:hover{ border-color:var(--slate); color:var(--navy) }

.btn--onnavy{ background:#fff; color:var(--navy) }
.btn--onnavy:hover{ background:var(--blush-lt); color:var(--navy) }

.btn--sm{ padding:12px 22px; font-size:0.94rem }

.btnrow{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px }
.btnrow--center{ justify-content:center }

/* ============================================================================
   Masthead
   ========================================================================= */

.mast{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule-sf);
}
.mast__in{
  max-width:var(--shell); margin:0 auto; padding:14px var(--gutter);
  display:flex; align-items:center; gap:clamp(18px, 3vw, 40px);
}
.mast__brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto }
.mast__brand img{ width:38px; height:38px }
.mast__word{
  font-family:var(--display); font-weight:600; font-size:1.34rem;
  color:var(--ink); letter-spacing:-0.02em; line-height:1;
}
.mast__nav{ display:flex; align-items:center; gap:clamp(12px, 1.8vw, 26px); margin-left:auto;
             flex-wrap:wrap; row-gap:8px; justify-content:flex-end }
.mast__link{
  font-size:0.98rem; font-weight:550; color:var(--navy); text-decoration:none;
  padding:6px 2px; border-bottom:2px solid transparent;
  /* A nav label that breaks mid-phrase frays the whole row. Spanish labels run
     about a fifth longer than English, so the row must wrap as a row. */
  white-space:nowrap;
}
.mast__link:hover{ color:var(--teal-dp); border-bottom-color:var(--teal) }
.mast__link[aria-current="page"]{ border-bottom-color:var(--navy); color:var(--ink) }
/* Advisory Board is a SECTION of this page, not a page, so clicking it correctly left Home
   underlined — literally true, and it read as broken. `location` rather than `page`: ARIA
   distinguishes the current page from the current place within it, so Home keeps its
   aria-current="page" (it IS still the page) and only gives up the underline while you are down
   in the section. Without JS nothing moves and the nav behaves exactly as it did before. */
.mast__link[aria-current="location"]{ border-bottom-color:var(--navy); color:var(--ink) }
.mast__nav--at-section .mast__link[aria-current="page"]{
  border-bottom-color:transparent; color:var(--navy);
}
.mast__sep{ width:1px; height:22px; background:var(--rule) }

/* On a narrow screen the nav WRAPS rather than scrolling sideways. A horizontal
   scroller hides its own overflow, and this audience should never have to
   discover a link by swiping a strip of text. */
@media (max-width:960px){
  .mast__in{ flex-wrap:wrap; row-gap:12px }
  .mast__nav{
    width:100%; min-width:0; margin-left:0;
    flex-wrap:wrap; justify-content:flex-start; gap:10px 18px;
  }
  .mast__sep{ display:none }
  .mast__nav .btn{ margin-left:auto }
}
@media (max-width:420px){
  .mast__nav .btn{ margin-left:0; width:100%; justify-content:center }
}

/* ============================================================================
   Language picker — two real links, not a JS toggle.

   Each language is its own URL (/ and /es/), so the choice is shareable, is
   what a crawler indexes via hreflang, and survives with JavaScript off. That
   last point is not academic: this site is what a Google OAuth verification
   reviewer opens, and its content must never depend on a script running.
   ========================================================================= */

.lang{ display:flex; align-items:center; gap:2px; flex:0 0 auto }
.lang a{
  font-size:0.84rem; font-weight:700; letter-spacing:.04em; color:var(--muted);
  text-decoration:none; padding:5px 9px; border-radius:7px; line-height:1;
}
.lang a:hover{ color:var(--navy); background:var(--mist) }
.lang a[aria-current="true"]{ color:var(--ink); background:var(--mist) }
.lang span{ color:var(--rule); font-size:0.8rem; user-select:none }

/* ============================================================================
   Hero
   ========================================================================= */

.hero{ padding-block:clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px) }
.hero__grid{
  display:grid; grid-template-columns:1.24fr .76fr;
  gap:clamp(36px, 5vw, 72px); align-items:center;
}
.hero__copy .d1{ font-size:clamp(2.5rem, 4.9vw, 3.6rem) }
.hero__copy .lede{ max-width:46ch }

/* The trial line sits directly under the buttons because it is the offer, not
   fine print — someone deciding whether to click needs it before they click. */
.hero__terms{ margin:18px 0 0; font-size:0.95rem; color:var(--muted); max-width:44ch }
.hero__terms strong{ color:var(--navy); font-weight:650 }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:40px }
  .hero__copy{ max-width:none }
}

/* ============================================================================
   Photography — every photo is a named slot.
   The <img> carries onerror="this.remove()", so before the real file lands the
   styled frame below shows through with a caption naming exactly what belongs
   there. That keeps the layout honest at every stage instead of showing a
   broken-image icon.
   ========================================================================= */

.shot{
  margin:0; position:relative; border-radius:20px; overflow:hidden;
  background:
    linear-gradient(135deg, var(--teal-lt) 0%, var(--mist) 52%, var(--blush-lt) 100%);
  border:1px solid var(--rule);
  min-height:220px;
  display:flex; align-items:center; justify-content:center;
}
.shot img{ width:100%; height:100%; object-fit:cover; position:relative; z-index:2 }
.shot::after{
  content:attr(data-slot);
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:28px 30px;
  font-size:0.92rem; line-height:1.5; font-weight:550; color:var(--slate);
  letter-spacing:0.01em;
}
.shot--tall{ aspect-ratio:4/5 }
.shot--wide{ aspect-ratio:16/10 }
.shot--square{ aspect-ratio:1/1 }
.shot--face{ aspect-ratio:1/1; border-radius:50% }

/* Once a real file is in the slot, the caption behind it must go. It is not
   enough that a photo covers it: the product screenshots are transparent PNGs
   of a device, and the caption would read straight through the glass. */
.shot:has(img)::after{ content:none }

/* Device screenshots are a floating phone or laptop, not a photograph, so they
   are CONTAINED on a tinted panel rather than cropped to fill one. Height comes
   from the image, which is why these carry no aspect-ratio modifier. */
.shot--device{
  border:0; border-radius:24px;
  padding:clamp(22px, 3.4vw, 46px) clamp(16px, 2.6vw, 38px);
  background:linear-gradient(160deg, var(--teal-lt) 0%, var(--mist) 55%, var(--blush-lt) 100%);
}
.shot--device img{
  width:auto; height:auto; max-width:100%; max-height:600px;
  object-fit:contain; margin-inline:auto;
}
.shot--device.shot--pane img{ max-height:none; width:100% }

/* A hairline of the mark's blush along the base of human photography — it warms
   the clinical rectangle without putting a filter over someone's face. */
.shot--warm{ border-bottom:4px solid var(--blush) }

.shot__cap{
  margin-top:12px; font-size:0.88rem; color:var(--muted); line-height:1.5;
}

/* ============================================================================
   Trust band — four claims, each one literally true of the product.
   ========================================================================= */

.claims{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px; background:var(--rule); border-block:1px solid var(--rule);
}
.claim{ background:var(--paper); padding:34px clamp(18px, 2.4vw, 30px) }
.claim__big{
  font-family:var(--display); font-size:clamp(1.6rem, 2.6vw, 2.15rem);
  font-weight:600; color:var(--ink); line-height:1.05; letter-spacing:-0.02em;
  display:block; margin-bottom:9px;
}
.claim__txt{ margin:0; font-size:0.96rem; color:var(--muted); line-height:1.5 }

@media (max-width:860px){ .claims{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:480px){ .claims{ grid-template-columns:1fr } }

/* ============================================================================
   THE RECALL GAP — the signature.

   The product exists because of one specific moment: the door closes, and
   twenty minutes later you cannot reconstruct what was said. This puts that
   moment on the left, literally coming apart, and the same visit in Lenaya on
   the right. It is the entire pitch in one figure, and it needs no photograph.
   ========================================================================= */

.gap{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(20px, 3.4vw, 48px); align-items:start;
}
/* The arrow is the one thing that should sit against the middle of the pair. */
.gap__arrow{ align-self:center }
.gap__label{
  font-size:0.78rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
  margin:0 0 22px;
}
.gap__side--before .gap__label{ color:var(--muted) }
.gap__side--after  .gap__label{ color:var(--teal-dp) }

/* Fragments of memory. Each one is set a little fainter and a little more
   italic than the last: the list itself decays as you read down it. */
.frags{ list-style:none; margin:0; padding:0 }
.frags li{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.08rem, 1.75vw, 1.3rem); line-height:1.5;
  color:var(--slate); margin:0 0 16px; padding-left:26px; position:relative;
}
.frags li::before{
  content:"“"; position:absolute; left:0; top:-2px;
  font-size:1.5em; color:var(--rule); line-height:1;
}
.frags li:nth-child(2){ opacity:.82 }
.frags li:nth-child(3){ opacity:.6 }
.frags li:nth-child(4){ opacity:.4 }
.frags li:last-child{
  font-style:normal; font-family:var(--sans); font-size:0.98rem;
  color:var(--muted); opacity:1; padding-left:26px; margin-top:22px;
}
.frags li:last-child::before{ content:none }

.gap__arrow{ display:flex; align-items:center; justify-content:center; color:var(--blush) }
.gap__arrow svg{ width:44px; height:44px }

/* The recap card — the app's own visit card, drawn in the page so it stays
   crisp at any size and carries no invented patient data into an image file. */
.recap{
  background:var(--paper); border:1px solid var(--rule); border-radius:18px;
  box-shadow:0 1px 2px rgba(16,32,58,.04), 0 14px 40px -22px rgba(16,32,58,.34);
  overflow:hidden;
}
.recap__top{
  padding:20px 24px 18px; border-bottom:1px solid var(--rule-sf);
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.recap__title{ font-weight:650; color:var(--ink); font-size:1.06rem; line-height:1.3 }
.recap__meta{ font-size:0.88rem; color:var(--muted); margin-top:3px }
.recap__pill{
  flex:0 0 auto; font-size:0.78rem; font-weight:700; letter-spacing:.02em;
  color:var(--teal-dp); background:var(--teal-lt); border-radius:999px; padding:5px 12px;
}
.recap__list{ list-style:none; margin:0; padding:8px 24px 22px }
.recap__list li{
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--rule-sf);
  font-size:1rem; line-height:1.45; color:var(--ink);
}
.recap__list li:last-child{ border-bottom:0 }
.recap__list svg{ width:19px; height:19px; flex:0 0 auto; margin-top:3px; color:var(--teal-dp) }
.recap__list span{ color:var(--muted); display:block; font-size:0.9rem; margin-top:2px }
/* Where the card came from. The product's whole claim is that this content is
   sourced from the patient's own visit, so the card says so on its face. */
.recap__src{
  display:flex; align-items:center; gap:9px;
  padding:12px 24px; border-top:1px solid var(--rule-sf); background:var(--teal-lt);
  font-size:0.85rem; font-weight:600; color:var(--teal-dp); line-height:1.4;
}
.recap__src svg{ width:15px; height:15px; flex:0 0 auto }

/* Two recap cards stacked — the app's to-do list and its plain-language summary
   are two SEPARATE tabs of a visit, so they are drawn as two cards, never one
   composite screen that implies a single view the app does not have. */
.recap-stack{ display:flex; flex-direction:column; gap:18px }
/* Reading-level chips on the summary card — the app offers Normal / Simpler /
   Detailed; the "on" chip is the one shown. */
.recap__levels{ display:flex; gap:8px; padding:16px 24px 4px; flex-wrap:wrap }
.recap__level{
  font-size:0.78rem; font-weight:650; letter-spacing:.02em; color:var(--muted);
  background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:5px 12px;
}
.recap__level--on{ color:var(--teal-dp); background:var(--teal-lt); border-color:transparent }
.recap__prose{ padding:8px 24px 20px; font-size:1rem; line-height:1.5; color:var(--ink) }

@media (max-width:880px){
  .gap{ grid-template-columns:1fr; gap:30px }
  .gap__arrow{ transform:rotate(90deg); margin-block:-6px }
}

/* ============================================================================
   Jargon — said / meant, as a two-column list.

   Deliberately NOT another before/after panel: the Recall Gap above already owns
   that shape, and repeating it would spend the page's one memorable device
   twice. This is a list, and it reads like a glossary because that is what it is.
   ========================================================================= */

.jargon{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
.jargon li{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(18px, 3vw, 44px);
  padding:22px 0; border-bottom:1px solid var(--rule); align-items:baseline;
}
.jargon__said{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.06rem, 1.6vw, 1.22rem); line-height:1.4; color:var(--slate);
}
.jargon__means{ font-size:1rem; line-height:1.55; color:var(--body) }
.jargon__means b{ color:var(--ink); font-weight:650 }

@media (max-width:760px){
  .jargon li{ grid-template-columns:1fr; gap:9px }
  .jargon__said{ color:var(--ink) }
}

/* ============================================================================
   Steps — a real sequence, so it is numbered. Ordering carries meaning here:
   you cannot get the to-do list before the visit is recorded.
   ========================================================================= */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,34px) }
.step{ border-top:2px solid var(--ink); padding-top:20px }
.step__n{
  font-family:var(--display); font-size:0.95rem; font-weight:600; color:var(--teal-dp);
  letter-spacing:.06em; display:block; margin-bottom:10px;
}
.step__h{ font-size:1.12rem; font-weight:650; color:var(--ink); margin:0 0 8px; line-height:1.3 }
.step p{ margin:0; font-size:0.99rem; color:var(--body); line-height:1.55 }

@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr } }

/* ============================================================================
   Split — photo one side, copy the other. Alternates by modifier, never by
   :nth-child, so the order can change without the layout flipping unexpectedly.
   ========================================================================= */

.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(34px, 5vw, 76px); align-items:center;
}
.split--flip .split__media{ order:2 }
.split__copy{ max-width:48ch }

@media (max-width:900px){
  .split{ grid-template-columns:1fr; gap:36px }
  .split--flip .split__media{ order:0 }
}

/* A short list with teal ticks, used inside split copy. */
.ticks{ list-style:none; margin:26px 0 0; padding:0 }
.ticks li{
  position:relative; padding-left:32px; margin-bottom:14px;
  font-size:1.02rem; line-height:1.55; color:var(--body);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:16px; height:9px; border-left:2.5px solid var(--teal-dp);
  border-bottom:2.5px solid var(--teal-dp); transform:rotate(-45deg);
}
.ticks strong{ color:var(--ink); font-weight:650 }

/* ============================================================================
   Advisory board
   ========================================================================= */

.board{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.4vw,48px) }

/* Advisory board — PROVISIONAL. The three clinicians have not confirmed, so the panel carries a
   "Pending" watermark rather than being deleted: the layout and copy stay reviewable, while a
   visitor cannot read the page as a claim that these people have signed on. The word is real text,
   not a background image, so a screen reader announces it too — the whole point is that nobody is
   misled. To go live: drop `board--pending` from the wrapper and delete the <p> beneath it. */
.board--pending{ position:relative }
.board--pending .advisor{ filter:grayscale(1); opacity:.3 }
.board__pending{
  position:absolute; inset:0; margin:0; z-index:2;
  display:grid; place-items:center; pointer-events:none;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(3rem,11vw,8.5rem); letter-spacing:.14em; line-height:1;
  color:rgba(28,51,85,.34); transform:rotate(-8deg);
}
@media (prefers-reduced-motion:no-preference){ .board__pending{ transition:none } }
.advisor{ display:flex; flex-direction:column }
.advisor .shot{ margin-bottom:22px; max-width:190px }
.advisor__name{
  font-family:var(--display); font-size:1.3rem; font-weight:600; color:var(--ink);
  margin:0 0 4px; letter-spacing:-0.015em; line-height:1.2;
}
.advisor__role{
  font-size:0.9rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-dp); margin:0 0 4px;
}
.advisor__where{ font-size:0.93rem; color:var(--muted); margin:0 0 18px }
.advisor__quote{
  margin:0; padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:1.06rem; line-height:1.55; color:var(--slate);
}

/* Names run to one or two lines depending on how many credentials trail them.
   Pinning the name block keeps each column's role, credentials and quote on the
   same baseline as its neighbours; without it the row reads as three unrelated
   cards. Only while they sit side by side — stacked, the space would be dead. */
@media (min-width:901px){ .advisor__name{ min-height:3.15em } }

@media (max-width:900px){
  /* One column makes the board very tall, and a centred watermark would sit BETWEEN advisors —
     read the first one and you would never see it. Pin it to the top so the word is read before
     the names it qualifies. The greying still covers all three either way. */
  .board__pending{ align-content:start; padding-top:14px; font-size:clamp(2.5rem,15vw,4.5rem) }
}
@media (max-width:900px){ .board{ grid-template-columns:1fr; gap:44px }
  .advisor .shot{ max-width:150px } }

/* ============================================================================
   Pull quote — one voice, large, on the navy band.
   ========================================================================= */

.pull{ max-width:24ch }
.pull__q{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(1.5rem, 3.1vw, 2.3rem); line-height:1.3; color:#fff;
  margin:0; letter-spacing:-0.01em;
}
.pull__by{ margin:26px 0 0; font-size:0.98rem; color:var(--blush) }
.pull__by b{ display:block; color:#fff; font-weight:650; margin-bottom:2px }

/* ============================================================================
   Plans (products page)
   ========================================================================= */

.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,28px) }
.plan{
  border:1px solid var(--rule); border-radius:18px; padding:30px 28px 32px;
  background:var(--paper); display:flex; flex-direction:column;
}
.plan--pick{ border-color:var(--teal-dp); border-width:2px; position:relative }
.plan__flag{
  position:absolute; top:-12px; left:26px;
  background:var(--teal-dp); color:#fff; font-size:0.73rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:5px 13px; border-radius:999px;
}
.plan__name{
  font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--ink);
  margin:0 0 6px; letter-spacing:-0.015em;
}
.plan__hook{ font-size:0.99rem; color:var(--teal-dp); font-weight:600; margin:0 0 20px; line-height:1.4 }
.plan__price{ display:flex; align-items:baseline; gap:7px; margin-bottom:6px }
.plan__amt{
  font-family:var(--display); font-size:2.5rem; font-weight:600; color:var(--ink);
  line-height:1; letter-spacing:-0.03em;
}
.plan__per{ font-size:0.96rem; color:var(--muted) }
.plan__yr{ font-size:0.88rem; color:var(--muted); margin:0 0 22px }
.plan ul{ list-style:none; margin:0 0 26px; padding:0 }
.plan li{
  position:relative; padding-left:24px; margin-bottom:12px;
  font-size:0.98rem; line-height:1.5; color:var(--body);
}
.plan li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--teal);
}
.plan .btn{ margin-top:auto; justify-content:center }

.addons{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,28px) }

@media (max-width:940px){ .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto }
  .addons{ grid-template-columns:1fr; max-width:520px; margin-inline:auto } }

/* ============================================================================
   Feature rows (products page)
   ========================================================================= */

.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3.2vw,44px) }
.feat__h{ font-size:1.16rem; font-weight:650; color:var(--ink); margin:18px 0 8px; line-height:1.3 }
.feat p{ margin:0; font-size:0.99rem; line-height:1.55; color:var(--body) }
.feat__ico{
  width:46px; height:46px; border-radius:13px; background:var(--teal-lt);
  color:var(--teal-dp); display:flex; align-items:center; justify-content:center;
}
.feat__ico svg{ width:23px; height:23px }
/* security.html: the HIPAA safeguard a card answers to. Two classes so it beats `.feat p`. */
.feat .feat__tag{
  margin:14px 0 0; font-size:0.78rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
@media (max-width:900px){ .feat{ grid-template-columns:1fr } }

/* ============================================================================
   FAQ
   ========================================================================= */

.faq{ border-top:1px solid var(--rule) }
.faq details{ border-bottom:1px solid var(--rule) }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 44px 24px 0; position:relative;
  font-size:1.1rem; font-weight:650; color:var(--ink); line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:8px; top:31px;
  width:11px; height:11px; border-right:2px solid var(--teal-dp);
  border-bottom:2px solid var(--teal-dp); transform:rotate(45deg);
  transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:36px }
.faq__a{ padding:0 0 26px; margin:0; max-width:68ch; color:var(--body) }
.faq__a p{ margin:0 0 14px }
.faq__a p:last-child{ margin-bottom:0 }

/* ============================================================================
   Data table — the "why we ask" disclosure. Google's OAuth reviewer reads this
   table; it must stay legible and must never move behind an interaction.
   ========================================================================= */

.disclose{ width:100%; border-collapse:collapse; margin-top:26px }
.disclose th,.disclose td{
  text-align:left; vertical-align:top; padding:16px 18px 16px 0;
  border-bottom:1px solid var(--rule); font-size:1rem; line-height:1.55;
}
.disclose th{
  font-size:0.78rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--teal-dp); font-weight:700; padding-bottom:12px;
}
.disclose td:first-child{ width:30%; color:var(--ink); font-weight:600; padding-right:28px }
@media (max-width:700px){
  .disclose,.disclose tbody,.disclose tr,.disclose td,.disclose th{ display:block }
  .disclose thead{ display:none }
  .disclose tr{ padding-block:18px; border-bottom:1px solid var(--rule) }
  .disclose td{ border:0; padding:0 0 6px; width:auto }
  .disclose td:first-child{ width:auto; padding-right:0 }
}

/* A bordered aside for a single load-bearing promise. */
.promise{
  border-left:4px solid var(--teal); background:var(--teal-lt);
  border-radius:0 14px 14px 0; padding:24px 28px; margin-top:32px;
}
.promise p{ margin:0; color:var(--ink); font-size:1.04rem; line-height:1.6 }

.caution{
  border-left:4px solid var(--blush); background:var(--blush-lt);
  border-radius:0 14px 14px 0; padding:24px 28px;
}
.caution p{ margin:0; color:var(--ink); font-size:1rem; line-height:1.6 }

/* ============================================================================
   Footer
   ========================================================================= */

.foot{ background:var(--ink); color:#9fb2c4; padding-block:clamp(52px,6vw,76px) 40px }
.foot a{ color:#cfdce8; text-decoration:none }
.foot a:hover{ color:#fff; text-decoration:underline }
.foot__grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:clamp(28px,3.4vw,48px); padding-bottom:44px;
}
.foot__brand{ display:flex; align-items:center; gap:11px; margin-bottom:16px }
.foot__brand img{ width:36px; height:36px }
.foot__word{ font-family:var(--display); font-size:1.26rem; font-weight:600; color:#fff; letter-spacing:-0.02em }
.foot__blurb{ margin:0; font-size:0.96rem; line-height:1.6; max-width:34ch }
.foot__h{
  font-size:0.76rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#fff; margin:0 0 16px;
}
.foot ul{ list-style:none; margin:0; padding:0 }
.foot li{ margin-bottom:11px; font-size:0.97rem }
.foot__base{
  border-top:1px solid rgba(255,255,255,.14); padding-top:28px;
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-size:0.9rem; color:#8299ad;
}
.foot__base p{ margin:0 }

@media (max-width:860px){ .foot__grid{ grid-template-columns:1fr 1fr } }
@media (max-width:520px){ .foot__grid{ grid-template-columns:1fr } }

/* ============================================================================
   Legal pages — privacy.html and terms.html keep their text verbatim and only
   borrow this chrome, so a policy edit is never a layout edit.
   ========================================================================= */

.legal{ padding-block:clamp(48px,6vw,84px) }
.legal h1{
  font-family:var(--display); font-size:clamp(2.1rem,4.4vw,3rem); font-weight:600;
  color:var(--ink); letter-spacing:-0.02em; line-height:1.12; margin:0 0 10px;
}
.legal h2{
  font-family:var(--display); font-size:clamp(1.3rem,2.1vw,1.6rem); font-weight:600;
  color:var(--ink); letter-spacing:-0.015em; line-height:1.25; margin:44px 0 12px;
}
.legal h3{ font-size:1.08rem; font-weight:650; color:var(--ink); margin:28px 0 8px }
.legal p,.legal li{ font-size:1.02rem; line-height:1.7 }
.legal ul,.legal ol{ padding-left:24px; margin:0 0 18px }
.legal li{ margin-bottom:9px }
.legal table{ width:100%; border-collapse:collapse; margin:18px 0 24px }
.legal th,.legal td{
  text-align:left; vertical-align:top; padding:13px 16px 13px 0;
  border-bottom:1px solid var(--rule); font-size:0.99rem; line-height:1.6;
}
.legal th{
  font-size:0.76rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--teal-dp); font-weight:700;
}
.legal .updated{ color:var(--muted); font-size:0.95rem; margin:0 0 8px }

/* ============================================================================
   Motion — one orchestrated reveal, and only on the signature figure.
   ========================================================================= */

/* The hidden state is gated on BOTH a motion preference and the `has-reveal`
   class, which only the script adds — and only after it has confirmed it can
   observe. If the script never runs, never loads, or throws, the figure is
   simply visible. Content must never depend on an animation to appear. */
@media (prefers-reduced-motion: no-preference){
  .has-reveal .rise{ opacity:0; transform:translateY(16px);
                     transition:opacity .6s ease, transform .6s ease }
  .has-reveal .rise.is-in{ opacity:1; transform:none }
  .has-reveal .rise:nth-child(2){ transition-delay:.09s }
  .has-reveal .rise:nth-child(3){ transition-delay:.18s }
}

@media print{
  .mast,.foot,.btnrow{ display:none }
  body{ font-size:11pt }
}