/* socialmattersolutions.com — v5 kit (2026-09-13) · v5/DESIGN-CONTRACT.md
   The .pro v4 kit (Amendment I) forked with exactly the changes the contract allows: accent #948904 "ledger gold"
   (measured vs two payments scans), warn #FF6B6B, status by word + glyph (never colour alone), the card mark as the object. */
:root{

  --v4-t-mono:12px; --v4-t-ui:13px; --v4-t-body:16px; --v4-t-lede:clamp(17px,1.35vw,19.5px); --v4-t-h3:clamp(20px,1.7vw,24px);
  --v4-deep:#010a1c; --v4-ink:#02102e; --v4-plate:#04142f;
  --v4-win:#061836; --v4-win-2:#0a2148; --v4-win-3:#0e2a58;
  --v4-navy:#00349B; --v4-navy-lit:#1f56c4; --v4-cyan:#1298CF; --v4-gold:#948904; --v4-gold-lit:#a89c1a;
  --v4-paper:#EEF2F9; --v4-body:#B9C8E2; --v4-mute:#8CA0C4; --v4-kick:#9CC4F0;
  --v4-good:#45D29A; --v4-warn:#FF6B6B;
  --v4-line:rgba(238,242,249,.14); --v4-line-2:rgba(238,242,249,.08);
  --v4-disp:'Montserrat','Inter',system-ui,-apple-system,sans-serif;
  --v4-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v4-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --v4-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --v4-shell:min(92vw,1680px);
  --v4-sec:clamp(72px,8vw,176px);
  --v4-ease:cubic-bezier(.22,.8,.26,1);
}

/* the document itself: header, menu sheet and footer sit OUTSIDE .v4, so the room's type and ground are set here too
   (2026-09-13 round 1: without this the chrome rendered in Times — .pro inherited its body font from the WP theme) */
html{background:var(--v4-deep);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--v4-deep);color:var(--v4-paper);font-family:var(--v4-sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body a{color:inherit}
body :focus-visible{outline:3px solid var(--v4-gold);outline-offset:3px}
/* ---- the room ---------------------------------------------------------- */
html:has(.v4),body:has(.v4){background:var(--v4-deep)!important}
body:has(.v4) main,body:has(.v4) main > .wp-block-group,body:has(.v4) .entry-content,
body:has(.v4) .wp-block-post-content{background:transparent!important;margin:0!important;padding:0!important;max-width:none!important}
body:has(.v4) .is-layout-constrained > .v4,body:has(.v4) .entry-content > .v4{max-width:none!important;margin:0!important;width:100%}
.v4-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 88% at 64% 44%,#0b2a5e 0%,#051638 42%,var(--v4-deep) 100%)}
.v4-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
#sm3d-stage.v4-stage{position:fixed;inset:0;z-index:1;pointer-events:none}
#sm3d-stage.v4-stage canvas{width:100%;height:100%;display:block}

.v4{position:relative;z-index:2;font-family:var(--v4-sans);color:var(--v4-paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
.v4 *,.v4 *::before,.v4 *::after{box-sizing:border-box}
.v4 img{max-width:100%;height:auto;display:block}
.v4 a{color:inherit}
.v4 :focus-visible{outline:3px solid var(--v4-gold);outline-offset:4px;border-radius:4px}
.v4 p,.v4 h1,.v4 h2,.v4 h3,.v4 ul,.v4 ol,.v4 figure{margin:0}
.v4 ul,.v4 ol{padding:0;list-style:none}
.v4-wrap{width:var(--v4-shell);margin-inline:auto;position:relative}
.v4 section{position:relative;padding-block:var(--v4-sec)}
.v4 section[id]{scroll-margin-top:96px}

/* ---- type -------------------------------------------------------------- */
.v4-kick,.v4-st{display:inline-flex;align-items:center;gap:11px;margin:0 0 22px;font-family:var(--v4-mono);
  font-size:var(--v4-t-mono);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--v4-kick)}
.v4-kick i{width:7px;height:7px;border-radius:50%;background:var(--v4-gold)}
.v4-st::before{content:"";width:22px;height:1px;background:var(--v4-kick);opacity:.7}
.v4-h1{font-family:var(--v4-disp);font-weight:900;color:var(--v4-paper);
  font-size:clamp(36px,5.7vw,88px);line-height:.94;letter-spacing:-.045em}
.v4-h1 .l{display:block;white-space:nowrap}
.v4-h2{font-family:var(--v4-disp);font-weight:900;color:var(--v4-paper);
  font-size:clamp(34px,4.4vw,64px)!important;line-height:.98;letter-spacing:-.038em;text-wrap:balance}
.v4-lede{margin-top:20px!important;max-width:40ch;font-size:var(--v4-t-lede);line-height:1.5;color:var(--v4-body);text-wrap:pretty}
.v4-head{max-width:760px;margin-bottom:clamp(40px,5vw,68px)}
.v4-head--row{max-width:none;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:end}
.v4-head--row .v4-lede{margin:0 0 6px!important}

/* ---- actions ----------------------------------------------------------- */
.v4-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.v4-pill{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;
  border-radius:100px;background:var(--v4-paper);color:#03122b!important;font-weight:700;font-size:var(--v4-t-body);
  letter-spacing:-.005em;text-decoration:none;transition:background .2s ease,color .2s ease,border-color .2s ease}
.v4-pill:hover{background:var(--v4-gold)}
.v4-pill--g{background:transparent;color:var(--v4-paper)!important;border:1px solid rgba(238,242,249,.3)}
.v4-pill--g:hover{background:transparent;border-color:var(--v4-gold);color:var(--v4-gold)!important}
.v4-link{display:inline-flex;align-items:center;gap:10px;margin-top:30px;min-height:44px;padding-block:12px;
  font-family:var(--v4-mono);font-size:var(--v4-t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--v4-paper)!important;
  text-decoration:none;border-bottom:1px solid rgba(148,137,4,.7)}
.v4-link:hover{color:var(--v4-gold)!important;border-bottom-color:var(--v4-gold)}
.v4-link svg{width:14px;height:14px;flex:0 0 auto}

/* ---- the cord: one line down the page, filling with scroll (desktop) -- */
.v4-cord{display:none}
@media (min-width:1100px){
  .v4-cord{display:block;position:absolute;z-index:0;left:max(14px,calc((100% - var(--v4-shell)) / 2 - 44px));width:1px;
    top:var(--cord-top,100vh);bottom:var(--cord-bot,600px);background:linear-gradient(var(--v4-line),var(--v4-line) 92%,transparent)}
  .v4-cord i{position:absolute;left:-1px;top:0;width:3px;height:calc(var(--cord,0) * 100%);border-radius:2px;
    background:linear-gradient(transparent,var(--v4-gold) 40px);box-shadow:0 0 12px rgba(148,137,4,.5)}
  .v4-stop .v4-st,.v4-more .v4-st,.v4-steps .v4-st{position:relative}
  .v4-stop .v4-st::after,.v4-more .v4-st::after,.v4-steps .v4-st::after{
    /* the knot sits ON the cord: --knot-x is MEASURED by sm-v4.js (cord x minus this kicker's x). The old formula assumed every
       kicker starts at the shell's left edge, so on every flipped section (copy on the right) the knot floated mid-page beside
       the kicker (defect hunt 2026-09-11, home "Custom CRM" at x=903). Unmeasured = parked off-screen. */
    content:"";position:absolute;left:calc(var(--knot-x,-200vw) - 7.5px);   /* 11 px + 2x2 px border = 15 px box: centre = -7.5 (measured +2 px off at -5.5) */
    
    top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--v4-deep);border:2px solid var(--v4-kick)}
}

/* ---- 1 · mast ---------------------------------------------------------- */
.v4 .v4-mast{min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(112px,13vh,150px) clamp(36px,5vh,64px)}
.v4-mast__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.v4-slot{position:relative}
.v4-slot--mast{aspect-ratio:1/1;width:100%;max-height:58vh}

/* the click→cash strip */
.v4-flow{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:clamp(40px,6vh,72px)!important;
  padding-top:0;--x:1}
.v4-flow::before{content:"";position:absolute;left:10%;right:10%;top:21px;height:2px;background:var(--v4-line)}
.v4-flow::after{content:"";position:absolute;left:10%;top:21px;height:2px;width:calc(80% * var(--x));background:var(--v4-cyan);
  transition:width .55s var(--v4-ease)}
.v4-flow__n{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.v4-flow__n svg{width:44px;height:44px;padding:11px;border-radius:50%;background:var(--v4-deep);border:1.5px solid var(--v4-line);
  color:var(--v4-mute);transition:border-color .35s ease,color .35s ease,background .35s ease}
.v4-flow__n b{font-family:var(--v4-mono);font-size:var(--v4-t-mono);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--v4-mute);transition:color .35s ease}
.v4-flow__n span{font-size:var(--v4-t-ui);color:var(--v4-mute);transform:translateY(4px);transition:color .35s ease,transform .35s var(--v4-ease)}   /* unlit = mute colour (6.66:1), never opacity */
.v4-flow__n.is-lit svg{border-color:var(--v4-cyan);color:var(--v4-paper);background:#061a3f}
.v4-flow__n.is-lit b{color:var(--v4-paper)}
.v4-flow__n.is-lit span{color:var(--v4-body);transform:none}
.v4-flow__n:last-of-type.is-lit svg{border-color:var(--v4-gold);color:var(--v4-gold)}
.v4-flow__pulse{position:absolute;z-index:0;top:16px;left:calc(10% + 80% * var(--x));width:12px;height:12px;margin-left:-6px;border-radius:50%;
  background:var(--v4-gold);box-shadow:0 0 0 4px rgba(148,137,4,.2),0 0 18px rgba(148,137,4,.6);transition:left .55s var(--v4-ease)}

/* ---- close ---------------------------------------------------------------- */
.v4 .v4-close{padding-bottom:clamp(96px,11vw,160px)}
.v4-close__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center}
.v4-slot--close{aspect-ratio:1/1;width:100%;max-height:56vh}
/* ---- a stop: copy + a working window + its object ------------------- */
.v4-stop__grid{display:grid;grid-template-columns:minmax(0,5.2fr) minmax(0,6.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.v4-stop--flip .v4-stop__grid{grid-template-columns:minmax(0,6.8fr) minmax(0,5.2fr)}
.v4-stop--flip .v4-stop__copy{order:2}
.v4-stop__vis{position:relative;min-width:0}
/* the object sits BEHIND its window's corner (window z 2, object z 1): big, peeking out, never over the demo */
.v4-obj{position:absolute;z-index:1;pointer-events:none;width:clamp(240px,26vw,380px);height:auto;will-change:transform}
.v4-stop__vis{padding-block:clamp(80px,9vw,140px) 0}

/* the window: a real app frame, 4px like every frame in the kit */
.w{position:relative;z-index:2;background:var(--v4-win);border:1px solid rgba(238,242,249,.13);border-radius:4px;overflow:hidden;
  font-size:var(--v4-t-ui);color:var(--v4-body)}
.w__bar{display:flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;background:var(--v4-win-2);border-bottom:1px solid var(--v4-line-2)}
.w__bar > i{width:9px;height:9px;border-radius:50%;background:rgba(238,242,249,.18)}
.w__bar b{margin-left:10px;font-family:var(--v4-mono);font-size:var(--v4-t-mono);font-weight:500;letter-spacing:.06em;color:var(--v4-body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.w__chip{margin-left:auto;flex:0 0 auto;font-style:normal;font-family:var(--v4-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--v4-mute);border:1px solid var(--v4-line);border-radius:100px;padding:3px 9px}

/* status pill (status colours are reserved: good / warn, always with a word) */
.st{display:inline-flex;align-items:center;gap:7px;font-family:var(--v4-mono);font-size:var(--v4-t-mono);letter-spacing:.08em;color:var(--v4-paper);
  padding:4px 10px;border-radius:100px;background:rgba(69,210,154,.12);border:1px solid rgba(69,210,154,.35);white-space:nowrap}
.st i{width:7px;height:7px;border-radius:50%;background:var(--v4-good)}
.st--warn{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.45)}
.st--warn i{background:var(--v4-warn)}
.st--off{background:rgba(238,242,249,.06);border-color:var(--v4-line)}
.st--off i{background:var(--v4-mute)}

/* =====================================================================
   FLUID AT EVERY DESKTOP WIDTH — operator 2026-09-10: "any size view ports for desktop
   if adjsuted the site needs to adjust with it" (and requirement #10: stretch the shell).
   The shell follows the window to 1680px (2080px from 2200px); display type is sized to
   its OWN column (container units — never viewport type in a column-capped box); the demo
   windows zoom their UI in steps so a bigger window never holds tiny text.
   ===================================================================== */
@media (min-width:2200px){ :root{ --v4-shell:min(90vw,2080px) } }
.v4-mast__copy,.v4-close__copy,.v4-stop__copy,.v4-head{container-type:inline-size}   /* restored 2026-09-13: lost with a .v4-half line; without it cqw = viewport and the H1 hit its 168px clamp */
/* no floor above what fits: a 34px floor pushed an 11.3em line past a 358px column */
.v4-h1{font-size:clamp(22px,calc(100cqw / var(--h1-em,8.6)),168px)}
.v4 {--sh:min(92vw,1680px)}
@media (min-width:2200px){ .v4{--sh:min(90vw,2080px)} }
/* ONE type scale at every width: sizes are fractions of the shell, so every heading of a kind matches,
   and a column (a fixed fraction of the shell) always holds its longest word */
.v4-h2{font-size:clamp(30px,calc(var(--sh) * .0440),92px)!important}   /* Solutions: .0508 wrapped headings to 5 lines in the copy column (round 1) */
.v4-h2--s{font-size:clamp(28px,calc(var(--sh) * .0339),64px)!important}
.v4-lede{font-size:clamp(17px,calc(var(--sh) * .0152),25px)}
.v4-head{max-width:clamp(760px,52vw,1180px)}
.v4 .v4-mast{min-height:min(100svh,1440px)}
.v4 .v4-mast--page{min-height:min(88svh,1300px)}
.v4-h3{font-size:clamp(20px,calc(var(--sh) * .0194),32px)}
.v4-small{font-size:clamp(15px,calc(var(--sh) * .0121),19px)}
.v4-obj{width:clamp(240px,26vw,540px)}
.v4-obj--half{width:clamp(170px,15vw,330px)}
.v4-slot--rider{width:clamp(150px,10.4vw,240px);height:clamp(150px,10.4vw,240px);top:calc(-1 * clamp(150px,10.4vw,240px));margin-left:calc(-.5 * clamp(150px,10.4vw,240px))}
/* the UI inside windows, the click→cash strip and the concept chrome grow with the window */
.w,.v4-flow,.v4-ledger{zoom:var(--z,1)}
@media (min-width:1280px){ :root{--z:1.06} }
@media (min-width:1440px){ :root{--z:1.12} }
@media (min-width:1540px){ :root{--z:1.16} }
@media (min-width:1680px){ :root{--z:1.22} }
@media (min-width:1840px){ :root{--z:1.24} }
@media (min-width:2000px){ :root{--z:1.3} }
@media (min-width:2200px){ :root{--z:1.4} }
@media (min-width:2400px){ :root{--z:1.48} }

@media (max-width:700px){ .v4-slot--rider{width:110px;height:110px;margin-left:-55px;top:-112px} }
/* ---- motion off: every demo shows its complete resting frame ---------- */
@media (prefers-reduced-motion:reduce){
  .v4 *,.v4 *::before,.v4 *::after{animation:none!important;transition:none!important}
}
/* =====================================================================================================================
   VIEWPORT TIERS (2026-09-11). Operator: "not dif copy bbut the way its organzied on the screen". ONE copy set; each tier
   gets its own organization. Rule ids = research/UX-VIEWPORT-RESEARCH.md §6 (10 reference sites rendered at 6 widths).
   ===================================================================================================================== */
@media (max-width:699px){
  /* P3 · one full-width primary action; the second becomes a quiet text link under it (5/10 refs, 83-92 % wide) */
  .v4-mast .v4-acts,.v4-close .v4-acts{flex-direction:column;align-items:stretch;gap:2px;margin-top:26px}
  .v4-mast .v4-acts .v4-pill:not(.v4-pill--g),.v4-close .v4-acts .v4-pill:not(.v4-pill--g){width:100%}
  .v4-mast .v4-acts .v4-pill--g,.v4-close .v4-acts .v4-pill--g{border:0;min-height:48px;padding:10px 0;font-weight:600;
    text-decoration:underline;text-decoration-color:rgba(148,137,4,.8);text-underline-offset:5px}
  /* P3/P4 · the closing tag sits ABOVE its words and smaller: the page no longer ends on a screen of empty tag */
  .v4-close__grid .v4-slot--close{order:-1;width:min(52vw,220px);margin:0 auto 4px}
  /* P5 · 3D objects stand on their window, centred, instead of floating over its title bar and chip */
  .v4-stop__vis{padding-block:0}
  .v4-stop__vis .v4-obj{position:relative;display:block;right:auto;left:auto;top:auto;bottom:auto;
    width:min(42vw,172px);margin:0 auto -42px;z-index:3}
  .v4-link{margin-top:20px}
  /* P7 · phone section gaps ~2/3 of desktop */
  .v4{--v4-sec:52px}
  .v4 .v4-mast{padding-top:96px}
}
/* ---- SHORT VIEWPORTS (phone + tablet LANDSCAPE): the words and the button lead, the visual follows (L1) ----------- */
@media (max-width:1099px) and (max-height:820px) and (orientation:landscape){
  .v4-mast__grid .v4-mast__copy,.v4-close__grid .v4-close__copy{order:-1}
  .v4 .v4-mast{padding-top:88px}
  .v4-slot--mast,.v4-slot--close{width:min(48vw,330px)!important;margin:10px auto 0!important}
}

/* a phone on its side is 360-430 px tall: the hero has to fit the headline, one line and the button in that (P3, L1) */
@media (max-width:1099px) and (max-height:480px) and (orientation:landscape){
  .v4 .v4-mast{padding-top:64px;padding-bottom:20px;min-height:0}
  .v4-mast .v4-h1{font-size:min(calc(100cqw / var(--h1-em,8.6)),34px)}
  .v4-mast .v4-lede{margin-top:10px!important;font-size:15px}
  .v4-mast .v4-acts{margin-top:14px}
  .v4-mast .v4-kick{margin-bottom:10px}
  .v4-slot--mast{width:min(34vw,220px)!important;margin:6px auto 0!important}
}

/* ---- responsive (kit) --------------------------------------------------- */
@media (max-width:1099px){
  .v4-stop__grid,.v4-stop--flip .v4-stop__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .v4-stop--flip .v4-stop__copy{order:0}
  .v4-obj{width:clamp(190px,50vw,300px);right:-16px;left:auto;bottom:auto;top:calc(-1 * clamp(96px,26vw,160px))}
  .v4-stop__vis{padding-block:clamp(76px,20vw,128px) 0}
}
@media (max-width:900px){
  .v4-mast__grid,.v4-close__grid{grid-template-columns:minmax(0,1fr)}
  .v4-slot--mast{order:-1;width:min(78vw,380px);max-height:none;margin:0 auto -8px}
  .v4 .v4-mast{min-height:0;padding-top:104px}
  .v4-slot--close{width:min(70vw,340px);max-height:none;margin:0 auto}
  .v4-head--row{grid-template-columns:minmax(0,1fr);gap:0}
  .v4-head--row .v4-lede{margin-top:20px!important}
}
@media (max-width:700px){
  .w__chip{padding:2px 7px;letter-spacing:.08em}
  .v4-flow::before,.v4-flow::after{top:19px}
  .v4-flow__n svg{width:40px;height:40px;padding:10px}
  .v4-flow__pulse{top:14px}
  .v4-flow__n b{letter-spacing:.08em}
  .v4-flow__n span{font-size:12px}
}

/* ======================================================================================================================
   SOLUTIONS PARTS — chrome, status glyphs, and the demo artefacts (research §1.10 · §2.9 · §3.1 · §4 · §5.1)
   ====================================================================================================================== */

/* ---- status: a word AND a glyph, never colour alone (warn vs good collapses under deuteranopia, ΔE .07) ---- */
.st i{display:none}
.st::before{content:"";flex:0 0 auto;width:10px;height:10px;background:var(--v4-good);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.5 2.6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 5.2l2.2 2.2L8.5 2.6' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.st--warn::before{background:var(--v4-warn);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 2.4l5.2 5.2M7.6 2.4L2.4 7.6' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.4 2.4l5.2 5.2M7.6 2.4L2.4 7.6' stroke='black' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E")}
.st--off::before,.st--wait::before{background:var(--v4-mute);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='3.4' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E")}
.st--wait{background:rgba(238,242,249,.05);border-color:var(--v4-line)}
.st--gold{background:rgba(148,137,4,.14);border-color:rgba(148,137,4,.55)}
.st--gold::before{background:var(--v4-gold)}

/* the mark in its slot (the WebGL card mark replaces it when it boots; this is the no-JS / no-WebGL resting object) */
.v4-slot{display:grid;place-items:center}
.v4-mark{width:min(82%,460px);height:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));transform:rotate(-2deg)}
.v4-slot--close .v4-mark{width:min(70%,380px)}

/* ======================================================================================================================
   CHROME
   ====================================================================================================================== */
.s5-skip{position:absolute;left:12px;top:-80px;z-index:100;padding:12px 16px;background:var(--v4-paper);color:#03122b;border-radius:6px;font-weight:700}
.s5-skip:focus{top:12px}
.s5-head{position:fixed;inset:0 0 auto;z-index:50;height:76px;display:flex;align-items:center;transition:background .25s ease,border-color .25s ease;
  border-bottom:1px solid transparent;font-family:var(--v4-sans)}
.s5-head.is-solid{background:rgba(1,10,28,.96);border-bottom-color:var(--v4-line-2)}
.s5-head__in{width:var(--v4-shell);margin-inline:auto;display:flex;align-items:center;gap:clamp(12px,2.4vw,36px)}
.s5-brand{display:inline-flex;align-items:center;gap:12px;min-height:48px;color:var(--v4-paper);text-decoration:none;
  font:900 13px/1.05 var(--v4-disp);letter-spacing:.06em;text-transform:uppercase}
.s5-brand svg{width:40px;height:auto;flex:0 0 auto}
.s5-nav{display:flex;align-items:center;gap:clamp(4px,1.4vw,20px);margin-left:auto}
.s5-nav a,.s5-nav button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;color:var(--v4-body);text-decoration:none;
  font:500 15px var(--v4-sans);background:none;border:0;cursor:pointer}
.s5-nav a:hover,.s5-nav button:hover,.s5-nav a[aria-current="page"]{color:var(--v4-paper)}
.s5-nav svg{width:12px;height:12px}
.s5-drop{position:relative}
.s5-drop__panel{position:absolute;left:-12px;top:calc(100% + 8px);min-width:320px;padding:8px;background:var(--v4-win);border:1px solid var(--v4-line);
  border-radius:6px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.s5-drop__panel[hidden]{display:none!important}
.s5-drop__panel a{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:4px;color:var(--v4-paper)}
.s5-drop__panel a:hover{background:var(--v4-win-2)}
.s5-drop__panel code{font:500 11px var(--v4-mono);letter-spacing:.1em;color:var(--v4-kick)}
.s5-head .v4-pill{min-height:44px;padding:10px 20px;font-size:15px;background:var(--v4-gold);color:#010a1c!important}
.s5-head .v4-pill:hover{background:var(--v4-paper)}
.s5-menu-btn{display:none}
/* the site's one primary action is gold everywhere */
.v4 .v4-pill:not(.v4-pill--g){background:var(--v4-gold);color:#010a1c!important}
.v4 .v4-pill:not(.v4-pill--g):hover{background:var(--v4-paper)}

.s5-sheet{position:fixed;inset:0;z-index:60;background:var(--v4-deep);display:flex;flex-direction:column;padding:18px max(16px,4vw) calc(18px + env(safe-area-inset-bottom))}
.s5-sheet[hidden]{display:none!important}
.s5-sheet__top{display:flex;align-items:center;justify-content:space-between;min-height:48px}
.s5-sheet__x{width:48px;height:48px;border:1px solid var(--v4-line);border-radius:50%;background:none;color:var(--v4-paper);font-size:24px;line-height:1;cursor:pointer}
.s5-sheet nav{margin-top:18px;overflow:auto;flex:1}
.s5-sheet nav a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:56px;padding:12px 2px;border-bottom:1px solid var(--v4-line-2);
  color:var(--v4-paper);text-decoration:none;font:900 21px/1.15 var(--v4-disp);letter-spacing:-.01em}
.s5-sheet nav a code{font:500 11px var(--v4-mono);letter-spacing:.12em;color:var(--v4-kick)}
.s5-sheet .v4-pill{width:100%;margin-top:14px;background:var(--v4-gold);color:#010a1c!important}

.s5-foot{position:relative;z-index:2;border-top:1px solid var(--v4-line);padding-block:clamp(36px,5vw,64px) 40px;color:var(--v4-body);font-family:var(--v4-sans)}
.s5-foot__in{width:var(--v4-shell);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1.45fr) repeat(5,minmax(0,1fr));gap:28px}
/* the footer is the site's internal-link spine: every service, high-risk page and top guide from every page (2026-09-13 seo-audit: /proof/ was
   linked from nowhere, the MOTO guide from one page). Widths: brand + 5 columns ≥1440 · brand row + 5 columns ≥1024 · 3 columns tablet · phone below */
@media (max-width:1439px){ .s5-foot__in{grid-template-columns:repeat(5,minmax(0,1fr))} .s5-foot__brand{grid-column:1 / -1} }
.s5-foot h2{margin:0 0 12px;font:500 12px var(--v4-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--v4-kick)}
.s5-foot ul{list-style:none;margin:0;padding:0}
.s5-foot li a{box-sizing:border-box;display:inline-flex;align-items:center;min-height:40px;padding-block:4px;max-width:100%;color:var(--v4-paper);text-decoration:none;font-size:15px;line-height:1.35}
.s5-foot li a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--v4-gold)}
.s5-foot__brand p{margin:14px 0 0;max-width:34ch;font-size:15px;line-height:1.5}
.s5-foot__mail{display:inline-flex;align-items:center;min-height:40px;margin-top:6px;color:var(--v4-paper);font-size:15px;text-decoration:underline;text-decoration-color:rgba(148,137,4,.8);text-underline-offset:4px}
.s5-foot__legal{width:var(--v4-shell);margin:36px auto 0;padding-top:20px;border-top:1px solid var(--v4-line-2);display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;font-size:13px;color:var(--v4-mute)}
.s5-foot__legal a{color:var(--v4-body);display:inline-flex;align-items:center;min-height:40px}

/* booking window (Calendly is fetched on first open only) */
.v4-book{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px}
.v4-book[hidden]{display:none!important}
.v4-book__back{position:absolute;inset:0;background:rgba(1,6,18,.82)}
.v4-book__win{position:relative;width:min(100%,1020px);height:min(92vh,760px);display:flex;flex-direction:column}
.v4-book__x{margin-left:10px;width:40px;height:40px;border:1px solid var(--v4-line);border-radius:50%;background:none;color:var(--v4-paper);font-size:22px;line-height:1;cursor:pointer}
.v4-book__body{flex:1;min-height:0;background:#fff;position:relative}
.v4-book__cal{position:absolute;inset:0}
.v4-book__cal > div{height:100%!important}
.v4-calwait{padding:40px;color:#03122b;font:600 16px var(--v4-sans)}

@media (max-width:1023px){
  .s5-nav{display:none}
  .s5-menu-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;margin-left:auto;border:1px solid var(--v4-line);border-radius:100px;
    background:none;color:var(--v4-paper);font:600 15px var(--v4-sans);cursor:pointer}
  .s5-head{height:64px}
  .s5-head .v4-pill{padding:10px 16px}
  .s5-foot__in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s5-foot__brand{grid-column:1 / -1}
}
@media (max-width:699px){   /* after the 1023px block, or its 3 columns win */
  .s5-foot__in{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:22px}
  .s5-foot__in > .s5-foot__col:nth-of-type(1){grid-row:span 2}
  .s5-foot__col--guides,.s5-foot__in > .s5-foot__col:last-child{grid-column:1 / -1}
  .s5-foot__col--guides ul,.s5-foot__in > .s5-foot__col:last-child ul{columns:2;column-gap:20px}
  .s5-foot li{break-inside:avoid}
}
@media (max-width:420px){
  .s5-head .s5-brand span{display:none}
  .s5-head .v4-pill{font-size:14px;padding:10px 14px}
}

/* ======================================================================================================================
   DEMOS
   ====================================================================================================================== */
.v4-flow__n:last-of-type.is-lit svg{border-color:var(--v4-gold);color:#d9cf5a}

/* ---- ACH batch: records as the file writes them ---- */
.ach{padding:14px clamp(12px,1.6vw,20px) 16px;font-family:var(--v4-mono)}
.ach__recs{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.ach__r{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:30px;padding:5px 10px;border-radius:3px;background:rgba(238,242,249,.03);
  font-size:13px;letter-spacing:.02em;color:#cfe0f5;transform:translateX(-6px);box-shadow:inset 2px 0 0 rgba(238,242,249,.28);transition:transform .35s var(--v4-ease),background .35s ease,box-shadow .35s ease}
.ach__r.is-in{transform:none;box-shadow:none}
.ach__r.is-hot{background:rgba(18,152,207,.14)}
.ach__r em{font-style:normal;font-weight:700;color:var(--v4-cyan);min-width:1ch}
.ach__r--add{padding-left:28px;color:var(--v4-kick)}
.ach__sec{padding:0 6px;border-radius:3px;background:#1d2a2e;color:#d9cf5a;font-weight:600}
.ach__amt{margin-left:auto;color:var(--v4-paper);font-weight:600}
.ach__foot{display:grid;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--v4-line-2)}
.ach__appr,.ach__win{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:12px;color:var(--v4-body)}
.ach__who{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:100px;border:1px solid var(--v4-line)}
.ach__who::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--v4-mute)}
.ach__who.is-ok{border-color:rgba(69,210,154,.4)}
.ach__who.is-ok::before{border:0;background:var(--v4-good)}
.ach__lim{color:var(--v4-mute)}
.ach__cut{color:var(--v4-mute)}

/* ---- pay by bank at checkout ---- */
.pbb{padding:16px clamp(12px,1.8vw,22px) 18px;display:grid;gap:12px}
.pbb__order{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--v4-body)}
.pbb__order b{font:700 20px var(--v4-sans);color:var(--v4-paper)}
.pbb__methods{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pbb__m{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--v4-line);border-radius:4px;color:var(--v4-body);font-weight:600;transition:border-color .3s ease,color .3s ease,background .3s ease}
.pbb__m.is-on{border-color:var(--v4-cyan);color:var(--v4-paper);background:rgba(18,152,207,.1)}
.pbb__steps{display:grid;gap:6px}
.pbb__s{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:34px;padding:4px 10px;border-radius:3px;background:rgba(238,242,249,.03);
  color:var(--v4-mute);transition:color .3s ease,background .3s ease}
.pbb__s i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--v4-mute);position:relative}
.pbb__s em{font-style:normal;font-family:var(--v4-mono);font-size:12px;letter-spacing:.06em;color:var(--v4-mute)}
.pbb__s.is-done{color:var(--v4-paper)}
.pbb__s.is-done i{border:0;background:var(--v4-good)}
.pbb__s.is-done i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid #03122b;border-width:0 2px 2px 0;transform:rotate(42deg)}
.pbb__s.is-done em{color:var(--v4-kick)}
.pbb__risk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin:0;font-size:13px;color:var(--v4-body)}
.pbb__bar{height:6px;border-radius:3px;background:var(--v4-win-3);overflow:hidden}
.pbb__bar i{display:block;height:100%;width:calc(var(--v,.18) * 100%);background:var(--v4-cyan);border-radius:3px;transition:width .6s var(--v4-ease)}
.pbb__risk b{font-family:var(--v4-mono);font-size:12px;letter-spacing:.08em;color:var(--v4-paper)}
.pbb__pay{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-size:12px;color:var(--v4-mute)}

/* ---- invoice → paid → matched ---- */
.inv{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:0}
.inv__doc{padding:18px clamp(12px,1.8vw,22px);background:#0a1f45;border-right:1px solid var(--v4-line-2);display:grid;gap:9px;align-content:start}
.inv__doc p{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:13px;color:var(--v4-body)}
.inv__h b{font:700 17px var(--v4-sans);color:var(--v4-paper)}
.inv__line{padding-top:9px;border-top:1px solid var(--v4-line-2)}
.inv__line span:last-child,.inv__due span:last-child{color:var(--v4-paper)}
.inv__paid b{color:var(--v4-good);font-weight:600}
.inv__left{padding-top:9px;border-top:1px solid var(--v4-line-2)}
.inv__left b{color:var(--v4-paper);font-size:15px}
.inv__ledger{padding:14px clamp(10px,1.4vw,18px);display:grid;gap:6px;align-content:start}
.inv__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;margin:0;padding:8px 10px;border-radius:3px;background:rgba(238,242,249,.03);font-size:13px;color:var(--v4-body);
  transition:background .35s ease}
.inv__row > span:nth-child(2){color:var(--v4-paper);font-family:var(--v4-mono);font-size:12px}
.inv__m{grid-column:1 / -1;font-family:var(--v4-mono);font-size:12px;letter-spacing:.04em;color:var(--v4-mute)}
.inv__m.is-on{color:#d9cf5a}
.inv__row.is-hot{background:rgba(148,137,4,.12)}

/* ---- phone key-in desk ---- */
.key{padding:16px clamp(12px,1.8vw,22px) 18px;display:grid;gap:12px}
.key__caller{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0;font-size:13px;color:var(--v4-mute)}
.key__caller b{font:700 16px var(--v4-sans);color:var(--v4-paper)}
.key__field{display:grid;gap:6px}
.key__lab{font-family:var(--v4-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--v4-kick)}
.key__pan,.key__cvv{display:flex;align-items:center;min-height:44px;padding:0 12px;border:1px solid var(--v4-line);border-radius:4px;background:#04142f;
  font-family:var(--v4-mono);font-size:15px;letter-spacing:.08em;color:var(--v4-paper)}
.key__cvv{font-family:var(--v4-sans);font-size:14px;letter-spacing:0;color:var(--v4-body)}
.key__pan.is-typing{border-color:var(--v4-cyan)}
.key__guards{display:grid;gap:6px;margin:2px 0 0;padding:0;list-style:none}
.key__guards li{display:flex;align-items:center;gap:10px;min-height:30px;font-size:13px;color:var(--v4-mute);transition:color .3s ease}
.key__guards li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--v4-mute);position:relative;flex:0 0 auto}
.key__guards li.is-on{color:var(--v4-paper)}
.key__guards li.is-on i{border:0;background:var(--v4-good)}
.key__guards li.is-on i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid #03122b;border-width:0 2px 2px 0;transform:rotate(42deg)}
.key__done{margin:0}

/* ---- return rates ---- */
.rr{padding:16px clamp(12px,1.8vw,22px) 18px;display:grid;gap:14px}
/* three Nacha limits = three meter ROWS (not a three-across grid) */
.rr__gauges{display:grid;gap:8px}
.rr__g{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:4px;background:#08193a;border:1px solid var(--v4-line-2)}
.rr__g .rr__v{justify-content:flex-end;text-align:right}
.rr__n{display:block;margin:0;font-family:var(--v4-mono);font-size:12px;letter-spacing:.06em;color:var(--v4-kick)}
.rr__v{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0}
.rr__v b{font:800 22px var(--v4-sans);color:var(--v4-paper);transition:color .3s ease}
.rr__v span{font-size:12px;color:var(--v4-mute)}
.rr__g.is-over .rr__v b{color:var(--v4-warn)}
.rr__bar{position:relative;height:6px;border-radius:3px;background:var(--v4-win-3)}
.rr__bar i{position:absolute;left:0;top:0;bottom:0;width:calc(min(var(--v,.5),1.2) / 1.2 * 100%);border-radius:3px;background:var(--v4-cyan);transition:width .7s var(--v4-ease),background .3s ease}
.rr__g.is-over .rr__bar i{background:var(--v4-warn)}
.rr__bar em{position:absolute;top:-3px;bottom:-3px;left:calc(1 / 1.2 * 100%);width:2px;background:var(--v4-paper);opacity:.7}
.rr__fix{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.rr__fix li{display:flex;align-items:center;gap:10px;min-height:32px;padding:4px 10px;border-radius:3px;background:rgba(238,242,249,.03);font-size:13px;color:var(--v4-body);
  transform:translateX(-6px);box-shadow:inset 2px 0 0 rgba(238,242,249,.28);transition:transform .35s var(--v4-ease),box-shadow .35s ease}
.rr__fix li.is-in{transform:none;box-shadow:none}
.rr__fix code{font:700 12px var(--v4-mono);padding:2px 6px;border-radius:3px;background:#082a4b;color:var(--v4-paper)}
.rr__st{margin:0}

/* ---- the rest: a ledger of builds, not cards ---- */
.v4-ledger{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--v4-line)}
.v4-ledger li{border-bottom:1px solid var(--v4-line)}
.v4-ledger a{display:grid;grid-template-columns:4.2em minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:baseline;
  min-height:92px;padding:20px 4px;text-decoration:none;color:var(--v4-paper)}
.v4-ledger__c{grid-row:1 / span 2;font:600 12px var(--v4-mono);letter-spacing:.14em;color:var(--v4-kick)}
.v4-ledger b{font:900 clamp(18px,calc(var(--sh) * .0148),26px)/1.2 var(--v4-disp);letter-spacing:-.01em}
.v4-ledger__d{font-size:clamp(15px,calc(var(--sh) * .0112),18px);color:var(--v4-body)}
.v4-ledger__d svg{display:inline-block;width:14px;height:14px;margin-left:6px;vertical-align:-2px;color:var(--v4-gold)}
.v4-ledger a:hover b{text-decoration:underline;text-decoration-color:var(--v4-gold);text-underline-offset:5px}

/* ---- how a build runs ---- */
.v4 .steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,2vw,28px);margin:0;padding:28px 0 0;list-style:none}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--v4-line)}
.steps::after{content:"";position:absolute;left:0;top:0;height:2px;width:calc(var(--p,1) * 100%);background:var(--v4-gold);transition:width .6s var(--v4-ease)}
.steps li{position:relative;display:grid;gap:8px;align-content:start}
.steps li::before{content:"";position:absolute;top:-34px;left:0;width:12px;height:12px;border-radius:50%;background:var(--v4-deep);border:2px solid var(--v4-mute);transition:border-color .3s ease,background .3s ease}
.steps li.is-on::before{border-color:var(--v4-gold);background:var(--v4-gold)}
.steps b{font:600 12px var(--v4-mono);letter-spacing:.14em;color:var(--v4-kick)}
.steps p{margin:0;font-size:clamp(15px,calc(var(--sh) * .0112),18px);line-height:1.45;color:var(--v4-body)}

@media (max-width:1099px){
  .v4 .steps{grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 0 28px}
  .steps::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .steps::after{left:5px;top:6px;width:2px;height:calc(var(--p,1) * (100% - 12px))}
  .steps li{padding:0 0 26px}
  .steps li::before{left:-28px;top:4px}
}
@media (max-width:760px){
  .v4-ledger{grid-template-columns:minmax(0,1fr)}
  .inv{grid-template-columns:minmax(0,1fr)}
  .inv__doc{border-right:0;border-bottom:1px solid var(--v4-line-2)}
  .rr__g{grid-template-columns:minmax(0,1fr) auto}
  .rr__g .rr__bar{grid-column:1 / -1;order:3}
  .ach__r{font-size:12px;gap:2px 8px}
}

/* the payment-state strip goes vertical on phones: five mono labels do not fit 390 px across (round 2: "AUTHORISEDVALIDATED") */
@media (max-width:699px){
  .v4-flow{grid-template-columns:minmax(0,1fr);gap:0;padding-left:0}
  .v4-flow::before{left:21px;right:auto;top:22px;bottom:22px;width:2px;height:auto}
  .v4-flow::after{left:21px;top:22px;width:2px;height:calc((100% - 44px) * var(--x));transition:height .55s var(--v4-ease)}
  .v4-flow__n{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;text-align:left;gap:14px;min-height:56px}
  .v4-flow__n svg{width:44px;height:44px;padding:11px}
  .v4-flow__n span{transform:none;text-align:right}
  .v4-flow__pulse{display:none}
}

/* ======================================================================================================================
   GENERIC ARTEFACTS for [data-demo="seq"] pages: rows, records, timeline, checklist, fields, meters, code, windows
   ====================================================================================================================== */
[data-demo="seq"] [data-s]{transition:opacity .35s ease,transform .35s var(--v4-ease),background .35s ease,color .3s ease,border-color .3s ease}
/* pending = not arrived yet, shown WITHOUT dimming text (axe 2026-09-13: any opacity below ~.95 drops cyan/body text under 4.5:1) —
   the row sits 6px back with a dashed marker, and slides home with a flash when its step arrives */
[data-demo="seq"] [data-s]:not(.is-in):not([data-from]):not([data-from-cls]){transform:translateX(-6px);box-shadow:inset 2px 0 0 rgba(238,242,249,.28)}
[data-demo="seq"] .tl li[data-s]:not(.is-in):not([data-from]):not([data-from-cls]){box-shadow:none;transform:none}   /* a timeline shows pending by its hollow dot; shifting the row pushed the dot off the rail and clipped it at the window edge (2026-09-13 render) */
[data-demo="seq"] .is-hot{background:rgba(18,152,207,.16)!important}
.pad{padding:16px clamp(12px,1.8vw,22px) 18px;display:grid;gap:12px}
.sub{margin:0;font-family:var(--v4-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--v4-kick)}
/* rows: a table-shaped list */
.rows{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px 14px;min-height:40px;padding:7px 12px;border-radius:3px;background:#08193a;font-size:13px;color:var(--v4-body)}
.row b{font-weight:600;color:var(--v4-paper)}
.row .num{font-family:var(--v4-mono);font-size:12px;color:var(--v4-paper);text-align:right;white-space:nowrap}
.row .meta{grid-column:1 / -1;font-family:var(--v4-mono);font-size:12px;letter-spacing:.04em;color:var(--v4-mute)}
.row--2{grid-template-columns:minmax(0,1fr) auto}
/* records: fixed-width file lines */
.recs{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-family:var(--v4-mono)}
.recs li{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;min-height:28px;padding:5px 10px;border-radius:3px;background:#08193a;font-size:13px;color:#cfe0f5}
.recs li em{font-style:normal;font-weight:700;color:var(--v4-cyan)}
.recs li.add{padding-left:28px;color:var(--v4-kick)}
.recs .r{margin-left:auto;color:var(--v4-paper);font-weight:600}
.tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:3px;background:#1d2a2e;color:#d9cf5a;font-family:var(--v4-mono);font-size:12px;font-weight:600}
.tag--c{background:#082a4b;color:var(--v4-paper)}
/* timeline */
.tl{position:relative;display:grid;gap:10px;margin:0;padding:0 0 0 22px;list-style:none}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--v4-line)}
.tl li{position:relative;display:grid;gap:2px}
.tl li::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--v4-deep);border:2px solid var(--v4-mute)}
.tl li.is-in::before{border-color:var(--v4-gold);background:var(--v4-gold)}
.tl li b{font-size:14px;font-weight:600;color:var(--v4-paper)}
.tl li span{font-size:13px;color:var(--v4-body)}
.tl time{font-family:var(--v4-mono);font-size:12px;letter-spacing:.06em;color:var(--v4-kick)}
/* checklist */
.chk{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.chk li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:34px;padding:4px 10px;border-radius:3px;background:#08193a;font-size:13px;color:var(--v4-paper)}
.chk li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--v4-mute);position:relative}
.chk li.is-in i{border:0;background:var(--v4-good)}
.chk li.is-in i::after{content:"";position:absolute;left:5px;top:3px;width:4px;height:7px;border:solid #03122b;border-width:0 2px 2px 0;transform:rotate(42deg)}
.chk li em{font-style:normal;font-family:var(--v4-mono);font-size:12px;color:var(--v4-kick)}
/* fields */
.fld{display:grid;gap:6px}
.fld > span{font-family:var(--v4-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--v4-kick)}
.fld > b{display:flex;align-items:center;min-height:42px;padding:0 12px;border:1px solid var(--v4-line);border-radius:4px;background:#04142f;font-family:var(--v4-mono);font-size:14px;font-weight:500;letter-spacing:.04em;color:var(--v4-paper)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
/* meters */
.mtr{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 12px;border-radius:4px;background:#08193a;font-size:13px}
.mtr > span:first-child{font-family:var(--v4-mono);font-size:12px;color:var(--v4-kick)}
.mtr .bar{position:relative;height:6px;border-radius:3px;background:var(--v4-win-3)}
.mtr .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--v4-cyan);width:calc(var(--v,.4) * 100%);transition:width .7s var(--v4-ease)}
.mtr .bar em{position:absolute;top:-3px;bottom:-3px;left:calc(var(--at,.8) * 100%);width:2px;background:var(--v4-paper);opacity:.7}
.mtr b{font-weight:700;color:var(--v4-paper);white-space:nowrap}
/* code: request / response */
.code{margin:0;padding:12px 14px;border-radius:4px;background:#04142f;border:1px solid var(--v4-line-2);font:12.5px/1.65 var(--v4-mono);color:#cfe0f5;white-space:pre-wrap;overflow-wrap:anywhere}
.code .k{color:var(--v4-kick)} .code .s{color:#d9cf5a} .code .n{color:var(--v4-cyan)}
/* same-day windows */
.wins{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.win-d{display:grid;gap:4px;padding:10px 12px;border-radius:4px;background:#08193a;border:1px solid var(--v4-line-2)}
.win-d b{font:700 18px var(--v4-sans);color:var(--v4-paper)}
.win-d span{font-size:12px;color:var(--v4-mute)}
.win-d.is-pick{border-color:var(--v4-gold)}
/* page mast with a window */
.v4-mast--page .v4-mast__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.v4-mast--page .v4-h1{font-size:clamp(22px,calc(100cqw / var(--h1-em,8.6)),104px)}   /* no floor above what fits: 34px overflowed 320 (sweep) — same lesson .pro paid for */
.v4-mast__vis{min-width:0}
/* questions: short answers, visible */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--v4-line);margin:0}
.qa > div{padding:20px 0;border-bottom:1px solid var(--v4-line)}
.qa dt{font:900 clamp(18px,calc(var(--sh) * .0142),24px)/1.25 var(--v4-disp);color:var(--v4-paper)}
.qa dd{margin:8px 0 0;font-size:clamp(15px,calc(var(--sh) * .0112),18px);line-height:1.5;color:var(--v4-body);max-width:48ch}
@media (max-width:900px){ .v4-mast--page .v4-mast__grid{grid-template-columns:minmax(0,1fr)} .v4-mast--page .v4-mast__vis{order:2} }
@media (max-width:760px){ .qa{grid-template-columns:minmax(0,1fr)} .wins{grid-template-columns:minmax(0,1fr)} .two{grid-template-columns:minmax(0,1fr)} .mtr{grid-template-columns:minmax(0,1fr) auto} .mtr .bar{grid-column:1 / -1;order:3} }

/* phone rows: the name gets the whole line, amount + state share the next (b2b round 1: names wrapped to three lines) */
@media (max-width:560px){
  .row{grid-template-columns:auto minmax(0,1fr);row-gap:4px}   /* number sizes to content; the pill takes the rest and wraps (320: an auto pill squeezed "14:02:44" to 11px) */
  .row > b{grid-column:1 / -1}
  .row--2{grid-template-columns:minmax(0,1fr)}
  .row--2 > .st{justify-self:start}
  .row > .st{white-space:normal;text-align:left;justify-self:end;max-width:100%}   /* 320: a nowrap pill overlapped its number (gateway sweep) */
  .recs li{font-size:12px}
}
/* a ledger row that is a statement, not a link (the "never" rows) */
.v4-ledger__row{display:grid;grid-template-columns:4.2em minmax(0,1fr);grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:baseline;min-height:92px;padding:20px 4px;color:var(--v4-paper)}
.v4-ledger__row b{font:900 clamp(18px,calc(var(--sh) * .0148),26px)/1.2 var(--v4-disp);letter-spacing:-.01em}
.qa dd a{color:var(--v4-paper);text-decoration:underline;text-decoration-color:var(--v4-gold);text-underline-offset:4px}
/* industries: anchored blocks with visible text (term queries rank on rendered words) */
.ind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px);border-top:1px solid var(--v4-line)}
.ind article{padding:22px 0;border-bottom:1px solid var(--v4-line);scroll-margin-top:110px}
.ind h2{margin:0 0 10px;font-family:var(--v4-disp);font-weight:900;color:var(--v4-paper);letter-spacing:-.01em;line-height:1.2}
.ind p{margin:6px 0 0;font-size:clamp(15px,calc(var(--sh) * .0112),18px);line-height:1.5;color:var(--v4-body);max-width:52ch}
.ind p b{font-weight:600;color:var(--v4-kick)}
.ind article:target h2{color:#d9cf5a}
@media (max-width:760px){ .ind{grid-template-columns:minmax(0,1fr)} }
/* contact: the page IS the scheduler (loaded when it scrolls into view, not before) */
.v4-mast--contact{min-height:0!important;padding-bottom:clamp(64px,8vw,120px)!important}
.v4-mast--contact .v4-mast__grid{align-items:start;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.s5-ready{margin-top:28px}
.s5-alt{margin-top:18px!important;color:var(--v4-body)}
.s5-alt a{color:var(--v4-paper);text-decoration:underline;text-decoration-color:var(--v4-gold);text-underline-offset:4px;display:inline-flex;min-height:44px;align-items:center;overflow-wrap:anywhere}
.s5-cal{position:relative;min-height:700px;background:#fff;display:grid;place-items:center}
.s5-cal > div{width:100%;height:700px}
@media (max-width:900px){ .v4-mast--contact .v4-mast__grid{grid-template-columns:minmax(0,1fr)} .s5-cal,.s5-cal > div{min-height:640px;height:640px} }
/* guides */
.v4-mast--guide{min-height:0!important;padding-bottom:clamp(40px,5vw,72px)!important}
.s5-meta{margin-top:14px!important;font:500 12px var(--v4-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--v4-kick)}
.s5-short li{min-height:44px;font-size:15px;align-items:start;padding-block:9px}
.s5-short li a{color:var(--v4-paper);text-decoration:underline;text-decoration-color:var(--v4-gold);text-underline-offset:4px}
.s5-gsec{padding-block:clamp(48px,6vw,96px)!important}
.tblw{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px;color:var(--v4-body)}
.tbl th{position:sticky;top:0;text-align:left;padding:10px 14px;background:#08193a;font:600 12px var(--v4-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v4-kick);white-space:nowrap}
.tbl td{padding:11px 14px;border-top:1px solid var(--v4-line-2);vertical-align:top;line-height:1.45}
.tbl td:first-child{font-family:var(--v4-mono);font-weight:600;color:var(--v4-paper);white-space:nowrap}
.tbl tr:hover td{background:rgba(238,242,249,.03)}
.s5-terms{margin-top:0}
.s5-recw{margin-top:18px}
.s5-src{margin:0;padding:0 0 0 1.4em;list-style:decimal;color:var(--v4-mute);display:grid;gap:4px;columns:2;column-gap:48px}
.s5-src li{break-inside:avoid;font-size:15px;line-height:1.5}
.s5-src a{display:inline-flex;min-height:40px;align-items:center;color:var(--v4-paper);text-decoration:underline;text-decoration-color:rgba(148,137,4,.8);text-underline-offset:4px;overflow-wrap:anywhere}
@media (max-width:699px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:10px 12px;border-top:1px solid var(--v4-line)}
  .tbl td{border:0;padding:3px 0;display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:10px}
  .tbl td::before{content:attr(data-label);font:600 11px var(--v4-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v4-kick);padding-top:2px}
  .tbl td:first-child{white-space:normal}
  /* two columns fit a phone as a real table: a key and its meaning read across, not as stacked label cards (half the height) */
  .tbl.tbl--c2 thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .tbl.tbl--c2{display:table} .tbl.tbl--c2 thead{display:table-header-group} .tbl.tbl--c2 tbody{display:table-row-group}
  .tbl.tbl--c2 tr{display:table-row;padding:0;border:0}
  .tbl.tbl--c2 th,.tbl.tbl--c2 td{display:table-cell;width:auto;padding:9px 10px}
  .tbl.tbl--c2 th{position:static;white-space:normal}
  .tbl.tbl--c2 td{border-top:1px solid var(--v4-line-2)}
  .tbl.tbl--c2 td::before{content:none}
  .tbl.tbl--c2 td:first-child{max-width:9em}
  .s5-src{columns:1}
}

/* the WebGL card mark: one fixed stage under the content; the static SVG marks step aside once it boots */
#sms3d-stage.v4-stage{position:fixed;inset:0;z-index:1;pointer-events:none}
#sms3d-stage.v4-stage canvas{width:100%;height:100%;display:block}
.has-3d .v4-mark{visibility:hidden}