/* =========================================================================
   POSTLOCK — redesign · "working papers, not a dashboard"
   Plain HTML + CSS. Drop straight in. Tokens at :root.
   ========================================================================= */
:root{
  color-scheme:light only;
  /* — surfaces — */
  --paper:#FAF8F1;        /* page background (warm off-white) */
  --paper-sunk:#F2EEE2;   /* alt section / sunken fields */
  --panel:#FFFFFF;        /* cards & panels */
  /* — ink & text — */
  --ink:#14241B;          /* primary text, nav */
  --ink-soft:#33453B;     /* secondary text / leads */
  --muted:#5C6B62;        /* meta, labels */
  /* — brand — */
  --ledger:#2C6049;       /* primary green */
  --ledger-deep:#1C4131;  /* hover / deep */
  --tick:#2F9E6E;         /* success */
  --tick-text:#1F7A52;    /* FIX (review #3): AA-contrast green for text on paper */
  --gold-text:#7D621F;    /* FIX (review #3): AA-contrast gold for text on paper */
  --alert:#B23A2E;        /* changes / risk */
  --amber:#B07A1E;        /* in-progress */
  --gold:#9A7B2E;         /* signature accent — ledger gold */
  --gold-wash:#FBF3DF;    /* gold tint */
  --alert-wash:#FBEEEB;   /* red tint */
  /* — lines — */
  --rule:#E7E1D2;         /* hairline */
  --rule-strong:#D7D0BC;  /* stronger hairline */
  /* — type — */
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  /* — depth — */
  --shadow-sm:0 1px 2px rgba(20,36,27,.05),0 1px 0 rgba(20,36,27,.02);
  --shadow-md:0 8px 22px rgba(20,36,27,.07),0 2px 6px rgba(20,36,27,.05);
  --shadow-lg:0 28px 60px -18px rgba(20,36,27,.30),0 6px 18px rgba(20,36,27,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
/* overflow-x:clip (not hidden) stops sideways scroll WITHOUT creating a scroll
   container — so position:sticky on the header keeps working (stays pinned). */
html{background:var(--paper);-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
/* paper grain (Phase 2.2, MASTERPLAN §6.2) — a barely-there fractal-noise
   texture, evoking actual paper rather than a flat colour fill. Fixed +
   z-index:-1 so it paints behind normal content without touching any other
   element's position/stacking (no blast radius into the rest of the page). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.025;mix-blend-mode:multiply;
  background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="180"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E')}
@media print{body::before{display:none}}
.mono{font-family:var(--mono)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit}
/* FIX (review #5): visible keyboard focus for links/buttons (inputs already have one) */
:where(a,button,summary,[tabindex]):focus-visible{outline:2px solid var(--ledger);outline-offset:2px;border-radius:4px}
svg{display:block}
.icon{width:1em;height:1em;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none;flex:none}

/* ---------- layout ---------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ledger);font-weight:600;display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);display:inline-block}

/* ---------- logo ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;flex:none}
.brand .word{font-size:1.28rem;line-height:1}
/* full Postlock wordmark lockup (340x96 incl. key underline) */
.brand .logo{height:34px;width:auto;flex:none;display:block}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(250,248,241,.86);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.nav-in{max-width:1140px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.nav-toggle{display:none}
.burger{display:none}
.nav-mtop{display:none}
/* menu — desktop: an inline row */
.nav-menu{display:flex;align-items:center;gap:22px;margin-left:14px;flex:1}
.nav-menu>a,.nav-login{color:var(--ink-soft);text-decoration:none;font-size:.92rem;font-weight:500;position:relative}
.nav-menu>a:hover,.nav-login:hover{color:var(--ink)}
.nav-menu>a.on{color:var(--ink);font-weight:700}
.nav-menu>a.on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--ledger);border-radius:2px}
/* FIX (review #1): .nav-menu>a out-specifies .btn and painted the header CTA
   dark-on-dark (contrast 1.4:1). Restore the button's own text colour. */
.nav-menu>a.btn{color:#fff}
.nav-menu>a.btn:hover{color:#fff}
.nav-spacer{flex:1}
/* expandable sub-sections (Product, Resources) */
.nav-sub{position:relative}
.nav-sub>summary{list-style:none;cursor:pointer;color:var(--ink-soft);font-size:.92rem;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.nav-sub>summary::-webkit-details-marker{display:none}
.nav-sub>summary::after{content:"";width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.55}
.nav-sub>summary:hover{color:var(--ink)}
.nav-sub-menu{display:flex;flex-direction:column}
@media(min-width:861px){
  .nav-sub .nav-sub-menu{position:absolute;top:calc(100% + 12px);left:-12px;min-width:210px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 14px 34px rgba(20,36,28,.13);padding:8px;display:none}
  .nav-sub:hover .nav-sub-menu{display:flex}
  .nav-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}            /* hover bridge */
  .nav-sub-menu a{padding:8px 12px;border-radius:8px;color:var(--ink-soft);text-decoration:none;font-size:.9rem;white-space:nowrap}
  .nav-sub-menu a:hover{background:var(--paper);color:var(--ink)}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--ledger);color:#fff;border:1px solid var(--ledger);border-radius:7px;padding:11px 19px;font-weight:700;font-size:.92rem;text-decoration:none;cursor:pointer;font-family:inherit;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:var(--shadow-sm)}
.btn:hover{background:var(--ledger-deep);border-color:var(--ledger-deep);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn .icon{width:16px;height:16px;stroke-width:2}
.btn.quiet{background:transparent;color:var(--ledger);border-color:var(--rule-strong);box-shadow:none}
.btn.quiet:hover{background:#fff;border-color:var(--ledger);color:var(--ledger-deep);box-shadow:var(--shadow-sm)}
.btn.alert{background:var(--alert);border-color:var(--alert)}
.btn.alert:hover{background:#92281f;border-color:#92281f}
.btn.big{padding:14px 26px;font-size:1rem}
.btn.sm{padding:8px 14px;font-size:.85rem}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 0 56px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,var(--rule) 37px,var(--rule) 38px);
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 78%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 78%);
  opacity:.6}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center}
.hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(2.4rem,4.6vw,3.55rem);line-height:1.02;letter-spacing:-.018em;margin:18px 0 0;max-width:15ch;text-wrap:balance}
.hero h1 .hl{color:var(--alert);font-style:italic}
.hero .lead{font-size:1.18rem;color:var(--ink-soft);max-width:46ch;margin:20px 0 0;line-height:1.5}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:28px}
.hero .ro-line{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:.9rem;color:var(--ink-soft)}
.hero .ro-line .seal{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gold-wash);color:var(--gold);flex:none}
.hero .ro-line .seal .icon{width:16px;height:16px}
.hero .ro-line b{color:var(--ink)}

/* ---------- screenshot frame ---------- */
.shot{border-radius:13px;background:#fff;box-shadow:var(--shadow-lg);border:1px solid var(--rule-strong);overflow:hidden;max-width:100%}
/* Grid/flex layouts must let their columns SHRINK rather than grow to fit a wide
   child (e.g. the financial table inside a .shot). Without this, the column —
   and everything in it, including the hero CTA buttons — pushes wider than the
   phone and gets clipped. The wide table then scrolls inside .screen instead. */
.hero-grid>*,.story>*,.insight>*,.usp>*,.steps>*,.rail>*,.prices>*,.fcards>*,.frow>*{min-width:0}
.shot .chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:linear-gradient(#fff,#F6F3EA);border-bottom:1px solid var(--rule)}
.shot .dot{width:11px;height:11px;border-radius:50%;background:#D9D3C4;flex:none}
.shot .dot:nth-child(1){background:#E0B6B0}.shot .dot:nth-child(2){background:#E3D2A8}.shot .dot:nth-child(3){background:#BFD6C5}
.shot .addr{margin-left:10px;font-family:var(--mono);font-size:.72rem;color:var(--muted);background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:5px 12px;flex:1;min-width:0;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shot .addr .icon{width:13px;height:13px;color:var(--ledger)}
.shot .screen{padding:16px;background:var(--paper);overflow-x:auto}

/* hero artifact wrapper + annotation */
.artifact{position:relative}
.artifact .annot{position:absolute;z-index:3;background:var(--ink);color:#EAF0EB;font-family:var(--mono);font-size:.7rem;line-height:1.35;padding:8px 11px;border-radius:7px;box-shadow:var(--shadow-md);max-width:210px}
.artifact .annot b{color:#fff}
.artifact .annot .ttl{color:var(--gold);letter-spacing:.06em;text-transform:uppercase;font-size:.6rem;display:block;margin-bottom:3px}
.artifact .annot.a1{right:-12px;top:-46px;max-width:230px}
.artifact .annot.a1::after{content:"";position:absolute;right:34px;bottom:-7px;width:13px;height:13px;background:var(--ink);transform:rotate(45deg)}
/* .top — a lighter-touch variant for screenshots embedded in single-column
   copy/shot rows sitewide (Phase 2.2), rather than the hero's wide-grid-only
   offset. Peeks above the top-left corner; safe at any container width. */
.artifact .annot.top{left:20px;right:auto;top:-14px;max-width:230px}
.artifact .annot.top::after{content:"";position:absolute;left:28px;right:auto;bottom:-7px;width:13px;height:13px;background:var(--ink);transform:rotate(45deg)}
@media(max-width:1080px){.artifact .annot.top{position:static;display:inline-block;margin-bottom:10px}.artifact .annot.top::after{display:none}}
@media(max-width:1080px){.artifact .annot.a1{right:0;top:-44px}}

/* ---------- mini panels used inside shots ---------- */
.mp{background:var(--panel);border:1px solid var(--rule);border-radius:9px;overflow:hidden;margin-bottom:11px}
.mp:last-child{margin-bottom:0}
.mp .h{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:10px 13px;border-bottom:1px solid var(--rule);font-size:.85rem;font-weight:700}
.mp .h .t{display:flex;align-items:center;gap:8px}
.mp .h .icon{width:15px;height:15px}
.mp table{width:100%;border-collapse:collapse;font-size:.8rem}
.mp th{font-family:var(--mono);font-size:.6rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:7px 13px;border-bottom:1px solid var(--rule)}
.mp td{padding:8px 13px;border-bottom:1px solid var(--rule);vertical-align:top}
.mp tr:last-child td{border-bottom:none}
.mp td.n{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.r{color:var(--alert)}.g{color:var(--tick-text)}.m{color:var(--muted)}
.memo{font-size:.72rem;color:var(--muted)}
.mp .meta{font-family:var(--mono);font-size:.68rem;color:var(--muted);padding:9px 13px}
.flagrow{background:var(--alert-wash)}
/* FIX (review #2): hero + feature-row shots sit in a half-width column, so their
   illustrative tables clipped the Movement column (the punchline) behind an
   unhinted horizontal scroll well above phone widths. Shrink them earlier. */
@media(max-width:1200px){
  .hero-grid .mp table,.frow .mp table{font-size:.68rem}
  .hero-grid .mp th,.frow .mp th{font-size:.52rem;padding:6px 8px;letter-spacing:.04em}
  .hero-grid .mp td,.frow .mp td{padding:7px 8px}
}
/* On a phone these illustrative app-shot tables would overflow and clip their
   right column — shrink them so the whole "screenshot" fits cleanly. */
@media(max-width:640px){
  .shot .screen{padding:12px}
  .mp .h{font-size:.72rem;padding:8px 9px}
  .mp table{font-size:.57rem}
  .mp th{font-size:.48rem;padding:6px 6px;letter-spacing:.02em}
  .mp td{padding:7px 6px}
  .mp .meta{font-size:.56rem;padding:7px 9px}
}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.66rem;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.chip .icon{width:12px;height:12px;stroke-width:2.2}
.chip.done{color:#1f7a52;background:rgba(47,158,110,.12)}
.chip.doing{color:#8a5f15;background:rgba(176,122,30,.14)}
.chip.todo{color:var(--muted);background:rgba(92,107,98,.12)}
.chip.flag{color:var(--alert);background:var(--alert-wash)}

/* locked-period stamp — the distinctive seal */
.stamp{display:inline-flex;flex-direction:column;gap:1px;border:1.5px solid var(--ledger);border-radius:8px;padding:8px 14px 8px 13px;background:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(44,96,73,.035) 6px,rgba(44,96,73,.035) 7px);color:var(--ledger);position:relative}
.stamp::before{content:"";position:absolute;inset:3px;border:1px solid rgba(44,96,73,.32);border-radius:5px;pointer-events:none}
.stamp .p{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ledger);opacity:.8}
.stamp .s{display:flex;align-items:center;gap:7px;font-weight:800;font-size:.96rem;letter-spacing:.01em}
.stamp .s .icon{width:15px;height:15px;stroke-width:2}
.stamp.flag{border-color:var(--alert);color:var(--alert);background:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(178,58,46,.04) 6px,rgba(178,58,46,.04) 7px)}
.stamp.flag::before{border-color:rgba(178,58,46,.32)}.stamp.flag .p,.stamp.flag .s{color:var(--alert)}
.stamp.muted{border-color:var(--rule-strong);color:var(--muted);background:repeating-linear-gradient(135deg,transparent,transparent 6px,rgba(92,107,98,.035) 6px,rgba(92,107,98,.035) 7px)}
.stamp.muted::before{border-color:rgba(92,107,98,.28)}.stamp.muted .p,.stamp.muted .s{color:var(--muted)}

/* ---------- animated hero (Phase 2.1) ---------- */
/* State toggling: JS sets [data-stage] on .anim-hero to clean|arriving|flagged.
   Structural show/hide works with or without motion; the transition/animation
   declarations are gated behind prefers-reduced-motion so a reduced-motion
   visitor gets instant state changes, never a moving one. */
.anim-hero .anim-meta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted)}
.anim-hero .anim-icon-clean,.anim-hero .anim-icon-flag{display:inline-flex;align-items:center}
.anim-hero .anim-stamp-flag,.anim-hero .anim-icon-flag,.anim-hero .anim-headline-flag,.anim-hero .anim-chip-flag{display:none}
.anim-hero[data-stage="flagged"] .anim-stamp-clean,.anim-hero[data-stage="flagged"] .anim-icon-clean,.anim-hero[data-stage="flagged"] .anim-headline-clean,.anim-hero[data-stage="flagged"] .anim-chip-clean{display:none}
.anim-hero[data-stage="flagged"] .anim-stamp-flag{display:inline}
.anim-hero[data-stage="flagged"] .anim-icon-flag{display:inline-flex}
.anim-hero[data-stage="flagged"] .anim-headline-flag{display:inline}
.anim-hero[data-stage="flagged"] .anim-chip-flag{display:inline-flex}
.anim-hero .anim-doc-panel{opacity:0}
.anim-hero[data-stage="arriving"] .anim-doc-panel,.anim-hero[data-stage="flagged"] .anim-doc-panel{opacity:1}
.anim-hero[data-stage="flagged"] .anim-row{background:var(--alert-wash)}
.anim-hero .anim-annot{opacity:0;pointer-events:none}
.anim-hero[data-stage="flagged"] .anim-annot{opacity:1}
.anim-hero .anim-caption{opacity:0}
.anim-hero[data-stage="flagged"] .anim-caption{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .anim-hero .anim-doc-panel{transform:translateY(6px);transition:opacity .4s ease,transform .4s ease}
  .anim-hero[data-stage="arriving"] .anim-doc-panel,.anim-hero[data-stage="flagged"] .anim-doc-panel{transform:translateY(0)}
  .anim-hero .anim-row{transition:background .3s ease}
  .anim-hero .anim-annot{transition:opacity .4s ease}
  .anim-hero .anim-caption{transition:opacity .5s ease .1s}
  .anim-hero[data-stage="flagged"] .anim-stamp{animation:heroStampThud .4s ease}
}
@keyframes heroStampThud{0%{transform:scale(1.14) rotate(-2deg)}55%{transform:scale(.97) rotate(1deg)}100%{transform:scale(1) rotate(0)}}

/* ---------- generic sections ---------- */
.sec{padding:64px 0;border-top:1px solid var(--rule)}
.sec.sunk{background:var(--paper-sunk)}
.sec h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.75rem,3vw,2.3rem);line-height:1.08;letter-spacing:-.015em;margin-top:12px;text-wrap:balance}
.sec .lead{font-size:1.12rem;color:var(--ink-soft);max-width:62ch;margin-top:14px}
.sec-head{max-width:64ch;margin-bottom:34px}

/* margin-rule motif (Phase 2.2) — a faint red vertical rule in the content
   gutter, referencing a ledger page's ruled margin. Sits inside .wrap's own
   padding so it never risks clipping or overlapping text. Desktop only —
   there's no spare gutter to put it in once columns stack on mobile. */
.sec .wrap,.hero .wrap{position:relative}
@media(min-width:901px){
  .sec .wrap::before,.hero .wrap::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;
    background:linear-gradient(to bottom,transparent,rgba(178,58,46,.16) 14%,rgba(178,58,46,.16) 86%,transparent);pointer-events:none}
}
@media print{.sec .wrap::before,.hero .wrap::before{display:none}}

/* scroll-reveal (Phase 2.2) — classes are JS-added only (see shell() script);
   a section never starts hidden by CSS alone, so no-JS/slow-JS always shows
   content. 250ms rise+fade, no bounce, once. */
@media(prefers-reduced-motion:no-preference){
  .sec.reveal-pending{opacity:0;transform:translateY(16px)}
  .sec.reveal-in{opacity:1;transform:none;transition:opacity .25s ease,transform .25s ease}
}
@media print{.sec.reveal-pending{opacity:1;transform:none}}

/* live-watching pulse (Phase 2.2) — a small dot next to "just now"-style
   copy, hinting the watchdog is actively checking rather than static text. */
.live-pulse{position:relative;padding-left:13px}
.live-pulse::before{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--tick);transform:translateY(-50%)}
@media(prefers-reduced-motion:no-preference){.live-pulse::before{animation:livePulse 2s ease-in-out infinite}}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(47,158,110,.35)}50%{opacity:.65;box-shadow:0 0 0 4px rgba(47,158,110,0)}}

/* story / the fear */
.story{display:grid;grid-template-columns:1fr .92fr;gap:54px;align-items:center}
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--rule-strong)}
.tl{position:relative;padding:0 0 22px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--rule-strong)}
.tl.bad::before{border-color:var(--alert);background:var(--alert)}
.tl .when{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.tl p{color:var(--ink-soft);font-size:1rem}
.tl .em{color:var(--alert);font-weight:700}
.tl .lede{font-family:var(--serif);font-size:1.2rem;color:var(--ink);line-height:1.4}

/* steps (SEE/WHO/FIX) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:8px;counter-reset:s}
.step{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.step::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ledger)}
.step .ic{width:38px;height:38px;border-radius:9px;background:var(--gold-wash);color:var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step .ic .icon{width:20px;height:20px}
.step .k{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ledger);font-weight:600}
.step h3{font-size:1.12rem;font-weight:800;margin:6px 0 6px;letter-spacing:-.01em}
.step p{color:var(--ink-soft);font-size:.95rem}
.roadmap{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);border:1px solid #E6D6B5;background:var(--gold-wash);border-radius:20px;padding:2px 9px;margin-top:8px}

/* USP cards */
.usp{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.ucard{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:30px;box-shadow:var(--shadow-sm);transition:box-shadow .18s,transform .18s;display:flex;flex-direction:column}
.ucard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ucard .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.ucard .ic{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center}
.ucard .ic.green{background:rgba(44,96,73,.10);color:var(--ledger)}
.ucard .ic.red{background:var(--alert-wash);color:var(--alert)}
.ucard .ic .icon{width:24px;height:24px}
.ucard .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:20px;padding:4px 11px}
.ucard h3{font-family:var(--serif);font-weight:600;font-size:1.42rem;letter-spacing:-.01em;margin-bottom:10px}
.ucard p{color:var(--ink-soft);font-size:.98rem}

/* how-it-works rail */
.rail{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:8px;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow-sm)}
.rstep{padding:24px 22px;border-right:1px solid var(--rule);position:relative}
.rstep:last-child{border-right:none}
.rstep .n{font-family:var(--mono);font-size:.72rem;color:var(--ledger);font-weight:600;letter-spacing:.06em}
.rstep .ic{margin:12px 0 12px;color:var(--ledger)}
.rstep .ic .icon{width:24px;height:24px;stroke-width:1.6}
.rstep h3{font-size:1.04rem;font-weight:800;margin-bottom:6px;letter-spacing:-.01em}
.rstep p{color:var(--ink-soft);font-size:.9rem}

/* insight pull */
.insight{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.pull{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.pull .em{color:var(--ledger);font-style:italic}
.memo-card{background:var(--panel);border:1px solid var(--rule);border-radius:12px;padding:20px;box-shadow:var(--shadow-md)}
.memo-card .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:7px}
.memo-card .lbl .icon{width:14px;height:14px;color:var(--gold)}
.memo-card .acct{font-weight:800;font-size:1.02rem;margin-bottom:4px}
.memo-card .bal{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:1.3rem;font-weight:600;color:var(--ledger);margin-bottom:12px}
.memo-card .note{border-top:1px dashed var(--rule-strong);padding-top:12px;color:var(--ink-soft);font-size:.92rem;font-style:italic}
.memo-card .carry{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px}
.memo-card .carry .icon{width:13px;height:13px}

/* trust band */
.trust{background:var(--ink);color:#E8EEE9;border-radius:16px;padding:34px 38px;display:flex;gap:26px;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.trust::after{content:"";position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(47,158,110,.18),transparent 70%)}
.trust .seal{width:58px;height:58px;border-radius:14px;background:rgba(47,158,110,.16);color:var(--tick);display:flex;align-items:center;justify-content:center;flex:none}
.trust .seal .icon{width:30px;height:30px;stroke-width:1.8}
.trust .tx{flex:1;min-width:240px}
.trust .tx b{font-family:var(--serif);font-weight:600;font-size:1.34rem;display:block;letter-spacing:-.01em}
.trust .tx p{color:#9FB3A6;font-size:.95rem;margin-top:5px}
.trust .btn{background:#fff;color:var(--ledger-deep);border-color:#fff}
.trust .btn:hover{background:#EAF0EB;border-color:#EAF0EB}

/* read-only banner row in trust copy */
.facts{display:flex;gap:24px;flex-wrap:wrap;margin-top:18px}
.fact{display:flex;align-items:center;gap:9px;color:#C7D4CA;font-size:.88rem}
.fact .icon{width:17px;height:17px;color:var(--tick)}

/* light proof strip (below the hero) — same layout bones as .trust, paper not ink */
.proof-strip{display:flex;gap:26px;align-items:center;flex-wrap:wrap;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:26px 32px}
.proof-strip .seal{width:48px;height:48px;border-radius:14px;background:rgba(47,158,110,.14);color:var(--tick);display:flex;align-items:center;justify-content:center;flex:none}
.proof-strip .seal .icon{width:26px;height:26px;stroke-width:1.8}
.proof-strip .facts{margin-top:0;gap:28px}
.proof-strip .fact{color:var(--ink-soft);font-size:.92rem;font-weight:500}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);background:#fff;margin-top:0}
.fcols{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:28px;padding:48px 0 30px}
.fbrand p{max-width:34ch;color:var(--muted);font-family:var(--mono);font-size:.78rem;line-height:1.6;margin-top:14px}
.fbrand .ro{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-family:var(--mono);font-size:.74rem;color:var(--ledger);background:rgba(44,96,73,.07);border:1px solid rgba(44,96,73,.15);border-radius:7px;padding:7px 11px}
.fbrand .ro .icon{width:15px;height:15px}
.fcols h4{font-size:.7rem;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:14px;font-weight:600}
.fcols a{display:block;color:var(--muted);text-decoration:none;font-size:.92rem;margin-bottom:11px}
.fcols a:hover{color:var(--ledger)}
.fbar{border-top:1px solid var(--rule);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:20px 0;color:var(--muted);font-size:.82rem;font-family:var(--mono)}
.fbar .lk a{color:var(--muted);text-decoration:none;margin-left:18px}
.fbar .lk a:hover{color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero{padding:46px 0 40px}
  .story,.insight{grid-template-columns:1fr;gap:32px}
  .usp{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr 1fr}
  .rstep{border-bottom:1px solid var(--rule)}
  .rstep:nth-child(odd){border-right:1px solid var(--rule)}
  .rstep:nth-child(even){border-right:none}
  .rstep:nth-last-child(-n+2){border-bottom:none}
}
/* FIX (review #4): between the burger breakpoint (860px) and ~1040px the menu
   wrapped ("Free tools" / "Log in" on two lines) and squashed the CTA. */
@media(min-width:861px) and (max-width:1040px){
  .nav-menu{gap:13px}
  .nav-menu>a,.nav-login,.nav-sub>summary{font-size:.86rem;white-space:nowrap}
  .btn.sm{padding:8px 11px;font-size:.8rem;white-space:nowrap}
}
/* ---- mobile nav: hamburger + slide-in full-screen menu ---- */
@media(max-width:860px){
  /* A blurred/filtered ancestor traps position:fixed children inside its box,
     which would clamp the menu to the header strip — so drop the blur on mobile
     and use a solid header. Also fixes iOS sticky-header drop-out. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper)}
  .nav-in{padding:13px 18px;gap:10px;flex-wrap:nowrap}
  /* burger carries NO z-index (z-index on a sticky child makes iOS Safari
     flicker it out on scroll). It only OPENS the menu; the overlay has its own
     close button — so we never rely on the header once the menu is open. */
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:32px;height:32px;margin-left:auto;cursor:pointer;background:none;border:none}
  .burger span{display:block;height:2.5px;width:24px;background:var(--ink);border-radius:2px}
  /* the open menu is a self-contained fixed overlay (own logo + close X), so the
     scroll-lock un-sticking the header doesn't matter. */
  .nav-menu{position:fixed;inset:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;margin:0;padding:84px 26px 48px;transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;z-index:50}
  .nav-toggle:checked~.nav-menu{transform:translateX(0)}
  .nav-mtop{display:flex;align-items:center;justify-content:space-between;position:absolute;top:13px;left:18px;right:18px}
  .nav-brand-m{display:inline-flex}
  .nav-close{width:30px;height:30px;cursor:pointer;position:relative;flex:none}
  .nav-close::before,.nav-close::after{content:"";position:absolute;top:50%;left:4px;right:4px;height:2.5px;background:var(--ink);border-radius:2px}
  .nav-close::before{transform:rotate(45deg)}
  .nav-close::after{transform:rotate(-45deg)}
  .nav-menu>a,.nav-login,.nav-sub>summary{font-size:1.35rem;font-weight:600;color:var(--ink);padding:15px 0;width:100%;border-bottom:1px solid var(--rule)}
  .nav-menu>a.on::after{display:none}
  .nav-sub{width:100%}
  .nav-sub>summary{display:flex;justify-content:space-between}
  .nav-sub[open]>summary::after{transform:rotate(-135deg);margin-top:2px}
  .nav-sub-menu{padding:4px 0 14px 6px}
  .nav-sub-menu a{padding:11px 0;color:var(--ink-soft);text-decoration:none;font-size:1.08rem;display:block}
  .nav-spacer{display:none}
  .nav-menu>.btn{margin-top:26px;width:100%;text-align:center;justify-content:center;font-size:1.05rem;padding:15px}
  body:has(.nav-toggle:checked){overflow:hidden}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .sec{padding:46px 0}
  .steps{grid-template-columns:1fr}
  .rail{grid-template-columns:1fr}
  .rstep{border-right:none;border-bottom:1px solid var(--rule)}
  .rstep:last-child{border-bottom:none}
  .trust{padding:26px 22px}
  .fcols{grid-template-columns:1fr 1fr;gap:20px}
  .fbrand{grid-column:1/-1}
  .artifact .annot{position:static;max-width:none;margin-bottom:12px}
  .artifact .annot.a1::after{display:none}
}

/* =========================================================================
   EXTENSIONS — feature rows, pricing, schedule callouts, prose/FAQ
   ========================================================================= */

/* page intro hero (no artifact) — features / pricing */
.hero.intro{padding:64px 0 14px}
.hero.intro h1{max-width:20ch}
.hero.intro .lead{max-width:62ch}

/* alternating feature rows */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.frow>*{min-width:0}
.frow.flip .fr-copy{order:2}
.frow .tagline{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.frow .tagline .ic{width:40px;height:40px;border-radius:10px;background:var(--gold-wash);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:none}
.frow .tagline .ic .icon{width:21px;height:21px}
.frow .tagline .tag{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:20px;padding:4px 11px}
.frow h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.55rem,2.6vw,2.05rem);letter-spacing:-.015em;line-height:1.1;margin-bottom:12px}
.frow p{color:var(--ink-soft);font-size:1.04rem}
.frow p b{color:var(--ink)}

/* "ties to GL" callout used inside schedule shots */
.ties{display:flex;align-items:center;gap:9px;padding:11px 14px;font-weight:700;font-size:.84rem;color:var(--tick-text);background:rgba(47,158,110,.10);border:1px solid rgba(47,158,110,.28);border-radius:9px}
.ties .icon{width:17px;height:17px;stroke-width:2.2;color:var(--tick)}

/* progress bar */
.bar{height:7px;background:var(--rule);border-radius:6px;overflow:hidden;margin:4px 0 8px}
.bar i{display:block;height:100%;background:var(--ledger);border-radius:6px}

/* feature cards grid (the "And" trio) */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:var(--panel);border:1px solid var(--rule);border-radius:13px;padding:26px;box-shadow:var(--shadow-sm)}
.fcard .ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;background:rgba(44,96,73,.10);color:var(--ledger)}
.fcard .ic.gold{background:var(--gold-wash);color:var(--gold)}
.fcard .ic.red{background:var(--alert-wash);color:var(--alert)}
.fcard .ic .icon{width:22px;height:22px}
.fcard h3{font-size:1.12rem;font-weight:800;letter-spacing:-.01em;margin-bottom:7px}
.fcard p{color:var(--ink-soft);font-size:.95rem}
.fcard p b{color:var(--ink)}

/* ---------- pricing ---------- */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);position:relative}
.price.feature{border-color:var(--ledger);box-shadow:0 0 0 1.5px var(--ledger),var(--shadow-md);transform:translateY(-6px)}
.price .plan{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ledger);font-weight:600;display:flex;align-items:center;gap:8px}
.price.feature .plan{color:var(--ledger-deep)}
.price .ribbon{position:absolute;top:-12px;right:22px;background:var(--ledger);color:#fff;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:5px 11px;border-radius:20px;box-shadow:var(--shadow-sm)}
.price .amt{font-family:var(--serif);font-weight:600;font-size:2.6rem;letter-spacing:-.02em;line-height:1;margin:16px 0 4px}
.price .amt .from{font-family:var(--mono);font-size:.78rem;font-weight:500;color:var(--muted);letter-spacing:.04em;display:block;margin-bottom:4px}
.price .amt small{font-family:var(--sans);font-size:.92rem;font-weight:500;color:var(--muted)}
.price .blurb{color:var(--ink-soft);font-size:.92rem;margin:6px 0 4px}
.price ul{list-style:none;margin:18px 0 24px;display:flex;flex-direction:column;gap:11px}
.price li{position:relative;padding-left:28px;color:var(--ink-soft);font-size:.95rem}
.price li .icon{position:absolute;left:0;top:2px;width:17px;height:17px;color:var(--tick);stroke-width:2.4}
.price li .soon{font-family:var(--mono);font-size:.6rem;letter-spacing:.04em;color:var(--amber);text-transform:uppercase}
.price .btn{margin-top:auto;justify-content:center}
.price-note{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-top:22px;max-width:80ch;line-height:1.6}

/* free-tier strip above the paid cards */
.drift-strip{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--gold-wash);border:1px solid #E9D9AE;border-radius:14px;padding:20px 26px;margin-bottom:26px}
.drift-strip .dx b{color:var(--ink)}
.drift-strip .dx p{color:var(--ink-soft);font-size:.92rem;margin-top:3px}

/* monthly / annual toggle — CSS-styled buttons, vanilla JS swaps displayed amounts */
.price-toggle{display:inline-flex;background:var(--panel);border:1px solid var(--rule-strong);border-radius:30px;padding:4px;gap:2px;margin-bottom:26px}
.price-toggle button{font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--ink-soft);background:none;border:none;border-radius:24px;padding:9px 18px;cursor:pointer}
.price-toggle button.on{background:var(--ledger);color:#fff}
.price-toggle button .save{font-family:var(--mono);font-size:.68rem;font-weight:600;color:var(--tick);margin-left:6px}
.price-toggle button.on .save{color:#C9F0DC}

/* practice band slider — live client-count -> price */
.price-slider{margin-top:16px;padding-top:16px;border-top:1px dashed var(--rule-strong)}
.price-slider input[type=range]{width:100%;accent-color:var(--ledger);margin:10px 0 6px}
.price-slider .sl-row{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.78rem;color:var(--muted)}
.price-slider .sl-total{font-family:var(--mono);font-weight:700;font-size:1.05rem;color:var(--ledger-deep)}

/* ROI framing block */
.roi-block{background:var(--panel);border:1px solid var(--rule);border-radius:14px;padding:26px 28px;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.roi-block .roi-fig{font-family:var(--serif);font-size:2rem;font-weight:600;color:var(--ledger-deep)}
.roi-block .roi-lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:4px}
@media(max-width:640px){.roi-block{grid-template-columns:1fr}}

/* prose + faq (for guides / about reuse) */
.prose{max-width:68ch}.prose p{margin-bottom:13px;color:var(--ink-soft)}.prose h3{margin:24px 0 8px;font-size:1.12rem;font-weight:800}
.faq dt{font-weight:800;margin-top:18px}.faq dd{color:var(--ink-soft);margin-top:5px}
/* FIX (review #14): pricing objections — mono-bold questions, readable Archivo answers */
.price-faq dt{font-family:var(--mono);font-size:.82rem;letter-spacing:.01em}
.price-faq dd{font-size:.95rem;line-height:1.6}

/* feature rows carry wide 5-column financial tables — stack earlier so shots never clip */
@media(max-width:1080px){
  .frow{grid-template-columns:1fr;gap:30px}
  .frow.flip .fr-copy{order:0}
}
@media(max-width:920px){
  .fcards{grid-template-columns:1fr;gap:16px}
  .prices{grid-template-columns:1fr;gap:18px}
  .price.feature{transform:none}
}

/* ---- "Where it fits" stack diagram (homepage) ----------------------------
   Three layers: Postlock on top, close tools in the middle, the Xero ledger at
   the bottom, with a read-only wire running straight past the tools. A 12s
   CSS loop plays one month: close, lock, agrees, backdated journal lands in
   the ledger, pulse up the wire, Postlock flags it. No JS; reduced motion gets
   the flagged end-state as a still. */
.stackviz{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;gap:18px 16px;max-width:780px;margin:36px auto 0}
.sv-rail{grid-row:1/4;position:relative}
.sv-rail::before{content:"";position:absolute;left:50%;top:26px;bottom:26px;width:2px;background:var(--ledger);opacity:.3;border-radius:2px}
.sv-rail .lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(180deg);writing-mode:vertical-rl;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ledger);background:var(--paper);padding:8px 0;white-space:nowrap}
.sv-rail .pulse{position:absolute;left:50%;top:calc(100% - 34px);width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--alert);opacity:0;box-shadow:0 0 0 4px rgba(178,58,46,.15)}
.sec.sunk .sv-rail .lbl{background:var(--paper-sunk)}
.sv-layer{background:var(--panel);border:1px solid var(--rule-strong);border-radius:13px;padding:16px 20px;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.sv-layer .who{display:flex;align-items:center;gap:9px;font-weight:800}
.sv-layer .who .mark{width:22px;height:22px;flex:none}
.sv-layer .sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--muted);font-weight:400}
.sv-postlock{border-color:var(--ledger);border-width:1.5px}
.sv-status{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;min-height:44px}
.sv-status .slot{display:grid;justify-items:end;align-items:center}
.sv-status .slot>*{grid-area:1/1}
.sv-status .stamp{padding:5px 11px 5px 10px}
.sv-status .stamp .s{font-size:.8rem}
.sv-tools{background:var(--paper-sunk);border-style:dashed;justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:9px}
.sv-tools .chips{display:flex;gap:8px;flex-wrap:wrap}
.sv-tool{font-family:var(--mono);font-size:.7rem;color:var(--ink-soft);background:var(--panel);border:1px solid var(--rule-strong);border-radius:20px;padding:5px 12px}
.sv-xero{border-color:#9fdcf2;background:linear-gradient(#fff,#f4fbfe)}
.sv-xero .xdot{width:20px;height:20px;border-radius:50%;background:#13B5EA;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:.62rem;flex:none}
.sv-docs{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.sv-doc{font-family:var(--mono);font-size:.64rem;color:var(--muted);border:1px solid var(--rule);background:#fff;border-radius:6px;padding:4px 9px}
.sv-doc.rogue{color:var(--alert);border-color:rgba(178,58,46,.4);background:var(--alert-wash);font-weight:600;display:inline-flex;align-items:center;gap:5px;opacity:0}
.sv-doc.rogue .icon{width:12px;height:12px}
/* animated states: hidden at rest, the 12s loop brings each in on cue */
.sv-status .stamp,.sv-status .chip{opacity:0}
.sv-status .chip .icon{width:12px;height:12px;stroke-width:2.2}
@media(prefers-reduced-motion:no-preference){
  .sv-tool{animation:svTool 12s ease-in-out infinite}
  .sv-tool:nth-child(2){animation-delay:.5s}.sv-tool:nth-child(3){animation-delay:1s}.sv-tool:nth-child(4){animation-delay:1.5s}
  .sv-status .stamp{animation:svStamp 12s ease-in-out infinite}
  .sv-status .chip.done{animation:svTick 12s ease-in-out infinite}
  .sv-status .chip.flag{animation:svAlert 12s ease-in-out infinite}
  .sv-doc.rogue{animation:svRogue 12s ease-in-out infinite}
  .sv-rail .pulse{animation:svPulse 12s linear infinite}
  .sv-postlock{animation:svFlash 12s ease-in-out infinite}
}
@keyframes svTool{0%,2%{background:var(--panel)}5%,8%{background:rgba(44,96,73,.12);border-color:var(--ledger)}12%,100%{background:var(--panel)}}
@keyframes svStamp{0%,13%{opacity:0;transform:scale(1.5) rotate(-9deg)}16%,95%{opacity:1;transform:scale(1) rotate(-2deg)}99%,100%{opacity:0}}
@keyframes svTick{0%,20%{opacity:0}24%,52%{opacity:1}56%,100%{opacity:0}}
@keyframes svRogue{0%,48%{opacity:0;transform:translateX(22px)}53%,95%{opacity:1;transform:none}99%,100%{opacity:0}}
@keyframes svPulse{0%,55%{opacity:0;top:calc(100% - 34px)}57%{opacity:1}63%{opacity:1;top:22px}65%,100%{opacity:0}}
@keyframes svAlert{0%,62%{opacity:0}66%,95%{opacity:1}99%,100%{opacity:0}}
@keyframes svFlash{0%,63%{border-color:var(--ledger);box-shadow:var(--shadow-sm)}66%,72%{border-color:var(--alert);box-shadow:0 0 0 4px rgba(178,58,46,.12)}80%,100%{border-color:var(--ledger);box-shadow:var(--shadow-sm)}}
/* reduced motion: show the flagged end-state as a still */
@media(prefers-reduced-motion:reduce){
  .sv-status .stamp,.sv-status .chip.flag,.sv-doc.rogue{opacity:1}
  .sv-status .chip.done{opacity:0}
}
@media(max-width:640px){
  .stackviz{grid-template-columns:1fr;gap:10px}
  .sv-rail{display:none}
  .sv-status{justify-items:start;min-height:0}
  .sv-docs{justify-content:flex-start}
}

/* ---------- floating quick actions (marketing shell only) ---------- */
/* Fixed bottom-right pair: demo + book-a-call, one click from anywhere.
   Rendered by site.js floatCta(); the app shell never includes it. */
.fab{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.fab-a{display:inline-flex;align-items:center;padding:11px 18px;border-radius:999px;font-weight:700;font-size:.92rem;text-decoration:none;border:1px solid transparent;box-shadow:0 6px 18px rgba(31,38,33,.22)}
.fab-a:focus-visible{outline:2px solid var(--ledger);outline-offset:2px}
.fab-demo{background:var(--ledger);color:#fff}
.fab-demo:hover{background:var(--ledger-deep)}
.fab-call{background:#fff;color:var(--ledger);border-color:var(--rule-strong)}
.fab-call:hover{border-color:var(--ledger)}
@media (max-width:640px){
  .fab{left:12px;right:12px;bottom:12px;gap:8px}
  .fab-a{flex:1;justify-content:center;padding:12px 8px;font-size:.86rem}
}
/* label for the in-demo fab ("Like what you see?") */
.fab-note{align-self:center;font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--ink-soft);background:rgba(250,248,241,.92);border:1px solid var(--rule);padding:6px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(31,38,33,.10)}
@media (max-width:640px){.fab-note{display:none}}