/* ============================================================
   GLOW · SPARK — WEB LAYER
   ------------------------------------------------------------
   The Spark design system (spark/spark.css) is iOS-first: it
   owns the app's tokens, type registers, and in-app components.
   This file is the SANCTIONED WEB EXTENSION of Spark — the
   components a marketing website needs that the app never does:
   a sticky top nav, a hero grid, editorial feature-beat rows,
   the live device-embed frame, a footer, and the long-form
   legal/doc template.

   RULES (same spirit as spark.css):
   · Import spark.css FIRST — this file only adds web components,
     it never redefines a token or an app component.
   · Same palette (paper + ink), one living orb, three type
     registers, hairlines, square corners, flat. No new colors.
   · Load order in a web page:
       <link rel="stylesheet" href="spark/spark.css">
       <link rel="stylesheet" href="spark/spark-web.css">

   Web-unique components defined here:
     .topnav              sticky header + wordmark + nav links
     .appcta              App Store CTA (Spark ink rectangle)
     .hero / .orbstage    landing hero grid + orb stage
     .band / .statement-web   section rhythm + editorial statement
     .beat / .beats       alternating feature rows
     .phone / .appdevice / .appview   LIVE app-screen embed frame
     .community-band      belonging section
     .closing             closing CTA band
     .foot-site           site footer
     .doc / .faq          legal + support long-form template
     .reveal              scroll-reveal utility
     .page                hash-routed page switch
   ============================================================ */

html{ scroll-behavior:smooth; }
body{ margin:0; min-height:100vh; -webkit-font-smoothing:antialiased; }

/* pages swap via hash routing */
.page{ display:none; }
.page.on{ display:block; animation:pagein .5s var(--ease); }
@keyframes pagein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

/* shared page frame */
.wrap{ width:100%; max-width:1140px; margin:0 auto; padding:0 var(--screen-pad); box-sizing:border-box; }
section{ position:relative; }
.rule{ height:1px; background:var(--ink-10); }

/* ---- TOP NAV ---- */
.topnav{ position:sticky; top:0; z-index:50; }
.topnav .bar{
  display:flex; align-items:center; gap:24px; height:72px;
  border-bottom:1px solid transparent; transition:border-color var(--dur-view) var(--ease), background var(--dur-view) var(--ease); }
.topnav.stuck .bar{ border-bottom-color:var(--ink-10); background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.brand{ display:flex; align-items:center; gap:11px; cursor:pointer; background:none; border:none; padding:0; color:var(--ink); }
.brand .mark{ width:26px; height:26px; flex:0 0 auto; }
.brand .wm{ font-family:var(--font-display); font-style:italic; font-weight:600; font-size:25px; letter-spacing:0.02em; line-height:1; }
.navlinks{ display:flex; align-items:center; gap:28px; margin-left:auto; }
.navlink{ background:none; border:none; padding:0; cursor:pointer; color:var(--ink); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.09em; font-size:11px; font-weight:500; opacity:0.62; transition:opacity var(--dur-quick) ease; }
.navlink:hover, .navlink.active{ opacity:1; }
.navcta{ margin-left:4px; }

/* ---- APP STORE CTA — Spark ink rectangle, drawn not badged ---- */
.appcta{ display:inline-flex; align-items:center; gap:13px; height:58px; padding:0 26px; background:var(--ink); color:var(--paper); border:none; cursor:pointer; text-decoration:none; transition:transform var(--dur-quick) var(--ease); }
.appcta:active{ transform:scale(0.98); }
.appcta .apl{ width:22px; height:22px; flex:0 0 auto; fill:var(--paper); }
.appcta .lines{ display:flex; flex-direction:column; line-height:1; text-align:left; }
.appcta .lines .s{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.14em; font-size:8.5px; opacity:0.75; }
.appcta .lines .b{ font-size:17px; font-weight:600; margin-top:3px; letter-spacing:-0.01em; }

/* ---- HERO ---- */
.hero{ padding:72px 0 40px; overflow:visible; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px; align-items:center; }
.hero .copy{ max-width:520px; }
.eyebrow.solo{ justify-content:flex-start; }
.hero h1{ margin:22px 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(38px,5.4vw,62px); line-height:1.06; letter-spacing:-0.01em; text-wrap:balance; }
.hero .sub{ margin-top:22px; font-size:17px; line-height:1.62; color:var(--muted); max-width:440px; }
.hero .actions{ display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:36px; }
.orbstage{ position:relative; display:flex; align-items:center; justify-content:center; min-height:480px; }
.orbstage .tiername{ position:absolute; bottom:2px; left:50%; transform:translateX(-50%); text-align:center; }
.orbstage .tiername .lv{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:10px; font-weight:500; color:var(--muted); }
.orbstage .tiername .nm{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:24px; margin-top:4px; transition:opacity .4s ease; }

/* ---- SECTION RHYTHM + EDITORIAL STATEMENT ---- */
.band{ padding:88px 0; }
.band.tight{ padding:64px 0; }
.statement-web{ max-width:720px; }
.statement-web .eyebrow{ justify-content:flex-start; }
.statement-web .line{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(30px,4vw,44px); line-height:1.18; margin-top:20px; text-wrap:pretty; }
.statement-web .line .soft{ color:var(--muted); }

/* ---- FEATURE BEATS ---- */
.beats{ display:flex; flex-direction:column; gap:110px; }
.beat{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.beat.flip .txt{ order:2; }
.beat.flip .show{ order:1; }
.beat .txt{ max-width:440px; }
.beat h2{ margin:18px 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(28px,3.4vw,38px); line-height:1.14; text-wrap:balance; }
.beat p{ margin-top:18px; font-size:16px; line-height:1.62; color:var(--muted); }
.beat .mini{ display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--ink); }
.beat .mini svg{ flex:0 0 auto; }
.show{ display:flex; align-items:center; justify-content:center; }

/* ---- DEVICE MOCK — faithful app screen ----
   A phone frame showing a framed slice of a REAL app screen,
   rebuilt from GLOW App - Spark.html with the same Spark
   components (orb-slot, .level, .tl, .seal, .film, .chat,
   .feed/.post, etc.) so it mirrors the product exactly. Real
   orbs mount via spark/orb-slot.js. Content clips at the fold
   like a screenshot; .fade softens the cut. */
.phone{ position:relative; width:300px; flex:0 0 auto; }
/* LIVE app-screen embed — the real app (GLOW App - Spark.html) pinned to one
   view, non-interactive (pointer-events:none). The app is 402x874; we scale it
   to the 300px frame. Its own iOS status bar + bottom nav render for free, so
   every screen is pixel-accurate to the product and clips at the frame like a
   real phone. */
.appdevice{ position:relative; width:100%; aspect-ratio:300/652; border-radius:var(--r-frame); overflow:hidden; background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--ink-10), 0 34px 66px -30px rgba(40,30,10,0.30), 0 10px 24px -16px rgba(40,30,10,0.20); }
.appview{ position:absolute; top:0; left:0; width:402px; height:874px; border:0; display:block; background:var(--paper);
  transform:scale(0.74627); transform-origin:top left; pointer-events:none; }
.phone .device{ position:relative; width:300px; height:642px; background:var(--paper); border-radius:var(--r-frame); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--ink-10), 0 34px 66px -30px rgba(40,30,10,0.30), 0 10px 24px -16px rgba(40,30,10,0.20); }
.phone .device::before{ content:""; position:absolute; top:11px; left:50%; transform:translateX(-50%); width:98px; height:24px; border-radius:var(--r-pill); background:var(--ink); opacity:0.9; z-index:8; }
.screen{ position:absolute; inset:0; padding:50px 20px 20px; display:flex; flex-direction:column; overflow:hidden; }
.screen.center{ align-items:center; justify-content:center; text-align:center; padding-bottom:50px; }
.screen .schrome{ display:flex; align-items:center; justify-content:space-between; min-height:30px; margin-bottom:4px; }
.screen .schrome .sos{ display:flex; align-items:center; gap:6px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:10px; font-weight:600; }
.screen .sgreet{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:27px; line-height:1.03; text-transform:uppercase; display:flex; align-items:flex-start; gap:4px; }
.screen .ssub{ margin-top:6px; font-size:12.5px; color:var(--muted); line-height:1.45; }
.screen .fade{ position:absolute; left:0; right:0; bottom:0; height:64px; background:linear-gradient(180deg, transparent, var(--paper)); pointer-events:none; z-index:6; }
/* canonical iOS status bar — time left, cellular / wifi / battery right,
   flanking the dynamic island (.device::before). Same glyphs as the app. */
.statusbar{ position:absolute; top:0; left:0; right:0; z-index:7; height:40px; box-sizing:border-box; display:flex; align-items:flex-start; justify-content:space-between; padding:14px 22px 0; pointer-events:none; }
.statusbar .sbt{ font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0.01em; color:var(--ink); line-height:1; }
.statusbar .sbi{ display:flex; align-items:center; gap:6px; }
.statusbar .sbi svg{ display:block; }
.phone .cap{ margin-top:22px; text-align:center; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.14em; font-size:9.5px; color:var(--muted); }

/* ---- COMMUNITY BAND ---- */
.community-band .wrap{ display:grid; grid-template-columns:1fr 340px; gap:56px; align-items:center; }
.community-band .txt{ max-width:460px; }
.community-band h2{ margin:18px 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(30px,3.6vw,42px); line-height:1.12; }
.community-band p{ margin-top:20px; font-size:16px; line-height:1.62; color:var(--muted); }

/* ---- LONG-FORM PROSE (About) ---- */
.prose{ max-width:680px; }
.prose p{ font-size:17px; line-height:1.72; color:var(--muted); margin:22px 0 0; }
.prose p:first-child{ margin-top:0; }
.prose strong{ color:var(--ink); font-weight:600; }

/* ---- EVIDENCE (attributed science line) ---- */
.evidence .eb{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:10px; font-weight:600; color:var(--muted); }
.evidence .q{ margin-top:10px; font-size:15px; line-height:1.62; color:var(--ink); text-wrap:pretty; }
.evidence .src{ margin-top:8px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.09em; font-size:10px; color:var(--muted); }
.beat .evidence{ margin-top:26px; }
.community-band .evidence{ margin-top:24px; }
.thesis-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:44px; }
@media (max-width:760px){ .thesis-grid{ grid-template-columns:1fr; gap:32px; } }
.foot-note{ margin-top:40px; font-size:12px; line-height:1.6; color:var(--muted); max-width:660px; }

/* ---- BELIEFS (About) ---- */
.beliefs{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; }
.belief .n{ font-family:var(--font-mono); letter-spacing:0.18em; font-size:11px; font-weight:600; color:var(--muted); }
.belief h3{ margin:14px 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:26px; line-height:1.1; }
.belief p{ margin-top:12px; font-size:15px; line-height:1.6; color:var(--muted); }
@media (max-width:760px){ .beliefs{ grid-template-columns:1fr; gap:36px; } }

/* ---- CLOSING CTA ---- */
.closing{ text-align:center; padding:112px 0 96px; }
.closing .orbwrap{ display:flex; justify-content:center; margin-bottom:8px; }
.closing .big{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(36px,5vw,58px); line-height:1.08; }
.closing .sub{ margin:20px auto 0; max-width:400px; font-size:16px; color:var(--muted); line-height:1.6; }
.closing .actions{ display:flex; justify-content:center; margin-top:36px; }

/* ---- FOOTER ---- */
.foot-site{ border-top:1px solid var(--ink-10); padding:56px 0 64px; }
.foot-site .cols{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:start; }
.foot-site .foot-brand, .foot-site .foot-col{ min-width:0; }
.foot-site .brand .wm{ font-size:22px; }
.foot-site .tagline{ margin-top:16px; font-size:13.5px; color:var(--muted); line-height:1.6; max-width:300px; font-family:var(--font-body); text-transform:none; letter-spacing:normal; }
.foot-col h4{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.14em; font-size:10px; font-weight:500; color:var(--muted); margin:0 0 16px; }
.foot-col a, .foot-col button{ display:block; background:none; border:none; padding:0; cursor:pointer; text-align:left; color:var(--ink); text-decoration:none; font-size:14px; margin-bottom:12px; opacity:0.78; transition:opacity var(--dur-quick) ease; }
.foot-col a:hover, .foot-col button:hover{ opacity:1; }
.foot-legal{ border-top:1px solid var(--ink-10); margin-top:48px; padding-top:24px; display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; }
.foot-legal .c{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; font-size:10px; color:var(--muted); }
.foot-legal .ph{ margin-left:auto; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.08em; font-size:10px; color:var(--faint); }

/* ---- LEGAL / SUPPORT DOC TEMPLATE ---- */
.doc{ padding:56px 0 96px; }
.doc .wrap{ max-width:760px; }
.docback{ margin-bottom:36px; }
.draftflag{ display:inline-flex; align-items:center; gap:10px; padding:9px 15px; margin-bottom:32px; box-shadow:inset 0 0 0 1px var(--ink-13); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:10px; color:var(--muted); }
.draftflag .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink); flex:0 0 auto; }
.doc h1{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(36px,5vw,52px); line-height:1.05; margin:0; }
.doc .updated{ margin-top:14px; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.1em; font-size:10.5px; color:var(--muted); }
.doc .lede{ margin-top:28px; font-size:18px; line-height:1.6; color:var(--ink); max-width:640px; }
.doc h2{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.09em; font-size:12px; font-weight:600; color:var(--ink); margin:52px 0 0; padding-top:28px; border-top:1px solid var(--ink-10); }
.doc h3{ font-size:16px; font-weight:600; margin:28px 0 0; }
.doc p, .doc li{ font-size:15.5px; line-height:1.7; color:var(--muted); }
.doc p{ margin:14px 0 0; }
.doc ul{ margin:14px 0 0; padding-left:20px; }
.doc li{ margin-top:8px; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc .contactcard{ margin-top:32px; padding:28px; box-shadow:inset 0 0 0 1px var(--ink-10); }
.doc .contactcard .k{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.12em; font-size:10px; color:var(--muted); }
.doc .contactcard .v{ font-family:var(--font-display); font-style:italic; font-size:26px; margin-top:6px; }
.faq{ margin-top:8px; }
.faq details{ border-top:1px solid var(--ink-10); padding:22px 0; }
.faq details:last-child{ border-bottom:1px solid var(--ink-10); }
.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; font-size:16px; font-weight:600; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ margin-left:auto; transition:transform var(--dur-view) var(--ease); flex:0 0 auto; opacity:0.5; }
.faq details[open] summary .chev{ transform:rotate(180deg); }
.faq .ans{ font-size:15px; line-height:1.65; color:var(--muted); margin-top:14px; max-width:600px; }

/* ---- WAITLIST MODAL (web) ---- */
.waitlist-scrim{ position:fixed; inset:0; z-index:90; background:rgba(26,23,20,0.34); opacity:0; pointer-events:none; transition:opacity .28s var(--ease); }
.waitlist-scrim.on{ opacity:1; pointer-events:auto; }
.waitlist{ position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-46%); width:min(440px, calc(100vw - 40px)); box-sizing:border-box; background:var(--paper); box-shadow:0 0 0 1px var(--ink-10), 0 40px 80px -18px rgba(40,30,10,0.35); padding:38px 34px 32px; text-align:center; opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); }
.waitlist.on{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%); }
.waitlist .orb-slot{ margin:0 auto 18px; }
.wl-close{ position:absolute; top:14px; right:14px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:none; border:none; cursor:pointer; color:var(--ink); }
.wl-close:active{ transform:scale(0.94); }
.wl-eyebrow{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:10px; font-weight:600; color:var(--muted); }
.wl-title{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:33px; line-height:1.06; margin:10px 0 0; }
.wl-sub{ font-size:14.5px; line-height:1.6; color:var(--muted); margin:13px auto 0; max-width:342px; }
.wl-form{ margin-top:24px; text-align:left; }
.wl-form .field{ margin-bottom:14px; }
.wl-help{ font-size:12px; color:var(--muted); margin-top:14px; text-align:center; line-height:1.55; }
.wl-link{ background:none; border:none; padding:0; font:inherit; color:var(--ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.wl-done{ display:none; }
.wl-done.on{ display:block; animation:viewin .45s var(--ease); }
.wl-done-line{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:29px; }
.wl-done p{ font-size:14px; color:var(--muted); margin-top:10px; line-height:1.55; }
.waitlist.sent .wl-form{ display:none; }

/* ---- SCROLL REVEAL ---- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ---- RESPONSIVE ---- */
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; gap:8px; text-align:center; }
  .hero .copy{ margin:0 auto; }
  .hero .eyebrow.solo, .hero .actions{ justify-content:center; }
  .hero .sub{ margin-left:auto; margin-right:auto; }
  .orbstage{ order:-1; min-height:340px; }
  .beat, .beat.flip{ grid-template-columns:1fr; gap:36px; text-align:center; }
  .beat .txt{ margin:0 auto; order:2; }
  .beat .show{ order:1; }
  .beat .eyebrow, .beat .mini{ justify-content:center; }
  .community-band .wrap{ grid-template-columns:1fr; text-align:center; gap:40px; justify-items:center; }
  .community-band .eyebrow{ justify-content:center; }
  .foot-site .cols{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .navlinks .navlink{ display:none; }
  .navlinks .navcta{ display:inline-flex; }
  .band{ padding:64px 0; }
  .beats{ gap:80px; }
  .foot-site .cols{ grid-template-columns:1fr; gap:32px; }
}

/* ============================================================
   WEB LAYER — additions for the long-form landing argument
   (13-section spec). Same rules: paper + ink, hairlines, flat,
   square except pills + frame. All reusable web patterns.
   ============================================================ */

/* ---- SECTION LABEL — the small mono kicker above a feature ---- */
.seclabel{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.18em; font-size:11px; font-weight:600; color:var(--muted); }

/* ---- EMPATHY / TEXT-FORWARD BAND (problem, built-for-women) ----
   A calm, wide statement + reframe. Larger measure than a plain
   .statement-web; the reframe lede sits under the display line. */
.turn{ max-width:780px; }
.turn .line{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(30px,4.2vw,46px); line-height:1.14; margin-top:20px; text-wrap:pretty; }
.turn .lede2{ margin-top:26px; font-size:17px; line-height:1.7; color:var(--muted); max-width:600px; }
.turn .lede2 strong{ color:var(--ink); font-weight:600; }
.turn .lede2 + .lede2{ margin-top:18px; }
.turn .evidence{ margin-top:34px; max-width:560px; }

/* ---- FOUNDER / THESIS STRIP (bridge to About) ----
   Portrait (user-fillable image-slot) + short credibility copy
   and a link to the About page. Two columns, portrait left. */
.founder .wrap{ display:grid; grid-template-columns:340px 1fr; gap:64px; align-items:center; }
.founder .portrait{ width:340px; height:420px; }
.founder image-slot{ display:block; width:100%; height:100%; box-shadow:inset 0 0 0 1px var(--ink-10); }
.founder .txt{ max-width:460px; }
.founder h2{ margin:18px 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(28px,3.4vw,40px); line-height:1.12; text-wrap:balance; }
.founder p{ margin-top:20px; font-size:16px; line-height:1.68; color:var(--muted); }
.founder .cta{ margin-top:26px; }

/* ---- MARQUEE / LEAD FEATURE (no-shame engine) ----
   The features section opens with this: a beat with a section
   label, a pulled Cormorant caption under the phone, and a quiet
   3-up evidence row beneath. First, not loudest. */
.beat .caphero{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:20px; line-height:1.34; color:var(--ink); max-width:300px; text-wrap:pretty; }
.beat .caphero .soft{ color:var(--muted); }
.show.stack{ flex-direction:column; gap:22px; }
.evidence-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:64px; padding-top:40px; border-top:1px solid var(--ink-10); }

/* ---- NOVA SUB-CARDS (the three rules) ----
   Cormorant title · speech body · quiet evidence line. Hairline
   top rule per card, in the flow — no boxes. */
.subcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; margin-top:64px; }
.subcard{ border-top:1px solid var(--ink-18); padding-top:22px; }
.subcard h3{ margin:0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:24px; line-height:1.14; }
.subcard p{ margin-top:12px; font-size:15px; line-height:1.62; color:var(--muted); }
.subcard .evidence{ margin-top:20px; }

/* ---- DUAL-PHONE SHOW (glow-up: progress + capsule; nova x2) ----
   Two phones staggered in one show column. */
.show.duo{ gap:24px; align-items:flex-end; }
.show.duo .phone{ width:244px; }
.show.duo .phone:last-child{ margin-bottom:40px; }

/* ---- TRUST & SAFETY STRIP (near footer) ---- */
.trust{ padding:48px 0; }
.trust .wrap{ max-width:820px; }
.trust .box{ border-top:1px solid var(--ink-10); border-bottom:1px solid var(--ink-10); padding:32px 0; }
.trust .tlabel{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:0.16em; font-size:10px; font-weight:600; color:var(--muted); }
.trust p{ margin-top:14px; font-size:14px; line-height:1.7; color:var(--muted); max-width:720px; }
.trust p strong{ color:var(--ink); font-weight:600; }

/* ---- TWO-UP compact cards (community + craving) ----
   Two light features side by side, each: label \u00b7 Cormorant title \u00b7
   speech line \u00b7 a small phone. Kept deliberately light, not full bands. */
.twoup{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.twoup .card{ display:flex; flex-direction:column; gap:18px; }
.twoup .card h3{ margin:6px 0 0; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(24px,2.6vw,30px); line-height:1.15; text-wrap:pretty; }
.twoup .card p{ margin:0; font-size:15px; line-height:1.64; color:var(--muted); max-width:40ch; }
.twoup .card .phone{ width:238px; margin-top:8px; }

/* ---- Nova standalone visual (generous, centered) ---- */
.show.center{ justify-content:center; }
.show.center .phone{ width:288px; }

/* ---- RESPONSIVE (additions) ---- */
@media (max-width:900px){
  .founder .wrap{ grid-template-columns:1fr; gap:36px; justify-items:center; text-align:center; }
  .founder .portrait{ width:min(340px,80vw); height:auto; aspect-ratio:34/42; }
  .founder .txt{ margin:0 auto; }
  .founder .cta{ justify-content:center; }
  .subcards{ grid-template-columns:1fr; gap:36px; }
  .evidence-row{ grid-template-columns:1fr; gap:32px; }
  .beat .caphero{ margin:0 auto; }
  .show.duo{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
  .show.duo .phone:last-child{ margin-bottom:0; }
  .twoup{ grid-template-columns:1fr; gap:52px; }
  .twoup .card{ align-items:flex-start; }
}