/* N16-CSS. Paths in this file resolve against THIS FILE, not against the page.
   The font lives at assets/fonts/ and this file is assets/manvis.css, so the url
   below is fonts/... and must never be 'corrected' back to assets/fonts/... */
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-VariableFont_wght.woff2') format('woff2-variations'),url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-display:swap}

/* ============================================================================
   TOKENS
   Light is the primary surface. Dark is the reverse, carried by .dark, and it
   is capped at three sections. Every component reads the semantic tokens, so a
   surface flips by changing the class and nothing else.
   ========================================================================== */
:root{
  /* brand constants, off the logomark. These never vary by surface. */
  --coral:#E7603E;--coral-d:#C95A3A;--cyan:#22E3FF;--cyan-d:#0B7488;
  --ink0:#0B1622;--ink:#101E2D;

  /* semantic, light */
  --bg:#F2F6FA;--bg2:#E6EDF5;
  --fg:#0B1622;--fg-soft:#42515F;--fg-mute:#6B7A8A;
  --line:rgba(11,22,34,.12);--line-soft:rgba(11,22,34,.07);
  --card:#FFFFFF;--card-2:rgba(255,255,255,.62);
  --accent:var(--coral-d);--mesh:rgba(11,22,34,.13);--shadow:0 18px 44px rgba(11,22,34,.10);

  --f:'Montserrat',system-ui,sans-serif;--maxw:1240px;--pad:68px;--nav:78px;--nav-c:62px;
  --h1:44px;--h2:36px;--h3:22px;--lead:18px;--body:16.5px;--cap:12px}

.dark{
  --bg:var(--ink0);--bg2:#0E1B29;
  --fg:#EEF3F7;--fg-soft:#AEB9C6;--fg-mute:#7E8CA0;
  --line:rgba(255,255,255,.09);--line-soft:rgba(255,255,255,.05);
  --card:#19232F;--card-2:rgba(255,255,255,.03);
  --accent:var(--cyan);--mesh:rgba(34,227,255,.15);--shadow:0 24px 60px rgba(0,0,0,.5)}

@media(max-width:880px){:root{--pad:46px;--nav:66px;--nav-c:58px;--h1:31px;--h2:25px;--h3:18px;
  --lead:16px;--body:15.5px;--cap:11px}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f);font-size:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;line-height:1.13;letter-spacing:-.022em;font-weight:800;color:var(--fg)}
h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3);font-weight:700}
p{margin:0}
a{color:inherit}
.lead{font-size:var(--lead);font-weight:300;color:var(--fg-soft);line-height:1.55}
.cap{font-size:var(--cap);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--fg-mute)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 30px;position:relative;z-index:3}
section{padding:var(--pad) 0;position:relative;overflow:hidden;background:var(--bg);color:var(--fg)}
section[id],header[id]{scroll-margin-top:calc(var(--nav-c) + 16px)}
em{font-style:normal;color:var(--accent)}

/* ===== the node mesh. A screen's own grid, read off V13. It is the one
   background structure the whole site shares, and it retunes per surface. ==== */
.bgl{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgl:before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:radial-gradient(var(--mesh) 1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 78%);
  mask-image:radial-gradient(120% 90% at 50% 0,#000,transparent 78%)}
/* The apertures drift AND beat. The beat is the measurement gesture the whole
   brand rests on, so it stays legible rather than hiding at 2% opacity. */
.dmd{position:absolute;border-radius:22%;opacity:.085;
  animation:float 22s ease-in-out infinite,beat 4.4s ease-in-out infinite}
.dmd.c{background:var(--cyan)}.dmd.o{background:var(--coral)}
.dark .dmd{opacity:.1}
@keyframes float{0%,100%{transform:rotate(45deg) translateY(0) scale(1)}
  50%{transform:rotate(45deg) translateY(-26px) scale(1)}}
@keyframes beat{0%,100%{opacity:.06}50%{opacity:.19}}
.dark .dmd{animation:float 22s ease-in-out infinite,beatd 4.4s ease-in-out infinite}
@keyframes beatd{0%,100%{opacity:.07}50%{opacity:.22}}
.rail{position:absolute;left:0;right:0;height:1px;background:var(--line-soft)}
.rail i{position:absolute;top:-2.5px;width:6px;height:6px;border-radius:2px;background:var(--accent);
  opacity:.5;animation:travel 14s linear infinite}
@keyframes travel{0%{left:-2%;opacity:0}8%{opacity:.6}92%{opacity:.6}100%{left:102%;opacity:0}}

/* sensor grain. The whole site reads as footage, never as a flat div. */
body::after{content:"";position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:70;
  opacity:.03;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite}
@keyframes grain{0%,100%{transform:translate(0,0)}25%{transform:translate(-2%,1.5%)}
  50%{transform:translate(1.5%,-2%)}75%{transform:translate(2%,2%)}}

/* ============================== NAV =======================================
   V13's proportions and panels, on this site's real sitemap. Order mirrors the
   page top to bottom. Every rule scoped to .topbar: a bare nav{} selector once
   pinned the footer's <nav> columns over the hero. (A7)
   ======================================================================== */
/* The bar carries the approved lockup, whose wordmark is white and whose lower
   chevron fades to white. There is no light-background lockup in the approved
   set, so the bar stays dark on a light site rather than recolouring brand art.
   It also gives the light page a constant anchor and echoes the hero. */
/* The bar compacts on scroll. It is position:fixed and the page is offset by the
   hero's own padding, not by the bar, so height here reflows nothing. No CLS. */
/* min-height, not height. The bar is a flex row and its buttons set the floor, so
   a fixed height can never compact it; the CONTENT has to shrink and the bar
   follows. Verified: an inline height:62px still measured 78px. */
.topbar{position:fixed;top:0;left:0;right:0;z-index:80;min-height:var(--nav);display:flex;
  align-items:center;backdrop-filter:blur(18px);background:rgba(11,22,34,.9);
  --fg:#EEF3F7;--fg-soft:#AEB9C6;--fg-mute:#7E8CA0;--line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.07);--card:#19232F;border-bottom:1px solid var(--line-soft);
  transition:min-height .26s cubic-bezier(.22,.7,.25,1),background-color .25s ease,
  box-shadow .25s ease}
.topbar.stuck{min-height:var(--nav-c);background:rgba(11,22,34,.97);
  box-shadow:0 12px 34px rgba(11,22,34,.28)}
/* 44px at rest, 38px compact. Best practice puts a desktop CTA at 40 to 48px and
   asks that the primary out-weigh the secondary, which the fill already does. */
.topbar .btn{padding:13px 22px;font-size:14.5px}
.topbar .btn.s{padding:13px 20px;font-size:14px}
.topbar.stuck .btn{padding:10px 19px;font-size:14px}
.topbar.stuck .btn.s{padding:10px 17px;font-size:13.5px}
/* Touch targets clear 44px on a phone, per Apple and WCAG. */
@media(max-width:600px){.topbar .btn,.topbar.stuck .btn{padding:14px 15px;font-size:13.5px}
  .topbar .wrap{gap:12px}.topbar{--nav:64px}}
@media(max-width:400px){.topbar .btn,.topbar.stuck .btn{padding:14px 12px;font-size:13px}}
.topbar .btn,.topbar .brand img{transition:padding .26s cubic-bezier(.22,.7,.25,1),
  height .26s cubic-bezier(.22,.7,.25,1),font-size .26s ease}
.topbar .ndrop a:hover b{color:var(--cyan)}

.topbar a.l:after,.topbar a.l:hover:after{background:var(--cyan)}
.topbar .wrap{display:flex;align-items:center;gap:26px;width:100%}
.topbar .sp{flex:1}
/* Both lockups are the approved Primary artwork with the artboard plate stripped
   (A11) and the viewBox tightened to the ink. That matters: the approved file
   carries 993 units of empty space to the RIGHT of the art and 117 top and
   bottom, so height:40px on the untightened box drew the logo at 31px and left
   a 50px hole beside it. The tight box is the TRUE art bounds, which include the
   two rotated <rect> diamonds; getBBox() reports a rect in its own local space,
   before its transform, so measuring paths alone clips the cyan diamond. The heights below are therefore heights of ARTWORK.
   The mark is the full height of the lockup and the wordmark is 21.6% of it.
   That ratio is the brand's, set in Figma, and is never adjusted here. */
.brand{display:block;flex:none;line-height:0;border-radius:4px}
.brand img{width:auto;display:block;transition:opacity .18s ease,height .26s ease}
.brand:hover img{opacity:.82}
.topbar .brand img{height:42px}            /* 54% of the 78px bar */
.topbar.stuck .brand img{height:35px}      /* 56% of the 62px bar */
@media(max-width:880px){.topbar .brand img,.topbar.stuck .brand img{height:36px}}
@media(max-width:600px){.topbar .brand img,.topbar.stuck .brand img{height:33px}}
.fbrand .brand img{height:38px}

.nlinks{display:flex;align-items:center;gap:30px}
.ni{position:relative;display:inline-flex;align-items:center;gap:7px}
.ni:before{content:"";position:absolute;top:100%;left:-16px;right:-16px;height:22px}
.topbar a.l,.sheet a.l{position:relative;color:var(--fg-soft);text-decoration:none;font-size:15px;
  font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;
  transition:color .18s ease}
.topbar a.l:hover,.sheet a.l:hover{color:var(--fg)}
.topbar a.l:after,.sheet a.l:after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.topbar a.l:hover:after{transform:scaleX(.4);opacity:.5}
.topbar a.l[aria-current],.sheet a.l[aria-current]{color:var(--fg)}
.topbar a.l[aria-current]:after,.sheet a.l[aria-current]:after{transform:scaleX(1);opacity:1}
/* the aperture, breathing at rest so it reads as a way in */
/* V13's caret. Quiet at rest, turns when its panel is open. */
.car{font-size:14px;line-height:1;color:var(--fg-soft);flex:none;display:inline-flex;
  align-items:center;transform-origin:50% 55%;
  transition:transform .22s ease,color .22s ease}
.ni:hover .car{transform:rotate(180deg);color:var(--cyan)}
/* the panel. Destinations only, never a menu of anchors. */
.ndrop{position:absolute;top:calc(100% + 18px);left:50%;z-index:2;min-width:250px;
  transform:translateX(-50%) translateY(-7px) scale(.98);transform-origin:top center;
  opacity:0;pointer-events:none;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 24px 54px rgba(11,22,34,.16);padding:8px;
  transition:opacity .2s ease,transform .2s cubic-bezier(.22,.7,.25,1)}
.ni:hover .ndrop,.ni:focus-within .ndrop{opacity:1;pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1)}
.ndrop.two{min-width:430px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.ndrop a{display:block;padding:11px 13px;border-radius:10px;text-decoration:none;
  transition:background .18s ease}
.ndrop a b{display:block;font-size:14px;font-weight:700;color:var(--fg)}
.ndrop a span{display:block;font-size:12.5px;color:var(--fg-mute);line-height:1.4;margin-top:2px}
.ndrop a:hover{background:rgba(231,96,62,.07)}
.ndrop a:hover b{color:var(--coral-d)}
/* mobile disclosure */
.burger{display:none;flex:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;
  background:0;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger i{display:block;width:17px;height:1.6px;background:var(--fg);position:relative;
  transition:transform .2s ease}
.burger i:before,.burger i:after{content:"";position:absolute;left:0;width:17px;height:1.6px;
  background:var(--fg);transition:transform .2s ease,opacity .2s ease}
.burger i:before{top:-5.5px}.burger i:after{top:5.5px}
.burger[aria-expanded="true"] i{transform:rotate(45deg)}
.burger[aria-expanded="true"] i:before{transform:translateY(5.5px) rotate(-90deg)}
.burger[aria-expanded="true"] i:after{opacity:0}
.sheet{position:fixed;top:var(--nav);left:0;right:0;z-index:79;background:rgba(11,22,34,.98);
  --fg:#EEF3F7;--fg-soft:#AEB9C6;--fg-mute:#7E8CA0;--line:rgba(255,255,255,.16);
  --line-soft:rgba(255,255,255,.08);color:var(--fg);
  border-bottom:1px solid var(--line);padding:10px 30px 26px;display:none;flex-direction:column}

.sheet.on{display:flex}
.sheet .ni{display:flex;align-items:center;justify-content:space-between;padding:15px 0;
  box-shadow:0 1px 0 var(--line-soft)}
.sheet .ni:before{display:none}
.sheet a.l{display:block;font-size:17px;padding:0}

.sheet .ndrop{display:none}
/* the six deliverables inside the mobile sheet. Indented under their parent so
   the hierarchy reads without a caret, which does not work on touch anyway. */
/* No rule down the side (A3). The indent and the lighter weight carry the
   hierarchy on their own, and a hairline here would be an argument worth
   avoiding for something indentation already does. */
.subs{display:flex;flex-direction:column;padding:2px 0 14px 18px}
.subs a{display:block;padding:10px 0;font-size:15px;color:var(--fg-mute);
  text-decoration:none;transition:color .18s ease}
.subs a:hover,.subs a:focus-visible{color:var(--fg)}
.sheet .acts{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.sheet .btn{width:100%}
@media(max-width:1080px){.nlinks,.topbar .btn.s{display:none}.burger{display:flex}}
@media(min-width:1081px){.sheet{display:none!important}}
/* A nav CTA must never be squeezed by flex. Without flex:none the bar simply
   compressed it and the label was cut mid-word: at 390px it rendered 55px wide
   while it needed 90px. Below the width where it genuinely fits, the burger
   sheet carries both CTAs and the hero repeats the primary one immediately
   under the fold, so nothing is lost. */
.topbar .btn{flex:none;white-space:nowrap}
/* Measured, not guessed: at 390px the bar needed 410px to hold logo + CTA +
   burger, so the CTA was being squeezed from 90px to 55px and the label cut
   mid-word. It fits from about 420px up; 480 leaves margin. Below that the
   burger sheet carries BOTH CTAs and the hero repeats the primary one right
   under the fold, so nothing is lost. */
@media(max-width:480px){.topbar .btn.p{display:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:90;background:var(--coral);color:#fff;
  padding:12px 20px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ============================== BUTTONS =================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;
  border-radius:100px;font-family:var(--f);font-size:15px;font-weight:700;line-height:1.15;
  white-space:nowrap;text-decoration:none;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn.p{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(231,96,62,.28)}
.btn.p:hover{box-shadow:0 12px 26px rgba(231,96,62,.34)}
.btn.s{border-color:var(--line);color:var(--fg)}
.dark .btn.s{border-color:rgba(255,255,255,.24)}
.btn.p::after{content:"";position:absolute;top:0;bottom:0;width:38%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform:translateX(-160%);animation:scan 5s ease-in-out infinite}
@keyframes scan{0%,66%{transform:translateX(-160%)}100%{transform:translateX(320%)}}
.btn.lg{padding:17px 34px;font-size:16px}

/* ================================ HERO ====================================
   Dark, so the product screen and the apertures keep their contrast, and so
   "never a light hero" survives the palette flip. Two containers: the product
   screen on the left, and one clip becoming an output on the right. The three
   pills switch the output.
   ======================================================================== */
header{padding:80px 0 52px;position:relative;overflow:hidden;background:var(--bg);color:var(--fg)}
header .wrap{max-width:1360px}
header:focus{outline:0}
header:before{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(900px 480px at 20% 12%,rgba(34,227,255,.11),transparent 62%),
  radial-gradient(900px 480px at 82% 28%,rgba(231,96,62,.11),transparent 62%)}
.hh{text-align:center;max-width:900px;margin:0 auto}
/* THE HERO INTRO, in the order the eye should read it:
   the headline writes itself, the pills arrive, the two screens land left then
   right, and the sign-off writes last. Word by word, opacity and transform only. */
.hword{font-style:normal;display:inline-block;opacity:0;transform:translateY(11px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.7,.25,1)}
.js h1.writing .hword{opacity:0}
h1.written .hword{opacity:1;transform:none}
.hsign{margin:22px auto 0;text-align:center;font-size:calc(var(--h3) + 1px);font-weight:800;
  letter-spacing:-.02em;color:var(--fg);min-height:1.3em}
.hsign i{font-style:normal;display:inline-block;opacity:0;transform:translateY(11px);
  transition:opacity .95s ease,transform .95s cubic-bezier(.22,.7,.25,1)}
.hsign.on i{opacity:1;transform:none}
.hsign i.k{color:var(--cyan)}
/* the two screens land in reading order */
.js .duo .box{opacity:0;transform:translateY(20px);
  transition:opacity .6s cubic-bezier(.22,.7,.25,1),transform .6s cubic-bezier(.22,.7,.25,1)}
.js .duo.lit .box{opacity:1;transform:none}
.js .duo.lit .box:nth-child(1){transition-delay:0s}
.js .duo.lit .box:nth-child(2){transition-delay:.22s}
.js .hpills{opacity:0;transform:translateY(10px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.22,.7,.25,1)}
.js .hpills.lit{opacity:1;transform:none}
.js .hcta{opacity:0;transition:opacity .5s ease}
.js .hcta.lit{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hword,.js .duo .box,.js .hpills,.js .hcta,.hsign i{opacity:1!important;transform:none!important}}
@media(max-width:880px){.hsign{margin-top:20px;font-size:calc(var(--h3) + 1px)}}
/* the three outputs, as controls rather than calls to action */
.hpills{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:26px}
.hpill{padding:10px 20px;border-radius:100px;font-family:var(--f);font-size:13.5px;font-weight:700;
  letter-spacing:.01em;cursor:pointer;background:0;color:var(--fg-soft);
  border:1px solid rgba(255,255,255,.16);transition:color .2s ease,border-color .2s ease,
  background .2s ease,transform .2s ease}
.hpill:hover{color:var(--fg);border-color:rgba(34,227,255,.45);transform:translateY(-2px)}
.hpill[aria-selected="true"]{color:var(--ink0);background:var(--cyan);border-color:var(--cyan)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.hcta{display:flex;justify-content:center;margin-top:26px}
/* Mobile is not desktop stacked. Two containers cannot share a fold with a CTA
   beneath them, so on a phone the ask sits directly under the promise. */
@media(max-width:880px){
  .duo{grid-template-columns:1fr;gap:14px}
  header .wrap{display:flex;flex-direction:column}
  .hh{order:1}
  .hcta{order:2;margin-top:22px}
  .hcta .btn{width:100%}
  .duo{order:3;margin-top:24px}}
.box{border:1px solid rgba(34,227,255,.18);border-radius:14px;overflow:hidden;background:var(--ink);
  box-shadow:0 26px 66px rgba(0,0,0,.5);aspect-ratio:16/10;position:relative}
@media(max-width:880px){.box{aspect-ratio:16/11}}
.bx-h{height:32px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;
  gap:6px;padding:0 12px;background:rgba(255,255,255,.02)}
.bx-h i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.bx-h span{margin-left:6px;font-size:10px;color:#7E8CA0;letter-spacing:.06em}
.bx-b{position:absolute;top:32px;left:0;right:0;bottom:0;overflow:hidden}
/* contain, not cover. These are UI screenshots: a 7% crop clipped words mid-letter
   and read as broken. The shots' own background is this same near-black, so the
   letterbox is invisible and nothing is cut. */
.shotbox .bx-b{background:#0B1622}
.shotbox img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  object-position:50% 50%;transition:opacity .3s ease}
.shotbox.swap img{opacity:0}

/* LEFT: the product screen, rebuilt as static markup. It is the screen, not
   the running application, so it costs no iframe and no script. */
.scr{display:grid;grid-template-columns:31% 1fr;height:100%;font-size:10px;color:#AEB9C6}
.scr-side{border-right:1px solid rgba(255,255,255,.07);padding:9px 8px;background:rgba(0,0,0,.16);
  display:flex;flex-direction:column;gap:7px;overflow:hidden}
.scr-brand{display:flex;align-items:center;gap:6px;font-weight:800;color:#EEF3F7;font-size:11px}
.scr-brand img{width:14px;height:14px;display:block}
.scr-u{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:8.5px;color:#AEB9C6;
  padding-top:7px;border-top:1px solid rgba(255,255,255,.07)}
.scr-u span{width:15px;height:15px;border-radius:50%;background:rgba(34,227,255,.16);color:var(--cyan);
  display:grid;place-items:center;font-size:6.5px;font-weight:800;flex:none}
.scr-i s.g{background:#3EE248}
.scr-q em{color:var(--cyan);font-style:normal}
.scr-new{border:1px solid rgba(34,227,255,.3);color:var(--cyan);border-radius:5px;padding:4px 6px;
  font-size:8.5px;font-weight:700}
.scr-search{background:rgba(255,255,255,.05);border-radius:5px;padding:4px 6px;font-size:8px;
  color:#6B7A8A}
.scr-h{font-size:7px;letter-spacing:.14em;color:#6B7A8A;font-weight:700;margin-top:2px}
.scr-i{display:flex;align-items:center;gap:5px;font-size:8.5px;padding:1.5px 0;color:#AEB9C6}
.scr-i s{width:4px;height:4px;border-radius:50%;background:var(--cyan);flex:none;
  text-decoration:none;opacity:.85}
.scr-i s.o{background:var(--coral)}
.scr-i em{color:#6B7A8A;font-size:7.5px}
.scr-main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;text-align:center}
.scr-tag{font-size:7px;letter-spacing:.16em;font-weight:800;color:var(--cyan)}
.scr-q{font-size:15px;font-weight:800;color:#EEF3F7;letter-spacing:-.02em;line-height:1.2}
.scr-comp{width:100%;max-width:230px;display:flex;align-items:center;gap:6px;
  border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:6px 7px;
  background:rgba(255,255,255,.04);font-size:8px;color:#6B7A8A}
.scr-comp u{margin-left:auto;width:14px;height:14px;border-radius:5px;background:var(--coral);
  flex:none;text-decoration:none}
.scr-chips{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.scr-chips span{border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:2.5px 7px;
  font-size:7.5px;color:#AEB9C6}
.scr-tip{font-size:7px;color:#5C6A7B}
@media(max-width:600px){.scr-side{display:none}.scr{grid-template-columns:1fr}}

/* ============================== S2 VIDEO ================================== */
.vfig{margin:26px auto 0;max-width:940px;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  position:relative;aspect-ratio:16/9;cursor:pointer;background:#0d1520;
  transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.vfig:hover{transform:translateY(-3px)}
.vfig video,.vfig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The poster attribute only survives until readyState rises; after that the browser
   paints frame 0, which on this cut is black. A real poster layer keeps the welding
   cover on screen until the clip is genuinely playing. */
.vposter{z-index:1;transition:opacity .45s ease}
.vfig.playing .vposter{opacity:0}
.vfig .ov{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(11,22,34,.72));
  display:flex;align-items:flex-end;padding:26px}
.vfig .pl{width:62px;height:62px;border-radius:50%;background:var(--coral);display:grid;
  place-items:center;flex:none;animation:pulse 3s ease-out infinite;
  transition:transform .3s cubic-bezier(.22,.7,.25,1)}
.vfig:hover .pl{transform:scale(1.08)}
.vfig .pl:after{content:"";border-left:18px solid #fff;border-top:11px solid transparent;
  border-bottom:11px solid transparent;margin-left:5px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(231,96,62,.45)}100%{box-shadow:0 0 0 26px rgba(231,96,62,0)}}
.vfig .tx{margin-left:18px;color:#EEF3F7}
.vfig .tx b{display:block;font-size:16px;font-weight:700}
.modal{position:fixed;inset:0;z-index:100;background:rgba(6,12,19,.94);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:30px}
.modal.on{display:flex}
.modal video{width:min(1100px,100%);border-radius:12px;outline:0}
.modal .x{position:absolute;top:22px;right:26px;font-size:30px;color:#AEB9C6;cursor:pointer;
  background:0;border:0;line-height:1}

/* =============================== GENERIC ================================== */
.head{text-align:center}
.head h2{max-width:24ch;margin:0 auto}
.head .lead{margin:16px auto 0;max-width:56ch}
/* A section signature: two apertures on a hairline, the mark's own gesture, sitting
   BELOW the heading block so it can never read as an eyebrow. (A3) */
.sig{display:flex;align-items:center;justify-content:center;gap:0;margin:26px auto 0;width:132px}
.sig s{width:9px;height:9px;border-radius:22%;transform:rotate(45deg);flex:none;
  text-decoration:none}
.sig s.a{background:var(--cyan)}
.sig s.b{background:var(--coral)}
.sig u{flex:1;height:1px;background:var(--line);text-decoration:none;position:relative;
  overflow:hidden}
.sig u:after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:2px;
  background:var(--accent);opacity:0;animation:sigrun 6s linear infinite}
.rv.in .sig u:after,.head.in .sig u:after{opacity:1}
@keyframes sigrun{0%{left:-8%;opacity:0}12%{opacity:.85}88%{opacity:.85}100%{left:104%;opacity:0}}

/* ====================== DELIVERABLES, from V13 ============================
   Name and output only. No body copy. Hover switches on a pointer, tap
   switches on touch, and the mobile list is a scrolling rail rather than the
   cramped column V13 shipped.
   ======================================================================== */
.prod{display:grid;grid-template-columns:.78fr 1.22fr;gap:32px;align-items:start;margin-top:34px}
@media(max-width:940px){.prod{grid-template-columns:1fr;gap:20px}}
.plist{display:flex;flex-direction:column;gap:6px}
.pitem{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  font-family:var(--f);font-size:17.5px;font-weight:700;color:var(--fg-soft);background:0;
  border:1px solid transparent;border-radius:12px;padding:15px 16px;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.pitem s{width:9px;height:9px;border-radius:22%;background:var(--line);flex:none;
  transform:rotate(45deg);text-decoration:none;transition:background .22s ease,transform .22s ease}
.pitem:hover{color:var(--fg);background:var(--card-2)}
.pitem[aria-selected="true"]{background:var(--card);color:var(--fg);border-color:var(--line);
  box-shadow:var(--shadow);transform:translateX(4px)}
.pitem[aria-selected="true"] s{background:var(--coral);transform:rotate(45deg) scale(1.2)}
@media(max-width:940px){
  .plist{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .plist::-webkit-scrollbar{display:none}
  .pitem{white-space:nowrap;font-size:15px;padding:11px 15px;border-color:var(--line);
    border-radius:100px}
  .pitem[aria-selected="true"]{transform:none}
  .pitem s{display:none}}
.pstage{position:relative;border-radius:16px;overflow:hidden;background:var(--ink);
  border:1px solid rgba(34,227,255,.16);box-shadow:0 26px 60px rgba(11,22,34,.18);
  display:flex;flex-direction:column}
.stage-bar{display:flex;align-items:center;gap:9px;height:34px;flex:none;padding:0 13px;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:9.5px;letter-spacing:.13em;
  font-weight:800;color:#AEB9C6;background:rgba(255,255,255,.02)}
.stage-bar .sd{width:7px;height:7px;border-radius:22%;background:var(--cyan);transform:rotate(45deg)}
.stage-bar .src{margin-left:auto;color:#6B7A8A;letter-spacing:.1em}
/* The frame takes each screenshot's own proportion, so nothing is letterboxed and
   nothing is cropped. aspect-ratio is animatable, so switching eases rather than jumps. */
/* aspect-ratio is set directly from the image by JS. Routing it through a
   custom property does not re-resolve reliably once a transition is attached. */
/* No transition on aspect-ratio: Chrome holds the from-value and the inline value
   never lands. The image cross-fade covers the resize instead. */
.stage-frame{position:relative;width:100%;aspect-ratio:1.52;overflow:hidden;background:#0B1622}
.stage-frame img{width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;
  transition:opacity .36s ease}
.pstage.swap .stage-frame img{opacity:0}

/* ========================= COMPARISON TABLE ===============================
   Industry terms in the row labels, the two methods named as methods. Each
   cell holds one short line at rest and opens a second on hover or focus.
   ======================================================================== */
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:32px;font-size:15px}
th,td{text-align:left;padding:17px 20px;vertical-align:top}
th{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-mute);
  font-weight:800;padding-bottom:13px}
td{box-shadow:0 -1px 0 var(--line)}
td:first-child{font-weight:700;width:23%}
tbody tr:hover td:first-child{color:var(--coral-d)}
th.mv{color:#fff;background:var(--coral-d);border-radius:12px 12px 0 0}
td.mv{font-weight:600;background:var(--card);
  box-shadow:0 -1px 0 rgba(231,96,62,.16),0 0 0 1px rgba(231,96,62,.16)}
tr:last-child td.mv{border-radius:0 0 12px 12px}
tbody tr:hover td.mv{background:#fffaf8}
td:nth-child(2){color:var(--fg-mute)}
.mline{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .3s cubic-bezier(.22,.7,.25,1),opacity .26s ease}
.mline span{overflow:hidden;display:block;font-size:12.5px;line-height:1.45;padding-top:0}
tbody tr:hover .mline,tbody tr:focus-within .mline{grid-template-rows:1fr;opacity:1}
tbody tr:hover .mline span,tbody tr:focus-within .mline span{padding-top:7px}
@media(max-width:760px){
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{display:none}
  tbody tr{margin-bottom:16px;border-radius:14px;overflow:hidden;background:var(--card-2)}
  td{box-shadow:none;padding:12px 16px}
  td:first-child{width:auto;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--fg-mute);padding-bottom:2px}
  td:nth-child(2):before{content:"Conventional · ";font-weight:700;color:var(--fg-mute)}
  td.mv:before{content:"Manvis · ";font-weight:800;color:var(--coral-d)}
  td.mv{border-radius:0}
  .mline{grid-template-rows:1fr;opacity:1}.mline span{padding-top:6px}}

/* ============================== ROLES =====================================
   The with-Manvis line at rest; the conventional line opens on hover, focus,
   or tap. On touch both lines are shown, since there is no hover there.
   ======================================================================== */
.roles{list-style:none;margin:34px auto 0;padding:0;max-width:960px}
.roles li+li a{box-shadow:0 -1px 0 var(--line-soft)}
.roles a{display:grid;grid-template-columns:38px minmax(0,250px) 1fr 22px;gap:22px;
  align-items:start;padding:20px;border-radius:13px;text-decoration:none;color:inherit;
  position:relative;transition:background .24s ease,transform .24s ease,box-shadow .24s ease}
.roles a:hover{background:var(--card);transform:translateX(5px);box-shadow:var(--shadow)}
.roles em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.1em;color:#9AA8B6;
  padding-top:2px;transition:color .24s ease}
.roles a:hover em{color:var(--coral-d)}
.roles b{font-size:17px;font-weight:700;padding-top:1px}
.rstate{min-width:0}
.rtxt{display:block;font-size:15px;color:var(--fg-soft);line-height:1.5}
/* context, not a comparison. One line at rest, the detail opens underneath. */
.rmoreline{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .32s cubic-bezier(.22,.7,.25,1),opacity .26s ease}
.rmoreline>span{overflow:hidden;display:block;font-size:13.5px;line-height:1.5;
  color:var(--fg-mute);padding-top:0;transition:padding-top .32s ease}
.roles a:hover .rmoreline,.roles a:focus-visible .rmoreline{grid-template-rows:1fr;opacity:1}
.roles a:hover .rmoreline>span,.roles a:focus-visible .rmoreline>span{padding-top:8px}
.roles a>i{width:9px;height:9px;border-radius:22%;background:var(--coral);justify-self:end;
  opacity:0;transform:rotate(45deg) translateX(-7px);margin-top:5px;
  transition:opacity .24s ease,transform .24s ease}
.roles a:hover>i{opacity:1;transform:rotate(45deg) translateX(0)}
@media(hover:none){.rmoreline{grid-template-rows:1fr;opacity:1}.rmoreline>span{padding-top:8px}}
@media(max-width:720px){.roles a{grid-template-columns:32px 1fr;gap:6px 16px}
  .rstate{grid-column:2}.roles a>i{display:none}}
.rmore{text-align:center;margin-top:22px}
.rmore a{display:inline-flex;align-items:center;gap:11px;font-size:15.5px;font-weight:700;
  color:var(--coral-d);text-decoration:none}
.rmore a i{width:9px;height:9px;border-radius:22%;background:var(--coral);transform:rotate(45deg);
  transition:transform .25s ease}
.rmore a:hover i{transform:rotate(45deg) translateX(3px) scale(1.15)}

/* =============================== THE WEEK =================================
   A flow, not a pie. Studying the work on the left in cyan, the overhead
   squeezed in the middle, improvement on the right in coral. Straight off the
   logomark: the cyan aperture receives, the coral aperture releases.
   ======================================================================== */
.tmap{margin-top:36px}
.tm-h,.tm-ticks{display:flex;justify-content:space-between;font-size:10px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute)}
.tm-h{margin-bottom:12px}.tm-ticks{margin-top:10px;letter-spacing:.06em;font-weight:700}
.tm-band{display:flex;height:62px;border-radius:11px;overflow:hidden;position:relative;
  background:rgba(255,255,255,.04);border:1px solid var(--line)}
@media(max-width:880px){.tm-band{height:46px}}
.tm-seg{position:relative;transform:scaleX(0);transform-origin:left;
  transition:transform 1.15s cubic-bezier(.22,.7,.25,1)}
.tmap.in .tm-seg{transform:none}
.tm-seg.s1{background:linear-gradient(90deg,rgba(34,227,255,.92),rgba(34,227,255,.5));
  transition-delay:.08s}
.tm-seg.s2{background:rgba(255,255,255,.085);transition-delay:.4s}
.tm-seg.s3{background:linear-gradient(90deg,var(--coral-d),var(--coral));transition-delay:.68s}
.tm-scrub{position:absolute;top:0;bottom:0;width:1.5px;background:#fff;opacity:0;
  box-shadow:0 0 12px rgba(255,255,255,.8)}
.tmap.in .tm-scrub{animation:tmread 3.4s cubic-bezier(.4,0,.2,1) .2s 1 forwards}
@keyframes tmread{0%{left:0;opacity:0}8%{opacity:.85}92%{opacity:.85}100%{left:100%;opacity:0}}
.tm-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px}
@media(max-width:760px){.tm-keys{grid-template-columns:1fr}}
.tk{padding:19px;border-radius:13px;background:var(--card-2);border:1px solid var(--line);
  transition:transform .22s ease}
.tk:hover{transform:translateY(-3px)}
.tk-t{display:flex;flex-direction:column;gap:5px;font-size:14px;font-weight:800;margin-bottom:9px}
.tk-t b{font-size:23px;font-weight:800;letter-spacing:-.01em;color:var(--fg-soft);
  font-variant-numeric:tabular-nums}
.tk p{font-size:13.5px;color:var(--fg-soft);line-height:1.5}
.tk.k1{border-color:rgba(34,227,255,.36)}.tk.k1 .tk-t b{color:var(--cyan)}
.tk.k3{border-color:rgba(231,96,62,.36);background:rgba(231,96,62,.06)}
.tk.k3 .tk-t b{color:var(--coral)}
.tm-own{margin:30px auto 0;text-align:center;font-size:16.5px;color:var(--fg-soft);max-width:66ch;
  line-height:1.55}
.tm-own em{font-weight:800;color:var(--fg)}

/* =============================== TRUST ==================================== */
/* The overview lens. Framed by the brand's bracketed viewport, cropped wide so the
   station reads and the person does not. */
.tshot{margin:30px auto 0;max-width:800px;position:relative;border-radius:18px;overflow:hidden;
  aspect-ratio:21/9;box-shadow:0 26px 60px rgba(11,22,34,.22)}
.tshot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.tshot-b{position:absolute;inset:14px;border-radius:8px;pointer-events:none;opacity:0;
  transform:scale(1.06);
  transition:opacity .5s ease .25s,transform .7s cubic-bezier(.22,.7,.25,1) .25s;
  background:
    linear-gradient(var(--coral),var(--coral)) left top/22px 2px no-repeat,
    linear-gradient(var(--coral),var(--coral)) left top/2px 22px no-repeat,
    linear-gradient(var(--coral),var(--coral)) right top/22px 2px no-repeat,
    linear-gradient(var(--coral),var(--coral)) right top/2px 22px no-repeat,
    linear-gradient(var(--coral),var(--coral)) left bottom/22px 2px no-repeat,
    linear-gradient(var(--coral),var(--coral)) left bottom/2px 22px no-repeat,
    linear-gradient(var(--coral),var(--coral)) right bottom/22px 2px no-repeat,
    linear-gradient(var(--coral),var(--coral)) right bottom/2px 22px no-repeat}
.tshot.in .tshot-b{opacity:.9;transform:none}
.tshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 24px 18px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#EEF3F7;
  text-align:center;background:linear-gradient(180deg,transparent,rgba(11,22,34,.75))}
@media(max-width:880px){.tshot{aspect-ratio:16/10;margin-top:32px}.tshot-b{inset:10px}}
/* ============================ PARTNER STRIP ===============================
   One row, running the full width of the section with no surface of its own,
   so it reads as part of the page rather than as a card sitting on it.

   TWO CELLS, and the split is the point. Manvis is BUILT BY SME Empowerment.
   The other three are companies whose people looked at the work, so the label
   says experts FROM them. It is set small and quiet on purpose: the marks carry
   the authority, the wording stays exact.

   Every mark is its owner's own artwork in its own colours. Nothing here is
   recoloured to suit our palette. See section 4 of the workbench for sources.

   Marks are sized by  height = K x e / ratio^0.42.  Equal rendered area alone
   makes a square mark tower over a 7:1 wordmark; the 0.42 exponent sits between
   equal area and equal width. --p is the ratio term, fixed by the artwork. --e
   is the correction made by looking. --K scales the whole row and is the only
   number to turn.
   ======================================================================== */
.pstrip{margin-top:54px}
.mq{--K:77.5;--gap:118px;--in:58px;--speed:44;--shift:-50%;--dur:40s;--fade:12%;
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
    #000 calc(100% - var(--fade)),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade),
    #000 calc(100% - var(--fade)),transparent 100%)}
.mq__track{display:flex;width:max-content;
  animation:mq-drift var(--dur) linear infinite;will-change:transform}
@keyframes mq-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(var(--shift),0,0)}}
/* The row stops under the cursor and under keyboard focus, so a reader can hold
   it still and look. That is the only interaction on the strip. */
.mq:hover .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
/* Each set carries a leading gap equal to the inter-cell gap, so two sets tile
   exactly and a shift of one set width lands with no seam. */
.mq__set{flex:none;display:flex;align-items:center;gap:var(--gap);
  padding-left:var(--gap);margin:0;list-style:none}
.mq__cell{flex:none;display:flex;flex-direction:column;align-items:center;gap:17px}
.mq__lab{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#8FA0B0;white-space:nowrap}
.mq__row{display:flex;align-items:center;gap:var(--in);height:calc(var(--K) * 0.93px)}
.mq__mark{--e:1;display:block;width:auto;height:calc(var(--K) * var(--e) * 1px / var(--p))}
.mk-sme{--p:1.602;--e:1.06}   /* ratio 3.070, the lightest wordmark in the row */
.mk-acet{--p:1.847;--e:.98}   /* ratio 4.306 */
.mk-nis{--p:2.278;--e:.90}    /* ratio 7.097 */
.mk-iso{--p:1.142;--e:1.06}   /* ratio 1.372 */
@media(max-width:880px){.mq{--K:62;--gap:78px;--in:46px}.pstrip{margin-top:44px}}
@media(max-width:560px){.mq{--K:53;--gap:60px;--in:36px;--fade:8%}}

/* ========================== PRICING AND FORM ============================== */
.pm{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}
@media(max-width:760px){.pm{grid-template-columns:1fr}}
.pm div{border:1px solid var(--line);border-radius:14px;padding:24px;text-align:center;
  background:var(--card-2);transition:transform .22s ease}
.pm div:hover{transform:translateY(-3px)}
.pm b{display:block;font-size:19px;font-weight:800;margin-bottom:5px}
.pm span{font-size:13.5px;color:var(--fg-mute)}
.talkblock{text-align:center}
.talkblock .lead{margin-left:auto;margin-right:auto}
form{margin:38px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:700px;
  text-align:left}
@media(max-width:880px){form{grid-template-columns:1fr}}
form .full{grid-column:1/-1}
form .full:last-child{display:flex;justify-content:center;margin-top:6px}
@media(max-width:880px){form .full:last-child .btn{width:100%}}
input,textarea,select{width:100%;padding:14px 16px;border-radius:10px;background:var(--card);
  border:1px solid var(--line);color:var(--fg);font-family:var(--f);font-size:15px}
input::placeholder,textarea::placeholder{color:var(--fg-mute)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--coral);
  box-shadow:0 0 0 3px rgba(231,96,62,.14)}
textarea{min-height:104px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fstat{grid-column:1/-1;font-size:15px;line-height:1.5;min-height:1px}
.fstat.ok{color:var(--coral-d)}.fstat.err{color:#B3341A}
button[disabled]{opacity:.55;cursor:default}button[disabled]:hover{transform:none}
.signoff{margin-top:42px;font-size:calc(var(--h3) + 4px);font-weight:800;letter-spacing:-.02em;
  color:var(--fg);text-align:center;min-height:1.3em}
.signoff i{font-style:normal;display:inline-block;opacity:0;transform:translateY(12px);
  transition:opacity .95s ease,transform .95s cubic-bezier(.22,.7,.25,1)}
.signoff.in i{opacity:1;transform:none}
.signoff i.k{color:var(--coral)}
@media(prefers-reduced-motion:reduce){.signoff i{opacity:1!important;transform:none!important}}

/* =============================== FOOTER =================================== */
footer{border-top:1px solid var(--line);padding:62px 0 34px;color:var(--fg-mute);font-size:13.5px;
  background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:40px}
@media(max-width:1080px){.fgrid{grid-template-columns:1fr 1fr 1fr;gap:34px}}
@media(max-width:720px){.fgrid{grid-template-columns:1fr 1fr;gap:30px}}
@media(max-width:460px){.fgrid{grid-template-columns:1fr}}
.fbrand p{margin:18px 0 0;max-width:30ch;font-size:14px;line-height:1.55;color:var(--fg-soft)}
/* The mark inside is LinkedIn's own artwork in its own blue, so the tile holds
   no colour of its own and nothing about the logo changes on hover. */
.fsoc{display:inline-grid;place-items:center;width:38px;height:38px;margin-top:20px;
  border-radius:10px;border:1px solid var(--line);
  transition:border-color .2s ease,transform .2s ease}
.fsoc:hover{border-color:rgba(10,102,194,.45);transform:translateY(-2px)}
.fcol{display:flex;flex-direction:column;gap:11px}
.fh{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
  margin-bottom:3px}
.fcol a{color:var(--fg-mute);text-decoration:none;transition:color .18s ease}
.fcol a:hover{color:var(--fg)}
.fcol a.soon{color:#93A1AF}
.fcol a.soon:hover{color:var(--fg-soft)}
.fbase{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:52px;padding-top:24px;
  border-top:1px solid var(--line-soft);font-size:12.5px}
.fbase .sp{flex:1}
.fdot{width:3px;height:3px;border-radius:50%;background:var(--line);display:inline-block}
@media(max-width:720px){.fdot{display:none}.fbase{gap:8px}.fbase .sp{flex-basis:100%;height:0}}

/* =============================== MOTION ===================================
   Scoped to .js so the page renders whole with scripting off. The class is set
   in <head>, before first paint, so there is no flash.
   ======================================================================== */
.js .rv{opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .62s cubic-bezier(.22,.7,.25,1),transform .62s cubic-bezier(.22,.7,.25,1)}
.js .rv.in{opacity:1;transform:none}
.js .stagger>*{opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .55s cubic-bezier(.22,.7,.25,1),transform .55s cubic-bezier(.22,.7,.25,1)}
.js .stagger.in>*{opacity:1;transform:none}
.js .stagger.in>*:nth-child(1){transition-delay:.04s}
.js .stagger.in>*:nth-child(2){transition-delay:.11s}
.js .stagger.in>*:nth-child(3){transition-delay:.18s}
.js .stagger.in>*:nth-child(4){transition-delay:.25s}
.js .stagger.in>*:nth-child(5){transition-delay:.32s}
.js .stagger.in>*:nth-child(6){transition-delay:.39s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .js .rv,.rv,.js .stagger>*{opacity:1;transform:none}
  .tm-seg{transform:scaleX(1)}.stage-frame img,.shotbox img{transition:none}
  /* The strip stops on the * rule above, so all that is left is to let the row
     lay itself out static and centred instead of running off the right edge.
     flex:none is what keeps it from wrapping while it moves, so it is released. */
  .mq{-webkit-mask-image:none;mask-image:none}
  .mq__track{width:100%;will-change:auto}
  .mq__set{flex:1 1 auto;width:100%;flex-wrap:wrap;justify-content:center;
    padding-left:0;row-gap:34px}
  .mq__set[aria-hidden="true"]{display:none}
  .mq__row{flex-wrap:wrap;justify-content:center;height:auto;row-gap:22px}}


/* ==========================================================================
   SUBPAGES  ·  the deliverable pages under "What you get"
   Added 2026-08-21. EVERY SELECTOR BELOW IS NEW. Nothing above is touched, so
   the homepage cannot be affected by anything in this block.

   One pattern, six pages. The variation lives in the specimen and in the words,
   not in six different skeletons: six bespoke layouts is six things to keep
   responsive, six to review, and six that can break, and a reader looking for
   whether your time study is trustworthy never sees the difference.

   Shapes deliberately NOT reused from the homepage: no tab-and-stage, no card
   grid, no comparison table. The prose here hangs off a label, which is a shape
   that appears nowhere else on the site.
   ========================================================================== */

/* The top bar is fixed at var(--nav), so the first surface on a subpage has to
   start below it. Derived from --nav rather than typed as a number, so changing
   the bar height cannot leave this behind. */
.pagehead{padding-top:calc(var(--nav) + 44px);padding-bottom:58px}
@media(max-width:880px){.pagehead{padding-top:calc(var(--nav) + 30px);padding-bottom:44px}}

/* the breadcrumb back to the parent section. Small, quiet, and the only place
   a subpage names where it sits. */
.crumb{margin:0 0 18px;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-mute)}
.crumb a{color:inherit;text-decoration:none;transition:color .18s ease}
.crumb a:hover{color:var(--accent)}
.crumb i{font-style:normal;opacity:.5;margin:0 8px}

/* THE SPECIMEN. It sits OUTSIDE .wrap so it can run wider than the text column
   (N12-CSS: outside .wrap, never width:100vw). A CI engineer has to be able to
   read the screenshot, so this is the widest element on the site. */
.spec{margin:0;padding:0 clamp(16px,4vw,40px);position:relative;z-index:3}
/* display:block is load-bearing. This is a <span>, so it computes inline by
   default and max-width, margin:auto and overflow:hidden all stop applying. */
.spec__frame{display:block;max-width:1120px;margin:0 auto;border-radius:18px;overflow:hidden;
  background:#0B1622;border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.spec__frame img{display:block;width:100%;height:auto}
/* each frame carries its own max-width inline, = min(1400, the image's own
   width), so nothing on this site is ever upscaled. */
.spec figcaption{max-width:1400px;margin:18px auto 0;text-align:center;
  font-size:13.5px;line-height:1.6;color:var(--fg-mute)}
@media(max-width:880px){.spec__frame{border-radius:14px}}

/* THE READ. A hanging label, then the prose. Used nowhere else on the site. */
.hang{margin:0;max-width:1000px}
.hang>div{display:grid;grid-template-columns:216px 1fr;gap:0 40px;
  padding:30px 0;border-top:1px solid var(--line-soft)}
.hang>div:first-child{border-top:0;padding-top:0}
.hang dt{margin:0;font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--fg-mute);padding-top:5px}
.hang dd{margin:0;font-size:16.5px;line-height:1.72;color:var(--fg-soft)}
.hang dd strong{color:var(--fg);font-weight:700}
/* the global p{margin:0} means paragraphs inside one dd would otherwise butt
   together with no gap. This is the rule that actually fires; dd+dd never did,
   because the two paragraphs live inside a single dd. */
.hang dd p+p{margin-top:14px}
.hang ul{margin:12px 0 0;padding-left:19px}
.hang li{margin-bottom:7px}
@media(max-width:760px){
  .hang>div{grid-template-columns:1fr;gap:11px 0;padding:24px 0}
  .hang dt{padding-top:0}
  .hang dd{font-size:15.5px}
}

/* the closing block on a subpage. One line and one button, nothing else. */
.pclose{text-align:center;max-width:64ch;margin:0 auto}
.pclose p{font-size:var(--lead);font-weight:300;color:var(--fg-soft);line-height:1.55;margin:0}
.pclose .btn{margin-top:26px}

/* the sibling rail: the other five deliverables, so no page is a dead end and
   every page links to every other one. Search reads this as depth; a reader
   reads it as "there is more of this". */
.sibs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:10px;justify-content:center;max-width:900px;margin:0 auto}
.sibs a{display:block;padding:11px 17px;border:1px solid var(--line);border-radius:11px;
  font-size:14px;font-weight:600;color:var(--fg-soft);text-decoration:none;background:var(--card-2);
  transition:color .18s ease,border-color .18s ease,transform .18s ease}
.sibs a:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-2px)}