/* 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 #2DFDF2 "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:#0E0F12; --v4-ink:#0E0F12; --v4-plate:#121317;
  --v4-win:rgba(21,22,26,.66); --v4-win-2:#1A1C21; --v4-win-3:#22252B;
  --v4-navy:#0F2622; --v4-navy-lit:#1C4A44; --v4-cyan:#2DFDF2; --v4-gold:#2DFDF2; --v4-gold-lit:#8DFFF8;
  --v4-paper:#F4F3EF; --v4-body:#C9CDD3; --v4-mute:#9AA0AA; --v4-kick:#9AA0AA;
  --v4-good:#45D29A; --v4-warn:#FF6B6B;
  --v4-line:rgba(244,243,239,.14); --v4-line-2:rgba(244,243,239,.08);
  --v4-disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --v4-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --v4-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,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%,#0F2622 0%,#111215 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:#111215!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(244,243,239,.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(45,253,242,.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(45,253,242,.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(45,253,242,.2),0 0 18px rgba(45,253,242,.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(244,243,239,.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(244,243,239,.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(244,243,239,.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(45,253,242,.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(244,243,239,.05);border-color:var(--v4-line)}
.st--gold{background:rgba(45,253,242,.14);border-color:rgba(45,253,242,.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:#111215;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(14,15,18,.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:#0E0F12!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:#0E0F12!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:#0E0F12!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(45,253,242,.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(10,11,13,.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:#111215;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:#8DFFF8}

/* ---- 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(244,243,239,.03);
  font-size:13px;letter-spacing:.02em;color:#DCDFE3;transform:translateX(-6px);box-shadow:inset 2px 0 0 rgba(244,243,239,.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(45,253,242,.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:#1D2224;color:#8DFFF8;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(45,253,242,.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(244,243,239,.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 #111215;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:#181A1F;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(244,243,239,.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:#8DFFF8}
.inv__row.is-hot{background:rgba(45,253,242,.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:#121317;
  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 #111215;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:#15161A;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(244,243,239,.03);font-size:13px;color:var(--v4-body);
  transform:translateX(-6px);box-shadow:inset 2px 0 0 rgba(244,243,239,.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:#0F2622;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(244,243,239,.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(45,253,242,.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:#15161A;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:#15161A;font-size:13px;color:#DCDFE3}
.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:#1D2224;color:#8DFFF8;font-family:var(--v4-mono);font-size:12px;font-weight:600}
.tag--c{background:#0F2622;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:#15161A;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 #111215;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:#121317;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:#15161A;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:#121317;border:1px solid var(--v4-line-2);font:12.5px/1.65 var(--v4-mono);color:#DCDFE3;white-space:pre-wrap;overflow-wrap:anywhere}
.code .k{color:var(--v4-kick)} .code .s{color:#8DFFF8} .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:#15161A;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:#8DFFF8}
@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:#15161A;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(244,243,239,.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(45,253,242,.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}

/* socialmattersolutions.com v7 — the sealed line (sms-brand-v2/DESIGN-CONTRACT.md Round 5). Loaded after the v5 kit: Round 4's
   material over v5's content. Pills retired, radius 0, no shadows, station windows are frosted glass over the 3D line. */
@property --lvl { syntax: '<percentage>'; inherits: false; initial-value: 102%; }
:root { --aqua: #2DFDF2; --aqua-hi: #8DFFF8; --paper: #F4F3EF; --ink: #0E0F12; --surface: #15161A; --line: #2A2D33;
  --muted: #9AA0AA; --dim: #7D838D; --ghost: #646A74; --liq: #2DFDF2; color-scheme: dark; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── the stage: one fixed canvas behind every page; a CSS glow holds the first paint */
.v4-glow, .v4-grain, .v4-cord, #sms3d-stage, .v4-mark { display: none !important; }
#gl { position: fixed; inset: 0; width: 100%; height: 100lvh; display: block; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .7s ease; }
.gl-live #gl { opacity: 1; }
.pre-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; transition: opacity .9s ease;
  background: radial-gradient(38vmax 38vmax at 73% 50%, rgba(17, 46, 41, .9), rgba(14, 15, 18, 0) 72%); }
.gl-live .pre-glow { opacity: 0; }
.gl-fallback { display: none; }
.no-gl .gl-fallback { display: block; position: fixed; z-index: 0; right: 6vw; top: 50%; width: min(70vh, 680px); aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; opacity: .9;
  background: center / contain no-repeat; background-image: var(--fallback); }
@media (max-aspect-ratio: 9/10) { .no-gl .gl-fallback { right: -8vw; top: 6svh; width: 46vw; transform: none; opacity: .5; }
  .pre-glow { background: radial-gradient(60vmax 60vmax at 60% 22%, rgba(17, 46, 41, .9), rgba(14, 15, 18, 0) 72%); } }
.s5-head, .s5-sheet, .s5-foot, main { position: relative; }
main, .s5-foot { z-index: 2; }

/* ── type: Archivo variable, expanded, 700 — Round 4's display face in place of Montserrat 900 */
.v4-h1, .v4-h2, .v4-h3 { font-weight: 700 !important; font-stretch: 106%; letter-spacing: -.04em; }
.v4-h1 { font-stretch: 108%; letter-spacing: -.046em; }
.v4-kick i { display: none; }
.v4-kick, .v4-st { color: var(--muted); letter-spacing: .16em; }
.v4-st::before { background: var(--aqua); opacity: 1; }

/* ── buttons: square, aqua, ink — pills retired */
.v4 .v4-pill, .s5-head .v4-pill, .s5-sheet .v4-pill, .v4-pill { border-radius: 0 !important; background: var(--aqua); color: var(--ink) !important; border: 0;
  font-family: var(--v4-disp); font-weight: 650; font-stretch: 104%; letter-spacing: .01em; box-shadow: none !important; }
.v4-pill:hover, .s5-head .v4-pill:hover { background: var(--aqua-hi) !important; }
.v4-pill--g, .v4 .v4-pill--g { background: transparent !important; color: var(--paper) !important; border: 1px solid rgba(244, 243, 239, .28) !important; }
.v4-pill--g:hover { border-color: var(--aqua) !important; background: rgba(244, 243, 239, .05) !important; color: var(--paper) !important; }

/* ── station windows: frosted glass over the line; the three fake window dots go (an AI tell) */
.w { border-radius: 0 !important; background: rgba(21, 22, 26, .66) !important; -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid rgba(244, 243, 239, .09) !important; box-shadow: none !important; }
.w__bar { background: rgba(244, 243, 239, .03) !important; }
.w__bar > i { display: none !important; }
.w__bar b { margin-left: 0 !important; }
@media (pointer: coarse) { .w { background: rgba(21, 22, 26, .92) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── radius 0 on every box (true circles — status dots, avatars — keep theirs), no shadows anywhere */
.v4 [class], .s5-head [class], .s5-sheet [class], .s5-foot [class] { box-shadow: none !important; }
.v4 .tag, .v4 .w__chip, .v4 .chk i, .v4 .tbl, .v4 .tblw, .v4 .pad, .v4 .rows, .v4 .row, .v4 .s5-recw, .v4 input, .v4 select, .v4 textarea, .v4 button:not(.rail-btn) { border-radius: 0 !important; }

/* ── header: Round 4's floating frosted bar (same glass) */
.s5-head { inset: 14px 0 auto !important; height: auto !important; background: none !important; border: 0 !important; pointer-events: none; z-index: 50; }
.s5-head.is-solid { background: none !important; }
.s5-head__in { pointer-events: auto; box-sizing: border-box; width: min(calc(100vw - 24px), calc(var(--v4-shell) + 40px)); height: 60px; padding: 0 10px 0 18px;
  background: rgba(14, 15, 18, .48); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(244, 243, 239, .08); transition: background .4s ease; }
.s5-head.is-solid .s5-head__in { background: rgba(14, 15, 18, .76); }
.s5-brand svg { width: 17px !important; height: 29px !important; overflow: visible; }
.s5-brand span { font: 650 14px/1 var(--v4-disp) !important; font-stretch: 104%; letter-spacing: -.01em !important; text-transform: none !important; white-space: nowrap; }
.s5-nav a, .s5-nav button { font: 500 14px var(--v4-sans); color: var(--muted); }
.s5-drop__panel { border-radius: 0 !important; background: rgba(14, 15, 18, .92) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.s5-drop__panel a { border-radius: 0 !important; }
.s5-head .v4-pill { min-height: 44px !important; padding: 0 20px !important; font-size: 14px !important; }
.s5-sheet { background: rgba(14, 15, 18, .94) !important; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.s5-sheet__x { border-radius: 0 !important; }

/* ── footer: a frosted panel the glass shows through */
.s5-foot { border-top: 0 !important; padding-block: 0 40px !important; }
.s5-foot__in { box-sizing: border-box; background: rgba(21, 22, 26, .56); -webkit-backdrop-filter: blur(20px) saturate(1.25); backdrop-filter: blur(20px) saturate(1.25);
  border: 1px solid rgba(244, 243, 239, .08); padding: 56px clamp(24px, 3vw, 48px); }
.s5-foot h2 { font: 600 12px var(--v4-sans) !important; letter-spacing: .14em !important; color: var(--muted) !important; }
.s5-foot li a:hover { color: var(--aqua); text-decoration: none !important; }
.s5-foot__legal { color: var(--dim); }

/* ═══════════════ Round 4 home (scoped: never touches the v5 pages) ═══════════════ */
.r4 { --gut: max(4vw, calc((100vw - var(--v4-shell)) / 2)); --display: var(--v4-disp); --ui: var(--v4-sans); --mono: var(--v4-mono);
  --t-xs: 12px; --t-s: 14px; --t-m: 17px; --t-l: clamp(18px, 1.3vw, 21px); --t-xl: clamp(22px, 2vw, 30px);
  --t-st: clamp(27px, 3.45vw, 54px); --t-2xl: clamp(34px, 4.3vw, 68px); --t-h2: clamp(40px, 5.3vw, 86px); --t-h1: clamp(46px, 7.4vw, 120px); --t-num: clamp(92px, 16.4vw, 258px);
  position: relative; z-index: 2; font-family: var(--ui); font-size: var(--t-m); line-height: 1.6; color: var(--paper); overflow-x: clip; }
.r4 *, .r4 *::before, .r4 *::after { box-sizing: border-box; }
.r4 p, .r4 h1, .r4 h2, .r4 ol, .r4 dl, .r4 dd, .r4 figure { margin: 0; }
.r4 ol { padding: 0; }
.r4 section[id] { scroll-margin-top: 96px; }
.r4 .h2 { font: 700 var(--t-h2)/.96 var(--display); font-stretch: 106%; letter-spacing: -.04em; text-wrap: balance; }
.r4 .lede { margin-top: 26px; font: 400 var(--t-l)/1.55 var(--ui); color: var(--muted); max-width: 31em; }
.r4 .btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 32px; background: var(--aqua); color: var(--ink); font: 650 var(--t-m)/1 var(--display); font-stretch: 104%; letter-spacing: .01em; text-decoration: none; transition: background .2s; }
.r4 .btn:hover { background: var(--aqua-hi); }
.r4 .btn-line { background: none; color: var(--paper); border: 1px solid rgba(244, 243, 239, .28); }
.r4 .btn-line:hover { background: rgba(244, 243, 239, .06); border-color: var(--aqua); }
.r4 .link { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; color: var(--paper); text-decoration: none; font: 500 var(--t-m)/1 var(--ui); }
.r4 .link span { transition: transform .25s ease; }
.r4 .link:hover span { transform: translateX(4px); }
.r4 .more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; color: var(--paper); font: 500 var(--t-s)/1 var(--ui); text-decoration: none; border-bottom: 1px solid rgba(45, 253, 242, .5); }
.r4 .more:hover { border-color: var(--aqua); }
.r4 .hero { min-height: 100svh; display: flex; align-items: center; padding: 120px var(--gut) 90px; }
.r4 .hero-copy { max-width: min(48vw, 780px); }
.r4 .hero-h1 { font: 700 var(--t-h1)/.92 var(--display); font-stretch: 108%; letter-spacing: -.046em; }
.r4 .hero-h1 > span { display: block; }
.r4 .liquid { color: var(--paper); -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; padding-bottom: .07em; margin-bottom: -.07em;
  background-image: linear-gradient(to top, var(--paper) calc(var(--lvl) - 2.2%), var(--aqua) calc(var(--lvl) - 2.2%), var(--aqua) var(--lvl), rgba(244, 243, 239, .13) var(--lvl)); }
.r4 .liquid.pour { animation: lvl .95s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes lvl { from { --lvl: 6%; } to { --lvl: 102%; } }
.r4 .hero-sub { margin-top: 34px; font: 400 var(--t-l)/1.55 var(--ui); color: var(--muted); max-width: 29em; }
.r4 .hero-cta { margin-top: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.r4 .statement { padding: 24vh var(--gut) 22vh; }
.r4 .statement-text { font: 500 var(--t-st)/1.16 var(--display); letter-spacing: -.024em; max-width: 17.5em; }
.r4 .statement-text .wd { color: var(--ghost); }
.r4 .statement-sign { margin-top: 52px; display: flex; align-items: center; gap: 16px; font: 500 var(--t-s)/1.4 var(--ui); color: var(--muted); }
.r4 .statement-sign::before { content: ''; width: 40px; height: 1px; background: var(--aqua); }
.r4 .proof { padding: 20vh var(--gut); }
.r4 .proof-num { display: block; font: 800 var(--t-num)/.84 var(--display); font-stretch: 112%; letter-spacing: -.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r4 .proof-label { display: block; margin-top: 22px; font: 500 var(--t-xl)/1.2 var(--display); letter-spacing: -.01em; }
.r4 .proof-facts { margin-top: 9vh; display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); gap: 0 56px; max-width: 640px; border-top: 1px solid var(--line); }
.r4 .proof-facts div { padding-top: 22px; }
.r4 .proof-facts dt { font: 700 var(--t-2xl)/1 var(--display); font-stretch: 108%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.r4 .proof-facts dd { margin-top: 10px; font-size: var(--t-s); color: var(--muted); }
.r4 .proof-note { margin-top: 30px; font-size: var(--t-s); color: var(--dim); }
.r4 .rails { padding: 18vh var(--gut); }
.r4 .rails-inner { max-width: 620px; }
.r4 .rail-list { margin-top: 56px; list-style: none; border-top: 1px solid var(--line); }
.r4 .rail { border-bottom: 1px solid var(--line); }
.r4 .rail-btn { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) 20px; align-items: center; padding: 24px 0; min-height: 44px; background: none; border: 0; border-radius: 0; color: var(--paper); text-align: left; cursor: pointer; font: inherit; }
.r4 .rail-no { font: 500 var(--t-xs)/1 var(--mono); color: var(--dim); }
.r4 .rail-name { font: 600 var(--t-xl)/1.1 var(--display); letter-spacing: -.02em; }
.r4 .rail-sign { position: relative; width: 14px; height: 14px; justify-self: end; }
.r4 .rail-sign::before, .r4 .rail-sign::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; background: var(--paper); transition: transform .35s ease, background .35s; }
.r4 .rail-sign::after { transform: rotate(90deg); }
.r4 .rail.is-open .rail-sign::after { transform: rotate(0deg); }
.r4 .rail.is-open .rail-sign::before, .r4 .rail.is-open .rail-sign::after { background: var(--aqua); }
.r4 .rail-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.3, .7, .2, 1); }
.r4 .rail.is-open .rail-body { grid-template-rows: 1fr; }
.r4 .rail-body > div { overflow: hidden; }
.r4 .rail-body p { padding: 0 24px 10px 56px; color: var(--muted); max-width: 33em; }
.r4 .rail-body .more { margin: 0 0 26px 56px; }
.r4 .verticals { position: relative; height: calc(100svh + 13 * 15svh); }
.r4 .v-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; --row: clamp(54px, 6vw, 92px); --at: 66svh; }
.r4 .v-head { position: absolute; left: var(--gut); top: max(108px, 14svh); max-width: min(46vw, 640px); }
.r4 .v-head .h2 { font-size: var(--t-2xl); }
.r4 .v-head .lede { margin-top: 18px; }
.r4 .v-tape { position: absolute; left: var(--gut); right: 44vw; top: 0; bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--at) - 1.75 * var(--row)), #000 calc(var(--at) - .55 * var(--row)), #000 calc(var(--at) + 1.3 * var(--row)), transparent calc(var(--at) + 2.6 * var(--row)));
  mask-image: linear-gradient(to bottom, transparent calc(var(--at) - 1.75 * var(--row)), #000 calc(var(--at) - .55 * var(--row)), #000 calc(var(--at) + 1.3 * var(--row)), transparent calc(var(--at) + 2.6 * var(--row))); }
.r4 .v-list { list-style: none; position: absolute; left: 0; top: var(--at); transform: translate3d(0, calc((var(--f, 0) * -1 - .5) * var(--row)), 0); will-change: transform; }
.r4 .v-list li { height: var(--row); display: flex; align-items: center; gap: .42em; font: 700 var(--t-2xl)/1 var(--display); font-stretch: 106%; letter-spacing: -.035em; color: var(--dim); white-space: nowrap; transition: color .3s ease; }
.r4 .v-list li i { width: .3em; height: .3em; flex: none; background: var(--c); }
.r4 .v-list li.is-on { color: var(--paper); }
.r4 .v-rule { position: absolute; left: var(--gut); right: 0; top: calc(var(--at) + .5 * var(--row)); height: 1px; pointer-events: none;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--liq) 60%, transparent) 8%, color-mix(in srgb, var(--liq) 60%, transparent) 64%, transparent); transition: background .6s ease; }
.r4 .v-now { position: absolute; left: var(--gut); bottom: 40px; display: flex; gap: 20px; font: 500 var(--t-xs)/1 var(--mono); color: var(--dim); }
.r4 .v-now b { font-weight: 500; color: var(--paper); }
.r4 .v-now a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(45, 253, 242, .5); }
.r4 .dev { padding: 18vh var(--gut); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 6vw; align-items: center; }
.r4 .code { background: rgba(21, 22, 26, .76); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(244, 243, 239, .09); min-width: 0; }
.r4 .code figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 15px 20px; border-bottom: 1px solid rgba(244, 243, 239, .08); font: 500 var(--t-xs)/1 var(--mono); color: var(--muted); }
.r4 .code figcaption b { font-weight: 500; color: var(--aqua); }
.r4 .code pre { margin: 0; padding: 20px 20px 24px 0; overflow-x: auto; font: 400 var(--t-s)/1.75 var(--mono); color: #C9CDD3; counter-reset: ln; }
.r4 .code .ln { display: block; counter-increment: ln; white-space: pre; }
.r4 .code .ln::before { content: counter(ln); display: inline-block; width: 3.4em; padding-right: 1.2em; text-align: right; color: var(--dim); }
.r4 .code .k { color: var(--paper); } .r4 .code .s { color: var(--aqua); } .r4 .code .m { color: var(--aqua); font-weight: 500; } .r4 .code .c { color: var(--muted); }
.r4 .team { padding: 18vh var(--gut) 14vh; }
.r4 .people { margin-top: 72px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; max-width: 1120px; }
.r4 .person:nth-child(1) { grid-column: 1 / span 5; }
.r4 .person:nth-child(2) { grid-column: 7 / span 5; margin-top: 140px; }
.r4 .person img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border: 1px solid rgba(244, 243, 239, .08); }   /* portraits are graded at source: ink ground, monochrome */
.r4 .person figcaption { margin-top: 20px; }
.r4 .person b, .r4 .matt b { display: block; font: 650 var(--t-xl)/1.2 var(--display); letter-spacing: -.01em; }
.r4 .person .role, .r4 .matt .role { display: block; margin-top: 4px; font: 500 var(--t-s)/1.3 var(--ui); color: var(--aqua); }
.r4 .person p, .r4 .matt p { margin-top: 10px; color: var(--muted); font-size: var(--t-m); max-width: 25em; }
.r4 .matt { margin-top: 88px; max-width: 560px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 8px 24px; }
.r4 .matt p { margin-top: 10px; }
.r4 .matt img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border: 1px solid rgba(244, 243, 239, .08); }
.r4 .matt { align-items: end; }
.r4 .apply { min-height: 100svh; padding: 18vh var(--gut); display: flex; flex-direction: column; justify-content: center; }
.r4 .apply-h { font: 700 var(--t-h1)/.94 var(--display); font-stretch: 108%; letter-spacing: -.045em; max-width: 8.4em; }
.r4 .apply-cta { margin-top: 46px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.r4 .apply-mail { font: 500 var(--t-m)/1 var(--mono); color: var(--paper); user-select: all; }
@media (max-aspect-ratio: 9/10) {
  .r4 .hero { align-items: flex-end; padding-top: 50svh; padding-bottom: 64px; }
  .r4 .hero-copy { max-width: 100%; }
  .r4 .dev { grid-template-columns: minmax(0, 1fr); }
  .r4 .apply { justify-content: flex-end; padding-bottom: 12vh; }
  .r4 .v-sticky { --at: 50svh; --row: 50px; }
  .r4 .v-tape { right: var(--gut); }
  .r4 .v-head { max-width: calc(100vw - 2 * var(--gut)); top: 96px; }
  .r4 .v-now { display: none; }
  .r4 .people { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 460px; }
  .r4 .person:nth-child(1), .r4 .person:nth-child(2) { grid-column: auto; margin-top: 0; }
  .r4 .matt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) { .r4 .proof-facts { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ═══════════════ Apply form (contact) ═══════════════ */
.ap { display: grid; gap: 28px; max-width: 760px; }
.ap-body { display: grid; gap: 30px; }
.ap fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ap legend, .ap label > span { display: block; margin-bottom: 10px; font: 600 12px/1 var(--v4-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ap .ap-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.ap input[type=text], .ap input[type=email], .ap input[type=tel], .ap input[type=url], .ap textarea, .ap select { width: 100%; box-sizing: border-box; min-height: 52px; padding: 14px 16px;
  background: rgba(14, 15, 18, .6); border: 1px solid rgba(244, 243, 239, .16); border-radius: 0; color: var(--paper); font: 400 16px/1.4 var(--v4-sans); outline: none; transition: border-color .2s, background .2s; }
.ap textarea { min-height: 120px; resize: vertical; }
.ap input:focus, .ap textarea:focus, .ap select:focus { border-color: var(--aqua); background: rgba(14, 15, 18, .8); }
.ap .ap-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ap .ap-chips label { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(244, 243, 239, .16); cursor: pointer; font: 500 14px var(--v4-sans); color: var(--paper); transition: border-color .2s, background .2s; }
.ap .ap-chips label i { width: 10px; height: 10px; background: var(--c, var(--aqua)); flex: none; }
.ap .ap-chips input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ap .ap-chips label:has(input:checked) { border-color: var(--c, var(--aqua)); background: rgba(244, 243, 239, .06); }
.ap .ap-chips label:has(input:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 2px; }
.ap .ap-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ap .ap-send { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.ap .ap-note { color: var(--muted); font-size: 14px; max-width: 38em; }
.ap .ap-status { font: 500 15px/1.5 var(--v4-sans); color: var(--paper); min-height: 1.5em; }
.ap .ap-status.is-err { color: #FF8A8A; }
.ap button[type=submit] { min-height: 56px; padding: 0 32px; border: 0; border-radius: 0; background: var(--aqua); color: var(--ink); font: 650 16px/1 var(--v4-disp); font-stretch: 104%; cursor: pointer; transition: background .2s; }
.ap button[type=submit]:hover { background: var(--aqua-hi); }
.ap button[disabled] { opacity: .6; cursor: progress; }
.ap-done { display: none; }
.ap.is-sent .ap-body { display: none; }
.ap.is-sent .ap-done { display: block; }
@media (max-width: 640px) { .ap .ap-row { grid-template-columns: minmax(0, 1fr); } }

/* contact: the booking card (an inline calendar rendered as a white page inside the glass) */
.cal-card { padding: 24px clamp(18px, 2vw, 28px) 28px; display: grid; gap: 20px; }
.cal-card .cal-lede { color: var(--v4-body); font-size: 16px; max-width: 34em; }
.cal-card .v4-pill { justify-self: start; }

/* one type scale across chrome and pages (Gate A: >12 sizes = no scale): v5 chrome sizes snapped to the v7 steps */
.s5-drop__panel code, .s5-sheet nav a code { font-size: 12px !important; }
.s5-foot__legal, .s5-foot__legal * { font-size: 12px !important; }
.s5-foot__brand p, .s5-foot__mail, .s5-foot li a { font-size: 14px !important; }
.s5-skip, .v4-pill, .s5-sheet .v4-pill { font-size: 17px !important; }
.s5-head .v4-pill { font-size: 14px !important; }
.s5-sheet nav a { font-size: clamp(22px, 2vw, 30px) !important; }
.s5-sheet__x { font-size: 22px !important; }
/* every tap target ≥ 44 px */
.s5-brand { min-width: 44px; justify-content: flex-start; }
.s5-foot__legal a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* ═══════════════ Rail (/rail/): the sister company's page — the same glass, poured with Social Matter Payments' chartreuse ═══════════════ */
.rl { --smp: #B4BD00; }
.rl .rl-mast { min-height: 100svh; display: flex; align-items: center; padding: 120px var(--gut) 90px; }
.rl .rl-copy { max-width: min(50vw, 800px); }
.rl .rl-tag { display: inline-flex; align-items: center; gap: 12px; font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rl .rl-dot { width: 8px; height: 8px; flex: none; background: var(--smp); animation: rlpulse 2.4s ease-in-out infinite; }
@keyframes rlpulse { 50% { opacity: .3; } }
.rl .rl-h1 { margin: 28px 0 0; font: 700 var(--t-h1)/.92 var(--display); font-stretch: 108%; letter-spacing: -.046em; }
.rl .rl-h1 > span { display: block; }
.rl .rl-sub { margin-top: 34px; font: 400 var(--t-l)/1.55 var(--ui); color: var(--muted); max-width: 29em; }
.rl .rl-flow { padding: 18vh var(--gut); }
.rl .rl-stops { list-style: none; margin-top: 64px; max-width: 1040px; }
.rl .rl-stops li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 26px 0 30px; margin-left: calc(var(--i) * 22%); max-width: 520px; border-top: 1px solid var(--line); }
.rl .rl-stops li::before { content: ''; position: absolute; left: 0; top: -1px; width: 64px; height: 2px; background: var(--smp); }
.rl .rl-no { grid-row: span 2; font: 500 var(--t-xs)/1.9 var(--mono); color: var(--dim); }
.rl .rl-stops b { font: 650 var(--t-xl)/1.15 var(--display); letter-spacing: -.02em; }
.rl .rl-stops p { margin-top: 8px; color: var(--muted); max-width: 26em; }
.rl .rl-apply { padding: 16vh var(--gut) 14vh; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 6vw; align-items: start; }
.rl .rl-apply-head { position: sticky; top: 120px; }
.rl .rl-today { margin-top: 30px; color: var(--muted); font-size: var(--t-s); max-width: 30em; }
.rl .rl-today .more { margin-top: 6px; }
.rl .rl-form { padding: clamp(22px, 2.6vw, 40px); background: rgba(21, 22, 26, .74); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid rgba(244, 243, 239, .09); }   /* X-GLASS PANELS: the glass may pass behind the form */
@media (pointer: coarse) { .rl .rl-form { background: rgba(21, 22, 26, .92); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.rl .rl-seg { border-top: 1px solid var(--line); }
.rl .rl-seg label { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; padding: 20px 4px 22px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.rl .rl-seg label::before { content: ''; width: 14px; height: 14px; margin-top: 7px; border: 1px solid rgba(244, 243, 239, .4); transition: background .2s, border-color .2s; }
.rl .rl-seg label:has(input:checked)::before { background: var(--smp); border-color: var(--smp); }
.rl .rl-seg label:hover { background: rgba(244, 243, 239, .03); }
.rl .rl-seg label:has(input:focus-visible) { outline: 2px solid var(--aqua); outline-offset: 2px; }
.rl .rl-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rl .ap .rl-seg label > span { margin: 0; font: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
.rl .rl-seg b { display: block; font: 650 var(--t-xl)/1.15 var(--display); letter-spacing: -.02em; color: var(--paper); }
.rl .rl-seg em { display: block; margin-top: 6px; font: 400 var(--t-m)/1.5 var(--ui); font-style: normal; color: var(--muted); max-width: 30em; }
.rl .rl-close { min-height: 90svh; padding: 18vh var(--gut); display: flex; flex-direction: column; justify-content: center; }
.rl .rl-close .apply-h { margin-top: 26px; max-width: 8.6em; }
.rl .rl-soon { margin-top: 26px; font: 500 var(--t-m)/1.4 var(--mono); color: var(--paper); }
.rl .rl-fine { margin-top: 44px; max-width: 40em; font-size: var(--t-s); color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .rl .rl-dot { animation: none; } }
@media (max-aspect-ratio: 9/10) {
  .rl .rl-mast { align-items: flex-end; padding-top: 50svh; padding-bottom: 64px; }
  .rl .rl-copy { max-width: 100%; }
  .rl .rl-stops li { margin-left: calc(var(--i) * 7%); }
  .rl .rl-apply { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .rl .rl-apply-head { position: static; }
  .rl .rl-close { justify-content: flex-end; padding-bottom: 12vh; min-height: 110svh; }   /* its content is taller than the home's Apply: the riding S keeps the top half */
}

/* ═══════════════ Team (/team/): the founders, brand and film, the three companies ═══════════════ */
.tm .tm-mast { min-height: 100svh; display: flex; align-items: center; padding: 120px var(--gut) 90px; }
.tm .tm-copy { max-width: min(52vw, 820px); }
.tm .tm-h1 { font: 700 var(--t-h1)/.92 var(--display); font-stretch: 108%; letter-spacing: -.046em; }
.tm .tm-h1 > span { display: block; }
.tm .tm-sub { margin-top: 34px; font: 400 var(--t-l)/1.55 var(--ui); color: var(--muted); max-width: 27em; }
.tm .tm-founders { padding: 16vh var(--gut) 12vh; }
.tm .tm-pair { margin-top: 64px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; max-width: 1180px; }
.tm .tm-person { margin: 0; }
.tm .tm-person:nth-child(1) { grid-column: 1 / span 5; }
.tm .tm-person:nth-child(2) { grid-column: 7 / span 5; margin-top: 160px; }
.tm .tm-person img, .tm .tm-film-portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid rgba(244, 243, 239, .08); }
.tm .tm-person figcaption { margin-top: 22px; display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.tm .tm-no { grid-row: span 3; font: 500 var(--t-xs)/2 var(--mono); color: var(--dim); }
.tm .tm-person b { font: 650 var(--t-xl)/1.2 var(--display); letter-spacing: -.01em; }
.tm .tm-person .role { margin-top: 4px; font: 500 var(--t-s)/1.3 var(--ui); color: var(--aqua); }
.tm .tm-person p { margin-top: 10px; color: var(--muted); max-width: 25em; }
.tm .tm-film { padding: 16vh var(--gut) 14vh; }
.tm .tm-film-head { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 40px; align-items: end; max-width: 980px; }
.tm .tm-film-name { margin-top: 18px; font: 400 var(--t-l)/1.4 var(--ui); color: var(--paper); }
.tm .tm-film-name b { font-weight: 650; }
.tm .tm-film .lede { margin-top: 10px; }
.tm .tm-film .more { margin-top: 18px; }
.tm .tm-reel { list-style: none; margin-top: 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tm .tm-reel li:nth-child(even) { margin-top: 64px; }
.tm .tm-reel img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.tm .tm-reel span { display: block; margin-top: 12px; font: 500 var(--t-xs)/1.5 var(--mono); color: var(--muted); }
.tm .tm-credit { margin-top: 28px; font-size: var(--t-s); color: var(--dim); }
.tm .tm-family { padding: 18vh var(--gut); }
.tm .tm-cos { list-style: none; margin-top: 56px; max-width: 1040px; border-top: 1px solid var(--line); }
.tm .tm-cos li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, auto); gap: 8px 32px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.tm .tm-co { font: 650 var(--t-xl)/1.2 var(--display); letter-spacing: -.02em; }
.tm .tm-cos p { color: var(--muted); }
.tm .tm-here { font: 500 var(--t-xs)/1 var(--mono); color: var(--aqua); letter-spacing: .14em; text-transform: uppercase; }
.tm .tm-cos .more { margin: 0; }
@media (max-aspect-ratio: 9/10) {
  .tm .tm-mast { align-items: flex-end; padding-top: 50svh; padding-bottom: 64px; }
  .tm .tm-copy { max-width: 100%; }
  .tm .tm-pair { grid-template-columns: minmax(0, 1fr); gap: 48px; max-width: 460px; }
  .tm .tm-person:nth-child(1), .tm .tm-person:nth-child(2) { grid-column: auto; margin-top: 0; }
  .tm .tm-film-head { grid-template-columns: minmax(0, 1fr); }
  .tm .tm-film-portrait { max-width: 220px; }
  .tm .tm-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tm .tm-reel li:nth-child(even) { margin-top: 40px; }
  .tm .tm-cos li { grid-template-columns: minmax(0, 1fr); }
}
.r4 .tm-meet { margin-top: 44px; }

/* ═══════════════ Inner pages, round 6: the hero is the headline + the glass S; the page's own demo comes next, as its first stop ═══════════════ */
@media (min-aspect-ratio: 9/10) {
  .v4 .v4-mast--page .v4-mast__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .v4 .v4-mast--page .v4-mast__copy { max-width: min(56vw, 920px); min-height: calc(100svh - 140px); display: flex; flex-direction: column; justify-content: center; }
  .v4 .v4-mast--page .v4-mast__vis { width: min(46vw, 640px); margin: 2vh 0 4vh; }
}
.v4 .v4-h2--s { font-size: clamp(30px, 3.5vw, 56px) !important; line-height: 1.02 !important; }
.v4 .v4-h2:not(.v4-h2--s) { font-size: clamp(36px, 4.6vw, 74px) !important; line-height: .98 !important; }
.v4 .v4-close .v4-h2 { font-size: clamp(40px, 5.6vw, 92px) !important; }
@media (max-aspect-ratio: 9/10) { .v4 .v4-mast.v4-mast--page { padding-top: 40svh !important; } }

/* industries: the list pours — one vertical per row, its own liquid chip; the glass beside it takes the colour of the row in the middle */
.v4 .ind--pour { grid-template-columns: minmax(0, 1fr); max-width: min(54vw, 780px); }
.v4 .ind--pour article { position: relative; padding: 26px 0 28px 30px; transition: opacity .3s ease; }
.v4 .ind--pour article::before { content: ''; position: absolute; left: 0; top: 33px; width: 12px; height: 12px; background: var(--c); }
.v4 .ind--pour article::before { transition: transform .35s cubic-bezier(.3, .7, .2, 1); }
.v4 .ind--pour article.is-pour::before { transform: scale(1.5); }
@media (max-aspect-ratio: 9/10) { .v4 .ind--pour { max-width: none; } }

/* phones: room for the glass where it rides (the $12M+ climbs beside a filling S), the verticals list clear of the S, a gutter for the
   industries pour — so the glass never sits under text that is being read */
@media (max-aspect-ratio: 9/10) {
  .r4 .proof { padding-top: 44svh; }
  .r4 .v-sticky { --at: 40svh; }
  .v4 .ind--pour article { padding-right: 27%; }
}