/* LogIt marketing site — v2 prototype.
   Direction: base360.ai's airy canvas, tight headlines, per-chapter gradients and live product
   scenes, carried in LogIt's own identity (brand blue ramp, IBM Plex, one fixed light palette). */

:root{
  --canvas:#f7f9fd; --card:#ffffff; --card-2:#f3f6fb; --line:#e3e8f0; --line-2:#d5dde8;
  --ink:#0e1526; --text:#1c2733; --dim:#4d5a68; --faint:#5b6576;
  --brand:#2F74F6; --fill:#1463F5; --blue-ink:#0951D9; --blue-dk:#6F9EF9; --blue-soft:rgba(47,116,246,.10);
  --ok:#15a34a; --ok-ink:#13693a; --warn:#8a5f06; --danger-ink:#a82c46;
  --sans:'IBM Plex Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(16,23,40,.04),0 12px 40px rgba(22,38,74,.10);
  --shadow-lg:0 0 0 1px rgba(20,30,55,.05),0 8px 22px rgba(16,23,40,.06),0 30px 80px rgba(22,38,74,.16);
  --wrap:1160px;
  /* scene overlays and cards: two surfaces only. Glass chips sit on photos; app cards float beside them.
     Blue marks the system and TethraAI, green only the logged state. */
  --scn-glass:rgba(11,20,40,.72); --scn-glass-line:rgba(255,255,255,.16); --scn-glass-ink:#eef3fb; --scn-glass-dim:#9fb0cc;
  --scn-card:#101a33; --scn-card-line:#243356;
  --scn-accent-dk:#6F9EF9; --scn-ok-dk:#4cd391;
  --scn-r-chip:10px; --scn-r-card:16px;
  --scn-shadow-chip:0 6px 16px rgba(8,14,30,.28); --scn-shadow-card:0 20px 48px rgba(8,14,30,.34);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;scrollbar-gutter:stable}   /* the contact dialog's scroll lock never shifts the page */
body{font-family:var(--sans);font-size:17px;line-height:1.55;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left))}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:10px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--fill);outline-offset:3px;border-radius:6px}

/* soft pastel canvas, tinted toward LogIt blue */
/* the page's backdrop: one soft blue glow from the top and a faint teal one lower down.
   No background-colour here: body paints the canvas. Safari 26 fills its status and toolbar bands
   with the colour of a wide fixed box at the edge, so an opaque one would block the page from ever
   showing under the clock (land-of-the-book docs/ios-safari-chrome.md, band rules case I vs J). */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 640px at 50% -10%,rgba(20,99,245,.12),transparent 64%),
    radial-gradient(820px 620px at 90% 72%,rgba(8,145,178,.05),transparent 66%)}
/* On phones the glow belongs to the page top and scrolls away with the hero. Fixed, it peaked at the top
   edge of every screen, and Safari clips fixed layers at the status bar: the band above it showed plain
   canvas under Safari's own fade, a paler strip with a hard seam where the blue began (seen on Owen's
   iPhone, 2026-09-22). In the document, the band and the screen below it are the same page. */
@media (max-width:920px){ body::before{position:absolute;inset:0 0 auto;height:100vh;height:100lvh} }
/* the original site's hairline grid, brought back quietly behind the hero and "Your data" and faded at the edges */
:root{--grid:rgba(14,21,38,.05)}
.hero .glow,.data::before{position:absolute;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:30px 30px;background-position:center top}
.hero .glow{inset:-90px 0 auto;height:760px;
  -webkit-mask-image:radial-gradient(ellipse 62% 72% at 50% 34%,#000 38%,transparent 100%);mask-image:radial-gradient(ellipse 62% 72% at 50% 34%,#000 38%,transparent 100%)}
.data{position:relative;overflow-x:clip}
.data::before{content:"";inset:0;
  -webkit-mask-image:radial-gradient(ellipse 70% 58% at 50% 38%,#000 36%,transparent 100%);mask-image:radial-gradient(ellipse 70% 58% at 50% 38%,#000 36%,transparent 100%)}
/* each chapter's scene sits on its own quiet stage: a soft glow in the chapter's two colours with the same
   hairline grid faded into it. It belongs to the block, not the scene, so the scene rises into a lit spot
   that stays put. Document-anchored like every other glow here (no fixed layers, per the Safari band rules). */
.journey{overflow-x:clip}
/* the stage is centred on the scene column and runs 220px past it each way (clipped at the screen edge):
   ::before carries the two glows, ::after the grid, masked to an ellipse so it thins out before the copy */
.journey .block{position:relative;isolation:isolate}
.journey .block::before,.journey .block::after{content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-70px;bottom:-40px;left:calc(40% - 182px);right:-220px}
.journey .block.flip::before,.journey .block.flip::after{left:-220px;right:calc(40% - 182px)}
.journey .block::before{
  background:radial-gradient(44% 48% at 50% 48%,var(--g1),transparent),radial-gradient(30% 34% at 70% 70%,var(--g2),transparent)}
.journey .block.flip::before{
  background:radial-gradient(44% 48% at 50% 48%,var(--g1),transparent),radial-gradient(30% 34% at 30% 70%,var(--g2),transparent)}
.journey .block::after{
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:30px 30px;background-position:center top;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 48%,#000 38%,transparent);mask-image:radial-gradient(50% 50% at 50% 48%,#000 38%,transparent)}
#on-set + .block{--g1:rgba(20,99,245,.13);--g2:rgba(8,145,178,.10)}
#office + .block{--g1:rgba(79,70,229,.12);--g2:rgba(147,51,234,.08)}
#setup + .block{--g1:rgba(5,150,105,.12);--g2:rgba(77,124,15,.08)}
#wrap + .block{--g1:rgba(225,29,72,.09);--g2:rgba(234,88,12,.08)}
/* phones: the scene sits under the copy, so the stage is the lower part of the block, edge to edge */
@media (max-width:900px){
  .journey .block::before,.journey .block::after,.journey .block.flip::before,.journey .block.flip::after{top:22%;bottom:-30px;left:-24px;right:-24px}
  .journey .block::before,.journey .block.flip::before{
    background:radial-gradient(50% 44% at 50% 52%,var(--g1),transparent),radial-gradient(38% 30% at 74% 78%,var(--g2),transparent)}
}
/* the seal gets a faint blue pool of its own on the "Your data" grid, and the footer settles a shade deeper */
.seal::before{content:"";position:absolute;z-index:-1;inset:-70px -90px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(20,99,245,.07),transparent 70%),radial-gradient(30% 40% at 70% 70%,rgba(8,145,178,.05),transparent 70%)}
.foot{background:linear-gradient(180deg,rgba(20,99,245,0),rgba(20,99,245,.035) 60%)}

/* ---------- type ---------- */
.kicker{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--faint)}
.center{text-align:center}
.grad{background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.g-hero{background-image:linear-gradient(100deg,#1463F5 0%,#6d4ce8 52%,#1463F5 100%);background-size:200% 100%;animation:sheen 4.8s ease-in-out 1}
.g1{background-image:linear-gradient(90deg,#1463F5,#0891b2)}
.g2{background-image:linear-gradient(90deg,#4f46e5,#9333ea)}
.g3{background-image:linear-gradient(90deg,#059669,#4d7c0f)}
.g4{background-image:linear-gradient(90deg,#e11d48,#ea580c)}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:12px;font-weight:600;font-size:15.5px;border:1px solid transparent;transition:filter .15s,background .15s,border-color .15s,transform .15s;white-space:nowrap}
.btn-sm{height:38px;padding:0 15px;font-size:14px;border-radius:10px}
.btn-primary{background:var(--fill);color:#fff;box-shadow:0 8px 22px rgba(20,99,245,.26)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);border-color:#c3ccd9;backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--fill);color:var(--blue-ink)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.cta-row.center{justify-content:center}

/* ---------- nav ---------- */
/* The bar's frosting is a background-IMAGE on purpose: Safari 26 tints its status-bar band from a
   sticky box's background-color, and after the bar has been pinned once it keeps that colour even
   once the bar has gone (WebKit bug 322265). With no colour to keep, the page shows under the clock. */
.nav{z-index:50;background:linear-gradient(rgba(247,249,253,.72),rgba(247,249,253,.72));backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s,transform .32s cubic-bezier(.2,.7,.2,1)}
.nav.scrolled{border-bottom-color:var(--line);background-image:linear-gradient(rgba(247,249,253,.9),rgba(247,249,253,.9))}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--brand)}
.brand .mark{width:30px;height:30px}
.wm{font-weight:700;font-size:21px;letter-spacing:-.015em;color:var(--ink)}
.wm b{color:var(--brand);font-weight:700}
.nav-links{display:flex;gap:28px;font-size:15px;color:var(--dim)}
.nav-links a{position:relative;padding:6px 0}
.nav-links a:hover{color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:16px}
.lnk{font-size:15px;color:var(--dim);font-weight:500;padding:4px 0}
.lnk:hover{color:var(--ink)}
.burger{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line-2);background:#fff;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{width:16px;height:1.8px;background:var(--ink);border-radius:2px;transition:transform .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.4px) rotate(-45deg)}
.mnav{border-top:1px solid var(--line);background:rgba(255,255,255,.96);padding:10px max(24px,env(safe-area-inset-right)) 18px max(24px,env(safe-area-inset-left));display:flex;flex-direction:column}
.mnav[hidden]{display:none}
.mnav a{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;color:var(--ink)}
.mnav a:last-child{border-bottom:0}
@media (max-width:920px){ .nav-links{display:none} }
@media (max-width:920px){ .burger{display:flex} }
@media (max-width:640px){ .lnk{display:none} .nav-cta{gap:10px} }
@media (min-width:921px){ .mnav{display:none!important} }
/* The bar comes and goes (app.js, nav), the same at every width. It is never sticky at the top edge: Safari 26
   latches its status-bar band to a flat fill once a full-width sticky box has hugged that edge, and
   does not let go when the box leaves (WebKit bug 322265, reproduced on the iOS 26.5 simulator).
   Called back mid-page it floats as a capsule 10px down, which Safari does not count as hugging
   (8pt clears it, 2pt does not: land-of-the-book docs/ios-safari-chrome.md, band rules), so the
   page keeps showing under the clock. It fades in and out where it floats rather than sliding,
   because a slide passes through the top edge and Safari resamples mid-drag. Its ring and shadow
   are box-shadows so its height never changes and nothing below it moves. */
.nav{position:relative;transition:border-color .2s,opacity .22s,transform .3s cubic-bezier(.2,.7,.2,1),margin .25s,border-radius .25s,box-shadow .25s}
.nav.nav-pin{position:sticky;top:10px;margin:0 10px;border-radius:18px;border-bottom-color:transparent;
  box-shadow:0 0 0 1px var(--line),0 10px 30px rgba(14,21,38,.14)}
.nav.nav-pin .nav-in{padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
.nav.nav-pin .mnav{border-radius:0 0 18px 18px;background:transparent}
.nav.nav-tuck{opacity:0;transform:translateY(-3px) scale(.97);pointer-events:none}   /* fades in place: a slide would cross the top edge, and Safari resamples mid-drag */
.nav.nav-gone{visibility:hidden}                   /* off screen: out of Safari's band sampling */
@media (min-width:921px){ .nav.nav-pin{max-width:min(calc(var(--wrap) + 20px),calc(100% - 20px));margin:0 auto} .nav.nav-pin .nav-in{padding:0 22px} }   /* on a wide screen the capsule is the width of the page's column */
@media (prefers-reduced-motion:reduce){ .nav,.nav.nav-pin{transition:border-color .2s} }

/* the next-section chevron, dead centre at the foot of the screen (app.js, scroll settling). It stays
   well clear of the bottom edge, so Safari never takes it for a bar to tint its toolbar from. */
.next-sec{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:40;width:44px;height:44px;margin-left:-22px;
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:var(--dim);cursor:pointer;
  transition:opacity .25s,transform .25s,color .18s,visibility 0s;animation:nudge 1.4s ease-in-out 1.6s 3}
/* the chevron alone (Owen: "discrete"), on a white keyline that is all but invisible on the page and is
   what shows over a dark scene passing under it (3:1 against both, WCAG 1.4.11) */
.next-sec svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.next-sec .kl{stroke:#fff;stroke-width:6}
.next-sec:hover{transform:translateY(2px);color:var(--ink)}
.next-sec:focus-visible{outline:2px solid var(--fill);outline-offset:3px}
.next-sec.off{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility 0s .25s}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){ .next-sec{animation:none;transition:none} }
@media print{ .next-sec{display:none} }

/* ---------- hero ---------- */
.hero{position:relative;padding:84px 0 40px;text-align:center}
.hero-copy{display:flex;flex-direction:column;align-items:center}
h1{margin-top:0;font-size:clamp(38px,6.2vw,68px);line-height:1.04;letter-spacing:-.035em;font-weight:600;color:var(--ink);max-width:15.5em}
h1 .nb{white-space:nowrap}
h1 .grad{display:inline-block;padding-bottom:.06em}
.lede{margin-top:20px;font-size:clamp(17px,2vw,20px);color:var(--dim);max-width:34em}
.hero .cta-row{margin-top:30px;justify-content:center}

/* The hero's six tabs are six steps, in order (Owen: "its more about sequence"; the chips never read as one,
   and a fill inside a chip read as a scroll bar). Each step is a numbered node and its label, joined to the
   next by a connector: solid where the tour has been, faint ahead. Moving on draws the connector just crossed
   (.6s, node to node), and the live node breathes while the tour plays, so it can be seen to be running.
   A step's number turns to a tick as its scene shows its result, and the tour moves on --hold later, so
   each step visibly ends before the next begins. Rings, fills and the drawn connectors are 3:1 or more on
   the page (WCAG 1.4.11). */
.tabs-bar{--hold:1.4s;margin:46px auto 0;max-width:960px}
.tabs{display:flex;align-items:center;justify-content:center}
.tabs button{position:relative;flex:none;height:38px;padding:0 2px;display:flex;align-items:center;gap:7px;color:var(--faint);transition:color .18s}
.tabs button:hover,.tabs button:hover .tab-label{color:var(--ink)}
.tab-seg{flex:1 1 24px;max-width:60px;height:2px;margin:0 6px;border-radius:2px;background:var(--line-2);position:relative;overflow:hidden}
.tab-seg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#1463F5,#6d4ce8);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.tab-seg.filled::after{transform:scaleX(1)}
.tab-node{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #848fa0;background:var(--card);font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--faint);transition:background .25s,border-color .25s,color .25s,transform .25s,box-shadow .25s}
.tab-label{font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .18s}
.tabs button[data-state="current"] .tab-label{font-weight:600;color:var(--ink)}
.tabs button[data-state="current"] .tab-node{background:linear-gradient(100deg,#1463F5,#6d4ce8);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(60,80,230,.32);transform:scale(1.09)}
.tabs button[data-state="done"] .tab-node{background:var(--fill);border-color:transparent;color:#fff}
.tabs button[data-state="done"] .tab-label{color:var(--dim)}
.tab-node::after{content:"";position:absolute;left:50%;top:46%;width:.44em;height:.8em;border:solid #fff;border-width:0 .17em .17em 0;transform:translate(-50%,-50%) rotate(45deg);opacity:0}
.tabs button[data-state="done"] .tab-node{color:transparent}
.tabs button[data-state="done"] .tab-node::after{opacity:1}
.tabs button.run .tab-node{animation:tabPulse 1.8s ease-out infinite,tabTickN .2s ease calc(var(--ms) - var(--hold)) forwards}
.tabs button.run .tab-node::after{animation:tabTick .34s cubic-bezier(.2,1.3,.4,1) calc(var(--ms) - var(--hold)) forwards}
.tabs-bar.hold .tabs button.run .tab-node,.tabs-bar.hold .tabs button.run .tab-node::after{animation-play-state:paused}
@keyframes tabTickN{to{color:transparent}}
@keyframes tabTick{from{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.4)}to{opacity:1;transform:translate(-50%,-50%) rotate(45deg)}}
@keyframes tabPulse{0%{box-shadow:0 4px 12px rgba(60,80,230,.32),0 0 0 0 rgba(60,80,230,.35)}70%{box-shadow:0 4px 12px rgba(60,80,230,.32),0 0 0 7px rgba(60,80,230,0)}100%{box-shadow:0 4px 12px rgba(60,80,230,.32),0 0 0 0 rgba(60,80,230,0)}}
/* the tour's clock (app.js): each step plays until its unseen timer runs out */
.tab-clock{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);pointer-events:none}
.tab-clock i{position:absolute;inset:0;transform:scaleX(0);transform-origin:left}
.tabs button.run .tab-clock i{animation:stepClock var(--ms,6s) linear forwards}
.tabs-bar.hold .tab-clock i{animation-play-state:paused}
@keyframes stepClock{to{transform:scaleX(1)}}
.tabs-caption{display:none}
/* where the six labels no longer fit in a row (under 920px): the numbered nodes alone on one track, 44px
   targets, with the live step's name beneath. The connectors run under the targets' edges, node to node,
   so the track reads as one line; each tab keeps its label as its name. */
@media (max-width:920px){
  .tabs button{flex:1 1 44px;max-width:44px;min-width:26px;height:44px;padding:0;gap:0;justify-content:center}
  .tab-seg{flex:1 1 22px;min-width:22px;max-width:36px;margin:0 -11px}
  .tab-node{width:18px;height:18px;font-size:8.5px;border-width:1.25px}
  .tabs button[data-state="current"] .tab-node{transform:scale(1.2)}
  .tab-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .tabs-caption{display:flex;justify-content:center;align-items:baseline;gap:7px;margin-top:9px;font-size:14px}
  .tabs-caption-num{font-family:var(--mono);font-size:12px;color:var(--faint)}
  .tabs-caption-label{font-weight:600;color:var(--ink)}
}
@media (max-width:640px){.tabs-bar{margin-top:36px}}

/* the stage: a Studio window with a Capture phone in front */
.stage{position:relative;margin:28px auto 0;max-width:1080px;padding:0 0 30px}
.stage::before{content:"";position:absolute;inset:-4% -2% -6%;background:radial-gradient(closest-side,rgba(47,116,246,.22),transparent 70%),radial-gradient(closest-side,rgba(124,92,246,.12),transparent 70%);filter:blur(46px);z-index:-1}
.stage-win{width:88%;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1),filter .45s}
.stage .stage-phone{position:absolute;right:2%;bottom:0;width:25%;max-width:266px;transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1)}
.stage[data-focus="phone"] .stage-win{opacity:.55;filter:saturate(.7) blur(.4px);transform:scale(.985)}
.stage[data-focus="win"] .stage-phone{opacity:0;transform:translateY(24px) scale(.96);pointer-events:none}
.stage [data-view-host] > *, .stage [data-screen-host] > *{animation:swap .5s cubic-bezier(.2,.7,.2,1)}
@keyframes swap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:760px){
  .stage{padding-bottom:0}
  .stage-win{width:100%}
  .stage[data-focus="phone"] .stage-win{display:none}
  .stage .stage-phone{position:relative;width:64%;max-width:248px;margin:0 auto}
  /* the window tabs show the window over the phone's room, so the stage keeps one height through the tour
     (and the phone stays in view for app.js, which would otherwise take the tour back to the start) */
  .stage[data-focus="win"] .stage-phone{visibility:hidden}
  .stage[data-focus="win"] .stage-win{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
}

/* fit: render a scene at its design width and scale it to the column */
.fit{position:relative}
.fit-in{transform-origin:top left;width:var(--w);}


/* ---------- journey ---------- */
.journey{position:relative;padding:60px 0 40px}
.path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:0}
.path path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.path-base{stroke:#cdd5e2;stroke-width:3;stroke-dasharray:.5 11}
.path-ink{stroke-width:3.4}
.path-glow path:nth-child(1){stroke-width:44px;stroke-opacity:.022}
.path-glow path:nth-child(2){stroke-width:24px;stroke-opacity:.035}
.path-glow path:nth-child(3){stroke-width:11px;stroke-opacity:.055}
/* markers: hollow until the tip arrives, then fill and ring out once */
.path .node circle{transition:fill .4s}
.path .n-core{fill:#fff;stroke:var(--c);stroke-width:3}
.path .n-ring{fill:none;stroke:var(--c);stroke-width:2;opacity:0}
.path .node.hit .n-core{fill:var(--c)}
.path .node.burst .n-ring{animation:burst 1s ease-out 1}
@keyframes burst{0%{opacity:.85;r:8px}100%{opacity:0;r:46px}}
/* the head that rides the painted tip */
.path-head{position:absolute;left:-30px;top:-30px;width:60px;height:60px;pointer-events:none;z-index:0;will-change:transform;opacity:0;transition:opacity .35s ease}
.path-head.on{opacity:1}
.path-head>svg{display:block;width:60px;height:60px;overflow:visible;filter:drop-shadow(0 3px 8px rgba(14,21,38,.14))}
.path-head .h-halo{fill:var(--c,#1463F5);opacity:.2;transform-box:fill-box;transform-origin:center;animation:breathe 1.8s ease-in-out infinite;animation-play-state:paused}
.path-head.live.moving .h-halo{animation-play-state:running}
@keyframes breathe{50%{transform:scale(1.5);opacity:.05}}
.path-head .h-core{fill:rgba(255,255,255,.97);stroke:var(--c,#1463F5);stroke-width:3}
.path-head .h-icon{color:var(--c,#1463F5);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.path-head .h-icon-wrap{transition:opacity .2s,transform .2s;transform-box:fill-box;transform-origin:center}
.path-head.swap .h-icon-wrap{opacity:0;transform:scale(.4)}
.path-head.mini>svg{transform:scale(.55)}
.path-head.mini .h-icon-wrap{display:none}
.journey .wrap{position:relative;z-index:1}
.chapter-head{height:53.3px}   /* the room the "How it works?" pill had: the rests, the phone gaps and the path's start are set by it */
.chapter-title{text-align:center;padding:120px 0 10px}
.chapter-title h2{display:inline-block;font-size:clamp(44px,7vw,76px);line-height:1.02;letter-spacing:-.04em;font-weight:600;padding-bottom:.08em}
.block{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center;padding:14px 0 40px}
.block.flip{grid-template-columns:1.2fr .8fr}
.block.flip .block-copy{order:2}
.block-copy{max-width:420px}
.tags{font-family:var(--mono);font-size:13px;color:var(--faint);letter-spacing:.02em}
.block-copy h3{margin-top:14px;font-size:clamp(28px,3.4vw,38px);line-height:1.1;letter-spacing:-.025em;font-weight:600;color:var(--ink)}
.steps{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:16px}
.steps li{display:grid;grid-template-columns:34px 1fr;font-size:17px;color:var(--text);line-height:1.4}
.steps li>span{font-family:var(--mono);font-size:13px;color:var(--faint);padding-top:3px}
.steps li:first-child{font-weight:600;color:var(--ink)}
.block-vis{min-width:0}
.phone-solo{width:320px;max-width:100%;margin:0 auto}
.path-end{height:40px}
@media (max-width:900px){
  .block,.block.flip{grid-template-columns:1fr;gap:34px;padding:24px 0}
  .block.flip .block-copy{order:0}
  .block-copy{max-width:none;padding-left:28px}
  .chapter-title{padding:80px 0 10px;text-align:left;padding-left:28px}
  .chapter-head{padding-left:28px}                                     /* the path's lane (app.js) */
}

/* ---------- your data ---------- */
.data{padding:120px 0 60px;text-align:center}
.statement{margin:18px auto 0;font-size:clamp(36px,5.6vw,64px);line-height:1.05;letter-spacing:-.035em;font-weight:600;color:var(--ink);max-width:13em}
.statement .grad{display:inline-block;padding-bottom:.06em}
.statement-sub{margin:22px auto 0;max-width:40em;color:var(--dim);font-size:18px}
/* why it holds up: three reasons on one thin line, the way entries link in the seal above */
.proof{margin:64px auto 0;max-width:1000px;text-align:left}
@media (min-width:901px){ .proof{margin-top:max(64px,calc(50svh - 5px))} }   /* the last resting place, half a screen below the seal so it rests alone; past it the page flows on into the questions */
.proof-k{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);text-align:center}
.proof-list{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.proof-list li{position:relative;padding:30px 36px 0 0;border-top:1px solid var(--line-2);transition-delay:var(--d,0ms)}
.proof-list li:last-child{padding-right:0;border-image:linear-gradient(90deg,var(--line-2) 60%,transparent) 1}
.pf-n{position:absolute;left:0;top:-12px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1.5px solid rgba(234,88,12,.5);font-family:var(--mono);font-size:10px;font-weight:600;color:#c2410c}
.proof-list h3{font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.proof-list p{margin-top:6px;font-size:15px;color:var(--dim);max-width:30em}
@media (max-width:760px){
  .proof{max-width:460px}
  .proof-list{grid-template-columns:1fr;margin-top:24px;margin-left:12px}
  .proof-list li{padding:0 0 26px 28px;border-top:0;border-left:1px solid var(--line-2)}
  .proof-list li:last-child{padding-bottom:0;border-image:linear-gradient(180deg,var(--line-2) 60%,transparent) 1}
  .pf-n{left:-12px;top:-2px}
}

/* ---------- FAQ ---------- */
.faq{padding:100px 0 40px}
.faq-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.faq-head h2{margin-top:14px;font-size:clamp(34px,4.4vw,50px);line-height:1.05;letter-spacing:-.035em;font-weight:600;color:var(--ink)}
.faq-head p{margin-top:16px;color:var(--dim)}
.faq-head a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list details:first-child{border-top:1px solid var(--line-2)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:500;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";flex:0 0 auto;width:10px;height:10px;border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq-list details p{padding:0 40px 22px 0;color:var(--dim);font-size:16.5px}
@media (max-width:860px){ .faq-in{grid-template-columns:1fr;gap:28px} }

/* ---------- CTA ---------- */
.cta{padding:90px 0 70px}
.cta-card{position:relative;overflow:hidden;border-radius:28px;padding:72px 32px;text-align:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.cta-card::before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(420px 260px at 18% 20%,rgba(124,92,246,.18),transparent 70%),
  radial-gradient(460px 280px at 82% 30%,rgba(47,116,246,.20),transparent 70%),
  radial-gradient(420px 260px at 50% 110%,rgba(8,145,178,.14),transparent 70%)}
.cta-card > *{position:relative;z-index:1}
.cta-card h2{margin-top:16px;font-size:clamp(32px,4.6vw,54px);line-height:1.05;letter-spacing:-.035em;font-weight:600;color:var(--ink)}
.cta-card p{margin-top:14px;color:var(--dim);font-size:18px}
.cta-card .cta-row{margin-top:30px}

/* ---------- footer ---------- */
.foot{padding:30px 0 calc(34px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-top:26px}
.endorse{margin-top:12px;font-size:14px;color:var(--dim)}
.foot-col{display:flex;flex-direction:column;gap:1px;font-size:15px}
.foot-col h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.foot-col a{color:var(--text);padding:4px 0}
.foot-col a:hover{color:var(--blue-ink)}
.foot-bottom{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.foot-legal{display:flex;gap:20px;font-size:13px}
.foot-legal a{color:var(--dim);padding:4px 0}
.foot-legal a:hover{color:var(--blue-ink)}
.legal{font-size:13px;color:var(--faint)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1} }

/* ---------- contact modal ---------- */
/* The dimmed backdrop is page content, not part of the fixed dialog layer. Safari 26 clips fixed layers
   at its status and toolbar bands and tints the bands flat from what a fixed layer paints at the edge,
   so inside the dialog the backdrop left both bands grey. As document content it paints into them.
   app.js lays it over the screen and 200px past each edge while the dialog is open. */
/* The dialog layer itself stops 10px short of the top and bottom edges: even transparent, a fixed box
   hugging an edge makes Safari fill that band flat (8pt clears it, as with the nav capsule). */
.modal{position:fixed;inset:10px 0;z-index:200;display:none;align-items:center;justify-content:center;padding:max(10px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));pointer-events:none}
.modal.open{display:flex}
.modal-back{position:absolute;left:0;right:0;z-index:199;background:rgba(14,21,38,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fade .2s}
.modal-back[hidden]{display:none}
.modal-card{position:relative;width:480px;max-width:100%;max-height:calc(100vh - 40px);max-height:100%;overflow:auto;overscroll-behavior:contain;pointer-events:auto;background:#fff;border-radius:22px;padding:30px 28px 24px;box-shadow:var(--shadow-lg);animation:rise .28s cubic-bezier(.2,.7,.2,1)}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:10px;background:var(--card-2);color:var(--dim);font-size:13px}
.modal-card:focus{outline:none}
.modal-card h3{margin-top:10px;font-size:26px;letter-spacing:-.025em;color:var(--ink);font-weight:600}
.modal-sub{margin-top:8px;color:var(--dim);font-size:15.5px}
.form{margin-top:20px;display:flex;flex-direction:column;gap:12px}
.fl{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:var(--text)}
.fl i{font-style:normal;color:var(--faint);font-weight:400}
.fl input,.fl textarea{width:100%;border:1px solid #8190a4;border-radius:11px;padding:12px 13px;font:inherit;font-size:15.5px;font-weight:400;color:var(--ink);background:var(--card-2)}
.fl input:focus,.fl textarea:focus{outline:none;border-color:var(--fill);background:#fff;box-shadow:0 0 0 3px rgba(20,99,245,.14)}
.fl textarea{resize:vertical;min-height:96px}
.hp{position:absolute;left:-9999px}
.send{width:100%;margin-top:4px}
.done{font-family:var(--mono);font-size:13px;color:var(--ok-ink);text-align:center;min-height:1em}
.note{font-size:12.5px;line-height:1.5;color:var(--dim)}
@media (max-width:640px){                          /* the whole form on one phone screen, no scrolling inside the card */
  .modal{padding:max(2px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .modal-card{padding:22px 20px 18px;border-radius:20px}
  .modal-card h3{margin-top:6px;font-size:22px}
  .modal-sub{margin-top:6px;font-size:14.5px;line-height:1.45}
  .form{margin-top:14px;gap:9px}
  .fl{gap:4px}
  .fl input,.fl textarea{padding:9px 12px}
  .fl textarea{height:72px;min-height:56px}          /* rows="4" would set it taller */
  .send{margin-top:2px}
  .note{font-size:12px;line-height:1.45}
}
.note a{color:var(--blue-ink);text-decoration:underline}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.985)}}

/* ---------- reveal ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .g-hero,  .stage [data-view-host] > *, .stage [data-screen-host] > *{animation:none}
}

/* =====================================================================
   PRODUCT SCENES — Capture (dark, as shipped) and Studio (light, as shipped)
   ===================================================================== */

/* ---- Capture phone ---- */
.phone{--c-bg:#0b1428;--c-panel:#141e38;--c-p2:#0f1830;--c-edge:#273356;--c-ink:#eef3fb;--c-text:#c2cee0;--c-dim:#93a4c0;--c-faint:#75859f;
  width:320px;height:660px;border-radius:44px;background:var(--c-bg);border:10px solid #10141d;box-shadow:0 0 0 1.5px #2a3242,var(--shadow-lg);position:relative;overflow:hidden;display:flex;flex-direction:column;color:var(--c-text);font-size:13.5px;text-align:left}
.ph-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:92px;height:26px;border-radius:20px;background:#05070b;z-index:3}
.ph-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:44px 14px 12px;border-bottom:1px solid var(--c-edge)}
.ph-bar>:first-child{justify-self:start}
.ph-bar>:last-child{justify-self:end}
.chip{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.08em;color:#6F9EF9;background:rgba(47,116,246,.16);padding:5px 8px;border-radius:20px}
.wm-sm{font-weight:700;font-size:15px;color:var(--c-ink);letter-spacing:-.01em}
.wm-sm b{color:#2F74F6}
.ph-av{width:26px;height:26px;border-radius:50%;background:#16203a;border:1px solid var(--c-edge);display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--c-text)}
.ph-body{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.row{display:flex;gap:8px;align-items:flex-start}
.row.me{justify-content:flex-end}
.bolt{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(47,116,246,.16);display:grid;place-items:center;margin-top:2px}
.bolt svg{width:12px;height:12px;fill:#6F9EF9}
.bub{background:#16203a;border:1px solid var(--c-edge);border-radius:14px;padding:9px 12px;color:var(--c-ink);max-width:85%}
.bub.ok{border-color:rgba(47,191,135,.4);background:rgba(47,191,135,.12);color:#c9f2de}
.unit{background:var(--c-panel);border:1px solid var(--c-edge);border-radius:14px;padding:10px 12px}
.un{font-family:var(--mono);font-weight:600;font-size:15px;color:var(--c-ink)}
.un span{font-weight:400;font-size:11px;color:var(--c-dim)}
.uc{display:flex;gap:6px;margin-top:7px}
.uc span{font-family:var(--mono);font-size:9.5px;padding:4px 8px;border-radius:7px;border:1px solid var(--c-edge)}
.c-show{color:#6F9EF9;background:rgba(47,116,246,.14);border-color:transparent!important}
.c-on{color:#4cd391}
.photo{width:62%;border-radius:14px;overflow:hidden;background:#1463F5;padding:5px}
.lcd{background:linear-gradient(160deg,#0c1a14,#0a1410);border-radius:10px;padding:10px 12px;font-family:var(--mono);color:#7fe3a6;box-shadow:inset 0 0 0 1px rgba(127,227,166,.14)}
.lcd-r{display:flex;align-items:baseline;gap:8px;line-height:1.35}
.lcd-r span{font-size:9.5px;color:#5fb487;width:16px}
.lcd-r b{font-size:19px;font-weight:600;letter-spacing:.02em}
.lcd-r em{font-style:normal;font-size:10px;color:#5fb487}
.lcd-f{margin-top:5px;font-size:8.5px;color:#5fb487;letter-spacing:.02em}
.ph-cap{font-size:11px;color:#dbe7ff;padding:5px 4px 1px;text-align:right}
.read{flex:1;background:var(--c-panel);border:1px solid var(--c-edge);border-radius:14px;padding:11px}
.read-h{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--c-dim)}
.conf{font-family:var(--mono);font-size:9px;font-weight:600;color:#cfe0ff;background:rgba(47,116,246,.24);padding:3px 6px;border-radius:5px;letter-spacing:.06em}
.legs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.legs div{background:var(--c-p2);border:1px solid var(--c-edge);border-radius:10px;padding:7px 4px;text-align:center}
.legs span{display:block;font-family:var(--mono);font-size:9px;color:var(--c-faint)}
.legs b{display:block;font-size:20px;color:var(--c-ink);font-weight:600;margin:2px 0 0;font-variant-numeric:tabular-nums}
.legs i{font-family:var(--mono);font-size:9px;color:var(--c-faint);font-style:normal}
.kw{display:flex;align-items:baseline;justify-content:space-between;margin-top:9px}
.kw b{font-size:17px;color:var(--c-ink)}
.kw span{font-family:var(--mono);font-size:9px;color:var(--c-faint)}
.vp{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.vp span{font-family:var(--mono);font-size:9px;color:var(--c-text);background:var(--c-p2);border:1px solid var(--c-edge);border-radius:20px;padding:4px 7px}
.acts{display:flex;gap:6px;margin-top:10px}
.acts span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:8px 0;border-radius:10px}
.a-ok{background:#1463F5;color:#fff}
.a-gh{border:1px solid var(--c-edge);color:var(--c-text)}
.phone .editnote{margin-top:8px;font-family:var(--mono);font-size:9.5px;color:var(--c-faint)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin-top:10px;font-size:12px}
.kv dt{color:var(--c-faint);font-family:var(--mono);font-size:10px;padding-top:2px}
.kv dd{color:var(--c-ink)}
.rcpt{background:#e8e2d4;padding:6px;width:56%}
.paper{background:#fbf8f1;border-radius:6px;padding:10px 9px;font-family:var(--mono);font-size:8.5px;color:#3d3a33;display:flex;flex-direction:column;gap:3px;transform:rotate(-2deg)}
.paper b{font-size:9.5px;color:#1f1d19}
.paper .zz{height:6px;margin-top:3px;background:repeating-linear-gradient(90deg,#c9c2b1 0 3px,transparent 3px 6px)}
.rcpt .ph-cap{color:#5a564c;font-family:var(--mono);font-size:9.5px}
.ph-compose{display:flex;align-items:center;gap:8px;padding:10px 12px 16px;border-top:1px solid var(--c-edge);background:var(--c-p2)}
.ph-compose>span{flex:1;border:1px solid var(--c-edge);border-radius:11px;padding:9px 11px;font-size:12px;color:var(--c-faint)}
.ph-compose>i{width:34px;height:34px;border-radius:10px;background:#1463F5}
.ph-foot{margin-top:auto;text-align:center;font-family:var(--mono);font-size:10px;color:var(--c-faint);padding-bottom:6px}
/* PIN screen */
.pin{align-items:center;padding-top:26px}
.pin-top{text-align:center}
.pin-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-faint)}
.pin-t{margin-top:8px;font-size:22px;font-weight:600;color:var(--c-ink);letter-spacing:-.01em}
.pin-s{margin-top:5px;font-size:12px;color:var(--c-dim)}
.pin-dots{display:flex;gap:16px;margin:26px 0 24px}
.pin-dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--c-edge)}
.pin-dots i.on{background:#6F9EF9;border-color:#6F9EF9}
.pad{display:grid;grid-template-columns:repeat(3,64px);gap:12px 18px}
.pad b{height:56px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:500;color:var(--c-ink);background:#16203a;border:1px solid var(--c-edge)}
.pad b.gh{background:none;border-color:transparent;color:var(--c-dim);font-size:16px}

/* ---- Studio window ---- */
.win{width:980px;border-radius:16px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;font-size:13px;color:#1c2733}
.win-bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#f5f7fb;border-bottom:1px solid var(--line)}
.win-bar i{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.win-bar i:nth-child(2){background:#febc2e}.win-bar i:nth-child(3){background:#28c840}
.win-bar span{margin-left:14px;font-family:var(--mono);font-size:11.5px;color:#5b6576}
.st{display:grid;grid-template-columns:200px 1fr;min-height:560px;background:#eef2f7}
.st-side{background:#fff;border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:3px}
.st-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;color:#1a2531;padding:2px 4px 14px}
.st-brand svg{width:22px;height:22px}
.st-brand b{color:#2F74F6}
.st-show{border:1px solid var(--line-2);border-radius:10px;padding:9px 10px;font-weight:600;font-size:13px;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.st-show em,.st-m em,.val em{font-style:normal;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.06em;color:#454f5b;background:#eef2f7;padding:3px 6px;border-radius:5px}
.st-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#4d5a68;padding:10px 6px 5px}
.st-side a{padding:7px 9px;border-radius:8px;font-size:13px;color:#1c2733}
.st-side a.on{background:rgba(47,116,246,.10);color:#0951D9;font-weight:600}
.st-main{padding:22px 24px;min-width:0}
.st-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.st-kk{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#4d5a68}
.st-t{font-size:22px;font-weight:700;color:#1a2531;letter-spacing:-.015em;margin-top:3px}
.st-m{font-family:var(--mono);font-size:11px;color:#4d5a68;margin-top:5px;display:flex;gap:8px;align-items:center}
.st-btns{display:flex;gap:7px}
.st-btns span{padding:8px 12px;border-radius:9px;border:1px solid var(--line-2);background:#fff;font-size:12px;font-weight:500;white-space:nowrap}
.st-btns span.pri,.exp-go .pri{background:#1463F5;color:#fff;border-color:#1463F5}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}
.stats div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.stats b{display:block;font-family:var(--mono);font-size:21px;color:#1a2531}
.stats span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#454f5b;margin-top:3px}
.stats i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;color:#4d5a68;margin-top:2px}
.tbl{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl-tools{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.srch{flex:0 0 42%;border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;color:#4d5a68;font-size:12px}
.sel{border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;font-size:12px}
.cnt{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:#4d5a68}
.tr{display:grid;grid-template-columns:.9fr 1.15fr .85fr 1.35fr 1fr 1.2fr 1.25fr;gap:10px;padding:10px 12px;border-bottom:1px solid #f0f3f7;align-items:start;font-size:12px}
.tr:last-child{border-bottom:0}
.tr.th{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:#4d5a68;padding:9px 12px}
.tr i{display:block;font-style:normal;font-family:var(--mono);font-size:10px;color:#4d5a68;margin-top:1px}
.tr em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:#0951D9;margin-left:3px}
.tr .mono{font-family:var(--mono);font-size:11px}
.tr.new{background:linear-gradient(90deg,rgba(47,116,246,.08),transparent 70%)}
.tr.warn{background:rgba(138,95,6,.05)}
.ev{display:inline-block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.04em;color:#0951D9;background:rgba(47,116,246,.10);padding:3px 5px;border-radius:5px;margin:0 3px 3px 0}
.ev.on{color:#13693a;background:rgba(21,163,74,.10)}
b.flg{display:inline-block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.03em;color:#8a5f06;background:rgba(138,95,6,.10);padding:3px 6px;border-radius:5px;line-height:1.3}
b.fr{display:inline-block;font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.03em;color:#a82c46;background:rgba(214,69,90,.10);padding:3px 6px;border-radius:5px;line-height:1.3}
/* assets */
.assets{display:grid;grid-template-columns:1fr 250px;gap:16px;margin-top:18px}
.tbl.slim{margin-top:0}
.tr.a{grid-template-columns:.9fr 1.2fr 1.4fr .8fr;padding:12px 14px;font-size:12.5px;align-items:center}
.tr.th.a{padding:10px 14px}
.tr.dim{opacity:.7}
.ev.retired{color:#4d5a68;background:#eef2f7}
.side-cards{display:flex;flex-direction:column;gap:12px}
.sticker{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:14px 14px 12px;text-align:center;box-shadow:0 8px 26px rgba(20,40,70,.10)}
.stk-top{display:flex;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:13px;color:#1a2531}
.stk-top svg{width:18px;height:18px}
.stk-top b{color:#1463F5}
.qr{width:112px;height:112px;margin:10px auto 8px;display:grid;grid-template-columns:repeat(21,1fr);gap:0;position:relative}
.qr i{background:#1a2531}
.qr i.o{background:transparent}
.stk-n{font-weight:700;font-size:15px;color:#1a2531}
.stk-t{font-family:var(--mono);font-size:11px;color:#454f5b}
.stk-s{margin-top:6px;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#454f5b}
.stk-f{margin-top:3px;font-family:var(--mono);font-size:7.5px;letter-spacing:.06em;color:#4d5a68}
.pin-card{background:#0e1526;color:#e7ecf5;border-radius:var(--scn-r-card);padding:14px}
.pc-k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#93a4c0}
.pc-n{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:.14em;margin-top:6px;color:#fff}
.pc-s{font-size:11px;color:#c2cee0;margin-top:6px;line-height:1.4}
.pc-a{display:flex;gap:6px;margin-top:10px}
.pc-a span{flex:1;text-align:center;padding:7px 0;border-radius:9px;background:#1463F5;color:#fff;font-size:11.5px;font-weight:600}
.pc-a span.gh{background:transparent;border:1px solid #273356;color:#c2cee0}
/* export */
.exp{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;margin-top:20px}
.exp-card,.exp-note{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.exp-row{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid #f0f3f7}
.lab{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#4d5a68}
.val{font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.val.mono{font-family:var(--mono);font-size:11.5px;font-weight:400}
.files i{font-style:normal;font-family:var(--mono);font-size:10.5px;background:#eef2f7;padding:4px 7px;border-radius:6px}
.exp-row .seg{display:inline-flex;border:1px solid var(--line-2);border-radius:9px;overflow:hidden;width:max-content}
.exp-row .seg b{padding:6px 14px;font-size:12px;font-weight:500}
.exp-row .seg b.on{background:rgba(47,116,246,.10);color:#0951D9;font-weight:600}
.exp-go{padding-top:16px}
.exp-go .pri{display:inline-block;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600}
.en-k{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:#4d5a68}
.exp-note p{margin-top:10px;font-size:13px;line-height:1.55;color:#1c2733}
.chk{margin-top:14px;font-family:var(--mono);font-size:10.5px;color:#13693a;background:rgba(21,163,74,.08);padding:9px 10px;border-radius:9px;line-height:1.7}
.chk span{display:block;color:#454f5b;letter-spacing:.08em;text-transform:uppercase;font-size:9px}
.chk b{color:#13693a}
.chk em{display:block;font-style:normal}
.exp-go{display:flex;align-items:center;gap:16px}
.exp-st{display:grid;align-items:center}
.exp-st>*{grid-area:1/1}
.exp-dl{width:132px;height:4px;border-radius:4px;background:#e3e9f2;overflow:hidden;opacity:0}
.exp-dl i{display:block;height:100%;background:#1463F5;transform-origin:left}
.exp-done{font-family:var(--mono);font-size:11px;color:#13693a}
.tr.a.pick{background:rgba(47,116,246,.08);box-shadow:inset 3px 0 0 #1463F5}


/* balanced headline wrapping (no stranded words) */
h1,h2,h3,.statement,.lede,.statement-sub{text-wrap:balance}
.steps li,.faq-list details p,.proof-list p{text-wrap:pretty}

/* hero entrance: CSS only, so the first paint never waits on script */
.rise{animation:riseIn .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .rise{animation:none} .path-head{display:none} .path .node.burst .n-ring{animation:none} }

/* ---------- chapter scenes: one focused moment each, played once when revealed ---------- */
.scene-fit{max-width:560px;margin:0 auto}
.scn{position:relative;width:560px;text-align:left;color:#1c2733;font-size:13px}
@keyframes sRise{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}
@keyframes sSheet{from{opacity:0;transform:translateY(40px) rotate(-6deg)}to{opacity:1;transform:rotate(-2deg)}}
@keyframes sPop{from{opacity:0;transform:translateY(34px) scale(.94)}to{opacity:1;transform:none}}
@keyframes sPrint{from{clip-path:inset(0 0 100% 0);transform:translateY(-6px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes sDigit{0%{opacity:0;transform:translateY(8px) scale(.7)}60%{opacity:1;transform:translateY(-2px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes sFade{from{opacity:0}to{opacity:1}}
@keyframes sSlide{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes sDraw{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}
@keyframes sRing{from{stroke-dashoffset:64}to{stroke-dashoffset:0}}
@keyframes sFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes sIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.js .block-vis:not(.in) .scn .a-rise,.js .block-vis:not(.in) .scn .a-sheet,.js .block-vis:not(.in) .scn .a-pop,.js .block-vis:not(.in) .scn .a-pop2{opacity:0}
.in .scn .a-rise{animation:sRise 1.08s cubic-bezier(.2,.7,.2,1) both}
.in .scn .a-sheet{animation:sSheet 1.08s cubic-bezier(.2,.7,.2,1) both}
.in .scn .a-pop{animation:sPop .9s cubic-bezier(.2,.8,.2,1) 1.5s both}
.in .scn .a-pop2{animation:sPop .9s cubic-bezier(.2,.8,.2,1) 2.28s both}

/* before day one: a sheet prints, then a PIN is issued */
.scn-setup{height:480px}
.sheet{position:absolute;left:0;top:8px;width:414px;padding:14px 14px 16px;background:#fff;border-radius:var(--scn-r-card);box-shadow:var(--shadow-lg);transform:rotate(-2deg)}
.sheet-h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#4d5a68;padding:0 2px 10px;margin-bottom:12px;border-bottom:1px dashed #d5dce6}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mstk{border:1px dashed #cfd7e3;border-radius:10px;padding:9px 6px 8px;text-align:center;background:#fff}
.in .mstk{animation:sPrint .66s cubic-bezier(.3,.7,.2,1) calc(.54s + var(--i) * .14s) both}
.mstk .stk-top{font-size:9px;gap:4px}.mstk .stk-top svg{width:11px;height:11px}
.mstk .qr{width:80px;height:80px;margin:7px auto 6px}
.mstk .stk-n{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstk .stk-t{font-size:8.5px}
.mstk .stk-s{font-size:5.4px;margin-top:4px;letter-spacing:.06em}
.mstk .stk-f{font-size:5px;letter-spacing:.04em}
.pin-float{position:absolute;right:0;bottom:6px;width:262px;padding:16px;border:1px solid var(--scn-card-line);box-shadow:var(--scn-shadow-card)}
.pc-who{margin-top:8px;font-family:var(--mono);font-size:10.5px;color:#c2cee0}
.pc-mail{margin-top:12px}
.pc-l{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#93a4c0;margin-bottom:5px}
.pc-field{display:flex;align-items:center;gap:6px;padding:4px 4px 4px 10px;border-radius:9px;background:#141e38;border:1px solid #273356}
.pc-typed{flex:1;min-width:0;max-width:20ch;font-family:var(--mono);font-size:11px;color:#fff;white-space:nowrap;overflow:hidden}
.pc-send{margin-left:auto;padding:6px 11px;border-radius:7px;background:#1463F5;color:#fff;font-size:11px;font-weight:600}
.pc-sent{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11px;color:#9fe6c1}
.pc-sent svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke:#4cd391;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes pcType{from{max-width:0}}
.pin-float .pc-mail{margin-top:12px}
.pin-float .pc-send{background:transparent;box-shadow:inset 0 0 0 1px #273356;color:#c2cee0}   /* issued: the button steps back behind the code */
.pin-float .pc-digits{margin-top:10px}
@keyframes pcDone{from{background:#1463F5;box-shadow:none;color:#fff}}
.in .pc-typed{animation:pcType 1.08s steps(19,end) 2.34s backwards}
.in .pin-float .pc-send{animation:press .36s ease 3.48s,pcDone .36s ease 3.72s both}
.in .pin-float .pc-sent{animation:sIn .42s ease 4.62s backwards}
.pc-s b{color:#fff}
.pc-digits{display:flex;gap:8px;margin-top:12px}
.pc-digits b{flex:1;height:50px;display:grid;place-items:center;border-radius:10px;background:#141e38;border:1px solid #273356;font-family:var(--mono);font-size:24px;font-weight:600;color:#fff}
.in .pc-digits b{animation:sDigit .6s cubic-bezier(.2,.8,.2,1) calc(3.72s + var(--i) * .17s) both}

/* at wrap: the production closes, then the bundle is made and rechecked */
.scn-wrap{height:548px}
.wr-card{position:absolute;left:0;top:0;width:340px;padding:18px 18px 16px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg)}
.wr-h{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid var(--line)}
.wr-t{font-size:20px;font-weight:700;color:#1a2531;letter-spacing:-.015em;margin-top:3px}
.wr-state{position:relative;display:inline-grid;justify-items:end;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.wr-state>span{grid-area:1/1;padding:5px 9px;border-radius:20px;white-space:nowrap}
.wr-state .s1{color:#8a5f06;background:rgba(214,158,46,.14)}
.wr-state .s2{color:#13693a;background:rgba(21,163,74,.12)}
.js .wr-state .s2{opacity:0}
.in .wr-state .s1{animation:sOut .36s ease 2.22s both}
.in .wr-state .s2{animation:sIn .42s ease 2.4s both}
.wr-list{list-style:none;margin:14px 0 0;display:flex;flex-direction:column;gap:12px}
.wr-list li{display:grid;grid-template-columns:22px 1fr;column-gap:10px;align-items:center}
.wr-list svg{width:22px;height:22px;grid-row:span 2;fill:none;stroke:#15a34a;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wr-list svg circle{stroke:#cfe9d8;stroke-dasharray:64}
.wr-list svg path{stroke-dasharray:24}
.wr-list span{font-weight:600;color:#1a2531;font-size:14px}
.wr-list i{font-style:normal;font-family:var(--mono);font-size:10.5px;color:#4d5a68}
.in .wr-list svg circle{animation:sRing .6s ease calc(.6s + var(--i) * .5s) both}
.in .wr-list svg path{animation:sDraw .38s ease calc(.94s + var(--i) * .5s) both}
.in .wr-list span,.in .wr-list i{animation:sFade .48s ease calc(.66s + var(--i) * .5s) both}
.wr-foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:11.5px;color:#4d5a68}
.zip{position:absolute;right:0;bottom:4px;width:318px;padding:16px;background:#fff;border-radius:var(--scn-r-card);box-shadow:var(--shadow-lg)}
.zip-h{display:flex;gap:12px;align-items:center}
.zip-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#e11d48,#ea580c)}
.zip-ic svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zip-h b{display:block;font-size:14px;color:#1a2531}
.zip-h i{font-style:normal;font-size:11px;color:#4d5a68}
.zip-files{margin-top:14px;display:flex;flex-direction:column;gap:6px}
.zf{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-radius:9px;background:#f5f7fb;border:1px solid var(--line)}
.zf span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:11.5px;font-weight:600;color:#0951D9}
.zf i{flex:none;margin-left:10px;font-style:normal;font-size:10.5px;color:#4d5a68}
.in .zf{animation:sSlide .54s cubic-bezier(.2,.8,.2,1) calc(2.76s + var(--i) * .18s) both}
.zip-chk{margin-top:12px;font-family:var(--mono);font-size:10.5px;color:#13693a}
.zip-chk .bar{height:5px;border-radius:5px;background:#e6f4ec;overflow:hidden;margin-bottom:7px}
.zip-chk .bar i{display:block;height:100%;background:#15a34a;transform-origin:left;border-radius:5px}
.in .zip-chk .bar i{animation:sFill 1.8s cubic-bezier(.4,0,.2,1) 3.48s both}
@media (prefers-reduced-motion:reduce){
  .scn *{animation:none!important}
  .js .wr-state .s1{opacity:0}.js .wr-state .s2{opacity:1}
}
html:not(.js) .wr-state .s1{display:none}

/* in the office: the ledger's map view, pins coloured by GPS check as in Studio */
.scene-fit.wide{max-width:600px}
.scn-map{width:600px}
.mwin{width:600px}
.mw-body{padding:16px 18px 14px}
.mw-top{display:flex;justify-content:space-between;align-items:flex-end}
.mw-top .seg{display:flex;padding:3px;border-radius:9px;background:#eef2f7;border:1px solid var(--line)}
.mw-top .seg span{padding:5px 14px;border-radius:7px;font-size:12px;font-weight:600;color:#4d5a68}
.mw-top .seg span.on{background:#fff;color:#1a2531;box-shadow:0 1px 2px rgba(16,23,40,.12)}
.lm-legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin:14px 0 8px;font-size:11px;color:#4d5a68}
.lm-legend .sw{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.sw.ok,.mp.ok i{background:#13693a}.sw.warn,.mp.warn i{background:#8a5f06}.sw.muted,.mp.muted i{background:#4d5a68}
.fitb{margin-left:auto;padding:4px 10px;border-radius:8px;border:1px solid var(--line-2);font-weight:500;color:#1c2733}
.lm{position:relative;height:340px;border-radius:12px;overflow:hidden;border:1px solid #dde3ec;background:#f2efe9}
.lm-tiles{position:absolute;left:-238.7px;top:-161.9px;width:1024px;height:768px}
.lm-tiles img{position:absolute;width:256px;height:256px;max-width:none}
.lm-attrib{position:absolute;right:6px;bottom:4px;z-index:2;font-size:11px;color:#454f5b;background:rgba(255,255,255,.82);padding:1px 6px;border-radius:3px}
.lm-attrib a{color:inherit}
.mpins{position:absolute;inset:0}
.mp{position:absolute;width:18px;height:18px;transform:translate(-50%,-100%) rotate(-45deg);transform-origin:bottom center;border-radius:50% 50% 50% 0;box-shadow:0 1px 3px rgba(16,23,31,.35)}
.mp i{display:block;width:100%;height:100%;border-radius:50% 50% 50% 0;border:2px solid #fff}
.mp.cl{width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(16,23,31,.35)}
.mp.cl i{border-radius:50%;background:#0951D9;border:1.5px solid #fff}
.mp.cl b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;font-weight:700;color:#fff}
.js .block-vis:not(.in) .mp{opacity:0}
@keyframes pinDrop{0%{opacity:0;margin-top:-22px}70%{opacity:1;margin-top:2px}100%{opacity:1;margin-top:0}}
@keyframes pinHit{0%{box-shadow:0 0 0 0 rgba(47,116,246,.55),0 1px 3px rgba(16,23,31,.35)}70%{box-shadow:0 0 0 15px rgba(47,116,246,0),0 1px 3px rgba(16,23,31,.35)}100%{box-shadow:0 0 0 0 rgba(47,116,246,0),0 1px 3px rgba(16,23,31,.35)}}
.in .mp{animation:pinDrop .6s cubic-bezier(.3,.8,.3,1) calc(.6s + var(--i) * .08s) both}
.in .mp.hit{z-index:3;animation:pinDrop .6s cubic-bezier(.3,.8,.3,1) .6s both,pinHit 1.8s ease-out 1.8s 3}
.lz{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(16,23,40,.18)}
.lz b{width:26px;height:26px;display:grid;place-items:center;background:#fff;font-weight:500;font-size:15px;color:#1a2531;border-bottom:1px solid var(--line)}
.lz b:last-child{border-bottom:0}
.mrows{margin-top:12px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mr{display:grid;grid-template-columns:1fr 1.5fr 1fr 1.1fr 1.2fr;gap:8px;align-items:center;padding:9px 12px;font-size:11.5px;border-bottom:1px solid var(--line)}
.mr:last-child{border-bottom:0}
.mr i{display:block;font-style:normal;font-size:10px;color:#4d5a68}
.mr em{font-style:normal;font-family:var(--mono);font-size:10px;color:#0951D9}
.mr .mono{font-family:var(--mono);font-size:10.5px}
@keyframes rowHl{from{background:rgba(47,116,246,0);box-shadow:inset 0 0 0 #2F74F6}to{background:rgba(47,116,246,.10);box-shadow:inset 3px 0 0 #2F74F6}}
.in .mr.hl{animation:rowHl .72s ease 1.92s both}
@media (prefers-reduced-motion:reduce){ .mr.hl{background:rgba(47,116,246,.10);box-shadow:inset 3px 0 0 #2F74F6} }

/* on set: scan it, shoot it, LogIt — three stages driven by the step list beside it.
   Each stage's rules below are its END state; entrance animations fill backwards only,
   so reduced motion (no animation) lands on the same finished frame. */
.scn-shot{height:452px}
.shot{position:absolute;left:0;top:0;width:540px;height:405px;margin:0;border-radius:20px;overflow:hidden;background:#0a0e14;box-shadow:var(--shadow-lg)}
.shot .plate{position:absolute;inset:0;transform-origin:0 0;transition:transform .9s cubic-bezier(.3,.7,.2,1) .14s,filter .9s}
.shot .bg{display:block;width:100%;height:100%;object-fit:cover}
/* the unit's sticker, stuck on the panel's plate over the Status light. matrix3d maps the 150x216 sticker
   onto the plate: solved from the plate's own four edges (its top, the teal band, its right edge and the screen bezel), square to them */
.on-stk{position:absolute;left:0;top:0;width:150px;height:216px;box-sizing:border-box;padding:11px 10px 8px;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:10px;background:#f0efe8;transform-origin:0 0;transform:matrix3d(0.435156,0.0136357,0,0.000139909,0.0442057,0.438346,0,0.000143394,0,0,1,0,444.757,60.8467,0,1);box-shadow:0 0 0 .7px rgba(70,62,48,.38),0 1.5px 1.5px rgba(0,0,0,.3),0 3px 8px rgba(0,0,0,.14);filter:saturate(.84) contrast(.92) blur(.3px)}
.on-stk::before,.on-stk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.on-stk::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .24 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.22;mix-blend-mode:multiply}
.on-stk::after{background:linear-gradient(165deg,rgba(255,255,255,.3),rgba(255,255,255,0) 38%,rgba(50,38,16,.08))}
.on-stk .stk-top{height:14px;font-size:10px;gap:4px}.on-stk .stk-top svg{width:12px;height:12px}
.on-stk .qr{width:100px;height:100px;margin:7px auto 6px}
.on-stk .stk-n{font-size:13px}.on-stk .stk-t{font-size:9.5px}.on-stk .stk-s{margin-top:auto;font-size:6px}
.shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(8,14,30,.28),rgba(8,14,30,0) 26%,rgba(8,14,30,0) 70%,rgba(8,14,30,.35))}
.lay{position:absolute;inset:0;z-index:2;transition:opacity .54s ease}
.flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0;pointer-events:none}
@keyframes flash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
/* stage 0 — scan it */
/* scan: the phone's camera opens on the whole panel, zooms in on the sticker, and holds it,
   drifting a touch in the hand, until the code locks. The resting style is the locked frame. */
.scn-shot[data-stage="0"] .plate{transform:translate(-1423.0px,-184.2px) scale(3.65);filter:brightness(.84) saturate(.9);transition:none;   /* in by its animations alone, as the phone card (stage 2) */
  animation:camZoom 1.9s cubic-bezier(.55,0,.25,1) 1.1s backwards,camWake .8s ease-out backwards,camDrift 4.2s ease-in-out backwards}
@keyframes camZoom{from{transform:none;filter:none}}
@keyframes camWake{from{filter:blur(7px) brightness(.55)}to{filter:none}}
@keyframes camDrift{0%{translate:3px -2px;rotate:.25deg}28%{translate:-2px 2px;rotate:-.15deg}66%{translate:16px -12px;rotate:.6deg}86%{translate:-5px 4px;rotate:-.2deg}100%{translate:0 0;rotate:0deg}}
.iris{position:absolute;inset:0;background:#000;opacity:0}
.scn-shot[data-stage="0"] .iris{animation:irisOpen .55s ease .1s backwards}
@keyframes irisOpen{from{opacity:1}to{opacity:0}}
/* the camera's own lens buttons, so the opening reads as the phone's camera: 1× while it's wide, 3.6× once it's in */
.lens{position:absolute;left:294.5px;bottom:14px;display:flex;align-items:center;gap:8px;padding:5px;border-radius:999px;background:rgba(0,0,0,.34);transform:translateX(-50%);opacity:0}
.lens>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(10,12,16,.55);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:600}
.lens>span b{grid-area:1/1;font-weight:600}
.lens .z1{opacity:0}
.lens .l3{color:#ffd60a;transform:scale(1.2)}
.scn-shot[data-stage="0"] .lens{animation:lensOn 4.7s linear backwards}
@keyframes lensOn{0%,8%{opacity:0}14%,93%{opacity:1}100%{opacity:0}}
.scn-shot[data-stage="0"] .lens .l1{animation:lensWas 2.1s step-end backwards}
.scn-shot[data-stage="0"] .lens .l3{animation:lensNot 2.1s step-end backwards}
@keyframes lensWas{0%{color:#ffd60a;transform:scale(1.2)}}
@keyframes lensNot{0%{color:#fff;transform:none}}
.scn-shot[data-stage="0"] .lens .z1{animation:capSent 2.1s step-end both}
.scn-shot[data-stage="0"] .lens .z2{animation:capRead 2.1s step-end both}
.lay-scan{opacity:0;transition-duration:.2s}   /* leaving the scan, the overlay is gone before the photo pulls back (.plate waits .14s), so the brackets never float over the wrong spot */.scn-shot[data-stage="0"] .lay-scan{opacity:1}
.reticle{position:absolute;left:202.5px;top:73px;width:184px;height:184px}
.reticle i{position:absolute;width:30px;height:30px;border:3px solid #2F74F6;box-shadow:0 0 11px #2F74F6}
.reticle i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.reticle i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
.reticle i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
.reticle i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
.reticle .sl{position:absolute;left:8px;right:8px;top:8px;height:2px;background:#2F74F6;box-shadow:0 0 10px #2F74F6;opacity:0}
/* glass chips with depth: a lit top edge, a darker foot, a tight contact shadow and a soft cast shadow */
.cam-top,.locktag,.ov-status,.ov-strip,.geo{background:linear-gradient(180deg,rgba(36,50,84,.84),rgba(9,16,33,.9));border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(10px) saturate(1.4) brightness(.8);backdrop-filter:blur(10px) saturate(1.4) brightness(.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.3),0 1px 2px rgba(3,7,18,.42),0 12px 28px -10px rgba(3,7,18,.62);font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--scn-glass-ink);white-space:nowrap}
.cam-top,.locktag,.ov-status,.geo{position:absolute;display:flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px}
/* chips arrive by rising and settling (individual transform properties, so centring transforms are kept) */
@keyframes chipIn{from{opacity:0;translate:0 10px;scale:.92}60%{opacity:1}to{opacity:1;translate:0 0;scale:1}}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 7px rgba(229,72,77,0)}}
@keyframes checkDraw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.cam-top{left:14px;top:14px;font-weight:500}
.cam-top i{width:7px;height:7px;border-radius:50%;background:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.25);animation:livePulse 1.6s ease-out 5}
/* where and when, stamped as the sticker locks; it stays on through the shot */
.geo{right:14px;top:14px;gap:6px;font-weight:500}
.geo svg{flex:none;width:12px;height:12px;fill:none;stroke:var(--scn-accent-dk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.geo .ov-sep{margin:0 2px}
.lay-geo{opacity:0}.scn-shot[data-stage="0"] .lay-geo,.scn-shot[data-stage="1"] .lay-geo{opacity:1}
.scn-shot[data-stage="0"] .geo{animation:chipIn .55s cubic-bezier(.2,1.3,.4,1) 5.05s backwards}
.scn-shot[data-stage="0"] .cam-top{animation:chipIn .55s cubic-bezier(.2,1.3,.4,1) .35s backwards}
.cam-hint{position:absolute;left:294.5px;top:16px;padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.5);transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.04em;white-space:nowrap;color:#e7eef5;opacity:0}
.locktag{left:294.5px;bottom:24px;transform:translateX(-50%)}
.locktag svg,.rd-note .n2 svg{width:13px;height:13px;fill:none;stroke:var(--scn-accent-dk);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@keyframes retUnlocked{from,to{border-color:#e7eef5;box-shadow:none}}
@keyframes lockpop{0%,100%{transform:scale(1)}45%{transform:scale(.92)}}
@keyframes sweepOnce{0%{opacity:1;transform:translateY(0)}45%{transform:translateY(150px)}90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
@keyframes hintOn{0%,11%{opacity:0}17%,94%{opacity:1}100%{opacity:0}}
.scn-shot[data-stage="0"] .reticle i{animation:retUnlocked 4.6s linear backwards}
.scn-shot[data-stage="0"] .reticle{animation:fade .35s ease 2.95s backwards,lockpop .45s cubic-bezier(.2,1.35,.4,1) 4.6s backwards}
.scn-shot[data-stage="0"] .reticle .sl{animation:sweepOnce 1.5s ease-in-out 3.1s backwards}
.scn-shot[data-stage="0"] .cam-hint{animation:hintOn 4.6s linear backwards}
.scn-shot[data-stage="0"] .locktag{animation:chipIn .55s cubic-bezier(.2,1.3,.4,1) 4.8s backwards}
.locktag svg path{stroke-dasharray:20}
.scn-shot[data-stage="0"] .locktag svg path{animation:checkDraw .4s ease-out 5.05s backwards}
/* stage 1 — shoot it */
.lay-shoot{opacity:1}.scn-shot[data-stage="0"] .lay-shoot{opacity:0}
.scn-shot[data-stage="1"] .flash{animation:flash .54s ease-out .86s}
.rc-fr{position:absolute;left:15%;top:27%;width:59%;height:57%}
.rc-fr i{position:absolute;width:24px;height:24px;border:2px solid rgba(255,255,255,.92);filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.rc-fr i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:8px}
.rc-fr i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:8px}
.rc-fr i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:8px}
.rc-fr i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:8px}
.rc-scan{position:absolute;left:15%;width:59%;top:27%;height:3px;opacity:0;background:linear-gradient(90deg,transparent,#6F9EF9 20%,#fff 50%,#6F9EF9 80%,transparent);box-shadow:0 0 18px 4px rgba(111,158,249,.55)}
.ov-status{left:14px;top:14px;overflow:hidden}
.ov-status::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}
.scn-shot[data-stage="1"] .ov-status{animation:chipIn .6s cubic-bezier(.2,1.3,.4,1) 1.14s backwards}
.scn-shot[data-stage="1"] .ov-status::after{animation:shimmer 1.32s ease-in-out 1.56s 2 backwards}
.ov-status svg{flex:none;width:12px;height:12px;fill:var(--scn-accent-dk)}
.ov-st{display:inline-flex}.ov-st span{display:inline-block;overflow:hidden;white-space:nowrap}.ov-live{max-width:0;opacity:0}.ov-done{max-width:12em}
.ov-sep{flex:none;width:1px;height:12px;background:var(--scn-glass-line)}
.ov-conf{font-weight:700;color:#cfe0ff;letter-spacing:.06em}
.ov-strip{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:8px 14px;border-radius:var(--scn-r-chip)}
.ov-r{display:inline-flex;align-items:baseline;gap:5px}
.ov-r b{font-weight:500;color:var(--scn-glass-dim)}
.scn-shot .ov-r,.scn-shot .ov-status .ov-sep,.scn-shot .ov-conf{opacity:0}
.scn-shot[data-stage="1"] .ov-r,.scn-shot[data-stage="1"] .ov-status .ov-sep,.scn-shot[data-stage="1"] .ov-conf{opacity:1}
.scn-shot[data-stage="1"] .ov-live{animation:liveOut 3.36s linear backwards}
.scn-shot[data-stage="1"] .ov-done{animation:doneIn 3.36s linear backwards}
@keyframes liveOut{0%,89%{max-width:12em;opacity:1}100%{max-width:0;opacity:0}}
@keyframes doneIn{0%,89%{max-width:0;opacity:0}100%{max-width:12em;opacity:1}}
.scn-shot[data-stage="1"] .ov-status .ov-sep,.scn-shot[data-stage="1"] .ov-conf{animation:sIn .42s ease 3.12s backwards}
.scn-shot[data-stage="1"] .ov-strip{animation:chipIn .6s cubic-bezier(.2,1.3,.4,1) 3s backwards}
.scn-shot[data-stage="1"] .ov-r{animation:stripIn .48s cubic-bezier(.2,.8,.2,1) calc(3.12s + var(--i) * .1s) backwards}
@keyframes stripIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes scanSweep{0%{opacity:0;top:27%}8%{opacity:1}50%{top:82%}92%{opacity:1}100%{opacity:0;top:27%}}
@keyframes frIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}
@keyframes held{from,to{opacity:1}}
@keyframes gone{from,to{opacity:0}}
.scn-shot[data-stage="1"] .rc-fr{animation:frIn .54s cubic-bezier(.2,.8,.2,1) 1.02s backwards}
.scn-shot[data-stage="1"] .rc-scan{animation:scanSweep 1.56s ease-in-out 1.44s backwards}
/* stage 2 — LogIt */
.scn-shot[data-stage="2"] .lay-shoot{opacity:0}
.scn-shot[data-stage="2"] .plate{filter:brightness(.62) saturate(.85)}
.phone-card{position:absolute;right:-12px;bottom:0;width:268px;z-index:6;--c-bg:#0b1428;--c-panel:#141e38;--c-p2:#0f1830;--c-edge:#273356;--c-ink:#eef3fb;--c-text:#c2cee0;--c-dim:#93a4c0;--c-faint:#75859f;padding:12px;border-radius:var(--scn-r-card);background:var(--scn-card);border:1px solid var(--scn-card-line);box-shadow:var(--scn-shadow-card);color:var(--c-text);font-size:13px;opacity:0;transform:translateY(24px) scale(.97);transition:opacity .42s,transform .42s}
.scn-shot[data-stage="2"] .phone-card{opacity:1;transform:none;transition:none;animation:sPop .84s cubic-bezier(.2,.8,.2,1) .18s backwards}   /* in by the pop alone: Safari restarts a transition under a running animation every frame, then plays what is left of it once the pop ends, a second small pop. It still fades out by the base rule's transition */
.kwrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin-top:9px}
.kwrow b{white-space:nowrap}
.kwrow b{font-size:19px;font-weight:600;color:var(--c-ink);font-variant-numeric:tabular-nums}
.kwrow>span{font-family:var(--mono);font-size:9.5px;color:var(--c-dim)}
.phone-card .read-h{font-size:12px;color:var(--c-dim)}
.rh-id{font-family:var(--mono);font-size:11px;color:var(--c-dim)}.rh-id b{font-size:13.5px;font-weight:600;color:var(--c-ink)}
.rh-sub{display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:3px;font-size:11px;color:var(--c-dim)}
.rh-geo{display:inline-flex;align-items:center;gap:4px}
.rh-geo svg{flex:none;width:11px;height:11px;fill:none;stroke:var(--scn-accent-dk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.phone-card{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(3,7,18,.3),var(--scn-shadow-card)}
.rd-note{display:grid;margin-top:8px;font-size:11px;color:var(--c-dim)}
.rd-note span{grid-area:1/1}
.rd-note .n2{display:flex;align-items:center;gap:6px;opacity:0;color:var(--scn-ok-dk);font-weight:500}
.rd-note .n2 svg{stroke:var(--scn-ok-dk)}
.scn-shot[data-stage="2"] .rd-note .n1{animation:held 2.76s linear backwards;opacity:0}
.scn-shot[data-stage="2"] .rd-note .n2{opacity:1;animation:gone 2.76s linear backwards,sIn .36s ease 2.76s backwards}
.phone-card .acts{margin-top:9px}
.lg{position:relative;flex:1;display:grid!important;place-items:center;background:#15803d!important}
.lg em{grid-area:1/1;font-style:normal}
.lg .lg1{opacity:0}
@keyframes btnBlue{from,to{background:#1463F5}}
@keyframes press{0%,100%{transform:none}50%{transform:scale(.95)}}
.scn-shot[data-stage="2"] .lg{animation:btnBlue 2.64s linear backwards,press .36s ease 2.34s backwards}
.scn-shot[data-stage="2"] .lg .lg1{animation:held 2.64s linear backwards}
.scn-shot[data-stage="2"] .lg .lg2{animation:gone 2.64s linear backwards,sIn .3s ease 2.64s backwards}
/* the step list beside it is the control */
.steps.stages{gap:6px}
.steps.stages li{display:block;font-weight:400;color:var(--text)}
.steps.stages button{position:relative;display:grid;grid-template-columns:34px 1fr;row-gap:2px;width:100%;padding:12px 14px 13px 12px;border-radius:14px;text-align:left;font:inherit;color:inherit;background:transparent;border:1px solid transparent;cursor:pointer;opacity:1;transition:opacity .3s,background .3s,border-color .3s}
.steps.stages button:hover{opacity:.9}
.steps.stages button>span{grid-row:span 2;font-family:var(--mono);font-size:13px;color:var(--faint);padding-top:3px}
.steps.stages button>b{font-size:17px;font-weight:600;color:var(--ink)}
.steps.stages button em{font-style:normal;font-size:15.5px;color:var(--dim);line-height:1.4}
.steps.stages .bar{position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#1463F5,#0891b2);transform:scaleX(0);transform-origin:left}
.steps.stages li:not(.on) button>b{color:var(--dim)}
.steps.stages li:not(.on) button em{color:var(--faint)}
.steps.stages li:not(.on) .lockup .wm{color:var(--dim)}
main:focus{outline:none}
.steps.stages li.on button{opacity:1;background:#fff;border-color:var(--line);box-shadow:0 8px 24px rgba(16,23,40,.06)}
@keyframes stageBar{to{transform:scaleX(1)}}
.steps.stages li.on .bar{animation:stageBar var(--dur) linear forwards}
.steps.stages.hold li.on .bar{animation:none;transform:scaleX(1)}
/* phones: each chapter lands as one screen, its title, copy and scene together, in Safari with its toolbar
   showing (699px on a 390x844 iPhone). The staged step list becomes three chips with the playing step's line
   under them, held at a fixed height so the scene never moves when the step changes. */
.stage-cap{display:none}
@media (max-width:900px){
  /* the space between one resting place and the next: enough that resting on either, nothing of the other
     shows, with Safari's toolbar showing or hidden (40px more screen) and with the nav capsule showing (its
     rest sits 38px lower). Sized from the screen with the toolbar showing (100svh), as the rest points are;
     each gap is that half screen less half its shortest neighbour, plus room for a scene's shadow. */
  .chapter-title{padding-top:max(120px,calc(50svh - 190px));padding-bottom:4px}
  .chapter-head + .chapter-title{padding-top:64px}                      /* the first sits closer, under the path's start */
  .data{padding-top:max(120px,calc(50svh - 150px));padding-bottom:100px}
  .proof{margin-top:max(96px,calc(50svh - 100px))}
  .block,.block.flip{gap:18px;padding:12px 0 16px}
  .block-copy h3{margin-top:6px;font-size:26px}
  .steps{margin-top:12px;gap:7px}
  .steps li{grid-template-columns:28px 1fr;font-size:15.5px;line-height:1.35}
  .steps li>span{font-size:12px;padding-top:2px}
  .steps.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .steps.stages button{grid-template-columns:auto minmax(0,1fr);column-gap:6px;align-items:baseline;padding:10px 9px 11px;border-color:var(--line)}
  .steps.stages button>span{grid-row:auto;padding-top:0;font-size:11.5px}
  .steps.stages button>b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .steps.stages button em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .steps.stages .bar{left:9px;right:9px}
  .stage-cap{display:block;margin-top:10px;min-height:2.8em;font-size:15px;line-height:1.4;color:var(--dim);text-wrap:pretty}
}
@media (max-width:380px){ .stage-cap{min-height:4.2em} }
/* the LogIt wordmark set inline in copy: text only, brand-coloured "It", scales with the text around it */
.lockup{white-space:nowrap}
.lockup .wm{font-family:var(--sans);font-size:1em;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.nw{white-space:nowrap}
.lockup .wm b{color:var(--fill)}      /* the deeper brand blue at text sizes: 5.1:1 on white */
.phone .rc-fr{opacity:1}

/* the phone's photo bubble carries the real panel photo */
.photo.real{position:relative;width:66%;padding:0;background:#0e1526;border-radius:14px;overflow:hidden}
.photo.real .ph-img{height:128px;background:url(assets/photos/panel-comap.jpg) 59.6% 45.1%/376.5% auto no-repeat}
.photo.real .ph-cap{display:flex;align-items:center;gap:5px;padding:6px 9px;font-family:var(--mono);font-size:9.5px;color:#eef3fb;background:#16203a}
.photo.real .ph-cap svg{width:10px;height:10px;fill:#6F9EF9}
.rc-fr.sm{left:6%;top:6%;width:88%;height:calc(128px * .88)}
.rc-fr.sm i{width:14px;height:14px;border-width:2px}
.ov-strip.sm{left:8px;right:auto;bottom:34px;transform:none;gap:7px;padding:4px 7px;border-radius:7px;font-size:9px}
.ov-strip.sm .ov-r{gap:3px}
.phone .ov-strip.sm .ov-r{animation:stripIn .42s cubic-bezier(.2,.8,.2,1) calc(1.08s + var(--i) * .12s) backwards}
.phone .kwrow b{font-size:17px}

/* office: export from the ledger whenever it's needed */

.xcard{position:absolute;left:-12px;top:203px;z-index:5;width:212px;padding:12px 13px;border-radius:var(--scn-r-card);background:#fff;box-shadow:var(--shadow-lg)}
.xc-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:#1a2531;margin-bottom:4px}
.xc-h svg{width:16px;height:16px;fill:none;stroke:#0951D9;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.xc-k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;color:#4d5a68;margin:7px 0 4px}
.xc-seg{display:flex;padding:3px;border-radius:9px;background:#eef2f7}
.xc-seg span{flex:1;text-align:center;padding:5px 4px;border-radius:7px;font-size:10.5px;font-weight:600;color:#4d5a68;white-space:nowrap}
.xc-seg span.on{background:#fff;color:#1a2531;box-shadow:0 1px 2px rgba(16,23,40,.12)}
.xc-btn{margin-top:10px;padding:8px 0;border-radius:9px;background:#1463F5;color:#fff;text-align:center;font-size:12px;font-weight:600}
@keyframes xPress{0%,100%{transform:none}50%{transform:scale(.95)}}
.in .xcard .xc-btn{animation:xPress .36s ease 3.72s both}
/* wrap: the receipt kept after a deletion on request */
.rcpt-card{position:absolute;right:0;top:26px;z-index:3;width:196px;padding:14px;border-radius:var(--scn-r-card);background:#fff;border:1px dashed #cfd7e3;box-shadow:0 18px 40px rgba(22,38,74,.12)}
.rc-t{font-size:15px;font-weight:700;color:#1a2531;margin-top:3px}
.rcpt-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:10px 0 0;font-size:11px}
.rcpt-card dt{color:#4d5a68}
.rcpt-card dd{margin:0;color:#1a2531;font-weight:600;text-align:right}
.rcpt-card .mono{font-family:var(--mono);font-size:10.5px;color:#0951D9}
.rc-f{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.4;color:#4d5a68}
.js .block-vis:not(.in) .scn .a-pop5{opacity:0}
.in .scn .a-pop5{animation:sPop .84s cubic-bezier(.2,.8,.2,1) 5.64s both}

/* your data: one entry, bundled and sealed, linked to the one before */
.seal{position:relative;display:grid;grid-template-columns:250px 56px minmax(0,380px) 190px;align-items:center;justify-content:center;gap:0 14px;margin:52px auto 0;max-width:980px;text-align:left}
.seal-ings{display:flex;flex-direction:column;gap:8px}
.ing{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(16,23,40,.05)}
.ing b{display:block;font-size:13px;color:var(--ink)}
.ing i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--faint);white-space:nowrap}
.ing-ic,.ing-ph{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(20,99,245,.08)}
.ing-ic svg{width:16px;height:16px;fill:none;stroke:#0951D9;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ing-ph{background:url(assets/photos/panel-comap.jpg) 46% 50%/260% auto}
.seal-flow{position:relative;height:2px;background:repeating-linear-gradient(90deg,#b9c3d4 0 5px,transparent 5px 10px)}
.seal-flow i{position:absolute;right:-3px;top:-4px;border:5px solid transparent;border-left-color:#b9c3d4}
.seal-card{position:relative;padding:16px 16px 14px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);transition:border-color .4s,box-shadow .4s}
.sc-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--faint)}
.sc-state{display:inline-grid;justify-items:end}
.sc-state em{grid-area:1/1;font-style:normal;padding:4px 9px;border-radius:20px;font-weight:600;letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .3s}
.sc-state .a{color:#0951D9;background:rgba(20,99,245,.10)}
.sc-state .b{color:#13693a;background:rgba(21,163,74,.12)}
.sc-state .c{color:#a82c46;background:rgba(214,69,90,.12)}
.sc-rows{list-style:none;margin:12px 0 0;padding:0}
.sc-rows li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #f0f3f7;font-size:12.5px}
.sc-rows li span{color:var(--faint)}
.sc-rows li b{font-weight:600;color:var(--ink);text-align:right}
.sc-rows .mono,.sc-link .mono,.sp-f .mono{font-family:var(--mono);font-size:11px;color:#0951D9}
.amp{position:relative;display:inline-grid;font-style:normal}.amp span{position:relative;z-index:1;grid-area:1/1;transition:opacity .12s}
.amp .v2{opacity:0;color:#a82c46}
.sc-rows li .amp .v1{color:inherit}
/* the edit: a pointer comes in, selects the 85, types 95 over it */
.amp-sel{grid-area:1/1;margin:-1px -3px;border-radius:3px;background:rgba(214,69,90,.2);opacity:0}
.amp-caret{grid-area:1/1;justify-self:end;align-self:center;z-index:2;width:1.5px;height:1.05em;margin-right:-3px;background:#a82c46;opacity:0}
.amp-cur{position:absolute;left:60%;top:55%;z-index:3;width:13px;height:17px;opacity:0;pointer-events:none}
.amp-cur svg{display:block;width:100%;height:100%;fill:#10141d;stroke:#fff;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.sc-edit{position:relative}
.sc-edit::before{content:"";position:absolute;inset:0 -8px;border-radius:8px;background:rgba(214,69,90,.06);opacity:0;transition:opacity .3s}
.sc-edit>*{position:relative}
.row-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;vertical-align:1px;font-style:normal;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.04em;color:#a82c46;background:rgba(214,69,90,.12);opacity:0;transform:translateY(2px);transition:opacity .25s,transform .25s}
.sc-fp{position:relative;display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 12px 10px 38px;border-radius:12px;background:#f5f7fb;border:1px solid var(--line);transition:background .4s,border-color .4s}
/* the wax seal, pressed over the card's edge at the fingerprint: everything above it is bound under it */
.wax{position:absolute;left:-50px;top:50%;width:76px;height:76px;margin-top:-38px;opacity:0;transform:rotate(-10deg);pointer-events:none;overflow:visible;filter:drop-shadow(0 3px 4px rgba(8,30,90,.32)) drop-shadow(0 1px 1px rgba(8,30,90,.28))}
.wax-l,.wax-r{transform-origin:40px 40px;transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.wax-crack{fill:none;stroke:#061f5c;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:90;stroke-dashoffset:90;opacity:0;transition:stroke-dashoffset .45s ease-out,opacity .15s}
@keyframes jolt{0%,100%{transform:none}18%{transform:translateX(-5px)}36%{transform:translateX(4px)}56%{transform:translateX(-2.5px)}76%{transform:translateX(1px)}}
@keyframes waxPress{0%{opacity:0;transform:translateY(-16px) scale(1.6) rotate(6deg)}55%{opacity:1;transform:scale(.9) rotate(-12deg)}78%{transform:scale(1.03) rotate(-9.5deg)}100%{opacity:1;transform:scale(1) rotate(-10deg)}}
@keyframes thump{0%,100%{transform:none}45%{transform:translateY(1.5px) scale(.996)}}
.sc-check{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:6px;padding:0 12px 0 38px;font-size:11.5px;color:var(--faint);opacity:0;transition:opacity .3s}
.sc-check b{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.04em;transition:color .3s}
.sc-check .ne{margin:0 8px 0 auto;font-style:normal;font-size:15px;font-weight:700;line-height:1;color:#a82c46;opacity:0;transition:opacity .3s}
/* time passes between the seal and the edit: the jump is marked on the card */
.sc-later{position:absolute;left:50%;top:-13px;z-index:2;display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:#10172a;color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap;box-shadow:0 6px 16px rgba(16,23,40,.22);opacity:0;transform:translate(-50%,6px);transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1)}
.sc-later svg{width:12px;height:12px;fill:none;stroke:#6F9EF9;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sc-fp span{font-size:12px;color:var(--faint)}
.sc-fp b{margin-left:auto;font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.04em;transition:color .3s}
.sc-link{display:flex;justify-content:space-between;margin-top:10px;font-size:11.5px;color:var(--faint);transition:opacity .4s}
.js .sc-link{opacity:.35}
.seal-prev{padding:13px 14px;border-radius:14px;background:#fff;border:1px dashed #cfd7e3;transition:opacity .4s,border-color .4s}
.js .seal-prev{opacity:.55}
.sp-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint)}
.sp-b{margin-top:6px;font-size:13px;font-weight:600;color:var(--ink)}
.sp-f{margin-top:5px;font-size:11px;color:var(--faint)}
.seal-say{grid-column:1/-1;display:grid;margin:26px auto 0;max-width:40em;text-align:center;font-size:15px;color:var(--dim)}
.seal-say span{grid-area:1/1;transition:opacity .35s}
.seal-say .t2{opacity:0;color:#a82c46}
.seal-say .t3{opacity:0;color:var(--ink)}
/* stages */
@keyframes ingGo{0%{transform:none}45%{transform:translateX(22px);border-color:#9fbaf7}100%{transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.js .seal .sc-rows li{opacity:0}
.seal.s-sealed .sc-rows li,.seal.s-tamper .sc-rows li{opacity:1}
.seal.s-sealed .ing{box-shadow:none;background:#fbfcfe;transition:box-shadow .4s,background .4s}
.seal.s-in .ing{animation:ingGo .8s cubic-bezier(.3,.7,.3,1) calc(var(--i) * .24s) both}
.seal.s-in .sc-rows li{animation:rowIn .45s cubic-bezier(.2,.8,.2,1) calc(.36s + var(--i) * .24s) both}
.seal.s-in .seal-flow{background:repeating-linear-gradient(90deg,#1463F5 0 5px,transparent 5px 10px);background-size:20px 2px;animation:flowDash .6s linear infinite}
.seal.s-in .seal-flow i{border-left-color:#1463F5}
@keyframes flowDash{to{background-position:20px 0}}
.seal.s-sealing .sc-state .a{opacity:1}
.seal.s-sealed .seal-flow{animation:none;background:repeating-linear-gradient(90deg,#b9c3d4 0 5px,transparent 5px 10px)}
.seal.s-sealed .seal-flow i{border-left-color:#b9c3d4}
.seal.s-sealed .sc-state .a{opacity:0}.seal.s-sealed .sc-state .b{opacity:1}
.seal.s-sealed .seal-card{border-color:rgba(21,163,74,.45);box-shadow:0 0 0 4px rgba(21,163,74,.10),var(--shadow-lg)}
.seal.s-sealed .sc-fp{background:rgba(21,163,74,.07);border-color:rgba(21,163,74,.3)}
.seal.s-sealed .wax{opacity:1;animation:waxPress .65s cubic-bezier(.3,.6,.3,1) both}
.seal.s-sealed .seal-card{animation:thump .45s ease .3s both}
.seal.s-sealed .sc-link{opacity:1}
.seal.s-sealed .seal-prev{opacity:1;border-color:#9fd3b2}
/* someone edits the sealed record: the captured value on the left lights up, the pointer selects 85 and types 95 */
@keyframes curIn{0%{opacity:0;transform:translate(52px,34px)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes curOut{from{opacity:1;transform:none}to{opacity:0;transform:translate(10px,8px)}}
@keyframes fadeOn{from{opacity:0}to{opacity:1}}
@keyframes caretBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.seal.s-edit .amp-cur{animation:curIn .8s cubic-bezier(.3,.7,.3,1) both}
.seal.s-edit .amp-sel{animation:fadeOn .14s linear .85s both}
.seal.s-edit .sc-edit::before{opacity:1}
.seal.s-edit .ing-read{opacity:1;border-color:rgba(20,99,245,.45);box-shadow:0 0 0 3px rgba(20,99,245,.10);transition:opacity .3s,border-color .3s,box-shadow .3s}
.seal.s-later .sc-later{opacity:1;transform:translate(-50%,0)}
.seal.s-later .seal-say .t1{opacity:0}.seal.s-later .seal-say .t3{opacity:1}
.seal.s-edited .amp .v1{opacity:0}.seal.s-edited .amp .v2{opacity:1}
.seal.s-edited .amp-sel{animation:none;opacity:0}
.seal.s-edited .amp-caret{animation:caretBlink .9s steps(1) infinite}
.seal.s-edited .amp-cur{animation:curOut .45s ease .35s both}
.seal.s-edited .row-tag{opacity:1;transform:none}
/* the recheck: the fingerprint is worked out again from what the record says now */
.seal.s-check .sc-check{opacity:1}
/* it no longer matches the one under the seal, and the seal breaks */
.seal.s-tamper .sc-state .b{opacity:0}.seal.s-tamper .sc-state .c{opacity:1}
.seal.s-tamper .seal-card{border-color:rgba(214,69,90,.5);box-shadow:0 0 0 4px rgba(214,69,90,.10),var(--shadow-lg)}
.seal.s-tamper .sc-check b,.seal.s-tamper .sc-check span{color:#a82c46}.seal.s-tamper .sc-check .ne{opacity:1}
.seal.s-tamper .sc-fp{background:rgba(214,69,90,.06);border-color:rgba(214,69,90,.34);animation:jolt .5s cubic-bezier(.3,.6,.3,1) .1s}
.seal.s-tamper .wax-l{transform:translate(-6px,2px) rotate(-9deg)}
.seal.s-tamper .wax-r{transform:translate(6px,-1px) rotate(8deg)}
.seal.s-tamper .wax-crack{opacity:1;stroke-dashoffset:0}
.seal.s-tamper .seal-say .t3{opacity:0}.seal.s-tamper .seal-say .t2{opacity:1}
/* no script or reduced motion: the sealed frame */
html:not(.js) .seal .sc-state .b,html:not(.js) .wax{opacity:1}
@media (prefers-reduced-motion:reduce){ .js .seal .sc-rows li{opacity:1} .seal *{animation:none!important} }
@media (max-width:900px){
  .seal{grid-template-columns:1fr;gap:14px;max-width:420px;margin-top:max(120px,calc(50svh - 115px))}   /* its own resting place, apart from the statement (see the phone chapter layout) */
  .seal-ings{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  .ing{justify-content:center;padding:7px 0}.ing>div{display:none}   /* the card below names each one */
  .seal-prev{display:none}                                              /* the card still says what it links to */
  .ing i{white-space:normal}
  .seal-flow{width:2px;height:20px;margin:0 auto;background:repeating-linear-gradient(180deg,#b9c3d4 0 5px,transparent 5px 10px)}
  .seal-flow i{right:auto;left:-4px;top:auto;bottom:-6px;border-left-color:transparent;border-top-color:#b9c3d4}
  .seal.s-in .seal-flow{background:repeating-linear-gradient(180deg,#1463F5 0 5px,transparent 5px 10px);background-size:2px 20px}
  .seal.s-in .seal-flow i{border-left-color:transparent;border-top-color:#1463F5}
  .seal.s-sealed .seal-flow{background:repeating-linear-gradient(180deg,#b9c3d4 0 5px,transparent 5px 10px)}
  .seal.s-sealed .seal-flow i{border-left-color:transparent;border-top-color:#b9c3d4}
  @keyframes flowDash{to{background-position:0 20px}}
  .seal.s-in .ing{animation-name:ingGoY}
  .seal-say{margin-top:8px}
  .wax{left:-32px;width:58px;height:58px;margin-top:-29px}
  .sc-later{left:14px;transform:translateY(6px)}.seal.s-later .sc-later{transform:none}   /* clear of the arrow above the card */
}
@keyframes ingGoY{0%{transform:none}45%{transform:translateY(8px);border-color:#9fbaf7}100%{transform:none}}

/* the hero's Studio window and phone are alive while they're on screen (paused otherwise) */
.js .stage:not(.live) *{animation-play-state:paused!important}
.ctr,.cnt{display:inline-grid!important}
.ctr>span,.cnt>span{grid-area:1/1}
.stats .ctr>span{display:inline;margin:0;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit}
.srch{position:relative;display:flex;align-items:center;gap:1px;overflow:hidden;white-space:nowrap}
.srch::before{content:'\200b'}
.srch .ph{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);overflow:hidden;text-overflow:ellipsis}
.srch .typed{display:inline-block;overflow:hidden;width:0;color:#1a2531;font-weight:500}
.srch .caret{display:inline-block;width:1.5px;height:13px;background:#1463F5;opacity:0}
@keyframes lgRow{0%,5%{max-height:0;padding-top:0;padding-bottom:0;opacity:0;background:rgba(47,116,246,0)}10%{max-height:64px;padding-top:10px;padding-bottom:10px;opacity:1;background:rgba(47,116,246,.18)}32%,100%{max-height:64px;padding-top:10px;padding-bottom:10px;opacity:1;background:rgba(47,116,246,.06)}}
@keyframes lgN0{0%,8.5%{opacity:1}9.5%,100%{opacity:0}}
@keyframes lgN1{0%,8.5%{opacity:0;transform:translateY(6px)}10.5%,100%{opacity:1;transform:none}}
@keyframes lgPh{0%,36%{opacity:1}37%,79%{opacity:0}80%,100%{opacity:1}}
@keyframes lgType{0%,38%{width:0}46%,78%{width:6.2ch}79%,100%{width:0}}
@keyframes lgCaret{0%,36%{opacity:0}37%,79%{opacity:1}80%,100%{opacity:0}}
@keyframes blink{50%{visibility:hidden}}
@keyframes lgDim{0%,47%{opacity:1}50%,76%{opacity:.3}79%,100%{opacity:1}}
@keyframes lgC0{0%,47%{opacity:1}48%,77%{opacity:0}78%,100%{opacity:1}}
@keyframes lgC1{0%,47%{opacity:0}48%,77%{opacity:1}78%,100%{opacity:0}}
/* one height for every tab, so neither the phone nor the page below moves as the tour plays: the ledger's
   before its new row comes in (the height the stage has at load); the row then pushes the oldest line
   below the window's edge, as a real window would */
.stage .win{--cy:12s;height:733px;display:flex;flex-direction:column}   /* a 12s loop: its step shows the new row land and the search find it */
.stage .st{flex:1}
.stage .tr.new{overflow:hidden;animation:lgRow var(--cy) cubic-bezier(.22,1,.36,1) infinite}
.stage .ctr .n0{animation:lgN0 var(--cy) linear infinite}
.stage .ctr .n1{animation:lgN1 var(--cy) cubic-bezier(.34,1.45,.5,1) infinite}
.stage .srch .ph{animation:lgPh var(--cy) linear infinite}
.stage .srch .typed{animation:lgType var(--cy) steps(6,end) infinite}
.stage .srch .caret{animation:lgCaret var(--cy) linear infinite,blink 1s steps(1) infinite}
.stage .tbl .tr:not(.th):not(.m){animation:lgDim var(--cy) ease infinite}
.stage .cnt .c0{animation:lgC0 var(--cy) linear infinite}
.stage .cnt .c1{animation:lgC1 var(--cy) linear infinite}
.cnt .c1{opacity:0}
/* Stickers & PINs: Ripley picked, its sticker printed, a crew PIN issued and emailed */
@keyframes aPick{from{background:rgba(47,116,246,0);box-shadow:inset 0 0 0 #1463F5}}
@keyframes aPrint{from{clip-path:inset(-40px -40px 100% -40px);transform:translateY(-6px)}to{clip-path:inset(-40px);transform:none}}
.stage .vw-assets .assets{align-items:start}
.stage .vw-assets .tbl .tr.a{animation:none}
.stage .vw-assets .tbl .tr.a.pick{animation:aPick .5s ease .6s backwards}
.stage .vw-assets .st-btns .pri{animation:press .36s ease 1.2s}
.stage .vw-assets .sticker{animation:aPrint 1.2s cubic-bezier(.3,.7,.2,1) 1.5s backwards}
.stage .vw-assets .pin-card{animation:sPop .9s cubic-bezier(.2,.8,.2,1) 2.9s backwards}
.stage .vw-assets .pc-typed{animation:pcType 1.08s steps(19,end) 3.5s backwards}
.stage .vw-assets .pc-send{background:transparent;box-shadow:inset 0 0 0 1px #273356;color:#c2cee0;animation:press .36s ease 4.7s,pcDone .36s ease 4.94s both}
.stage .vw-assets .pc-digits{margin-top:10px}
.stage .vw-assets .pc-digits b{animation:sDigit .6s cubic-bezier(.2,.8,.2,1) calc(4.94s + var(--i) * .17s) both}
.stage .vw-assets .pc-sent{animation:sIn .42s ease 5.9s backwards}
/* Export: Excel chosen, the bundle's files listed, the ZIP downloaded, and what the checker checks */
@keyframes eWasOn{from,to{background:rgba(47,116,246,.10);color:#0951D9;font-weight:600}}
@keyframes eWasOff{from,to{background:rgba(47,116,246,0);color:#1c2733;font-weight:500}}
@keyframes eDl{0%,63.5%{opacity:0}66%,94.4%{opacity:1}100%{opacity:0}}
@keyframes eFill{from{transform:scaleX(0)}}
.stage .vw-export .seg b:first-child{animation:eWasOn 1s step-end}
.stage .vw-export .seg b.on{animation:press .36s ease .64s,eWasOff 1s step-end}
.stage .vw-export .files i{animation:sIn .42s ease 1.5s backwards}
.stage .vw-export .files i:nth-child(2){animation-delay:1.72s}
.stage .vw-export .files i:nth-child(3){animation-delay:1.94s}
.stage .vw-export .exp-row:nth-child(5) .val{animation:sIn .42s ease 2.3s backwards}
.stage .vw-export .exp-go .pri{animation:press .36s ease 3.1s}
.stage .vw-export .exp-dl{animation:eDl 5.35s linear}
.stage .vw-export .exp-dl i{animation:eFill 1.4s cubic-bezier(.45,0,.3,1) 3.65s backwards}
.stage .vw-export .exp-done{animation:sIn .42s ease 5.4s backwards}
.stage .vw-export .chk{animation:sIn .42s ease 5.6s backwards}
.stage .vw-export .chk em{animation:sIn .42s ease 5.9s backwards}
.stage .vw-export .chk em:nth-of-type(2){animation-delay:6.2s}
.stage .vw-export .chk em:nth-of-type(3){animation-delay:6.5s}
/* ---- the hero phone plays each tab once, as it happens in Capture ----
   Scan & sign in: the phone's own camera finds the sticker's code and offers its link; the tap opens
   Capture on the PIN pad, already naming the show and the unit that was scanned; four taps sign in.
   Read the panel, Fuel receipts: the photo goes out as the crew's message, the bar turns into
   TethraAI working ("Reading the panel"), and its read comes back as a reply to confirm, then logged.
   Every element's resting style is its finished state, so reduced motion shows the end of the story. */
.scan-flow .nc-app{position:absolute;inset:0;z-index:2;background:#000;display:flex;flex-direction:column;align-items:center;color:#fff}
.nc-top{width:100%;display:flex;justify-content:space-between;align-items:center;padding:46px 18px 10px}
.nc-top span{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.12)}
.nc-top b{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;color:#ffd60a}
.nc-view{position:relative;width:100%;flex:1;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 80% at 30% 20%,#5b6168,#2c3136 55%,#1b1e22)}
.nc-view::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px)}
.nc-stk{position:relative;width:168px;padding:12px 10px 11px;border-radius:12px;background:#fff;text-align:center;transform:rotate(-4deg);box-shadow:0 14px 30px rgba(0,0,0,.45)}
.nc-stk .stk-top{font-size:11px;gap:5px}.nc-stk .stk-top svg{width:14px;height:14px}
.nc-qr{position:relative;width:104px;margin:8px auto 7px}
.nc-qr .qr{width:104px;height:104px;margin:0}
.nc-lock{position:absolute;inset:-9px}
.nc-lock i{position:absolute;width:20px;height:20px;border:3px solid #ffd60a}
.nc-lock i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:6px}
.nc-lock i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:6px}
.nc-lock i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:6px}
.nc-lock i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:6px}
.nc-stk .stk-n{font-size:14px}.nc-stk .stk-t{font-size:10px}.nc-stk .stk-s{font-size:6.5px}
.nc-pill{position:absolute;left:50%;top:462px;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;background:#ffd60a;color:#1a1a1a;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.nc-pill svg{width:14px;height:14px;fill:none;stroke:#1a1a1a;stroke-width:2}
.nc-pill svg path{fill:#1a1a1a;stroke:none}
.nc-tap{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(255,255,255,.55);opacity:0;pointer-events:none}
.nc-modes{display:flex;gap:16px;padding:14px 0 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.nc-modes b{color:#ffd60a;font-weight:600}
.nc-shut{width:58px;height:58px;margin-bottom:22px;border-radius:50%;border:3px solid #fff;display:grid;place-items:center}
.nc-shut i{width:46px;height:46px;border-radius:50%;background:#fff}
.pin-unit{width:228px;margin-top:4px}
.c-scan{color:#ffd60a;border-color:rgba(255,214,10,.4)!important}
.scan-flow .pin-dots{margin:16px 0 14px}
.scan-flow .pin-dots i{background:#6F9EF9;border-color:#6F9EF9}

.seq .ph-body.chat{justify-content:flex-end}                 /* new messages arrive at the bottom and push the thread up */
.seq .row{flex:0 0 auto}
.ph-glow{position:absolute;left:0;right:0;top:84px;bottom:66px;pointer-events:none;opacity:0;
  background:radial-gradient(90% 60% at 50% 70%,rgba(47,116,246,.22),transparent 70%)}
.ph-compose{position:relative}
.ph-think{position:absolute;inset:10px 12px 16px;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;background:#1463F5;color:#fff;font-size:12.5px;font-weight:600;opacity:0}
.tai{position:relative;width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center}
.tai svg{width:13px;height:13px;fill:#2F74F6}
.tai::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;border-top-color:#fff;border-right-color:rgba(255,255,255,.5)}
.sweep{position:absolute;left:0;right:0;top:0;height:30px;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(111,158,249,.55) 70%,rgba(207,224,255,.9) 92%,transparent)}
.photo.rcpt{position:relative;overflow:hidden}
.seq .ph-cap{position:relative}
.seq .ph-cap .cap-0{position:absolute;right:9px;top:6px;opacity:0}
.photo.real .ph-cap .cap-0{left:9px;right:auto}
.seq .ph-cap .cap-1{display:inline-flex;align-items:center;gap:5px}
.rcpt .ph-cap svg{width:10px;height:10px;fill:#2F74F6}
.rcpt .ph-cap .cap-0{right:4px;top:5px}

@keyframes camOut{to{opacity:0;transform:scale(1.04);visibility:hidden}}
@keyframes camIn{from{transform:scale(1.14) translate(10px,16px)}}
@keyframes lockIn{from{opacity:0;transform:scale(1.35)}}
@keyframes tapPulse{0%{opacity:0;transform:scale(.4)}35%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@keyframes appIn{from{opacity:0;transform:translateY(10px)}}
@keyframes dotOn{from{background:transparent;border-color:var(--c-edge)}}
@keyframes keyTap{0%,100%{background:#16203a}35%{background:#1463F5}}
@keyframes msgIn{from{max-height:0;margin-top:-10px;opacity:0;transform:translateY(10px)}to{max-height:320px;margin-top:0;opacity:1;transform:none}}
@keyframes thinkOn{0%{opacity:0;transform:translateY(6px)}12%,88%{opacity:1;transform:none}100%{opacity:0}}
@keyframes composeOff{0%,100%{opacity:1}12%,88%{opacity:0}}
@keyframes glowOn{0%,100%{opacity:0}20%,80%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes sweepDown{0%{opacity:1;transform:translateY(-30px)}100%{opacity:1;transform:translateY(128px)}}
@keyframes capSent{0%{opacity:1}100%{opacity:0}}
@keyframes capRead{0%{opacity:0}100%{opacity:1}}

.stage .scan-flow .nc-app{animation:camOut .54s ease 2.64s forwards}
.stage .scan-flow .nc-view>*{animation:camIn 1.2s cubic-bezier(.2,.7,.2,1) backwards}
.stage .scan-flow .nc-lock{animation:lockIn .42s cubic-bezier(.2,.8,.2,1) .9s backwards}
.stage .scan-flow .nc-pill{animation:chipIn .54s cubic-bezier(.2,1.3,.4,1) 1.2s backwards}
.stage .scan-flow .nc-tap{animation:tapPulse .66s ease-out 2.1s}
.stage .scan-flow .ph-bar,.stage .scan-flow .ph-body{animation:appIn .54s cubic-bezier(.2,.7,.2,1) 2.76s backwards}
/* the PIN in, the dots go green and "Enter your PIN" gives way to "Signed in": step one's result */
.pin-t{display:grid}.pin-t>span{grid-area:1/1}
.pin-t .pin-ok{visibility:hidden}
.stage .scan-flow .pin-ask{opacity:0;animation:pinOut .3s ease 5.64s backwards}
.stage .scan-flow .pin-ok{visibility:visible;animation:pinIn .4s cubic-bezier(.2,.7,.2,1) 5.72s backwards}
.stage .scan-flow .pin-dots i{background:#4cd391;border-color:#4cd391;animation:pinBlue .3s ease 5.64s backwards,dotOn .18s ease calc(3.78s + var(--i) * .5s) backwards}
@keyframes pinOut{from{opacity:1}to{opacity:0;transform:translateY(-6px)}}
@keyframes pinIn{from{opacity:0;transform:translateY(6px)}}
@keyframes pinBlue{from{background:#6F9EF9;border-color:#6F9EF9}}
.stage .scan-flow .pad .k{animation:keyTap .38s ease calc(3.66s + var(--i) * .5s)}

.stage .seq .q-send{animation:msgIn .6s cubic-bezier(.2,.7,.2,1) 1.08s backwards}
.stage .seq .ph-think{animation:thinkOn 2.4s ease 1.68s both}
.stage .seq .tai::after{animation:spin .96s linear 1.68s 3}
.stage .seq .ph-compose>span,.stage .seq .ph-compose>i{animation:composeOff 2.4s ease 1.68s both}
.stage .seq .ph-glow{animation:glowOn 2.4s ease 1.68s both}
.stage .seq .sweep{animation:sweepDown 1.08s ease-in-out 1.92s 2}
.stage .seq .rc-fr{animation:frIn .54s cubic-bezier(.2,.8,.2,1) 1.92s backwards}
.stage .seq .ov-strip.sm{animation:fade .36s ease 2.76s backwards}
.stage .phone.seq .ov-strip.sm .ov-r{animation:stripIn .42s cubic-bezier(.2,.8,.2,1) calc(2.88s + var(--i) * .22s) backwards}
.stage .seq .ph-cap .cap-0{animation:capSent 4.08s step-end both}
.stage .seq .ph-cap .cap-1{animation:capRead 4.08s step-end both}
.stage .seq .q-read{animation:msgIn .66s cubic-bezier(.2,.7,.2,1) 4.08s backwards}
.stage .seq .q-read .a-ok{animation:press .42s ease 6.36s}
.stage .seq .q-done{animation:msgIn .54s cubic-bezier(.2,.7,.2,1) 6.84s backwards}
.stage .seq .rcpt .sweep{animation-delay:1.8s}
@media (prefers-reduced-motion:reduce){
  .stage .win *,.stage .phone *{animation:none!important}
  .tab-clock{display:none}
  .tab-seg::after{transition:none}
  .tab-node,.tab-node::after{animation:none!important}
  .ctr .n0{opacity:0}
  .scan-flow .nc-app{display:none}
}
/* scroll-linked chapter entrances: the scene swings up into place as it enters and eases back as it leaves.
   Browsers without view timelines keep the one-shot reveal above. */
@supports (animation-timeline:view()){
  @media (min-width:921px) and (prefers-reduced-motion:no-preference){
    .js .journey .reveal{opacity:1;transform:none;transition:none}
    .journey .block-vis{transform-origin:50% 100%;animation:visIn linear both,visOut linear forwards;animation-timeline:view(),view();animation-range:entry 0% cover 40%,exit 45% exit 100%}
    .journey .block-copy{animation:copyIn linear both,visOut linear forwards;animation-timeline:view(),view();animation-range:entry 10% cover 36%,exit 45% exit 100%}
    .journey .chapter-title h2{animation:titleIn linear both;animation-timeline:view();animation-range:entry 0% cover 32%}
    @keyframes visIn{from{opacity:0;transform:perspective(1600px) translateY(90px) rotateX(10deg) scale(.93)}to{opacity:1;transform:none}}
    @keyframes copyIn{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
    @keyframes titleIn{from{opacity:0;transform:translateY(30px) scale(.9)}to{opacity:1;transform:none}}
    @keyframes visOut{from{opacity:1;transform:none}to{opacity:.35;transform:translateY(-28px) scale(.97)}}
  }
}

/* depth: while a chapter's scene crosses the screen, its floating cards drift against the panel under
   them, and the panel against the copy beside it. Tied to the scroll by the scene's view timeline, and
   level where the scene rests (the middle of the screen; on phones a little below it, under its copy),
   so a scene at rest sits where it was laid out. It moves translate, which the entrances (transform)
   leave alone. The sizes are on-screen pixels: dividing by --fit (the scale that fits the scene to its
   column, set by app.js) undoes that scale, so a phone's shrunken scene drifts as far as a desktop's. */
@property --depth{syntax:'<number>';inherits:true;initial-value:0}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .journey .block-vis{view-timeline:--scene}
    .journey .scn{--lift:22px;--sink:-8px;animation:depth linear both;animation-timeline:--scene;animation-range:cover}
    @keyframes depth{from{--depth:1}to{--depth:-1}}
    .journey .scn>:first-child{translate:0 calc(var(--depth) * var(--sink) / var(--fit,1))}
    .journey .scn .phone-card,.journey .scn .xcard,.journey .scn .pin-float,.journey .scn .zip,.journey .scn .rcpt-card{translate:0 calc(var(--depth) * var(--lift) / var(--fit,1))}
  }
  @media (max-width:900px) and (prefers-reduced-motion:no-preference){
    .journey .scn{animation-name:depthLow}
    @keyframes depthLow{from{--depth:1}38%{--depth:0}to{--depth:-1}}
  }
}

/* ---------- legal pages (privacy.html, terms.html) ---------- */
.doc{padding:56px 0 80px}
.doc-wrap{max-width:780px}
.doc h1{margin-top:12px;font-size:clamp(34px,5.2vw,50px);line-height:1.06;letter-spacing:-.032em;font-weight:700;color:var(--ink)}
.doc-meta{margin-top:14px;font-size:15px;color:var(--dim)}
.doc-meta a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.doc-draft{margin-top:22px;padding:13px 16px;border:1px dashed var(--line-2);border-radius:var(--r);background:var(--card-2);font-size:15px;color:var(--text)}
.doc-toc{margin-top:28px;padding:18px 22px 16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow)}
.doc-toc h2{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.doc-toc ol{list-style:none;margin-top:8px;columns:2;column-gap:32px}
.doc-toc li{break-inside:avoid}
.doc-toc a{display:inline-block;padding:4px 0;font-size:15px;color:var(--text)}
.doc-toc a:hover{color:var(--blue-ink)}
.doc-body{margin-top:8px}
.doc-body h2{margin-top:46px;font-size:24px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:var(--ink);scroll-margin-top:90px}
.doc-body h3{margin-top:26px;font-size:18px;font-weight:600;color:var(--ink)}
.doc-body p,.doc-body ul{margin-top:12px}
.doc-body ul{padding-left:22px}
.doc-body li{margin-top:7px;padding-left:2px}
.doc-body li::marker{color:var(--faint)}
.doc-body a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px}
.doc mark.ph{background:#fff1cc;color:#6e4400;border-radius:5px;padding:0 5px;font-family:var(--mono);font-size:.84em;letter-spacing:.02em}
@media (max-width:640px){ .doc{padding:36px 0 64px} .doc-toc ol{columns:1} .doc-body h2{font-size:22px} }