/* ============================================================================
   Lenaya Health — marketing site (2026-10 redesign)
   ----------------------------------------------------------------------------
   Look: a periwinkle sky behind the hero, a newspaper-style serif (Newsreader)
   over Public Sans, near-black buttons, soft grey panels, frosted-glass cards,
   and one accent — peach into azure — for numbers, rings and bars.
   Every class name the pages already use is kept, so a page needs no markup
   change to pick up the new look; the home page adds the floating cards.

   Base size stays 18px: the primary reader is in their 60s–80s (PRD §6.3).
   ========================================================================= */

/* Fonts are self-hosted (T6): loading them from Google told Google about every visitor. Latin + Latin-extended
   subsets only (covers English and Spanish), from Google Fonts, SIL Open Font License — see assets/fonts/OFL-*.txt. */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-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: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/newsreader-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: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/public-sans-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;

  /* --- ink and neutrals ----------------------------------------------------- */
  --ink:      #17181c;   /* headings, the primary button */
  --body:     #4a4f58;
  --muted:    #7d838d;
  --rule:     #e5e7eb;
  --rule-sf:  #eff0f3;
  --mist:     #f4f5f7;   /* the soft grey panels */
  --paper:    #ffffff;

  /* --- sky: the hero's periwinkle wash ----------------------------------------- */
  --sky-1:    #5a83d3;
  --sky-2:    #86a6e4;
  --sky-3:    #d6e2f6;
  --sky-4:    #eef3fc;
  --deep-1:   #22406f;   /* the "How it works" band */
  --deep-2:   #3d6299;

  /* --- the one accent: peach into azure, used for numbers, rings and bars ----- */
  --peach:    #f4bb8c;
  --azure:    #88c2f1;
  --grad:     linear-gradient(90deg, var(--peach), var(--azure));

  /* Legacy names other pages still use, mapped onto the new palette. */
  --navy:     var(--ink);
  --slate:    #5b6170;
  --teal:     var(--sky-1);
  --teal-dp:  #3b62ad;
  --teal-lt:  var(--sky-4);
  --blush:    var(--peach);
  --blush-lt: #fdf3ea;
  --blue:     #3b62ad;

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

  /* --- shape -------------------------------------------------------------- */
  --r-sm: 12px;
  --r:    20px;
  --r-lg: 28px;
  --lift: 0 1px 2px rgba(23,24,28,.04), 0 24px 56px -28px rgba(31,48,90,.34);

  /* --- measure ------------------------------------------------------------ */
  --shell: 1180px;
  --shell-tight: 780px;
  --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. */
  overflow-x:hidden;
  background:var(--paper);
  color:var(--body);
  font-family:var(--sans);
  /* 18px base stays: the primary reader is in their 60s–80s (PRD §6.3). */
  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(--ink) }

:focus-visible{
  outline:3px solid var(--sky-1);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
  font-weight:600;
}
.skip:focus{ left:0 }

/* ============================================================================
   Type — Newsreader for headings, Public Sans for everything else. Newsreader
   reshapes itself by size (optical sizing), so big headings stay crisp.
   ========================================================================= */

.d1,.d2,.d3{
  font-family:var(--display);
  color:var(--ink);
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.04;
  margin:0;
  text-wrap:balance;
}
.d1{ font-size:clamp(2.4rem, 4.4vw, 3.6rem); line-height:1.08 }
.d2{ font-size:clamp(1.9rem, 3.2vw, 2.6rem); line-height:1.1 }
.d3{ font-size:clamp(1.45rem, 2vw, 1.7rem); line-height:1.18 }

/* Eyebrows are small chips, the way the reference labels its sections. */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans);
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--mist);
  border-radius:999px;
  padding:7px 14px 7px 12px;
  margin:0 0 20px;
}
.eyebrow::before{
  content:""; width:8px; height:8px; border-radius:50%; background:var(--grad); flex:0 0 auto;
}
.eyebrow--onnavy{ color:#fff; background:rgba(255,255,255,.14) }
/* On a grey or tinted band the chip turns white, or it would vanish into the band. */
.band--mist .eyebrow, .band--blush .eyebrow{ background:#fff }

.lede{
  font-size:clamp(1.05rem, 1.45vw, 1.18rem);
  line-height:1.6;
  color:var(--body);
  margin:18px 0 0;
  max-width:56ch;
  text-wrap:pretty;
}

.note{ font-size:0.92rem; 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(56px, 7vw, 104px) }
.band--snug{ padding-block:clamp(40px, 5vw, 68px) }
/* Grey bands carry the reference's soft grey-to-white wash. */
.band--mist{ background:linear-gradient(180deg, var(--mist) 0%, #fafafb 100%) }
.band--navy{ background:var(--ink); color:#c4c9d3 }
.band--navy .d1,.band--navy .d2,.band--navy .d3{ color:#fff }
.band--blush{
  background:
    radial-gradient(120% 140% at 0% 0%, var(--sky-3) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, #fde9d8 0%, transparent 55%),
    var(--sky-4);
}

/* Every inner page opens on the same blue sky as the home page, white serif and all. */
main > section.band:first-child{
  background:linear-gradient(180deg, var(--sky-1) 0%, #7194dc 40%, var(--sky-2) 72%, var(--sky-3) 100%);
  color:#eef3fc; padding-block:clamp(64px, 8vw, 116px) clamp(64px, 8vw, 110px);
}
main > section.band:first-child .d1,
main > section.band:first-child .d2{ color:#fff }
main > section.band:first-child .lede{ color:rgba(255,255,255,.9) }
main > section.band:first-child .eyebrow{ color:#fff; background:rgba(255,255,255,.16) }
main > section.band:first-child .btn--line{
  background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5) }
main > section.band:first-child .btn--line:hover{ background:rgba(255,255,255,.26); border-color:#fff }
main > section.band:first-child a:not(.btn){ color:#fff }

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

:target,
section[id]{ scroll-margin-top:96px }
@media (max-width:960px){ section[id]{ scroll-margin-top:150px } }

.head{ max-width:42rem; margin-bottom:clamp(28px, 3.6vw, 48px) }
.head--center{ margin-inline:auto; text-align:center }
.head--center .lede{ margin-inline:auto }
.head--flush{ margin-bottom:0 }

/* ============================================================================
   Buttons — near-black primary, quiet secondary.
   ========================================================================= */

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

.btn--go{ background:var(--ink); color:#fff; box-shadow:0 10px 24px -14px rgba(23,24,28,.7) }
.btn--go:hover{ background:#2a2c33; color:#fff }

.btn--line{ background:var(--paper); color:var(--ink); border-color:var(--rule) }
.btn--line:hover{ border-color:var(--ink); color:var(--ink) }

.btn--onnavy{ background:#fff; color:var(--ink) }
.btn--onnavy:hover{ background:var(--sky-4); color:var(--ink) }

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

/* The masthead's call to action carries the reference's round arrow. */
.mast__nav .btn--go{ padding:9px 9px 9px 18px; gap:12px; border-radius:999px }
.mast__nav .btn--go::after{
  content:"→"; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:#fff; color:var(--ink); font-size:1rem; line-height:1;
}

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

/* ============================================================================
   Masthead — frosted glass over whatever is beneath it.
   ========================================================================= */

.mast{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.74);
  backdrop-filter:saturate(170%) blur(16px);
  -webkit-backdrop-filter:saturate(170%) blur(16px);
  border-bottom:1px solid rgba(23,24,28,.06);
}
.mast__in{
  max-width:var(--shell); margin:0 auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:clamp(18px, 3vw, 40px);
}
.mast__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto }
.mast__brand img{ width:34px; height:34px }
.mast__word{
  font-family:var(--display); font-weight:400; font-size:1.6rem;
  color:var(--ink); letter-spacing:-0.01em; line-height:1;
}
.mast__nav{ display:flex; align-items:center; column-gap:clamp(10px, 1.1vw, 16px); margin-left:auto;
             flex-wrap:wrap; row-gap:8px; justify-content:flex-end }
.mast__link{
  font-size:0.95rem; font-weight:500; color:var(--body); text-decoration:none;
  padding:6px 2px; border-bottom:1.5px solid transparent;
  white-space:nowrap;
}
.mast__link:hover{ color:var(--ink) }
.mast__link[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink) }
.mast__link[aria-current="location"]{ color:var(--ink); border-bottom-color:var(--ink) }
.mast__nav--at-section .mast__link[aria-current="page"]{
  border-bottom-color:transparent; color:var(--body);
}
.mast__sep{ width:1px; height:22px; background:var(--rule) }

@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
   ========================================================================= */

.lang{ display:flex; align-items:center; gap:2px; flex:0 0 auto;
       background:var(--mist); border-radius:999px; padding:3px }
.lang a{
  font-size:0.8rem; font-weight:600; letter-spacing:.04em; color:var(--muted);
  text-decoration:none; padding:5px 10px; border-radius:999px; line-height:1;
}
.lang a:hover{ color:var(--ink) }
.lang a[aria-current="true"]{ color:var(--ink); background:#fff; box-shadow:0 1px 3px rgba(23,24,28,.12) }
.lang span{ display:none }

/* ============================================================================
   Hero — the periwinkle wash, white serif, and the app floating over a photo.
   ========================================================================= */

.hero{
  position:relative; overflow:hidden;
  padding-block:clamp(56px, 7vw, 96px) clamp(88px, 10vw, 140px);
  background:linear-gradient(180deg, var(--sky-1) 0%, #7194dc 34%, var(--sky-2) 62%,
                             var(--sky-3) 88%, var(--sky-4) 100%);
  color:#eef3fc;
}
.hero .d1{ color:#fff }
.hero .eyebrow{ color:#fff; background:rgba(255,255,255,.16);
                backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.hero .lede{ color:rgba(255,255,255,.9) }
.hero .btn--line{ background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.5);
                  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px) }
.hero .btn--line:hover{ background:rgba(255,255,255,.26); border-color:#fff; color:#fff }

.hero__grid{
  display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(36px, 5vw, 72px); align-items:center;
}
.hero__copy .lede{ max-width:44ch }

.hero__terms{ margin:20px 0 0; font-size:0.92rem; color:rgba(255,255,255,.82); max-width:44ch }
.hero__terms strong{ color:#fff; font-weight:600 }

/* The photo stands on its own, framed like the reference's portrait. */
.hero__media{ position:relative; margin:0 clamp(0px, 3vw, 40px) 0 clamp(0px, 4vw, 56px) }
.hero__media .shot{ border-radius:var(--r-lg); box-shadow:0 40px 80px -40px rgba(20,36,80,.55) }

@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; gap:48px }
  .hero__copy{ max-width:none }
  .hero__media{ margin-inline:0; max-width:520px }
}

/* ============================================================================
   Photography — named slots (the frame shows its caption until the file lands).
   ========================================================================= */

.shot{
  margin:0; position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg, var(--sky-3) 0%, var(--mist) 55%, #fdeee2 100%);
  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.9rem; line-height:1.5; font-weight:500; color:var(--slate);
}
.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% }

.shot:has(img)::after{ content:none }

.shot--device{
  border-radius:var(--r-lg);
  padding:clamp(22px, 3.4vw, 46px) clamp(16px, 2.6vw, 38px);
  background:linear-gradient(160deg, var(--sky-3) 0%, var(--sky-4) 55%, #fdf1e7 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% }

/* Kept for markup compatibility; the new frames need no base line. */
.shot--warm{ border-bottom:0 }

/* A glass label pinned to a photo's corner, as in the reference. */
.shot__pill{
  position:absolute; z-index:3; left:16px; bottom:16px;
  font-size:0.8rem; font-weight:500; color:#fff;
  background:rgba(23,24,28,.42);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px; padding:7px 14px;
}
.shot__go{
  position:absolute; z-index:3; left:16px; top:16px;
  width:46px; height:46px; border-radius:50%; background:#fff;
  display:grid; place-items:center; color:var(--sky-1); font-size:1.25rem;
  box-shadow:0 6px 18px -8px rgba(23,24,28,.4);
}

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

/* ============================================================================
   Claims — four cards that lift out of the bottom of the hero.
   ========================================================================= */

.claims{
  position:relative; z-index:6;
  max-width:var(--shell); margin:calc(-1 * clamp(56px, 7vw, 88px)) auto 0;
  padding-inline:var(--gutter);
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
.claim{
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:var(--r); box-shadow:var(--lift);
  padding:24px clamp(18px, 2vw, 26px) 26px;
}
.claim__big{
  font-family:var(--display); font-size:clamp(1.7rem, 2.6vw, 2.2rem);
  font-weight:400; color:var(--ink); line-height:1.02; letter-spacing:-0.01em;
  display:block; margin-bottom:10px;
}
.claim__txt{ margin:0; font-size:0.93rem; 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 — memory coming apart, beside the same visit in Lenaya.
   ========================================================================= */

.gap{
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:clamp(20px, 3.4vw, 48px); align-items:start;
}
.gap__arrow{ align-self:center }
.gap__label{
  display:inline-block;
  font-size:0.74rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  margin:0 0 22px; padding:6px 12px; border-radius:999px; background:#fff;
}
.gap__side--before .gap__label{ color:var(--muted) }
.gap__side--after  .gap__label{ color:var(--ink) }

.frags{ list-style:none; margin:0; padding:0 }
.frags li{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 2vw, 1.6rem); line-height:1.35;
  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.4em; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.frags li:nth-child(2){ opacity:.78 }
.frags li:nth-child(3){ opacity:.56 }
.frags li:nth-child(4){ opacity:.36 }
.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(--sky-1) }
.gap__arrow svg{ width:28px; height:28px }
.gap__arrow{ width:56px; height:56px; border-radius:50%; background:#fff; box-shadow:var(--lift) }

/* The recap card — the app's own visit card, drawn in the page. */
.recap{
  background:var(--paper); border:1px solid var(--rule-sf); border-radius:var(--r);
  box-shadow:var(--lift);
  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:600; color:var(--ink); font-size:1.04rem; line-height:1.3 }
.recap__meta{ font-size:0.86rem; color:var(--muted); margin-top:3px }
.recap__pill{
  flex:0 0 auto; font-size:0.74rem; font-weight:600; letter-spacing:.02em;
  color:#2f5aa8; background:var(--sky-4); border-radius:999px; padding:5px 12px;
}
.recap__list{ list-style:none; margin:0; padding:8px 24px 22px }
/* The To-do tab's two parts (Appointments, then Checklist): a small label above each list in the mock card. */
.recap__section{ padding:14px 24px 0; font-size:0.8rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted) }
.recap__section + .recap__list{ padding-top:4px }
.recap__list li{
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--rule-sf);
  font-size:0.98rem; line-height:1.45; color:var(--ink);
}
.recap__list li:last-child{ border-bottom:0 }
.recap__list svg{ width:18px; height:18px; flex:0 0 auto; margin-top:3px; color:var(--sky-1) }
.recap__list span{ color:var(--muted); display:block; font-size:0.88rem; margin-top:2px }
.recap__src{
  display:flex; align-items:center; gap:9px;
  padding:12px 24px; border-top:1px solid var(--rule-sf); background:var(--sky-4);
  font-size:0.84rem; font-weight:500; color:#2f5aa8; line-height:1.4;
}
.recap__src svg{ width:15px; height:15px; flex:0 0 auto }

.recap-stack{ display:flex; flex-direction:column; gap:18px }
.recap__levels{ display:flex; gap:8px; padding:16px 24px 4px; flex-wrap:wrap }
.recap__level{
  font-size:0.76rem; font-weight:600; letter-spacing:.02em; color:var(--muted);
  background:var(--paper); border:1px solid var(--rule); border-radius:999px; padding:5px 12px;
}
.recap__level--on{ color:#fff; background:var(--ink); border-color:transparent }
.recap__prose{ padding:8px 24px 20px; font-size:0.98rem; line-height:1.55; color:var(--ink) }

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

/* ============================================================================
   Jargon — said / meant, as soft cards.
   ========================================================================= */

.jargon{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.jargon li{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(18px, 3vw, 40px);
  padding:20px 24px; border-radius:var(--r); background:var(--paper);
  border:1px solid var(--rule-sf); align-items:baseline;
}
.band:not(.band--mist) .jargon li{ background:var(--mist); border-color:transparent }
.jargon__said{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem, 1.9vw, 1.5rem); line-height:1.25; color:var(--ink);
}
.jargon__means{ font-size:0.98rem; line-height:1.55; color:var(--body) }
.jargon__means b{ color:var(--ink); font-weight:600 }

@media (max-width:760px){
  .jargon li{ grid-template-columns:1fr; gap:8px }
}

/* ============================================================================
   Steps — numbered, because it is a real sequence.
   Default: four cards. Inside .band--deep: glass panels over a tinted photo.
   ========================================================================= */

.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.step{
  background:var(--mist); border-radius:var(--r); padding:24px 22px 26px;
}

.step__h{ font-size:1.08rem; font-weight:600; color:var(--ink); margin:0 0 8px; line-height:1.3 }
.step p{ margin:0; font-size:0.96rem; 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 } }

/* The "How it works" band: a blurred, blue-tinted photograph behind glass. */
.band--deep{ position:relative; overflow:hidden; color:#dfe7f5; isolation:isolate }
.band--deep::before{
  content:""; position:absolute; inset:-30px; z-index:-2;
  background:url('/assets/hero-patient.jpg') center 30%/cover no-repeat;
  filter:blur(12px) saturate(.8);
}
.band--deep::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg, rgba(25,47,88,.88) 0%, rgba(44,74,128,.72) 55%, rgba(74,108,164,.58) 100%);
}
.band--deep .shell{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px, 5vw, 80px); align-items:center;
}
.band--deep .d2{ color:#fff }
.band--deep .head{ margin-bottom:0 }
.band--deep .eyebrow{ color:#fff; background:rgba(255,255,255,.14) }
.band--deep .steps{ grid-template-columns:1fr; gap:12px }
.band--deep .step{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-radius:16px; padding:18px 22px;
}
.band--deep .step__h{ color:#fff; font-size:1.12rem; margin:0 }
.band--deep .step p{ color:rgba(255,255,255,.8); margin-top:6px; font-size:0.95rem }

/* Feature cards and tick lists inside the deep band become frosted glass too. */
.band--deep .shell:has(> .feat){ display:block }
.band--deep .shell:has(> .feat) .head{ margin-bottom:clamp(28px, 3.6vw, 48px) }
.band--deep .feat > *{
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
.band--deep .feat__h{ color:#fff }
.band--deep .feat p{ color:rgba(255,255,255,.8) }
.band--deep .feat__ico{ background:rgba(255,255,255,.92); box-shadow:none }
.band--deep .feat .feat__tag{ color:rgba(255,255,255,.6) }
.band--deep .lede, .band--deep .note{ color:rgba(255,255,255,.82) }
.band--deep a:not(.btn){ color:#fff }
.band--deep .btn--go{ background:#fff; color:var(--ink); box-shadow:none }
.band--deep .btn--go:hover{ background:var(--sky-4); color:var(--ink) }
.band--deep .ticks{ margin:0; display:grid; gap:12px }
.band--deep .ticks li{
  margin:0; padding:16px 20px 16px 52px; border-radius:16px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:rgba(255,255,255,.82); font-size:0.96rem;
}
.band--deep .ticks li::before{ left:18px; top:18px; background:rgba(255,255,255,.92) }
.band--deep .ticks li::after{ left:25px; top:24px }
.band--deep .ticks strong{ color:#fff }

@media (max-width:900px){ .band--deep .shell{ grid-template-columns:1fr } }

/* ============================================================================
   Split — photo one side, copy the other.
   ========================================================================= */

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

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

.ticks{ list-style:none; margin:26px 0 0; padding:0 }
.ticks li{
  position:relative; padding-left:34px; margin-bottom:14px;
  font-size:1rem; line-height:1.55; color:var(--body);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.2em;
  width:22px; height:22px; border-radius:50%; background:var(--sky-4);
}
.ticks li::after{
  content:""; position:absolute; left:7px; top:calc(.2em + 6px);
  width:8px; height:5px; border-left:2px solid #2f5aa8;
  border-bottom:2px solid #2f5aa8; transform:rotate(-45deg);
}
.ticks strong{ color:var(--ink); font-weight:600 }

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

.board{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.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:400; text-transform:uppercase;
  font-size:clamp(3rem,11vw,8.5rem); letter-spacing:.12em; line-height:1;
  color:rgba(23,24,28,.3); transform:rotate(-8deg);
}
.advisor{ display:flex; flex-direction:column; background:var(--mist); border-radius:var(--r-lg); padding:24px }
.advisor .shot{ margin-bottom:22px; max-width:150px }
.advisor__name{
  font-family:var(--display); font-size:1.6rem; font-weight:400; color:var(--ink);
  margin:0 0 4px; letter-spacing:-0.01em; line-height:1.1;
}
.advisor__role{
  font-size:0.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:#2f5aa8; margin:0 0 4px;
}
.advisor__where{ font-size:0.92rem; 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.25rem; line-height:1.4; color:var(--slate);
}
@media (min-width:901px){ .advisor__name{ min-height:2.3em } }
@media (max-width:900px){
  /* Only as tall as the word: a full-height box tilted 8deg pokes past the phone's edge. */
  .board__pending{ bottom:auto; padding-top:14px; font-size:clamp(2rem,11vw,3.6rem) }
}
@media (max-width:900px){ .board{ grid-template-columns:1fr; gap:14px }
  .advisor .shot{ max-width:130px } }

/* ============================================================================
   Pull quote
   ========================================================================= */

.pull{ max-width:26ch }
.pull__q{
  font-family:var(--display); font-weight:400; font-style:italic;
  font-size:clamp(1.9rem, 3.8vw, 2.9rem); line-height:1.18; color:#fff;
  margin:0; letter-spacing:-0.01em;
}
.pull__by{ margin:26px 0 0; font-size:0.96rem; color:var(--peach) }
.pull__by b{ display:block; color:#fff; font-weight:600; margin-bottom:2px }

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

.plans{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }
.plan{
  border:1px solid var(--rule-sf); border-radius:var(--r-lg); padding:30px 28px 32px;
  background:var(--mist); display:flex; flex-direction:column;
}
.plan--pick{
  position:relative; background:var(--paper); border:1.5px solid var(--ink);
  box-shadow:var(--lift);
}
.plan__flag{
  position:absolute; top:-13px; left:26px;
  background:var(--ink); color:#fff; font-size:0.7rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 13px; border-radius:999px;
}
.plan__name{
  font-family:var(--display); font-size:2rem; font-weight:400; color:var(--ink);
  margin:0 0 6px; letter-spacing:-0.01em; line-height:1.05;
}
.plan__hook{ font-size:0.96rem; color:#2f5aa8; font-weight:500; 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:3.4rem; font-weight:400; color:var(--ink);
  line-height:1; letter-spacing:-0.02em;
}
.plan__per{ font-size:0.94rem; color:var(--muted) }
.plan__yr{ font-size:0.86rem; color:var(--muted); margin:0 0 22px }
.plan ul{ list-style:none; margin:0 0 26px; padding:0 }
.plan li{
  position:relative; padding-left:22px; margin-bottom:12px;
  font-size:0.96rem; line-height:1.5; color:var(--body);
}
.plan li::before{
  content:""; position:absolute; left:2px; top:.6em;
  width:7px; height:7px; border-radius:50%; background:var(--grad);
}
.plan .btn{ margin-top:auto; justify-content:center }

.addons{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px }

@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 cards
   ========================================================================= */

.feat{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.feat > *{ background:var(--mist); border-radius:var(--r-lg); padding:26px 26px 28px }
.band--mist .feat > *{ background:var(--paper) }
.feat__h{ font-size:1.12rem; font-weight:600; color:var(--ink); margin:18px 0 8px; line-height:1.3 }
.feat p{ margin:0; font-size:0.96rem; line-height:1.55; color:var(--body) }
.feat__ico{
  width:48px; height:48px; border-radius:50%; background:#fff;
  color:var(--sky-1); display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px -10px rgba(31,48,90,.45);
}
.band--mist .feat__ico{ background:var(--sky-4) }
.feat__ico svg{ width:22px; height:22px }
.feat .feat__tag{
  margin:14px 0 0; font-size:0.74rem; font-weight:600; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);
}
.feat--two{ grid-template-columns:repeat(2,1fr) }
@media (max-width:900px){ .feat, .feat--two{ grid-template-columns:1fr } }

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

.faq{ display:grid; gap:10px }
.faq details{ background:var(--mist); border-radius:var(--r); padding:0 24px }
.faq summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-size:1.06rem; font-weight:600; color:var(--ink); line-height:1.4;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; background:#fff;
  display:grid; place-items:center; font-size:1.2rem; font-weight:400; color:var(--ink);
  transition:transform .18s ease;
}
.faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg) }
.faq__a{ padding:0 0 24px; margin:0; max-width:68ch; color:var(--body) }
.faq__a p{ margin:0 0 14px }
.faq__a p:last-child{ margin-bottom:0 }

.promise{
  background:linear-gradient(120deg, var(--sky-4), #fdf3ea);
  border-radius:var(--r); padding:24px 28px; margin-top:28px; position:relative;
}
.promise::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px;
  border-radius:0 4px 4px 0; background:var(--grad);
}
.promise p{ margin:0; color:var(--ink); font-size:1.02rem; line-height:1.6 }

.caution{ background:#fdf3ea; border-radius:var(--r); padding:24px 28px; position:relative }
.caution::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px;
  border-radius:0 4px 4px 0; background:var(--peach);
}
.caution p{ margin:0; color:var(--ink); font-size:0.98rem; line-height:1.6 }

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

.foot{ background:#121317; color:#9aa0ab; padding-block:clamp(56px,6vw,84px) 40px }
.foot a{ color:#d6d9df; text-decoration:none }
.foot a:hover{ color:#fff; text-decoration:underline }
.foot__grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.3fr;
  gap:clamp(28px,3.4vw,48px); padding-bottom:44px;
}
.foot__brand{ display:flex; align-items:center; gap:10px; margin-bottom:16px }
.foot__brand img{ width:34px; height:34px }
.foot__word{ font-family:var(--display); font-size:1.6rem; font-weight:400; color:#fff; letter-spacing:-0.01em }
.foot__blurb{ margin:0; font-size:0.94rem; line-height:1.6; max-width:34ch }
.foot__h{
  font-size:0.72rem; font-weight:600; letter-spacing:.14em; 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.95rem }
.foot__base{
  border-top:1px solid rgba(255,255,255,.1); padding-top:28px;
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;
  font-size:0.88rem; color:#7d838d;
}
.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 — the text stays verbatim; only the chrome changes.
   ========================================================================= */

.legal{ padding-block:clamp(48px,6vw,84px) }
.legal h1{
  font-family:var(--display); font-size:clamp(2.3rem,4.2vw,3.2rem); font-weight:400;
  color:var(--ink); letter-spacing:-0.01em; line-height:1.04; margin:0 0 12px;
}
.legal h2{
  font-family:var(--display); font-size:clamp(1.7rem,2.6vw,2.1rem); font-weight:400;
  color:var(--ink); letter-spacing:-0.01em; line-height:1.12; margin:48px 0 12px;
}
.legal h3{ font-size:1.06rem; font-weight:600; color:var(--ink); margin:28px 0 8px }
.legal p,.legal li{ font-size:1rem; 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.97rem; line-height:1.6;
}
.legal th{
  font-size:0.74rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--muted); font-weight:600;
}
.legal .updated{ color:var(--muted); font-size:0.94rem; margin:0 0 8px }

/* ============================================================================
   Motion — the hidden state depends on the script having run, so content never
   waits 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 }
  .hero{ background:none; color:var(--body) }
  .hero .d1,.hero .lede,.hero .hero__terms{ color:var(--ink) }
  body{ font-size:11pt }
}

/* ============================================================================
   Security pages — the HIPAA safeguard map.
   ========================================================================= */

.ctl{ width:100%; border-collapse:collapse; font-size:0.96rem; line-height:1.5; color:var(--body) }
.ctl th,.ctl td{ text-align:left; vertical-align:top; padding:14px 16px; border-bottom:1px solid var(--rule) }
.ctl thead th{
  font-size:0.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  font-weight:600; border-bottom:1.5px solid var(--rule);
}
.ctl tbody th{ color:var(--ink); font-weight:600; width:24% }
.ctl td:last-child{ width:22%; color:var(--ink) }
@media (max-width:720px){
  .ctl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .ctl, .ctl tbody, .ctl tr, .ctl th, .ctl td{ display:block; width:auto }
  .ctl tbody th, .ctl td:last-child{ width:auto }
  .ctl tr{ padding:14px 0; border-bottom:1px solid var(--rule) }
  .ctl th, .ctl td{ border:0; padding:4px 0 }
  .ctl td:last-child::before{ content:attr(data-label) " · "; color:var(--muted); font-size:0.85rem }
}


/* ============================================================================
   From the template: a split section header (heading left, a line and a button
   right), a two-tone headline, and numbered panels with a big gradient number.
   ========================================================================= */

.head--split{
  max-width:none; display:grid; grid-template-columns:1.2fr .8fr;
  gap:clamp(24px, 4vw, 64px); align-items:end;
}
.head--split .lede{ margin:0; font-size:1rem; max-width:40ch }
.head--split .btnrow{ margin-top:18px }
@media (max-width:860px){ .head--split{ grid-template-columns:1fr; align-items:start } }

/* The second half of a headline, set softer — "From emotional support / to long-term healing". */
.soft{ color:#9ba1ab }
.band--deep .soft, main > section.band:first-child .soft{ color:rgba(255,255,255,.62) }

/* Rows, no boxes: label and heading | the points. */
.panels{ border-top:1px solid var(--rule); border-bottom:1px solid var(--rule) }
.panel{
  display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows:auto 1fr; column-gap:clamp(24px, 5vw, 80px);
  padding:clamp(32px, 4vw, 52px) 0; align-items:start;
}
.panel + .panel{ border-top:1px solid var(--rule) }
.panel .eyebrow{ grid-column:1; justify-self:start; margin-bottom:14px }
.panel .d3{ grid-column:1; margin:0; font-size:clamp(1.8rem, 2.8vw, 2.4rem); line-height:1.08 }
.panel > ul, .panel > p:not(.eyebrow){ grid-column:2; grid-row:1 / span 2; margin:0 }
.panel p{ font-size:1rem; line-height:1.65 }
.panel .ticks li{ font-size:1rem }
.panel .ticks li:last-child{ margin-bottom:0 }
@media (max-width:860px){
  .panel{ grid-template-columns:1fr; grid-template-rows:auto }
  .panel > ul, .panel > p:not(.eyebrow){ grid-column:1; grid-row:auto; margin-top:22px }
}


/* ============================================================================
   Feature list — the template's "How it works" rhythm without the boxes: the
   heading holds the left column, the items run down the right as numbered rows.
   ========================================================================= */

.band--deep .shell:has(> .feat--list){
  display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px, 6vw, 96px); align-items:start;
}
.band--deep .shell:has(> .feat--list) .head{ position:sticky; top:110px; margin-bottom:0 }
.band--deep .head .note{ margin-top:22px; max-width:36ch }

.feat--list{ display:block }
.feat--list > *,
.band--deep .feat--list > *,
.band--mist .feat--list > *{
  background:none; border:0; border-radius:0; padding:26px 0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  display:grid; grid-template-columns:44px 1fr; column-gap:20px;
  border-top:1px solid var(--rule);
}
.band--deep .feat--list > *{ border-top-color:rgba(255,255,255,.2) }
.feat--list > *:last-child{ border-bottom:1px solid var(--rule) }
.band--deep .feat--list > *:last-child{ border-bottom-color:rgba(255,255,255,.2) }

.feat--list .feat__ico{ grid-row:span 2; width:44px; height:44px; margin-top:2px }
.feat--list .feat__ico svg{ width:20px; height:20px }
.feat--list .feat__h{
  grid-column:2; margin:0 0 8px;
  font-family:var(--display); font-weight:400; font-size:clamp(1.5rem, 2.2vw, 1.85rem); line-height:1.12;
}
.feat--list p{ grid-column:2; max-width:60ch }

@media (max-width:900px){
  .band--deep .shell:has(> .feat--list){ grid-template-columns:1fr }
  .band--deep .shell:has(> .feat--list) .head{ position:static; margin-bottom:12px }
}


/* ============================================================================
   Support page: the form, its sent state, and the email alternative beside it.
   ========================================================================= */

.support{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px,4.5vw,72px); align-items:start }
@media (max-width:900px){ .support{ grid-template-columns:1fr } }

.form{
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--r-lg);
  box-shadow:var(--lift); padding:clamp(24px,3.6vw,48px);
}
.form[hidden]{ display:none }
.field{ margin-bottom:26px }
.field label{ display:block; font-weight:600; color:var(--ink); font-size:1.02rem; margin-bottom:10px }
.field input, .field textarea{
  display:block; width:100%; box-sizing:border-box; font:inherit; font-size:1.06rem; color:var(--ink);
  background:#fff; border:1.5px solid #cdd2da; border-radius:var(--r-sm); padding:15px 16px;
}
.field textarea{ min-height:220px; resize:vertical; line-height:1.55 }
.field input:focus, .field textarea:focus{ outline:3px solid var(--sky-3); outline-offset:1px; border-color:var(--sky-1) }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:#b3261e }
.field__hint{ margin:9px 0 0; font-size:0.92rem; color:var(--muted) }
.field__note{
  margin:12px 0 0; padding:12px 16px; border-radius:var(--r-sm);
  background:var(--sky-4); color:var(--ink); font-size:0.95rem; line-height:1.5;
}
.field__err{ margin:9px 0 0; font-size:0.92rem; color:#b3261e; font-weight:500 }
.trap{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px }
.form__foot .btn[disabled]{ opacity:.6; cursor:progress; transform:none }
/* Phones: the form's buttons take the full width and may wrap — "Enviar mensaje al equipo de soporte" is wider than
   a 390px screen in one line. */
@media (max-width:520px){ .form__foot .btn{ width:100%; justify-content:center; white-space:normal; text-align:center } }
.form__status{ margin:0; font-size:0.96rem; color:var(--body) }
.form__status--bad{ color:#b3261e; font-weight:500 }

.form--sent{ text-align:center; padding-block:clamp(40px,5vw,64px) }
.form--sent .d3{ margin:18px 0 10px }
.form--sent p{ margin:0 auto; max-width:40ch }
.form__ok{
  width:56px; height:56px; margin:0 auto; border-radius:50%; display:grid; place-items:center;
  background:var(--sky-4); color:var(--sky-1);
}
.form__ok svg{ width:28px; height:28px }

.support__aside{ display:grid; gap:20px }
.support__card{ background:var(--mist); border-radius:var(--r); padding:24px 28px }
.support__card p{ margin:0; overflow-wrap:anywhere }
.support__h{ font-family:var(--display); font-weight:400; font-size:1.4rem; color:var(--ink); margin:0 0 8px }
.support__aside .note{ margin:0 }

/* Support chat (support.html, es/support.html): a dialog of bubbles the script adds, a question box, and — in the
   card below — the message form. */
.assist__head{ display:flex; align-items:center; gap:10px; margin-bottom:12px }
.assist__bulb{
  flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center;
  color:#a96a0b; background:#fff4d6; border:1px solid #f2cf7c;
}
.assist__bulb svg{ width:18px; height:18px }
.chat__title{ font-family:var(--display); font-weight:400; font-size:1.4rem; color:var(--ink); margin:0 }
.chat__intro{ margin:0 0 20px; color:var(--body); font-size:0.98rem; line-height:1.55 }
.chat__log{ display:flex; flex-direction:column; gap:14px; max-height:520px; overflow-y:auto; margin:0 0 24px; padding-right:2px }
.chat__log:empty{ display:none }
.bubble{ max-width:88%; padding:12px 16px; border-radius:18px; font-size:0.98rem; line-height:1.55; overflow-wrap:anywhere }
.bubble p{ margin:0 }
.bubble--you{ align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:6px; white-space:pre-line }
.bubble--them{ align-self:flex-start; background:var(--sky-4); color:var(--ink); border:1px solid var(--sky-3); border-bottom-left-radius:6px }
.bubble .bubble__who{ margin:0 0 4px; font-size:0.82rem; font-weight:600; color:var(--body) }
.bubble__text{ white-space:pre-line }
.bubble .bubble__src, .bubble .bubble__more{ margin:10px 0 0; font-size:0.9rem; color:var(--body) }
.bubble__link{ background:none; border:0; padding:0; font:inherit; color:var(--ink); text-decoration:underline; cursor:pointer }
.bubble__link[disabled]{ opacity:.6; cursor:progress }
/* "You asked in Spanish": a faint line under the visitor's question when the answer came in another language. Its
   own row in the log, pulled up to 4px under the bubble (the log's gap is 14px), on the question's side. */
.chat__log .bubble__lang{ align-self:flex-end; max-width:88%; margin:-10px 0 0; text-align:right; font-size:0.82rem; font-style:italic; color:var(--muted) }
.chat__ask{ margin-bottom:0 }
.chat__row{ display:flex; gap:12px; align-items:flex-end }
.chat__row textarea{ flex:1; min-height:64px }
.chat__row .btn[disabled]{ opacity:.6; cursor:progress; transform:none }
.chat + .form{ margin-top:28px }
.form__lede{ margin:8px 0 26px; color:var(--body) }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
@media (max-width:520px){
  .chat__row{ flex-direction:column; align-items:stretch }
  .chat__row .btn{ justify-content:center }
  .bubble{ max-width:100% }
}
.dots{ display:inline-flex; gap:5px; padding:6px 0 }
.dots i{ width:8px; height:8px; border-radius:50%; background:var(--sky-1); opacity:.6 }
@media (prefers-reduced-motion: no-preference){
  .dots i{ animation:assist-dot 1.1s infinite ease-in-out }
  .dots i:nth-child(2){ animation-delay:.15s }
  .dots i:nth-child(3){ animation-delay:.3s }
  .bubble--in{ animation:assist-in .35s ease-out 1 }
}
@keyframes assist-dot{ 0%,80%,100%{ transform:scale(.6); opacity:.35 } 40%{ transform:scale(1); opacity:1 } }
@keyframes assist-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }
.btn[hidden]{ display:none }