/* WappGPT v6 — extracted from the former single-file page */
/* ============================================================
   v4 — light beige, WhatsApp green.

   The ground is #ECE5DD, which is WhatsApp's own chat wallpaper.
   Grigoletti's beige is #EBE9E4 — one point apart. So the phone
   in the hero is not pasted onto the page, it is the same colour
   as the page. That is the whole idea.

   Display type is Figtree at 600, sized and spaced like Memorae
   (https://memorae.ai/): hero 35→71px / 0.95 / −0.8→−1.42px,
   section titles 40→84px / 0.85 / 0→−1.68px.
   ============================================================ */
:root{
  /* ground — WhatsApp wallpaper beige */
  --paper:var(--canvas);        /* was #ECE5DD beige — now the cool ground */
  --paper-2:var(--canvas-2);    /* was #E3DBD1 */
  --card:var(--surface);        /* was #FBF9F6 warm */
  --white:#FFFFFF;

  --ink:#111B21;          /* WhatsApp's own text colour */
  --ink-2:#54656F;        /* WhatsApp secondary */
  --ico-pencil:color-mix(in srgb, var(--ink-2) 50%, #fff); /* Lucide quiet stroke */
  --muted:var(--ink-muted);      /* was #8696A0 — 3.0:1 on canvas, failed */
  --line:var(--line-cool);      /* was #D6CEC4 warm beige hairline */
  --line-2:var(--line-cool-2);  /* was #C4BAAD */

  /* WhatsApp brand, used as the accent */
  --green:#25D366;        /* brand green — fills, dots, buttons */
  --green-ink:#0F7A50;    /* green that passes contrast as text on beige */
  --green-lite:#E2F7E9;   /* wash of the accent — tracks, chips, highlights */
  /* ══ WhatsApp demo surface — SEALED ═══════════════════════════════
     These are WhatsApp's colours, not ours. Only the message mocks and
     the surfaces that deliberately imitate them may use a --wa-* token.
     Never bind page chrome, status or category meaning to one.
     Audit gate: no var(--wa-) outside the demo surface. ───────────── */
  --wa-bubble-out:#D9FDD3;       /* outgoing bubble */
  --wa-ink-2:#667781;            /* secondary text in a bubble */
  --wa-bubble-out-line:#c5f0be;  /* its edge */
  --wa-wallpaper:#EFEAE2;        /* chat ground */
  --wa-header:#F0F2F5;           /* header + quick-reply grey */
  --wa-teal:#075E54;             /* play buttons, waveform */
  --wa-tick:#53BDEB;             /* read receipt blue */

  /* Coming Up tint — PROVISIONAL. Borrows the bubble green until the
     Dribbble references land; then it takes a value of its own and the
     --wa-* reference here goes away. One line to change. */
  --upnext-tint:var(--wa-bubble-out);

  --rail-fill-from:#C5CBC6; /* muted start of timeline fill */

  /* rgb triplets, for the handful of places that need alpha on brand colour */
  --ink-rgb:17,27,33;
  --green-rgb:37,211,102;

  /* escalation ramp: chat → text → call */
  --step-2:#C98A15;

  /* Category chips 1–12 — left/right stops + ready LTR gradient.
     For card/bg fills: background:var(--cat-dates);
     For grain panels:  --g-a:var(--cat-dates-a); --g-b:var(--cat-dates-b); */
  --cat-health-a:#F87171; --cat-health-b:#F472B6;
  --cat-health:linear-gradient(to right,var(--cat-health-a),var(--cat-health-b));
  --cat-work-a:#60A5FA; --cat-work-b:#22D3EE;
  --cat-work:linear-gradient(to right,var(--cat-work-a),var(--cat-work-b));
  --cat-ideas-a:#C084FC; --cat-ideas-b:#818CF8;
  --cat-ideas:linear-gradient(to right,var(--cat-ideas-a),var(--cat-ideas-b));
  --cat-life-a:#34D399; --cat-life-b:#25D366;
  --cat-dates-a:#4ADE80; --cat-dates-b:#16A34A;
  --cat-dates:linear-gradient(to right,var(--cat-dates-a),var(--cat-dates-b));
  --cat-goals-a:#FBBF24; --cat-goals-b:#F59E0B;
  --cat-family-a:#2DD4BF; --cat-family-b:#0D9488;
  --cat-money-a:#FB923C; --cat-money-b:#EA580C;
  --cat-routines-a:#38BDF8; --cat-routines-b:#2563EB;
  --cat-memories-a:#E879F9; --cat-memories-b:#A78BFA;
  --cat-travel-a:#22D3EE; --cat-travel-b:#0891B2;
  --cat-care-a:#FB7185; --cat-care-b:#E11D48;

  --maxw:1320px; /* content column; wrap adds gutters on top of this */
  --gut:clamp(20px,4vw,56px);

  /* Nested radius: outer r = inner r + padding. Never copy the same
     radius onto a child. Set --r and --r-pad on a wrapper; --r-outer follows.
     Standalone cards use --r-lg (24). Inner tiles use --r-md (16). */
  --r:16px;
  --r-pad:8px;
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  /* Display type — Figtree, metrics from memorae.ai (mobile first) */
  --font-display:"Figtree",system-ui,-apple-system,sans-serif;
  /* WhatsApp mocks only — Inter, never body Archivo or heading Figtree */
  --font-wa:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --dsp-hero-size:35px;
  --dsp-hero-lh:.95;
  --dsp-hero-ls:-.8px;
  --dsp-sub-size:16px;
  --dsp-sub-lh:1.5;
  --dsp-section-size:40px;
  --dsp-section-lh:.85;
  --dsp-section-ls:-2px;
  --dsp-section-xl-size:40px;
  --dsp-section-xl-lh:.85;
  --dsp-section-xl-ls:-2px;
  --dsp-faq-size:40px;
  --dsp-faq-lh:.85;
  --dsp-faq-ls:-2px;

  --e-out:cubic-bezier(.22,1,.36,1);
  --e-io:cubic-bezier(.4,0,.2,1);
  --t2:220ms; --t3:380ms; --t4:640ms;


  /* ══════════════════════════════════════════════════════════════════
     DESIGN SYSTEM — added 21 Sep 2026, slice 1 of the audit port.
     ADDITIVE ONLY. Nothing above is overridden, nothing renders
     differently. The old names keep their old values until slice 2
     re-points them. Spec: claude.ai/artifact/LeMrzFSbnXMCBXn9ekrCCE
     ══════════════════════════════════════════════════════════════════ */

  /* — surfaces ——————————————————————————————— */
  --canvas:#FCFDF9;              /* page ground under the wash */
  --canvas-2:#F2F6F9;            /* recessed: table heads, inset panels */
  --surface:#FFFFFF;             /* cards; pair with --line, not a shadow */

  /* — the running wash · SEALED to .bg-gradient ——————————— */
  --wash-lime:#FDFD96;           /* the v6 lemon, kept, moved to the front */
  --wash-green:#E1FFE6;
  --wash-teal:#DBFFF8;
  --wash-sky:#EAF9FF;

  /* — ink ————————————————————————————————————— */
  --ink-muted:#61747F;           /* replaces --muted #8696A0 (3.0:1, fails) */

  /* Text that does not sit on the page ground.
     --ink-on-green is measured: #06301C on #25D366 is ~7:1, white is ~2:1. */
  /* Focus ring. Width and offset only — the COLOUR stays var(--green-ink)
     at each use site on purpose: a var() inside a custom property resolves
     where the property is declared, so baking the colour in here would
     freeze the light green and never flip inside .band-dark. */
  --focus-w:2px;
  --focus-offset:3px;
  --focus-offset-lg:4px;

  --ink-invert:#FFFFFF;
  --ink-invert-2:rgba(255,255,255,.86);
  --ink-on-green:#06301C;

  /* Sticky-note ink family — the note surfaces, nothing else. */
  --mq-dim:#5F5F5B;               /* recessed marquee word on #0A0A0A, 3:1 */
  --note-ink:#3D3518;
  --note-ink-2:#5C4E1E;
  --note-lab:#71642E;

  /* — lines ——————————————————————————————————— */
  --line-cool:#DAE1E5;           /* replaces --line  #D6CEC4 in slice 2 */
  --line-cool-2:#C8D1D7;         /* replaces --line-2 #C4BAAD in slice 2 */
  --line-strong:#7E8B95;         /* control borders, focus rings — clears 3:1 */

  /* — brand ——————————————————————————————————— */
  --green-press:#1EB558;
  --green-tint:#E2F7E9;          /* = --green-lite, renamed */

  /* — primary action · highest-contrast fill on its own ground ——— */
  --cta:#111B21;
  --cta-hover:#212C32;
  --cta-active:#050D13;
  --cta-ink:#FFFFFF;
  --cta-glyph:#25D366;

  /* — status · fill / ink / tint ————————————————————— */
  --ok:var(--green);       --ok-ink:var(--green-ink); --ok-tint:#E2F7E9;
  --warn:#C98A15;          --warn-ink:#78551C;        --warn-tint:#FEF0DE;
  --crit:#D2503A;          --crit-ink:#85493D;        --crit-tint:#FFECE7;
  --info:#53BDEB;          --info-ink:#196583;        --info-tint:#E0F7FF;

  /* — categories · six, one formula, none green ———————————— */
  --cat-dates-ink:#615287;  --cat-dates-tint:#F4EFFF;
  --cat-health-ink:#844756; --cat-health-tint:#FFEBF0;
  --cat-work-ink:#3D5D8C;   --cat-work-tint:#E7F4FF;
  --cat-money-ink:#824D2E;  --cat-money-tint:#FFEEE2;
  --cat-travel-ink:#006B65; --cat-travel-tint:#DEF9F6;
  --cat-home-ink:#774A73;   --cat-home-tint:#FEECFC;

  /* — feature frames · SEALED to .viz ———————————————— */
  --viz-memory-a:#66DA85;   --viz-memory-b:#1A9E4C;   --viz-memory-hi:#8CEDA2;
  --viz-memory-hi2:#76E491; --viz-memory-lo:#1F8843;  --viz-memory-lo2:#138740;
  --viz-tree-a:#98C0FB;     --viz-tree-b:#3C82E8;     --viz-tree-hi:#BED5F8;
  --viz-tree-hi2:#ABCBFA;   --viz-tree-lo:#3973C8;    --viz-tree-lo2:#3374D3;
  --viz-escalate-a:#F9AD26; --viz-escalate-b:#D7543D; --viz-escalate-hi:#F9CC85;
  --viz-escalate-hi2:#FBBA6C; --viz-escalate-lo:#BA4C42; --viz-escalate-lo2:#C75224;
  --viz-dates-a:#C4AFFC;    --viz-dates-b:#8F6ADE;    --viz-dates-hi:#D7CCF8;
  --viz-dates-hi2:#CDBEFA;  --viz-dates-lo:#7D5FBF;   --viz-dates-lo2:#8462CD;
  --viz-health-a:#FC9EB4;   --viz-health-b:#D44F77;   --viz-health-hi:#F9C3CE;
  --viz-health-hi2:#FBB1C1; --viz-health-lo:#B74969;  --viz-health-lo2:#C64B70;
  --viz-money-a:#FCA676;    --viz-money-b:#CC6313;    --viz-money-hi:#F8C8AD;
  --viz-money-hi2:#FBB791;  --viz-money-lo:#B1581B;   --viz-money-lo2:#BD5A0E;
  --viz-travel-a:#2ED8CD;   --viz-travel-b:#189890;   --viz-travel-hi:#57EEE3;
  --viz-travel-hi2:#3EE4D8; --viz-travel-lo:#20847D;  --viz-travel-lo2:#16837C;
  --viz-home-a:#F695EE;     --viz-home-b:#BB58B4;     --viz-home-hi:#F9BCF3;
  --viz-home-hi2:#FBA7F3;   --viz-home-lo:#A2509C;    --viz-home-lo2:#AF54A9;

  /* — grain · one tile, strength is a layer ————————————— */
  /* Grain. These now describe what actually ships — the earlier values
     were a proposal (32px / soft-light) that the stylesheet never used.
     Four dials, one place; the resolution variants are below. */
  --grain-img:url("../img/grain-128.png");
  --grain-size:128px;
  --grain-blend:overlay;
  --grain-strength:1;
}
/* Tile shrinks on dense screens so the grain keeps its apparent size.
   One override now feeds every grain surface. */
@media (min-resolution:2dppx){ :root{ --grain-size:64px } }
@media (min-resolution:3dppx){ :root{ --grain-size:43px } }
:root{
  --viz-foot-h:50px;
  --viz-foot-scrim:rgba(0,0,0,.28);  /* deepens the foot band so white
                                        text clears 4.5:1; ramps in over
                                        the same 32px the grain fades out */             /* grain-free zone at the foot of a viz card;
                                    measured: .vsc-foot sits 49px off the bottom */

  /* — halo ring · SEALED to .fx-glass ———————————————— */
  --halo-1:#7CFFB2; --halo-2:#FFE566; --halo-3:#FFD400; --halo-4:#B8FFD0;
  /* The animated rim, one definition for every ring that wears it.
     Only the stops travel: --fx-glass-angle has to stay at the use site,
     because a var() inside a custom property resolves where the property
     is declared, which would freeze every ring at 0deg. */
  --halo-stops:
    var(--halo-1)   0deg, var(--halo-2)  60deg, var(--green)  120deg,
    var(--halo-3) 180deg, var(--halo-4) 240deg, var(--halo-2) 300deg,
    var(--halo-1) 360deg;

  /* — elevation · derived from the page, one ink (--ink-rgb) —————
     Drop shadows only. The white inset lines are a glass material, not
     lift, so they compose separately as --rim-*. */
  --elev-0:none;
  --elev-1:0 1px .5px rgba(var(--ink-rgb),.13);        /* hairline */
  --elev-1-soft:0 1px .5px rgba(var(--ink-rgb),.08);   /* hairline, quieter */
  --elev-2:0 4px 12px -6px rgba(var(--ink-rgb),.28);   /* small lift */
  --elev-3:0 8px 22px -14px rgba(var(--ink-rgb),.35);  /* card */
  --elev-3-tight:0 8px 18px -12px rgba(var(--ink-rgb),.35);
  --elev-4:0 16px 32px -16px rgba(var(--ink-rgb),.40); /* hub, raised glass */
  --elev-5:0 22px 44px -22px rgba(var(--ink-rgb),.28); /* hover, max */
  --elev-panel:0 12px 32px -20px rgba(var(--ink-rgb),.24);
  --elev-badge:0 8px 24px -10px rgba(var(--ink-rgb),.22), 0 2px 8px -2px rgba(var(--ink-rgb),.10);

  /* — glass rims · material, composed alongside an elevation ————— */
  --rim-top:inset 0 1px 0 rgba(255,255,255,.95);
  --rim-top-soft:inset 0 1px 0 rgba(255,255,255,.72);
  --rim-bottom:inset 0 -1px 3px rgba(255,255,255,.28);
  --rim-inner:inset 0 -12px 28px rgba(255,255,255,.08);
  --rim-hair:0 0 0 .5px rgba(255,255,255,.6);
  --rim-line:inset 0 0 0 1px var(--line-2);

  /* — glass · three levels ————————————————————————— */
  --glass-nav:blur(50px) saturate(200%);
  --glass-raised:blur(32px) saturate(180%);
  --glass-card:blur(18px) saturate(160%);
  --glass-bg:rgba(255,255,255,.50);
  --glass-rim-faint:rgba(255,255,255,.45);  /* internal dividers, nav inset */
  --glass-rim:rgba(255,255,255,.58);        /* resting glass edge */
  --glass-rim-hi:rgba(255,255,255,.92);     /* raised glass, and card hover */
  --glass-rim-dark:rgba(255,255,255,.22);   /* white edge on a dark ground */
  --glass-highlight:rgba(255,255,255,.80);
  --glass-caustic:rgba(255,255,255,.40);
  --glass-shadow:rgba(0,0,0,.10);

  /* — radius additions ————————————————————————— */
  --r-full:50%;
  --r-pill:999px;

  /* — space scale · 4px grid ————————————————————— */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-20:80px;
  --space-24:96px;

  /* — type families ————————————————————————————— */
  --font-body:Archivo,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-note:"Patrick Hand","Figtree",cursive;   /* the sticky-note face */

  color-scheme:light;
}
@media (min-width:1024px){
  :root{
    --dsp-hero-size:clamp(52px,4.9vw,71px);
    --dsp-hero-ls:-1.42px;
    --dsp-sub-size:clamp(16px,1.39vw,20px);
    --dsp-section-size:84px;
    --dsp-section-lh:.85;
    --dsp-section-ls:-2px;
    --dsp-section-xl-size:84px;
    --dsp-section-xl-lh:.85;
    --dsp-section-xl-ls:-2px;
    --dsp-faq-size:84px;
    --dsp-faq-lh:.85;
    --dsp-faq-ls:-2px;
  }
}

*{box-sizing:border-box; --r-outer:calc(var(--r) + var(--r-pad))}
html{background:#FDFDF8; overflow-x:clip}
body{
  margin:0; background:transparent; color:var(--ink);
  font-family:var(--font-body);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
  font-variation-settings:"wdth" 100;
  overflow-x:clip;
  max-width:100%;
}

/* Form controls do not inherit type. Chrome's UA sheet gives every
   <button> `400 13.3333px Arial`, which is why 13 category-chip labels
   were rendering in Arial next to Archivo everywhere else. Weight is
   left alone — every styled button already sets its own. */
button, input, select, textarea, optgroup{
  font-family:inherit;
  font-size:13.5px;          /* replaces the 13.3333px UA default */
  letter-spacing:inherit;
}

/* Allia Health Background + Rothfinder thread — same rules as the reference.
   Sit on the root, behind the page. Inside main they became a stacking
   context that covered the close/footer once that panel was pinned. 100%
   (not 100vw) so the scrollbar does not open a horizontal clip. */
.bg-gradient{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  background:linear-gradient(130deg, #FDFDF8 0%, #E0F6FF 25%, #D6FFEA 45%, #FDFD96 60%, #E0F6FF 80%, #FDFDF8 100%);
  background-size:400% 400%;
  animation:gradientShift 15s ease infinite;
  pointer-events:none;
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
#threadCanvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:1;
}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:600}
p,ul,ol,dl,figure,blockquote{margin:0}
a{color:inherit; text-decoration:none}
:focus-visible{outline:var(--focus-w) solid var(--green-ink); outline-offset:var(--focus-offset)}

/* Text selection takes the accent. Kept as its own rule per browser — a
   selector list containing an unknown pseudo-element invalidates the whole
   rule, so ::selection and ::-moz-selection must not be grouped.
   The ink is dark rather than white: #06301C on #25D366 is ~7:1, white is ~2:1.
   --green is unchanged inside .band-dark, so this holds on both grounds. */
::selection{ background:var(--green); color:var(--ink-on-green); text-shadow:none; }
::-moz-selection{ background:var(--green); color:var(--ink-on-green); text-shadow:none; }

/* ---------- type roles ---------- */
.dsp{
  font-family:var(--font-display);
  font-weight:600; text-transform:none;
  font-variation-settings:normal;
  line-height:var(--dsp-section-lh); letter-spacing:var(--dsp-section-ls);
}
.lab{
  font-family:var(--font-mono);
  font-size:10px; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ink-2);
}
/* ── TEXT ROLES ──────────────────────────────────────────────────────
   The named body scale. Every value is a step on the 11-step type scale;
   nothing here is a new size. Put the role on a block and its copy takes
   the size — a .doc carrying one hands it down to its p and li.
   .body-m is the original name for .body-sm and is kept because xtras/
   uses it; the two are one rule, not two values. ───────────────────── */
.lede    {font-size:20px;   line-height:1.5;  color:var(--ink-2); max-width:58ch}
.body-l  {font-size:17px;   line-height:1.62; color:var(--ink-2); max-width:58ch}
.body    {font-size:16px;   line-height:1.62; color:var(--ink-2)}
.body-sm,
.body-m  {font-size:14px;   line-height:1.62; color:var(--ink-2)}
.caption {font-size:12.5px; line-height:1.45; color:var(--ink-muted)}
.g{color:var(--green-ink)}
.wrap{width:100%; max-width:calc(var(--maxw) + 2 * var(--gut)); margin-inline:auto;
  padding-inline:var(--gut); position:relative; z-index:3}
hr.rule{height:1px; background:var(--line); border:0; margin:0}

/* ============================================================
   SCROLL PROGRESS — at the very top of the page, above the nav.
   ============================================================ */
#progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:200;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,
    var(--ink-2) 0%, var(--muted) 22%, var(--step-2) 62%, var(--green) 100%);
  will-change:transform;
  pointer-events:none;
}

/* ============================================================
   REVEAL — content is visible by default. Hiding is opt-in and
   only ever added by JS. Never write `.reveal{opacity:0}`.
   ============================================================ */
.reveal{opacity:1; transform:none;
  transition:opacity var(--t4) var(--e-out), transform var(--t4) var(--e-out)}
.js-reveal .reveal:not(.is-in){opacity:0; transform:translateY(16px)}
.js-reveal .reveal:not(.is-in) > .stg{opacity:0; transform:translateY(11px)}
/* Titles use their own clip reveal — don't fade the wrapper (or the
   heading would stay invisible while the lines try to slide up). */
.js-reveal .sec-head.reveal:not(.is-in),
.js-reveal .why-copy.reveal:not(.is-in),
.js-reveal .story-copy.reveal:not(.is-in){opacity:1; transform:none}
.js-reveal .reveal:not(.is-in) > .line-reveal{opacity:1; transform:none}
.reveal > .stg{transition:opacity var(--t4) var(--e-out), transform var(--t4) var(--e-out)}
.reveal.is-in > .stg{opacity:1; transform:none}
.reveal.is-in > .stg:nth-child(1){transition-delay:0ms}
.reveal.is-in > .stg:nth-child(2){transition-delay:60ms}
.reveal.is-in > .stg:nth-child(3){transition-delay:120ms}
.reveal.is-in > .stg:nth-child(4){transition-delay:180ms}
.reveal.is-in > .stg:nth-child(5){transition-delay:240ms}
.reveal.is-in > .stg:nth-child(6){transition-delay:300ms}
.reveal.is-in > .stg:nth-child(7){transition-delay:360ms}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;
    animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .bg-gradient{animation-duration:15s !important; animation-iteration-count:infinite !important}
  .card:hover,.tc:hover,.fcard:hover,.vsc:hover,.ledger:hover,.cat-table:hover,.pw:hover,.qt:hover,.price:hover,.feat-tree:hover,.faq-card:hover,.ex-card:hover{transform:none}
  .js-reveal .reveal:not(.is-in),
  .js-reveal .reveal:not(.is-in) > .stg{opacity:1 !important; transform:none !important}
}

/* ============================================================
   HIGHLIGHT MARKER — a highlighter stroke that sweeps in behind part of
   a headline once its section reveals, the way locomotive-scroll-style
   sites time text against scroll position. It rides the same .reveal/
   .is-in trigger everything else on the page already uses (an
   IntersectionObserver flips .is-in once), just with its own slightly
   later delay so the sweep visibly chases the heading's own fade-in
   rather than landing in the same beat. box-decoration-break lets a
   highlight that wraps onto two lines (like "30 seconds" stacking) get
   an independent background box per line instead of one bounding box
   spanning the gap between them. */
.hl{
  background-image:linear-gradient(var(--green), var(--green));
  background-repeat:no-repeat; background-position:0 58%;
  background-size:0% 58%;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  color:inherit; padding:0 .07em; margin:0 -.07em;
  transition:background-size 620ms var(--e-out) 480ms, color 300ms var(--e-io) 620ms;
}
.reveal.is-in .hl,.line-reveal.is-in .hl{background-size:100% 58%; color:var(--ink)}

/* ============================================================ NAV
   Floating glass capsule, Memorae layout: logo | links | CTA.
   Header itself stays clear — a backdrop here would trap nested blur. */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:150;
  display:flex; justify-content:center; align-items:flex-start;
  padding:16px 24px 0;
  background:transparent;
  border:0; box-shadow:none;
  pointer-events:none;
}
.logo{display:flex; align-items:center; gap:4px;
  font-weight:900; font-size:18px; letter-spacing:-.04em; font-variation-settings:"wdth" 88;
  position:relative; z-index:7; justify-self:start; min-height:0; padding:0 6px}
.logo i{width:32px; height:32px; flex:none; display:grid; place-items:center}
.logo i img{width:32px; height:32px; display:block; object-fit:contain}

.liquid-nav{
  --reflection-start:rgba(255,255,255,.55);
  --reflection-end:rgba(255,255,255,0);
  --glare-color:rgba(255,255,255,.5);
  --pill-bg:rgba(255,255,255,.72);
  --pill-shadow:0 4px 12px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05), inset 0 1px 1px rgba(255,255,255,.8);
  --icon-color:rgba(17,27,33,.55);
  --icon-active:rgba(17,27,33,.95);
  pointer-events:auto;
  width:min(100%, var(--maxw));
  min-width:0;
  max-width:var(--maxw);
  height:56px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:20px;
  padding:6px 6px 6px 18px;
  border-radius:var(--r-pill);
  position:relative;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-nav);
  -webkit-backdrop-filter:var(--glass-nav);
  box-shadow:
    0 24px 48px -20px var(--glass-shadow),
    0 8px 20px -12px var(--glass-shadow),
    inset 0 2px 3px -1px var(--glass-highlight),
    inset 0 -2px 4px -1px var(--glass-caustic),
    inset 0 0 0 1px var(--glass-rim-faint);
}
.liquid-nav::before{
  content:"";
  position:absolute;
  top:1px; left:1px; right:1px; height:46%;
  border-radius:var(--r-pill) 99px 24px 24px / 99px 99px 12px 12px;
  background:linear-gradient(180deg, var(--reflection-start) 0%, var(--reflection-end) 100%);
  pointer-events:none; z-index:6;
}
.liquid-glare-container{
  position:absolute; inset:0; border-radius:var(--r-pill); overflow:hidden;
  pointer-events:none; z-index:5;
}
.liquid-glare{
  position:absolute; inset:0; opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(circle 90px at var(--x,50%) var(--y,50%), var(--glare-color) 0%, transparent 100%);
  mix-blend-mode:overlay;
}
.liquid-nav:hover .liquid-glare{opacity:1}
.liquid-items{
  position:relative; display:flex; align-items:center; gap:14px;
  justify-self:center; z-index:7;
}
.liquid-pill{
  position:absolute; top:0; left:0; height:44px;
  background:var(--pill-bg); border-radius:var(--r-pill);
  box-shadow:var(--pill-shadow); z-index:1;
  transition:transform .5s cubic-bezier(.34,1.2,.64,1),
             width .5s cubic-bezier(.34,1.2,.64,1),
             background .5s ease, box-shadow .5s ease;
}
.liquid-btn{
  position:relative; background:transparent; border:0;
  padding:0 16px; height:44px; border-radius:var(--r-pill);
  font-family:inherit; font-size:13.5px; font-weight:600;
  color:var(--icon-color); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:color .3s ease; z-index:2;
  display:inline-flex; align-items:center; text-decoration:none;
}
.liquid-btn-content{
  display:flex; align-items:center; pointer-events:none;
  transition:transform .2s cubic-bezier(.32,.72,0,1);
}
.liquid-btn:active .liquid-btn-content{transform:scale(.92)}
.liquid-btn.active{color:var(--icon-active)}
.liquid-nav > .btn{
  justify-self:end; z-index:7; position:relative;
  min-height:44px; height:44px; padding:0 16px; font-size:13.5px;
  white-space:nowrap;
}
.nav-shell{
  position:relative;
  width:min(100%, var(--maxw));
  min-width:0;
  max-width:var(--maxw);
  pointer-events:none;
}
.nav-menu{
  display:none;
  place-items:center;
  width:44px; height:44px; padding:0; margin:0;
  border:0; border-radius:var(--r-pill);
  background:transparent; color:var(--ink-2);
  cursor:pointer; position:relative; z-index:7;
  justify-self:end;
  -webkit-tap-highlight-color:transparent;
}
.nav-menu svg{width:22px; height:22px; display:block}
.nav-menu .ico-x{display:none}
.nav.is-open .nav-menu{
  background:var(--ink); color:var(--paper);
}
.nav.is-open .nav-menu .ico-menu{display:none}
.nav.is-open .nav-menu .ico-x{display:block}
.nav-menu:focus-visible{
  outline:2px solid var(--green-ink); outline-offset:2px;
}
.nav-menu-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.nav-panel{
  display:none;
  position:absolute; left:0; right:0; top:calc(100% + 8px);
  z-index:8; pointer-events:auto;
  flex-direction:column; gap:2px;
  padding:8px;
  border-radius:24px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-nav);
  -webkit-backdrop-filter:var(--glass-nav);
  box-shadow:
    0 24px 48px -20px var(--glass-shadow),
    0 8px 20px -12px var(--glass-shadow),
    inset 0 2px 3px -1px var(--glass-highlight),
    inset 0 -2px 4px -1px var(--glass-caustic),
    inset 0 0 0 1px var(--glass-rim-faint);
}
.nav-panel a{
  display:flex; align-items:center;
  min-height:44px; padding:0 14px;
  border-radius:16px;
  font-size:15px; font-weight:600; letter-spacing:-.01em;
  color:var(--ink-2); text-decoration:none;
}
.nav-panel a.is-current{
  background:rgba(255,255,255,.72); color:var(--ink);
}
.nav-panel a:focus-visible{
  outline:2px solid var(--green-ink); outline-offset:-2px;
}
@media(max-width:1280px){
  .nav{padding:12px 16px 0}
  .nav-shell{width:100%; min-width:0; max-width:none}
  .liquid-items{display:none}
  .nav-menu{display:grid}
  .liquid-nav{grid-template-columns:1fr auto auto; column-gap:8px; width:100%; min-width:0; max-width:none}
  .nav.is-open .nav-panel:not([hidden]){display:flex}
}
@media(max-width:420px){
  .liquid-nav > .btn{width:44px; min-width:44px; padding:0}
  .liquid-nav > .btn span{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
}

/* ============================================================ BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--ink); color:var(--paper);
  padding:15px 24px; border:0; border-radius:var(--r-pill); cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; letter-spacing:-.01em;
  min-height:48px; position:relative; overflow:hidden;
  transition:color var(--t2) var(--e-io), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn > *{position:relative; z-index:1}
.btn::before{content:""; position:absolute; inset:0; background:var(--green);
  transform:translateY(101%); transition:transform var(--t3) var(--e-out); z-index:0}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--ink-on-green)}
.btn-sm{padding:11px 18px; min-height:44px; font-size:12.5px}
.btn-line{background:transparent; color:var(--ink); box-shadow:var(--rim-line)}
/* in the hero the trace lines run behind this row, so the transparent fill
   let them show through the button; solid white keeps it a button */
.hero-acts .btn-line{background:#fff}
.wa{width:17px; height:17px; fill:currentColor; flex:none}
.btn .tree-ico{width:17px; height:17px; flex:none}
.mark-saved::before{content:var(--mark-saved, "✅")}
.mark-tree::before{content:var(--mark-tree, "🌳")}
.mark-saved, .mark-tree{font-style:normal; font-family:inherit; line-height:1}
.btn .mark-tree{font-size:16px}
.eyebrow .mark-tree{font-size:14px; margin-right:6px}
.book-k .mark-tree{font-size:13.5px; margin-right:5px}
.tc-ico .mark-tree{font-size:17px}

/* ============================================================ SECTIONS */
section{padding:clamp(58px,7vw,104px) 0; scroll-margin-top:88px}
.eyebrow{display:flex; justify-content:center; margin-bottom:14px}
.eyebrow > span{
  display:inline-flex; align-items:center;
  font-family:inherit; font-size:12.5px; font-weight:600;
  letter-spacing:-.01em; text-transform:none; color:var(--ink);
  background:rgba(255,255,255,.80);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  border:1px solid var(--glass-rim-hi);
  border-radius:var(--r-pill); padding:6px 16px;
  box-shadow:var(--elev-badge), var(--rim-hair), var(--rim-top);
}
.eyebrow .tree-ico{width:13px; height:13px; color:var(--green-ink); margin-right:7px}
.eyebrow-logo{width:14px; height:14px; border-radius:var(--r-full); background:var(--green); margin-right:8px; flex:none; display:grid; place-items:center}
.eyebrow-logo svg{width:8px; height:8px; fill:#fff}
.sec-title{text-align:center; max-width:20ch; margin:0 auto}
.sec-title.wide{max-width:26ch}
.sec-title.line-reveal,.sec-title.wide.line-reveal{max-width:none}
h2.dsp{font-size:var(--dsp-section-size); line-height:var(--dsp-section-lh);
  letter-spacing:var(--dsp-section-ls)}
.sec-sub{text-align:center; max-width:56ch; margin:16px auto 0; font-size:var(--dsp-sub-size);
  line-height:var(--dsp-sub-lh); color:var(--ink-2)}
.sec-head{margin-bottom:46px}

/* ============================================================ HERO */
.hero{padding:118px 0 0; text-align:center; position:relative}
/* The hero ground, taken from the local build: two full-bleed washes and a
   field of blurred organic blobs in emerald / teal / lime / green. Sizes,
   positions, radii and alpha are the measured values from localhost:3000;
   the drift is mine — the source blobs are static, and at 22-30s per cycle
   this reads as the light moving rather than as an animation. */
/* both layers fade out at the foot rather than ending on a hard line —
   a wash that stops at 88% draws a seam straight across the page */
.hero::after{display:none}
.hero-bg{display:none}
.hero-bg i{
  position:absolute; display:block; will-change:transform;
}
.hero-bg .b1{
  top:-112px; right:-64px; width:520px; height:420px;
  border-radius:45% 55% 50% 50%; background:rgba(167,243,208,.25);
  filter:blur(64px); transform:rotate(12deg);
}
.hero-bg .b2{
  top:96px; left:-128px; width:440px; height:380px;
  border-radius:55% 45% 48% 52%; background:rgba(153,246,228,.22);
  filter:blur(64px); transform:rotate(-6deg);
}
.hero-bg .b3{
  top:50%; left:50%; width:min(90vw,720px); height:280px;
  border-radius:var(--r-full); background:rgba(217,249,157,.2);
  filter:blur(64px); transform:translate(-50%,-120%);
}
.hero-bg .b4{
  bottom:32px; right:12%; width:200px; height:200px;
  border-radius:var(--r-full); background:rgba(134,239,172,.15);
  filter:blur(40px);
}
/* drift only once the hero is on screen and motion is welcome */
.hero-bg.is-live .b1{animation:drift1 26s var(--e-io) infinite alternate}
.hero-bg.is-live .b2{animation:drift2 30s var(--e-io) infinite alternate}
.hero-bg.is-live .b3{animation:drift3 22s var(--e-io) infinite alternate}
.hero-bg.is-live .b4{animation:drift4 24s var(--e-io) infinite alternate}
@keyframes drift1{to{transform:rotate(12deg) translate(-46px,38px) scale(1.08)}}
@keyframes drift2{to{transform:rotate(-6deg) translate(52px,-30px) scale(1.06)}}
@keyframes drift3{to{transform:translate(-50%,-120%) translateX(60px) scale(1.05)}}
@keyframes drift4{to{transform:translate(-40px,-34px) scale(1.1)}}
/* The circuit traces. The local build does this with a looping mp4; here they
   are real paths, so they cost a couple of kB instead of 465, scale without
   softening, and can carry a travelling highlight the video does not have.
   pathLength="1" normalises every trace to one unit, so a single dash pattern
   and one keyframe drive runs of wildly different real lengths. */
.hero-traces{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none;
  /* weighted to the phone's side: full strength from the right edge in to
     just behind the phone, fading out across the gutter so only a few
     subtle lines carry on over the headline instead of the whole network
     running behind it */
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.14) 34%,rgba(0,0,0,.6) 54%,#000 72%,#000 100%);
  mask-image:linear-gradient(90deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,.14) 34%,rgba(0,0,0,.6) 54%,#000 72%,#000 100%);
}
.hero-traces path{fill:none; stroke-linecap:round; stroke-linejoin:round}
.tr-base path{stroke:#A9B3D8; stroke-opacity:.5; stroke-width:1.4}
/* the light that runs the trace — parked off the end until the hero is seen */
.tr-run path{
  stroke:var(--green); stroke-opacity:.62; stroke-width:1.7;
  stroke-dasharray:.13 .87; stroke-dashoffset:1;
}
.hero-bg.is-live .tr-run path{animation:trace 9s linear infinite}
.tr-run path:nth-child(1){animation-delay:0s}
.tr-run path:nth-child(2){animation-delay:-6.2s}
.tr-run path:nth-child(3){animation-delay:-2.4s}
.tr-run path:nth-child(4){animation-delay:-7.6s}
.tr-run path:nth-child(5){animation-delay:-4.1s}
.tr-run path:nth-child(6){animation-delay:-1.3s}
.tr-run path:nth-child(7){animation-delay:-5.5s}
.tr-run path:nth-child(8){animation-delay:-8.4s}
.tr-run path:nth-child(9){animation-delay:-3.2s}
.tr-run path:nth-child(10){animation-delay:-6.9s}
.tr-run path:nth-child(11){animation-delay:-0.7s}
.tr-run path:nth-child(12){animation-delay:-4.8s}
@keyframes trace{to{stroke-dashoffset:0}}
/* a connection point at both ends of every trace, one accent, no motion of
   its own — the lines do the moving */
.tr-dots circle{fill:var(--green); opacity:.55}
@media (prefers-reduced-motion:reduce){
  .hero-bg i{animation:none !important}
  .tr-run{display:none}
}
.hero > *{position:relative; z-index:1}
/* must come after the rule above, which would otherwise make the background
   layer position:relative — and a relative box with inset:0 and no content
   collapses to zero height, taking the traces and blobs with it */
.hero > .hero-bg{position:absolute; z-index:0}
.badge{
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:rgba(255,255,255,.80);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  border:1px solid var(--glass-rim-hi);
  border-radius:var(--r-pill); padding:6px 14px 6px 7px;
  font-size:12.5px; font-weight:600;
  box-shadow:var(--elev-badge), var(--rim-hair), var(--rim-top);
}
.badge i{width:20px; height:20px; border-radius:var(--r-full); background:var(--green);
  display:grid; place-items:center; flex:none}
.badge i svg{width:12px; height:12px; fill:#fff}
.badge i:has(img){background:none; border-radius:0}
.badge i img{width:20px; height:20px; display:block; object-fit:contain}
h1.dsp{font-size:var(--dsp-hero-size); line-height:var(--dsp-hero-lh);
  letter-spacing:var(--dsp-hero-ls); margin:20px auto 0; max-width:17ch}
.hero-body{max-width:58ch; margin:20px auto 0; font-size:var(--dsp-sub-size);
  line-height:var(--dsp-sub-lh); font-weight:500; color:var(--ink-2)}
.hero-acts{margin-top:28px; display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap}
.hero-fine{margin-top:18px; display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap}
.hero-fine span{display:flex; align-items:center; gap:7px}
.hero-fine i{width:4px; height:4px; border-radius:var(--r-full); background:var(--green); flex:none}

/* chip strip */
.chips{display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-top:36px}
.chips span, .chips button, .chips a{
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 15px; font:inherit; font-size:13.5px; font-weight:500; color:var(--ink);
  box-shadow:0 1px 2px rgba(17,27,33,.04);
}
.chips button, .chips a{cursor:pointer; min-height:44px}
.chips button:hover, .chips button:focus-visible{
  color:var(--green-ink);
  border-color:color-mix(in srgb, var(--green) 40%, var(--line));
}
.chips button.is-on{
  background:var(--green); border-color:transparent; color:var(--ink-on-green);
  box-shadow:none;
}
.chips svg{width:14px; height:14px; fill:var(--green-ink); flex:none}

/* ============================================================
   LIQUID GLASS — beige frost + pointer sheen, Memorae "Create better".
   Shared by every light-ground card on the page.
   ============================================================ */
/* The card surface. `.card` is the canonical name — use it on new markup.
   The nine names after it are legacy aliases kept so existing pages and the
   parked sections in xtras/ keep working; .fcard is deliberately retained
   per the note in the FEATURES block. Do not add a tenth alias — add .card. */
.card, .tc, .fcard, .vsc, .ledger, .cat-table, .pw, .qt, .price, .feat-tree, .faq-card{
  --glass-mx:50%; --glass-my:0%;
  position:relative; isolation:isolate;
  background:color-mix(in srgb,var(--card) 64%, transparent);
  border:1px solid var(--glass-rim);
  border-radius:var(--r-lg);
  box-shadow:var(--rim-top-soft), var(--rim-inner), var(--elev-panel);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
  transition:transform 480ms var(--e-out), box-shadow 480ms var(--e-out),
             border-color 480ms var(--e-out);
}
.card::before, .tc::before, .fcard::before, .vsc::before, .ledger::before, .cat-table::before,
.pw::before, .qt::before, .price::before, .feat-tree::before, .faq-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    radial-gradient(420px circle at var(--glass-mx) var(--glass-my), rgba(255,255,255,.5), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 40%, transparent 68%);
  opacity:.5; transition:opacity 480ms var(--e-out);
}
/* White wash — opacity composites; color-mix backgrounds snap. */
.card::after, .tc::after, .fcard::after, .vsc::after, .ledger::after, .cat-table::after,
.pw::after, .qt::after, .price::after, .feat-tree::after, .faq-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:#fff; opacity:0; transition:opacity 480ms var(--e-out);
}
.card > *, .tc > *, .fcard > *, .vsc > *, .ledger > *, .cat-table > *, .pw > *, .qt > *, .price > *, .feat-tree > *, .faq-card > *{position:relative; z-index:1}

/* ════════════════════════════════════════════════════════════════════
   CANONICAL COMPONENTS — use these on new markup.
   Derived from the homepage's existing treatments, not invented: the
   defaults below are the values already most common on index.html.
   The bespoke one-off classes on the homepage stay as they are; these
   exist so a new page needs no new CSS.
   ════════════════════════════════════════════════════════════════════ */

/* IconTile — the square icon background used inside cards and rows.
   Eleven hand-rolled versions on the homepage all share this shape:
   a square grid box, centred, with a glyph at half its size.
   Size and radius are dials, so there is no need for a new class. */
.icon-tile{
  --tile:36px;
  --tile-r:var(--r-sm);
  width:var(--tile); height:var(--tile);
  flex:none;
  border-radius:var(--tile-r);
  display:grid; place-items:center;
  background:var(--canvas-2);
  color:var(--ico-pencil);
}
.icon-tile > svg{ width:calc(var(--tile) * .5); height:calc(var(--tile) * .5) }
.icon-tile.is-sm{ --tile:24px }
.icon-tile.is-md{ --tile:32px }
.icon-tile.is-lg{ --tile:44px; --tile-r:var(--r-md) }
.icon-tile.is-round{ --tile-r:var(--r-full) }
.icon-tile.is-solid{ background:var(--green); color:var(--ink-invert) }

/* Chip — the small pill-shaped label. One base, three variants.
   .is-mono is the uppercase monospace tag; .is-glass is the frosted
   badge that floats over a surface. */
.chip{
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:5px 10px;
  border-radius:var(--r-pill);
  background:var(--surface);
  border:1px solid var(--line-cool);
  font-size:11px; font-weight:600; line-height:1.2;
  color:var(--ink-2);
  white-space:nowrap;
}
.chip.is-mono{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px;
}
.chip.is-glass{
  background:rgba(255,255,255,.80);
  border-color:var(--glass-rim-hi);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
}
.chip.is-ok{ background:var(--green-tint); border-color:transparent; color:var(--green-ink) }

.card:hover, .tc:hover, .fcard:hover, .vsc:hover, .ledger:hover, .cat-table:hover, .pw:hover, .qt:hover, .price:hover, .feat-tree:hover{
  transform:translate3d(0,-3px,0);
  border-color:var(--glass-rim-hi);
  box-shadow:var(--rim-top), var(--elev-5);
}
.faq-card:hover{
  border-color:var(--glass-rim-hi);
  box-shadow:var(--rim-top), var(--elev-5);
}
.card:hover::before, .tc:hover::before, .fcard:hover::before, .vsc:hover::before, .ledger:hover::before, .cat-table:hover::before,
.pw:hover::before, .qt:hover::before, .price:hover::before, .feat-tree:hover::before, .faq-card:hover::before{opacity:.72}
.card:hover::after, .tc:hover::after, .fcard:hover::after, .vsc:hover::after, .ledger:hover::after, .cat-table:hover::after,
.pw:hover::after, .qt:hover::after, .price:hover::after, .feat-tree:hover::after, .faq-card:hover::after{opacity:.42}

/* ============================================================ TRIO CARDS */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:44px; align-items:stretch}
.tc{padding:24px; text-align:left; display:flex; flex-direction:column}
.tc-ico{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; margin-bottom:14px}
.tc-ico svg{width:17px; height:17px; fill:#fff}
.tc-ico .tree-ico{fill:none; stroke:#fff}
.tc h3{font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px}
.tc p{font-size:14px; line-height:1.55; color:var(--ink-2); padding-bottom:22px}
.tc-list{margin-top:14px; display:flex; flex-direction:column; gap:6px}
.tc-list em{
  font-style:normal; font-size:12.5px; color:var(--ink-2);
  background:var(--paper); border:1px solid var(--line); border-radius:7px; padding:6px 10px;
}
.tc-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12.5px; padding:6px 10px; background:var(--paper);
  border:1px solid var(--line); border-radius:7px}
.tc-row b{font-weight:600}
.tc-row span{font-family:var(--font-mono); font-size:11px; color:var(--ink-2)}
.pill{font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; padding:3px 7px; border-radius:var(--r-pill); font-weight:500}

/* Trio card 2 — the fallback ladder. Each row is a channel: live
   (sending / waiting), then missed (no reply / not checked), then
   the next channel takes over. Gaps hold a travelling dotted rail. */
.tc-esc-wrap{
  position:relative;
  margin-top:auto;
  overflow:visible;
}
.tc-esc{
  --r: 7px;
  --r-pad: 12px;
  margin-top:0; height:228px; flex:none;
  display:flex; flex-direction:column; justify-content:flex-start; gap:0;
  position:relative; overflow:hidden;
  padding:var(--r-pad);
  border-radius:var(--r-outer);
  border:1px solid var(--line);
  font-family:var(--font-wa); font-variation-settings:normal;
  background-color:var(--wa-wallpaper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C8BDAE' stroke-width='1' stroke-linecap='round' opacity='.3'%3E%3Cpath d='M14 18h10M19 13v10'/%3E%3Ccircle cx='92' cy='22' r='5'/%3E%3Cpath d='M40 40q6-8 12 0t12 0'/%3E%3Cpath d='M96 54v9M91.5 58.5h9'/%3E%3Cpath d='M18 62c0-4 3-7 7-7s7 3 7 7-3 7-7 7h-3l-4 3v-3z'/%3E%3Cpath d='M62 82h12M68 76v12'/%3E%3Ccircle cx='30' cy='100' r='4.5'/%3E%3Cpath d='M84 96l5 5 8-9'/%3E%3Cpath d='M50 16v8M46 20h8'/%3E%3Cpath d='M104 82q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:104px 104px;
}
.esc-gap{
  position:relative; flex:1; min-height:22px;
  pointer-events:none; z-index:0;
}
.esc-gap::before{
  content:""; position:absolute; left:14px; top:1px; bottom:1px; width:2px;
  background-image:radial-gradient(circle, rgba(17,27,33,.38) 1.05px, transparent 1.2px);
  background-size:2px 6px; background-repeat:repeat-y;
  animation:escflow .8s linear infinite;
}
.esc-gap::after{
  content:""; position:absolute; left:11px; width:6px; height:6px; border-radius:var(--r-full);
  background:#25D366;
  box-shadow:0 0 8px rgba(37,211,102,.5);
  animation:escdrop 1.35s var(--e-io) infinite;
}
.esc-gap.is-next::after{animation-delay:.45s; background:#C98A15; box-shadow:0 0 8px rgba(201,138,21,.45)}
@keyframes escflow{to{background-position:0 6px}}
@keyframes escdrop{
  0%{top:0; opacity:0}
  18%{opacity:1}
  82%{opacity:1}
  100%{top:calc(100% - 6px); opacity:0}
}
.tc-esc .tc-row{
  position:relative; isolation:isolate; z-index:1;
  align-items:center; gap:10px;
  overflow:hidden;
  border-radius:var(--r);
  opacity:.4;
  background:rgba(255,255,255,.72);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
  transition:opacity 380ms var(--e-out), border-color 380ms var(--e-out),
             box-shadow 380ms var(--e-out), background 380ms var(--e-out);
}
.tc-esc .tc-row > *{position:relative; z-index:1}
.tc-esc .tc-row::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:color-mix(in srgb, var(--c) 18%, transparent);
  transform:scaleX(0); transform-origin:left;
}
.esc-dot{
  width:8px; height:8px; border-radius:var(--r-full); flex:none;
  background:var(--c); opacity:.28;
  box-shadow:0 0 0 0 transparent;
  transition:opacity 280ms, box-shadow 380ms, transform 380ms;
}
.esc-copy{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.esc-copy b{font-size:13.5px; line-height:1.2; font-weight:600}
.esc-stat{
  font-style:normal; font-family:var(--font-wa);
  font-size:11px; letter-spacing:0; color:var(--muted); line-height:1.3;
}
.esc-stat .dots::after{
  content:""; animation:escdots 1.15s steps(4,end) infinite;
}
.tc p.esc-choose{
  position:absolute;
  left:50%;
  top:0;
  transform:translate(-50%, -50%);
  z-index:4;
  margin:0;
  padding:5px 12px;
  white-space:nowrap;
  text-align:center;
  font-size:10px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink);
  background:rgba(255,255,255,.52);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  border:1px solid var(--glass-rim-hi);
  border-radius:var(--r-pill);
  box-shadow:0 10px 24px -12px rgba(17,27,33,.28),
             0 0 0 .5px rgba(255,255,255,.6),
             inset 0 1px 0 rgba(255,255,255,.95);
}
.tc-esc .tc-row.is-on{
  opacity:1;
  border-color:color-mix(in srgb, var(--c) 50%, var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.tc-esc .tc-row.is-on::before{
  transform:scaleX(1);
  transition:transform 2.4s linear;
}
.tc-esc .tc-row.is-on .esc-dot{
  opacity:1;
  box-shadow:0 0 0 5px color-mix(in srgb, var(--c) 22%, transparent);
  animation:escdot 1.05s var(--e-io) infinite;
}
.tc-esc .tc-row.is-on .esc-stat{color:color-mix(in srgb, var(--c) 70%, var(--ink))}
.tc-esc .tc-row.is-on .pill{animation:escpill 1.05s var(--e-io) infinite}
.tc-esc .tc-row.is-done{opacity:.78}
.tc-esc .tc-row.is-done::before{
  transform:scaleX(1); transition:none;
  background:color-mix(in srgb, var(--c) 8%, transparent);
}
.tc-esc .tc-row.is-done .esc-dot{opacity:.45; transform:scale(.9)}
.tc-esc .tc-row.is-done .esc-stat{color:var(--ink-2)}
.tc-esc .tc-row.is-ring .esc-dot{animation:escdot 720ms var(--e-io) infinite}
@keyframes escdot{50%{transform:scale(1.18)}}
@keyframes escpill{50%{transform:scale(1.07)}}
@keyframes escdots{0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."}}
@media (prefers-reduced-motion:reduce){
  .tc-esc .tc-row{opacity:1}
  .tc-esc .tc-row::before,.tc-esc .tc-row.is-on .pill,.tc-esc .tc-row.is-on .esc-dot,
  .esc-stat .dots::after,.esc-gap::before,.esc-gap::after{animation:none; transition:none; transform:none}
  .esc-gap::after{top:50%; opacity:.7}
}
@media(max-width:900px){.trio{grid-template-columns:1fr}}

/* card 1 — taller stage so all three save-states sit under one reply */
.tc-convo{
  margin-top:auto; height:228px; flex:none; overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:6px;
  padding:12px 11px; border-radius:12px; border:1px solid var(--line);
  font-family:var(--font-wa); font-variation-settings:normal;
  background-color:var(--wa-wallpaper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C8BDAE' stroke-width='1' stroke-linecap='round' opacity='.3'%3E%3Cpath d='M14 18h10M19 13v10'/%3E%3Ccircle cx='92' cy='22' r='5'/%3E%3Cpath d='M40 40q6-8 12 0t12 0'/%3E%3Cpath d='M96 54v9M91.5 58.5h9'/%3E%3Cpath d='M18 62c0-4 3-7 7-7s7 3 7 7-3 7-7 7h-3l-4 3v-3z'/%3E%3Cpath d='M62 82h12M68 76v12'/%3E%3Ccircle cx='30' cy='100' r='4.5'/%3E%3Cpath d='M84 96l5 5 8-9'/%3E%3Cpath d='M50 16v8M46 20h8'/%3E%3Cpath d='M104 82q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:104px 104px;
}
.tc-convo .mb{font-size:12.5px; max-width:92%}
.tc .tc-convo .mb:not(.me){padding:8px 36px 12px 12px}
.tc-convo .mb.me .meta{
  float:right; margin:5px 0 -3px 8px;
  display:inline-flex; align-items:center; gap:3px;
  line-height:1;
}
.tc-convo .mb .tk{
  width:15px; height:9px; fill:none; stroke:var(--wa-tick);
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round;
}
.tc-convo .mb .ok{display:block; margin-bottom:4px}
.tc-convo .mb .fact-name{display:block; font-weight:600; letter-spacing:-.01em}
.tc-convo .mb .fact-row{display:block; color:var(--ink-2); font-size:12px; line-height:16px}
.tc-convo .mb .lt-add{display:block; font-weight:700; color:var(--ink); margin-top:3px; letter-spacing:-.01em}
.tc-tags{display:flex; flex-direction:column; align-items:flex-start; gap:5px; margin-left:6px}
.tc-tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:var(--r-pill); background:var(--paper);
  border:1px solid var(--line); font-size:11px; font-weight:600; color:var(--ink-2);
  transition:opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out),
             border-color 280ms, background 280ms, color 280ms;
}
.tc-tag.is-new{opacity:0; transform:translateY(7px)}
.tc-tag.is-on{
  background:var(--green-lite); border-color:color-mix(in srgb,var(--green) 35%, var(--line));
  color:var(--ink);
}
.tc-tag svg{width:13px; height:13px; flex:none; color:var(--green-ink)}
.tc-tag .tree-ico{fill:none}

/* Trio card 3 — mini LifeTree. Parent node, then children, then a
   click opens that child's event card. */
.tc-tree{
  --c:#C2554B;
  margin-top:auto; height:228px; flex:none;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:0; position:relative; overflow:hidden;
  padding:0 12px 12px; border-radius:12px; border:1px solid var(--line);
  background-color:var(--wa-wallpaper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C8BDAE' stroke-width='1' stroke-linecap='round' opacity='.3'%3E%3Cpath d='M14 18h10M19 13v10'/%3E%3Ccircle cx='92' cy='22' r='5'/%3E%3Cpath d='M40 40q6-8 12 0t12 0'/%3E%3Cpath d='M96 54v9M91.5 58.5h9'/%3E%3Cpath d='M18 62c0-4 3-7 7-7s7 3 7 7-3 7-7 7h-3l-4 3v-3z'/%3E%3Cpath d='M62 82h12M68 76v12'/%3E%3Ccircle cx='30' cy='100' r='4.5'/%3E%3Cpath d='M84 96l5 5 8-9'/%3E%3Cpath d='M50 16v8M46 20h8'/%3E%3Cpath d='M104 82q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:104px 104px;
}
.tt-parent{
  appearance:none; border:0; cursor:pointer;
  background:#fff; color:var(--ink);
  font:inherit; font-size:12.5px; font-weight:700; letter-spacing:-.02em;
  padding:7px 14px; border-radius:var(--r-pill);
  box-shadow:0 6px 16px -10px rgba(17,27,33,.32), 0 0 0 1.5px color-mix(in srgb,var(--c) 45%, transparent);
  opacity:0; transform:translateY(8px) scale(.94);
  transition:opacity 480ms var(--e-out), transform 480ms var(--e-out), box-shadow 380ms;
}
.tc-tree.is-ready .tt-parent{opacity:1; transform:none}
.tt-in{
  width:1px; height:10px; margin:0 0 2px; position:relative;
  background:color-mix(in srgb,var(--c) 50%, var(--line));
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 360ms var(--e-out);
}
.tt-in::before{
  content:""; position:absolute; top:0; left:-12px; width:25px; height:1px;
  background:color-mix(in srgb,var(--c) 45%, var(--line));
}
.tc-tree.is-ready .tt-in{transform:scaleY(1)}
.tt-stem{
  width:1px; height:10px; margin:2px 0 0;
  background:color-mix(in srgb,var(--c) 50%, var(--line));
  transform:scaleY(0); transform-origin:top;
  transition:transform 320ms var(--e-out) 80ms;
}
.tc-tree.is-branched .tt-stem{transform:scaleY(1)}
.tt-fan{position:relative; width:100%; padding:0 4px 2px}
.tt-bar{
  position:absolute; left:16%; right:16%; top:0; height:1px;
  background:color-mix(in srgb,var(--c) 45%, var(--line));
  transform:scaleX(0); transform-origin:center;
  transition:transform 380ms var(--e-out) 60ms;
}
.tc-tree.is-branched .tt-bar{transform:scaleX(1)}
.tt-kids{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3);
  width:100%; padding-top:18px;
}
.tt-kid{
  appearance:none; border:0; cursor:pointer;
  background:#fff; color:var(--ink);
  font:inherit; font-size:10px; font-weight:600;
  padding:6px 8px; border-radius:var(--r-pill); width:100%;
  box-shadow:0 3px 10px -6px rgba(17,27,33,.28);
  opacity:0; transform:translateY(8px);
  position:relative;
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out),
             box-shadow 280ms, background 280ms;
}
.tt-kid::before{
  content:""; position:absolute; left:50%; top:-18px;
  width:1px; height:18px; margin-left:-.5px;
  background:color-mix(in srgb,var(--c) 45%, var(--line));
  transform:scaleY(0); transform-origin:top;
  transition:transform 280ms var(--e-out);
}
.tt-kid.is-in{opacity:1; transform:none}
.tc-tree.is-branched .tt-kid.is-in::before{transform:scaleY(1)}
.tt-kid.is-on{
  background:color-mix(in srgb,var(--c) 14%, #fff);
  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 55%, transparent);
}
.tt-kid:focus-visible{outline:var(--focus-w) solid var(--green-ink); outline-offset:var(--focus-offset)}
/* one iOS glass note at a time — second card replaces the first */
.tt-note{
  position:absolute; left:12px; right:12px; bottom:16px; z-index:6;
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(255,255,255,.52);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  border:1px solid var(--glass-rim-hi);
  border-radius:7px; padding:10px 12px 11px;
  box-shadow:0 16px 40px -12px rgba(17,27,33,.32),
             0 4px 16px -4px rgba(17,27,33,.14),
             0 0 0 0.5px rgba(255,255,255,.6),
             inset 0 1px 0 rgba(255,255,255,.95);
  opacity:0; transform:translateY(18px) scale(.97);
  transition:transform 560ms cubic-bezier(.16,1,.3,1), opacity 280ms ease;
}
.tt-note.is-in{opacity:1; transform:translateY(0) scale(1)}
.tt-note[hidden]{display:none}
.tt-note-ico{
  width:32px; height:32px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  background:color-mix(in srgb,var(--c) 16%, #fff);
  color:var(--c);
}
.tt-note-ico svg{width:17px; height:17px}
.tt-note-body{flex:1; min-width:0; padding-top:1px}
.tt-note-body b{display:block; font-size:12.5px; font-weight:700; letter-spacing:-.02em}
.tt-note-body em{
  display:block; font-style:normal; margin-top:2px;
  font-size:11px; color:var(--ink-2); line-height:1.35;
}
.tt-note-x{
  appearance:none; border:0; background:rgba(17,27,33,.06);
  width:22px; height:22px; border-radius:var(--r-full); flex:none;
  display:grid; place-items:center; cursor:pointer; color:var(--ink-2);
  margin-top:-2px; margin-right:-2px;
}
.tt-note-x svg{width:11px; height:11px}
.tt-note-x:hover{background:rgba(17,27,33,.1); color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .tt-parent,.tt-in,.tt-stem,.tt-bar,.tt-kid,.tt-kid::before,.tt-note{transition:none; opacity:1; transform:none}
}

/* ============================================================
   THE PHONE — WhatsApp, light mode, as close to the real thing
   as CSS gets. Colours are WhatsApp's own.
   ============================================================ */
.stage{display:flex; justify-content:center; padding:56px 0 0}
/* A 17 Pro Max, pulled a little wider and shorter so the whole device
   clears the fold on a laptop: 364 x 774 of screen. The real thing is
   440 x 956pt, so this is 0.827 px per pt across and slightly compressed
   down the long axis — 17pt body text still lands at the 14.6px the
   bubbles use.
   The frame is 8px of titanium with a 1px rim rather than 12px plus a
   5px stack: on a device this size a heavy bezel reads as a toy. */
.phone, .phone *{
  font-family:var(--font-wa);
  font-variation-settings:normal;
}
.phone{
  width:380px; flex:none; position:relative;
  text-align:left;
  overflow:hidden;
  isolation:isolate;
  background:#43434A; border-radius:60px; padding:8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),
             0 0 0 1px #26262B,
             0 44px 80px -42px rgba(17,27,33,.5),
             0 18px 34px -28px rgba(17,27,33,.34);
}
/* Inner display. Scene pushes live here so translated screens clip to
   the glass — under the bezel, not out the left of the device. */
.glass{
  position:relative; z-index:2;
  height:774px; border-radius:52px;
  overflow:hidden; isolation:isolate;
  clip-path:inset(0 round 52px);
}
.screen{
  position:relative; z-index:2; border-radius:52px; overflow:hidden;
  display:flex; flex-direction:column; height:774px;
  background:var(--wa-wallpaper);
  box-shadow:none;
  transition:transform 280ms cubic-bezier(.32,.72,0,1),
             box-shadow 280ms cubic-bezier(.32,.72,0,1);
}
/* iOS UINavigationController push/pop — the bezel stays, the screen
   slides. Incoming covers from the right; outgoing only recedes 33%
   and dims. No fade of the messages themselves. */
.screen.is-pre{
  transform:translateX(100%);
  box-shadow:-18px 0 36px rgba(0,0,0,.28);
  transition:none;
}
.screen.is-pre-back{
  transform:translateX(-33%);
  transition:none;
}
.screen.screen-leave{
  position:absolute; inset:0; height:auto; z-index:1;
  pointer-events:none;
}
.screen.screen-leave.is-out{transform:translateX(-33%)}
.screen.screen-leave.is-back{z-index:3}
.screen.screen-leave.is-back.is-out{
  transform:translateX(100%);
  box-shadow:-18px 0 36px rgba(0,0,0,.28);
}
.screen.screen-leave::after{
  content:""; position:absolute; inset:0; z-index:60;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity 280ms cubic-bezier(.32,.72,0,1);
}
.screen.screen-leave:not(.is-back).is-out::after{opacity:.12}
.island{position:absolute; top:11px; left:50%; transform:translateX(-50%);
  width:106px; height:31px; border-radius:var(--r-md); background:#0A0A0C; z-index:30}

/* iOS status bar */
.sbar{display:flex; align-items:center; padding:15px 26px 8px; position:relative; z-index:15;
  background:#F6F5F3; color:#000; font-size:15px; font-weight:600; letter-spacing:0}
.sbar .t{font-variant-numeric:tabular-nums}
.sbar .r{margin-left:auto; display:flex; align-items:center; gap:6px}
.sbar svg{fill:#000}

/* chat header */
.chead{
  display:flex; align-items:center; gap:9px; padding:5px 14px 9px;
  background:#F6F5F3; border-bottom:.5px solid #D5D2CD; position:relative; z-index:15;
}
.chead .bk{width:11px; height:18px; flex:none; fill:none; stroke:#007AFF; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
.av{width:34px; height:34px; border-radius:var(--r-full); flex:none;
  background:linear-gradient(155deg,#25D366,#0F7A50); display:grid; place-items:center}
.av svg{width:19px; height:19px; fill:#fff}
.av:has(img){background:none; overflow:hidden}
.av img{width:100%; height:100%; display:block; object-fit:cover}
.cwho{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.cwho b{font-size:16px; font-weight:500; letter-spacing:0; color:#000}
.cwho span{font-size:12.5px; font-weight:400; color:var(--wa-ink-2)}
.chead .ic{margin-left:auto; display:flex; gap:18px; align-items:center}
.chead .ic svg{width:19px; height:19px; fill:#007AFF}

/* wallpaper: WhatsApp's beige + doodle pattern */
.thread{
  flex:1 1 0; min-height:0; padding:12px 9px 8px; display:flex; flex-direction:column;
  justify-content:flex-end; gap:3px; overflow:hidden; position:relative;
  background-color:var(--wa-wallpaper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C8BDAE' stroke-width='1' stroke-linecap='round' opacity='.3'%3E%3Cpath d='M14 18h10M19 13v10'/%3E%3Ccircle cx='92' cy='22' r='5'/%3E%3Cpath d='M40 40q6-8 12 0t12 0'/%3E%3Cpath d='M96 54v9M91.5 58.5h9'/%3E%3Cpath d='M18 62c0-4 3-7 7-7s7 3 7 7-3 7-7 7h-3l-4 3v-3z'/%3E%3Cpath d='M62 82h12M68 76v12'/%3E%3Ccircle cx='30' cy='100' r='4.5'/%3E%3Cpath d='M84 96l5 5 8-9'/%3E%3Cpath d='M50 16v8M46 20h8'/%3E%3Cpath d='M104 82q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:104px 104px;
}
.datepill{
  align-self:center; margin:2px 0 8px;
  background:#FFFFFF; color:#54656F;
  font-size:12.5px; font-weight:500; letter-spacing:0;
  padding:5px 11px; border-radius:8px;
  box-shadow:var(--elev-1);
}
.enc{
  align-self:center; margin-bottom:8px; max-width:88%; text-align:center;
  background:#FFF3C5; color:#5B5344; font-size:10.5px; line-height:1.4;
  padding:6px 11px; border-radius:8px; box-shadow:0 1px .5px rgba(11,20,26,.13);
}
.enc svg{width:9px; height:11px; fill:#8C7A4B; vertical-align:-1px; margin-right:3px}

/* bubbles — WhatsApp geometry, with tails. New ones pop from the
   tail the way iMessage/WhatsApp iOS does: scale from the corner
   with a spring, not a fade. */
.bub{
  position:relative; max-width:78%; align-self:flex-start;
  background:#FFFFFF; color:#111B21;
  padding:6px 9px 7px 10px; border-radius:8px 8px 8px 0;
  font-size:14.2px; font-weight:400; line-height:19px; letter-spacing:0;
  text-align:left;
  box-shadow:0 1px .5px rgba(11,20,26,.13);
  margin-left:8px; margin-top:5px;
  transform-origin:0 100%;
  opacity:1; transform:none;
  transition:transform 200ms cubic-bezier(.32,1.45,.64,1), opacity 80ms ease-out;
}
.bub.is-new{opacity:0; transform:scale(.28)}
.bub::before{
  content:""; position:absolute; left:-8px; bottom:0;
  width:8px; height:13px; background:#FFFFFF;
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.bub .meta{
  float:right; margin:6px 0 -2px 8px; display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:400; color:var(--wa-ink-2); line-height:1;
}
.bub .meta .tk{width:15px; height:9px; fill:none; stroke:var(--wa-tick);
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.bub.me{
  align-self:flex-end; background:var(--wa-bubble-out);
  border-radius:8px 8px 0 8px; margin-left:0; margin-right:8px;
  transform-origin:100% 100%;
}
.bub.me::before{left:auto; right:-8px; background:var(--wa-bubble-out);
  clip-path:polygon(0 0, 0 100%, 100% 100%)}
.bub.me .meta{color:var(--wa-ink-2)}
/* Help Center and Security phones only. The time sits on its own
   row, with padding under it, so it does not share the text line.
   Homepage bubbles keep the shared rule above. */
.help-page .bub:not(.sys),
[data-page="security"] .bub:not(.sys){
  padding:6px 8px 10px 9px;
}
.help-page .bub:not(.me):not(.sys),
[data-page="security"] .bub:not(.me):not(.sys){
  padding-right:12px;
}
.help-page .bub .meta,
[data-page="security"] .bub .meta{
  float:none;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  margin:6px 0 0;
}
.bub::after{content:""; display:block; clear:both}
/* the escalated states, still inside the thread */
.bub.sms{background:#E9EDEF}
.bub.sms::before{background:#E9EDEF}
.bub.sys{
  align-self:center; max-width:88%; text-align:center; margin:6px 0;
  background:rgba(255,255,255,.92); color:#54656F; box-shadow:0 1px .5px rgba(11,20,26,.13);
  font-size:12.5px; letter-spacing:0; text-transform:none; font-weight:400;
  border-radius:8px; padding:5px 11px;
  transform-origin:50% 50%;
}
.bub.sys.is-new{transform:scale(.92) translateY(8px)}
.bub.sys::before{display:none}
/* structured memory — a fact, not a chat paragraph */
.bub .ok{display:block; color:var(--green-ink); font-weight:600; margin-bottom:4px}
.bub .fact-name{display:block; font-weight:600}
.bub .fact-row{display:block; color:#54656F; font-size:13.5px; line-height:18px}
.bub .fact-from{
  display:block; margin-top:5px;
  color:var(--wa-ink-2); font-size:12px; line-height:16px;
}
.fx-rem-acts{
  display:flex; gap:8px; margin-top:10px; clear:both;
}
.fx-rem-acts button{
  flex:1; appearance:none; border:0; cursor:pointer; font:inherit;
  background:var(--wa-header); color:#111B21;
  border-radius:8px; padding:8px 10px;
  font-size:13.5px; font-weight:600; letter-spacing:-.01em;
}
.fx-rem-acts button:first-child{color:var(--green-ink); background:#E2F7E9}
.bub .lt-cta{
  display:block; margin-top:6px;
  color:#027EB5; font-weight:600;
}
.bub .lt-lock{
  display:flex; align-items:center; gap:5px;
  margin-top:5px; color:var(--wa-ink-2); font-size:12.5px; line-height:16px;
}
.bub .lt-lock svg{width:9px; height:11px; fill:#667781; flex:none}
.tree-ico{
  display:inline-block; width:1.05em; height:1.05em;
  vertical-align:-.18em;
  stroke:currentColor; fill:none;
}

/* composer */
.comp{display:flex; align-items:center; gap:var(--space-2); padding:7px 9px 6px; background:#F6F5F3;
  border-top:.5px solid #D5D2CD}
.comp .plus{width:26px; height:26px; flex:none; fill:#007AFF}
.comp .box{flex:1; background:#fff; border:.5px solid #D2D2D7; border-radius:var(--r-md);
  padding:7px 12px; font-size:16px; font-weight:400; color:#9A9A9F; display:flex; align-items:center; gap:var(--space-2)}
.comp .box svg{width:17px; height:17px; fill:#8A8A8E; margin-left:auto; flex:none}
.comp .mic{width:26px; height:26px; flex:none; fill:#007AFF}
.homebar{height:22px; background:#F6F5F3; display:grid; place-items:center}
.homebar i{width:120px; height:5px; border-radius:3px; background:#111B21; opacity:.28}

/* incoming call overlay — the phone's own lock-screen UI, not an in-app screen */
.callscr{
  position:absolute; inset:0; z-index:25;
  background:radial-gradient(120% 70% at 50% 18%, #3A3A3C 0%, #1C1C1E 42%, #000 100%);
  color:#fff;
  opacity:0; pointer-events:none; transform:translateY(12px);
  transition:opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out);
}
.phone[data-step="3"] .callscr,
.phone.is-call .callscr{opacity:1; transform:none; pointer-events:auto}
.phone[data-step="3"] .sbar,
.phone.is-call .sbar{
  background:transparent; color:#fff; z-index:26;
}
.phone[data-step="3"] .sbar svg,
.phone.is-call .sbar svg{fill:#fff}
.phone[data-step="3"] .sbar svg [stroke],
.phone.is-call .sbar svg [stroke]{stroke:currentColor}
.call-ring, .call-live{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  /* top padding clears the transport pill that rides on the device */
  padding:216px 28px 42px;
  transition:opacity 420ms var(--e-out), transform 420ms var(--e-out);
}
.call-live{
  opacity:0; pointer-events:none;
  transform:translateY(10px);
}
.callscr.is-live .call-ring{opacity:0; pointer-events:none; transform:translateY(-8px)}
.callscr.is-live .call-live{opacity:1; pointer-events:auto; transform:none}
.call-name{
  margin:0; text-align:center;
  font-size:28px; font-weight:400; letter-spacing:-.03em; line-height:1.12;
  white-space:nowrap;
}
.call-sub{
  margin:7px 0 0; text-align:center;
  font-size:16px; font-weight:400; color:rgba(255,255,255,.55);
}
.callscr.is-live .call-sub{color:#30D158}
.call-av{
  width:118px; height:118px; border-radius:50%; margin:auto 0 28px;
  background:#3A3A3C; color:#fff;
  display:grid; place-items:center;
  font-size:52px; font-weight:500; letter-spacing:-.04em; line-height:1;
}
.call-av:has(img){background:none; border-radius:0}
.call-av img{width:118px; height:118px; display:block; object-fit:contain}
.cbtns{display:flex; justify-content:space-between; width:min(100%, 248px); margin-top:auto}
.cb{background:none; border:0; padding:0; cursor:pointer; font:inherit; display:flex;
  flex-direction:column; align-items:center; gap:10px; color:rgba(255,255,255,.82);
  font-size:13.5px; font-weight:400; letter-spacing:0; text-transform:none; min-width:64px}
.cb i{width:64px; height:64px; border-radius:50%; display:grid; place-items:center}
.cb i svg{width:26px; height:26px; fill:#fff}
.cb.no i{background:#FF3B30} .cb.no i svg{transform:rotate(135deg)}
.cb.yes i{background:#30D158}
.cb.hang{margin-top:auto}
.cb.hang i{background:#FF3B30} .cb.hang i svg{transform:rotate(135deg)}
.call-actions{
  display:flex; justify-content:space-between; width:min(100%, 248px);
  margin:auto 0 28px; color:rgba(255,255,255,.62);
  font-size:12px; font-weight:400;
}
.call-actions span{display:flex; flex-direction:column; align-items:center; gap:8px; width:64px}
.call-actions i{
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,.12); display:grid; place-items:center;
}
.call-actions svg{width:22px; height:22px; fill:#fff}
.call-home{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  width:120px; height:5px; border-radius:3px; background:#fff; opacity:.28;
}
.call-aside{
  position:absolute; z-index:28;
  left:16px; right:16px; top:62%; width:auto;
  padding:16px 18px 15px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 18px 40px -22px rgba(17,27,33,.5);
  opacity:0; pointer-events:none;
  transform:translateY(10px);
  overflow:hidden;
  transition:opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out);
}
.phone-slide.is-said .call-aside{opacity:1; transform:none; pointer-events:auto}
.call-aside-h{
  margin:0; font-family:var(--font-display); font-weight:700;
  font-size:15px; letter-spacing:-.03em; line-height:1.25; color:var(--ink);
}
.call-aside-q{
  margin:9px 0 0; font-size:13.5px; line-height:1.45; color:var(--ink-2);
}
@media(max-width:1080px){
  .call-aside{left:14px; right:14px; top:58%}
}
@media (prefers-reduced-motion:reduce){
  .call-ring,.call-live,.callscr.is-live .call-ring,.callscr.is-live .call-live,
  .call-aside,.phone-slide.is-said .call-aside{transition:none; transform:none}
}

/* LifeTree ScrollBook — a private page opened from the chat link,
   not another WhatsApp bubble. Sits under the status bar so the
   device still reads as a phone, and covers the thread. */
.bookscr{
  position:absolute; top:0; left:0; right:0; bottom:0; z-index:22;
  background:#202124;
  display:flex; flex-direction:column;
  overflow:hidden;
  opacity:0; pointer-events:none;
  transform:translateY(22px);
  transition:opacity var(--t3) var(--e-out), transform var(--t4) var(--e-out);
}
.phone.is-book .bookscr{opacity:1; transform:none; pointer-events:auto}
.phone.is-book .sbar{visibility:hidden}
/* Chrome around the opened LifeTree: dark bar, address pill, plus,
   and the page inset with its own rounded corners. */
.lt-chrome{
  display:flex; flex-direction:column;
  height:100%; min-height:0;
  background:#202124;
}
.lt-chrome-bar{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:46px 10px 8px;
}
.lt-omni{
  flex:1; min-width:0;
  height:32px; box-sizing:border-box;
  padding:0 12px; border-radius:999px;
  background:#303134; color:#e8eaed;
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:500; letter-spacing:0;
}
.lt-omni svg{width:14px; height:14px; flex:none}
.lt-omni span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lt-new{
  flex:none; display:grid; place-items:center;
  width:28px; height:28px; color:#e8eaed;
}
.lt-new svg{width:18px; height:18px}
.lt-chrome-view{
  position:relative; flex:1; min-height:0;
  margin:0 6px 6px;
  /* Bottom corners follow the glass (52px minus this 6px inset)
     so the dark chrome gutter continues around the chin. */
  border-radius:8px 8px 46px 46px; overflow:hidden;
  container-type:size;
  background:#FBFDF8;
}
.lt-chrome-view .book-body.lt-app{position:absolute; inset:0}
/* Finger-tap mark. Slide 2 only: a short drop onto Open LifeTree,
   then the click, then the private page covers the chat. */
.tap-here{
  position:absolute; z-index:30;
  width:22px; height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  top:88px;
  background:rgba(96,96,102,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.8), 0 0 0 6px rgba(130,130,136,.32);
  transform:scale(.82);
  transition:none;
}
.phone[data-step="2"].is-tap .tap-here{opacity:1; transform:scale(1)}
.phone[data-step="2"].is-tap.is-press .tap-here{transform:scale(.72)}
.phone:not([data-step="2"]) .tap-here{
  opacity:0 !important;
  visibility:hidden !important;
}
.phone[data-step="3"] .bookscr{opacity:0; pointer-events:none; transform:translateY(22px)}
.bookscr, .bookscr *{font-family:var(--font-display); font-variation-settings:normal}
.book-chrome{
  display:flex; align-items:center; gap:var(--space-2);
  min-height:48px; padding:10px 16px 9px;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.book-lock{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--green-ink);
}
.book-lock svg{width:9px; height:11px; fill:currentColor}
.book-exp{margin-left:auto; font-size:11px; font-weight:500; color:var(--muted)}
.book-body{
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:76px 18px 0;
  box-shadow:inset 10px 0 18px -16px rgba(17,27,33,.28);
}
/* Thriving splash, then the remembered card turns open as a page. */
.book-body.lt-app{
  padding:0;
  box-shadow:none;
  position:relative;
  perspective:1600px;
  background:linear-gradient(130deg,#E6FBEF 0%,#EFFCC6 10%,#FAFDA2 18%,#FDFD96 23%,#F8FCAE 31%,#EEF9D2 42%,#E5F7EE 53%,#E0F6FF 66%,#EBF8FE 82%,#FBFDF8 100%);
}
.lt-fit{
  position:absolute; left:0; top:0;
  width:390px; height:844px;
  transform:scale(calc(100cqw / 390px));
  transform-origin:top left;
}
.lt-splash{display:block; width:390px; height:844px; object-fit:fill}
.lt-hot{position:absolute; border-radius:12px}
#ltRemember{left:125px; top:203px; width:141px; height:69px}
#ltGoals{left:246px; top:278px; width:122px; height:70px}
.lt-mem{
  position:absolute; inset:0; overflow:hidden;
  background:linear-gradient(130deg,#E6FBEF 0%,#EFFCC6 10%,#FAFDA2 18%,#FDFD96 23%,#F8FCAE 31%,#EEF9D2 42%,#E5F7EE 53%,#E0F6FF 66%,#EBF8FE 82%,#FBFDF8 100%);
  transform:translateY(24px);
  opacity:0; pointer-events:none;
  transition:transform 520ms cubic-bezier(.22,.7,.2,1), opacity 420ms ease;
  /* Canvas is 844px tall and scaled to the chrome width, so the lower
     part sits past the visible glass. Park the bar 16px above that edge. */
  --lt-s:calc(100cqw / 390px);
  --lt-nav-h:64px;
  --lt-nav-bottom:calc(844px - (100cqh - 16px) / var(--lt-s));
}
.phone.is-mem .lt-mem{transform:none; opacity:1}
.phone.is-mem .lt-splash{visibility:hidden}
.lt-mem-leaves{
  position:absolute; top:-78px; right:-10px; width:260px; height:auto;
  pointer-events:none;
}
.lt-mem-top{
  position:absolute; top:16px; left:16px; right:16px;
  display:flex; align-items:center; justify-content:space-between;
}
.lt-mem-back, .lt-mem-timer{
  height:44px; border-radius:999px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 12px 32px -18px rgba(17,27,33,.22);
  display:flex; align-items:center; justify-content:center;
  color:#2A3942;
}
.lt-mem-back{width:44px}
.lt-mem-back svg{width:18px; height:18px}
.lt-mem-timer{gap:8px; padding:0 16px; font-size:13px; font-variant-numeric:tabular-nums}
.lt-mem-timer svg{width:16px; height:16px}
.lt-mem-h{
  position:absolute; top:76px; left:16px; margin:0;
  font-size:32px; line-height:1; font-weight:650; letter-spacing:-.03em; color:#111B21;
}
.lt-h-goal{display:none}
.phone.is-goal .lt-h-mem{display:none}
.phone.is-goal .lt-h-goal{display:inline}
.lt-mem-stack{
  position:absolute; left:16px; right:16px; height:400px;
  /* 20px of the page shows under the heading, then the stacked edges. */
  top:calc(76px + 32px + 20px + 16px);
}
.lt-mem-clip{position:absolute; inset:0; border-radius:28px; overflow:hidden}
.lt-mem-stack::before, .lt-mem-stack::after{
  content:""; position:absolute; height:22px; border-radius:18px 18px 0 0;
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.85);
}
.lt-mem-stack::before{top:-16px; left:22px; right:22px}
.lt-mem-stack::after{top:-8px; left:12px; right:12px}
.lt-mem-card{
  position:absolute; inset:0; border-radius:28px; padding:20px;
  background:#fff;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 32px -18px rgba(17,27,33,.22);
  display:flex; flex-direction:column;
}
.lt-face-next{z-index:2}
.lt-face-keep{z-index:4; background:#fff}
.lt-goal-face{display:none}
.phone.is-goal .lt-goal-face{display:flex}
.phone.is-goal .lt-mem-card:not(.lt-goal-face){display:none}
.lt-flap{
  position:absolute; left:0; top:0; width:100%; height:100%;
  z-index:5; pointer-events:none; opacity:0;
  filter:drop-shadow(0 8px 14px rgba(17,27,33,.2)) drop-shadow(0 1px 2px rgba(17,27,33,.12));
}
.lt-flap-sheet{position:absolute; inset:0; transform-origin:0 0}
.lt-flap-paper{
  position:absolute; inset:0; border-radius:28px; overflow:hidden;
  background:linear-gradient(180deg, #fff 0%, #f4f6f8 22%, #dfe4e8 100%);
  box-shadow:inset 0 1px 0 #fff;
  border:1px solid rgba(17,27,33,.06);
}
.lt-fold{
  position:absolute; left:0; top:0; width:0; height:0; z-index:3;
  pointer-events:none; opacity:0; transform-origin:0 0;
}
.lt-fold div{position:absolute; left:-1200px; width:2400px}
.lt-hand{
  position:absolute; left:0; top:0; z-index:9;
  width:32px; height:32px; margin:0;
  display:block; color:#1C2A33; opacity:0; pointer-events:none;
  transform-origin:16px 16px;
  filter:drop-shadow(0 4px 6px rgba(17,27,33,.25));
}
.lt-hand svg{width:32px; height:32px}
.lt-mem-meta{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; color:#66767F;
}
.lt-mem-meta span{display:flex; align-items:center; gap:4px}
.lt-mem-meta svg{width:12px; height:12px}
.lt-mem-meta em{
  font-style:normal; height:26px; padding:0 10px; border-radius:999px;
  background:#FEECFC; border:1px solid #F1C6EC; color:#774A73;
  display:flex; align-items:center; font-size:12px; font-weight:500;
}
.lt-mem-meta em.is-goal{background:var(--ok-tint); border-color:#A7DDC1; color:var(--green-ink)}
.lt-mem-body{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center;
}
.lt-mem-ico{color:#F1C6EC}
.lt-mem-ico.is-goal{color:var(--green-ink)}
.lt-mem-ico svg{width:96px; height:96px}
.lt-mem-body p{
  margin:0; font-size:32px; font-weight:650; letter-spacing:-.03em;
  line-height:1.15; color:#111B21;
}
.lt-mem-saved{
  margin:0; display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:12px; color:#54656F;
}
.lt-mem-saved svg{width:12px; height:12px; color:#0F7A50}
.lt-mem-surprise{
  position:absolute; left:50%; bottom:calc(var(--lt-nav-bottom) + var(--lt-nav-h) + 16px);
  transform:translateX(-50%);
  width:max-content; height:52px; padding:0 22px;
  border-radius:999px; white-space:nowrap;
  background:linear-gradient(180deg, #EEFBF3, #D6F3E2);
  border:1px solid #A7DDC1; color:#0F7A50;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:15px; font-weight:600;
}
.lt-mem-surprise svg{width:16px; height:16px}
.lt-mem-nav{
  position:absolute; left:16px; right:16px; bottom:var(--lt-nav-bottom); height:var(--lt-nav-h); padding:8px;
  border-radius:999px; background:rgba(255,255,255,.58);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 12px 32px -18px rgba(17,27,33,.22);
  display:flex; align-items:center; justify-content:space-between;
}
.lt-mem-nav span{
  width:48px; height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; color:#54656F;
}
.lt-mem-nav svg{width:20px; height:20px}
.lt-mem-nav .is-on{
  width:auto; padding:0 16px 0 12px; gap:8px;
  background:#E2F7E9; border:1px solid #A7DDC1; color:#0F7A50;
  font-size:14px; font-weight:500;
}
.lt-nav-goal b{display:none; font-weight:500}
.phone.is-goal .lt-mem-nav .is-on{
  width:48px; padding:0; gap:0;
  background:transparent; border-color:transparent; color:#54656F;
  font-size:0;
}
.phone.is-goal .lt-nav-goal{
  width:auto; padding:0 16px 0 12px; gap:8px;
  background:var(--ok-tint); border:1px solid #A7DDC1; color:var(--green-ink);
  font-size:14px; font-weight:500;
}
.phone.is-goal .lt-nav-goal b{display:inline}
.book-k{
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:10px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--green-ink); margin:0;
}
.book-k .tree-ico{width:12px; height:12px; flex:none}
.book-n{
  margin:6px 0 0; color:var(--ink);
  font-size:26px; font-weight:600; letter-spacing:-.04em; line-height:1.05;
}
.book-stats{
  display:flex; gap:var(--space-2); margin:14px 0 12px; flex-wrap:wrap;
}
.book-stats span{
  display:flex; align-items:baseline; gap:5px;
  padding:6px 9px; border-radius:var(--r-xs);
  background:rgba(15,122,80,.07); color:var(--ink-2);
  font-size:11px; font-weight:500;
}
.book-stats b{font-size:14px; font-weight:700; color:var(--ink); letter-spacing:-.03em}
.book-scroll{
  flex:1; min-height:0; overflow:auto; padding-bottom:18px;
  scrollbar-width:none;
}
.book-scroll::-webkit-scrollbar{display:none}
.book-sec{
  margin:10px 0 7px;
  font-family:var(--font-mono);
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.book-scroll > .book-sec:first-child{margin-top:0}
.book-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px}
.book-list li{
  position:relative;
  background:#fff; border-radius:10px;
  padding:10px 12px 10px 16px;
  box-shadow:var(--elev-1-soft);
}
.book-list li::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 2px 2px 0; background:var(--c, var(--green-ink));
}
.book-list b{display:block; font-size:14px; font-weight:600; letter-spacing:-.02em; color:var(--ink)}
.book-list em{
  display:block; margin-top:2px; font-style:normal;
  font-size:12.5px; color:var(--ink-2); line-height:1.3;
}
/* Developed LifeTree, fitted to the phone: Admin / Memories, summary, timeline. */
.book-body.lt-live{
  padding:72px 12px 0;
  background:linear-gradient(180deg,#FAFAFB 0%, color-mix(in srgb, var(--ok-tint) 55%, #fff) 70%, #F7F6FB 100%);
  box-shadow:none;
}
.lt-live-top{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom:10px;
}
.lt-live-top > b{font-size:15px; font-weight:650; letter-spacing:-.03em; color:var(--ink)}
.lt-live-tabs{
  display:inline-flex; padding:2px; gap:2px;
  border:1px solid var(--line); border-radius:11px; background:#fff;
}
.lt-live-tabs span{
  padding:4px 8px; border-radius:8px;
  font-size:11px; font-weight:600; color:var(--ink-2);
}
.lt-live-tabs .is-on{background:var(--cat-work-tint); color:var(--cat-work-ink)}
.lt-sum, .lt-year{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--line);
  border-radius:var(--r-md); padding:10px 12px;
}
.lt-sum{margin-bottom:8px}
.lt-sum-av{
  width:36px; height:36px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  background:var(--green-ink); color:#fff;
  font-size:14px; font-weight:700;
}
.lt-sum-copy{min-width:0}
.lt-sum-copy b{display:block; font-size:14px; font-weight:650; letter-spacing:-.02em; color:var(--ink)}
.lt-sum-copy em{
  display:block; margin-top:1px; font-style:normal;
  font-size:11.5px; color:var(--ink-2);
}
.lt-counts{display:flex; gap:8px; margin-bottom:14px}
.lt-counts span{
  flex:1; display:flex; flex-direction:column; gap:1px;
  padding:8px 10px; border-radius:var(--r-sm); border:1px solid transparent;
  font-size:10px; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
}
.lt-counts b{font-size:16px; font-weight:700; letter-spacing:-.03em; text-transform:none}
.lt-counts .tone-work{background:var(--cat-work-tint); color:var(--cat-work-ink); border-color:color-mix(in srgb, var(--cat-work-ink) 16%, transparent)}
.lt-counts .tone-warn{background:var(--warn-tint); color:var(--warn-ink); border-color:color-mix(in srgb, var(--warn) 22%, transparent)}
.lt-live-h{
  display:flex; align-items:center; gap:8px;
  margin:0 0 8px; font-size:15px; font-weight:650; letter-spacing:-.02em; color:var(--ink);
}
.lt-live-h::before{
  content:""; width:3px; height:16px; border-radius:2px; background:var(--green-ink);
}
.lt-year{margin-bottom:8px}
.lt-year-badge{
  width:40px; height:40px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center;
  background:var(--green-ink); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:-.03em;
}
.lt-events{
  list-style:none; margin:0; padding:0 0 16px;
  display:flex; flex-direction:column; gap:7px;
}
.lt-ev{
  --r:12px; --r-pad:8px;
  display:flex; align-items:flex-start; gap:8px;
  padding:var(--r-pad); border-radius:var(--r-outer);
  background:#fff; border:1px solid var(--line);
}
.lt-ev-ico{
  width:36px; height:36px; border-radius:var(--r); flex:none;
  display:grid; place-items:center;
}
.lt-ev-ico svg{width:18px; height:18px}
.lt-ev-ico.tone-ok{background:var(--ok-tint); color:var(--green-ink)}
.lt-ev-ico.tone-warn{background:var(--warn-tint); color:var(--warn)}
.lt-ev-ico.tone-info{background:var(--info-tint); color:var(--info-ink)}
.lt-ev-ico.tone-work{background:var(--cat-work-tint); color:var(--cat-work-ink)}
.lt-ev-copy{min-width:0; padding-top:1px}
.lt-ev-copy b{display:block; font-size:13.5px; font-weight:650; letter-spacing:-.02em; color:var(--ink)}
.lt-ev-copy em{
  display:block; margin-top:1px; font-style:normal;
  font-size:12px; color:var(--ink-2); line-height:1.3;
}
.lt-tag, .lt-pill{
  display:inline-block; margin-top:5px;
  padding:2px 7px; border-radius:var(--r-pill);
  font-size:10px; font-weight:600;
}
.lt-tag{background:var(--canvas-2); color:var(--ink-2)}
.lt-pill{background:var(--warn); color:#fff}
@media (prefers-reduced-motion:reduce){
  .bookscr,.phone.is-book .bookscr,.phone[data-step="3"] .bookscr,
  .lt-mem,.phone.is-mem .lt-mem,
  .lt-flap,.lt-hand{transition:none; transform:none; animation:none}
  .tap-here{display:none}
}

/* transport — three story bars. The track is always visible; the fill
   grows left → right for the dwell of the current slide, then holds
   full on slides already seen. Hit area is the 44px padding, not the
   3px rule. */
.transport{width:380px; margin:18px auto 0; display:flex; flex-direction:column; gap:9px}
.trow{display:flex; align-items:center; justify-content:center}
.segs{display:flex; gap:5px; flex:1}
.seg{
  position:relative; flex:1; height:3px;
  border:0; padding:0; padding-block:20px; min-height:44px;
  background:transparent; cursor:pointer;
}
.seg::before,
.seg::after{
  content:""; position:absolute; left:0; right:0;
  top:50%; height:3px; margin-top:-1.5px;
  border-radius:2px; pointer-events:none;
}
/* Track is the same iOS glass as the light-ground cards: beige frost,
   white rim, blur of whatever sits behind (the phone wallpaper). */
.seg::before{
  background-color:color-mix(in srgb, var(--card) 64%, transparent);
  background-image:linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 40%, transparent 68%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 0 0 1px rgba(255,255,255,.58);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
}
.seg::after{
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left center;
}
.seg.is-done::after,
.seg.is-done.is-filling::after{
  animation:none; transform:scaleX(1);
}
.seg.is-filling::after{
  animation:segfill var(--seg-ms, 11.5s) linear forwards;
}
@keyframes segfill{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce){
  .seg.is-filling::after{animation:none; transform:scaleX(1)}
}
.tlab{text-align:center}
/* narrow phones: the device shrinks whole, ratio intact (300 - 16 = 284
   of screen, so the height follows at 284 x 2.1727) */
@media(max-width:400px){
  .phone{width:300px; border-radius:48px}
  .glass{height:617px; border-radius:40px; clip-path:inset(0 round 40px)}
  .screen{height:617px; border-radius:40px}
  .island{top:9px; width:81px; height:24px; border-radius:var(--r-sm)}
  .transport{width:300px}
  .hero-vis .phone-fit,
  .hero-vis .phone-slide{border-radius:48px}
  .hero-vis .phone-fit{clip-path:inset(0 round 48px)}
  .lt-chrome-view{border-radius:8px 8px 34px 34px}
}

/* ============================================================ WITHOUT / WITH */
.vs{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4)}
.vsc{padding:26px}
.vsc h3{font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  margin-bottom:16px; display:flex; align-items:center; gap:9px}
.vsc h3 i{width:20px; height:20px; border-radius:var(--r-full); display:grid; place-items:center; flex:none}
.vsc h3 i svg{width:11px; height:11px; fill:#fff}
.vsc.bad h3 i{background:#D2503A} .vsc.good h3 i{background:var(--green-ink)}
.vsl{display:flex; flex-direction:column; gap:9px; list-style:none; padding:0; margin:0}
.vsl li{display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:baseline;
  font-size:14px; line-height:1.5; color:var(--ink-2)}
.vsl li svg{width:13px; height:13px; margin-top:4px}
.vsc.bad svg{stroke:#D2503A} .vsc.good svg{stroke:var(--green-ink)}
.vsc.good svg.lt-peel-orbit,
.vsc.good svg.lt-peel-orbit text,
.vsc.good svg.lt-peel-orbit textPath{stroke:none; fill:#747A80}
/* Pulse packets are fills, not strokes — don't inherit green-ink (reads teal/blue). */
.vsc.good .sm-pulse circle,
.vsc.good .saved-map-traces .sm-pulse-head,
.vsc.good .saved-map-traces .sm-pulse-glow{stroke:none}
.vsc.good .sm-wire path{stroke:#9AA8A0}
.vsl li svg{fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
/* Grain panel — match grain-panel-dates_1.html. Height follows content
   (the demo's 2/3 aspect would squash this comparison card). */
.grain-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(74% 40% at 8% 0%,    var(--g-hi)   0%, transparent 60%),
    radial-gradient(68% 38% at 96% 10%,  var(--g-hi-2) 0%, transparent 66%),
    radial-gradient(90% 52% at 92% 102%, var(--g-lo)   0%, transparent 64%),
    radial-gradient(78% 46% at 0% 94%,   var(--g-lo-2) 0%, transparent 68%),
    linear-gradient(168deg, var(--g-a) 0%, var(--g-b) 100%);
  background-color:var(--g-a);
}
.grain-panel::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  background-image:var(--grain-img);
  background-repeat:repeat;
  background-size:var(--grain-size) var(--grain-size);
  mix-blend-mode:var(--grain-blend);
  opacity:var(--grain-strength);
}
.grain-panel > *{ position:relative; z-index:1 }
@supports not (mix-blend-mode: overlay){ .grain-panel::after{ opacity:.10 } }
.tone-health{
  --g-a:var(--cat-health-a); --g-b:var(--cat-health-b);
  --g-hi:#FCA5A5; --g-hi-2:#F9A8D4;
  --g-lo:#BE185D; --g-lo-2:#E11D48;
}
.tone-work{
  --g-a:var(--cat-work-a); --g-b:var(--cat-work-b);
  --g-hi:#93C5FD; --g-hi-2:#67E8F9;
  --g-lo:#0369A1; --g-lo-2:#0EA5E9;
}
.tone-ideas{
  --g-a:var(--cat-ideas-a); --g-b:var(--cat-ideas-b);
  --g-hi:#D8B4FE; --g-hi-2:#A5B4FC;
  --g-lo:#6D28D9; --g-lo-2:#6366F1;
}
.tone-life{
  --g-a:var(--cat-life-a); --g-b:var(--cat-life-b);
  --g-hi:#6EE7B7; --g-hi-2:#4ADE80;
  --g-lo:#047857; --g-lo-2:#10B981;
}
.tone-dates{
  --g-a:#4ADE80;
  --g-b:#16A34A;
  --g-hi:#6BE998;
  --g-hi-2:#5FE491;
  --g-lo:#0E8A3D;
  --g-lo-2:#1FA753;
}
.tone-goals{
  --g-a:var(--cat-goals-a); --g-b:var(--cat-goals-b);
  --g-hi:#FDE68A; --g-hi-2:#FCD34D;
  --g-lo:#B45309; --g-lo-2:#D97706;
}
.tone-family{
  --g-a:var(--cat-family-a); --g-b:var(--cat-family-b);
  --g-hi:#5EEAD4; --g-hi-2:#2DD4BF;
  --g-lo:#115E59; --g-lo-2:#14B8A6;
}
.tone-money{
  --g-a:var(--cat-money-a); --g-b:var(--cat-money-b);
  --g-hi:#FDBA74; --g-hi-2:#FB923C;
  --g-lo:#9A3412; --g-lo-2:#F97316;
}
.tone-routines{
  --g-a:var(--cat-routines-a);
  --g-b:var(--cat-routines-b);
  --g-hi:#7DD3FC;
  --g-hi-2:#5EC8FA;
  --g-lo:#1D4ED8;
  --g-lo-2:#3B82F6;
}
.tone-memories{
  --g-a:var(--cat-memories-a); --g-b:var(--cat-memories-b);
  --g-hi:#F0ABFC; --g-hi-2:#C4B5FD;
  --g-lo:#7E22CE; --g-lo-2:#8B5CF6;
}
.tone-travel{
  --g-a:var(--cat-travel-a); --g-b:var(--cat-travel-b);
  --g-hi:#67E8F9; --g-hi-2:#22D3EE;
  --g-lo:#155E75; --g-lo-2:#06B6D4;
}
.tone-care{
  --g-a:var(--cat-care-a); --g-b:var(--cat-care-b);
  --g-hi:#FDA4AF; --g-hi-2:#FB7185;
  --g-lo:#9F1239; --g-lo-2:#F43F5E;
}
/* Follow-up mix — amber → coral, same grain recipe as dates / routines. */
.tone-follow{
  --g-a:var(--cat-goals-a);
  --g-b:#EA580C;
  --g-hi:#FDE68A;
  --g-hi-2:#FDBA74;
  --g-lo:#C2410C;
  --g-lo-2:#F59E0B;
}

/* Green frame + white pane — grain-panel paints the frame */
.vsc.good{
  --r:16px;
  --r-pad:18px;
  --qa-gutter:44px;
  position:relative;
  padding:var(--r-pad) var(--r-pad) 10px;
  border-radius:var(--r-outer) var(--r-outer) calc(var(--r) + 10px) calc(var(--r) + 10px);
  border:1px solid color-mix(in srgb,var(--green-ink) 55%, #fff);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  overflow:visible;
  display:flex; flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             0 16px 36px -18px rgba(15,122,80,.4);
}
/* Glass wash must not sit under the overlay — it muddies Claude's grain. */
.vsc.good.grain-panel::before,
.vsc.good.grain-panel:hover::before{
  opacity:0;
}
/* Grain stays in the green frame only — not over the white pane. */
.vsc.good.grain-panel{
  background:
    linear-gradient(to bottom,
      transparent calc(100% - var(--viz-foot-h) - 32px),
      var(--viz-foot-scrim) calc(100% - var(--viz-foot-h)),
      var(--viz-foot-scrim) 100%),
    radial-gradient(74% 40% at 8% 0%,    var(--g-hi)   0%, transparent 60%),
    radial-gradient(68% 38% at 96% 10%,  var(--g-hi-2) 0%, transparent 66%),
    radial-gradient(90% 52% at 92% 102%, var(--g-lo)   0%, transparent 64%),
    radial-gradient(78% 46% at 0% 94%,   var(--g-lo-2) 0%, transparent 68%),
    linear-gradient(168deg, var(--g-a) 0%, var(--g-b) 100%);
  background-color:var(--g-a);
}
/* Grain is its own masked layer, not a background-blend entry. The mask
   fades it out over the foot so the link and the privacy line sit on
   clean gradient — the setting we tuned and signed off. Both .vsc-pane
   and .vsc-foot are direct children at z-index 1, so they stay above it
   and the white pane never receives grain. */
.vsc.good.grain-panel::after{
  -webkit-mask-image:linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--viz-foot-h) - 32px),
    transparent calc(100% - var(--viz-foot-h)));
          mask-image:linear-gradient(to bottom,
    #000 0,
    #000 calc(100% - var(--viz-foot-h) - 32px),
    transparent calc(100% - var(--viz-foot-h)));
}
.vsc.good.grain-panel{ overflow:visible }
.vsc.good:hover{
  border-color:color-mix(in srgb,var(--green-ink) 70%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 22px 44px -22px rgba(15,122,80,.42);
}
.vsc.good.grain-panel{
  border-color:color-mix(in srgb,var(--g-b) 55%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             0 16px 36px -18px color-mix(in srgb, var(--g-b) 55%, transparent);
}
.vsc.good.grain-panel:hover{
  border-color:color-mix(in srgb,var(--g-b) 70%, #fff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 22px 44px -22px color-mix(in srgb, var(--g-b) 60%, transparent);
}
.vsc.good.tone-dates,
.vsc.good.tone-follow{
  --r:var(--r-md);
}
.vsc-pane{
  position:relative; z-index:1; isolation:isolate;
  background:#fff;
  border:1px solid var(--glass-rim-hi);
  border-radius:var(--r);
  padding:0;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
             0 10px 28px -16px rgba(17,27,33,.28);
}
.vsc-pane:has(> .saved-map){container-type:inline-size}
.vsc-pane img{
  display:block; width:100%; height:auto; vertical-align:top;
}

/* LifeTree coming-up calendar — white pane, grain footer like the dates card */
.vsc-cal .vsc-pane{
  --lt-pad-t:40px;
  --lt-pad-b:40px;
  --lt-pad-x:16px;
  padding:var(--lt-pad-t) var(--lt-pad-x) var(--lt-pad-b);
}
.lt-cal{color:var(--ink)}
.lt-cal-head{
  position:absolute;
  z-index:4;
  top:-40px;
  right:var(--r-pad);
  margin:0;
  pointer-events:none;
}
.lt-cal-head .lt-peel{pointer-events:auto}
.lt-peel-wrap{
  --peel:148px;
  position:relative;
  width:167px;
  height:167px;
  display:grid;
  place-items:center;
}
.lt-peel-orbit{
  position:absolute; inset:0;
  width:100%; height:100%;
  overflow:visible;
  pointer-events:none;
  transform-origin:50% 50%;
  animation:lt-peel-spin 22s linear infinite;
}
.lt-peel-orbit text,
.lt-peel-orbit textPath{
  font-family:var(--font-body);
  font-size:10px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  fill:#747A80;
  stroke:none;
}
@keyframes lt-peel-spin{
  to{transform:rotate(-360deg)}
}

/* Circular peel sticker — Patrick Kunka’s two-circle clip
   (codepen.io/patrickkunka/pen/DeZQXw), tinted to the sticky-note
   yellow used on .sm-detail in features 1 and 3. */
.lt-peel{
  --peel:148px;
  --peel-ms:750ms;
  --peel-ease:ease-in-out;
  --note:#F6E27A;
  --note-lip:#E2C44A;
  --note-fold:#D4B63A;
  --note-ink:#3d3518;
  position:relative;
  z-index:1;
  width:var(--peel); height:var(--peel);
  flex:none;
  backface-visibility:hidden;
  cursor:pointer;
  user-select:none;
}
.lt-peel-sticky,
.lt-peel-clip,
.lt-peel-disc{
  transition:
    transform var(--peel-ms) var(--peel-ease),
    height var(--peel-ms) var(--peel-ease),
    top var(--peel-ms) var(--peel-ease),
    margin-top var(--peel-ms) var(--peel-ease),
    box-shadow var(--peel-ms) var(--peel-ease),
    background-color var(--peel-ms) var(--peel-ease),
    background-position var(--peel-ms) var(--peel-ease);
}
.lt-peel-sticky{
  position:absolute; inset:0;
  transform:rotate(45deg);
}
.lt-peel:hover .lt-peel-sticky,
.lt-peel.is-open .lt-peel-sticky{
  transform:rotate(10deg);
}
.lt-peel-clip{
  position:absolute; inset:0;
  overflow:hidden;
}
.lt-peel-disc{
  position:absolute;
  width:calc(var(--peel) * 140 / 180);
  height:calc(var(--peel) * 140 / 180);
  margin:calc(var(--peel) * 20 / 180);
  border-radius:var(--r-full);
}
.lt-peel-reveal .lt-peel-disc{
  display:grid; place-items:center;
  background:var(--white);
  border:1px solid color-mix(in srgb, var(--line) 50%, transparent);
  box-shadow:
    0 1px 0 rgba(17,27,33,.08),
    0 8px 16px -12px rgba(17,27,33,.28);
  font-size:36px;
  line-height:1;
}
.lt-peel-back{
  height:calc(var(--peel) * 10 / 180);
  top:calc(var(--peel) * 30 / 180);
}
.lt-peel:hover .lt-peel-back,
.lt-peel.is-open .lt-peel-back{
  height:calc(var(--peel) * 90 / 180);
  top:calc(var(--peel) * 110 / 180);
}
.lt-peel-back .lt-peel-disc{
  margin-top:calc(var(--peel) * -130 / 180);
  background-color:var(--note);
  background-image:linear-gradient(
    to top,
    color-mix(in srgb, var(--note) 0%, transparent),
    rgba(255,255,255,.8)
  );
}
.lt-peel:hover .lt-peel-back .lt-peel-disc,
.lt-peel.is-open .lt-peel-back .lt-peel-disc{
  margin-top:calc(var(--peel) * -50 / 180);
}
.lt-peel-front{
  height:calc(var(--peel) * 150 / 180);
  top:auto; bottom:0;
  box-shadow:0 calc(var(--peel) * -140 / 180) calc(var(--peel) * 20 / 180) calc(var(--peel) * -140 / 180) rgba(17,27,33,.28);
}
.lt-peel:hover .lt-peel-front,
.lt-peel.is-open .lt-peel-front{
  height:calc(var(--peel) * 70 / 180);
  box-shadow:0 calc(var(--peel) * -60 / 180) calc(var(--peel) * 10 / 180) calc(var(--peel) * -60 / 180) rgba(17,27,33,.12);
}
.lt-peel-front .lt-peel-disc{
  margin-top:calc(var(--peel) * -10 / 180);
  background-color:var(--note);
  background-image:linear-gradient(
    to top,
    color-mix(in srgb, var(--note) 0%, transparent) 75%,
    var(--note-lip) 95%
  );
}
.lt-peel:hover .lt-peel-front .lt-peel-disc,
.lt-peel.is-open .lt-peel-front .lt-peel-disc{
  margin-top:calc(var(--peel) * -90 / 180);
  background-color:var(--note-fold);
  background-position:0 calc(var(--peel) * 100 / 180);
}
.lt-peel-label{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0;
  padding:16%;
  text-align:center;
  font-family:var(--font-note);
  font-weight:400;
  font-size:22px;
  line-height:1.05;
  letter-spacing:0;
  color:var(--note-ink);
  pointer-events:none;
  transition:opacity 50ms linear 400ms;
}
.lt-peel-label span{display:block; white-space:nowrap}
.lt-peel:hover .lt-peel-label,
.lt-peel.is-open .lt-peel-label{
  opacity:0;
  transition:opacity 50ms linear 300ms;
}
@media (prefers-reduced-motion:reduce){
  .lt-peel-sticky,
  .lt-peel-clip,
  .lt-peel-disc,
  .lt-peel-label{transition:none}
  .lt-peel-orbit{animation:none}
}
@property --lt-p{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
@property --quote-p{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
@property --fu-p{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
.lt-cal-board{
  --lt-p:0;
  position:relative;
}
.lt-cal-rail{
  position:absolute;
  left:calc(52px + 10px + 7px);
  top:calc(-1 * var(--lt-pad-t));
  bottom:calc(-1 * var(--lt-pad-b));
  width:14px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
}
.lt-cal-rail-track,
.lt-cal-rail-fill{
  position:absolute;
  left:50%; top:0;
  width:2px;
  transform:translateX(-50%);
}
.lt-cal-rail-track{
  bottom:0;
  background-image:repeating-linear-gradient(
    to bottom,
    #9AA8A0 0 2.2px,
    transparent 2.2px 5.6px
  );
  background-size:100% 5.6px;
  opacity:.7;
  animation:railDashY 1.4s linear infinite;
}
.lt-cal-rail-fill{
  height:calc(100% * var(--lt-p));
  border-radius:2px;
  background:linear-gradient(
    to bottom,
    var(--rail-fill-from) 0%,
    color-mix(in srgb, var(--green) 40%, var(--rail-fill-from)) 48%,
    var(--green) 100%
  );
}
.lt-cal-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-5);
  position:relative;
}
.lt-cal-row{
  display:grid;
  grid-template-columns:52px 14px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.lt-cal-when{
  display:flex; flex-direction:column; align-items:center;
  gap:1px; min-width:0; text-align:center;
}
.lt-cal-when b{
  font-family:var(--font-display);
  font-size:22px; font-weight:700; line-height:.9;
  letter-spacing:-.04em; color:var(--ink);
}
.lt-cal-when em{
  font-style:normal; font-size:11px; font-weight:500;
  color:var(--muted); letter-spacing:.06em;
}
.lt-cal-dot{
  width:8px; height:8px; margin:0 auto;
  border-radius:var(--r-full);
  background:#fff;
  border:2px solid var(--green);
  position:relative; z-index:1;
  box-shadow:0 0 0 3px #fff;
  transition:background .75s var(--e-io), border-color .75s var(--e-io), box-shadow .75s var(--e-io);
}
.lt-cal-row.is-next .lt-cal-dot{
  background:var(--green);
  border-color:var(--green);
  box-shadow:
    0 0 0 3px #fff,
    0 0 10px 4px rgba(var(--green-rgb),.5);
}
.lt-cal-card{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:10px; align-items:center;
  min-width:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:11px 12px;
  transition:background .75s var(--e-io), border-color .75s var(--e-io);
}
.vsc-cal .lt-cal-row:first-child .lt-cal-card{
  padding-right:68px;
}
.fx-glass.lt-cal-glass{
  --r:var(--r-sm);
  --r-pad:5px;
  --fx-glass-rim:1px;
  min-width:0;
  border-radius:var(--r-outer);
  padding:var(--r-pad);
  background:linear-gradient(165deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,0) 100%);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:
    0 8px 18px -12px rgba(17,27,33,0),
    inset 0 1px 0 rgba(255,255,255,0),
    inset 0 -1px 3px rgba(255,255,255,0);
  transition:background .75s var(--e-io), box-shadow .75s var(--e-io);
}
.fx-glass.lt-cal-glass::before,
.fx-glass.lt-cal-glass::after{
  opacity:0;
  transition:opacity .75s var(--e-io);
}
.fx-glass.lt-cal-glass::before{
  animation:fx-glass-spin 4.8s linear infinite;
}
.lt-cal-row.is-next .lt-cal-glass{
  background:
    linear-gradient(165deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,.7) 100%);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  box-shadow:
    var(--elev-3-tight), var(--rim-top), var(--rim-bottom);
}
.lt-cal-row.is-next .lt-cal-glass::before,
.lt-cal-row.is-next .lt-cal-glass::after{
  opacity:1;
}
@media (prefers-reduced-motion:reduce){
  .lt-cal-row.is-next .lt-cal-glass::before{animation:none; --fx-glass-angle:40deg}
  .fx-glass.lt-cal-glass,
  .fx-glass.lt-cal-glass::before,
  .fx-glass.lt-cal-glass::after,
  .lt-cal-card,
  .lt-cal-dot,
  .lt-cal-ico,
  .lt-cal-copy em{
    transition:none;
  }
}
.lt-cal-row.is-next .lt-cal-card{
  background:var(--upnext-tint);
  border-color:transparent;
  box-shadow:none;
}
.lt-cal-ico{
  width:24px; height:24px;
  display:grid; place-items:center;
  color:var(--ico-pencil); flex:none;
  transition:color .75s var(--e-io);
}
.lt-cal-row.is-next .lt-cal-ico{color:var(--green-ink)}
.lt-cal-ico svg{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:1.25px;
  stroke-linecap:round; stroke-linejoin:round;
}
.vsc.good .lt-cal-ico svg{stroke:currentColor}
.lt-cal-copy{min-width:0}
.lt-cal-copy b{
  display:block;
  font-size:14px; font-weight:700; letter-spacing:-.02em;
  line-height:1.2;
}
.lt-cal-copy em{
  display:block; margin-top:2px;
  font-style:normal; font-size:12.5px; color:var(--ink-2);
  line-height:1.3;
  transition:color .75s var(--e-io);
}
.lt-cal-row.is-next .lt-cal-copy em{color:color-mix(in srgb, var(--ink-2) 70%, var(--green-ink))}

/* Follow-up ladder — sibling of the coming-up calendar.
   Three channels, one reminder: WhatsApp waits, then SMS, then a call. */
.vsc.good.vsc-fu{
  --fu-frame-pad:var(--r-pad);
  position:relative;
  padding:var(--r-pad);
  border-radius:var(--r-outer);
}

/* Dev picker — grain tones under the follow-up visual.
   Parked with .is-parked; drop that class and the hidden attr to restore. */
.grain-swatches{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:var(--space-2);
  margin-top:14px;
}
.grain-swatches.is-parked{
  display:none;
}
.grain-swatch{
  --r:8px;
  position:relative;
  isolation:isolate;
  height:52px;
  padding:0;
  border:2px solid rgba(17,27,33,.08);
  border-radius:var(--r);
  overflow:hidden;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  font:650 10px/1 inherit;
  letter-spacing:.01em;
  color:var(--ink-invert);
  text-shadow:0 1px 2px rgba(17,27,33,.45);
}
.grain-swatch span{
  position:absolute; z-index:1;
  left:7px; right:7px; bottom:6px;
  text-align:left;
}
.grain-swatch.is-on{
  border-color:var(--ink);
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink);
}
.grain-swatches-cap{
  grid-column:1 / -1;
  margin:0 0 2px;
  font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-2);
}
.vsc-fu .vsc-pane{
  padding:0;
}

/* Follow-up stage — Switch-style well. Reminder stays in the pill;
   logos slide through a fixed spotlight; status caption updates below. */
@property --fu-c{
  syntax:"<color>";
  inherits:true;
  initial-value:#25D366;
}
@property --fu-hi{
  syntax:"<color>";
  inherits:true;
  initial-value:#6FDF9A;
}
@property --fu-lo{
  syntax:"<color>";
  inherits:true;
  initial-value:#0A4D28;
}
.fu-stage{
  --fu-c:#25D366;
  --fu-hi:#6FDF9A;
  --fu-lo:#0A4D28;
  --fu-slot:80px;
  --fu-spin:5.6s;
  --fu-shift:var(--fu-slot);
  --fu-ease:cubic-bezier(.4, 0, .2, 1);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:440px;
  padding:0 16px 48px;
  overflow:hidden;
  color:var(--ink);
  transition:--fu-c 1s var(--fu-ease), --fu-hi 1s var(--fu-ease), --fu-lo 1s var(--fu-ease);
}
/* Sticky note — same yellow stack + tape as the saved-detail card,
   pinned top-left of the orange follow-up frame. */
.fx-stack.fu-note{
  --fx-stack-bg:#F6E27A;
  --fx-stack-line:#ead56a;
  position:absolute;
  z-index:6;
  top:32px;
  left:calc(var(--fu-frame-pad) + 20px);
  width:max-content;
  max-width:min(220px, 58%);
  transform:rotate(-3.5deg);
  transform-origin:50% 0%;
}
.fu-note .sm-detail{
  width:100%;
  padding:16px 12px 14px;
}
.fu-note .sm-detail b{font-size:34px}
.fu-note .sm-detail em{font-size:18px; white-space:nowrap}
.fu-hub[hidden]{display:none !important}
.fu-hub{
  position:relative; z-index:4;
  display:inline-flex;
  flex:none;
  --r-pad:6px;
  --fx-glass-rim:2px;
  box-shadow:
    var(--elev-4), var(--rim-top), var(--rim-bottom);
}
.fu-mid{
  --fu-p:0;
  position:relative;
  flex:1 1 auto;
  width:100%;
  max-width:340px;
  min-height:168px;
  display:flex;
  align-items:stretch;
}
.fu-rail{
  position:absolute;
  left:50%;
  top:0;
  bottom:-72px;
  width:14px;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:0;
}
.fu-rail-track,
.fu-rail-fill{
  position:absolute;
  left:50%; top:0;
  width:2px;
  transform:translateX(-50%);
}
.fu-rail-track{
  bottom:0;
  background-image:repeating-linear-gradient(
    to bottom,
    #9AA8A0 0 2.2px,
    transparent 2.2px 5.6px
  );
  background-size:100% 5.6px;
  opacity:.7;
  animation:railDashY 1.4s linear infinite;
}
.fu-rail-fill{
  height:calc(100% * var(--fu-p));
  border-radius:2px;
  background:linear-gradient(
    to bottom,
    var(--rail-fill-from) 0%,
    color-mix(in srgb, var(--green) 40%, var(--rail-fill-from)) 48%,
    var(--green) 100%
  );
}
.fu-steps{
  list-style:none;
  margin:0;
  padding:22px 0 8px;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  gap:28px;
  position:relative;
  z-index:1;
}
.fu-step{
  display:grid;
  grid-template-columns:1fr 14px 1fr;
  gap:10px;
  align-items:start;
  opacity:.42;
  transition:opacity .55s var(--e-io);
}
.fu-step.is-on{opacity:1}
.fu-when{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  justify-content:flex-end;
  gap:5px;
  text-align:right;
  min-width:0;
  white-space:nowrap;
  padding-top:1px;
}
.fu-when b{
  font-family:var(--font-display);
  font-size:20px; font-weight:700; line-height:1;
  letter-spacing:-.04em; color:var(--ink);
}
.fu-when em{
  font-style:normal; font-size:12.5px; font-weight:500;
  color:var(--muted); letter-spacing:.04em;
}
.fu-dot{
  width:8px; height:8px; margin:6px auto 0;
  border-radius:var(--r-full);
  background:#fff;
  border:2px solid var(--green);
  box-shadow:0 0 0 3px #fff;
  position:relative; z-index:1;
  transition:background .55s var(--e-io), box-shadow .55s var(--e-io);
}
.fu-step.is-on .fu-dot{
  background:var(--green);
  box-shadow:
    0 0 0 3px #fff,
    0 0 10px 4px rgba(var(--green-rgb),.5);
}
.fu-copy{
  margin:0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}
.fu-copy b{
  font-size:14px; font-weight:600; letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink);
}
.fu-copy em{
  font-style:normal;
  font-size:12.5px; font-weight:500;
  line-height:1.25;
  color:var(--ink-2);
}
.fu-orb{
  position:relative;
  z-index:2;
  flex:none;
  width:126px; height:126px;
  margin-top:2px;
}
.fu-bloom{
  position:absolute; z-index:0;
  left:50%; top:50%;
  width:210px; aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--fu-c) 55%, transparent) 0%, transparent 42%),
    radial-gradient(circle, color-mix(in srgb, var(--fu-c) 22%, transparent) 28%, transparent 68%);
  filter:blur(10px);
  opacity:.7;
}
.fu-radar{
  position:absolute; z-index:0;
  left:50%; top:50%;
  width:195px; aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.fu-radar i{
  position:absolute; inset:0;
  border-radius:var(--r-full);
  border:1px solid color-mix(in srgb, var(--fu-c) 28%, #9AA8A0);
  opacity:.21;
  transform-origin:50% 50%;
}
.fu-radar i:nth-child(2){inset:11%; opacity:.18}
.fu-radar i:nth-child(3){inset:22%; opacity:.14}
.fu-stage.is-run .fu-radar i{
  animation:fuRadarPulse 5.6s ease-in-out infinite;
}
.fu-stage.is-run .fu-radar i:nth-child(2){animation-delay:.7s}
.fu-stage.is-run .fu-radar i:nth-child(3){animation-delay:1.4s}
@keyframes fuRadarPulse{
  0%, 100%{transform:scale(.84); opacity:.09}
  50%{transform:scale(1.1); opacity:.26}
}
.fu-hub .sm-hub i svg{
  width:14px; height:14px;
  fill:none;
  stroke:#06301C;
  stroke-width:1.25px;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.vsc.good .fu-hub .sm-hub i svg{
  fill:none;
  stroke:#06301C;
}
.fu-well{
  position:relative; z-index:2;
  width:126px; height:126px;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}
.fu-c{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:126px; height:126px;
  padding:9px;
  box-sizing:border-box;
  border-radius:552px;
  overflow:hidden;
}
.fu-c::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:conic-gradient(from 270deg at 50% 50%, var(--fu-hi) 0deg, var(--fu-lo) 360deg);
  transform-origin:50% 50%;
  pointer-events:none;
}
.fu-stage.is-run .fu-c::before{
  animation:fuRingSpin var(--fu-spin) linear infinite;
}
@keyframes fuRingSpin{to{transform:rotate(360deg)}}
.fu-ball{
  position:relative;
  z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  flex:none;
  border-radius:var(--r-full);
  border:2px solid var(--glass-rim);
  box-sizing:border-box;
  background:linear-gradient(
    165deg,
    color-mix(in srgb, var(--fu-c) 78%, #fff) 0%,
    var(--fu-c) 48%,
    color-mix(in srgb, var(--fu-c) 72%, #2a1210) 100%
  );
  overflow:hidden;
}
.fu-ball-face{
  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  color:var(--ink-invert);
  opacity:0;
  transform:scale(.92);
  transition:opacity .55s var(--fu-ease), transform .55s var(--fu-ease);
  pointer-events:none;
}
.fu-ball-face svg{
  width:35px; height:35px;
}
.fu-ball-face[data-ch="wa"] svg{fill:currentColor; stroke:none}
.fu-ball-face[data-ch="sms"] svg,
.fu-ball-face[data-ch="call"] svg{
  fill:none; stroke:currentColor; stroke-width:1.25px;
  stroke-linecap:round; stroke-linejoin:round;
}
.fu-stage[data-step="0"] .fu-ball-face[data-ch="wa"],
.fu-stage[data-step="1"] .fu-ball-face[data-ch="sms"],
.fu-stage[data-step="2"] .fu-ball-face[data-ch="call"]{
  opacity:1;
  transform:scale(1.05);
}
.fu-load{
  position:absolute;
  inset:4px;
  z-index:3;
  border-radius:var(--r-full);
  pointer-events:none;
  transform-origin:50% 50%;
  background:conic-gradient(
    from -70deg,
    transparent 0deg,
    transparent 38deg,
    rgba(255,255,255,.28) 52deg,
    #fff 72deg,
    #fff 328deg,
    rgba(255,255,255,.22) 346deg,
    transparent 360deg
  );
  -webkit-mask:radial-gradient(farthest-side,
    transparent calc(100% - 1.35px),
    #000 calc(100% - 1.2px),
    #000 100%);
          mask:radial-gradient(farthest-side,
    transparent calc(100% - 1.35px),
    #000 calc(100% - 1.2px),
    #000 100%);
}
.fu-stage.is-run .fu-load{
  animation:fuLoadSpin var(--fu-spin) linear infinite;
}
@keyframes fuLoadSpin{to{transform:rotate(360deg)}}
.fu-strip{
  position:absolute; z-index:1;
  left:50%; top:50%;
  display:flex; align-items:center; gap:52px;
  transform:translate(calc(-50% + var(--fu-shift)), -50%);
  transition:transform 1s var(--fu-ease);
  pointer-events:none;
}
.fu-strip.is-snap{transition:none}
.fu-logo{
  width:28px; height:28px;
  display:grid; place-items:center;
  color:var(--ink-2);
  opacity:.38;
  transform:scale(.92);
  transition:transform 1s var(--fu-ease), color 1s var(--fu-ease), opacity 1s var(--fu-ease);
}
.fu-logo svg{width:24px; height:24px}
.fu-logo[data-ch="wa"] svg{fill:currentColor; stroke:none}
.fu-logo[data-ch="sms"] svg,
.fu-logo[data-ch="call"] svg{
  fill:none; stroke:currentColor; stroke-width:1.25px;
  stroke-linecap:round; stroke-linejoin:round;
}
.vsc.good .fu-logo svg{stroke:currentColor}
.vsc.good .fu-logo[data-ch="wa"] svg{stroke:none; fill:currentColor}
.vsc.good .fu-ball-face svg{stroke:currentColor}
.vsc.good .fu-ball-face[data-ch="wa"] svg{stroke:none; fill:currentColor}
/* Active chip sits under the well — hide it so the ball face reads clean. */
.fu-logo.is-on{
  opacity:0;
  transform:scale(1.08);
}
@media (prefers-reduced-motion:reduce){
  .fu-stage, .fu-bloom, .fu-hub, .fu-well, .fu-c, .fu-ball, .fu-ball-face, .fu-strip, .fu-logo,
  .fu-step, .fu-dot, .fu-radar i{transition:none}
  .fu-stage.is-run .fu-c::before,
  .fu-stage.is-run .fu-load,
  .fu-stage.is-run .fu-radar i{animation:none}
}
@media (max-width:520px){
  .fu-stage{--fu-slot:68px; min-height:400px; padding:0 14px 44px}
  .fx-stack.fu-note{width:max-content; max-width:min(200px, 72%); top:10px; left:calc(var(--fu-frame-pad) + 12px)}
  .fu-note .sm-detail{padding:14px 10px 12px}
  .fu-note .sm-detail b{font-size:28px}
  .fu-note .sm-detail em{font-size:16px; white-space:nowrap}
  .fu-strip{gap:44px}
  .fu-hub .sm-hub{font-size:12px; padding:8px 12px 8px 8px}
  .fu-when b{font-size:17px}
  .fu-copy{white-space:normal}
  .fu-copy b, .fu-copy em{font-size:12.5px}
}

/* Saved-with map — HTML stand-in for the old one-chat collage */
.saved-map{
  --sm-xl:51%;
  --sm-l:34%;
  position:relative;
  aspect-ratio:917 / 1024;
  min-height:420px;
  font-family:var(--font-wa); font-variation-settings:normal;
  color:var(--ink);
}
@container (min-width: 480px){
  .saved-map{
    aspect-ratio:unset;
    height:calc(100cqi * 1024 / 917 - 80px);
    min-height:unset;
  }
}
.saved-map-traces{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0;
  overflow:visible;
}
.saved-map-traces path{
  fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.sm-wire path{
  stroke:#9AA8A0;
  stroke-width:1.15;
  stroke-dasharray:2.2 3.4;
  opacity:.7;
  /* Same crawling dash as LifeTree idle / leaf rails */
  animation:ltDash 1.4s linear infinite;
}
.sm-wire path:nth-child(1){animation-delay:0s}
.sm-wire path:nth-child(2){animation-delay:-.35s}
.sm-wire path:nth-child(3){animation-delay:-.7s}
.sm-wire path:nth-child(4){animation-delay:-1.05s}
.sm-pulse-head,
.sm-pulse-glow{
  offset-rotate:0deg;
  /* One packet per rail: run, fade, pause, repeat — matches LifeTree */
  animation:sm-dot-run var(--sm-dot-dur, 2.4s) linear infinite;
  animation-delay:var(--sm-dot-delay, 0s);
}
/* Honor-style bloom: sharp disc + same-colour glow.
   Pure leaf green (not WhatsApp cyan) so packets don’t read blue on beige. */
.sm-pulse-glow{
  fill:rgba(42, 209, 79, .5);
  stroke:none;
  filter:blur(4.5px);
}
.sm-pulse-head{
  fill:#2AD14F;
  stroke:none;
}
@keyframes sm-dot-run{
  0%{offset-distance:0%; opacity:0}
  6%{offset-distance:0%; opacity:1}
  62%{offset-distance:100%; opacity:1}
  70%{offset-distance:100%; opacity:0}
  100%{offset-distance:100%; opacity:0}
}
/* Same crawl rate as LifeTree ltDash (−28px ≈ 5× the 5.6px dash period). */
@keyframes railDashY{to{background-position:0 28px}}
@media (prefers-reduced-motion:reduce){
  .sm-pulse{display:none}
  .sm-wire path{animation:none}
  .lt-cal-rail-track,
  .fu-rail-track{animation:none}
}
.sm{
  --sm-pad:8px;
  position:absolute; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  background:#fff; border:1px solid rgba(17,27,33,.08);
  padding:var(--sm-pad);
  border-radius:var(--r-xs);
  overflow:visible;
  box-shadow:var(--elev-3), var(--elev-1-soft);
}
.sm-tag{
  position:absolute; left:10px; top:0;
  transform:translateY(-50%);
  margin:0;
  background:#E7F3EC; color:var(--green-ink);
  font-family:var(--font-mono);
  font-size:8.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  line-height:1; padding:5px 8px; border-radius:999px;
  white-space:nowrap; z-index:2;
}
.sm-voice .sm-tag,
.sm-date .sm-tag{
  top:auto;
  bottom:0;
  left:auto; right:10px;
  transform:translateY(50%);
}
.sm-voice .sm-tag,
.sm-date .sm-tag,
.sm-deck .sm-tag{
  left:auto; right:10px;
  background:#E0F2FE;
  color:#0369A1;
  border:1px solid #7DD3FC;
}
.sm-xl{width:var(--sm-xl)}
.sm-l{width:var(--sm-l)}
.sm b{
  font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  line-height:1.25; color:var(--ink);
  max-width:100%;
}
.sm em{
  font-style:normal; font-size:11px; line-height:1.3; color:var(--ink-muted);
}
.sm-lab{
  display:block;
  font-size:10px; font-weight:600; letter-spacing:.02em;
  color:var(--ink-muted); white-space:nowrap;
}
.sm-ico{
  width:32px; height:32px; border-radius:var(--r-xs);
  display:grid; place-items:center; flex:none;
  color:var(--ico-pencil);
}
.sm-ico svg{
  width:24px; height:24px;
  fill:none; stroke:currentColor; stroke-width:1.25px;
  stroke-linecap:round; stroke-linejoin:round;
}
.vsc.good .sm-ico svg{stroke:currentColor}
.sm-body{display:flex; flex-direction:column; gap:1px; min-width:0}
.sm-voice{
  top:4.5%; left:4%;
  background:var(--wa-bubble-out); border-color:var(--wa-bubble-out-line);
}
.sm-vn{
  display:flex; align-items:center; gap:8px; width:100%; margin-bottom:6px;
}
.sm-play-wrap{
  flex:none;
  display:grid; place-items:center;
}
.sm-play{
  position:relative; z-index:1;
  width:32px; height:32px; border-radius:50%; background:var(--wa-teal);
  display:grid; place-items:center;
}
.sm-play svg{width:13px; height:13px; fill:#fff; margin-left:1px}
.sm-wave-wrap{
  position:relative; flex:1; min-width:0;
  display:flex; align-items:center; height:18px;
}
.sm-voice .wave{
  position:relative; display:flex; width:100%;
  margin:0; height:18px; gap:1.5px;
  align-items:center; justify-content:flex-start;
}
.sm-voice .wave i{
  flex:none; width:1.5px;
  background:var(--wa-teal); opacity:.9; border-radius:1px;
  animation:none;
}
.sm-voice .wave i.is-off{
  opacity:.28;
}
.sm-scrub{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:11px; height:11px; border-radius:50%;
  background:var(--wa-tick);
  box-shadow:0 0 0 1.5px var(--wa-bubble-out), 0 1px 2px rgba(17,27,33,.22);
  pointer-events:none; z-index:1;
}
.sm-dur{
  flex:none;
  font-size:12px; font-weight:500; letter-spacing:.01em;
  color:var(--wa-ink-2); font-variant-numeric:tabular-nums;
  line-height:1;
}
.sm-voice .wave i:nth-child(8n+1){height:5px}
.sm-voice .wave i:nth-child(8n+2){height:11px}
.sm-voice .wave i:nth-child(8n+3){height:7px}
.sm-voice .wave i:nth-child(8n+4){height:16px}
.sm-voice .wave i:nth-child(8n+5){height:9px}
.sm-voice .wave i:nth-child(8n+6){height:4px}
.sm-voice .wave i:nth-child(8n+7){height:13px}
.sm-voice .wave i:nth-child(8n+8){height:6px}
.sm-quote{
  margin:0; font-size:12.5px; line-height:1.35; color:var(--ink);
  font-weight:400;
  padding-bottom:8px;
}
.sm-date{
  top:4%; right:4%;
}
.sm-date > b,
.sm-date > em{
  display:block;
  width:100%;
}
.sm-date > em{padding-bottom:8px;}
.sm-doc{
  width:100%; aspect-ratio:97 / 73; height:auto; margin:0 0 8px;
  border-radius:4px;
  overflow:hidden;
  background:#d5dbe0;
}
.sm-doc img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.sm-commit,
.sm-person,
.sm-relate{
  flex-direction:row; align-items:center; gap:8px;
}
.sm-commit .sm-ico{background:#F3E8FF; color:var(--ico-pencil); margin:0}
.sm-relate .sm-ico{background:#E7F3EC; color:var(--ico-pencil); margin:0}
.sm-detail{
  position:relative; width:100%;
  bottom:auto; left:auto;
  background:#F6E27A; border-color:#ead56a;
  box-shadow:0 10px 18px -12px rgba(140,110,20,.45);
  padding:14px 12px 12px;
}
.sm-detail b, .sm-detail em{
  font-family:var(--font-note); font-weight:400;
  letter-spacing:0; color:var(--note-ink);
}
.sm-detail b{font-size:22px; line-height:1.05}
.sm-detail em{font-size:20px; color:var(--note-ink-2)}
.sm-detail .sm-lab{color:var(--note-lab); text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px}
.sm-tape{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:38px; height:12px;
  background:rgba(255,255,255,.55);
  border:1px solid var(--glass-rim-hi);
  box-shadow:0 1px 2px rgba(17,27,33,.08);
}
.sm-person{
  position:relative; width:100%;
  bottom:auto; right:auto; left:auto; top:auto;
  z-index:1;
}
.sm-person .sm-ico{background:#FAE4DF; color:var(--ico-pencil); margin:0}

/* fx-stack — two sheets peeking out under a card, same as the
   bottom-right saved pile. Set --fx-stack-bg / --fx-stack-line /
   --fx-stack-lift on the wrap. */
.fx-stack{
  --fx-stack-bg:#fff;
  --fx-stack-line:rgba(17,27,33,.08);
  --fx-stack-lift:0px;
  isolation:isolate;
}
.fx-stack::before,
.fx-stack::after{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  bottom:var(--fx-stack-lift);
  background:var(--fx-stack-bg);
  border:1px solid var(--fx-stack-line);
  border-radius:var(--r-xs);
  box-shadow:0 8px 18px -12px rgba(17,27,33,.28);
  pointer-events:none;
}
.fx-stack::before{
  transform:translateY(7px) scaleX(.96);
  z-index:0;
}
.fx-stack::after{
  transform:translateY(13px) scaleX(.92);
  z-index:-1;
  opacity:.92;
}
.sm-detail-wrap{
  --fx-stack-bg:#F6E27A;
  --fx-stack-line:#ead56a;
  position:absolute; z-index:1;
  bottom:8%; left:4%;
  width:var(--sm-l);
  transform:rotate(-3.5deg);
}
.sm-deck{
  --deck-ms:720ms;
  --fx-stack-lift:14px;
  position:absolute; z-index:1;
  right:4%; bottom:11%;
  width:var(--sm-xl);
  min-height:58px;
  padding-bottom:14px;
}
.sm-deck:not(.fx-stack){
  min-height:0;
  padding-bottom:0;
}
.sm-deck .sm{
  position:absolute;
  left:0; right:0; bottom:0; top:auto;
  width:100%;
  margin:0;
  transform-origin:top center;
  will-change:transform, opacity;
  transition:transform var(--deck-ms) var(--e-out), opacity 640ms var(--e-out);
}
.sm-deck .sm.is-d0{
  position:relative;
  opacity:1;
  transform:none;
  z-index:3;
}
.sm-deck .sm.is-out{
  opacity:0;
  transform:translateY(calc(-80% - 8px)) scale(.9);
  z-index:4;
  pointer-events:none;
}
.sm-deck .sm.is-wait,
.sm-deck .sm.is-d1,
.sm-deck .sm.is-d2{
  opacity:0;
  transform:translateY(16px);
  z-index:0;
  pointer-events:none;
  transition:none;
}
@media (prefers-reduced-motion:reduce){
  .sm-deck .sm{transition:none; will-change:auto}
}

/* fx-glass — iOS white glass wrap + spinning green/gold rim.
   Drop on a pill or a square (999px rounds both). Override --r-pad
   and --fx-glass-rim on the element if the inner piece needs more air. */
@property --fx-glass-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
.fx-glass{
  --r-pad:6px;
  --fx-glass-rim:2px;
  position:relative;
  isolation:isolate;
  padding:var(--r-pad);
  border-radius:var(--r-pill);
  background:
    linear-gradient(165deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.5) 46%, rgba(255,255,255,.7) 100%);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  box-shadow:
    var(--elev-3-tight), var(--rim-top), var(--rim-bottom);
}
.fx-glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:var(--fx-glass-rim);
  pointer-events:none;
  z-index:2;
  background:conic-gradient(from var(--fx-glass-angle), var(--halo-stops));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:fx-glass-spin 4.8s linear infinite;
}
.fx-glass::after{
  content:"";
  position:absolute; inset:var(--fx-glass-rim);
  z-index:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 48%);
}
@keyframes fx-glass-spin{
  to{--fx-glass-angle:360deg}
}
@media (prefers-reduced-motion:reduce){
  .fx-glass::before,
  .lt-node.is-cat.is-open::before{animation:none; --fx-glass-angle:40deg}
}
.sm-hub-glass{
  position:absolute; z-index:2;
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex;
  box-shadow:
    var(--elev-4), var(--rim-top), var(--rim-bottom);
}
.sm-hub{
  position:relative; z-index:1;
  margin:0;
  display:inline-flex; align-items:center; gap:8px;
  background:#111B21; color:var(--ink-invert);
  border-radius:999px; padding:9px 16px 9px 9px;
  font-size:13.5px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap;
  box-shadow:0 6px 14px -10px rgba(17,27,33,.55);
}
.sm-hub i{
  width:26px; height:26px; border-radius:50%; background:var(--green);
  display:grid; place-items:center; flex:none;
}
.sm-hub i svg{width:14px; height:14px; fill:#06301C}
.sm-hub i:has(img){background:none; border-radius:0}
.sm-hub i img{width:100%; height:100%; display:block; object-fit:contain}
.tone-dates .qa-ask.is-up{bottom:calc(var(--qa-gutter) + .4rem)}
@media (max-width:820px){
  .saved-map{min-height:340px}
  .sm{--sm-pad:8px}
  .sm b{font-size:12.5px}
  .sm-quote{font-size:11.5px}
  .sm-hub{font-size:12px; padding:8px 12px 8px 8px}
  .sm-hub i{width:22px; height:22px}
  .sm-detail b{font-size:18px}
  .sm-detail em{font-size:16px}
}
.vsc-gutter{
  flex:none; height:var(--qa-gutter);
}
.vsc-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-3); flex:none;
  padding:12px 2px 4px;
}
.vsc-foot-link{
  color:var(--ink-invert); font-size:13.5px; font-weight:700;
  letter-spacing:-.02em; text-decoration:none; white-space:nowrap;
  position:relative; z-index:1;
}
.vsc-foot-link:hover{ text-decoration:underline; text-underline-offset:3px }
.vsc-foot-priv{
  display:inline-flex; align-items:center; gap:6px;
  margin:0; color:var(--ink-invert-2);
  font-size:11px; font-weight:500; letter-spacing:-.01em;
  white-space:nowrap; position:relative; z-index:1;
}
.vsc.good .vsc-foot-priv svg{width:13px; height:13px; flex:none; stroke:var(--ink-invert-2)}
@media (max-width:640px){
  .vsc-foot{flex-wrap:wrap; gap:var(--space-2); padding:10px 2px 2px}
  .vsc-foot-priv{font-size:10px}
}
.vsc-chat{
  position:absolute; inset:0;
  z-index:3; pointer-events:none;
  overflow:visible;
}

/* Both bubbles are absolute on the green card.
   Ask sits in the thin green footer, then lifts toward Fatima's birthday.
   Answer is nowrap, straddling the green bottom edge, then fades up. */
.qa-ask{
  position:absolute; right:20px; bottom:8px;
  margin:0; width:max-content; max-width:none;
  background:var(--wa-bubble-out); color:#111B21;
  font-family:var(--font-wa); font-variation-settings:normal;
  font-size:14.5px; font-weight:400; line-height:20px; letter-spacing:0;
  white-space:nowrap;
  padding:8px 10px 7px 12px;
  border-radius:12px 12px 4px 12px;
  box-shadow:0 1px .5px rgba(11,20,26,.13), 0 10px 22px -14px rgba(17,27,33,.28);
  transition:opacity 720ms var(--e-out), transform var(--t3) var(--e-out),
             bottom 720ms var(--e-out);
}
.qa-ask::before{
  content:""; position:absolute; right:-8px; bottom:0;
  width:8px; height:13px; background:var(--wa-bubble-out);
  clip-path:polygon(0 0, 0 100%, 100% 100%);
}
.qa-ask .meta{
  float:none; margin:0 0 0 8px; display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:400; color:var(--wa-ink-2); line-height:1;
  vertical-align:middle;
}
.qa-ask .meta .tk{width:15px; height:9px; fill:none; stroke:var(--wa-tick);
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round}
.qa-ask.is-new{opacity:0; transform:translateY(10px)}
.qa-ask.is-up{bottom:calc(var(--qa-gutter) + 3.5rem); opacity:0}
.qa-ask.is-out{opacity:0; transform:translateY(-10px)}

.qa-ans{
  position:absolute; left:18px; bottom:0;
  width:max-content; max-width:none;
  background:#fff; color:var(--ink);
  border-radius:18px;
  padding:10px 14px 20px;
  box-shadow:0 14px 32px -16px rgba(17,27,33,.4);
  transform:translateY(50%);
  transition:opacity var(--t4) var(--e-out), transform 720ms var(--e-out);
}
.qa-ans.is-new{opacity:0; transform:translateY(62%)}
.qa-ans.is-out{opacity:0; transform:translateY(8%)}
.qa-hd{
  margin:0; font-family:var(--font-wa); font-variation-settings:normal;
  font-size:18px; font-weight:700; line-height:1.2; letter-spacing:-.03em;
  color:var(--ink); white-space:nowrap;
}
.qa-hd b{color:var(--green-ink); font-weight:700}
.qa-sub{
  margin:4px 0 0;
  font-family:var(--font-wa); font-variation-settings:normal;
  font-size:13px; font-weight:400; line-height:1.35; color:var(--ink-muted);
  white-space:nowrap;
}
.qa-badge{
  position:absolute; right:12px; bottom:0;
  margin:0;
  transform:translateY(50%);
  background:#E7F3EC; color:var(--green-ink);
  font-family:var(--font-mono);
  font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  line-height:1; padding:5px 8px; border-radius:999px;
}

@media (max-width:820px){
  .qa-hd{font-size:15px}
  .qa-sub{font-size:12px}
  .qa-ans{padding:8px 12px 18px; border-radius:16px}
  .qa-ask.is-up{bottom:calc(var(--qa-gutter) + 3.75rem); opacity:0}
}
.vsc.good > h3{
  position:relative; z-index:2; isolation:isolate;
  color:var(--ink-invert); -webkit-text-fill-color:var(--ink-invert);
  mix-blend-mode:normal;
  margin:0 0 22px;
  font-size:24px; font-weight:600;
  line-height:1;
  align-items:center;
}
.vsc.good > h3 b{
  position:relative; z-index:2; isolation:isolate;
  color:var(--ink-invert); -webkit-text-fill-color:var(--ink-invert);
  mix-blend-mode:normal;
  margin:0; line-height:1; font-weight:600;
}
.vsc.good > h3 i{width:24px; height:24px; background:rgba(255,255,255,.22)}
.vsc.good > h3 i svg{width:13px; height:13px; fill:#fff; stroke:none}
.vsc.good .vsl{gap:0}
.vsc.good .vsl li{
  color:var(--ink-2);
  align-items:center;
  padding:14px 0;
  border:0;
  border-bottom:1px solid rgba(17,27,33,.16);
}
.vsc.good .vsl li:last-child{border-bottom:0}
.vsc.good .vsl li span{text-decoration:none}
.vsc.good .vsl u{
  text-decoration:underline;
  text-decoration-color:var(--ink);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  text-underline-position:under;
}
@media(max-width:820px){.vs{grid-template-columns:1fr}}

/* WHY — copy left / card right; flipped block reverses the two columns */
.why .why-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  gap:clamp(28px,4.5vw,64px);
  align-items:start;
}
.why .why-copy{
  text-align:left; min-width:0; container-type:inline-size;
  grid-column:1; grid-row:1 / -1;
  display:grid; grid-template-rows:subgrid;
}
.why .why-copy .eyebrow{grid-row:1; justify-content:flex-start; margin-bottom:16px}
.why .why-copy-body{grid-row:2; min-width:0}
.why .why-copy h2{
  text-align:left; margin:0; max-width:none;
  font-size:64px; line-height:.95; letter-spacing:-.03em;
}
.why .why-copy h2 .line-reveal__line{
  text-align:left;
  padding-top:.18em; padding-bottom:.22em;
  margin-top:-.18em; margin-bottom:-.2em;
}
.why .why-copy h2 .line-reveal__line > span{white-space:nowrap}
.why .why-copy h2.line-reveal--flow{
  font-size:clamp(34px, 8.2cqi, 52px);
}
.why .why-copy .line-reveal--flow .line-reveal__line > span{
  display:inline-block; white-space:normal; max-width:100%;
}
.why .why-points{
  list-style:none; padding:0; margin:28px 0 0;
  display:flex; flex-direction:column; gap:0;
}
.why .why-points li{
  display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:center;
  font-size:16px; line-height:1.5; color:var(--ink-2);
  padding:8px 0;
  border-bottom:1px solid rgba(17,27,33,.12);
}
.why .why-points li:last-child{border-bottom:0}
.why .why-points svg{
  width:13px; height:13px; fill:none; stroke:var(--green-ink);
  stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
}
.why .why-points u{
  text-decoration:underline;
  text-decoration-color:var(--ink);
  text-decoration-thickness:1px;
  text-underline-offset:5px;
  text-underline-position:under;
}
.why .why-copy .btn{margin-top:28px}
.why .why-cards{display:flex; flex-direction:column; gap:40px; overflow:visible; grid-column:2; grid-row:2}
.why .why-lede{
  display:flex; flex-direction:column; gap:var(--space-3);
  margin:22px 0 0;
}
.why .why-lede p{
  margin:0; font-size:17px; line-height:1.55; color:var(--ink-2);
}
.why .why-lede b{font-weight:600; color:var(--ink)}
.why .why-points-long li{align-items:start}
.why .why-points-long svg{margin-top:5px}
.why .why-grid-flip .why-cards{grid-column:1; grid-row:2}
.why .why-grid-flip .why-copy{grid-column:2; grid-row:1 / -1}
/* Desktop: all three feature tiles share the memory-map height, and
   copy sits vertically with its visual instead of in a row above it. */
@media(min-width:721px){
  .why .why-grid{
    grid-template-rows:1fr;
    align-items:stretch;
  }
  .why .why-copy{
    grid-row:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .why .why-copy .eyebrow,
  .why .why-copy-body{grid-row:auto}
  .why .why-cards{
    grid-row:1;
    container-type:inline-size;
    align-self:stretch;
  }
  .why .why-grid-flip .why-cards,
  .why .why-grid-flip .why-copy{grid-row:1}
  .why .vsc.good{
    flex:1 1 auto;
    width:100%;
    min-height:calc(
      var(--r-pad) + 10px + 38px
      + (100cqi - 2px - 2 * var(--r-pad)) * 1024 / 917 - 80px
    );
  }
  .why .vsc.good .vsc-pane{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .why .saved-map{
    flex:1 1 auto;
    height:auto;
  }
  .why .vsc-cal .lt-cal,
  .why .vsc-cal .lt-cal-board{
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .why .vsc-cal .lt-cal-list{
    flex:1 1 auto;
    justify-content:space-between;
  }
  .why .fu-stage{
    flex:1 1 auto;
    min-height:0;
    height:auto;
  }
}
@media(max-width:720px){
  .why .why-grid{grid-template-columns:1fr; grid-template-rows:none; gap:28px}
  .why .why-copy{display:block; grid-column:auto; grid-row:auto}
  .why .why-copy h2{font-size:40px}
  .why .why-copy h2 .line-reveal__line > span{white-space:normal}
  .why .why-cards{grid-column:auto; grid-row:auto}
  .why .why-grid-flip .why-copy{grid-column:1; grid-row:1}
  .why .why-grid-flip .why-cards{grid-column:1; grid-row:2}
}

/* ============================================================ STEPS */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4)}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:24px;
  transition:transform var(--t3) var(--e-out), box-shadow var(--t3) var(--e-out)}
.step:hover{transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(17,27,33,.28)}
.step .n{font-family:var(--font-mono); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:var(--green-ink); margin-bottom:16px}
.step .ic{width:36px; height:36px; border-radius:11px; background:var(--paper);
  border:1px solid var(--line); display:grid; place-items:center; margin-bottom:14px}
.step .ic svg{width:17px; height:17px; fill:var(--ink)}
.step h3{font-size:16px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px}
.step p{font-size:13.5px; line-height:1.55; color:var(--ink-2)}
@media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ============================================================ DELIVERY LADDER */
.ladder{display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center}
.rung{
  flex:1 1 220px; max-width:300px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:26px 22px; text-align:center; position:relative;
  transition:transform var(--t3) var(--e-out), box-shadow var(--t3) var(--e-out);
}
.rung:hover{transform:translateY(-3px); box-shadow:0 16px 34px -20px rgba(17,27,33,.3)}
.rung .ic{width:46px; height:46px; border-radius:14px; margin:0 auto 14px;
  display:grid; place-items:center; background:var(--c)}
.rung .ic svg{width:22px; height:22px; fill:#fff}
.rung h3{font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:5px}
.rung p{font-size:13.5px; color:var(--ink-2)}
.rung .when{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--c); margin-top:12px; font-weight:500}
.arrow{display:grid; place-items:center; padding:0 14px; flex:none}
.arrow svg{width:22px; height:14px; fill:none; stroke:var(--line-2); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
@media(max-width:820px){.arrow{transform:rotate(90deg); padding:12px 0}}

/* ============================================================
   MARQUEE — the six categories as a moving band, solid and
   outlined by turns. Same outline vocabulary as the ladder
   numerals, so the page has one way of saying "this word, but
   quieter" rather than two.

   Each row carries its words twice and travels exactly -50%, so
   the loop closes on itself with no seam. The rows run opposite
   ways at different speeds, which keeps the band from reading as
   one rigid object sliding past.
   ============================================================ */
.mq{
  position:relative; z-index:3; overflow:hidden;
  padding:clamp(10px,1.4vw,20px) 0;
  margin:clamp(30px,4vw,52px) 0 0;
  /* the ends fade rather than being chopped by the viewport edge */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.mq-row{display:flex; width:max-content; will-change:transform}
.mq-line{
  display:inline-flex; align-items:center; flex:none;
  font-family:var(--font-display);
  font-weight:600; text-transform:none;
  font-variation-settings:normal;
  font-size:clamp(30px,4.4vw,64px); line-height:var(--dsp-section-lh);
  letter-spacing:var(--dsp-section-ls);
  white-space:nowrap;
}
.mq-line b{font-weight:700; color:var(--ink)}
.mq-line em{
  font-style:normal; font-weight:700;
  color:transparent; -webkit-text-stroke:1.5px var(--line-2);
}
.mq-line i{
  display:inline-flex; flex:none; margin:0 clamp(16px,1.9vw,30px);
}
.mq-line i svg{width:clamp(9px,.9vw,13px); height:clamp(9px,.9vw,13px); fill:var(--green)}
/* only runs while the band is on screen */
.mq-row{animation:mqx 46s linear infinite; animation-play-state:paused}
.mq-row.b{animation-duration:58s; animation-direction:reverse}
.mq.is-live .mq-row{animation-play-state:running}
@keyframes mqx{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .mq-row{animation:none}
  /* static, the second copy is redundant and would overflow */
  .mq-line + .mq-line{display:none}
}
/* On the dark ground it is a texture, not a headline: one row, smaller, and
   dark grey rather than the band's cream — loud enough to read as words at a
   glance, quiet enough that the CTA above it still owns the screen. */
.mq.band-dark{padding:clamp(12px,1.5vw,20px) 0; margin:0}
.mq.band-dark .mq-row.b{display:none}
.mq.band-dark .mq-line{font-size:clamp(24px,2.9vw,42px)}
.mq.band-dark .mq-line b{color:var(--mq-dim)}
.mq.band-dark .mq-line em{-webkit-text-stroke-color:#333330}
.mq.band-dark .mq-line i svg{fill:rgba(37,211,102,.5)}

/* On the white hero it is quieter still: a mono, letter-spaced texture at
   the footer's own register (same family/tracking as .fgrid h4) rather
   than a headline. One word is promoted solid, one gets the chip's old
   pill outline, so the row keeps two anchors while the rest recedes. */
.mq.band-light{padding:clamp(8px,1vw,14px) 0; margin:0}
.mq.band-light .mq-row.b{display:none}
.mq.band-light .mq-line{
  font-family:var(--font-mono); font-weight:600;
  font-variation-settings:normal; text-transform:uppercase;
  font-size:clamp(10.5px,1.05vw,12.5px); letter-spacing:.16em;
  line-height:1;
}
.mq.band-light .mi{display:inline-flex; align-items:center; color:var(--ink-2); opacity:.5}
.mq.band-light .mi.is-b{opacity:1; font-weight:700; color:var(--ink)}
.mq.band-light .mi.is-line{
  opacity:1; color:var(--ink-2); box-shadow:var(--rim-line);
  border-radius:var(--r-pill); padding:7px 14px;
}
.mq.band-light .mq-line i{opacity:.5}
.mq.band-light .mq-line i svg{fill:var(--ink-2)}


/* ============================================================ LIFETREE */
.lt{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-12); align-items:center}
.lt h2{font-size:var(--dsp-section-size); line-height:var(--dsp-section-lh);
  letter-spacing:var(--dsp-section-ls); text-align:left; max-width:none}
.lt .body-l{margin-top:18px}
.lt-acts{margin-top:26px; display:flex; gap:11px; flex-wrap:wrap}
.ledger{overflow:hidden}
.lhead{display:grid; grid-template-columns:1.5fr 1fr 74px; gap:14px; padding:12px 18px;
  background:color-mix(in srgb,var(--paper-2) 70%, transparent); border-bottom:1px solid var(--glass-rim-faint);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-2)}
.lrow{display:grid; grid-template-columns:1.5fr 1fr 74px; gap:14px; padding:15px 18px;
  border-bottom:1px solid rgba(214,206,196,.45); align-items:center; font-size:14px;
  transition:background var(--t2) var(--e-io)}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:color-mix(in srgb,var(--paper) 55%, transparent)}
.lrow b{font-weight:600; display:flex; align-items:center; gap:9px}
.lrow b i{width:7px; height:7px; border-radius:var(--r-full); background:var(--c); flex:none}
.lrow .d{font-family:var(--font-mono); font-size:12.5px; color:var(--ink-2)}
.lrow .s{text-align:right}
.cat-table{overflow:hidden}
.cat-row{display:flex; align-items:flex-start; gap:14px; padding:15px 18px;
  border-bottom:1px solid rgba(214,206,196,.45); transition:background var(--t2) var(--e-io)}
.cat-row:last-child{border-bottom:0}
.cat-row:hover{background:color-mix(in srgb,var(--paper) 55%, transparent)}
.cat-ic{width:32px; height:32px; border-radius:9px; flex:none; margin-top:1px;
  display:grid; place-items:center; background:color-mix(in srgb, var(--c) 15%, transparent); color:var(--c)}
.cat-ic svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.25;
  stroke-linecap:round; stroke-linejoin:round}
.cat-copy{display:flex; flex-direction:column; gap:3px; padding-top:2px}
.cat-copy b{font-size:14px; font-weight:700; color:var(--ink)}
.cat-copy em{font-style:normal; font-size:12.5px; color:var(--ink-2); line-height:1.4}
/* ============================================================
   LIFETREE — collapsible tree (CodePen LEXZKK), restyled onto
   the beige/green tokens. Category rows are the clickable nodes;
   children fan out along cubic diagonals the way the D3 layout does. */
.lgroups{display:flex; flex-direction:column; align-items:center; margin-top:52px; width:100%; min-width:0; overflow-x:clip}
.lt-tree{
  position:relative; width:100%; min-height:280px;
  overflow:visible;
}
.lt-tree-links{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible; z-index:0;
}
/* Dashed rails match .sm-wire. Packets (feature-2 green bloom) run only on
   the open / hot branch — trader-style multi-dot flow on the active line. */
.lt-tree-link{
  fill:none;
  stroke:#9AA8A0;
  stroke-width:1.15;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:2.2 3.4;
  vector-effect:non-scaling-stroke;
  opacity:0;
  transition:opacity .7s var(--e-out), stroke .5s var(--e-io),
             stroke-width .5s var(--e-io);
  transition-delay:var(--d, 0s);
}
.lt-tree.is-live .lt-tree-link{
  opacity:.55;
  animation:ltDash 1.4s linear infinite;
  animation-delay:calc(var(--d, 0s) * -10);
}
.lt-tree.is-live .lt-tree-link.is-fresh{
  opacity:0; transition:none; animation:none;
}
.lt-tree.is-live .lt-tree-link.is-on,
.lt-tree.is-live .lt-tree-link.is-hot{
  stroke:var(--green);
  stroke-width:1.35;
  opacity:.95;
}
/* Hub → open category: solid active trunk (trader “selected rail”). */
.lt-tree.is-live .lt-tree-link.is-trunk{
  stroke:var(--green);
  stroke-width:1.6;
  stroke-dasharray:none;
  opacity:1;
  animation:none;
}
@keyframes ltDash{to{stroke-dashoffset:-28}}
.lt-tree-pkt{pointer-events:none}
.lt-tree-pkt-glow,
.lt-tree-pkt-head{
  offset-rotate:0deg;
  /* One packet at a time: run, fade out, brief pause, then again. */
  animation:ltPktRun var(--lt-pkt-dur, 2.4s) linear infinite;
  animation-delay:var(--lt-pkt-delay, 0s);
}
/* Same bloom as .lt-cal-dot.is-next / .sm-pulse */
.lt-tree-pkt-glow{
  fill:rgba(var(--green-rgb),.5);
  filter:blur(4.5px);
}
.lt-tree-pkt-head{
  fill:var(--green);
  stroke:none;
}
@keyframes ltPktRun{
  0%{offset-distance:0%; opacity:0}
  6%{offset-distance:0%; opacity:1}
  62%{offset-distance:100%; opacity:1}
  70%{offset-distance:100%; opacity:0}
  100%{offset-distance:100%; opacity:0}
}
.lt-tree.is-booting .lt-node{opacity:0 !important}
.lt-tree.is-booting .lt-tree-link{opacity:0 !important; animation:none}
.lt-tree.is-booting .lt-tree-pkt{display:none}
.lt-tree.is-awakening .lt-node{
  transition:opacity .7s var(--e-out) var(--d, 0s);
}
.lt-tree-nodes{position:relative; z-index:auto}
.lt-node{
  position:absolute; left:0; top:0;
  margin:0; box-sizing:border-box;
}
.lt-node.is-cat{
  --r:8px; --r-pad:6px;
  appearance:none; -webkit-appearance:none;
  display:flex; align-items:center; gap:var(--space-2);
  padding:0 12px 0 var(--r-pad); border-radius:var(--r-outer);
  background:var(--card); border:1px solid var(--line);
  color:inherit; font:inherit; text-align:left; cursor:pointer;
  box-shadow:0 1px 2px rgba(var(--ink-rgb),.05);
  transition:border-color var(--t2) var(--e-io), background var(--t2) var(--e-io),
             box-shadow var(--t2) var(--e-io);
}
.lt-node.is-cat:hover,
.lt-node.is-cat.is-open{
  border-color:color-mix(in srgb, var(--c) 42%, var(--line));
  background:color-mix(in srgb, var(--c) 10%, var(--card));
}
/* Open category: same spinning green/gold rim as the LifeTree hub. */
.lt-node.is-cat.is-open{
  --fx-glass-rim:2px;
  isolation:isolate;
  z-index:2;
  border-color:transparent;
  background:
    linear-gradient(165deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.88) 100%),
    color-mix(in srgb, var(--c) 12%, var(--card));
  box-shadow:
    0 10px 22px -14px rgba(17,27,33,.35),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 3px rgba(255,255,255,.28);
}
.lt-node.is-cat.is-open::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:var(--fx-glass-rim);
  pointer-events:none;
  z-index:2;
  background:conic-gradient(from var(--fx-glass-angle), var(--halo-stops));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:fx-glass-spin 4.8s linear infinite;
}
.lt-node.is-cat.is-open::after{
  content:"";
  position:absolute; inset:var(--fx-glass-rim);
  z-index:0;
  border-radius:calc(var(--r-outer) - var(--fx-glass-rim));
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 48%);
}
.lt-node.is-cat.is-open > *{position:relative; z-index:1}
.lt-node.is-cat:focus-visible{
  outline:var(--focus-w) solid var(--green-ink); outline-offset:var(--focus-offset);
}
.lt-node-ico{
  width:24px; height:24px; flex:none; border-radius:var(--r);
  display:grid; place-items:center;
  background:color-mix(in srgb, var(--c) 16%, transparent);
  color:var(--ico-pencil);
}
.lt-node.is-open .lt-node-ico{color:var(--green-ink)}
.lt-node-ico svg{width:14px; height:14px}
.lt-node-copy{display:flex; align-items:center; min-width:0; flex:1}
.lt-node-copy b{font-size:13.5px; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1; white-space:nowrap}
.lt-node-btn{
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; height:100%; box-sizing:border-box;
  background:var(--card); border:1px solid var(--line); color:inherit;
  box-shadow:0 1px 2px rgba(var(--ink-rgb),.05);
}
.lt-node.is-root{
  display:inline-flex;
  width:max-content;
  height:auto;
  z-index:2;
  box-shadow:
    var(--elev-4), var(--rim-top), var(--rim-bottom);
}
.lt-node.is-root .sm-hub{margin:0}
.lt-node.is-root .sm-hub i svg{
  width:14px; height:14px; fill:#06301C; display:block;
}
.lt-node.is-group{
  appearance:none; -webkit-appearance:none;
  padding:0; border:0; background:transparent;
  color:inherit; font:inherit; cursor:pointer;
}
.lt-node.is-group:focus-visible{
  outline:var(--focus-w) solid var(--green-ink); outline-offset:var(--focus-offset);
  border-radius:var(--r-pill);
}
.lt-node.is-leaf .lt-node-btn,
.lt-node.is-group .lt-node-btn{
  border-radius:var(--r-pill); padding:0 14px; cursor:default;
}
.lt-node.is-group .lt-node-btn{cursor:pointer}
.lt-node.is-leaf .lt-node-copy,
.lt-node.is-group .lt-node-copy{padding:0; flex:none}
.lt-node.is-leaf .lt-node-copy b,
.lt-node.is-group .lt-node-copy b{font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap}
.lt-node.is-group.is-sel .lt-node-btn{
  border-color:color-mix(in srgb, var(--c) 42%, var(--line));
  background:color-mix(in srgb, var(--c) 10%, var(--card));
}
.lt-node.is-group.is-sel .lt-node-copy b{color:var(--ink)}
.lt-node.is-item{z-index:2}
.lt-node.is-item,
.lt-node.is-group{transform-origin:50% 0%}
.lt-node.is-item.fx-glass{
  --r:var(--r-md);
  --r-pad:8px;
  --fx-glass-rim:2px;
  --glass-mx:50%; --glass-my:0%;
  border-radius:var(--r-outer);
  background:color-mix(in srgb,var(--card) 64%, transparent);
  border:1px solid var(--glass-rim);
  box-shadow:var(--rim-top-soft), var(--rim-inner), var(--elev-panel);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
}
.lt-node.is-item.fx-glass > *{position:relative; z-index:1}
.lt-node.is-item.fx-glass::after{
  inset:var(--fx-glass-rim);
  border-radius:calc(var(--r-outer) - var(--fx-glass-rim));
  background:
    radial-gradient(420px circle at var(--glass-mx) var(--glass-my), rgba(255,255,255,.5), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 40%, transparent 68%);
  opacity:.5;
}
.lt-item-card{
  box-sizing:border-box;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:0; overflow:hidden;
  background:transparent;
  border:none;
  border-radius:var(--r);
}
.lt-item-media{
  position:relative;
  z-index:1;
  height:124px; flex:none;
  background:color-mix(in srgb, var(--c) 22%, #d9d2c8);
  border-radius:var(--r);
}
.lt-item-media img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--r);
}
.lt-item-ico{
  position:absolute; right:12px; bottom:0;
  transform:translateY(50%);
  width:32px; height:32px; flex:none;
  border-radius:var(--r-full);
  display:grid; place-items:center;
  color:var(--ink-2);
  background:rgba(255,255,255,.92);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
  border:.5px solid var(--glass-rim);
  box-shadow:
    0 1px 2px rgba(17,27,33,.08),
    0 8px 18px -10px rgba(17,27,33,.35),
    inset 0 1px 0 rgba(255,255,255,.92);
}
.lt-item-ico svg{width:14px; height:14px; stroke:currentColor}
.lt-item-copy{
  min-width:0; flex:1;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:10px 12px 12px;
}
.lt-item-card b{
  font-size:14px; font-weight:700; letter-spacing:-.03em;
  color:var(--ink); line-height:1.2; white-space:normal;
}
.lt-item-copy > span{
  font-size:12.5px; color:var(--ink-2); line-height:1.3;
}
.lt-item-card i{
  font-style:normal; font-size:11px; color:var(--muted); line-height:1.3;
}
.lt-tree-note{text-align:center; margin:28px auto 0}
.lt-agenda-shell{
  position:relative;
  display:flex;
  justify-content:center;
  margin-top:clamp(36px, 5vw, 64px);
  margin-bottom:var(--space-12);
}
.lt-demo-btn{
  position:relative; z-index:2;
  display:inline-flex; width:max-content;
  margin:0; border:0; appearance:none; -webkit-appearance:none;
  cursor:pointer; font:inherit; color:inherit;
  box-shadow:var(--elev-4), var(--rim-top), var(--rim-bottom);
}
.lt-demo-btn:focus-visible{
  outline:var(--focus-w) solid var(--green-ink);
  outline-offset:var(--focus-offset);
}
.lt-demo{
  --lt-phone-w:380px;
  --lt-phone-h:790px;
  width:min(1000px, calc(100vw - 32px));
  max-width:1000px;
  height:min(860px, calc(100dvh - 56px));
  max-height:calc(100dvh - 56px);
  margin:auto;
  padding:0;
  border:0;
  border-radius:var(--r-lg);
  background:transparent;
  color:var(--ink);
  overflow:hidden;
  box-shadow:0 0.5rem 1rem rgb(0 0 0 / 15%);
}
.lt-demo::backdrop{background:rgb(0 0 0 / 50%)}
.lt-demo .bg-gradient{position:absolute; z-index:0}
.lt-demo .sakura-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.5;
}
.lt-demo-x{
  position:absolute; top:20px; right:20px; z-index:4;
  width:33px; height:33px; padding:0; border:0; border-radius:50%;
  background:var(--ink); color:var(--ink-invert);
  display:grid; place-items:center; cursor:pointer;
}
.lt-demo-x:hover{background:var(--cta-hover)}
.lt-demo-x svg{width:16px; height:16px}
.lt-demo-stage{
  position:relative; z-index:2;
  height:100%;
  display:grid; place-items:center;
  padding:28px 16px;
}
.lt-demo{--lt-zoom:min(1, (min(860px, 100dvh - 56px) - 56px) / var(--lt-phone-h))}
.lt-demo .phone{zoom:var(--lt-zoom)}
.lt-demo .screen{background:#FDFDF8}
.lt-demo-app{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; border:0;
  background:transparent;
}
.lt-demo.is-tour .lt-demo-app{pointer-events:none}
.lt-demo .tap-here{
  position:absolute; z-index:40;
  width:22px; height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:rgba(96,96,102,.55);
  box-shadow:0 0 0 1px rgba(255,255,255,.8), 0 0 0 6px rgba(130,130,136,.32);
  transform:scale(.82);
  transition:none;
}
.lt-demo.is-tap .tap-here{
  opacity:1 !important;
  visibility:visible !important;
  display:block;
  transform:scale(1);
}
.lt-demo.is-tap.is-press .tap-here{transform:scale(.72)}
.lt-demo-cue{
  position:absolute; z-index:5;
  right:24px; bottom:24px;
  display:flex; align-items:flex-end; gap:12px;
  max-width:240px;
  pointer-events:none;
}
.lt-demo-cue[hidden]{display:none}
.lt-demo-cue img{width:72px; height:72px; flex:none}
.lt-demo-cue p{
  margin:0; padding:12px 14px;
  border-radius:var(--r-md) var(--r-md) var(--r-md) 6px;
  background:#fff; color:var(--ink);
  box-shadow:var(--elev-4);
  font-size:15px; line-height:1.45;
}
.lt-demo.is-yours .wb-fx{display:none}
.lt-demo.is-yours .wb-buddy{
  position:absolute !important;
  transform:none !important;
  top:auto !important; right:auto !important;
  left:calc(50% + (var(--lt-phone-w) * var(--lt-zoom)) / 2 + 14px) !important;
  bottom:calc(50% - (var(--lt-phone-h) * var(--lt-zoom)) / 2) !important;
  width:112px; height:112px;
  z-index:6; pointer-events:auto;
}
.lt-demo.is-yours .wb-say.on{
  position:absolute !important;
  transform:none !important;
  top:auto !important; right:auto !important;
  left:calc(50% + (var(--lt-phone-w) * var(--lt-zoom)) / 2 + 8px) !important;
  bottom:calc(50% - (var(--lt-phone-h) * var(--lt-zoom)) / 2 + 108px) !important;
  width:min(210px, calc(50% - (var(--lt-phone-w) * var(--lt-zoom)) / 2 - 24px));
  z-index:7;
}
.lt-demo.is-yours .wb-say.on .wb-say-in{max-width:100%}
@media (max-width:400px){
  .lt-demo{--lt-phone-w:300px; --lt-phone-h:633px}
}
@media (prefers-reduced-motion:reduce){
  .lt-node.is-cat{transition:none}
  .lt-tree-link,
  .lt-tree.is-awakening .lt-node{transition:none}
  .lt-tree-link{animation:none; opacity:.55}
  .lt-tree-link.is-on,
  .lt-tree-link.is-hot{opacity:.95}
  .lt-tree-pkt{display:none}
}

/* Sakura wind — CodePen "The last sakura blossom" particle system, clipped
   to this section as atmosphere behind the tree. Transparent canvas so the
   page ground shows through; the original filled white every frame. */
#lifetree{position:relative; overflow:visible}
#lifetree .lt-branch,
.hero .lt-branch,
[data-page="privacy"] #privacy .lt-branch, [data-page="security"] #security .lt-branch, [data-page="pricing"] #pricing .lt-branch,
[data-page="help"] #help .lt-branch{
  position:absolute; top:0; height:auto;
  max-height:600px;
  pointer-events:none; user-select:none; z-index:0;
}
#lifetree .lt-branch-left,
.hero .lt-branch-left,
[data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
[data-page="help"] #help .lt-branch-left{
  left:0; top:-200px; width:min(42vw, 502px); max-width:502px;
}
#lifetree .lt-branch-right,
.hero .lt-branch-right{
  right:0; top:-250px; width:min(42vw, 600px); max-width:600px;
}
#lifetree .sakura-canvas,
.hero .sakura-canvas,
[data-page="privacy"] #privacy .sakura-canvas, [data-page="security"] #security .sakura-canvas, [data-page="pricing"] #pricing .sakura-canvas,
[data-page="help"] #help .sakura-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.45;
}
#lifetree > .wrap{position:relative; z-index:1}
#lifetree .sec-sub{width:75%; max-width:75%}
/* Laptop and below: ~25% of the desktop branch so foliage stays in the
   corners and the heading stays readable. */
@media (max-width:1600px){
  #lifetree .lt-branch-left,
  .hero .lt-branch-left,
  [data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
  [data-page="help"] #help .lt-branch-left{
    left:-2%; top:-48px; width:min(11vw, 126px); max-width:126px;
  }
  #lifetree .lt-branch-right,
  .hero .lt-branch-right{
    right:-2%; width:min(11vw, 150px); max-width:150px;
  }
}
@media (max-width:900px){
  #lifetree .lt-branch-left,
  .hero .lt-branch-left,
  [data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
  [data-page="help"] #help .lt-branch-left{
    left:0; top:-8px; width:min(16vw, 90px); max-width:90px;
  }
  #lifetree .lt-branch-right,
  .hero .lt-branch-right{
    right:0; width:min(16vw, 108px); max-width:108px;
  }
}
@media (max-width:640px){
  #lifetree .lt-branch-left,
  .hero .lt-branch-left,
  [data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
  [data-page="help"] #help .lt-branch-left{
    left:0; top:12px; width:min(20vw, 72px); max-width:72px;
  }
  #lifetree .lt-branch-right,
  .hero .lt-branch-right{
    right:0; width:min(20vw, 84px); max-width:84px;
  }
}

/* ============================================================ SUPERPOWERS */
.powers{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); background:transparent;
  border:0}
.pw{padding:26px 24px 30px}
.pw i{transition:background var(--t3) var(--e-io), transform var(--t3) var(--e-out)}
.pw i svg{transition:fill var(--t3) var(--e-io)}
.pw h3{transition:color var(--t3) var(--e-io)}
.pw:hover i{background:var(--green); transform:translateY(-2px)}
.pw:hover i svg{fill:#fff}
.pw:hover h3{color:var(--green-ink)}
.pw i{width:34px; height:34px; border-radius:10px; background:var(--paper-2);
  display:grid; place-items:center; margin-bottom:14px}
.pw i svg{width:16px; height:16px; fill:var(--green-ink)}
.pw h3{font-size:15px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px}
.pw p{font-size:13.5px; line-height:1.58; color:var(--ink-2)}
@media(max-width:900px){.powers{grid-template-columns:1fr}}

/* ============================================================ TESTIMONIALS */
/* One travelling row, full width. The rail is the viewport, the track is the
   thing that moves; it carries the six quotes twice and animates to exactly
   -50%, so the loop has no seam. Hover or keyboard focus anywhere inside
   pauses it — a quote nobody can finish reading is decoration, not proof. */
.qrail{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.qtrack{display:flex; gap:var(--space-4); width:max-content; animation:qmove 64s linear infinite}
.qrail:hover .qtrack,.qrail:focus-within .qtrack{animation-play-state:paused}
@keyframes qmove{to{transform:translateX(calc(-50% - 8px))}}
@media (prefers-reduced-motion:reduce){
  .qtrack{animation:none; width:auto; flex-wrap:wrap; justify-content:center}
  .qtrack .qt[aria-hidden="true"]{display:none}
  .qrail{-webkit-mask-image:none; mask-image:none}
}
.qt{padding:24px; width:clamp(300px,26vw,392px); flex:none;
  display:flex; flex-direction:column; gap:var(--space-4)}
.qt blockquote{font-size:14px; line-height:1.6; color:var(--ink); flex:1; quotes:none}
.qt figcaption{display:flex; align-items:center; gap:11px}
.qt .a{width:34px; height:34px; border-radius:var(--r-full); flex:none; display:grid; place-items:center;
  background:var(--paper-2)}
.qt .a svg{width:18px; height:18px; fill:var(--ink-2)}
.qt b{display:block; font-size:13.5px; font-weight:600}
.qt span{display:block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:2px}


/* ============================================================ PRICING */
.price{max-width:520px; margin:0 auto; padding:34px 32px}
.price .pn{text-align:center; font-size:13.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-2)}
.amount{text-align:center; margin:10px 0 4px}
.amount b{font-size:76px; font-weight:900; letter-spacing:-.05em;
  font-variation-settings:"wdth" 78; line-height:1}
.amount span{font-size:15px; color:var(--ink-2); font-weight:500}
.p-intro{text-align:center; font-size:13.5px; color:var(--ink-2); line-height:1.5; margin-top:10px}
.incl{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:1px;
  background:rgba(214,206,196,.35); border:1px solid var(--glass-rim-faint); border-radius:var(--r-sm); overflow:hidden}
.incl li{display:grid; grid-template-columns:18px 1fr; gap:11px; align-items:start;
  background:color-mix(in srgb,var(--card) 55%, transparent); padding:12px 14px; font-size:14px; color:var(--ink-2)}
.incl li svg{width:13px; height:13px; margin-top:4px; fill:none; stroke:var(--green-ink);
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.incl li > span{display:flex; flex-direction:column; gap:3px}
.incl-h{font-size:14px; color:var(--ink-2)}
.incl b{color:var(--ink); font-weight:600}
.incl em{font-style:normal; font-size:12.5px; color:var(--muted); line-height:1.45}
.p-try{margin-top:22px; text-align:center}
.p-try-h{font-size:13.5px; font-weight:700; color:var(--ink)}
.p-try-d{font-size:12.5px; color:var(--ink-2); margin-top:4px; line-height:1.5}
.price .btn{width:100%; margin-top:16px}
.pfine{text-align:center; font-size:12.5px; color:var(--muted); margin-top:11px}
.addons{margin-top:22px; background:#FFF8E3; border:1px solid #EFE0B4; border-radius:var(--r-sm);
  padding:15px 17px}
.addons p{font-size:12.5px; font-weight:600; margin-bottom:9px}
.addons div{display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-2);
  padding:4px 0}
.addons div b{font-weight:600; color:var(--ink); font-family:var(--font-mono); font-size:12.5px}
.addons-note{font-size:11px; color:var(--ink-2); line-height:1.45; margin-top:8px}

.price-cta{text-align:center}
.price-cta .sec-sub{margin-inline:auto}
.price-cta .hero-acts{margin-top:28px}
/* Same homepage follow-up note, sitting above the try-before heading.
   The shared rule pins it to the orange card; here it stays in flow. */
[data-page="pricing"] #get-started .fx-stack.fu-note{
  position:relative;
  top:auto;
  left:auto;
  z-index:1;
  width:max-content;
  max-width:none;
  margin:8px auto 40px;
  text-align:left;
}
[data-page="pricing"] #get-started .fu-note .sm-detail{
  width:auto;
  padding:16px 14px 14px;
}
/* Both lines share one cell. The track is the longer first line,
   so the card never shrinks when the shorter line is showing. */
[data-page="pricing"] #get-started .fu-note-lines{
  display:grid;
}
[data-page="pricing"] #get-started .fu-note .sm-detail b{
  grid-area:1 / 1;
  font-size:22px;
  line-height:1.15;
  white-space:nowrap;
  animation:price-note-swap 6.4s ease-in-out infinite;
}
[data-page="pricing"] #get-started .fu-note-lines b:last-child{
  text-align:center;
  animation-delay:-3.2s;
}
@keyframes price-note-swap{
  0%, 42%{opacity:1}
  50%, 92%{opacity:0}
  100%{opacity:1}
}
@media (prefers-reduced-motion:reduce){
  [data-page="pricing"] #get-started .fu-note .sm-detail b{animation:none}
  [data-page="pricing"] #get-started .fu-note-lines b:last-child{opacity:0}
}
.price-cta .hero-fine{margin-top:0; padding:60px 0}

.pg-bill-wrap{display:flex; justify-content:center; margin:-8px 0 32px}
.price > .pg-bill-wrap{margin:0 0 22px}
.pg-bill{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  background:#E8E8ED; border:0; border-radius:var(--r-pill);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.10);
}
.pg-bill button{
  border:0; background:transparent; border-radius:var(--r-pill);
  padding:7px 14px; min-height:34px;
  font:inherit; font-size:14px; font-weight:600;
  color:#8B909A; cursor:pointer;
  transition:color var(--t2) var(--e-io), background var(--t2) var(--e-io),
             box-shadow var(--t2) var(--e-io);
}
.pg-bill button.is-on{
  background:#fff; color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
}
.pg-bill button:focus-visible{outline:2px solid var(--green-ink); outline-offset:2px}
.price[data-bill="month"] [data-for="year"],
.price[data-bill="year"] [data-for="month"],
#planCard[data-bill="month"] [data-for="year"],
#planCard[data-bill="year"] [data-for="month"]{display:none}
.p-save{text-align:center; font-size:13.5px; font-weight:600;
  color:var(--green-ink); margin-top:6px}
.price.wide{max-width:720px; padding:36px 40px}
.price.wide .btn{width:auto; min-width:min(100%, 320px); margin-inline:auto}
.price.wide .p-intro{max-width:none}
.pg-incl{margin-top:0}
.pg-incl .sm-ico{margin-bottom:14px}
.pg-incl .tc p{padding-bottom:0}
.pg-ticks{list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-3)}
.pg-ticks li{display:flex; gap:10px; align-items:flex-start;
  font-size:15px; line-height:1.5; color:var(--ink)}
.pg-ticks svg{width:18px; height:18px; flex:none; margin-top:3px;
  color:var(--green-ink)}
#planCard .incl li svg{width:18px; height:18px; margin-top:2px; stroke-width:1.25;
  color:var(--green-ink); stroke:currentColor}
.pg-plans{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4);
  max-width:880px; margin:0 auto; align-items:stretch}
.pg-plans .price{max-width:none; width:100%; margin:0; display:flex;
  flex-direction:column; gap:var(--space-4)}
.pg-plans .price .amount{margin:0}
.pg-plans .price .btn{margin-top:auto}

/* Pricing hero matches the help center: one centered column,
   then the billing toggle, then the three plans. */
[data-page="pricing"] #pricing .sec-head{margin-bottom:48px}
[data-page="pricing"] #pricing .sec-head,
[data-page="pricing"] #pricing h1.dsp.sec-title,
[data-page="pricing"] #pricing .sec-title.line-reveal .line-reveal__line,
[data-page="pricing"] #pricing .sec-head > p{text-align:center}
[data-page="pricing"] #pricing h1.dsp.sec-title,
[data-page="pricing"] #pricing .sec-head > p{
  margin-left:auto;
  margin-right:auto;
}
[data-page="pricing"] #pricing .sec-head > p{
  margin-top:var(--space-4);
  max-width:none;
  font-size:var(--dsp-sub-size);
  line-height:var(--dsp-sub-lh);
  color:var(--ink-2);
}
[data-page="pricing"] #pricing .pg-bill-wrap{
  position:relative;
  width:fit-content;
  margin:0 auto 24px;
}
[data-page="pricing"] #pricing .pg-bill{
  --r-pad:4px;
  gap:var(--r-pad);
  padding:var(--r-pad);
  background:#DCDCE2;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18), inset 0 2px 5px rgba(0,0,0,.08);
}
[data-page="pricing"] #pricing .pg-bill button{
  border:0;
  border-radius:var(--r-pill);
  padding:8px 18px;
  min-height:40px;
  font-size:15px;
  font-weight:600;
  color:#8E8E93;
}
[data-page="pricing"] #pricing .pg-bill button.is-on{
  background:
    linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, #fff 0%, #E4E4EA 100%);
  color:var(--ink);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(0,0,0,.08),
    0 8px 16px -8px rgba(0,0,0,.32);
}
[data-page="pricing"] #pricing .pg-bill button[data-bill="year"]{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-right:6px;
}
[data-page="pricing"] #pricing .pg-save{
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:4px 8px;
  border-radius:8px;
  background:var(--green);
  color:var(--ink-on-green);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
[data-page="pricing"] #planCard[data-bill="month"]{padding-top:24px}
[data-page="pricing"] #pricing .pg-year{
  margin:-12px 0 48px;
  text-align:center;
  font-size:15px;
  line-height:1.5;
  color:var(--ink-2);
}
[data-page="pricing"] #pricing .pg-plans{
  grid-template-columns:repeat(3, minmax(0, 1fr));
  max-width:none;
}
[data-page="pricing"] #pricing .pg-plans .price{gap:0; padding:30px 22px 24px}
[data-page="pricing"] #pricing .pg-plans .price .btn{width:100%; margin-top:16px}
[data-page="pricing"] #pricing .pg-plans .amount{margin:12px 0 0}
[data-page="pricing"] #pricing .pg-plans .amount b{font-size:clamp(44px, 4vw, 64px)}
/* Popular plan wears the same spinning halo as .fx-glass, on the card radius.
   Orange and blue are the DS frame colors, woven into the green/gold ring. */
[data-page="pricing"] #pricing .pg-pop-glass{
  --r:var(--r-lg);
  --r-pad:2px;
  --fx-glass-rim:2px;
  --halo-stops:
    var(--halo-1) 0deg,
    var(--info) 90deg,
    var(--viz-money-a) 180deg,
    var(--halo-3) 270deg,
    var(--halo-1) 360deg;
  position:relative;
  height:100%;
  display:flex;
  overflow:visible;
  border-radius:var(--r-outer);
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
[data-page="pricing"] #pricing .pg-pop-glass::after{content:none}
[data-page="pricing"] #pricing .pg-pop-glass > .price{
  flex:1;
  width:100%;
  border-radius:var(--r);
  border-color:transparent;
  box-shadow:var(--elev-panel);
}
[data-page="pricing"] #pricing .pg-plans{overflow:visible; position:relative}
[data-page="pricing"] #pricing .pg-pop{
  position:absolute;
  z-index:3;
  top:0;
  left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  background:var(--info-tint);
  border:1.5px solid var(--info);
  border-radius:var(--r-pill);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  color:var(--info-ink);
  white-space:nowrap;
}
[data-page="pricing"] #pricing .p-intro{margin-top:14px}
[data-page="pricing"] #pricing .pg-plus{
  margin:18px 0 0;
  text-align:left;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
[data-page="pricing"] #pricing .pg-active{
  display:flex;
  align-items:center;
  gap:20px;
  width:100%;
  margin:36px 0 0;
  text-align:left;
}
[data-page="pricing"] #pricing .pg-active img{
  width:150px;
  height:150px;
  flex:none;
  object-fit:contain;
}
[data-page="pricing"] #pricing .pg-active > div{min-width:0}
[data-page="pricing"] #pricing .pg-active-pill{
  display:inline-flex;
  align-items:center;
  margin:0;
  padding:7px 14px;
  background:var(--info-tint);
  border:1.5px solid var(--info);
  border-radius:var(--r-pill);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
  color:var(--info-ink);
}
[data-page="pricing"] #pricing .pg-active > div > p:last-child{
  margin:14px 0 0;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-2);
}
[data-page="pricing"] #pricing .pg-calls{margin-top:16px; text-align:left}
[data-page="pricing"] #pricing .pg-calls-h{
  margin:0;
  text-align:left;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
}
[data-page="pricing"] #pricing .pg-calls p:not(.pg-calls-h){
  margin:6px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ink-2);
}
[data-page="pricing"] #pricing .pg-calls-opts{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
[data-page="pricing"] #pricing .pg-calls-opts span{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--paper);
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}
[data-page="pricing"] #pricing .pg-calls-fine{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-2);
}
[data-page="pricing"] #pricing .pg-plus + .incl,
[data-page="pricing"] #pricing .p-intro + .incl{margin-top:12px}
@media (max-width:1100px){
  [data-page="pricing"] #pricing .pg-plans{
    grid-template-columns:1fr;
    max-width:520px;
  }
}

.inner-page .page-main h1.dsp,
.help-page .page-main h2.dsp{
  font-size:var(--dsp-section-size);
  line-height:var(--dsp-section-lh);
  letter-spacing:var(--dsp-section-ls);
  margin:0 auto;
  max-width:none;
}
.inner-page .price-cta .hero-fine{padding:22px 0 0; margin-top:18px}
@media(max-width:1100px){
  .pg-incl.trio{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .pg-plans{grid-template-columns:1fr}
  .price.wide{padding:28px 22px}
}
@media(max-width:700px){
  .pg-incl.trio{grid-template-columns:1fr}
  [data-page="pricing"] #pricing .pg-active{
    flex-direction:column;
    align-items:flex-start;
  }
}

.page-main{padding-top:88px; position:relative; z-index:2}
.prose{max-width:68ch; margin:0 auto; font-size:17px; line-height:1.65; color:var(--ink-2)}
.prose h3{color:var(--ink); font-size:18px; margin:28px 0 8px; letter-spacing:-.03em}
.prose p{margin:0 0 14px}

/* ============================================================ HELP CENTER */
a.tc{text-decoration:none; color:inherit}
.hc-search{
  --r:16px; --r-pad:6px;
  display:flex; align-items:center; gap:10px;
  max-width:720px; margin:28px auto 0;
  padding:var(--r-pad) 8px var(--r-pad) 16px;
  background:rgba(255,255,255,.80);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  border:1px solid var(--glass-rim-hi);
  border-radius:var(--r-outer);
  box-shadow:var(--elev-badge), var(--rim-top);
}
.hc-search svg{width:22px; height:22px; flex:none; color:var(--ico-pencil)}
.hc-search input{
  flex:1; min-width:0; min-height:44px; border:0; background:transparent;
  font:inherit; font-size:16px; color:var(--ink); border-radius:var(--r);
}
.hc-search input:focus,
.hc-search input:focus-visible{outline:none}
.hc-search:focus-within{
  outline:var(--focus-w) solid color-mix(in srgb, var(--green) 50%, transparent);
  outline-offset:var(--focus-offset);
}
.hc-search input::placeholder{color:var(--muted)}
.hc-pops{margin-top:16px}
.hc-cats .tc p{padding-bottom:0; flex:1}
.hc-go{
  display:inline-flex; margin-top:16px; font-size:13.5px; font-weight:600;
  color:var(--green-ink);
}
.hc-topic .sec-head{margin-bottom:8px}
.split-page #topics{padding-top:36px}
.help-page #topics{padding-top:0}
.help-page .hc-rhs{padding-top:var(--space-20)}
.split-page .hc-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,3fr);
  column-gap:var(--gut);
  align-items:start;
}
.split-page .hc-nav{
  position:sticky; top:88px; align-self:start;
  flex-direction:column; flex-wrap:nowrap;
  align-items:stretch; justify-content:flex-start;
  margin-top:0; gap:9px;
  max-height:calc(100svh - 110px);
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
}
.help-page .hc-nav{margin-top:var(--space-20)}
.hc-nav .hc-jump{display:none}
.hc-jump-menu{display:contents}
.split-page .hc-nav-pill{
  position:absolute; top:0; left:0;
  display:block; padding:0; margin:0;
  border:0; box-shadow:none;
  background:var(--green);
  border-radius:var(--r-pill);
  pointer-events:none; z-index:0;
  transition:transform var(--t3) var(--e-out),
             width var(--t3) var(--e-out),
             height var(--t3) var(--e-out);
}
.split-page .hc-nav-pill.is-snap{transition:none}
.split-page .hc-nav a{
  position:relative; z-index:1;
  width:100%; justify-content:flex-start; text-decoration:none;
  transition:color var(--t2) var(--e-out),
             background-color var(--t3) var(--e-out),
             border-color var(--t3) var(--e-out),
             box-shadow var(--t3) var(--e-out);
}
.split-page .hc-nav a:hover, .split-page .hc-nav a:focus-visible{
  color:var(--green-ink);
  border-color:color-mix(in srgb, var(--green) 40%, var(--line));
}
.split-page .hc-nav a.is-on{
  background:transparent; border-color:transparent;
  box-shadow:none; color:var(--ink-on-green); font-weight:600;
}
.split-page .hc-rhs{
  min-width:0;
  border-left:1px solid var(--line);
  padding-left:var(--gut);
}
.split-page .hc-rhs .sec-head{text-align:left}
.split-page .hc-rhs .eyebrow{justify-content:flex-start}
.split-page .hc-rhs .sec-title, .split-page .hc-rhs .sec-sub{margin-left:0; text-align:left}
.split-page .hc-topic,
.legal-page .hc-topic{
  padding:0 0 46px;
  scroll-margin-top:108px;
}
.help-page .hc-topic{padding-bottom:0}
.split-page .hc-topic:last-of-type,
.legal-page .hc-topic:last-of-type{padding-bottom:0}
.help-page #ask{margin:var(--space-24) 0 0; scroll-margin-top:108px}
.help-page #ask .sec-head{margin-bottom:var(--space-8)}
.help-page .hc-art{
  display:flex; flex-direction:column; gap:var(--space-3);
  padding:0;
  scroll-margin-top:108px;
}
.help-page .hc-art + .hc-art{margin-top:var(--space-24)}
.help-page .hc-art h3{
  font-size:22px; font-weight:700; letter-spacing:-.03em;
  color:var(--ink); margin:0; line-height:1.25;
}
.help-page .hc-art > p{padding:0; margin:0; font-size:14px; line-height:1.62; color:var(--ink-2)}
.help-page .hc-art ul{
  margin:0; padding:0 0 0 1.15em;
  font-size:14px; line-height:1.62; color:var(--ink-2);
}
.help-page .hc-art li+li{margin-top:4px}
.help-page .hc-rhs .hc-empty{margin:0 0 24px; padding:0; text-align:left}
.help-page .hc-rhs .hc-form, .help-page .hc-rhs .hc-ask-card{margin-left:0; margin-right:0}
.hc-phone.feat-well{
  --nat-w:380px;
  --nat-h:790px;
  --crop:.8;
  --ps:1;
  --r-pad:24px;
  container-type:inline-size;
  width:100%;
  max-width:calc(var(--nat-w) + var(--r-pad) * 2);
  height:calc(var(--nat-h) * var(--ps) * var(--crop) + 28px);
  margin:8px 0 12px;
  align-self:start;
}
.hc-phone .feat-phone-vis{
  --ps:min(1, 100cqw / var(--nat-w));
  width:calc(var(--nat-w) * var(--ps));
}
.help-page .hc-phone.feat-well{--crop:.8}
@media(max-width:900px){
  .hc-phone.feat-well{
    --r-pad:18px;
    height:calc(var(--nat-h) * var(--ps) * var(--crop) + 22px);
    padding:22px 18px 0;
  }
}
.hc-thread{
  display:flex; flex-direction:column; gap:8px; margin:2px 0;
  font-family:var(--font-wa);
}
.hc-msg{
  max-width:38ch; padding:8px 12px;
  font-size:14px; line-height:1.45; color:var(--ink);
  box-shadow:var(--elev-1);
}
.hc-msg.me{
  align-self:flex-end; background:var(--wa-bubble-out);
  border-radius:8px 8px 2px 8px;
}
.hc-msg.bot{
  align-self:flex-start; background:#fff;
  border-radius:8px 8px 8px 2px;
}
.hc-msg .ok{color:var(--green-ink); font-weight:600}
.hc-k{
  display:block; margin-top:6px; font-size:12.5px; color:var(--ink-2);
  font-family:var(--font-mono);
}
.hc-assist{font-size:14px; color:var(--ink-2)}
.hc-assist a{color:var(--green-ink); font-weight:600; text-decoration:none}
.hc-assist a:hover, .hc-assist a:focus-visible{text-decoration:underline}
.hc-empty{
  max-width:760px; margin:24px auto 0; padding:0 var(--gut); text-align:center;
  font-size:15px; color:var(--ink-2);
}
.hc-empty a{color:var(--green-ink); font-weight:600; text-decoration:none}
.hc-empty[hidden], .hc-hide{display:none !important}
.hc-form, .hc-ask-card{
  --r:12px; --r-pad:28px;
  max-width:720px; margin:0 auto;
  padding:var(--r-pad);
  border-radius:var(--r-outer);
  background:color-mix(in srgb,var(--card) 64%, transparent);
  border:1px solid var(--glass-rim);
  box-shadow:var(--rim-top-soft), var(--elev-panel);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
}
.hc-ask-card{display:flex; flex-direction:column; gap:var(--space-8)}
.hc-ask h3{
  font-size:13.5px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 10px;
}
.hc-ask-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
  gap:var(--space-3); align-items:baseline;
  padding:10px 0; border-top:1px solid var(--line);
  font-size:14px;
}
.hc-ask-row:has(ul){align-items:start}
.hc-ask-row span{color:var(--ink); font-weight:600}
.hc-ask-row code{
  font-family:var(--font-mono); font-size:12.5px;
  color:var(--ink-2); font-weight:500;
}
.hc-field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.hc-field label{font-size:13.5px; font-weight:600; color:var(--ink)}
.hc-hint{font-size:12.5px; font-weight:500; color:var(--ink-2)}
.hc-field input, .hc-form select, .hc-field textarea{
  width:100%; min-height:44px; padding:10px 14px;
  border:1px solid var(--line); border-radius:var(--r);
  background:rgba(255,255,255,.88); color:var(--ink);
  font:inherit; font-size:15px;
}
.hc-field textarea{min-height:132px; resize:vertical; line-height:1.5}
.hc-field input:focus, .hc-form select:focus, .hc-field textarea:focus{
  outline:var(--focus-w) solid var(--green-ink);
  outline-offset:var(--focus-offset); border-color:var(--green-ink);
}
.hc-check{
  display:flex; align-items:flex-start; gap:10px;
  margin:6px 0 22px; font-size:14px; line-height:1.45; color:var(--ink-2);
}
.hc-check input{margin-top:4px; width:18px; height:18px; flex:none; accent-color:var(--green-ink)}
.hc-form .btn{width:100%}
.hc-done{text-align:center}
.hc-done h3{font-size:22px; letter-spacing:-.03em; margin:0 0 8px}
.hc-done p{color:var(--ink-2); font-size:15px; line-height:1.6; margin:0 0 10px}
.hc-done .hc-ticket{
  font-family:var(--font-mono); font-size:14px; font-weight:700;
  color:var(--green-ink); margin:12px 0 18px;
}
.hc-status{
  max-width:720px; margin:0 auto; text-align:center;
  font-size:14px; color:var(--ink-2); line-height:1.55;
}
.hc-status a{color:var(--green-ink); font-weight:600; text-decoration:none}
@media(max-width:700px){
  .hc-ask-row{grid-template-columns:1fr; gap:var(--space-1)}
  .hc-form, .hc-ask-card{--r-pad:20px}
  .split-page .hc-shell{grid-template-columns:1fr; row-gap:24px}
  .split-page .hc-nav{position:static; flex-direction:row; flex-wrap:wrap; gap:9px; max-height:none; overflow:visible}
  .split-page .hc-nav a{width:auto}
  .split-page .hc-rhs{border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:24px}
}

/* ============================================================ LEGAL / DOC PAGES */
.legal-page section{padding:clamp(40px,5.2vw,80px) 0}
.legal-page #topics{padding:36px 0 clamp(48px,6vw,88px)}
.legal-page .hc-rhs .sec-title, .legal-page .hc-rhs .sec-sub{margin:0}
.legal-page .hc-rhs .doc,
.legal-page .hc-rhs .doc-card,
.legal-page .hc-rhs .doc-table,
.legal-page .hc-rhs .doc-grid,
.legal-page .hc-rhs .doc-cta,
.legal-page .hc-rhs .faq{margin-left:0; margin-right:0; max-width:none}
.legal-page .hc-rhs .doc-card{margin-top:24px}
.legal-page .sec-head{margin-bottom:28px}
.legal-page .page-main h2.dsp{
  font-size:clamp(28px,4vw,48px);
  line-height:.9;
  letter-spacing:-.04em;
  margin:0 auto;
}
[data-page="pricing"] #topics h2.dsp{
  font-size:clamp(28px,4vw,48px);
  line-height:.9;
  letter-spacing:-.04em;
  margin:0;
  text-align:left;
}
.legal-page .hc-rhs h2.dsp{margin:0}
/* Document masthead sits in the right column, just under the nav.
   Title and dates are the hero; the summary follows underneath. */
[data-page="policy"] #topics{padding-top:var(--space-6)}
[data-page="policy"] .legal-masthead,
.help-page .hc-topic > .legal-masthead{
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
  margin:0;
  text-align:left;
}
[data-page="privacy"] #privacy, [data-page="security"] #security, [data-page="pricing"] #pricing,
[data-page="help"] #help{
  position:relative;
  z-index:1;
  padding-top:var(--space-20);
  padding-bottom:var(--space-20);
}
[data-page="privacy"] #privacy > .wrap, [data-page="security"] #security > .wrap, [data-page="pricing"] #pricing > .wrap,
[data-page="help"] #help > .wrap{position:relative; z-index:1}
/* The header sits below the nav. Shift the branch up by that clearance
   so the same slice of foliage sits in the corner as on the homepage. */
[data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
[data-page="help"] #help .lt-branch-left{top:calc(-200px - 88px)}
@media (max-width:1600px){
  [data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
  [data-page="help"] #help .lt-branch-left{top:calc(-48px - 88px)}
}
@media (max-width:900px){
  [data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
  [data-page="help"] #help .lt-branch-left{top:calc(-8px - 88px)}
}
@media (max-width:640px){
  [data-page="privacy"] #privacy .lt-branch-left, [data-page="security"] #security .lt-branch-left, [data-page="pricing"] #pricing .lt-branch-left,
  [data-page="help"] #help .lt-branch-left{top:calc(12px - 88px)}
}
[data-page="security"] #topics,
[data-page="pricing"] #topics{
  position:relative;
  z-index:0;
  padding-top:var(--space-20);
  padding-bottom:var(--space-20);
}
[data-page="security"] #topics > .wrap,
[data-page="pricing"] #topics > .wrap{
  display:flex;
  flex-direction:column;
  gap:var(--space-24);
}
[data-page="privacy"] #privacy .legal-masthead__branch, [data-page="security"] #security .legal-masthead__branch, [data-page="pricing"] #pricing .legal-masthead__branch,
[data-page="help"] #help .legal-masthead__branch{
  position:absolute;
  z-index:3;
  right:0;
  bottom:0;
  width:min(38.75vw, 488px);
  height:auto;
  transform:translateY(50%);
  pointer-events:none;
  user-select:none;
}
/* Same spinning rim as the hub: a full cone, clipped to the bottom edge
   so the green/gold segment travels along the line. */
[data-page="privacy"] #privacy .fx-line, [data-page="security"] #security .fx-line, [data-page="pricing"] #pricing .fx-line,
[data-page="help"] #help .fx-line{
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  overflow:hidden;
  pointer-events:none;
  z-index:2;
}
[data-page="privacy"] #privacy .fx-line::before, [data-page="security"] #security .fx-line::before, [data-page="pricing"] #pricing .fx-line::before,
[data-page="help"] #help .fx-line::before{
  content:"";
  position:absolute;
  left:50%; bottom:0;
  width:100%;
  aspect-ratio:1;
  transform:translateX(-50%);
  background:conic-gradient(from var(--fx-glass-angle), var(--halo-stops));
  animation:fx-glass-spin 4.8s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  [data-page="privacy"] #privacy .fx-line::before, [data-page="security"] #security .fx-line::before, [data-page="pricing"] #pricing .fx-line::before,
  [data-page="help"] #help .fx-line::before{animation:none; --fx-glass-angle:40deg}
}
[data-page="privacy"] #privacy .legal-masthead, [data-page="security"] #security .legal-masthead, [data-page="pricing"] #pricing .legal-masthead{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--space-8);
  align-items:center;
  margin:0;
  text-align:left;
}
[data-page="privacy"] #privacy .legal-masthead__copy, [data-page="security"] #security .legal-masthead__copy, [data-page="pricing"] #pricing .legal-masthead__copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-6);
  min-width:0;
}
[data-page="privacy"] #privacy .legal-masthead__art, [data-page="security"] #security .legal-masthead__art, [data-page="pricing"] #pricing .legal-masthead__art{
  position:relative;
  z-index:4;
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}
[data-page="pricing"] #pricing .legal-masthead{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
}
[data-page="pricing"] #pricing .legal-masthead__art{
  flex-direction:column;
  align-items:stretch;
  /* RHS is col-6; inset the card by 1 of 12 columns on each side */
  padding-inline:calc(100% / 6);
}
[data-page="pricing"] #pricing .legal-masthead__art .price{
  width:100%;
  max-width:none;
  margin:0;
}
[data-page="privacy"] #privacy .legal-masthead__art img, [data-page="security"] #security .legal-masthead__art img, [data-page="pricing"] #pricing .legal-masthead__art img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:280px;
}
.help-page .hc-topic > .legal-masthead{
  align-items:flex-start;
  margin-bottom:var(--space-8);
}
/* Contact lives in the topic nav as the pricing follow-up wash,
   in place of the chip. */
.help-page .hc-nav a.hc-nav-banner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:6px;
  width:100%;
  min-height:0;
  margin-top:8px;
  padding:18px 16px 88px;
  border-radius:var(--r-lg);
  overflow:visible;
  white-space:normal;
  text-align:left;
  text-decoration:none;
  color:var(--ink);
  background:
    linear-gradient(120deg,
      var(--wash-lime)  0%,
      var(--green-tint) 45%,
      color-mix(in srgb, var(--green) 45%, transparent) 100%),
    var(--surface);
  border-color:color-mix(in srgb, var(--ink) 6%, transparent);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.72),
    var(--rim-inner),
    var(--elev-panel);
}
.help-page .hc-nav a.hc-nav-banner:hover,
.help-page .hc-nav a.hc-nav-banner:focus-visible{
  color:var(--ink);
  transform:none;
}
.help-page .hc-nav-banner__title,
.help-page .hc-nav-banner__copy{
  display:block;
  width:auto;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.help-page .hc-nav-banner__title{
  font-size:18px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.2;
  color:var(--ink);
}
.help-page .hc-nav-banner__copy{
  font-size:13.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-2);
}
.help-page .hc-nav-banner__art{
  position:absolute;
  z-index:1;
  left:50%;
  bottom:-40px;
  width:min(300px, 100%);
  height:auto;
  transform:translateX(-50%);
  pointer-events:none;
  user-select:none;
}
.help-page .hc-nav{padding-bottom:40px}
.hc-pop{
  width:min(640px, calc(100vw - 32px));
  max-height:min(88svh, 900px);
  margin:auto;
  padding:0;
  border:0;
  background:transparent;
  overflow:visible;
  color:var(--ink);
}
.hc-pop::backdrop{
  background:color-mix(in srgb, var(--ink) 46%, transparent);
}
.hc-pop__panel{
  display:flex;
  flex-direction:column;
  max-height:min(88svh, 900px);
  background:var(--surface);
  border:1px solid var(--glass-rim);
  border-radius:var(--r-lg);
  box-shadow:var(--elev-4);
  overflow:hidden;
}
.hc-pop__head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:20px 20px 0;
}
.hc-pop__head h2{
  margin:0;
  font-size:22px;
  font-weight:600;
  letter-spacing:-.03em;
  line-height:1.2;
}
.hc-pop__head p{
  margin:6px 0 0;
  color:var(--ink-2);
  font-size:15px;
  line-height:1.5;
}
.hc-pop__x{
  margin-left:auto;
  flex:none;
  width:33px;
  height:33px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--ink);
  color:var(--ink-invert);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.hc-pop__x:hover{
  background:var(--cta-hover);
}
.hc-pop__x svg{width:16px; height:16px}
.hc-pop__body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:16px 20px 20px;
}
.hc-pop .hc-form,
.hc-pop .hc-done{
  max-width:none;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
@media(max-width:700px){
  .help-page .hc-nav a.hc-nav-banner{flex:1 0 100%}
}
[data-page="policy"] .legal-masthead + .rule,
.help-page .hc-rhs > .rule{
  margin:var(--space-12) 0;
}
[data-page="policy"] .legal-masthead__title{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-3);
}
[data-page="policy"] .legal-masthead h1.dsp,
[data-page="privacy"] #privacy .legal-masthead h1.dsp, [data-page="security"] #security .legal-masthead h1.dsp,
.help-page .hc-topic > .legal-masthead h2.dsp{
  margin:0;
  max-width:none;
  font-size:clamp(28px,4vw,48px);
  line-height:1.15;
  letter-spacing:-.04em;
  text-align:left;
}
[data-page="policy"] .legal-masthead .sec-sub,
[data-page="privacy"] #privacy .legal-masthead .sec-sub, [data-page="security"] #security .legal-masthead .sec-sub, [data-page="pricing"] #pricing .legal-masthead .sec-sub{
  margin:0;
  max-width:none;
  text-align:left;
}
[data-page="pricing"] #pricing .legal-masthead .save-hl,
[data-page="pricing"] #pricing .sec-head .save-hl{
  background:var(--green);
  color:var(--ink-on-green);
  padding-inline:6px;
  white-space:nowrap;
}
[data-page="privacy"] #privacy .legal-masthead .sec-sub + .sec-sub, [data-page="security"] #security .legal-masthead .sec-sub + .sec-sub, [data-page="pricing"] #pricing .legal-masthead .sec-sub + .sec-sub{
  margin-top:var(--space-3);
}
[data-page="privacy"] #privacy .doc-tabs, [data-page="security"] #security .doc-tabs, [data-page="pricing"] #pricing .doc-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  margin:var(--space-2) 0 0;
}
[data-page="privacy"] #privacy .doc-tabs .btn-line,
[data-page="security"] #security .doc-tabs .btn-line{background:#fff}
.help-page #topics .legal-masthead > p,
.help-page #help .sec-head > p,
.help-page #ask .sec-head > p{
  margin:0;
  width:100%;
  max-width:none;
  text-align:left;
  align-self:stretch;
  font-size:var(--dsp-sub-size);
  line-height:var(--dsp-sub-lh);
  color:var(--ink-2);
}
[data-page="policy"] .legal-masthead .sec-sub.line-reveal .line-reveal__line{
  text-align:left;
}
[data-page="policy"] .legal-masthead__meta{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--space-2) var(--space-6);
  margin:0;
  text-align:left;
}
[data-page="policy"] .legal-masthead__meta div{
  display:flex;
  flex-direction:row;
  align-items:baseline;
  gap:var(--space-2);
}
[data-page="policy"] .legal-masthead__meta dt,
[data-page="policy"] .legal-masthead__meta dd{
  margin:0;
  font-size:13.5px;
  font-weight:600;
}
[data-page="policy"] .legal-masthead__meta dt{color:var(--ink-2)}
[data-page="policy"] .legal-masthead__meta dd{color:var(--ink)}
@media(max-width:700px){
  [data-page="policy"] .legal-masthead__meta div{flex-wrap:wrap}
}
[data-page="security"] .sec-head,
[data-page="pricing"] #topics .sec-head{text-align:left}
[data-page="security"] .eyebrow,
[data-page="pricing"] #topics .eyebrow{justify-content:flex-start}
[data-page="security"] .sec-title,
[data-page="pricing"] #topics .sec-title{
  max-width:none;
  margin-left:0; margin-right:0;
  text-align:left;
}
[data-page="security"] .sec-sub,
[data-page="pricing"] #topics .sec-sub{
  max-width:none;
  margin-left:0; margin-right:0;
  text-align:left;
}
[data-page="security"] .page-main h1.dsp,
[data-page="security"] .page-main h2.dsp,
[data-page="pricing"] #topics h2.dsp{margin-left:0; margin-right:0}
[data-page="privacy"] .sec-sub.line-reveal .line-reveal__line,
[data-page="security"] .sec-title.line-reveal .line-reveal__line,
[data-page="security"] .sec-sub.line-reveal .line-reveal__line,
[data-page="pricing"] #pricing .sec-sub.line-reveal .line-reveal__line,
[data-page="pricing"] #topics .sec-sub.line-reveal .line-reveal__line{text-align:left}
[data-page="security"] .doc-lead{justify-content:flex-start}
[data-page="security"] .doc,
[data-page="security"] .doc-card,
[data-page="security"] .faq,
[data-page="pricing"] #topics .faq{margin-left:0; margin-right:0}
[data-page="security"] #topics .faq,
[data-page="pricing"] #topics .faq{
  max-width:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:var(--space-8);
  border-top:0;
}
[data-page="security"] #topics .faq details,
[data-page="pricing"] #topics .faq details{border-bottom:1px solid var(--line)}
[data-page="security"] #topics .faq details:nth-child(-n+2),
[data-page="pricing"] #topics .faq details:nth-child(-n+2){border-top:1px solid var(--line)}
[data-page="security"] .hc-phone.feat-well{--crop:.8}
[data-page="security"] .doc-split,
[data-page="pricing"] .doc-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  align-items:stretch;
  margin-top:24px;
}
[data-page="security"] .doc-split > .doc-grid,
[data-page="pricing"] .doc-split > .doc-grid{margin-top:0}
[data-page="security"] .doc-split > .doc-card,
[data-page="pricing"] .doc-split > .doc-card{
  margin:0;
  max-width:none;
  min-height:100%;
}
[data-page="pricing"] #included .doc-card{
  position:relative;
  padding:0;
  overflow:hidden;
  container-type:inline-size;
  align-self:start;
  min-height:0;
}
[data-page="pricing"] #included .doc-card img{
  display:block;
  width:100%;
  height:auto;
}
/* Handwritten Zs pop from the sleeping cat's eye and drift up. */
[data-page="pricing"] #included .cat-zzz{
  position:absolute;
  left:74.6%;
  top:74%;
  width:0;
  height:0;
  z-index:2;
  pointer-events:none;
  font-family:var(--font-note);
  font-weight:400;
  font-size:5.1cqw;
  line-height:1;
  color:#111B21;
}
[data-page="pricing"] #included .cat-zzz span{
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
  animation:catZzz 4.2s linear infinite;
}
[data-page="pricing"] #included .cat-zzz span:nth-child(1){
  font-size:.68em; --dx:-6.4cqw; --dy:-16cqw; --tilt:-16deg; --spin:22deg; animation-delay:0s;
}
[data-page="pricing"] #included .cat-zzz span:nth-child(2){
  font-size:1.42em; --dx:-5.4cqw; --dy:-27cqw; --tilt:9deg; --spin:-18deg; animation-delay:.7s;
}
[data-page="pricing"] #included .cat-zzz span:nth-child(3){
  font-size:.5em; --dx:-7.2cqw; --dy:-13cqw; --tilt:18deg; --spin:14deg; animation-delay:1.4s;
}
[data-page="pricing"] #included .cat-zzz span:nth-child(4){
  font-size:1.05em; --dx:-5.8cqw; --dy:-22cqw; --tilt:-8deg; --spin:16deg; animation-delay:2.1s;
}
[data-page="pricing"] #included .cat-zzz span:nth-child(5){
  font-size:1.72em; --dx:-6.6cqw; --dy:-34cqw; --tilt:12deg; --spin:-24deg; animation-delay:2.8s;
}
[data-page="pricing"] #included .cat-zzz span:nth-child(6){
  font-size:.82em; --dx:-5cqw; --dy:-19cqw; --tilt:-20deg; --spin:18deg; animation-delay:3.5s;
}
@keyframes catZzz{
  0%{
    opacity:0;
    transform:translate(-50%,-70%) translate(0,3px) rotate(var(--tilt)) scale(.12);
  }
  7%{
    opacity:.5;
    transform:translate(-50%,-70%) translate(calc(var(--dx) * .32), -6px) rotate(calc(var(--tilt) + var(--spin) * .2)) scale(1.28);
  }
  12%{
    opacity:.5;
    transform:translate(-50%,-70%) translate(calc(var(--dx) * .5), -14px) rotate(calc(var(--tilt) + var(--spin) * .32)) scale(.92);
  }
  18%{
    opacity:.5;
    transform:translate(-50%,-70%) translate(calc(var(--dx) * .62), calc(var(--dy) * .22)) rotate(calc(var(--tilt) + var(--spin) * .42)) scale(1.04);
  }
  58%{
    opacity:.4;
  }
  100%{
    opacity:0;
    transform:translate(-50%,-70%) translate(var(--dx), var(--dy)) rotate(calc(var(--tilt) + var(--spin))) scale(.84);
  }
}
@media (prefers-reduced-motion:reduce){
  [data-page="pricing"] #included .cat-zzz{display:none}
}
[data-page="pricing"] #included .doc-split{
  align-items:stretch;
  grid-template-rows:auto auto;
}
[data-page="pricing"] #included .doc-split > .doc-grid{
  align-self:stretch;
  grid-column:1;
  grid-template-columns:1fr 1fr;
}
[data-page="pricing"] #included .doc-split > .doc-grid:first-child{
  grid-row:1;
  grid-template-rows:1fr 1fr;
}
[data-page="pricing"] #included .doc-split > .doc-grid:nth-child(2){
  grid-row:2;
  grid-template-rows:1fr;
}
[data-page="pricing"] #included .doc-card{
  grid-column:2;
  grid-row:1;
  align-self:stretch;
  display:grid;
  aspect-ratio:1402 / 1122;
}
[data-page="pricing"] #included .doc-card img{
  width:100%;
  height:100%;
  grid-area:1 / 1;
  align-self:stretch;
  object-fit:cover;
  object-position:center 42%;
}
[data-page="pricing"] #included .doc-split > .is-escalate{
  grid-column:2;
  grid-row:2;
  align-self:stretch;
  position:relative;
  min-height:188px;
  margin:0;
}
@property --fu-h-p{
  syntax:"<number>";
  inherits:true;
  initial-value:0;
}
.card.is-escalate{
  background:
    linear-gradient(120deg,
      var(--wash-lime)  0%,
      var(--green-tint) 45%,
      color-mix(in srgb, var(--green) 45%, transparent) 100%),
    var(--surface);
  border-color:color-mix(in srgb, var(--ink) 6%, transparent);
  /* Same hairline as the top rim, carried around the left edge. */
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.72),
    var(--rim-inner),
    var(--elev-panel);
}
.card.is-escalate:hover{
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,.95),
    var(--elev-5);
}
.card.is-escalate::before,
.card.is-escalate::after{opacity:0}
.card.is-escalate .fu-step{color:var(--ink)}
.card.is-escalate .fu-step.is-chat{--step:var(--green-ink)}
[data-page="pricing"] #included .fu-lines{
  display:flex;
  flex-direction:column;
  gap:6px;
}
[data-page="pricing"] #included .fu-lines > *{
  margin:0;
  padding:0;
}
[data-page="pricing"] #included .fu-lines h3{
  font-size:17px;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1.25;
  color:var(--ink);
}
[data-page="pricing"] #included .fu-lines p{
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  letter-spacing:0;
  color:var(--ink-2);
}
[data-page="pricing"] #included .fu-h{
  --fu-h-p:0;
  position:absolute;
  left:24px;
  right:24px;
  top:50%;
  transform:translateY(-5px);
  animation:fuHFill 9.6s linear infinite;
}
@keyframes fuHFill{
  0%{--fu-h-p:0}
  30%{--fu-h-p:.5}
  60%{--fu-h-p:1}
  92%{--fu-h-p:1}
  92.2%,100%{--fu-h-p:0}
}
[data-page="pricing"] #included .fu-h-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  position:relative;
  z-index:2;
}
[data-page="pricing"] #included .fu-h-steps li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  min-width:0;
  opacity:.42;
}
[data-page="pricing"] #included .fu-h-steps li:nth-child(1){animation:fuHOn1 9.6s linear infinite}
[data-page="pricing"] #included .fu-h-steps li:nth-child(2){animation:fuHOn2 9.6s linear infinite}
[data-page="pricing"] #included .fu-h-steps li:nth-child(3){animation:fuHOn3 9.6s linear infinite}
@keyframes fuHOn1{
  0%,29%{opacity:1}
  30%,100%{opacity:.42}
}
@keyframes fuHOn2{
  0%,29%{opacity:.42}
  30%,59%{opacity:1}
  60%,100%{opacity:.42}
}
@keyframes fuHOn3{
  0%,59%{opacity:.42}
  60%,92%{opacity:1}
  92.2%,100%{opacity:.42}
}
[data-page="pricing"] #included .fu-h-copy{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
[data-page="pricing"] #included .fu-h-copy b{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.2;
  color:var(--ink);
}
[data-page="pricing"] #included .fu-h-copy em{
  font-style:normal;
  font-size:12.5px;
  font-weight:500;
  line-height:1.25;
  color:var(--ink-2);
}
[data-page="pricing"] #included .fu-h-dot{
  width:48px;
  height:48px;
  border-radius:var(--r-full);
  background:#fff;
  border:2px solid var(--green);
  box-shadow:0 0 0 3px #fff;
  position:relative;
  z-index:1;
  flex:none;
  display:grid;
  place-items:center;
  color:var(--green-ink);
}
[data-page="pricing"] #included .fu-h-dot svg{
  width:26px;
  height:26px;
}
[data-page="pricing"] #included .fu-h-dot[data-ch="wa"] svg{fill:currentColor; stroke:none}
[data-page="pricing"] #included .fu-h-dot[data-ch="sms"]{
  border-color:var(--info);
  color:var(--info-ink);
}
[data-page="pricing"] #included .fu-h-dot[data-ch="call"]{
  border-color:var(--crit);
  color:var(--crit-ink);
}
[data-page="pricing"] #included .fu-h-dot[data-ch="sms"] svg,
[data-page="pricing"] #included .fu-h-dot[data-ch="call"] svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
[data-page="pricing"] #included .fu-h-steps li:nth-child(1) .fu-h-dot{animation:fuHDot1 9.6s linear infinite}
[data-page="pricing"] #included .fu-h-steps li:nth-child(2) .fu-h-dot{animation:fuHDot2 9.6s linear infinite}
[data-page="pricing"] #included .fu-h-steps li:nth-child(3) .fu-h-dot{animation:fuHDot3 9.6s linear infinite}
@keyframes fuHDot1{
  0%,29%{background:var(--green); color:#fff; box-shadow:0 0 0 3px #fff, 0 0 10px 4px rgba(var(--green-rgb),.5)}
  30%,100%{background:#fff; color:var(--green-ink); box-shadow:0 0 0 3px #fff}
}
@keyframes fuHDot2{
  0%,29%{background:#fff; color:var(--info-ink); box-shadow:0 0 0 3px #fff}
  30%,59%{background:var(--info); color:#fff; box-shadow:0 0 0 3px #fff, 0 0 10px 4px color-mix(in srgb, var(--info) 50%, transparent)}
  60%,100%{background:#fff; color:var(--info-ink); box-shadow:0 0 0 3px #fff}
}
@keyframes fuHDot3{
  0%,59%{background:#fff; color:var(--crit-ink); box-shadow:0 0 0 3px #fff}
  60%,92%{background:var(--crit); color:#fff; box-shadow:0 0 0 3px #fff, 0 0 10px 4px color-mix(in srgb, var(--crit) 50%, transparent)}
  92.2%,100%{background:#fff; color:var(--crit-ink); box-shadow:0 0 0 3px #fff}
}
[data-page="pricing"] #included .fu-h-rail{
  --fu-hole:27px;
  position:absolute;
  z-index:0;
  left:calc(100% / 6);
  right:calc(100% / 6);
  top:0;
  height:48px;
  pointer-events:none;
  -webkit-mask-image:
    radial-gradient(circle at 0 50%, transparent var(--fu-hole), #000 calc(var(--fu-hole) + .6px)),
    radial-gradient(circle at 50% 50%, transparent var(--fu-hole), #000 calc(var(--fu-hole) + .6px)),
    radial-gradient(circle at 100% 50%, transparent var(--fu-hole), #000 calc(var(--fu-hole) + .6px));
  mask-image:
    radial-gradient(circle at 0 50%, transparent var(--fu-hole), #000 calc(var(--fu-hole) + .6px)),
    radial-gradient(circle at 50% 50%, transparent var(--fu-hole), #000 calc(var(--fu-hole) + .6px)),
    radial-gradient(circle at 100% 50%, transparent var(--fu-hole), #000 calc(var(--fu-hole) + .6px));
  -webkit-mask-composite:source-in, source-in;
  mask-composite:intersect, intersect;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
[data-page="pricing"] #included .fu-h-track,
[data-page="pricing"] #included .fu-h-fill{
  position:absolute;
  left:0;
  top:50%;
  height:2px;
  transform:translateY(-50%);
}
[data-page="pricing"] #included .fu-h-track{
  right:0;
  background-image:repeating-linear-gradient(
    to right,
    #9AA8A0 0 2.2px,
    transparent 2.2px 5.6px
  );
  background-size:5.6px 100%;
  opacity:.7;
  animation:fuHDash 1.4s linear infinite;
}
[data-page="pricing"] #included .fu-h-fill{
  width:calc(100% * var(--fu-h-p));
  border-radius:2px;
  background:linear-gradient(
    to right,
    var(--rail-fill-from) 0%,
    color-mix(in srgb, var(--green) 40%, var(--rail-fill-from)) 48%,
    var(--green) 100%
  );
}
@keyframes fuHDash{to{background-position:28px 0}}
@media (prefers-reduced-motion:reduce){
  [data-page="pricing"] #included .fu-lines > *{animation:none; opacity:1}
  [data-page="pricing"] #included .fu-lines{display:flex; flex-direction:column; gap:6px}
  [data-page="pricing"] #included .fu-lines > *{grid-area:auto}
  [data-page="pricing"] #included .fu-h,
  [data-page="pricing"] #included .fu-h-track,
  [data-page="pricing"] #included .fu-h-steps li,
  [data-page="pricing"] #included .fu-h-dot{animation:none}
  [data-page="pricing"] #included .fu-h{--fu-h-p:1}
  [data-page="pricing"] #included .fu-h-steps li{opacity:1}
  [data-page="pricing"] #included .fu-h-dot{
    color:#fff;
    box-shadow:0 0 0 3px #fff;
  }
  [data-page="pricing"] #included .fu-h-dot[data-ch="wa"]{background:var(--green)}
  [data-page="pricing"] #included .fu-h-dot[data-ch="sms"]{background:var(--info)}
  [data-page="pricing"] #included .fu-h-dot[data-ch="call"]{background:var(--crit)}
}
[data-page="security"] .doc-grid.one{grid-template-columns:1fr}
[data-page="security"] .hc-phones{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-4);
  align-items:start;
  margin-top:8px;
}
[data-page="security"] .hc-phone-col .doc{max-width:none; margin:0}
[data-page="security"] .hc-phone-col .doc h3{margin-top:0}
[data-page="security"] .hc-phone-col .hc-phone{margin-top:8px}
/* Below the hero, each topic stacks: copy on the first row,
   boxes and the rest on the rows under it. */
[data-page="security"] #topics,
[data-page="pricing"] #topics{text-align:left}
[data-page="security"] #topics .hc-topic,
[data-page="pricing"] #topics .hc-topic{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  row-gap:var(--space-8);
  align-items:start;
  padding-top:0;
  padding-bottom:0;
}
[data-page="security"] #topics .hc-topic > *,
[data-page="pricing"] #topics .hc-topic > *{min-width:0; margin-top:0}
[data-page="security"] #topics .hc-topic > .sec-head,
[data-page="pricing"] #topics .hc-topic > .sec-head{margin-bottom:0}
[data-page="security"] #topics .sec-sub{max-width:56ch}
[data-page="pricing"] #topics .sec-head,
[data-page="pricing"] #topics .sec-title,
[data-page="pricing"] #topics .sec-sub,
[data-page="pricing"] #subscribe .sec-head,
[data-page="pricing"] #subscribe .sec-title,
[data-page="pricing"] #subscribe .sec-sub{
  text-align:left;
  margin-left:0;
  margin-right:0;
}
[data-page="pricing"] #topics .sec-sub,
[data-page="pricing"] #subscribe .sec-sub{max-width:none}
[data-page="pricing"] #topics .sec-title.line-reveal .line-reveal__line,
[data-page="pricing"] #topics .sec-sub.line-reveal .line-reveal__line,
[data-page="pricing"] #subscribe .sec-title.line-reveal .line-reveal__line,
[data-page="pricing"] #subscribe .sec-sub.line-reveal .line-reveal__line{text-align:left}
[data-page="security"] #topics .doc-card,
[data-page="security"] #topics .doc-table{max-width:none}
@media(max-width:900px){
  [data-page="security"] .doc-split,
  [data-page="pricing"] .doc-split,
  [data-page="privacy"] #privacy .legal-masthead, [data-page="security"] #security .legal-masthead, [data-page="pricing"] #pricing .legal-masthead{grid-template-columns:1fr}
  [data-page="pricing"] #included .doc-split{grid-template-rows:none}
  [data-page="pricing"] #included .doc-split > .doc-grid,
  [data-page="pricing"] #included .doc-card,
  [data-page="pricing"] #included .doc-split > .is-escalate{
    grid-column:auto;
    grid-row:auto;
  }
  [data-page="pricing"] #included .doc-split > .doc-grid{grid-template-rows:none; height:auto}
  [data-page="pricing"] #included .doc-card{display:block; aspect-ratio:auto}
  [data-page="pricing"] #included .doc-card img{
    height:auto;
    object-fit:fill;
    grid-area:auto;
  }
  [data-page="pricing"] #pricing .legal-masthead__art{padding-inline:0}
  [data-page="pricing"] #pricing .legal-masthead__art .price{max-width:440px; margin-inline:auto}
  [data-page="privacy"] #privacy .legal-masthead__art img, [data-page="security"] #security .legal-masthead__art img, [data-page="pricing"] #pricing .legal-masthead__art img{max-height:180px}
  [data-page="privacy"] #privacy, [data-page="security"] #security, [data-page="pricing"] #pricing,
  [data-page="security"] #topics,
  [data-page="pricing"] #topics,
  [data-page="help"] #help{
    padding-top:var(--space-12);
    padding-bottom:var(--space-12);
  }
  [data-page="security"] #topics > .wrap,
  [data-page="pricing"] #topics > .wrap{gap:var(--space-20)}
  .help-page .hc-rhs > .rule{transform:translateY(calc(var(--space-20) / 2))}
  .help-page .hc-rhs > .hc-topic ~ .hc-topic{margin-top:var(--space-20)}
  .help-page .hc-nav{margin-top:var(--space-12)}
  .help-page .hc-rhs{padding-top:var(--space-12)}
  .help-page #ask{margin-top:var(--space-20)}
  .help-page .hc-art + .hc-art{margin-top:var(--space-20)}
}
@media(max-width:700px){
  .help-page[data-page="help"] #topics{position:relative; z-index:2}
  .help-page .hc-nav{
    position:sticky;
    top:76px;
    z-index:40;
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:stretch;
    gap:0;
    margin-top:0;
    padding:0;
    max-height:none;
    overflow:visible;
  }
  .help-page .hc-nav-pill{display:none}
  .help-page .hc-nav .hc-jump{
    display:flex;
    align-items:center;
    justify-content:space-between;
    align-self:stretch;
    width:100%;
    min-height:48px;
    padding:0 16px 0 18px;
    border:1px solid var(--line);
    border-radius:var(--r-pill);
    background:var(--white);
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    box-shadow:0 8px 20px -12px var(--glass-shadow);
  }
  .help-page .hc-nav .hc-jump__label{
    display:block;
    flex:1 1 auto;
    min-width:0;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:inherit;
    font:inherit;
    font-weight:600;
    text-align:left;
  }
  .help-page .hc-nav .hc-jump svg{
    width:18px;
    height:18px;
    flex:none;
    color:var(--ico-pencil);
    transition:transform var(--t2) var(--e-out);
  }
  .help-page .hc-nav.is-open .hc-jump svg{transform:rotate(180deg)}
  .help-page .hc-jump-menu{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    z-index:2;
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    max-height:min(70vh, 420px);
    overflow:auto;
    padding:8px;
    border-radius:24px;
    background:rgba(255,255,255,.94);
    backdrop-filter:var(--glass-nav);
    -webkit-backdrop-filter:var(--glass-nav);
    box-shadow:
      0 24px 48px -20px var(--glass-shadow),
      0 8px 20px -12px var(--glass-shadow),
      inset 0 0 0 1px var(--glass-rim-faint);
  }
  .help-page .hc-nav.is-open .hc-jump-menu{display:flex}
  .help-page .hc-jump-menu a{
    width:100%;
    justify-content:flex-start;
    border:0;
    border-radius:16px;
    background:transparent;
    box-shadow:none;
  }
  .help-page .hc-nav .hc-jump-menu a.is-on{
    background:var(--green);
    border-color:transparent;
    box-shadow:none;
    color:var(--ink-on-green);
    font-weight:600;
  }
  .help-page .hc-jump-menu a.hc-nav-banner{
    flex-direction:row;
    align-items:center;
    width:100%;
    min-height:44px;
    margin:4px 0 0;
    padding:9px 15px;
    border:0;
    border-top:1px solid var(--line);
    border-radius:16px;
    background:transparent;
    box-shadow:none;
    overflow:hidden;
    white-space:nowrap;
  }
  .help-page .hc-jump-menu .hc-nav-banner__copy,
  .help-page .hc-jump-menu .hc-nav-banner__art{display:none}
  .help-page .hc-jump-menu .hc-nav-banner__title{
    font-size:13.5px;
    font-weight:600;
    letter-spacing:-.01em;
    line-height:1.2;
  }
  .help-page .hc-topic,
  .help-page .hc-art,
  .help-page #ask{scroll-margin-top:148px}
}
@media(max-width:700px){
  [data-page="security"] .hc-phones,
  [data-page="security"] #topics .doc-grid,
  [data-page="security"] #topics .doc-cta,
  [data-page="security"] #topics .faq,
  [data-page="pricing"] #topics .faq{grid-template-columns:1fr}
  [data-page="security"] #topics .faq details:nth-child(-n+2),
  [data-page="pricing"] #topics .faq details:nth-child(-n+2){border-top:0}
  [data-page="security"] #topics .faq details:first-child,
  [data-page="pricing"] #topics .faq details:first-child{border-top:1px solid var(--line)}
}
.doc{max-width:760px; margin:0 auto}
.doc h2,
.help-page #ask h2{
  font-size:22px; font-weight:700; letter-spacing:-.03em;
  color:var(--ink); margin:0 0 12px; line-height:1.25;
}
.doc h3{
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); margin:22px 0 8px;
}
.doc p, .doc li{
  font-size:16px; line-height:1.65; color:var(--ink-2);
}
/* A .doc set to a body size hands that size down to its paragraphs and list
   items. This was scoped to [data-page="policy"], so it silently did nothing
   on every other doc page — the escape hatch worked by accident of one
   attribute value. De-scoped: the policy page already matched, so nothing
   changes there, and it now works wherever .doc.body-m is used. */
.doc.lede p,    .doc.lede li,
.doc.body-l p,  .doc.body-l li,
.doc.body p,    .doc.body li,
.doc.body-sm p, .doc.body-sm li,
.doc.body-m p,  .doc.body-m li,
.doc.caption p, .doc.caption li{
  font-size:inherit;
  line-height:inherit;
}
.doc p{margin:0 0 14px}
.doc p:last-child, .doc ul:last-child, .doc ol:last-child{margin-bottom:0}
.doc a{color:var(--green-ink); font-weight:600; text-decoration:none}
.doc a:hover, .doc a:focus-visible{text-decoration:underline}
.doc ul, .doc ol{margin:0 0 16px; padding:0 0 0 1.15em}
.doc li+li{margin-top:6px}
.doc-meta{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin-top:18px; font-size:13.5px; font-weight:600; color:var(--ink-2);
}
.doc-jump.chips{margin-top:28px}
.doc-jump a{
  color:inherit; text-decoration:none;
}
.doc-jump a:hover, .doc-jump a:focus-visible{
  color:var(--green-ink);
  border-color:color-mix(in srgb, var(--green) 40%, var(--line));
}
.doc-lead{
  display:flex; gap:var(--space-3); justify-content:center; flex-wrap:wrap;
  margin-top:22px;
}
.doc-lead a{
  color:var(--green-ink); font-weight:600; text-decoration:none;
  min-height:44px; display:inline-flex; align-items:center;
}
.doc-lead a:hover, .doc-lead a:focus-visible{text-decoration:underline}
.doc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-top:24px;
}
.doc-grid.two{grid-template-columns:1fr 1fr}
.doc-grid .tc{margin:0}
.doc-grid .tc p:not(.doc-k){padding-bottom:0}
.doc-grid .sm-ico{margin-bottom:14px}
/* Info card. Same shell on Pricing, Privacy, Security, Privacy Policy, and the homepage FAQ.
   Only the well tone changes. .doc-k chips stay on the deletion cards. */
[data-page="pricing"] #included .doc-grid .tc h3,
[data-page="privacy"] .doc-grid .tc h3,
[data-page="security"] .doc-grid .tc h3,
[data-page="security"] .doc-cta .tc h3,
[data-page="policy"] .doc-cta .tc h3{
  margin:0; font-weight:600; line-height:1.3;
}
[data-page="pricing"] #included .doc-grid .tc p,
[data-page="privacy"] .doc-grid .tc p,
[data-page="security"] .doc-grid .tc p:not(.doc-k),
[data-page="security"] .doc-cta .tc p,
[data-page="policy"] .doc-cta .tc p{
  margin:8px 0 0; padding:0; font-size:15px; line-height:1.65;
}
[data-page="pricing"] #included .doc-grid .sm-ico,
[data-page="privacy"] .doc-grid .sm-ico,
[data-page="security"] .doc-grid .sm-ico,
[data-page="policy"] .doc-cta .sm-ico{
  width:36px; height:36px; margin:0 0 12px;
  border-radius:var(--r-sm); border:0;
}
[data-page="pricing"] #included .doc-grid .sm-ico svg,
[data-page="privacy"] .doc-grid .sm-ico svg,
[data-page="security"] .doc-grid .sm-ico svg,
[data-page="policy"] .doc-cta .sm-ico svg{width:18px; height:18px}
[data-page="pricing"] #included .tone-ok,
[data-page="privacy"] .tone-ok,
[data-page="security"] .tone-ok,
[data-page="policy"] .tone-ok,
.faq-card-ico.tone-ok{background:var(--ok-tint); color:var(--green-ink)}
[data-page="pricing"] #included .tone-work,
[data-page="privacy"] .tone-work,
[data-page="security"] .tone-work,
[data-page="policy"] .tone-work,
.faq-card-ico.tone-work{background:var(--cat-work-tint); color:var(--cat-work-ink)}
[data-page="pricing"] #included .tone-warn,
[data-page="privacy"] .tone-warn,
[data-page="security"] .tone-warn,
[data-page="policy"] .tone-warn,
.faq-card-ico.tone-warn{background:var(--warn-tint); color:var(--warn)}
[data-page="pricing"] #included .tone-info,
[data-page="privacy"] .tone-info,
[data-page="security"] .tone-info,
[data-page="policy"] .tone-info,
.faq-card-ico.tone-info{background:var(--info-tint); color:var(--info-ink)}
[data-page="pricing"] #included .tone-quiet,
[data-page="privacy"] .tone-quiet,
[data-page="security"] .tone-quiet,
[data-page="policy"] .tone-quiet,
.faq-card-ico.tone-quiet{background:var(--canvas-2); color:var(--ink-2)}
[data-page="pricing"] #included .tone-crit,
[data-page="privacy"] .tone-crit,
[data-page="security"] .tone-crit,
[data-page="policy"] .tone-crit,
.faq-card-ico.tone-crit{background:var(--crit-tint); color:var(--crit)}
.doc-card{
  --r:16px; --r-pad:22px;
  padding:var(--r-pad);
  border-radius:var(--r-outer);
  background:color-mix(in srgb,var(--card) 64%, transparent);
  border:1px solid var(--glass-rim);
  box-shadow:var(--rim-top-soft), var(--elev-panel);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
}
.doc-card + .doc-card{margin-top:16px}
.doc-card h3{
  font-size:17px; font-weight:700; letter-spacing:-.02em;
  color:var(--ink); margin:0 0 8px;
}
.doc-k{
  display:block; width:100%; margin:14px 0 0;
  padding:12px 14px; border-radius:var(--r-xs);
  background:var(--ink);
  box-shadow:inset 0 1px 0 var(--glass-rim-dark);
  font-family:var(--font-mono); font-size:13px; font-weight:500;
  line-height:1.55; letter-spacing:-.01em;
  color:var(--ink-invert);
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.doc-k code{
  font:inherit; color:inherit; background:none; padding:0;
}
.doc-note{
  --r:12px; --r-pad:16px;
  padding:var(--r-pad);
  border-radius:var(--r-outer);
  background:color-mix(in srgb, var(--green-lite) 70%, var(--card));
  border:1px solid var(--glass-rim-hi);
  margin:16px 0 0;
}
.doc-note.warn{
  background:color-mix(in srgb, #FFF4D6 78%, var(--card));
}
.doc-note p{margin:0; font-size:15px}
.doc-table{
  --r:12px; --r-pad:0px;
  overflow:hidden;
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--card) 64%, transparent);
  border:1px solid var(--glass-rim);
  box-shadow:var(--rim-top-soft), var(--elev-panel);
}
.doc-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:var(--space-4); align-items:baseline;
  padding:14px 20px;
  border-bottom:1px solid rgba(214,206,196,.45);
}
.doc-row:last-child{border-bottom:0}
.doc-row b{font-size:14px; color:var(--ink); font-weight:700}
.doc-row span, .doc-row code{
  font-family:var(--font-mono); font-size:13.5px;
  color:var(--ink-2); font-weight:500;
}
.doc-cta{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:8px;
}
.doc-cta a.tc{text-decoration:none; color:inherit}
.doc-cta .hc-go{margin-top:auto}
.doc-num{
  display:block; margin-bottom:8px;
  font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--green-ink);
}
.doc-sec{margin:0 0 36px; scroll-margin-top:108px}
.doc-sec:last-child{margin-bottom:0}
.legal-page .faq{margin-top:8px}
.legal-page .faq details{scroll-margin-top:108px}
@media(max-width:900px){
  .doc-grid, .doc-grid.two, .doc-cta{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .doc-grid, .doc-grid.two, .doc-cta, .doc-row{grid-template-columns:1fr}
  [data-page="pricing"] #included .doc-split > .doc-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    height:auto;
  }
  [data-page="pricing"] #included .doc-split > .is-escalate{min-height:248px}
  .doc-row{gap:var(--space-1); padding:12px 16px}
}

/* ============================================================ FAQ */
.faq{max-width:760px; margin:0 auto; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex; align-items:center; gap:18px; cursor:pointer; list-style:none;
  padding:19px 0; min-height:44px; font-size:17px; font-weight:600; letter-spacing:-.02em;
  transition:color var(--t2) var(--e-io)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--green-ink)}
.faq summary > svg{width:13px; height:13px; margin-left:auto; flex:none; fill:none;
  stroke:currentColor; stroke-width:2; stroke-linecap:round;
  transition:transform var(--t3) var(--e-out)}
.faq details[open] summary{color:var(--green-ink)}
.faq details[open] summary > svg{transform:rotate(45deg)}
.faq p{padding:0 40px 22px 0; font-size:15px; line-height:1.65; color:var(--ink-2)}
/* An answer grows and collapses instead of snapping. A grid track is the
   only thing that interpolates to a content-derived height, so the answer
   sits in a one-row grid running 0fr to 1fr.
   Two things make this actually animate. The clipping row carries no
   padding of its own — padding cannot be squeezed below its own size, and
   a padded row stayed 22px tall when shut — so the spacing lives on the
   .fq-body inside it. And both halves are driven by .is-shut rather than
   by [open] alone: a closed <details> does not render its content, so an
   open would transition from nothing and snap, and a close would drop the
   content on the first frame. JS opens it shut, then releases.
   With JS off, [open] alone still opens it — the answer is never lost. */
.faq .fq-in{
  display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows 420ms var(--e-out), opacity 240ms var(--e-io);
}
.faq .fq-body{overflow:hidden; min-height:0}
.faq .fq-in p{padding:0 40px 22px 0}
.faq details[open] .fq-in{grid-template-rows:1fr; opacity:1}
.faq details[open].is-shut .fq-in{grid-template-rows:0fr; opacity:0}
@media (prefers-reduced-motion:reduce){ .faq .fq-in{transition:none} }

/* FAQ marquee — always-open Q&A cards, two rows, slow loop.
   Row 1 travels left → right; row 2 travels right → left.
   Two identical tracks, each moving -50%, close the loop. */
.faq-mq{
  overflow:hidden;
  margin-top:16px;
  padding:12px 0 28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.faq-mq-row{
  display:flex; width:max-content; will-change:transform;
  animation:faq-mq-x 100s linear infinite;
  animation-play-state:paused;
}
.faq-mq-row + .faq-mq-row{margin-top:16px}
.faq-mq-row.is-ltr{animation-direction:reverse}
.faq-mq-row:nth-child(1){animation-duration:100s}
.faq-mq-row:nth-child(2){animation-duration:118s}
.faq-mq.is-ready .faq-mq-row{animation-play-state:running}
.faq-mq.is-ready:hover .faq-mq-row,
.faq-mq.is-ready:focus-within .faq-mq-row,
.faq-mq.is-ready.is-paused .faq-mq-row{animation-play-state:paused}
@keyframes faq-mq-x{to{transform:translateX(-50%)}}
.faq-mq-track{
  display:flex; flex:none; gap:var(--space-4); padding-right:16px;
  align-items:stretch;
}
.faq-card{
  flex:none; width:min(520px,88vw);
  padding:24px;
}
.faq-card-ico{
  display:grid; place-items:center;
  width:36px; height:36px; margin:0 0 12px;
  border-radius:var(--r-sm);
}
.faq-card-ico svg{width:18px; height:18px}
.faq-card h3{
  margin:0; font-size:17px; font-weight:600;
  letter-spacing:-.02em; line-height:1.3; color:var(--ink);
}
.faq-card p{
  margin:8px 0 0; font-size:15px; line-height:1.65; color:var(--ink-2);
}
/* Homepage FAQ — the existing split, info card, and disclosure,
   sat side by side. No new surface: each question is a .faq-card. */
#faq .split{
  align-items:start;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:var(--space-4);
}
@media(max-width:900px){
  #faq .split{grid-template-columns:1fr}
}
#faq .faq{
  max-width:none; margin:0; border-top:0;
  display:flex; flex-direction:column; gap:var(--space-3);
}
#faq .faq details{border-bottom:0}
#faq .faq details.faq-card{width:100%; max-width:none}
#faq .split > .faq-card{width:100%}
#faq .split > .faq-card h3{font-size:22px}
#faq .split > .faq-card .faq-help-art{
  display:block;
  width:calc(100% + 48px);
  max-width:none;
  height:auto;
  margin:-8% -24px -24px;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  pointer-events:none;
}
#faq .faq summary{padding:0}
#faq .faq summary .faq-card-ico{margin:0}
#faq .faq .fq-in p{padding:0 0 0 calc(36px + 18px)}
#faq .note{margin-top:12px}

#faq .faq-tabs{
  --r: var(--r-sm);
  --r-pad: 12px;
  display:flex; flex-direction:column; gap:2px;
  margin:calc(var(--r-pad) * -1) calc(var(--r-pad) * -1) 16px;
  padding:8px 8px 12px;
  border-bottom:1px solid var(--line);
}
#faq .faq-tab{
  display:flex; align-items:center; gap:12px;
  width:100%; min-height:44px; padding:6px 10px 6px 6px;
  border:0; border-radius:var(--r);
  background:transparent;
  color:var(--ink); font-size:15px; font-weight:600; letter-spacing:-.02em;
  text-align:left; cursor:pointer;
}
#faq .faq-tab .faq-card-ico{margin:0; flex:none}
#faq .faq-tab small{
  margin-left:auto; font-size:12px; font-weight:600; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
#faq .faq-tab[aria-selected="true"]{
  background:var(--ok-tint);
  color:var(--green-ink);
}
#faq .faq-tab[aria-selected="true"] small{color:var(--green-ink)}
#faq .faq-tab:hover{background:color-mix(in srgb, var(--ok-tint) 55%, transparent)}
#faq .faq-tab[aria-selected="true"]:hover{background:var(--ok-tint)}
#faq .faq[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
  .faq-mq{
    -webkit-mask-image:none; mask-image:none; overflow:visible;
    padding:0 var(--gut);
  }
  .faq-mq-row{
    animation:none; width:auto; flex-wrap:wrap; justify-content:center;
    will-change:auto;
  }
  .faq-mq-track{flex-wrap:wrap; justify-content:center; padding-right:0}
  .faq-mq-track + .faq-mq-track,
  .faq-mq-dup{display:none}
}

/* ============================================================
   MARQUEE + FOOTER — the reveal panel.

   The dark band and the footer are pinned to the bottom of the viewport
   and the rest of the page scrolls off them, so the band is uncovered
   instead of arriving. A spacer the panel's own height keeps the document
   long enough to finish the move.

   Everything is plain flow until JS adds `js-under`, and JS only adds it
   when the panel actually fits the viewport — a panel taller than the
   screen, pinned, would strand its own bottom out of reach.
   ============================================================ */
html.js-under .under{
  position:fixed; inset:auto 0 0 0; z-index:0;
  /* a full screen, so the last thing the visitor sees is one dark card and
     not a strip of it under a leftover band of paper */
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
}
html.js-under .under-spacer{height:var(--under-h,0px)}
/* the marquee's edge mask fades its own background as well as its words,
   so the panel carries the dark ground underneath it — otherwise the
   page's beige flared through at both ends of the strip */
.under{background:#0A0A0A; position:relative; z-index:2}
/* Page content above the fixed FX. Transparent so the gradient still
   reads through light sections; the dark marquee/footer is opaque. */
main{position:relative; z-index:2}
html.js-under main{position:relative; z-index:2; background:transparent}

/* Pinned, the pair is one screen rather than two sections, so it is set to
   be one: the footer's link columns run as rows. Same links, same 44px
   targets — which is the difference between the reveal engaging on a
   laptop and quietly never running. */
/* `js-under-probe` is the same compact set without the pinning, so the fit
   can be measured on the layout that would actually be pinned — stretched
   to a full screen, the panel cannot measure itself. */
html.js-under .mq.band-dark,html.js-under-probe .mq.band-dark{padding:7px 0}
html.js-under .mq.band-dark .mq-line,html.js-under-probe .mq.band-dark .mq-line{
  font-size:clamp(19px,2.2vw,30px);
}
html.js-under footer,html.js-under-probe footer{padding:20px 0 14px}
html.js-under .fgrid,html.js-under-probe .fgrid{grid-template-columns:1.5fr auto auto auto; gap:18px 34px}
html.js-under .fgrid nav,html.js-under-probe .fgrid nav{flex-direction:row; flex-wrap:wrap; gap:0 10px}
/* laid out in a row, a short link like FAQ shrank to 28px wide — still 44
   tall, but no longer a 44 target */
html.js-under .fgrid nav a,html.js-under-probe .fgrid nav a{
  min-width:44px; padding-inline:5px; justify-content:center;
}
html.js-under .fbot,html.js-under-probe .fbot{margin-top:18px; padding-top:14px}
@media(max-width:1080px){
  html.js-under .fgrid,html.js-under-probe .fgrid{grid-template-columns:1fr 1fr}
}
footer{border-top:1px solid var(--line); padding:44px 0 34px}
.fgrid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-8)}
.f-brand{display:flex; flex-direction:column; align-items:flex-start; min-width:0}
.f-mascot{display:block; width:120px; height:auto; margin-top:auto; padding-top:18px}
.fgrid h4{font-family:var(--font-mono); font-size:10px; letter-spacing:.04em;
  text-transform:none; color:var(--ink-2); margin-bottom:13px; font-weight:500}
.fgrid nav{display:flex; flex-direction:column; gap:2px}
.fgrid nav a{font-size:14px; color:var(--ink-2); padding:7px 0; min-height:44px;
  display:inline-flex; align-items:center; transition:color var(--t2) var(--e-io)}
.fgrid nav a:hover{color:var(--ink)}
.fbot{display:flex; gap:var(--space-5); align-items:center; flex-wrap:wrap; margin-top:34px;
  padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}
.fbot nav{margin-left:auto; display:flex; gap:10px; align-items:center}
.fbot nav a{display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:12px 8px; transition:color var(--t2) var(--e-io)}
.fbot nav a:hover{color:var(--ink)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}

.note{font-size:12.5px; color:var(--muted); text-align:center; margin-top:16px}
.note a{color:var(--green-ink); font-weight:600}

/* ============================================================ BACK TO TOP
   Hidden until two screens have gone by, and hidden again near the foot of
   the page so a 46px circle never sits on top of the footer's own links. */
.totop{
  position:fixed; right:20px; bottom:20px; z-index:140;
  width:46px; height:46px; border-radius:var(--r-full); border:0; padding:0;
  background:var(--ink); color:var(--paper); cursor:pointer;
  display:grid; place-items:center; font:inherit;
  box-shadow:0 12px 26px -12px rgba(17,27,33,.45);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out),
             background var(--t2) var(--e-io), color var(--t2) var(--e-io);
}
.totop.show{opacity:1; transform:none; pointer-events:auto}
.totop:hover,.totop:focus-visible{background:var(--green); color:var(--ink-on-green)}
.totop svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round}
@media(max-width:480px){.totop{right:14px; bottom:14px}}
@media (prefers-reduced-motion:reduce){.totop{transition:opacity var(--t2) linear}}

/* ============================================================
   CURSOR — a dot that tracks the pointer and a ring that lags.
   The ring uses mix-blend-mode:difference so it reads correctly
   on the beige ground AND on the dark band without being told
   which it is over. `cursor:none` is only applied once JS has
   confirmed it is running, so a failure leaves the native
   cursor alone. Off for touch, coarse pointers, reduced motion.
   Over anything clickable, the custom cursor stands down and the
   native hand (pointer) takes over so the hit target is obvious.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  html.cur-on, html.cur-on *{cursor:none !important}
  html.cur-on.cur-hot, html.cur-on.cur-hot *{cursor:pointer !important}
  /* A modal dialog paints in the top layer, above the custom dot, so
     hiding the system pointer there leaves empty gaps with no cursor.
     Keep the native pointer inside the dialog and on its backdrop. */
  html.cur-on dialog,
  html.cur-on dialog *,
  html.cur-on dialog::backdrop{
    cursor:auto !important;
  }
  /* a fixed, clipped layer: the dot and ring are translated inside it, so
     neither can ever contribute to the document's scroll width */
  .cur-layer{
    position:fixed; inset:0; z-index:9999;
    overflow:hidden; pointer-events:none;
  }
  .cur-dot,.cur-ring{
    position:absolute; top:0; left:0; border-radius:var(--r-full);
    pointer-events:none; opacity:0; will-change:transform;
    transition:opacity 260ms var(--e-io);
  }
  html.cur-on .cur-dot, html.cur-on .cur-ring{opacity:1}
  html.cur-on.cur-hot .cur-dot, html.cur-on.cur-hot .cur-ring{opacity:0; transition-duration:80ms}
  .cur-dot{width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:var(--green); left:-50px}
  .cur-ring{
    width:34px; height:34px; margin:-17px 0 0 -17px; left:-50px;
    border:1px solid #fff; mix-blend-mode:difference;
    transition:opacity 260ms var(--e-io), width 240ms var(--e-out),
               height 240ms var(--e-out), margin 240ms var(--e-out);
  }
  html.cur-hot .cur-ring{width:54px; height:54px; margin:-27px 0 0 -27px}
  html.cur-down .cur-ring{width:26px; height:26px; margin:-13px 0 0 -13px}
}
@media (prefers-reduced-motion:reduce){ .cur-dot,.cur-ring{display:none} }

/* ============================================================
   HERO — two columns. Copy left, the phone doing the work right,
   so the mechanism is visible without scrolling.
   ============================================================ */
.hero{
  text-align:left; position:relative; background:transparent;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:92px 0 56px;
}
/* copy 50 / phone 50 */
.hero-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3.5vw,56px); align-items:center;
}
.hero-copy{max-width:none; position:relative; z-index:5}
.hero .badge{margin-bottom:20px}
.hero h1.dsp{margin:0; max-width:none; font-size:clamp(36px,4.8vw,68px); line-height:var(--dsp-hero-lh); font-weight:700}
[data-page="pricing"] #pricing .legal-masthead h1.dsp{
  margin:0; max-width:none; text-align:left;
  font-size:clamp(36px,4.8vw,68px); line-height:var(--dsp-hero-lh);
  letter-spacing:var(--dsp-hero-ls); font-weight:700;
}
.hero h1.line-reveal .line-reveal__line > span{
  display:inline-block; white-space:normal; max-width:100%;
}
/* NexStudio-style masked line reveal: each line is clipped, then
   slides up. Replays each time the block leaves and re-enters view. */
.line-reveal{max-width:none}
.line-reveal__line{
  display:block; overflow:hidden;
  padding-top:.18em; padding-bottom:.2em;
  margin-top:-.18em; margin-bottom:-.2em;
}
.line-reveal__line > span{
  display:block; white-space:nowrap;
  transform:translateY(112%);
  transition:none;
}
.sec-title.line-reveal .line-reveal__line,
.sec-sub.line-reveal .line-reveal__line{text-align:center}
/* Help Center copy sits on the left, including the page title. */
.help-page #help .sec-head,
.help-page #help h1.dsp.sec-title,
.help-page #help .sec-title.line-reveal .line-reveal__line,
.help-page #help .sec-head > p,
.help-page #ask .sec-head,
.help-page #ask h2,
.help-page #ask .sec-head > p,
.help-page .hc-rhs,
.help-page .hc-rhs .note,
.help-page .hc-done,
.help-page .hc-status,
.help-page #topics .legal-masthead,
.help-page #topics .legal-masthead h2,
.help-page #topics .legal-masthead > p{
  text-align:left;
}
.help-page #help h1.dsp.sec-title,
.help-page #help .sec-head > p,
.help-page #ask .sec-head > p,
.help-page #topics .legal-masthead > p{
  margin-left:0;
  margin-right:0;
  max-width:none;
}
.help-page #help .hc-search{margin-left:0; margin-right:auto}
.help-page #help .chips,
[data-page="pricing"] #topics .chips{justify-content:flex-start}
.help-page #help .sec-head > p{margin-top:var(--space-4)}
/* Help Center header is internal header variant 2: one centered column, no right-hand side. */
[data-page="help"] #help{text-align:center}
[data-page="help"] #topics{position:relative; z-index:0}
[data-page="help"] #help .sec-head,
[data-page="help"] #help h1.dsp.sec-title,
[data-page="help"] #help .sec-title.line-reveal .line-reveal__line,
[data-page="help"] #help .sec-head > p{
  text-align:center;
}
[data-page="help"] #help h1.dsp.sec-title,
[data-page="help"] #help .sec-head > p{
  margin-left:auto;
  margin-right:auto;
}
[data-page="help"] #help .sec-head > p{max-width:56ch}
[data-page="help"] #help .hc-search{margin-left:auto; margin-right:auto}
[data-page="help"] #help .chips{justify-content:center}
/* 96px between help topics. The rule sits in the middle of that gap. */
.help-page .hc-rhs > .rule{margin:0; transform:translateY(calc(var(--space-24) / 2))}
.help-page .hc-rhs > .hc-topic ~ .hc-topic{margin-top:var(--space-24)}
.sec-title.line-reveal .line-reveal__line > span{
  display:inline-block; white-space:normal; max-width:100%;
}
.line-reveal.is-in .line-reveal__line > span{
  transform:translateY(0);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--d, 0s);
}
.line-reveal.is-in .line-reveal__line:nth-child(1) > span{transition-delay:var(--d, .12s)}
.line-reveal.is-in .line-reveal__line:nth-child(2) > span{transition-delay:var(--d, .24s)}
.line-reveal.is-in .line-reveal__line:nth-child(3) > span{transition-delay:var(--d, .36s)}
.line-reveal--copy .line-reveal__line > span{
  display:block; white-space:normal;
  --d:.2s;
}
.line-reveal--copy.is-in .line-reveal__line > span{transition-duration:.8s}
.why-lede.line-reveal--copy .line-reveal__line > span{
  display:flex; flex-direction:column; gap:var(--space-3);
}
@media (prefers-reduced-motion:reduce){
  .line-reveal__line > span{transform:none; transition:none}
}
.hero .hero-body{margin:22px 0 0; max-width:46ch}
.hero .hero-body:has(.hero-swap-unit){max-width:none}
.hero .hero-body + .hero-body{margin-top:14px}
.hero .hero-body b{color:var(--ink); font-weight:700}
/* Whole opener stays on one line; the slot is sized to the longest
   word so rotation never reflows it. */
.hero-swap-unit{white-space:nowrap}
.hero-rest{display:block; max-width:46ch}
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.word-swap{
  --swap-h:1.2em;
  display:inline-block; vertical-align:calc(-0.08em - 2px);
  box-sizing:content-box;
  height:var(--swap-h); overflow:hidden;
  margin-left:.15em; padding:2px .34em;
  background:var(--green); color:var(--ink-on-green); font-weight:inherit;
  border-radius:.22em;
  white-space:nowrap;
  transition:width .55s cubic-bezier(.22,1,.36,1);
}
.word-swap__track{
  display:flex; flex-direction:column; align-items:flex-start;
  width:max-content;
}
.word-swap.is-live .word-swap__track{
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.word-swap__track > span{
  display:block; box-sizing:content-box;
  height:var(--swap-h); line-height:var(--swap-h);
  white-space:nowrap; text-align:left; width:max-content;
}
@media (prefers-reduced-motion:reduce){
  .word-swap, .word-swap.is-live .word-swap__track{transition:none}
}
.hero .hero-acts{justify-content:flex-start; margin-top:28px}
.hero .hero-fine,
[data-page="pricing"] #pricing .legal-masthead .hero-fine{justify-content:flex-start; margin-top:18px}
.hero-vis{position:relative; z-index:4; display:flex; flex-direction:column; justify-content:center; align-items:center; overflow:visible}
/* A phone shrinks the way a real object does — the whole thing, at one
   scale. Resizing the screen box instead kept the type at full size and
   the device came out squat; the ratio has to survive every viewport,
   because a 1.8:1 phone reads as a prop. --ps is set by JS from the height
   actually available in the fold; the reserved box keeps layout honest,
   since transform alone reserves nothing. Without JS the phone stays at its
   native size, which is correct on any screen tall enough to show it. */
.hero-vis{--ps:1; --nat-w:380px; --nat-h:790px}
@media(max-width:400px){.hero-vis{--nat-w:300px; --nat-h:633px}}
.hero-vis .phone-slide{
  position:relative;
  width:calc(var(--nat-w) * var(--ps)); height:calc(var(--nat-h) * var(--ps));
  /* flex-start, not the default stretch: a stretched frame would be capped
     at the reserved (already-scaled) height while the screen inside kept
     its own, and the screen would spill out of the bezel */
  display:flex; justify-content:center; align-items:flex-start;
  /* same radius as the device so the reserved box cannot flash a square
     slab under the rounded chin */
  border-radius:60px;
  overflow:visible;
}
/* two leaf clusters from tree-branch-phone.png, parked behind the device
   so foliage peeks around both sides like a wreath. Sized off the reserved
   (already-scaled) box so it tracks --ps without a second transform. */
.hero-vis .hero-branch{
  position:absolute; z-index:0;
  left:50%; top:auto; bottom:0;
  width:172.5%; height:auto;
  max-width:none;
  transform:translateX(-50%);
  pointer-events:none; user-select:none;
}
@media(max-width:700px){
  .hero-vis .hero-branch{
    width:min(172.5%, 100vw);
    max-width:100vw;
  }
}
/* zoom, not transform: scale() on an ancestor lets the sliding screen
   promote to its own layer and paint past every overflow/clip-path. */
.hero-vis .phone-fit{
  position:relative; z-index:2;
  width:var(--nat-w); flex:none;
  zoom:var(--ps);
  overflow:hidden; isolation:isolate;
  border-radius:60px;
  clip-path:inset(0 round 60px);
  background:transparent;
}
/* The transport rides on the phone's wallpaper, just under the chat header,
   instead of sitting below the device eating fold height. It stays OUTSIDE
   the scaled frame so its 44px hit areas are real 44px; only its offset is
   scaled, which keeps it pinned under the header at every size.
   Bars only — no pill, no play control. Extra padding is transparent so
   the target is honest and the chrome is the 3px rules. */
.hero-vis .transport{
  position:absolute; z-index:6;
  left:50%; top:calc(var(--nat-h) * var(--ps) * .162);
  transform:translateX(-50%);
  width:auto; margin:0; gap:0; align-items:center;
}
.hero-vis .trow{
  height:auto; gap:0; padding:0;
  background:transparent; border:0; box-shadow:none;
}
/* Slide 2 is twice as long, so its bar is twice as wide. */
.hero-vis .segs{width:auto; flex:none; gap:5px}
.hero-vis .seg{flex:none; width:47px; padding-block:20.5px; min-height:44px}
.hero-vis .seg[data-go="2"]{width:94px}

/* its own strip, fully below the hero — not anchored to its edge anymore */
.hero-mq-strip{background:transparent; padding:14px var(--gut) 22px; position:relative; z-index:3}
.feat-rail{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  list-style:none; margin:0; padding:10px 0;
  font-family:var(--font-mono); font-weight:600;
  font-variation-settings:normal; text-transform:uppercase;
  font-size:clamp(10.5px,1.02vw,12px); letter-spacing:.14em; line-height:1.4;
  color:var(--ink-2);
}
.feat-rail li{display:inline-flex; align-items:center; white-space:nowrap}
.feat-rail li:not(:last-child)::after{
  content:"✦";
  margin:0 12px;
  font-size:1.6em;
  letter-spacing:0;
  opacity:.4;
}
.trio-sec{padding-top:clamp(64px,7vw,92px); padding-bottom:0; scroll-margin-top:88px}
.trio-sec .sec-head{text-align:left; margin-bottom:12px}
.trio-sec .eyebrow{justify-content:flex-start}
.trio-sec .eyebrow > span{
  color:var(--green-ink);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:11px;
}
.trio-sec .eyebrow-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--green); margin-right:8px; flex:none;
}
.trio-sec .sec-title{
  text-align:left; margin:0; max-width:none;
  font-size:64px; line-height:.95; letter-spacing:-.03em;
}
.trio-sec .sec-title.line-reveal .line-reveal__line,
.trio-sec .sec-title.line-reveal .line-reveal__line > span{text-align:left}
.trio-sec .sec-title.line-reveal .line-reveal__line > span{white-space:normal}
.trio-sec .trio-lede{
  margin:22px 0 0; max-width:none;
  text-align:left; text-align-last:left;
  font-size:17px; line-height:1.55; color:var(--ink-2);
}
.trio-sec .trio{margin-top:0}

/* Trio formation — middle card drops, dotted links, handwritten notes. */
.trio-sec .trio-flow{
  --drop:76px;
  --trio-pad:76px 6px 48px;
  position:relative;
  isolation:isolate;
  align-items:start;
  padding:var(--trio-pad);
  overflow:visible;
}
.trio-sec .trio-flow > .tc{overflow:visible; z-index:1}
.trio-sec .trio-flow > .tc.is-drop{margin-top:var(--drop)}
.trio-sec .tc-num{
  position:absolute; z-index:3;
  top:-13px; left:18px;
  width:26px; height:26px;
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--green); color:#fff;
  font-size:13px; font-weight:700; letter-spacing:-.02em;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--paper) 80%, transparent);
}
.trio-sec .trio-note{
  position:absolute; z-index:2; margin:0; padding:0;
  display:flex; align-items:center; gap:2px;
  font-family:var(--font-note);
  font-size:22px; font-weight:400; line-height:1.12;
  color:var(--green-ink);
  pointer-events:none; white-space:nowrap;
}
.trio-sec .trio-note svg{
  position:relative; flex:none; overflow:visible;
  width:35px; height:45px;
}
.trio-sec .trio-arrow.is-down{transform:scaleY(-1)}
/* Arrow sits in the same band as the handwriting. Only the head
   reaches toward the card, so the note stays one line tall. */
.trio-sec .trio-note-remember,
.trio-sec .trio-note-ahead{align-items:flex-start}
.trio-sec .trio-note-remember svg,
.trio-sec .trio-note-ahead svg{margin-top:-11px}
.trio-sec .trio-note-follow,
.trio-sec .trio-note-same{align-items:flex-end}
.trio-sec .trio-note-follow svg,
.trio-sec .trio-note-same svg{margin-bottom:-8px}
/* Arrow on the bell, handwriting to its right. */
.trio-sec .trio-note-follow svg{margin-bottom:11px}
.trio-sec .trio-note-follow span{position:relative; top:-16px}
.trio-sec .trio-note-follow{left:calc(50% - 86px); bottom:calc(100% - 18px); transform:translateX(-50%) rotate(-6deg); transform-origin:center bottom}
/* Arrow on the tree, handwriting to its right, above the card. */
.trio-sec .trio-note-same{
  left:calc(50% - 70px); right:auto;
  bottom:calc(100% - 2px);
  transform:translateX(-50%) rotate(-6deg); transform-origin:center bottom;
}
.trio-sec .trio-note-same svg{margin-bottom:-3px}
.trio-sec .trio-note-same span{position:relative; top:-16px}
.trio-sec .trio-note-remember,
.trio-sec .trio-note-ahead{left:auto; right:20px; top:calc(100% + 2px); transform:rotate(5deg); transform-origin:right top}
/* Cards 2 and 3 drop the WhatsApp wallpaper for the LifeTree panel:
   white column, paper rows, mint on the live row. */
.trio-sec .tc-esc,
.trio-sec .tc-tree{
  background-color:var(--surface);
  background-image:none;
  box-shadow:var(--elev-3), var(--elev-1-soft);
}
.trio-sec .tc-esc{
  height:auto; min-height:0;
  justify-content:center; gap:0;
  padding:0; overflow:visible;
  background:transparent;
  background-image:none;
  border:none;
  box-shadow:none;
  border-radius:0;
}
.trio-sec .tc-esc .tc-row{
  opacity:1;
  background:var(--surface);
  border:1px solid var(--line);
  box-shadow:var(--elev-1-soft);
  padding:10px 12px;
  gap:10px;
  border-radius:var(--r-md);
}
.trio-sec .tc-esc .tc-row::before{
  display:block;
  transform:scaleX(0);
  transform-origin:left;
}
.trio-sec .tc-esc .tc-row[data-i="0"]::before{background:var(--ok-tint)}
.trio-sec .tc-esc .tc-row[data-i="1"]::before{background:var(--warn-tint)}
.trio-sec .tc-esc .tc-row[data-i="2"]::before{background:var(--crit-tint)}
.trio-sec .tc-esc .tc-row.is-on,
.trio-sec .tc-esc .tc-row.is-done{
  opacity:1;
  background:var(--surface);
  border-color:var(--line);
  box-shadow:var(--elev-1-soft);
}
.trio-sec .tc-esc .tc-row.is-on::before{
  transform:scaleX(1);
  transition:transform 5.4s linear;
}
.trio-sec .tc-esc .tc-row.is-done::before{
  transform:scaleX(1);
  transition:none;
}
.trio-sec .esc-ico{
  width:28px; height:28px; flex:none;
  display:grid; place-items:center;
  border-radius:8px;
}
.trio-sec .esc-ico svg{width:16px; height:16px}
.trio-sec .esc-copy b{font-size:13px}
.trio-sec .esc-stat{font-size:11px; color:var(--ink-2)}
.trio-sec .esc-side{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:8px;
}
.trio-sec .esc-when{
  font-style:normal; font-size:12px; font-weight:500;
  color:var(--ink-2); line-height:1; white-space:nowrap;
}
.trio-sec .tc-esc .tc-row.is-on .esc-stat,
.trio-sec .tc-esc .tc-row.is-done .esc-stat{color:var(--ink-2)}
.trio-sec .esc-when{color:var(--ink)}
.trio-sec .tc-esc .esc-dot{
  width:8px; height:8px; opacity:1;
  background:var(--line-strong);
  box-shadow:none; animation:none; transform:none;
}
.trio-sec .tc-esc .tc-row.is-on .esc-dot{
  background:var(--green); opacity:1;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--green) 28%, transparent);
  animation:escdot 1.05s var(--e-io) infinite;
}
.trio-sec .esc-gap{min-height:18px; flex:none}
.trio-sec .esc-gap::before{
  left:auto; right:14px;
  background-image:radial-gradient(circle, var(--line-strong) 1.2px, transparent 1.4px);
  background-size:2px 5px;
}
.trio-sec .esc-gap::after{left:auto; right:12px; background:var(--green)}
.trio-sec .tc-renew{
  margin-top:auto; flex:none;
  display:flex; flex-direction:column; gap:8px;
  padding:10px 10px 8px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--elev-3), var(--elev-1-soft);
}
.trio-sec .rn-head{
  display:flex; align-items:center; gap:8px; min-width:0;
}
.trio-sec .rn-brand{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; letter-spacing:-.02em;
  white-space:nowrap;
}
.trio-sec .rn-tree{
  width:26px; height:26px; flex:none;
  display:grid; place-items:center;
  border-radius:8px; background:var(--green-tint);
  font-size:14px;
}
.trio-sec .rn-tabs{
  margin-left:auto; display:flex; gap:4px; min-width:0;
}
.trio-sec .rn-tabs span{
  font-size:10px; font-weight:600; color:var(--ink-2);
  background:var(--canvas-2); border-radius:var(--r-pill);
  padding:4px 7px; line-height:1; white-space:nowrap;
  transition:color 420ms var(--e-out), background-color 420ms var(--e-out);
}
.trio-sec .rn-tabs .is-on{
  color:var(--green-ink); background:var(--green-tint);
}
.trio-sec .rn-stage{display:grid}
.trio-sec .rn-list{
  grid-area:1 / 1;
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transform:translateY(6px);
  transition:opacity 480ms var(--e-out), transform 480ms var(--e-out), visibility 480ms;
}
.trio-sec .rn-list.is-shown{
  opacity:1; visibility:visible; transform:none;
}
@media (prefers-reduced-motion:reduce){
  .trio-sec .rn-list,
  .trio-sec .rn-tabs span,
  .trio-sec .rn-side em,
  .trio-sec .rn-side svg{transition:none}
}
.trio-sec .rn-list li{
  display:flex; align-items:center; gap:8px;
  padding:7px 2px;
  border-top:1px solid var(--line);
}
.trio-sec .rn-list li:first-child{border-top:0}
.trio-sec .rn-ico{
  width:22px; height:22px; flex:none;
  display:grid; place-items:center; border-radius:6px;
}
.trio-sec .rn-ico svg{width:14px; height:14px}
.trio-sec .rn-list b{
  font-size:12.5px; font-weight:600; letter-spacing:-.02em;
  min-width:0;
}
.trio-sec .rn-side{
  margin-left:auto; flex:none;
  display:inline-flex; align-items:center; gap:4px;
}
.trio-sec .rn-side em{
  font-style:normal; font-size:11.5px; font-weight:600;
  color:var(--ink-2); white-space:nowrap;
  transition:color 420ms var(--e-out);
}
.trio-sec .rn-side svg{
  width:14px; height:14px; color:var(--line-strong);
  transition:color 420ms var(--e-out), transform 420ms var(--e-out);
}
.trio-sec .rn-list li.is-on .rn-side em{color:var(--green-ink)}
.trio-sec .rn-list li.is-on .rn-side svg{
  color:var(--green-ink);
  transform:translateX(2px);
}
@media(max-width:900px){
  .trio-sec .trio-flow{padding:0}
  .trio-sec .trio-flow > .tc.is-drop{margin-top:0}
  .trio-sec .trio-note,
  .trio-sec .tc-num{display:none}
}
@media(max-width:720px){
  .trio-sec .sec-title{font-size:40px}
}
@media(max-width:1080px){.trio-sec{padding-top:clamp(46px,6vw,64px)}}

/* short laptops: the fold is height-bound, not width-bound, so the whole
   left column tightens rather than letting the hero spill past one screen */
/* Short-window compaction. The trigger was 940px of viewport height, which
   is roughly a 1080px screen once chrome and dock are subtracted — so it
   fired on most laptops and the compact hero became the default. Measured
   at 881px tall the full-size hero clears the fold with ~158px to spare,
   so the trigger now sits where it is actually needed. */
@media (min-width:1081px) and (max-height:760px){
  .hero{padding:84px 0 48px}
  .hero .badge{margin-bottom:14px}
  .hero h1.dsp,
  [data-page="pricing"] #pricing .legal-masthead h1.dsp{font-size:clamp(32px,4.2vw,56px)}
  .hero .hero-body{margin-top:14px; font-size:15px}
  .hero .hero-body + .hero-body{margin-top:10px}
  .hero .hero-acts{margin-top:22px}
  .hero .hero-fine{margin-top:14px}
}
@media(max-width:1180px){
  .hero h1.dsp,
  [data-page="pricing"] #pricing .legal-masthead h1.dsp{font-size:clamp(34px,4.4vw,56px)}
}
@media(max-width:1080px){
  .hero{min-height:0; padding:96px 0 0}
  .hero-grid{grid-template-columns:1fr; justify-items:center; text-align:center}
  .hero-copy{max-width:60ch}
  .hero h1.dsp{max-width:none}
  .hero .hero-body{margin-inline:auto}
  .hero .hero-acts,.hero .hero-fine{justify-content:center}
  .hero-swap-unit{white-space:normal}
  .hero h1.line-reveal .line-reveal__line > span{white-space:normal}
  .hero-rest{margin-inline:auto}
}

/* the whole device used to fade. Scene changes now push inside the
   screen (see .screen.is-pre) so the bezel never leaves the fold. */
@media (prefers-reduced-motion:reduce){
  .screen,.screen.is-pre,.screen.is-pre-back,.screen.screen-leave,
  .screen.screen-leave.is-out,.screen.screen-leave.is-back.is-out{
    transform:none; box-shadow:none; transition:none;
  }
  .bub,.bub.is-new,.bub.sys.is-new{opacity:1; transform:none; transition:none}
}

/* ============================================================
   SPLIT — the reusable two-column content section. Copy left,
   visual right, everything left-aligned. Used by LifeTree and
   Reminder delivery; add `split` to any wrap to reuse it.
   ============================================================ */
.split{
  display:grid; grid-template-columns:1fr 1.05fr;
  gap:clamp(32px,5vw,64px); align-items:center;
}
.split-copy{text-align:left}
.split-copy .lab{margin-bottom:14px}
.split-copy h2{font-size:var(--dsp-section-size); line-height:var(--dsp-section-lh); max-width:16ch; text-align:left}
.split-copy .body-l{margin-top:18px}
.split-copy .split-acts{margin-top:26px; display:flex; gap:11px; flex-wrap:wrap}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:34px}}

/* ============================================================
   THE CHAIN — WhatsApp → SMS → call, stepping itself.
   Outlined numerals in the nordpixel register; the active box
   lifts, fills its underline over the dwell, then keeps a tick.
   ============================================================ */
.chain{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(30px,3.6vw,48px);
}
.step-box{
  position:relative; overflow:hidden; flex:1 1 300px; max-width:380px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 22px 20px; display:flex; align-items:flex-start; gap:15px;
  transition:transform var(--t3) var(--e-out), box-shadow var(--t3) var(--e-out),
             border-color var(--t3) var(--e-io), background var(--t3) var(--e-io);
}
/* the connector between rungs — reuses the arrow drawn for the earlier
   horizontal draft of this ladder, unused until now, rotating on its side
   to keep pointing "next" once the chain stacks vertically */
.chain .arrow{display:grid; place-items:center; padding:0 4px; flex:none; color:var(--muted)}
.chain .arrow svg{width:22px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
@media(max-width:820px){
  .chain{flex-direction:column; align-items:stretch; gap:2px}
  .chain .step-box{max-width:560px; width:100%; margin:0 auto}
  .chain .arrow{transform:rotate(90deg); padding:10px 0}
}
.step-box .num{
  position:absolute; right:16px; bottom:4px; z-index:0;
  font-weight:900; font-size:84px; line-height:1; letter-spacing:-.04em;
  font-variation-settings:"wdth" 72;
  color:transparent; -webkit-text-stroke:1.5px var(--muted);
  opacity:.28; pointer-events:none;
}
.step-box > *:not(.num):not(.sb-bar):not(.sb-mark):not(.sb-load){position:relative; z-index:1}
.sb-ico{
  width:44px; height:44px; border-radius:13px; flex:none;
  display:grid; place-items:center; background:var(--c);
  transition:transform var(--t3) var(--e-out);
}
.sb-ico svg{width:21px; height:21px; fill:#fff}
/* The rung opens on its name. The timing rides the same line as a mono
   tag rather than taking a row of its own — the box is shorter for it,
   and the ladder still says when each channel fires. */
.sb-txt{flex:1; min-width:0}
.sb-txt h3{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  font-size:18px; font-weight:700; letter-spacing:-.02em; margin:0 0 7px;
  padding-right:34px;                       /* clear of the outcome mark */
}
/* the explanation stops short of the numeral; the quoted message does not,
   because it is the line that has to stay on one row */
.sb-txt p{font-size:13.5px; line-height:1.52; color:var(--ink-2); max-width:52ch}
/* the words the visitor would actually receive, set apart from the
   explanation so the rung reads as evidence rather than a claim.
   It runs the full width of the card and sits above the numeral, which is
   absolutely positioned and behaves as a watermark. */
.sb-say{
  margin-top:11px; padding-left:12px; border-left:2px solid var(--c);
  font-size:13.5px; line-height:1.45; color:var(--ink);
}
.sb-say::before{content:"\201C"} .sb-say::after{content:"\201D"}
.sb-when{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--c);
}
/* The progress is the card's own border drawing itself, left to right,
   around all four rounded corners. An inset bottom bar was the earlier
   attempt: full-bleed it got sliced by the corner radius, and inset it
   read as a rule that stops short of the edges. A border has no ends to
   cut — it closes on itself, which is also the right metaphor for an
   attempt completing. Revealed with clip-path, so nothing moves. */
.sb-bar{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  /* half strength: the sweep should register at the edge of attention,
     not compete with the copy it is drawn around */
  border:1px solid color-mix(in srgb, var(--muted) 50%, transparent);
  border-radius:inherit;
  clip-path:inset(0 100% 0 0);
}
.step-box.is-on .sb-bar{clip-path:inset(0 0 0 0); transition:clip-path 3000ms linear}
.step-box.is-done .sb-bar{clip-path:inset(0 0 0 0)}
/* Every attempt draws in grey, because an attempt in flight is not yet good
   news. Only the third one turns accent when it closes — the ladder's whole
   point is that this is the rung that landed. */
.step-box.is-done .sb-bar{transition:border-color 340ms var(--e-out)}
.step-box.is-done[data-i="2"] .sb-bar{border-color:color-mix(in srgb, var(--green) 62%, transparent)}
/* The corner tells the state of the attempt, and it tells it twice.
   While the underline is filling, the step is out there waiting: a slowly
   turning arrow. The moment the bar hits full width the icon swaps to what
   the attempt earned — went unanswered on 01 and 02, landed on 03. That is
   the argument for the ladder in two frames, so it is drawn rather than
   described. */
.sb-load,.sb-mark{
  position:absolute; top:16px; right:18px; z-index:3;
  display:grid; place-items:center;
  opacity:0; transform:scale(.72);
  transition:opacity var(--t2) var(--e-out), transform var(--t2) var(--e-out);
}
.sb-load svg,.sb-mark svg{width:22px; height:22px; display:block}
.sb-load{color:var(--muted)}
.sb-mark.is-skip{color:var(--muted)}
.sb-mark.is-got{color:var(--green)}
/* waiting */
.step-box.is-on .sb-load{opacity:1; transform:none}
.step-box.is-on .sb-load svg{animation:sbspin 2.6s linear infinite}
@keyframes sbspin{to{transform:rotate(-360deg)}}
/* settled */
.step-box.is-done .sb-mark{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .step-box.is-on .sb-load svg{animation:none}
}
/* active state */
.step-box.is-on{
  transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--c) 45%, transparent);
  box-shadow:0 14px 30px -16px rgba(17,27,33,.3);
  background:var(--white);
}
.step-box.is-on .sb-ico{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){
  .step-box.is-on .sb-bar{transition:none}
  .step-box{transform:none !important}
}

/* ============================================================
   DARK BAND — reusable. Add `band-dark` to any <section> and it
   flips. Rather than restyling each child, it re-points the same
   custom properties the whole page already uses, so buttons,
   eyebrows, labels and body copy adapt on their own.

   Values sampled from the Grigoletti reference: ground #131313,
   body copy #91908D, and a fine monochrome grain measured at
   σ≈2.1/255 — barely there, but it stops the black reading flat.

       <section class="band-dark"> … </section>
   ============================================================ */
.band-dark{
  /* Canonical names carry the dark values; the legacy names alias them,
     exactly as in :root. Before this block existed only the legacy names
     flipped, so any rule reading --canvas / --surface / --ink-muted /
     --line-cool inside a dark band silently got the LIGHT value. */
  --canvas:#131313;
  --canvas-2:#1A1A19;
  --surface:#1B1B1A;
  --ink:#EBE9E4;
  --ink-2:#91908D;
  --ink-muted:#7B7A76;
  --line-cool:#282826;
  --line-cool-2:#35342F;
  --line-strong:#6A7176;

  --paper:var(--canvas);
  --paper-2:var(--canvas-2);
  --card:var(--surface);
  --white:var(--surface);
  --muted:var(--ink-muted);
  --line:var(--line-cool);
  --line-2:var(--line-cool-2);

  --green-ink:#4FE58A;          /* green text needs to lift on black */
  --green-tint:#0F2314;

  /* The CTA rule inverts here: on #131313 the green fill is the
     highest-contrast action, so the dark-on-light button flips to
     green-on-dark with no per-band rule of its own. */
  --cta:#25D366;
  --cta-hover:#1EB558;
  --cta-active:#1A9E4E;
  --cta-ink:#111B21;
  --cta-glyph:#075E54;

  --ok:var(--green);       --ok-ink:var(--green-ink);  --ok-tint:var(--green-tint);
  --warn:#D9A234;          --warn-ink:#C8964B;         --warn-tint:#291B06;
  --crit:#E06A53;          --crit-ink:#DF8877;         --crit-tint:#2E1712;
  --info:#53BDEB;          --info-ink:#48ABD5;         --info-tint:#06212D;

  --cat-dates-ink:#A598CC;   --cat-dates-tint:#1F1B2B;
  --cat-health-ink:#CC909D;  --cat-health-tint:#2A181C;
  --cat-work-ink:#83A2CF;    --cat-work-tint:#151E2C;
  --cat-money-ink:#C89477;   --cat-money-tint:#2A1A11;
  --cat-travel-ink:#62ACA5;  --cat-travel-tint:#0B2321;
  --cat-home-ink:#BE92BA;    --cat-home-tint:#261925;
  /* Painted a shade under the token: the grain layer below is additive and
     lifts it back. Measured, this renders at #131313 — the token stays the
     honest value, so anything reading --paper for contrast gets the truth. */
  background:#0A0A0A; color:var(--ink);
  position:relative; isolation:isolate; z-index:3;
}
/* the grain itself */
.band-dark::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
  opacity:.095;
}
.band-dark .eyebrow > span{
  background:rgba(255,255,255,.12);
  border-color:var(--glass-rim-dark);
  color:var(--ink);
  box-shadow:0 8px 24px -10px rgba(0,0,0,.35),
             inset 0 1px 0 rgba(255,255,255,.18);
}
.band-dark .btn:hover,.band-dark .btn:focus-visible{color:var(--ink-on-green)}
.band-dark hr.rule{background:var(--line)}

/* ============================================================
   FEATURES — scroll story. Title + well stick as one stack
   under the nav; four moments scroll on the right. Old
   .feat / .fcard rules stay below in case a card is reused.
   ============================================================ */
#features{
  --feat-nav:88px;
  --feat-head:240px;
  --feat-gap:clamp(28px,4.5vw,64px);
}
.feat-pin{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--feat-gap);
  align-items:start;
}
.feat-stick{
  grid-column:1 / -1;
  grid-row:1;
  position:sticky;
  top:var(--feat-nav);
  z-index:6;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--feat-gap);
  pointer-events:none;
}
#features .feat-stick .sec-head{
  grid-column:1 / -1;
  position:relative;
  z-index:2;
  margin-bottom:0;
  padding:4px 0 24px;
  pointer-events:auto;
}
#features .feat-stick .sec-head::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--gut));
  right:calc(-1 * var(--gut));
  top:-24px;
  bottom:0;
  background:linear-gradient(180deg,
    rgba(253,253,248,.9) 0%,
    rgba(253,253,248,.84) 78%,
    rgba(253,253,248,.4) 92%,
    transparent 100%);
  backdrop-filter:var(--glass-raised);
  -webkit-backdrop-filter:var(--glass-raised);
  pointer-events:none;
  z-index:-1;
}
.feat-phone{
  grid-column:1;
  min-width:0;
  display:flex; align-items:flex-start; justify-content:center;
  pointer-events:auto;
}
.feat-moments{
  grid-column:2;
  grid-row:1;
  min-width:0;
  position:relative;
  z-index:3;
  padding-top:var(--feat-head);
}
.feat-well{
  --r:32px;
  --well:#7ED9B0;
  position:relative;
  width:100%;
  height:min(440px, calc(100vh - var(--feat-nav) - var(--feat-head) - 24px));
  border-radius:var(--r);
  overflow:hidden;
  display:flex; justify-content:center; align-items:flex-start;
  padding:28px 24px 0;
  background:
    linear-gradient(155deg, color-mix(in srgb, #fff 28%, transparent) 0%, transparent 40%),
    var(--well);
  transition:background 520ms var(--e-out);
}
.feat-well[data-scene="1"]{--well:#7ED9B0}
.feat-well[data-scene="2"]{--well:#8BB8F0}
.feat-well[data-scene="3"]{--well:#E8C46A}
.feat-well[data-scene="4"]{--well:#E8A090}
.feat-well::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:64px;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--well) 55%, transparent));
  pointer-events:none; z-index:3;
}
.feat-phone-vis{
  --ps:.92; --nat-w:380px;
  width:calc(var(--nat-w) * var(--ps));
  flex:none;
  display:flex; justify-content:center; align-items:flex-start;
}
.feat-phone-vis .phone-slide{
  display:flex; justify-content:center; align-items:flex-start;
}
.feat-phone-vis .phone{transform-origin:top center; transform:scale(var(--ps))}
.feat-well .fx-phone .thread{justify-content:flex-start}
.feat-well .fx-phone .comp,
.feat-well .fx-phone .homebar{display:none}
.feat-well .fx-seq{justify-content:flex-start; padding-top:22px}
.feat-well .fx-phone .call-ring{padding-top:72px}

/* Follow-up sequence — covers the chat the way LifeTree's book
   covers the hero thread. One green glyph at a time. */
.fx-seq{
  position:absolute; top:46px; left:0; right:0; bottom:0; z-index:22;
  background:var(--card);
  display:flex; flex-direction:column; justify-content:center;
  padding:28px 22px 36px;
  opacity:0; pointer-events:none;
  transform:translateY(18px);
  transition:opacity var(--t3) var(--e-out), transform var(--t4) var(--e-out);
}
.fx-phone.is-seq .fx-seq{opacity:1; transform:none; pointer-events:auto}
.fx-seq-k{
  margin:0;
  font-family:var(--font-mono) !important;
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green-ink);
}
.fx-seq-n{
  margin:8px 0 28px; color:var(--ink);
  font-family:var(--font-display) !important;
  font-size:22px; font-weight:600; letter-spacing:-.04em; line-height:1.15;
}
.fx-seq-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--space-3);
}
.fx-seq-list li{
  display:grid;
  grid-template-columns:40px 1fr;
  grid-template-rows:auto auto;
  column-gap:12px; row-gap:2px;
  align-items:center;
  --r:12px; --r-pad:0px;
  background:#fff; border-radius:var(--r);
  padding:12px 14px;
  box-shadow:var(--elev-1-soft);
  opacity:.42;
  transition:opacity var(--t3) var(--e-out), box-shadow var(--t3) var(--e-out);
}
.fx-seq-list li.is-on,
.fx-seq-list li.is-done{opacity:1}
.fx-seq-ico{
  grid-row:1 / span 2; width:40px; height:40px; border-radius:var(--r-sm);
  display:grid; place-items:center; flex:none;
  background:var(--paper-2); color:var(--ico-pencil);
}
.fx-seq-ico svg{width:20px; height:20px}
.fx-seq-list li.is-on .fx-seq-ico{
  background:var(--green-lite); color:var(--green-ink);
}
.fx-seq-when{
  grid-column:2;
  font-family:var(--font-mono) !important;
  font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.fx-seq-list li b{
  grid-column:2;
  font-size:14px; font-weight:600; letter-spacing:-.02em; color:var(--ink);
}

.feat-moment{
  min-height:calc(100vh - 140px);
  display:flex; flex-direction:column; justify-content:center;
  padding:48px 0 56px;
  max-width:36ch;
  opacity:.34;
  transition:opacity var(--t3) var(--e-out);
}
.feat-moment.is-on{opacity:1}
.feat-num{
  margin:0 0 14px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.feat-moment.is-on .feat-num{color:var(--green-ink)}
.feat-moment h3{
  margin:0 0 12px;
  font-size:clamp(26px,2.4vw,34px); font-weight:600;
  letter-spacing:-.03em; line-height:1.12; color:var(--ink);
}
.feat-moment p{margin:0; font-size:17px; line-height:1.55; color:var(--ink-2)}
.feat-moment b{font-weight:600; color:var(--ink)}
.feat-note{margin-top:14px !important; color:var(--muted) !important; font-size:15px !important}

.feat-tree{
  --r:16px; --r-pad:12px;
  margin-top:clamp(48px,6vw,80px);
  padding:var(--r-pad);
  border-radius:var(--r-outer);
  z-index:5;
}
.feat-tree-copy{
  --r:16px;
  background:#fff; border-radius:var(--r);
  padding:28px 28px 8px;
}
.feat-tree-copy h3{
  margin:0 0 10px;
  font-size:clamp(24px,2.2vw,32px); font-weight:600;
  letter-spacing:-.03em; line-height:1.15;
}
.feat-tree-copy p{
  margin:0; max-width:62ch;
  font-size:16px; line-height:1.55; color:var(--ink-2);
}
.feat-tree-copy b{font-weight:600; color:var(--ink)}
.feat-tree-cta{
  display:inline-flex; margin-top:16px;
  font-size:14px; font-weight:600; color:var(--green-ink);
}
.feat-tree-cta:hover{text-decoration:underline; text-underline-offset:3px}
.feat-tree-board{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--r-pad); margin-top:var(--r-pad);
}
.feat-tree-col{
  --r:16px;
  display:flex; flex-direction:column; min-width:0;
  background:#fff; border-radius:var(--r); padding:16px;
  box-shadow:var(--elev-3), var(--elev-1-soft);
}
.feat-tree-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin:0 0 10px;
}
.feat-tree-k{
  margin:0;
  font-family:var(--font-mono);
  font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.feat-tree-count{
  font-family:var(--font-mono);
  font-size:10px; font-weight:600; letter-spacing:.04em;
  color:var(--ink-2);
  background:var(--paper); border-radius:var(--r-pill);
  padding:3px 8px;
}
.feat-tree-board ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2)}
.feat-tree-board li{
  --r:12px;
  background:var(--paper); border-radius:var(--r); padding:10px 12px;
}
.feat-tree-board b{display:block; font-size:13.5px; font-weight:600; letter-spacing:-.02em}
.feat-tree-board em{
  display:block; margin-top:2px; font-style:normal;
  font-size:12.5px; color:var(--ink-2);
}
.ag-list{flex:1}
.feat-tree-board .ag-list li{
  background:transparent; padding:0; border-radius:0;
}
.feat-tree-board .ag-saved{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-2);
}
.ag-card{
  appearance:none; border:0; width:100%; margin:0;
  display:flex; flex-direction:column; align-items:stretch;
  text-align:left; cursor:pointer; font:inherit; color:inherit;
  --r:12px;
  background:var(--paper); border-radius:var(--r);
  padding:12px;
  border:1px solid transparent;
  box-shadow:var(--elev-1-soft);
  transition:transform 280ms var(--e-out), box-shadow 280ms var(--e-out),
             background 280ms var(--e-out), border-color 280ms var(--e-out);
}
.ag-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--elev-3), var(--elev-1-soft);
}
.ag-card:focus-visible{outline:var(--focus-w) solid var(--green-ink); outline-offset:var(--focus-offset)}
.ag-card.is-next{
  background:var(--green-lite);
  border-color:color-mix(in srgb,var(--green) 28%, var(--line));
}
.ag-card.is-next .ag-face{color:var(--green-ink); background:#fff}
.ag-copy{min-width:0; flex:1}
.ag-copy b{
  font-size:14px; font-weight:700; letter-spacing:-.03em; line-height:1.2;
}
.ag-copy em{
  margin-top:3px; font-size:12.5px; color:var(--ink-2);
}
.ag-event-top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-2);
}
.ag-pill{
  flex:none;
  font-family:var(--font-mono);
  font-size:10px; font-weight:600; letter-spacing:.02em;
  color:var(--green-ink);
  background:#fff; border-radius:var(--r-pill);
  padding:4px 8px; line-height:1.2;
}
.ag-card:not(.is-next) .ag-pill{
  color:var(--ink-2); background:rgba(255,255,255,.72);
}
.ag-meta{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:10px;
}
.ag-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 8px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  font-size:11px; font-weight:600; color:var(--ink-2); line-height:1.2;
}
.ag-chip svg{
  width:13px; height:13px; flex:none;
  stroke:currentColor; color:var(--ico-pencil);
}
.ag-saved li{height:100%; display:flex}
.ag-mini{
  flex:1;
  align-items:flex-start;
  gap:var(--space-2);
}
.ag-face{
  width:32px; height:32px; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:#fff; color:var(--ico-pencil); flex:none;
}
.ag-face svg{width:16px; height:16px; stroke:currentColor}
.ag-mini b{font-size:13.5px; font-weight:700; letter-spacing:-.02em}
.ag-mini em{margin:0; font-size:11px}
.ag-mini .ag-chip{margin-top:auto}
.ag-bar{
  display:block; height:6px; margin-top:12px;
  background:color-mix(in srgb, var(--paper-2) 70%, #fff);
  border-radius:var(--r-pill); overflow:hidden;
}
.ag-bar i{
  display:block; height:100%; width:0;
  border-radius:inherit; background:var(--green);
  transition:width 720ms var(--e-io);
}
.lt-agenda.is-in .ag-bar i,
.lt-agenda.reveal.is-in .ag-bar i{width:var(--p)}
@media (prefers-reduced-motion:reduce){
  .ag-card:hover{transform:none}
  .ag-bar i{width:var(--p); transition:none}
}
.feat-tree-lock{
  display:flex; align-items:center; gap:var(--space-2);
  margin:0; padding:12px 16px 8px;
  font-size:12.5px; color:var(--ink-2);
}
.feat-tree-lock svg{width:16px; height:16px; color:var(--ico-pencil); flex:none}

@media(max-width:900px){
  .feat-pin{grid-template-columns:1fr; column-gap:0; row-gap:12px}
  .feat-stick{display:contents; position:static}
  #features .feat-stick .sec-head{grid-column:auto; padding:0; margin-bottom:28px}
  #features .feat-stick .sec-head::before{display:none}
  .feat-phone{position:sticky; top:76px; z-index:4; grid-column:auto}
  .feat-moments{padding-top:0; grid-column:auto; grid-row:auto}
  .feat-well{height:min(42vh, 380px); padding:22px 18px 0}
  .feat-moment{
    min-height:0; padding:28px 0 72px; max-width:none; opacity:1;
  }
  .feat-tree-board{grid-template-columns:1fr}
  .feat-tree-copy{padding:22px 18px 4px}
}
@media (prefers-reduced-motion:reduce){
  .feat-moment,.fx-seq,.fx-seq-list li,.feat-well{transition:none}
}

/* ============================================================
   FEATURES — three-col story (live). Copy / phone / steps.
   The sticky scroll-story classes above stay for xtras/xtra-sections.html.
   ============================================================ */
.story{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  column-gap:clamp(20px,2.8vw,40px);
  align-items:center;
}
.story-copy{
  min-width:0; max-width:none;
  container-type:inline-size;
  text-align:left;
}
.story-copy .eyebrow{justify-content:flex-start; margin-bottom:16px}
.story-copy h2{
  text-align:left; margin:0; max-width:none;
  font-size:64px; line-height:.95; letter-spacing:-.03em;
}
.story-copy h2 .line-reveal__line{
  text-align:left;
  padding-top:.18em; padding-bottom:.22em;
  margin-top:-.18em; margin-bottom:-.2em;
}
.story-copy .line-reveal--flow .line-reveal__line > span{
  display:inline-block; white-space:normal; max-width:100%;
}
.story-lede{
  display:flex; flex-direction:column; gap:var(--space-3);
  margin:22px 0 0;
}
.story-lede p{
  margin:0; max-width:none;
  font-size:17px; line-height:1.55; color:var(--ink-2);
}
.story-lede b{font-weight:600; color:var(--ink)}
.story-copy .btn{margin-top:28px}
.story-stage{min-width:0; display:flex; justify-content:center}
.story-phone{
  --ps:.88; --nat-w:380px; --nat-h:790px;
  position:relative;
}
/* Same story bars as the hero: on the wallpaper, just under the chat
   header. Hit area stays 44px; the chrome is still the 3px rule. */
.story-phone .transport,
.hc-phone .transport{
  position:absolute; z-index:6;
  left:50%; transform:translateX(-50%);
  width:auto; margin:0; gap:0; align-items:center;
}
.story-phone .transport{top:calc(var(--nat-h) * var(--ps) * .162)}
.hc-phone .transport{bottom:8px}
.story-phone .trow,
.hc-phone .trow{
  height:auto; gap:0; padding:0;
  background:transparent; border:0; box-shadow:none;
}
.story-phone .segs,
.hc-phone .segs{
  width:calc(var(--seg-n, 3) * 48px);
  flex:none; gap:5px;
}
.story-phone .segs{--seg-n:4}
.story-phone .seg,
.hc-phone .seg{padding-block:20.5px; min-height:44px}
.story-phone .phone-slide{
  position:relative;
  width:calc(var(--nat-w) * var(--ps));
  height:calc(var(--nat-h) * var(--ps));
  display:flex; justify-content:center; align-items:flex-start;
}
.story-phone .phone{
  transform-origin:top center; transform:scale(var(--ps));
}
.story-side{min-width:0; display:flex; flex-direction:column; gap:22px}
.story-side .lt-cal-board{
  --lt-pad-t:12px;
  --lt-pad-b:12px;
  --lt-p:0;
  position:relative;
  padding:var(--lt-pad-t) 0 var(--lt-pad-b);
}
.story-side .lt-cal-row{
  width:100%;
  margin:0; padding:0;
  border:0; background:transparent;
  font:inherit; color:inherit;
  text-align:left; cursor:pointer;
}
.story-side .lt-cal-row:focus-visible{
  outline:var(--focus-w) solid var(--green-ink);
  outline-offset:var(--focus-offset-lg);
  border-radius:var(--r-sm);
}
.story-side .lt-cal-copy b{font-size:15px}
.story-side .lt-cal-copy em{font-size:13.5px; line-height:1.4}
.story-chain{
  --r:16px; --r-pad:16px;
  padding:var(--r-pad);
  border-radius:var(--r-outer);
  background:#fff;
  box-shadow:0 10px 28px -20px rgba(17,27,33,.28),
             0 0 0 .5px rgba(17,27,33,.06);
}
.story-chain > p{
  margin:0 0 14px;
  font-size:13.5px; line-height:1.45; color:var(--ink);
  font-weight:500;
}
.story-chain ul{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.story-chain li{
  display:flex; align-items:center; gap:var(--space-2);
  font-size:13.5px; font-weight:600; color:var(--ink);
}
.story-chain li[aria-hidden]{
  color:var(--green);
  padding:0;
}
.story-chain li[aria-hidden] svg{width:16px; height:16px}
.story-ch-ico{
  width:36px; height:36px; border-radius:var(--r-full);
  display:grid; place-items:center; flex:none;
}
.story-ch-ico svg{width:18px; height:18px}
.story-ch-ico.wa{background:var(--green); color:var(--ink-invert)}
.story-ch-ico.wa svg{fill:currentColor}
.story-ch-ico.sms{background:#3B82F6; color:var(--ink-invert)}
.story-ch-ico.call{background:#7BD389; color:var(--green-ink)}
.story-note{
  margin:0;
  font-size:13.5px; line-height:1.45; color:var(--ink-2);
}
#testimonials .quote-grid,
#testimonials .story-side{overflow:visible}
#testimonials .quote-grid{
  position:relative;
  z-index:2;
  transform:translateY(48px);
}
#testimonials .story-side{
  align-self:stretch;
  justify-content:flex-end;
  gap:8px;
}
#testimonials .story-side-art{
  display:block;
  width:100%;
  height:auto;
  max-height:42%;
  margin-top:0;
  object-fit:contain;
  object-position:center bottom;
  pointer-events:none;
}
#testimonials .quote-grid-list{
  display:flex;
  flex-direction:column;
  align-items:center;
  list-style:none; margin:0; padding:10px 4px 0;
}
#testimonials .quote-grid-list > li{
  position:relative;
  width:75%;
  min-width:0;
  display:flex;
}
#testimonials .quote-grid-list > li:nth-child(1){
  align-self:flex-start;
  z-index:1;
}
#testimonials .quote-grid-list > li:nth-child(1) .lt-cal-card{transform:rotate(-9deg)}
#testimonials .quote-grid-list > li:nth-child(2){
  align-self:flex-end;
  margin-top:26px;
  z-index:2;
}
#testimonials .quote-grid-list > li:nth-child(2) .lt-cal-card{transform:rotate(8deg)}
#testimonials .quote-grid-list > li:nth-child(3){
  width:62%;
  align-self:flex-start;
  margin-top:var(--space-2);
  z-index:3;
}
#testimonials .quote-grid-list > li:nth-child(3) .lt-cal-card{
  transform:rotate(-0.6deg);
}
#testimonials .quote-grid-list > li:nth-child(4){
  width:70%;
  align-self:flex-start;
  margin-left:10%;
  margin-top:var(--space-2);
  z-index:4;
}
#testimonials .quote-grid-list > li:nth-child(4) .lt-cal-card{transform:rotate(6.5deg)}
#testimonials .quote-grid-list > li:has(.is-next){z-index:8}
#testimonials .quote-grid .lt-cal-row{
  display:flex; flex:1; width:100%; min-width:0;
  --quote-p:0;
  overflow:visible;
}
#testimonials .quote-grid .lt-cal-card{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  justify-content:flex-start;
  gap:var(--space-3);
  width:100%;
  overflow:visible;
  padding:var(--space-4) 14px var(--space-3);
  border-radius:var(--r-xs);
  transform-origin:center center;
  box-shadow:
    0 1px 1px rgba(17,27,33,.08),
    0 10px 18px -8px rgba(17,27,33,.22),
    0 22px 36px -14px rgba(17,27,33,.2);
}
#testimonials .quote-grid .lt-cal-copy{
  flex:1; min-width:0;
}
#testimonials .quote-grid .lt-cal-ico{
  margin-top:1px;
}
#testimonials .quote-grid .lt-cal-copy b,
#testimonials .quote-grid .lt-cal-copy em{
  font-family:var(--font-note);
  font-weight:400;
  letter-spacing:0;
  color:var(--note-ink);
}
#testimonials .quote-grid .lt-cal-copy b{font-size:22px; line-height:1.05}
#testimonials .quote-grid .lt-cal-copy em{
  font-size:16px; line-height:1.25; color:var(--note-ink-2); margin-top:4px;
}
#testimonials .quote-grid .lt-cal-ico{color:var(--note-lab)}
#testimonials .quote-grid .lt-cal-row.is-next .lt-cal-copy em{
  color:color-mix(in srgb, #5c4e1e 70%, var(--green-ink));
}
#testimonials .quote-grid .lt-cal-row.is-next .lt-cal-card{
  background-color:#F6E27A;
  background-image:linear-gradient(
    to right,
    color-mix(in srgb, var(--upnext-tint) 42%, #F6E27A) calc(var(--quote-p, 0) * 100%),
    #F6E27A calc(var(--quote-p, 0) * 100%)
  );
  border-color:#ead56a;
  box-shadow:
    0 2px 3px rgba(17,27,33,.1),
    0 14px 24px -8px rgba(17,27,33,.26),
    0 28px 44px -16px rgba(17,27,33,.22);
}
@media (prefers-reduced-motion:reduce){
  #testimonials .quote-grid .lt-cal-row{transition:none}
  #testimonials .quote-grid-list > li .lt-cal-card{transform:none}
  #testimonials .quote-grid-list > li{margin-top:0; margin-left:0; width:75%; align-self:center}
}

@media(max-width:1080px){
  .story{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    row-gap:36px;
  }
  .story-copy{grid-column:1 / -1; max-width:none}
}
@media(max-width:900px){
  #testimonials .quote-grid{transform:none}
  .story{grid-template-columns:1fr; row-gap:28px}
  .story-copy{max-width:none}
  .story-copy h2{font-size:40px}
  .story-copy .line-reveal--flow .line-reveal__line > span{white-space:normal; max-width:100%}
  .story-phone{--ps:.8}
}

/* ============================================================
   REAL EXAMPLES — four-phone grid. Same glass recipe as .tc,
   with a pale category wash so the row reads like the four
   situations rather than four identical beige cards.
   ============================================================ */
#examples .sec-head{position:relative}
.ex-scribble{
  position:absolute; right:0; top:18px;
  margin:0;
  font-family:var(--font-note);
  font-weight:400; font-size:22px; line-height:1.12;
  color:var(--green-ink);
  transform:rotate(-8deg);
  pointer-events:none;
}
.ex-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-4);
  align-items:stretch;
}
.ex-card{
  --glass-mx:50%; --glass-my:0%;
  --ex-tint:var(--cat-work-a);
  position:relative; isolation:isolate;
  min-width:0;
  display:flex; flex-direction:column;
  text-align:left;
  overflow:hidden;
  padding:22px 8px 0;
  border-radius:var(--r-lg);
  background:color-mix(in srgb,var(--ex-tint) 26%, color-mix(in srgb,var(--card) 70%, transparent));
  border:1px solid var(--glass-rim);
  box-shadow:var(--rim-top-soft), var(--rim-inner), var(--elev-panel);
  backdrop-filter:var(--glass-card);
  -webkit-backdrop-filter:var(--glass-card);
  transition:transform 480ms var(--e-out), box-shadow 480ms var(--e-out),
             border-color 480ms var(--e-out);
}
.ex-card.ex-work{--ex-tint:var(--cat-work-a)}
.ex-card.ex-home{--ex-tint:#E8B89A}
.ex-card.ex-later{--ex-tint:var(--cat-ideas-a)}
.ex-card.ex-day{--ex-tint:var(--cat-life-a)}
.ex-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:
    radial-gradient(420px circle at var(--glass-mx) var(--glass-my), rgba(255,255,255,.5), transparent 46%),
    linear-gradient(135deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 40%, transparent 68%);
  opacity:.5; transition:opacity 480ms var(--e-out);
}
.ex-card::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:#fff; opacity:0; transition:opacity 480ms var(--e-out);
}
.ex-card > *{position:relative; z-index:1}
.ex-card:hover{
  transform:translate3d(0,-3px,0);
  border-color:var(--glass-rim-hi);
  box-shadow:var(--rim-top), var(--elev-5);
}
.ex-card:hover::before{opacity:.72}
.ex-card:hover::after{opacity:.28}
.ex-ico{
  width:36px; height:36px; border-radius:var(--r-sm);
  display:grid; place-items:center;
  margin:0 8px 12px;
  background:color-mix(in srgb,var(--ex-tint) 32%, #fff);
  color:var(--ico-pencil);
}
.ex-ico svg{width:20px; height:20px}
.ex-card h3{
  margin:0 8px 6px;
  font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.2;
}
.ex-card > p{
  margin:0 8px 14px;
  font-size:13.5px; line-height:1.5; color:var(--ink-2);
}
.ex-phone{
  --nat-w:380px;
  --nat-h:790px;
  --crop:.68;
  container-type:inline-size;
  width:100%;
  margin-top:auto;
  display:flex; justify-content:center;
}
.ex-phone .phone-slide{
  --ps:calc(100cqw / var(--nat-w));
  position:relative;
  width:calc(var(--nat-w) * var(--ps));
  height:calc(var(--nat-h) * var(--ps) * var(--crop));
  overflow:hidden;
  display:flex; justify-content:center; align-items:flex-start;
}
.ex-phone .phone{
  transform-origin:top center;
  transform:scale(var(--ps));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 0 0 1px #26262B;
}
.ex-phone .thread{justify-content:flex-start; padding-top:10px}
.ex-phone .comp,
.ex-phone .homebar{display:none}
.ex-note{
  --r:var(--r-md);
  --r-pad:14px;
  margin:22px 0 0;
  padding:var(--r-pad) 20px;
  border-radius:var(--r-outer);
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:color-mix(in srgb,var(--green-lite) 72%, var(--card));
  border:1px solid var(--glass-rim-hi);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  color:var(--ink-2);
  font-size:13.5px; line-height:1.45; text-align:center;
}
.ex-note svg{
  width:18px; height:18px; flex:none;
  color:var(--ico-pencil);
}
@media(max-width:1080px){
  .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ex-scribble{display:none}
}
@media(max-width:640px){
  .ex-grid{grid-template-columns:1fr}
}

.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4)}
.fcard{padding:24px 22px 22px; display:flex; flex-direction:column}
.fcard h3{font-size:17px; font-weight:700; letter-spacing:-.02em; margin-bottom:7px}
.fcard > p{font-size:13.5px; line-height:1.55; color:var(--ink-2)}
.fstage{
  --r:8px;
  --r-pad:12px;
  margin-top:20px; flex:1; min-height:196px; border-radius:var(--r-outer);
  font-family:var(--font-wa); font-variation-settings:normal;
  background-color:var(--wa-wallpaper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C8BDAE' stroke-width='1' stroke-linecap='round' opacity='.3'%3E%3Cpath d='M14 18h10M19 13v10'/%3E%3Ccircle cx='92' cy='22' r='5'/%3E%3Cpath d='M40 40q6-8 12 0t12 0'/%3E%3Cpath d='M96 54v9M91.5 58.5h9'/%3E%3Cpath d='M18 62c0-4 3-7 7-7s7 3 7 7-3 7-7 7h-3l-4 3v-3z'/%3E%3Cpath d='M62 82h12M68 76v12'/%3E%3Ccircle cx='30' cy='100' r='4.5'/%3E%3Cpath d='M84 96l5 5 8-9'/%3E%3Cpath d='M50 16v8M46 20h8'/%3E%3Cpath d='M104 82q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E"); background-size:104px 104px; border:1px solid var(--line);
  padding:var(--r-pad); display:flex; flex-direction:column; gap:6px; overflow:hidden;
  position:relative;
}
/* escalation and LifeTree anchor to the bottom of their stage, same as
   card 4's automation receipt — a new line pushes the earlier ones up,
   rather than the stack building down from the top */
#fx-esc,#fx-lt{justify-content:flex-end}
@media(max-width:980px){.feat{grid-template-columns:1fr}}

/* --- mini chat bubbles, same grammar as the phone --- */
.mb{
  position:relative; max-width:86%; align-self:flex-start;
  background:#fff; color:var(--ink); padding:6px 9px; border-radius:7px 7px 7px 0;
  font-family:var(--font-wa); font-size:13px; font-weight:400; line-height:18px;
  letter-spacing:0; box-shadow:var(--elev-1);
  margin-left:6px;
  transform-origin:0 100%;
  transition:transform 520ms cubic-bezier(.32,1.45,.64,1), opacity 140ms ease-out;
}
.mb::before{content:""; position:absolute; left:-6px; bottom:0; width:6px; height:10px;
  background:#fff; clip-path:polygon(100% 0,100% 100%,0 100%)}
.mb.me{align-self:flex-end; background:var(--wa-bubble-out); border-radius:7px 7px 0 7px;
  margin-left:0; margin-right:6px; transform-origin:100% 100%}
.mb.me::before{left:auto; right:-6px; background:var(--wa-bubble-out);
  clip-path:polygon(0 0,0 100%,100% 100%)}
.mb.is-new{opacity:0; transform:scale(.28)}
/* a small system note, centered, no tail — the escalation/expiry aside that
   isn't either side of the conversation, same grammar as the phone's .bub.sys */
.mb.sys{
  align-self:center; max-width:92%; text-align:center; margin:2px 6px;
  background:rgba(255,255,255,.92); color:var(--ink-2);
  font-size:12.5px; font-weight:400; letter-spacing:0;
  transform-origin:50% 50%;
}
.mb.sys.is-new{transform:scale(.92) translateY(8px)}
.mb.sys::before{display:none}
.mb .k{
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px;
  color:var(--ink-2);
}
/* direct child only — .wave's own <i> bars are further nested inside .k
   and must not pick up the icon-box treatment meant for .k's own icon */
.mb .k > i{width:17px; height:17px; border-radius:5px; background:var(--paper-2);
  display:grid; place-items:center; flex:none}
.mb .k > i svg{width:10px; height:10px; fill:var(--ink-2)}
.mb .ok{color:var(--green-ink); font-weight:600}
/* the voice-note waveform — thin, dense, dark bars (WhatsApp's own voice
   message register) rather than the earlier thicker green-tinted ones */
.wave{display:inline-flex; align-items:center; gap:1.5px; height:14px; margin:0 5px}
.wave i{width:1px; border-radius:1px; background:var(--ink); opacity:.7;
  animation:wv 1.1s var(--e-io) infinite}
.wave i:nth-child(1){height:4px;  animation-delay:0ms}
.wave i:nth-child(2){height:9px;  animation-delay:60ms}
.wave i:nth-child(3){height:5px;  animation-delay:120ms}
.wave i:nth-child(4){height:12px; animation-delay:180ms}
.wave i:nth-child(5){height:7px;  animation-delay:240ms}
.wave i:nth-child(6){height:14px; animation-delay:300ms}
.wave i:nth-child(7){height:6px;  animation-delay:360ms}
.wave i:nth-child(8){height:10px; animation-delay:420ms}
.wave i:nth-child(9){height:4px;  animation-delay:480ms}
.wave i:nth-child(10){height:13px; animation-delay:540ms}
.wave i:nth-child(11){height:8px;  animation-delay:600ms}
.wave i:nth-child(12){height:5px;  animation-delay:660ms}
.wave i:nth-child(13){height:11px; animation-delay:720ms}
.wave i:nth-child(14){height:6px;  animation-delay:780ms}
.wave i:nth-child(15){height:9px;  animation-delay:840ms}
.wave i:nth-child(16){height:4px;  animation-delay:900ms}
@keyframes wv{0%,100%{transform:scaleY(.6)} 50%{transform:scaleY(1)}}

/* --- card 2: recall search --- */
.fstage.plain{background-image:none; background-color:var(--paper); gap:8px; justify-content:flex-start}
.sbox{
  display:flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 14px;
  box-shadow:0 1px 2px rgba(17,27,33,.05); flex:none;
}
.sbox svg{width:14px; height:14px; fill:none; stroke:var(--muted); stroke-width:2;
  stroke-linecap:round; flex:none}
.sbox span{font-size:12.5px; color:var(--ink); min-height:16px}
.sbox .caret{display:inline-block; width:1.5px; height:13px; background:var(--green-ink);
  vertical-align:-2px; margin-left:1px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.srow{
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--paper-2); border:1px solid transparent; border-radius:10px;
  padding:10px 12px; font-size:12.5px; color:var(--muted);
  transition:background var(--t3) var(--e-out), color var(--t3) var(--e-out),
             box-shadow var(--t3) var(--e-out), transform var(--t3) var(--e-out),
             opacity var(--t3) var(--e-out);
}
.srow.hit{
  background:#fff; color:var(--ink); font-weight:500;
  border-color:var(--line); box-shadow:0 4px 14px -6px rgba(17,27,33,.28);
  transform:translateX(2px);
}
.srow.dim{opacity:.45}
.srow .tick{margin-left:auto; width:15px; height:15px; border-radius:4px; background:var(--green);
  display:none; place-items:center; flex:none}
.srow.hit .tick{display:grid}
.srow .tick svg{width:9px; height:9px; fill:none; stroke:#fff; stroke-width:2.6;
  stroke-linecap:round; stroke-linejoin:round}

/* --- card 3: categories --- */
/* colour-coded like a real category view, not a neutral chip — matches the
   gradient pill treatment on the local build's "second brain" card */
.cats{display:flex; flex-wrap:wrap; gap:7px; flex:none}
.cat{
  display:inline-flex; align-items:center; gap:7px; color:var(--ink-invert);
  border:0; border-radius:var(--r-pill); padding:7px 13px;
  font-size:12.5px; font-weight:600; box-shadow:0 4px 12px -5px rgba(17,27,33,.4);
  transition:transform var(--t2) var(--e-out), box-shadow var(--t2) var(--e-out);
}
.cat[data-c="Health"]{background:var(--cat-health)}
.cat[data-c="Work"]{background:var(--cat-work)}
.cat[data-c="Ideas"]{background:var(--cat-ideas)}
.cat.pop{transform:translateY(-2px); box-shadow:0 8px 16px -6px rgba(17,27,33,.4)}
.cat b{font-family:var(--font-wa); font-size:11px; font-weight:600;
  color:var(--ink-invert); background:rgba(255,255,255,.32); border-radius:var(--r-pill); padding:2px 6px;
  font-variant-numeric:tabular-nums}
.saved{margin-top:10px; display:flex; flex-direction:column; gap:5px}
.saved div{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:9px; padding:8px 10px; font-size:12px; color:var(--ink-2);
  transition:opacity var(--t3) var(--e-out), transform var(--t3) var(--e-out);
}
.saved div.is-new{opacity:0; transform:translateY(6px)}
.saved div i{width:18px; height:18px; border-radius:5px; background:var(--paper-2);
  display:grid; place-items:center; flex:none}
.saved div i svg{width:10px; height:10px; fill:var(--ink-2)}
.saved div em{margin-left:auto; font-style:normal; font-family:var(--font-wa);
  font-size:11px; letter-spacing:0; font-weight:500; color:var(--muted)}

/* --- card 4: automation receipt --- */
.autostage{
  background-color:var(--wa-wallpaper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C8BDAE' stroke-width='1' stroke-linecap='round' opacity='.3'%3E%3Cpath d='M14 18h10M19 13v10'/%3E%3Ccircle cx='92' cy='22' r='5'/%3E%3Cpath d='M40 40q6-8 12 0t12 0'/%3E%3Cpath d='M96 54v9M91.5 58.5h9'/%3E%3Cpath d='M18 62c0-4 3-7 7-7s7 3 7 7-3 7-7 7h-3l-4 3v-3z'/%3E%3Cpath d='M62 82h12M68 76v12'/%3E%3Ccircle cx='30' cy='100' r='4.5'/%3E%3Cpath d='M84 96l5 5 8-9'/%3E%3Cpath d='M50 16v8M46 20h8'/%3E%3Cpath d='M104 82q5-6 10 0'/%3E%3C/g%3E%3C/svg%3E"); background-size:104px 104px; border:1px solid var(--line); border-radius:14px;
  padding:16px 14px; display:flex; flex-direction:column; gap:8px; min-height:178px;
  justify-content:flex-end;
}
.receipt{
  display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:12px 13px; box-shadow:0 3px 12px -6px rgba(17,27,33,.24);
  transition:opacity var(--t4) var(--e-out), transform var(--t4) var(--e-out);
}
.receipt.is-new{opacity:0; transform:translateY(10px)}
.receipt > i{width:32px; height:32px; border-radius:9px; background:#E8F0FE;
  display:grid; place-items:center; flex:none}
.receipt > i svg{width:15px; height:15px; fill:#3B6FD4}
.receipt .txt{min-width:0}
.receipt .txt b{display:block; font-size:13px; font-weight:600; letter-spacing:-.01em}
.receipt .txt span{display:block; font-size:11.5px; color:var(--green-ink); font-weight:600; margin-top:2px}
.receipt .chan{
  margin-left:auto; flex:none; font-family:var(--font-wa); font-size:11px;
  font-weight:600; letter-spacing:0; color:#3B6FD4; background:#E8F0FE;
  border-radius:999px; padding:5px 9px;
}

  .verbadge{
    position:fixed; left:12px; bottom:12px; z-index:999;
    display:inline-flex; align-items:center; gap:7px;
    padding:6px 10px; border-radius:2px;
    background:#111B21; color:var(--ink-invert); border:1px solid var(--glass-rim-dark);
    font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
    letter-spacing:.14em; text-transform:uppercase;
    pointer-events:none; opacity:.72;
    transition:opacity var(--t2) var(--e-io);
  }
  .verbadge b{ color:var(--green); font-weight:700; }
  .verbadge i{ font-style:normal; color:#FFD400; font-weight:700; }
  @media print{ .verbadge{ display:none; } }

/* WhatsApp mock windows — Inter only. !important beats JetBrains
   Mono on nested labels (.cat b, .receipt .chan, .saved em, .pill). */
.phone, .phone *,
.fstage, .fstage *,
.tc-convo, .tc-convo *,
.tc-esc, .tc-esc *,
.mb, .mb *{
  font-family:var(--font-wa) !important;
  font-variation-settings:normal !important;
}