/* site.css — beatriceapp.com marketing pages.
   doc.css still owns privacy / terms / support.

   ─── 🔴 THE BAND SYSTEM IS THE POINT OF THIS FILE ─────────────────────────
   Brian, 2026-08-25: the old page was "EXTREMELY text heavy and obviously AI
   generated. Design variability is not there." The diagnosis was structural
   rather than a matter of wording: eleven sections all ran
   eyebrow -> headline -> lede -> bullet list, all on white, forever.

   A BAND redefines the local palette (--ink, --ink-soft, --hair, --brass) and
   everything inside adapts with no per-element overrides. That is what makes
   alternating navy / sand / teal / wash / white cheap enough to actually do.

   RULES FOR ADDING A SECTION
   1. Do not repeat the LAYOUT TYPE of the section above it.
   2. Do not repeat the BAND COLOUR of the section above it.
   3. Mobile first. More than ~50 words means it belongs on its own page.

   ⚠️ Every band defines its palette explicitly for BOTH themes. A band that
   only sets light values inherits --ink from :root in dark mode and puts navy
   type on a dark brown field. */

/* ══ tokens ═════════════════════════════════════════════════════════════ */
:root{
  --paper:#FFFFFF; --raised:#FAF7F1; --raised-2:#F4EFE6;
  --ink:#2B3F6C; --ink-soft:#5C6684; --ink-faint:#656C87;
  --deep:#117E76; --deep-hi:#0E6A63; --on-deep:#FFFFFF;
  --brass:#7F6B3A; --link:#117E76;
  --wash-indigo:#E7EAF3; --wash-amber:#F5EDDD; --wash-moss:#E9F0E9;
  --wash-ochre:#F7F0E4; --wash-sea:#E4F2F1;
  --hair:rgba(43,63,108,.12); --hair-firm:rgba(43,63,108,.22);
  --shadow:0 1px 2px rgba(43,63,108,.05),0 12px 34px -12px rgba(43,63,108,.18);
  --shadow-lift:0 2px 6px rgba(43,63,108,.07),0 34px 64px -22px rgba(43,63,108,.32);
  /* Large and RESPONSIVE. A flat small radius is the strongest
     template tell; the designed sites run 60->30 or 64->48->32. */
  --r-lg:clamp(26px,5.5vw,44px); --r-md:clamp(18px,3.5vw,26px); --r-sm:14px;
  --plate-op:.95; --grain:.22;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12161F; --raised:#1B212F; --raised-2:#222937;
    --ink:#EDE9E0; --ink-soft:#A8AFC4; --ink-faint:#8A91A4;
    --deep:#5FD3C8; --deep-hi:#7BE0D6; --on-deep:#0C1622;
    --brass:#CBAE6E; --link:#5FD3C8;
    --wash-indigo:#1C2233; --wash-amber:#2A2419; --wash-moss:#1B241C;
    --wash-ochre:#2B2619; --wash-sea:#152826;
    --hair:rgba(237,233,224,.13); --hair-firm:rgba(237,233,224,.24);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 34px 68px -24px rgba(0,0,0,.7);
    --plate-op:.82; --grain:.14;
  }
}
:root[data-theme="dark"]{
  --paper:#12161F; --raised:#1B212F; --raised-2:#222937;
  --ink:#EDE9E0; --ink-soft:#A8AFC4; --ink-faint:#8A91A4;
  --deep:#5FD3C8; --deep-hi:#7BE0D6; --on-deep:#0C1622;
  --brass:#CBAE6E; --link:#5FD3C8;
  --wash-indigo:#1C2233; --wash-amber:#2A2419; --wash-moss:#1B241C;
  --wash-ochre:#2B2619; --wash-sea:#152826;
  --hair:rgba(237,233,224,.13); --hair-firm:rgba(237,233,224,.24);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45),0 34px 68px -24px rgba(0,0,0,.7);
  --plate-op:.82; --grain:.14;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 Karla,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;font-feature-settings:"kern" 1}
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::after{mix-blend-mode:screen}}

/* 🔴 height:auto is load-bearing. Images carry width/height attributes for
   layout stability; a rule setting only width leaves the ATTRIBUTE height in
   force and stretches them. That made the story lantern a 152x880 smear. */
img{max-width:100%;height:auto}
::selection{background:#E8D4B0;color:#2B3F6C}
a{color:var(--link);text-underline-offset:.22em;text-decoration-thickness:.06em}
:focus-visible{outline:2.5px solid currentColor;outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--raised);color:var(--ink);
  padding:.7rem 1.1rem;border-radius:8px;z-index:200}
.skip:focus{left:1rem;top:1rem}

/* ══ bands ══════════════════════════════════════════════════════════════ */
.band{position:relative;padding:clamp(3rem,9vw,6rem) 0;background:var(--bg,transparent);color:var(--ink)}
.band-sm{padding:clamp(1.9rem,5vw,3rem) 0}
.band-lg{padding:clamp(4rem,12vw,7rem) 0}
.wrap{position:relative;z-index:2;max-width:68rem;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}
.narrow{max-width:44rem}

.b-navy{--bg:#2B3F6C; --ink:#FAF7F1; --ink-soft:#C6CFE4; --ink-faint:#AEB9D2;
  --hair:rgba(250,247,241,.20); --hair-firm:rgba(250,247,241,.36);
  --brass:#E3CB8D; --link:#8FE8DD; --paper:#2B3F6C}
.b-sand{--bg:#E8D4B0; --ink:#243659; --ink-soft:#454F6B; --ink-faint:#515B77;
  --hair:rgba(36,54,89,.22); --hair-firm:rgba(36,54,89,.38);
  --brass:#655628; --link:#0C6861; --paper:#F3E6CD}
.b-teal{--bg:#0F7069; --ink:#FFFFFF; --ink-soft:#CFEEEA; --ink-faint:#C8E9E5;
  --hair:rgba(255,255,255,.26); --hair-firm:rgba(255,255,255,.44);
  --brass:#F3E1B0; --link:#FFFFFF; --paper:#0F7069}
/* 🔴 A TINTED BAND IS DARKER THAN WHITE, so tokens tuned against white stop
   clearing 4.5:1 on it. Measured: --link fell to 4.09 on indigo. These three
   are solved against the DARKEST wash, so swapping a band colour can never
   drop a pair below the bar. Do not "restore" the :root values here. */
.b-cream,.b-indigo,.b-amber,.b-moss,.b-ochre,.b-sea{
  --ink-faint:#626882; --brass:#7A6738; --link:#10756E;
}
.b-cream{--bg:var(--raised)}
.b-indigo{--bg:var(--wash-indigo)}
.b-amber{--bg:var(--wash-amber)}
.b-moss{--bg:var(--wash-moss)}
.b-ochre{--bg:var(--wash-ochre)}
.b-sea{--bg:var(--wash-sea)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .b-cream,:root:not([data-theme="light"]) .b-indigo,
  :root:not([data-theme="light"]) .b-amber,:root:not([data-theme="light"]) .b-moss,
  :root:not([data-theme="light"]) .b-ochre,:root:not([data-theme="light"]) .b-sea{
    --ink-faint:#8A91A4; --brass:#CBAE6E; --link:#5FD3C8;
  }
}
:root[data-theme="dark"] .b-cream,:root[data-theme="dark"] .b-indigo,
:root[data-theme="dark"] .b-amber,:root[data-theme="dark"] .b-moss,
:root[data-theme="dark"] .b-ochre,:root[data-theme="dark"] .b-sea{
  --ink-faint:#8A91A4; --brass:#CBAE6E; --link:#5FD3C8;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .b-sand{--bg:#3A3327; --ink:#F0E7D4; --ink-soft:#CBBEA2;
    --ink-faint:#B6A88B; --brass:#DFC58E; --link:#7FE3D8; --paper:#3A3327;
    --hair:rgba(240,231,212,.16); --hair-firm:rgba(240,231,212,.3)}
  :root:not([data-theme="light"]) .b-navy{--bg:#1A2440; --paper:#1A2440}
  :root:not([data-theme="light"]) .b-teal{--bg:#0C4F4A; --paper:#0C4F4A}
}
:root[data-theme="dark"] .b-sand{--bg:#3A3327; --ink:#F0E7D4; --ink-soft:#CBBEA2;
  --ink-faint:#B6A88B; --brass:#DFC58E; --link:#7FE3D8; --paper:#3A3327;
  --hair:rgba(240,231,212,.16); --hair-firm:rgba(240,231,212,.3)}
:root[data-theme="dark"] .b-navy{--bg:#1A2440; --paper:#1A2440}
:root[data-theme="dark"] .b-teal{--bg:#0C4F4A; --paper:#0C4F4A}

/* ══ type ═══════════════════════════════════════════════════════════════ */
h1,h2,h3,h4{font-family:Fraunces,ui-serif,Georgia,"Times New Roman",serif;
  font-variation-settings:"SOFT" 36,"WONK" 1;
  font-weight:600;letter-spacing:-.026em;line-height:1.06;margin:0;text-wrap:balance}
h1{font-size:clamp(2.6rem,8vw,4.5rem);line-height:1;letter-spacing:-.035em}
h2{font-size:clamp(2rem,5.5vw,3rem)}
h3{font-size:clamp(1.15rem,2.6vw,1.4rem);letter-spacing:-.016em;line-height:1.2}
p{margin:0;text-wrap:pretty}
.eyebrow{font-family:Karla,sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin:0 0 1rem;
  display:flex;align-items:center;gap:.7rem}
.eyebrow::before{content:"";width:1.7rem;height:2px;background:currentColor;flex:none;border-radius:2px}
.eyebrow.center{justify-content:center}
.lede{font-size:clamp(1.05rem,2.2vw,1.2rem);line-height:1.55;color:var(--ink-soft)}
.small{font-size:.88rem;line-height:1.55;color:var(--ink-faint)}
.hl{color:var(--brass)}
.center{text-align:center}
.center .eyebrow{justify-content:center}

/* ══ floating nav ═══════════════════════════════════════════════════════ */
.nav-outer{position:relative;z-index:20;padding:1rem clamp(1rem,4vw,2rem) 0}
.nav{max-width:66rem;margin:0 auto;display:flex;align-items:center;gap:.75rem;
  background:#FFFFFF;border-radius:999px;padding:.5rem .55rem .5rem 1.1rem;
  box-shadow:0 2px 4px rgba(20,28,50,.06),0 18px 40px -18px rgba(20,28,50,.4)}
:root[data-theme="dark"] .nav{background:#1B212F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nav{background:#1B212F}}
.mark{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none}
.mark svg{width:1.35rem;height:1.35rem;flex:none;color:#7F6B3A}
.mark span{font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.28rem;font-weight:700;letter-spacing:-.022em;color:#2B3F6C}
:root[data-theme="dark"] .mark span{color:#EDE9E0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mark span{color:#EDE9E0}}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:1.3rem;font-size:.93rem}
.nav .links a{color:#5C6684;text-decoration:none;font-weight:500}
.nav .links a[aria-current]{color:#2B3F6C;font-weight:700}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .nav .links a{color:#A8AFC4}
  :root:not([data-theme="light"]) .nav .links a[aria-current]{color:#EDE9E0}
}
.nav .cta{background:#117E76;color:#FFFFFF;border-radius:999px;padding:.58rem 1.05rem;
  font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.nav .cta:hover{background:#0E6A63}
@media (max-width:720px){.nav .links a.hide-s{display:none}.nav{padding-left:.95rem}.nav .links{gap:.85rem}}

/* ══ buttons ════════════════════════════════════════════════════════════ */
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:Karla,sans-serif;font-size:1rem;font-weight:700;
  padding:1rem 1.55rem;border-radius:999px;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1),background-color .18s,border-color .18s}
.btn-fill{background:#117E76;color:#FFFFFF}
.b-navy .btn-fill,.b-teal .btn-fill{background:#FAF7F1;color:#2B3F6C}
.btn-fill:hover{transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--hair-firm)}
.btn-line:hover{border-color:currentColor;transform:translateY(-2px)}
.btn .apple{width:1.1rem;height:1.1rem;flex:none}
.btn .stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.btn .stack i{font-style:normal;font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;opacity:.85;font-weight:600}
.btn .stack b{font-size:.99rem;font-weight:700}
@media (max-width:560px){.cta-row .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
[data-launch="soon"] .when-live{display:none}
[data-launch="live"] .when-soon{display:none}

/* ══ LAYOUT 1 — hero on a colour band ═══════════════════════════════════ */
.hero{overflow:hidden}
.hero .wrap{padding-top:clamp(2.25rem,7vw,4rem);padding-bottom:0}
.hero-rating{display:flex;align-items:center;gap:.5rem;margin-bottom:1.3rem;font-size:.88rem;color:var(--ink-soft)}
.hero-rating b{color:var(--ink);font-weight:700}
.hero-rating .dot{opacity:.5}
.hero h1{max-width:13ch}
.hero .lede{margin:1.25rem 0 0;max-width:31ch}
.hero .cta-row{margin-top:1.9rem}
.hero-note{margin-top:.95rem;font-size:.8rem;color:var(--ink-faint)}
.hero-art{position:relative;margin:clamp(1.25rem,5vw,2rem) auto -1px;max-width:21rem;
  display:block;width:100%;opacity:var(--plate-op)}
@media (min-width:900px){
  .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
    padding-bottom:clamp(2rem,5vw,3.5rem)}
  .hero-art{margin:0;max-width:25rem}
}

/* ══ LAYOUT 2 — stat band, nearly wordless ══════════════════════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;text-align:center;list-style:none;margin:0;padding:0}
.stats b{display:block;font-family:Fraunces,ui-serif,Georgia,serif;
  font-variation-settings:"SOFT" 44,"WONK" 1;
  font-size:clamp(1.7rem,5.5vw,2.8rem);font-weight:700;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.stats span{display:block;margin-top:.45rem;font-size:.76rem;line-height:1.3;color:var(--ink-soft)}
@media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr);gap:1.5rem 1rem}}

/* ══ LAYOUT 3 — horizontal scroll strip ═════════════════════════════════ */
.strip-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.3rem}
.strip-head .small{margin-left:auto;white-space:nowrap}
.strip{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.25rem clamp(1.25rem,5vw,3rem) 1.25rem;margin:0 calc(-1 * clamp(1.25rem,5vw,3rem));
  -webkit-overflow-scrolling:touch;scrollbar-width:none;list-style:none}
.strip::-webkit-scrollbar{display:none}
.strip li{flex:0 0 14.5rem;scroll-snap-align:start;background:var(--paper);
  border-radius:var(--r-md);padding:1.3rem;border:1px solid var(--hair);
  display:flex;flex-direction:column;gap:.85rem}
.strip img{width:3rem;height:3rem;object-fit:contain;opacity:var(--plate-op)}
.strip p{font-size:1rem;line-height:1.38;color:var(--ink)}
.b-navy .strip li,.b-teal .strip li{background:rgba(255,255,255,.10)}

/* ══ LAYOUT 4 — pull quote, almost no other text ════════════════════════ */
.pull{text-align:center;max-width:20ch;margin:0 auto}
.pull q{quotes:none;display:block;font-family:Fraunces,ui-serif,Georgia,serif;
  font-variation-settings:"SOFT" 48,"WONK" 1;
  font-size:clamp(2rem,7vw,3.3rem);line-height:1.08;letter-spacing:-.03em;font-weight:600}
.pull .small{margin-top:1.5rem;max-width:34ch;margin-left:auto;margin-right:auto}

/* ══ LAYOUT 5 — big linked pillar cards ════════════════════════════════ */
.pillars{display:grid;gap:1.1rem;list-style:none;margin:0;padding:0}
@media (min-width:820px){.pillars{grid-template-columns:1fr 1fr}}
.pcard{position:relative;display:flex;flex-direction:column;text-decoration:none;
  overflow:hidden;border-radius:var(--r-lg);padding:clamp(1.5rem,4vw,2.2rem);
  min-height:19rem;background:var(--pc,#E4F2F1);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.pcard .eyebrow{color:#6B5A2F}
.pcard h3{font-size:clamp(1.45rem,4vw,1.95rem);max-width:11ch;color:#243659;position:relative;z-index:2}
.pcard p{margin-top:.75rem;max-width:24ch;color:#454F6B;font-size:.97rem;line-height:1.45;position:relative;z-index:2}
.pcard .go{margin-top:auto;padding-top:1.3rem;font-weight:700;color:#0C6A63;font-size:.94rem;position:relative;z-index:2}
.pcard img{position:absolute;right:-1.25rem;bottom:-1.25rem;width:10rem;opacity:.9;
  pointer-events:none;z-index:1}
@media (prefers-reduced-motion:reduce){.pcard:hover{transform:none}}

/* ══ LAYOUT 6 — phone showcase, wordless ═══════════════════════════════ */
.shots{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem clamp(1.25rem,5vw,3rem) 1.4rem;margin:0 calc(-1 * clamp(1.25rem,5vw,3rem));
  scrollbar-width:none;list-style:none}
.shots::-webkit-scrollbar{display:none}
.shots li{flex:0 0 13rem;scroll-snap-align:center}
.shots figure{margin:0}
.shots .phone{border-radius:2rem;overflow:hidden;background:var(--paper);
  border:1px solid var(--hair-firm);padding:.32rem;box-shadow:var(--shadow-lift)}
.shots .phone img{display:block;width:100%;border-radius:1.75rem}
.shots figcaption{margin-top:.75rem;font-size:.84rem;color:var(--ink-soft);text-align:center}
@media (min-width:820px){.shots li{flex:0 0 15rem}}

/* ══ LAYOUT 7 — voice switcher, interactive, CSS only ══════════════════ */
.voice input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.vtabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.7rem;justify-content:center}
.vtabs label{cursor:pointer;padding:.52rem .95rem;border-radius:999px;
  border:2px solid var(--hair-firm);font-size:.92rem;font-weight:700;color:var(--ink-soft);
  user-select:none;transition:background-color .18s,border-color .18s,color .18s}
.vtabs label:hover{border-color:currentColor;color:var(--ink)}
.vstage{display:grid;max-width:32rem;margin:0 auto}
.vpanel{grid-area:1/1;display:none}
.vsay{font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 46,"WONK" 1;
  font-size:clamp(1.3rem,4.2vw,1.85rem);line-height:1.26;letter-spacing:-.02em;
  font-weight:600;text-align:center;color:var(--ink)}
.vwho{margin-top:1.1rem;text-align:center;font-size:.85rem;color:var(--ink-soft)}
#vs:checked~.vwrap .p-s,#vw:checked~.vwrap .p-w,#vb:checked~.vwrap .p-b,
#vp:checked~.vwrap .p-p,#vt:checked~.vwrap .p-t{display:block}
#vs:checked~.vwrap label[for=vs],#vw:checked~.vwrap label[for=vw],
#vb:checked~.vwrap label[for=vb],#vp:checked~.vwrap label[for=vp],
#vt:checked~.vwrap label[for=vt]{background:var(--ink);border-color:var(--ink);color:var(--bg,#fff)}
.voice input:focus-visible+label{outline:2.5px solid currentColor;outline-offset:3px}

/* ══ LAYOUT 8 — the refusal list ═══════════════════════════════════════ */
.nevers{list-style:none;margin:0;padding:0;display:grid;gap:.85rem;max-width:34rem}
.nevers li{display:flex;gap:.85rem;align-items:flex-start;font-size:1.01rem;line-height:1.42}
.nevers li::before{content:"";flex:none;width:1.1rem;height:1.1rem;margin-top:.2rem;
  border-radius:50%;border:2px solid currentColor;opacity:.4;
  background:linear-gradient(45deg,transparent 45%,currentColor 45%,currentColor 55%,transparent 55%)}

/* ══ signup ════════════════════════════════════════════════════════════ */
.signup form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem;max-width:31rem}
.signup input[type=email]{flex:1 1 13rem;min-width:0;font:400 1rem/1.2 Karla,sans-serif;
  color:var(--ink);background:var(--paper);border:2px solid var(--hair-firm);
  border-radius:999px;padding:.92rem 1.15rem}
.b-navy .signup input[type=email],.b-teal .signup input[type=email]{background:rgba(255,255,255,.13)}
.signup input[type=email]::placeholder{color:var(--ink-faint)}
.signup button{flex:0 0 auto;font:700 1rem/1.2 Karla,sans-serif;border-radius:999px;
  padding:.92rem 1.45rem;cursor:pointer;border:2px solid transparent;
  background:#117E76;color:#FFFFFF}
.b-navy .signup button,.b-teal .signup button{background:#FAF7F1;color:#2B3F6C}
.signup .fine{margin-top:.85rem;font-size:.81rem;color:var(--ink-faint)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:560px){.signup input[type=email],.signup button{width:100%;flex:1 1 100%}}

/* ══ faq ═══════════════════════════════════════════════════════════════ */
.faq{max-width:44rem}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;padding:1.1rem 2.3rem 1.1rem 0;position:relative;
  font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 40,"WONK" 1;
  font-size:1.05rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;width:.55rem;height:.55rem;
  border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);
  transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 0 1.15rem;color:var(--ink-soft);font-size:.97rem;max-width:58ch}

/* ══ article (story + blog) ════════════════════════════════════════════ */
.article{max-width:40rem;margin:0 auto}
.article-head{text-align:center}
.article-head h1{font-size:clamp(2rem,6vw,3.1rem)}
.byline{font-size:.85rem;color:var(--ink-faint)}
.article-head .byline{margin-top:1rem}
.article-plate{width:clamp(7rem,17vw,9.5rem);margin:1.9rem auto 0;display:block;opacity:var(--plate-op)}
.article-body{font-size:1.07rem;line-height:1.7}
.article-body>*+*{margin-top:1.25rem}
.article-body h2{font-size:clamp(1.32rem,3.4vw,1.7rem);margin-top:2.5rem;line-height:1.18}
.article-body p{color:var(--ink-soft)}
.article-body strong{color:var(--ink);font-weight:600}
.article-body ul,.article-body ol{margin:1.25rem 0;padding-left:1.2rem;color:var(--ink-soft)}
.article-body li{margin-bottom:.55rem}
.article-body li::marker{color:var(--brass)}
.article-body blockquote{margin:1.9rem 0;padding:1.25rem 1.45rem;background:var(--raised);
  border-left:3px solid var(--brass);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink);
  font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 44,"WONK" 1;
  font-size:1.12rem;line-height:1.4}
.article-body blockquote p{color:inherit}
.callout-box{background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-md);
  padding:1.25rem 1.35rem;margin:1.9rem 0}
.callout-box p{font-size:.96rem;color:var(--ink-soft)}
.callout-box b{color:var(--ink)}
.article-foot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--hair);
  font-size:.89rem;color:var(--ink-faint)}
.scene-band{position:relative;margin:2.4rem 0;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--hair);background:var(--raised)}
.scene-band img{display:block;width:100%;height:clamp(11rem,26vw,17rem);object-fit:cover;opacity:var(--plate-op)}
.scene-band figcaption{padding:.85rem 1.15rem;font-size:.85rem;color:var(--ink-faint);border-top:1px solid var(--hair)}
.pull-q{margin:2.3rem 0;padding-left:1.35rem;border-left:3px solid var(--brass)}
.pull-q p{font-family:Fraunces,ui-serif,Georgia,serif;font-variation-settings:"SOFT" 46,"WONK" 1;
  font-size:clamp(1.16rem,3vw,1.48rem);line-height:1.32;color:var(--ink);font-weight:600}
.pull-q cite{display:block;margin-top:.8rem;font-style:normal;font-size:.83rem;
  color:var(--ink-faint);font-family:Karla,sans-serif;font-weight:500}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:2.3rem 0}
.two-up div{background:var(--raised);border:1px solid var(--hair);border-radius:var(--r-md);padding:1.35rem}
.two-up h3{margin-bottom:.45rem;font-size:1rem}
.two-up p{font-size:.93rem;line-height:1.5;color:var(--ink-soft)}
@media (max-width:640px){.two-up{grid-template-columns:1fr}}

/* ══ blog index ════════════════════════════════════════════════════════ */
.cat-row{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem 0 1rem;list-style:none;margin:0;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat-row li{flex:0 0 auto}
.cat-row a{display:flex;align-items:center;gap:.5rem;padding:.42rem .85rem .42rem .42rem;
  border:2px solid var(--hair-firm);border-radius:999px;text-decoration:none;
  color:var(--ink);font-size:.89rem;font-weight:700;white-space:nowrap}
.cat-row a:hover{border-color:currentColor}
.cat-row img{width:1.85rem;height:1.85rem;border-radius:50%;object-fit:cover;flex:none;background:var(--raised-2)}
.feature{display:grid;background:var(--raised);border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair)}
.feature .txt{padding:clamp(1.5rem,4vw,2.5rem)}
.feature .art{background:var(--wash-ochre);display:grid;place-items:center;min-height:11rem;padding:1.4rem}
.feature .art img{width:58%;max-width:12rem;opacity:var(--plate-op)}
.feature h2{font-size:clamp(1.42rem,4vw,2rem);margin:.55rem 0 .75rem}
.feature h2 a{color:inherit;text-decoration:none}
.feature p{color:var(--ink-soft);font-size:.99rem;line-height:1.52}
@media (min-width:800px){.feature{grid-template-columns:1.15fr .85fr;align-items:center}.feature .art{min-height:100%;order:2}}
.posts{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--hair)}
.posts li{border-bottom:1px solid var(--hair)}
.posts a.row{display:grid;grid-template-columns:4.25rem 1fr;gap:1rem;align-items:center;
  padding:1.3rem 0;text-decoration:none;color:inherit}
.posts .thumb{width:4.25rem;height:4.25rem;border-radius:var(--r-sm);background:var(--wash-ochre);
  display:grid;place-items:center;overflow:hidden}
.posts .thumb img{width:72%;opacity:var(--plate-op)}
.posts h3{margin:.28rem 0 .38rem}
.posts p{color:var(--ink-soft);font-size:.93rem;line-height:1.48;max-width:56ch}
.tag{font-family:Karla,sans-serif;font-size:.63rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass)}
.posts .byline{margin-top:.4rem}

/* ══ footer ════════════════════════════════════════════════════════════ */
footer.site{background:#2B3F6C;color:#FAF7F1;padding:3rem 0 3.4rem;position:relative;z-index:1}
footer.site .mark span{color:#FAF7F1}
footer.site .mark svg{color:#E3CB8D}
.foot-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-cols h4{font-family:Karla,sans-serif;font-size:.67rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#E3CB8D;margin:0 0 .8rem}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.48rem}
.foot-cols a{color:#C6CFE4;text-decoration:none;font-size:.92rem}
.foot-cols a:hover{color:#FFFFFF}
.foot-note{margin-top:2.1rem;padding-top:1.4rem;border-top:1px solid rgba(250,247,241,.18);
  font-size:.81rem;color:#AEB9D2;max-width:56ch;line-height:1.5}
footer.site .small{color:#AEB9D2}
@media (max-width:760px){.foot-cols{grid-template-columns:1fr 1fr;gap:1.7rem}}

/* ══ motion ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .reveal{animation:rise both linear;animation-timeline:view();animation-range:entry 0% entry 45%}
    @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  }
  .in{animation:fade-up .8s cubic-bezier(.2,.7,.3,1) both}
  .in-1{animation-delay:.04s}.in-2{animation-delay:.14s}.in-3{animation-delay:.24s}
  .in-4{animation-delay:.34s}.in-5{animation-delay:.44s}
  @keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}


/* ══ LAYOUT 9 — intent router ═══════════════════════════════════════════
   Observed on 5 of 6 competitor sites: a one-tap segmenter in the top third,
   before any feature is explained (Headspace need-states, Fabulous hero quiz,
   Sweepy Track/Organize/Compete). One-word-ish labels on purpose: a heading
   that is one word cannot carry the eyebrow-headline-paragraph rhythm. */
.router{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.75rem}
@media (min-width:640px){.router{grid-template-columns:repeat(3,1fr)}}
.router a{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--ink);
  background:var(--paper);border:2px solid var(--hair-firm);border-radius:999px;
  padding:.7rem 1.3rem .7rem .7rem;font-weight:700;font-size:1.02rem;
  transition:border-color .18s,transform .18s;
}
@media (min-width:640px){.router a{flex-direction:column;gap:.7rem;border-radius:var(--r-md);
  padding:1.4rem 1rem;text-align:center;font-size:.98rem}}
.router a:hover{border-color:currentColor;transform:translateY(-2px)}
.router img{width:2.6rem;height:2.6rem;object-fit:contain;flex:none;opacity:var(--plate-op)}
@media (min-width:640px){.router img{width:3.4rem;height:3.4rem}}
@media (prefers-reduced-motion:reduce){.router a:hover{transform:none}}

/* Decorative subject-matter accents. The research note is that the designed
   sites scatter accents drawn from their OWN subject (Sweepy: spray, brush;
   Finch: sun, sky), never generic blobs. Beatrice has 8 wordless glyph marks. */
.accent{position:absolute;pointer-events:none;opacity:.5;width:3.5rem;z-index:1}
.accent.a1{top:12%;right:6%}
.accent.a2{bottom:14%;left:4%;width:2.6rem;opacity:.38}
@media (max-width:700px){.accent{display:none}}