/* Sixty Seconds, Home v3. Brand v1.2, laid out on orizon.one's measured structure (see ORIZON-SPEC.md).
   Rules this file keeps: centred, one container (max 1248 content), 96px section rhythm, one background object (the wave field, hero only),
   emerald on action / watched / booked only, nothing moves unless the page has ?motion. */

@font-face{font-family:Cabinet;src:url(../assets/fonts/CabinetGrotesk-800.woff2?v=118b012bc2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/Inter-Regular.woff2?v=6097a7ae18) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/Inter-SemiBold.woff2?v=457d6925c7) format('woff2');font-weight:500 600;font-display:swap}
@font-face{font-family:Inter;src:url(../assets/fonts/Inter-Bold.woff2?v=b077ab6e2e) format('woff2');font-weight:700;font-display:swap}

:root{
  /* space-separated triples: the wave module reads these off :root */
  --bg:6 10 20; --ink:245 247 251; --body:200 210 226; --muted:143 156 180; --faint:110 125 155;
  --line:38 50 70; --line-br:70 86 112; --s1:16 24 40; --s2:22 33 53; --s3:30 44 68;
  --emerald:0 228 161;
  --a1:47 184 199; --a2:67 165 208; --a3:88 145 218; --a4:108 126 227; --a5:128 107 236; --a6:149 87 246; --a7:169 68 255;
  --ease:cubic-bezier(.16,1,.3,1);
  --sec:96px;                         /* Orizon py-24 */
  --head-gap:64px;                    /* Orizon mb-16 under every section head */
  --r1:18px; --r2:28px; --r3:40px;
  --spec:linear-gradient(100deg,#2FB8C7,#6C7EE3 52%,#A944FF);
  --nav:80px;                         /* Orizon header */
}
*{box-sizing:border-box}
html{background:rgb(var(--bg));scroll-behavior:auto;overflow-x:clip;scroll-padding-top:var(--nav)}
body{margin:0;background:rgb(var(--bg));color:rgb(var(--body));font:400 16px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg,canvas{display:block;max-width:100%}
picture{display:contents}picture>source{display:none}picture>img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:rgb(var(--s2));color:rgb(var(--ink));padding:10px 16px;border-radius:12px;border:1px solid rgb(var(--line-br))}
.skip:focus{top:12px}
:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:3px;border-radius:6px}

/* ---------- type scale (Orizon: hero 67/1.04, h2 48/1, sub 18/28, line 32/1.3, body 16/24, small 14/20) ---------- */
h1,h2,h3{font-family:Cabinet,system-ui,sans-serif;font-weight:800;letter-spacing:-.03em;color:rgb(var(--ink));text-wrap:balance}
h1{font-size:clamp(36px,4.667vw,80px);line-height:1.04}
h2{font-size:clamp(32px,3.334vw,52px);line-height:1.06}
h2.line{text-wrap:balance;text-align:center;font-size:clamp(22px,2.223vw,34px);line-height:1.3;letter-spacing:-.02em;max-width:560px;margin:0 auto}
h3{font-size:clamp(19px,1.67vw,24px);letter-spacing:-.015em;line-height:1.18}
.grad{background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;display:inline;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.cap{font-size:13px;line-height:1.5;color:rgb(var(--muted))}
/* eyebrow: Inter 700, tracked caps, the one licensed caps style; Orizon's kicker, flanked by hairlines */
.eyebrow{display:flex;justify-content:center;align-items:center;gap:16px;font:700 12px/1.4 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--muted))}
.eyebrow::before,.eyebrow::after{content:"";height:1px;width:clamp(24px,3vw,44px);background:linear-gradient(90deg,transparent,rgb(var(--a2)/.7))}
.eyebrow::after{background:linear-gradient(270deg,transparent,rgb(var(--a6)/.7))}
.eyebrow span{text-align:center}

/* ---------- buttons: emerald is the action colour ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;
  background:rgb(var(--emerald));color:#04231a;font:700 16px/1 Inter,system-ui,sans-serif;white-space:nowrap;text-decoration:none;
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.985)}
.btn.ghost{background:rgb(var(--s1)/.7);color:rgb(var(--ink));border:1px solid rgb(var(--line-br))}
.btn.sm{height:40px;padding:0 18px;font-size:14px}
.btn.lg{height:56px;padding:0 34px;font-size:17px}

/* ---------- layout: one container. 1312 outer, 32 gutter => 1248 content (Orizon max-w-7xl + px-4, with room) ---------- */
.wrap{width:100%;max-width:1312px;margin-inline:auto;padding-inline:clamp(20px,2.5vw,32px)}
.sec{position:relative;padding-block:var(--sec)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:var(--head-gap)}
.sec-head p:not(.eyebrow){font-size:clamp(16px,1.25vw,18px);line-height:1.56;color:rgb(var(--muted));max-width:768px}
.sec-head h2{max-width:900px}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--nav)}
.nav::before{content:"";position:absolute;inset:0;background:rgb(var(--bg)/.74);opacity:0;transition:opacity .35s var(--ease);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgb(var(--line)/.7)}
.nav.solid::before{opacity:1}
@media (max-width:760px){.nav::before{background:rgb(var(--bg))}}   /* SSWEB-5352: on phones the bar is solid, so text scrolling under it never ghosts through and reads as a shadow over titles */
.nav-in{position:relative;height:100%;max-width:1312px;margin-inline:auto;padding-inline:clamp(20px,2.5vw,32px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.nav .brand img{height:32px;width:auto}
/* the logo (32px) and the small header button (40px) get an invisible 44px tall tap area; nothing drawn changes */
.nav .brand,.nav .btn.sm{position:relative}
.nav .brand::after,.nav .btn.sm::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;margin-top:-22px}
.nav ul{display:flex;gap:32px;font-size:14.5px;font-weight:500}
.nav ul a{text-decoration:none;color:rgb(var(--body));transition:color .25s var(--ease)}
.nav ul a:hover{color:rgb(var(--ink))}
.nav .acts{display:flex;gap:10px;align-items:center;justify-content:flex-end}

/* ================= 01 HERO =================
   Orizon: one 1.42x-viewport object centred at (50%, 49%), a dark scrim behind the headline, a vignette, text stack centred at 50%.
   Ours: the wave field, same size and position, soft-edged by a radial mask. Not repeated anywhere else on the page. */
.hero{position:relative;min-height:max(100svh,720px);display:flex;align-items:center;justify-content:center;overflow:hidden;isolation:isolate;padding:calc(var(--nav) + 24px) 0 72px}
.hero-field{position:absolute;inset:0;z-index:-2;pointer-events:none}
.hero-lift{position:absolute;left:50%;top:48%;width:min(1100px,92vw);height:min(760px,92vw);transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgb(34 52 98/.55),rgb(20 30 62/.26) 55%,rgb(var(--bg)/0))}
.hero-wave{position:absolute;left:50%;top:48%;width:min(1620px,118vw);height:min(1080px,130svh);transform:translate(-50%,-50%);
  -webkit-mask-image:radial-gradient(closest-side,#000 40%,rgb(0 0 0/.55) 70%,transparent 100%);mask-image:radial-gradient(closest-side,#000 40%,rgb(0 0 0/.55) 70%,transparent 100%)}
#ssbg{width:100%;height:100%;pointer-events:none}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:180px;z-index:-1;background:linear-gradient(rgb(var(--bg)/0),rgb(var(--bg)));pointer-events:none}
.hero-scrim{position:absolute;left:50%;top:50%;width:min(1100px,100%);height:min(720px,100%);transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--bg)/.88),rgb(var(--bg)/.74) 38%,rgb(var(--bg)/.42) 66%,rgb(var(--bg)/0))}
.hero-stack{width:100%;max-width:1180px;padding-inline:clamp(20px,2.5vw,32px);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-stack .eyebrow{margin-bottom:24px}
.hero-stack h1{max-width:1000px}
.hero-stack h1 .grad{display:block;width:fit-content;margin-inline:auto}
.hero-stack .sub{margin-top:24px;max-width:644px;font-size:clamp(16px,1.223vw,18px);line-height:1.55;color:rgb(var(--muted))}
/* Home hero only (Raph, 26 Oct: the line under the headline was grey and lost over the moving wave): near-white, a touch larger, a soft dark halo */
.hero .hero-stack .sub{font-size:clamp(17px,1.32vw,19px);color:rgb(var(--ink)/.92);text-shadow:0 1px 2px rgb(var(--bg)/.9),0 0 18px rgb(var(--bg)/.85),0 0 36px rgb(var(--bg)/.6)}
.hero .hero-stack .eyebrow{color:rgb(var(--body));text-shadow:0 1px 2px rgb(var(--bg)/.9),0 0 14px rgb(var(--bg)/.8)}
.hero-ctas{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.hero-free{margin-top:16px;font-size:14px;color:rgb(var(--muted))}
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;
  font:600 10.5px/1 Inter,system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--faint))}
.cue i{display:block;width:1px;height:28px;background:linear-gradient(rgb(var(--a2)/.7),transparent)}

/* ================= 02 REEL: centre object, flanking cards (Orizon "ecosystem") ================= */
.reel{padding-top:48px;overflow-x:clip}
.reel .eyebrow{margin-bottom:56px}
.reel-stage{position:relative;height:clamp(240px,34vw,500px);--cw:min(768px,60vw);--sw:min(520px,40vw);--v:min(240px,16.7vw)}
.reel-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(1200px,100%);height:150%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgb(30 46 86/.5),rgb(18 28 54/.2) 55%,rgb(var(--bg)/0))}
.rc{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:16/9;border-radius:var(--r2);overflow:hidden;background:rgb(var(--s1));border:1px solid rgb(var(--line));
  transition:transform .8s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);will-change:transform}
.rc img,.rc video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rc[data-pos="0"]{z-index:3;transform:translate(-50%,-50%);border-color:rgb(var(--line-br));box-shadow:0 30px 80px -30px rgb(0 0 0/.7)}
.rc[data-pos="-1"],.rc[data-pos="1"]{z-index:2;width:var(--sw);border-radius:var(--r1);opacity:.62;filter:saturate(.85) brightness(.85);cursor:pointer}
.rc[data-pos="-1"]{transform:translate(calc(-50% - (var(--cw) / 2 + var(--v) - var(--sw) / 2) * var(--asm,1)),-50%)}
.rc[data-pos="1"]{transform:translate(calc(-50% + (var(--cw) / 2 + var(--v) - var(--sw) / 2) * var(--asm,1)),-50%)}
.reel-stage.asm .rc{transition:none}
.rc[data-pos="far"]{z-index:1;width:var(--sw);opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8)}
.rc .play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:0;cursor:pointer;
  background:rgb(var(--bg)/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.35);transition:transform .3s var(--ease)}
.rc .play::before{content:"";position:absolute;left:30px;top:24px;border-left:20px solid rgb(var(--ink));border-top:12px solid transparent;border-bottom:12px solid transparent}
.rc .play:hover{transform:scale(1.06)}
.rc:not([data-pos="0"]) .play,.rc.playing .play{display:none}
.rc .tag{position:absolute;left:18px;bottom:16px;font:700 11px/1 Inter,system-ui,sans-serif;letter-spacing:.01em;color:rgb(var(--ink));
  background:rgb(var(--bg)/.6);padding:8px 12px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rc:not([data-pos="0"]) .tag{display:none}
.reel-ticks{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 28px;margin-top:48px}
.reel-tick{background:none;border:0;cursor:pointer;padding:10px 2px;position:relative;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:.04em;color:rgb(var(--faint));transition:color .25s var(--ease)}
.reel-tick::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;border-radius:2px;background:var(--spec);transform:scaleX(0);transition:transform .5s var(--ease)}
.reel-tick:hover{color:rgb(var(--body))}
.reel-tick.on{color:rgb(var(--ink))}
.reel-tick.on::after{transform:scaleX(1)}
.reel .line{margin-top:48px}
.reel .cap{margin-top:12px;text-align:center}

/* ================= 03 FOUR STEPS: Orizon "kill chain" stage cards ================= */
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.chain::before{content:"";position:absolute;left:12%;right:12%;top:20px;height:1px;background:linear-gradient(90deg,rgb(var(--a1)/.5),rgb(var(--a7)/.5))}
.chain li{position:relative;border-radius:var(--r1);border:1px solid rgb(var(--line));background:rgb(var(--s1)/.6);padding:72px 24px 28px;text-align:center}
.chain .n{position:absolute;left:50%;top:0;transform:translate(-50%,-1px);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgb(var(--bg));border:1px solid rgb(var(--c));color:rgb(var(--ink));font:800 17px/1 Cabinet,sans-serif;box-shadow:0 0 0 6px rgb(var(--bg)),0 0 24px rgb(var(--c)/.35)}
.chain h3{font-size:clamp(18px,1.5vw,21px);margin-bottom:10px}
.chain p{font-size:14px;line-height:1.55;color:rgb(var(--muted));max-width:26ch;margin-inline:auto}
.chain li{margin-top:21px;padding-top:50px}
.chain .n{top:-21px;transform:translateX(-50%)}

/* ================= UI KIT: one kit for every mock =================
   Glass #101828 / #162135, 1px #263246 lines, Inter 13-14 UI text, real spacing. Built at 1x and shown large: the product is the picture.
   Look matched to the real 60 app (use60): a mono-caps header strip on each card, key/value blocks, an emerald Approve with a check,
   Edit / Reject as quiet ghosts. Emerald is state (watched, booked, done) or action (Approve, Book) and nothing else. */
.ic{width:16px;height:16px;flex:none}
.shot{position:relative;border-radius:var(--r1);overflow:hidden;aspect-ratio:16/9;background:rgb(var(--s1))}
.shot img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgb(var(--bg)/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.35)}
.play::before{content:"";position:absolute;left:26px;top:20px;border-left:18px solid rgb(var(--ink));border-top:12px solid transparent;border-bottom:12px solid transparent}
.tag{font:600 12px/1 Inter,sans-serif;color:rgb(var(--faint));border:1px solid rgb(var(--line));padding:7px 12px;border-radius:999px;white-space:nowrap}
/* Oxide's "Fig." label: a boxed number, then what the picture is */
.fig{display:flex;align-items:center;gap:12px;font:600 11px/1.3 Inter,system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--faint))}
.fig b{font-weight:700;letter-spacing:.14em;color:rgb(var(--body));border:1px solid rgb(var(--line-br));border-radius:6px;padding:6px 9px;white-space:nowrap}
.win{position:relative;margin:0;border-radius:var(--r1);border:1px solid rgb(var(--line-br)/.9);background:rgb(var(--s1));overflow:hidden;
  box-shadow:0 50px 120px -50px rgb(0 0 0/.85),0 0 0 1px rgb(var(--bg)/.5)}
.win-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;height:46px;padding:0 16px;border-bottom:1px solid rgb(var(--line));background:rgb(var(--s2)/.7);font:500 12.5px/1 Inter,sans-serif;color:rgb(var(--muted))}
.dots{display:flex;gap:7px}.dots i{width:10px;height:10px;border-radius:50%;background:rgb(var(--line-br)/.75)}
.win-bar .url{flex:1;max-width:400px;height:28px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;background:rgb(var(--bg)/.6);border:1px solid rgb(var(--line));color:rgb(var(--muted))}
.win-bar .url .ic{width:12px;height:12px}
.win-bar .fig.in{font-size:11px}.win-bar .fig.in span{color:rgb(var(--body))}
.pill{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:999px;font:600 12px/1 Inter,sans-serif;border:1px solid rgb(var(--line-br)/.7);color:rgb(var(--faint));white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.pill .ic{width:12px;height:12px}
.pill.opened{color:rgb(var(--muted));background:rgb(var(--s3)/.55)}
.pill.opened i{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.pill.watched{color:rgb(var(--emerald));border-color:rgb(var(--emerald)/.4);background:rgb(var(--emerald)/.1)}
.pill.booked{color:#04231a;border-color:rgb(var(--emerald));background:rgb(var(--emerald))}
.pill.wait{color:rgb(var(--a3));border-color:rgb(var(--a3)/.45);background:rgb(var(--a3)/.1);font-size:11px;height:24px;padding:0 10px;margin-left:auto;letter-spacing:0;text-transform:none}
.av{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;font:800 13px/1 Cabinet,sans-serif;letter-spacing:.02em;color:rgb(var(--ink));
  background:rgb(var(--c,var(--a4))/.16);border:1px solid rgb(var(--c,var(--a4))/.55);flex:none}
.av.s{width:30px;height:30px;font-size:11px}
.wb{display:block;height:6px;border-radius:6px;background:rgb(var(--line))}
.wb i{display:block;height:100%;border-radius:6px;background:rgb(var(--emerald))}
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:44px;padding:0 20px;border-radius:12px;font:700 14px/1 Inter,sans-serif;white-space:nowrap}
.k-btn.ok{background:rgb(var(--emerald));color:#04231a}
.k-btn.ghost{height:40px;color:rgb(var(--body));border:1px solid rgb(var(--line-br)/.8);background:rgb(var(--s2)/.6);font-weight:600}
.k-btn.wide{width:100%}
/* the prospect poster: what the video looks like before play. One component, used on the page, the approvals and the run */
.poster{--pa:#4cb8ff;position:relative;aspect-ratio:16/9;overflow:hidden;container-type:inline-size;background:radial-gradient(70% 90% at 18% 18%,#17304f,rgb(10 22 40/0) 70%),linear-gradient(180deg,#0d1a2d,#08111e)}
.poster .pb{position:absolute;left:5%;top:9%;font:700 2.1cqw/1 Inter,sans-serif;letter-spacing:.34em;color:#fff}
.poster .pb em{font-style:normal;color:var(--pa)}
.poster .pn{position:absolute;left:0;right:0;top:26%;text-align:center;font:700 24cqw/1 Inter,sans-serif;letter-spacing:-.045em;color:#fff}
.poster .pt{position:absolute;left:0;right:0;top:77%;text-align:center;font:600 3.4cqw/1 Inter,sans-serif;color:#dbe6f2}
.poster .pp{position:absolute;left:50%;top:46%;width:12cqw;height:12cqw;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:#fff;color:#0a1626;box-shadow:0 0 0 1.4cqw rgb(255 255 255/.18)}
.poster .pp .ic{width:5cqw;height:5cqw;margin-left:.6cqw}
.poster .pip{position:absolute;right:4%;bottom:6%;width:11cqw;height:11cqw;border-radius:50%;display:grid;place-items:center;font:800 4.4cqw/1 Cabinet,sans-serif;color:#fff;background:#0b1626;border:.55cqw solid var(--pa);box-shadow:0 0 3cqw color-mix(in srgb,var(--pa) 40%,transparent)}
.poster.t2{--pa:#3dd6c1;background:radial-gradient(70% 90% at 18% 18%,#12403f,rgb(10 22 40/0) 70%),linear-gradient(180deg,#0b1d22,#07131a)}
.poster.t3{--pa:#b58cff;background:radial-gradient(70% 90% at 18% 18%,#2a2158,rgb(10 22 40/0) 70%),linear-gradient(180deg,#120f2b,#0a0919)}
.poster.t4{--pa:#ffb86b;background:radial-gradient(70% 90% at 18% 18%,#3a2a1a,rgb(10 22 40/0) 70%),linear-gradient(180deg,#17120e,#0d0a08)}

/* ================= 04 ONE LIST, TWO SENDS: Zentry's window. The small tilted send is the closed window, the hosted page is the same window opened to full width ================= */
.two{position:relative;padding-top:208px}
.two-bulk{position:absolute;left:-10px;top:0;width:372px;z-index:3;margin:0}
.mailcard{border-radius:14px;background:rgb(18 26 42);border:1px solid rgb(var(--line-br)/.9);padding:22px 24px 20px;color:rgb(var(--muted));font-size:13.5px;line-height:1.55;
  transform:perspective(1200px) rotateX(9deg) rotateY(17deg) rotate(-5deg);transform-origin:20% 100%;box-shadow:-30px 40px 70px -30px rgb(0 0 0/.85),0 0 0 1px rgb(var(--bg)/.4)}
.mc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.mc-who{display:flex;align-items:center;gap:10px;font-size:13px;color:rgb(var(--body))}
.mc-av{width:26px;height:26px;border-radius:50%;background:rgb(var(--line))}
.mc-del{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:rgb(var(--faint));border:1px solid rgb(var(--line));border-radius:999px;padding:5px 10px}
.mc-del .ic{width:12px;height:12px}
.mc-sub{font:600 15px/1.3 Inter,sans-serif;color:rgb(var(--body));margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgb(var(--line))}
.mailcard p{margin-bottom:11px}
.mailcard u{text-decoration:none;font-weight:600;color:rgb(var(--faint));background:rgb(var(--line)/.7);padding:1px 6px;border-radius:5px}
.mailcard .sk{display:block;height:8px;border-radius:4px;background:rgb(var(--line)/.8);margin-bottom:9px}
.mc-ft{margin:16px 0 0!important;font-size:11.5px;color:rgb(var(--faint))}
.two-bulk figcaption{position:absolute;left:calc(100% + 40px);top:46px;white-space:nowrap}
.two-bulk figcaption::before{content:"";position:absolute;right:calc(100% + 12px);top:50%;width:28px;height:1px;background:rgb(var(--line-br))}
.two-fig{position:absolute;right:0;top:168px;z-index:2}
.pagewin{border-color:rgb(var(--a4)/.5);box-shadow:0 60px 140px -50px rgb(var(--a4)/.3),0 50px 120px -50px rgb(0 0 0/.85)}
.pg{display:grid;grid-template-columns:352px minmax(0,1fr)}
.pg-side{padding:132px 32px 32px;border-right:1px solid rgb(var(--line));background:rgb(var(--s2)/.4);display:flex;flex-direction:column;align-items:flex-start}
.pg-k{font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--muted));margin-bottom:14px}
.pg-side h3{font-size:30px;line-height:1.08;margin-bottom:14px}
.pg-p{font-size:14px;line-height:1.55;color:rgb(var(--muted));margin-bottom:26px}
.pg-meta{margin-top:auto;width:100%;border-top:1px solid rgb(var(--line));padding-top:18px;display:grid;gap:10px;font-size:12.5px;color:rgb(var(--muted))}
.pg-meta div{display:flex;justify-content:space-between;gap:12px}.pg-meta dd{color:rgb(var(--body));font-weight:500}
.slots{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.slots span{font:600 12.5px/1 Inter,sans-serif;color:rgb(var(--body));border:1px solid rgb(var(--line-br)/.8);border-radius:999px;padding:8px 12px;background:rgb(var(--bg)/.4)}
.pg-main{padding:0 32px 26px;min-width:0}
.pg-h{display:flex;justify-content:space-between;align-items:center;height:64px}
.pg-h .nb{font:700 13px/1 Inter,sans-serif;letter-spacing:.34em;color:#fff}.pg-h .nb em{font-style:normal;color:#4cb8ff}
.pg-for{font-size:13px;color:rgb(var(--muted))}
.pg-vid .poster{border-radius:14px;border:1px solid rgb(var(--line))}
.ctl{display:flex;align-items:center;gap:14px;height:48px;color:rgb(var(--body))}
.ctl .scrub{flex:1;height:4px;border-radius:4px;background:rgb(var(--line))}.ctl .scrub i{display:block;width:0;height:100%}
.ctl .tm{font-size:12.5px;color:rgb(var(--muted));font-variant-numeric:tabular-nums}

/* ================= 05 WHO WATCHED: Evervault's ledger, Warp's dot field, legend and tally ================= */
.ledger{max-width:1248px;margin-inline:auto}
.lg-live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;color:rgb(var(--muted))}
.lg-live i{width:7px;height:7px;border-radius:50%;background:rgb(var(--a1))}   /* H2: scoped to the pill. The scene sets .live on the active stage and About sets it on its hero, and a bare `.live i` turned the hero scrim and lift into the small teal dot in the middle of the hero */
.lg-top{padding:28px 28px 22px}
.matrix{display:flex;flex-direction:column;gap:11px}
.matrix .r{display:grid;grid-template-columns:repeat(var(--n),1fr);justify-items:center}
.matrix .r.o{grid-template-columns:repeat(calc(var(--n) - 1),1fr);width:calc(100% - 100% / var(--n));margin-left:calc(50% / var(--n))}
.matrix i,.legend i{display:block;width:8px;height:8px;border-radius:50%;flex:none}
.matrix .k0,.legend .k0{background:rgb(var(--line-br)/.7)}
.matrix .k1,.legend .k1{background:rgb(var(--faint))}
.matrix .k2,.legend .k2{background:rgb(var(--emerald))}
.matrix .k3,.legend .k3{background:rgb(var(--emerald));box-shadow:0 0 0 2.5px rgb(var(--s1)),0 0 0 4px rgb(var(--emerald))}
.lg-meta{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid rgb(var(--line))}
.legend{display:flex;gap:26px;flex-wrap:wrap;font:600 12px/1 Inter,sans-serif;color:rgb(var(--muted))}
.legend li{display:flex;align-items:center;gap:9px}
.tally{display:flex;gap:40px;flex-wrap:wrap}
.tally span{display:flex;align-items:baseline;gap:10px;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint))}
.tally b{font:800 34px/1 Cabinet,sans-serif;letter-spacing:-.03em;color:rgb(var(--ink));font-variant-numeric:tabular-nums}
.tally span:nth-child(n+3) b{color:rgb(var(--emerald))}
.lg-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.lg-tbl th{font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint));text-align:left;padding:15px 28px;border-top:1px solid rgb(var(--line));border-bottom:1px solid rgb(var(--line));background:rgb(var(--s2)/.5)}
.lg-tbl th:nth-child(1){width:31%}.lg-tbl th:nth-child(2){width:19%}.lg-tbl th:nth-child(3){width:16%}.lg-tbl th:nth-child(4){width:21%}
.lg-tbl .r{text-align:right}
.lg-tbl td{height:62px;padding:0 28px;border-bottom:1px solid rgb(var(--line)/.7);font-size:14px;color:rgb(var(--body));white-space:nowrap}
.lg-tbl td:first-child .av{vertical-align:middle;margin-right:14px}
.lg-tbl td:first-child div{display:inline-block;vertical-align:middle}
.lg-tbl td div b{display:block;font-weight:600;font-size:14px;color:rgb(var(--ink));line-height:1.25}
.lg-tbl td div small{display:block;font-size:12.5px;color:rgb(var(--faint));margin-top:2px}
.lg-tbl td:nth-child(2){color:rgb(var(--ink));font-weight:500}
.lg-tbl td:nth-child(4) .wb{display:inline-block;width:150px;vertical-align:middle;margin-right:14px}
.lg-tbl td em{font-style:normal;font-size:13px;color:rgb(var(--body));font-variant-numeric:tabular-nums}.lg-tbl td em.nil{color:rgb(var(--faint))}
.lg-tbl td.r{color:rgb(var(--muted));font-size:13px;font-variant-numeric:tabular-nums}
.lg-tbl tr.hot td{background:rgb(var(--emerald)/.035)}
.lg-tbl tr.hot td:first-child{box-shadow:inset 3px 0 0 rgb(var(--emerald))}
.lg-tbl tbody tr:last-child td{border-bottom:0;opacity:.55}
.lg-tbl tbody tr:nth-last-child(2) td{opacity:.8}
.lg-foot{display:grid;grid-template-columns:auto auto 1fr;gap:20px 56px;align-items:center;padding:22px 28px;border-top:1px solid rgb(var(--line));background:rgb(var(--s2)/.45)}
.lg-foot p{display:flex;align-items:baseline;gap:14px;font-size:13px;line-height:1.4;color:rgb(var(--muted))}
.lg-foot p b{font:800 32px/1 Cabinet,sans-serif;letter-spacing:-.03em;color:rgb(var(--ink));white-space:nowrap}
.lg-foot p span{max-width:25ch}
.lg-foot p b{word-spacing:.12em}
.lg-foot .src{display:block;justify-self:end;max-width:340px;font-size:11.5px;color:rgb(var(--faint));text-align:right}
.chase{margin-top:56px;text-align:center;font:800 clamp(24px,2.3vw,34px)/1.2 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink))}

/* ================= 06 THREE STOPS: Orizon's pinned stage sequence (here: three stages in a column, rail sticks beside them) + Oxide's Fig. labels ================= */
.seq{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;align-items:start}
.rail{position:sticky;top:calc(var(--nav) + 24vh);align-self:start}
.rail ol{position:relative;display:flex;flex-direction:column;gap:40px}
.rail ol::before{content:"";position:absolute;left:20px;top:20px;bottom:20px;width:1px;background:linear-gradient(rgb(var(--a1)/.6),rgb(var(--a7)/.6))}
.rail a{position:relative;display:flex;align-items:center;gap:14px;text-decoration:none;font:600 13px/1 Inter,sans-serif;letter-spacing:.04em;color:rgb(var(--faint));transition:color .4s var(--ease)}
.rail a b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgb(var(--bg));border:1px solid rgb(var(--line-br));font:800 17px/1 Cabinet,sans-serif;color:rgb(var(--faint));
  box-shadow:0 0 0 6px rgb(var(--bg));transition:all .5s var(--ease)}
.rail li.on a,.rail li.lit a{color:rgb(var(--ink))}
.rail li.on a b,.rail li.lit a b{border-color:rgb(var(--c));color:rgb(var(--ink));box-shadow:0 0 0 6px rgb(var(--bg)),0 0 26px rgb(var(--c)/.45)}
.stop{padding-bottom:104px}.stop:last-child{padding-bottom:0}
.stop-h{margin-bottom:26px;max-width:620px}
.stop-h h3{font-size:clamp(28px,2.6vw,38px);line-height:1.08;margin:18px 0 10px}
.stop-h p:not(.fig){font-size:17px;line-height:1.55;color:rgb(var(--muted))}
.appwin{box-shadow:0 60px 140px -60px rgb(0 0 0/.9)}
.steps3{display:flex;gap:6px}
.steps3 li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 7px;border-radius:999px;border:1px solid transparent;font:600 12.5px/1 Inter,sans-serif;color:rgb(var(--faint))}
.steps3 b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid rgb(var(--line-br));font:700 11px/1 Inter,sans-serif}
.steps3 .on{color:rgb(var(--ink));border-color:rgb(var(--line-br));background:rgb(var(--bg)/.5)}
.steps3 .on b{border-color:rgb(var(--a4));background:rgb(var(--a4)/.2)}
.steps3 .done{color:rgb(var(--body))}
.steps3 .done b{background:rgb(var(--emerald));border-color:rgb(var(--emerald));color:#04231a}
.steps3 .done .ic{width:11px;height:11px}
.ap{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.ap-main{padding:24px 28px 28px;min-width:0}
.ap-title{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:16px}
.ap-title b{font:700 15px/1.2 Inter,sans-serif;color:rgb(var(--ink))}
.ap-title span{font-size:12.5px;color:rgb(var(--faint))}
.ops{width:100%;border-collapse:collapse}
.ops th:first-child{width:96px}
.ops th{font:700 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint));text-align:left;padding:0 0 12px;border-bottom:1px solid rgb(var(--line))}
.ops td{height:54px;border-bottom:1px solid rgb(var(--line)/.7);font-size:13.5px;color:rgb(var(--body));padding-right:12px}
.ops td:nth-child(3){color:rgb(var(--ink));font-weight:500}
.ops td:first-child{width:96px}
.ops tr:last-child td{opacity:.5}.ops tr:nth-last-child(2) td{opacity:.75}
.vf{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:rgb(var(--a1))}.vf .ic{width:13px;height:13px}
.dc{border-left:1px solid rgb(var(--line));background:rgb(var(--s2)/.55);padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px}
.dc-h{display:flex;align-items:center;gap:9px;white-space:nowrap;font:700 11px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgb(var(--muted))}
.dc-h .ic{width:15px;height:15px;color:rgb(var(--a3))}
.dc h4{font:800 23px/1.12 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink));text-wrap:balance}
.dc-ck{display:flex;flex-direction:column}
.dc-ck li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgb(var(--body));padding:9px 0;border-top:1px solid rgb(var(--line)/.7)}
.dc-ck .ic{width:14px;height:14px;color:rgb(var(--a1))}
.dc-kv{border:1px solid rgb(var(--line));border-radius:12px;background:rgb(var(--bg)/.4)}
.dc-kv div{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-size:13px}
.dc-kv div+div{border-top:1px solid rgb(var(--line))}
.dc-kv dt{color:rgb(var(--muted))}.dc-kv dd{font-weight:600;color:rgb(var(--ink));font-variant-numeric:tabular-nums}
.dc-prog p{display:flex;justify-content:space-between;font-size:13px;color:rgb(var(--muted));margin-bottom:9px}.dc-prog p b{color:rgb(var(--ink));font-weight:600}
.wb.big{height:8px}
.dc .k-btn.wide{margin-top:auto}
.dc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kv{margin-top:6px}
.kv div{display:grid;grid-template-columns:64px 1fr;gap:14px;padding:13px 0;border-top:1px solid rgb(var(--line)/.7);font-size:13.5px;line-height:1.5;color:rgb(var(--body))}
.kv dt{font:700 11px/1.7 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint))}
.pv{border-radius:12px;border:1px solid rgb(var(--line));margin-bottom:10px}
.tiles4{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.tiles4 figure{margin:0}
.tiles4 .poster{border-radius:12px;border:1px solid rgb(var(--line))}
.tiles4 figcaption{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:rgb(var(--ink));font-weight:500}
.tiles4 figcaption b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgb(var(--s3));font:800 10.5px/1 Cabinet,sans-serif;color:rgb(var(--ink))}
.tiles4 figcaption .pill{margin-left:auto;height:24px;font-size:11.5px}


/* ================= 07 CHOOSER: Orizon "services", one object centred, wired to cards either side ================= */
.wired{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);column-gap:clamp(48px,8vw,120px);align-items:center}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.42;transition:opacity .4s var(--ease)}
.wires path.on{opacity:.95}
.col{display:flex;flex-direction:column;gap:24px;position:relative;z-index:1}
.opt{width:100%;text-align:left;cursor:pointer;border-radius:var(--r1);border:1px solid rgb(var(--line));background:rgb(var(--s1)/.7);padding:20px 22px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .3s var(--ease),background .3s var(--ease)}
.opt b{display:block;font:800 19px/1.15 Cabinet,sans-serif;letter-spacing:-.015em;color:rgb(var(--ink));margin-bottom:8px}
.opt small{display:block;font-size:14px;line-height:1.45;color:rgb(var(--muted))}
.opt:hover{border-color:rgb(var(--line-br))}
.opt.on{border-color:rgb(var(--a4)/.8);background:linear-gradient(180deg,rgb(var(--a4)/.14),rgb(var(--s1)/.75))}
.col.r .opt{text-align:left}
.centre{position:relative;z-index:1}
.centre .shot{border-radius:var(--r2);border:1px solid rgb(var(--line-br));box-shadow:0 30px 80px -30px rgb(0 0 0/.7)}
.centre .dur{position:absolute;right:16px;bottom:14px;font:700 12px/1 Inter,sans-serif;background:rgb(var(--bg)/.65);padding:7px 11px;border-radius:999px}
.centre figcaption{margin-top:24px;text-align:center}
.centre figcaption b{display:block;font:800 clamp(20px,1.9vw,26px)/1.2 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink));margin-bottom:8px}
.centre figcaption span{display:block;font-size:15px;line-height:1.5;color:rgb(var(--muted));max-width:46ch;margin-inline:auto;text-wrap:balance}

/* ================= 08 PROOF: Zentry's one huge figure, then staggered cards. Frame.io: every figure carries its source ================= */
.mega{position:relative;border-top:1px solid rgb(var(--line))}
.mega::before{content:"";position:absolute;left:50%;top:38%;width:min(1300px,110%);height:560px;transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgb(var(--a4)/.16),rgb(var(--a4)/.05) 60%,transparent)}
.mega-k{display:flex;align-items:center;gap:18px;padding-top:28px;font:700 12px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--muted))}
.mega-k img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.mega-n{font:800 clamp(104px,24.4vw,352px)/.82 Cabinet,sans-serif;letter-spacing:-.06em;margin:.1em 0 .08em -.035em;white-space:nowrap;color:transparent;
  background:linear-gradient(100deg,#2FB8C7 0%,#6C7EE3 55%,#A944FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.mega-r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;border-top:1px solid rgb(var(--line));padding-top:24px}
.mega-l{font-size:clamp(18px,1.6vw,24px);line-height:1.45;color:rgb(var(--body));max-width:660px}
.mega-l b{color:rgb(var(--ink));font-weight:600}
.src{font-size:12.5px;line-height:1.55;color:rgb(var(--faint))}.src b{color:rgb(var(--muted));font-weight:600}
.stagger{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:104px;align-items:start}
.sc{display:flex;flex-direction:column;border-radius:var(--r1);border:1px solid rgb(var(--c)/.4);padding:24px;background:linear-gradient(180deg,rgb(var(--c)/.17),rgb(var(--s1)/.72) 62%)}
.sc.s1{min-height:372px}.sc.s2{min-height:312px;margin-top:92px}.sc.s3{min-height:420px;margin-top:36px}.sc.s4{min-height:336px;margin-top:140px}
.sc-k{font:700 12px/1.3 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--body))}
.sc-k small{display:block;margin-top:6px;font:500 12.5px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;color:rgb(var(--faint))}
.sc-n{margin-top:auto;padding-top:56px;font:800 clamp(56px,6.1vw,88px)/.9 Cabinet,sans-serif;letter-spacing:-.055em;color:rgb(var(--ink));white-space:nowrap}
.sc-n small{font-size:.5em;letter-spacing:-.03em;margin-left:.04em;color:rgb(var(--body))}
.sc-l{margin-top:14px;font-size:16px;line-height:1.45;color:rgb(var(--body));max-width:22ch}
.sc .src{margin-top:20px;padding-top:14px;border-top:1px solid rgb(var(--line));font-size:11.5px}
.marks{margin-top:96px;text-align:center}
.marks .mk{font:700 12px/1 Inter,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgb(var(--faint));margin-bottom:28px}
.lw{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px clamp(32px,4.4vw,64px)}
.lw img{height:30px;width:auto;max-width:140px;object-fit:contain;filter:brightness(0) invert(1);opacity:.6}
.lw img[src*="signs-express"]{height:26px}.lw img[src*="knight-frank"]{height:34px}

/* ================= 09 START: Zentry's giant headline across the width, the film in a window under it, then the ask ================= */
.end{overflow:clip}
.end::before{content:"";position:absolute;left:50%;top:22%;width:min(1500px,120%);height:760px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--a4)/.16),rgb(var(--a7)/.05) 60%,transparent)}
.giant{position:relative;text-align:center;font-size:clamp(34px,8.2vw,124px);line-height:.96;letter-spacing:-.055em;white-space:nowrap;text-wrap:nowrap}
.giant .grad{display:inline}
.endwin{position:relative;margin-top:80px;display:flex;flex-direction:column;align-items:center}
.film{width:min(960px,100%);margin-top:20px;box-shadow:0 70px 150px -60px rgb(var(--a4)/.35),0 50px 120px -50px rgb(0 0 0/.9)}
.film-v{position:relative;aspect-ratio:16/9;background:rgb(var(--bg))}
.film-v img{width:100%;height:100%;object-fit:cover}
.film-v .fp{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;background:rgb(var(--bg)/.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgb(var(--ink)/.4);color:rgb(var(--ink))}
.film-v .fp .ic{width:34px;height:34px;margin-left:5px}
.end-p{margin-top:44px;font-size:clamp(16px,1.25vw,18px);line-height:1.56;color:rgb(var(--muted));max-width:672px;text-align:center}
.endwin .acts{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center}


/* ---------- footer ---------- */
footer{padding:64px 0 48px;border-top:1px solid rgb(var(--line)/.8);background:rgb(var(--s1)/.45);text-align:center}
footer .wrap{display:flex;flex-direction:column;align-items:center;gap:28px}
footer .fl img{height:30px;width:auto}
footer nav{display:flex;gap:36px;flex-wrap:wrap;justify-content:center;font-size:14.5px}
footer nav a{text-decoration:none;color:rgb(var(--muted))}footer nav a:hover{color:rgb(var(--ink))}
.ft-legal{font-size:12.5px;line-height:1.6;color:rgb(var(--faint));max-width:560px}
.ft-legal a{color:inherit;margin-left:12px;text-decoration:underline;text-decoration-color:rgb(var(--faint)/.4);text-underline-offset:3px}@media (hover:hover) and (pointer:fine){.ft-legal a:hover{color:rgb(var(--ink))}}

/* ---------- motion only behind ?motion ---------- */
html.motion:not(.scened) main{opacity:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
/* the pinned scene: hero, reel, four steps, chooser share one sticky stage; the wave field is the persistent object */
.scene{position:relative}
.scene .pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.scene .obj{position:absolute;inset:0;z-index:0;transform-origin:50% 48%;will-change:transform,opacity,filter}
.scene .stg{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0;min-height:0;overflow:visible;pointer-events:none;visibility:hidden}
.scene .stg.live{pointer-events:auto}
.scene .steps::before{display:none}
.scene .hero::after{display:none}
.scene .reel{padding-top:0}
/* the first tail block slides up over the last viewport of the pin, so at dive end (dv 1) its top meets the top of the screen; its ground fades up with the dive (--tbg) */
.scene+.sec{padding-top:calc(30svh + 56px);margin-top:-100svh;position:relative;z-index:3;min-height:100svh}
.scene .reel-stage::before{display:none}
.scene .reel .eyebrow{margin-bottom:40px}
.scene .reel-ticks{margin-top:36px}
.scene .reel .line{margin-top:32px}
.scene .stg [style*="--d"]{transition:none}
/* no live backdrop blur inside the scene: it would re-blur every frame under the filter/transform work */
.scene *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* SSWEB-5333: the fixed nav sits over the moving canvas for the whole pinned scene, so its frosting would be re-blurred every frame. A denser flat tint instead. */
html.lenis .nav::before{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgb(var(--bg)/.92)}
.scene .rc .play,.scene .rc .tag{background:rgb(var(--bg)/.7)}
.scene .opt{background:rgb(var(--s1)/.9)}
.scene .card{background:rgb(var(--s1)/.9)}
.scene .reel-stage{--asm:1}
/* the flash (intro .3, dive .62): brand spectrum, a pale lavender core, never pure white */
.dive{position:absolute;inset:-10%;z-index:5;pointer-events:none;opacity:0;will-change:opacity;
  background:radial-gradient(54% 54% at 50% 47%,rgb(228 234 255/.5),rgb(var(--a2)/.78) 24%,rgb(var(--a4)/.52) 50%,rgb(var(--a7)/.24) 70%,rgb(var(--a7)/0) 86%)}
.hero>.dive{inset:0}

/* phone / stacked reveal: P7, one shot (30px, 600ms ease-out) */
.motion .rv{opacity:0;transform:translateY(30px);transition:opacity .6s cubic-bezier(0,0,.58,1),transform .6s cubic-bezier(0,0,.58,1);transition-delay:var(--d,0s)}
.motion .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation:none!important}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .chain{grid-template-columns:repeat(2,1fr);row-gap:48px}.chain::before{display:none}
  .wired{grid-template-columns:1fr;row-gap:24px}
  .wires{display:none}
  .wired .centre{order:-1}
  .wired .col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .nav ul{display:none}.nav-in{grid-template-columns:1fr auto}
}
@media (max-width:760px){
  :root{--sec:72px;--head-gap:44px;--nav:68px}
  .nav .btn.ghost{display:none}
  .hero{padding-bottom:88px}
  .hero-scrim{width:120%;height:60%;background:radial-gradient(closest-side,rgb(var(--bg)/.94),rgb(var(--bg)/.86) 58%,rgb(var(--bg)/0))}
  .hero-ctas{flex-direction:column;align-items:center;margin-top:28px}
  .hero-ctas .btn{width:240px}
  .reel-stage{--cw:calc(100vw - 40px);--sw:60vw;height:calc((100vw - 40px) * .5625)}
  .rc[data-pos="-1"],.rc[data-pos="1"]{opacity:0;pointer-events:none}
  .rc .play{width:56px;height:56px;margin:-28px 0 0 -28px}.rc .play::before{left:23px;top:17px;border-left-width:16px;border-top-width:11px;border-bottom-width:11px}
  .reel-ticks{gap:4px 18px}
  .chain{grid-template-columns:1fr}
  .wired .col{grid-template-columns:1fr}
}
@media (max-width:760px){   /* seven labels: one swipeable strip, not a 3/3/1 stack */
  .reel-ticks{position:relative;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;margin-inline:-20px;padding-inline:20px;-webkit-mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
  .reel-ticks::-webkit-scrollbar{display:none}
  .reel-tick{flex:none;scroll-snap-align:center}
  .rc .tag{left:8px;bottom:8px;font-size:10.5px;letter-spacing:.01em;padding:5px 8px}   /* fits the clips' clear bottom-left corner (HANDOFF.md: x<29%, y>88%) */
}
@media (max-width:420px){
  .hero-stack .eyebrow{letter-spacing:.14em;font-size:11px;gap:10px}
  .hero-stack .eyebrow::before,.hero-stack .eyebrow::after{width:16px}
}

/* ---------- responsive: new tail (04 to 09) ---------- */
@media (max-width:1100px){
  .two-bulk figcaption{left:calc(100% + 28px)}
  .pg{grid-template-columns:300px minmax(0,1fr)}
  .pg-side{padding-inline:24px}
  .pg-side h3{font-size:26px}
  .ap{grid-template-columns:minmax(0,1fr) 300px}
  .stagger{gap:16px}
  .lg-foot{grid-template-columns:auto auto}.lg-foot .src{grid-column:1/-1;justify-self:start;text-align:left;max-width:none}
}
@media (max-width:1000px){
  .seq{grid-template-columns:1fr}.rail{display:none}
  .stop{padding-bottom:72px}
  .ap{grid-template-columns:1fr}.dc{border-left:0;border-top:1px solid rgb(var(--line))}
  .stagger{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sc.s1{margin-top:0}.sc.s2{margin-top:56px}.sc.s3{margin-top:0}.sc.s4{margin-top:56px}
  .lg-tbl th:nth-child(4),.lg-tbl td:nth-child(4){display:none}
  .lg-tbl th:nth-child(1){width:36%}.lg-tbl th:nth-child(2){width:24%}.lg-tbl th:nth-child(3){width:22%}
}
@media (max-width:760px){
  .two{padding-top:0}
  .two-bulk{position:relative;left:0;width:min(330px,88%);margin:0 0 14px 6px}
  .two-bulk figcaption{position:static;margin-top:20px;white-space:normal}.two-bulk figcaption::before{display:none}
  .mailcard{transform:perspective(900px) rotateX(6deg) rotateY(12deg) rotate(-4deg);padding:18px 18px 16px}
  .two-fig{position:static;margin:14px 0 14px;justify-content:flex-start}
  .two{display:flex;flex-direction:column}
  .two-fig{order:2}.pagewin{order:3}
  .pg{grid-template-columns:1fr}
  .pg-side{order:2;padding:22px 20px 24px;border-right:0;border-top:1px solid rgb(var(--line))}
  .pg-main{padding:0 14px 8px}
  .pg-h{height:52px}.pg-for{display:none}
  .win-bar .url{max-width:none;font-size:11.5px}.win-bar .tag{display:none}
  .lg-top{padding:20px 16px 16px}
  .matrix{gap:9px}
  .tally{gap:14px 24px}.tally b{font-size:26px}
  .lg-meta{gap:16px}.legend{gap:12px 18px}
  .lg-tbl th{padding:13px 12px}.lg-tbl td{padding:0 12px}
  .lg-tbl td:first-child div{display:none}.lg-tbl td:first-child .av{margin-right:0}
  .lg-tbl th:nth-child(5),.lg-tbl td:nth-child(5){display:none}
  .lg-tbl th:nth-child(1){width:88px}.lg-tbl th:nth-child(2){width:auto}.lg-tbl th:nth-child(3){width:128px}
  .lg-tbl .pill{padding:0 8px;font-size:11px;gap:5px}
  .lg-tbl td:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:10px}
  .lg-foot{grid-template-columns:1fr;padding:20px 16px;gap:16px}
  .steps3 li{padding:5px 8px 5px 5px;font-size:11.5px}.steps3{gap:2px}
  .ap-main{padding:18px 16px 20px}.dc{padding:18px 16px 20px}
  .ap-title{flex-direction:column;gap:4px}
  .ops th:nth-child(2),.ops td:nth-child(2){display:none}
  .tiles4{grid-template-columns:1fr 1fr;gap:14px 10px}
  .tiles4 figcaption{font-size:12px;flex-wrap:wrap;gap:6px}.tiles4 figcaption .pill{margin-left:0}.tiles4 figcaption b{display:none}
  .stagger{grid-template-columns:1fr;gap:16px;margin-top:64px}
  .sc{min-height:0!important;margin-top:0!important}.sc.s2,.sc.s4{margin-left:28px!important}.sc.s1,.sc.s3{margin-right:28px!important}
  .sc-n{padding-top:36px}
  .mega-r{grid-template-columns:1fr;gap:18px}
  .mega-n{margin-top:.14em}
  .marks{margin-top:64px}
  .endwin{margin-top:48px}
  .film-v .fp{width:64px;height:64px}.film-v .fp .ic{width:24px;height:24px;margin-left:3px}
  .giant{font-size:9vw}
}

/* ================= TAIL MOTION (sections 04, 05, 06, 08, 09): every rule below needs html.motion, so the static page is untouched =================
   Only transform, opacity, filter and clip-path change; one ease. motion-tail.js adds .prep (waiting) and .go (arrived). */
.motion .two-bulk,.motion .pagewin,.motion .film{will-change:transform,clip-path,opacity}
.motion .pagewin{transform-origin:22% 36%}
/* 05: dots and rows arrive; Watched and Booked go from grey to emerald as they land (a filter, so no colour is animated) */
.motion .ledger.prep .matrix .r{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--ri,0) * 80ms)}
.motion .ledger.prep:not(.go) .matrix .r{opacity:0;transform:translateY(10px)}
.motion .ledger.prep .matrix .k2,.motion .ledger.prep .matrix .k3{transition:filter .9s var(--ease) var(--dl,1100ms)}
.motion .ledger.prep:not(.go) .matrix .k2,.motion .ledger.prep:not(.go) .matrix .k3{filter:grayscale(1) brightness(.72)}
.motion .ledger.prep tbody tr{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--ri,0) * 120ms + 800ms)}
.motion .ledger.prep:not(.go) tbody tr{opacity:0;transform:translateY(16px)}
.motion .ledger.prep .pill.watched,.motion .ledger.prep .pill.booked{transition:filter .7s var(--ease) calc(var(--ri,0) * 120ms + 1250ms)}
.motion .ledger.prep:not(.go) .pill.watched,.motion .ledger.prep:not(.go) .pill.booked{filter:grayscale(1) brightness(.7)}
.motion .ledger.prep .wb i{transform-origin:0 50%;transition:transform 1s var(--ease) calc(var(--ri,0) * 120ms + 1000ms)}
.motion .ledger.prep:not(.go) .wb i{transform:scaleX(0)}
.motion .ledger.prep .lg-foot{transition:opacity 1s var(--ease) 2.2s}
.motion .ledger.prep:not(.go) .lg-foot{opacity:0}
/* 06: the pinned stage. The head scrolls away, then this holds for three stops */
.motion .ctrl-track{position:relative}
.motion .ctrl-pin{position:sticky;top:0;height:100vh;height:100svh;padding:calc(var(--nav) + 8px) 0 24px;display:flex;align-items:center;isolation:isolate}
.motion .ctrl-pin .seq{width:100%;height:100%;align-items:stretch}
.motion .ctrl-pin .rail{position:static;align-self:center}
.motion .ctrl-pin .seq-main{position:relative;height:100%}
.motion .ctrl-pin .stop{position:absolute;inset:0;padding-bottom:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;will-change:transform,opacity,filter}
.motion .ctrl-pin .stop-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);grid-template-areas:"fig p" "h3 p";column-gap:40px;align-items:end;max-width:none;margin-bottom:20px}
.motion .ctrl-pin .stop-h .fig{grid-area:fig}.motion .ctrl-pin .stop-h h3{grid-area:h3;margin:16px 0 0}.motion .ctrl-pin .stop-h p:not(.fig){grid-area:p;font-size:16px}
.motion .ctrl-pin .stop-h>*{will-change:transform,opacity}
.motion .ctrl-pin .win,.motion .ctrl-pin .dc>*{will-change:transform,opacity}
.motion .ctrl-pin .rail{width:150px}
/* Approve ticks: the button's own face is covered by an "Approved" face, with one ring that leaves it */
.motion .stop .k-btn.wide{position:relative}
.motion .stop .apv{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;border-radius:12px;background:rgb(var(--emerald));color:#04231a;opacity:0;transform:scale(.97);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.motion .stop.approved .apv{opacity:1;transform:none}
.motion .stop .k-btn.wide::after{content:"";position:absolute;inset:0;border-radius:12px;border:2px solid rgb(var(--emerald));opacity:0;pointer-events:none}
.motion .stop .k-btn.wide.ping::after{animation:apRing .9s var(--ease) both}
@keyframes apRing{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.16,1.5)}}
.motion .stop.approved .pill.wait{opacity:.35}
/* 08: one huge figure, then four cards */
.motion .cn{display:inline-block;text-align:left;vertical-align:baseline}
.motion .mega.prep .mega-n{transition:clip-path 1.5s var(--ease),transform 1.5s var(--ease);clip-path:inset(-12% -8% -12% -8%)}
.motion .mega.prep:not(.go) .mega-n{clip-path:inset(0 0 100% 0);transform:translateY(70px)}
.motion .mega.prep .mega-k,.motion .mega.prep .mega-r{transition:opacity 1.1s var(--ease) .5s,transform 1.1s var(--ease) .5s}
.motion .mega.prep:not(.go) .mega-k,.motion .mega.prep:not(.go) .mega-r{opacity:0;transform:translateY(18px)}
.motion .stagger.prep .sc{transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--ci,0) * 150ms)}
.motion .stagger.prep:not(.go) .sc{opacity:0;transform:translateY(110px)}
/* 09: lines rise out of a mask, the film window opens on scroll, then the ask */
.motion .giant .ln{display:block;overflow:clip;padding:0 .08em .16em;margin:0 -.08em -.16em}
.motion .giant .li{display:inline-block;will-change:transform}
.motion .giant.prep .li{transition:transform 1.3s var(--ease);transition-delay:calc(var(--li,0) * 140ms)}
.motion .giant.prep:not(.go) .li{transform:translateY(140%)}
.motion .endwin .ask{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--ai,0) * 120ms)}
.motion .endwin .fig.ask:not(.shown){opacity:0;transform:translateY(12px)}
.motion .endwin:not(.asked) .end-p,.motion .endwin:not(.asked) .acts{opacity:0;transform:translateY(24px)}
@media (max-width:760px){.motion .giant .ln{padding-bottom:.18em;margin-bottom:-.18em}}
/* where the pinned top scene hands over to section 04: its last dots fade out under the heading instead of ending on a hard edge */
.motion .scene+.sec{background:transparent}


/* =====================================================================================================================================
   HOME v5 (Raph's board feedback, 26 Oct 2026). One reference only: orizon.one. New class names, so the shared rules above
   (still used by the other pages) are untouched.
   03 .kc   = Orizon S3 "kill chain"   04 .cmp  = Orizon S6 "Compare"       05 #engine ledger scaled to 80%
   06 .sw   = our own reel layout      07 .hub  = Orizon S5 "Services"      08 .sb   = Orizon T1 stat band        09 = css/banner.css
   ===================================================================================================================================== */

/* ================= 03 FOUR STEPS: dense numbered stage cards, chips above and below, a band behind ================= */
.steps{isolation:isolate}
.steps::before,.steps-band{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-block:1px solid rgb(var(--line)/.85);
  background:radial-gradient(52% 46% at 50% 58%,rgb(var(--a4)/.16),transparent 72%),rgb(var(--s2)/.5)}
.kc{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:152px 0 132px}
/* R3 H2: the thin full-width line behind the boxes is gone (it showed through when a hovered box scaled up); short connectors between boxes replace it, see the R3 H2 block at the end */
.kc-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:16px;border:1px solid rgb(var(--line-br)/.6);
  background:linear-gradient(180deg,rgb(var(--s3)/.75),rgb(var(--s2)/.88));padding:44px 22px 28px;box-shadow:0 30px 70px -40px rgb(0 0 0/.85)}
.kc-n{position:absolute;left:50%;top:-21px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:rgb(var(--bg));border:1px solid rgb(var(--c));color:rgb(var(--ink));font:800 17px/1 Cabinet,sans-serif;box-shadow:0 0 0 6px rgb(var(--bg)/.9),0 0 24px rgb(var(--c)/.4)}
.kc-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:16px;border:1px solid rgb(var(--c)/.5);background:rgb(var(--c)/.12);color:rgb(var(--c))}
.kc-ico .ic{width:22px;height:22px}
.kc-card h3{font-size:clamp(18px,1.55vw,22px);margin-bottom:12px}
.kc-card>p{font-size:14px;line-height:1.58;color:rgb(var(--muted));max-width:30ch;margin-inline:auto;text-wrap:pretty}
.kc-chips{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:8px}
.kc-chips.up{bottom:calc(100% + 43px)}
.kc-chips.dn{top:calc(100% + 26px)}
.kc-chips::after,.kc-chips::before{content:"";position:absolute;left:50%;width:1px;background:rgb(var(--c)/.6)}
.kc-chips.up::after{top:100%;height:22px}
.kc-chips.dn::before{bottom:100%;height:26px}
.kc-chips li{flex:1 1 0;max-width:138px;min-height:82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px 8px;border-radius:12px;
  border:1px solid rgb(var(--c)/.55);background:linear-gradient(180deg,rgb(var(--c)/.16),rgb(var(--c)/.06));font:600 12px/1.25 Inter,system-ui,sans-serif;color:rgb(var(--ink));text-align:center;text-wrap:balance}
.kc-chips .ic{width:20px;height:20px;color:rgb(var(--c))}
.kc-chips.dn li{background:rgb(var(--s1)/.7)}
@media (max-width:1000px){
  .kc{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 16px;padding:21px 0 0}.kc::before{display:none}
  .kc-chips{position:static;flex-wrap:wrap;margin:0 0 20px}.kc-chips.dn{margin:22px 0 0}.kc-chips::before,.kc-chips::after{display:none}
  .kc-chips li{flex:0 0 auto;max-width:none;min-height:0;flex-direction:row;gap:8px;padding:7px 11px;border-radius:999px;text-align:left}
  .kc-chips .ic{width:15px;height:15px}
  .kc-card{padding-top:48px}
}
@media (max-width:760px){.kc{grid-template-columns:1fr}}

/* ================= 04 ONE LIST, TWO SENDS: Orizon's Compare table. Our column lifted and tinted, ticks against crosses ================= */
.cmp{max-width:1040px;margin-inline:auto}
/* the right column slides in from past the screen edge; clip it at the full-width section (same edge as html) so the page never gets wider */
.comparator{overflow-x:clip}
.cmp-fig{justify-content:center;margin-bottom:34px}
.cmp-card{position:relative;border-radius:18px;border:1px solid rgb(var(--line-br)/.6);background:rgb(var(--s1)/.62);box-shadow:0 50px 120px -60px rgb(0 0 0/.9)}
.cmp-t{position:relative;z-index:1;width:100%;table-layout:fixed;border-collapse:collapse}
.cmp-t col.c0{width:29%}.cmp-t col.c1{width:37%}.cmp-t col.c2{width:34%}
.cmp-hi{position:absolute;z-index:0;left:29%;width:37%;top:-16px;bottom:-16px;border-radius:16px;border:1px solid rgb(var(--a4)/.6);
  background:linear-gradient(180deg,rgb(var(--a4)/.24),rgb(var(--a2)/.08) 55%,rgb(var(--a1)/.05)),rgb(var(--s1));box-shadow:0 40px 100px -40px rgb(var(--a4)/.55)}
/* R3 H3: the lifted box is solid (ground under the tint) and its own column has no row rules, so the table's lines and the card's edge never show through it */
.cmp-t thead th.c1,.cmp-t tbody td.c1{border-bottom-color:transparent}
.cmp-hi::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:3px;border-radius:3px;background:var(--spec)}
.cmp-t th,.cmp-t td{padding:16px 20px;border-bottom:1px solid rgb(var(--line)/.75);font-size:14.5px;line-height:1.4;vertical-align:middle;text-align:center;color:rgb(var(--muted))}
.cmp-t tbody tr:last-child>*{border-bottom:0}
.cmp-t .c0{text-align:left}
.cmp-t thead th{height:96px;border-bottom:1px solid rgb(var(--line-br)/.6)}
.cmp-t thead .c0 span{font:700 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--faint))}
.cmp-h{display:block;font:800 clamp(18px,1.7vw,24px)/1.1 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--muted))}
.cmp-sub{display:block;margin-top:8px;font:600 11.5px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint))}
.cmp-t thead .c1 .cmp-h{color:rgb(var(--ink))}.cmp-t thead .c1 .cmp-sub{color:rgb(var(--a1))}
.cmp-t tbody th{font:600 13.5px/1.35 Inter,sans-serif;color:rgb(var(--body))}
.cmp-t td.c1{color:rgb(var(--ink));font-weight:500}
.cmp-pic td{padding:22px 20px}
.cmp-poster .pp{display:none}
.cmp-poster{width:min(100%,236px);margin-inline:auto;border-radius:10px;border:1px solid rgb(var(--line-br)/.7);box-shadow:0 20px 40px -20px rgb(0 0 0/.7)}
.cmp-mail{width:min(100%,236px);margin:0 auto;transform:none;box-shadow:none;text-align:left;padding:14px 16px 14px;font-size:11.5px;line-height:1.5;opacity:.82;border-radius:10px}
.cmp-mail .mc-sub{font-size:12.5px;margin-bottom:8px;padding-bottom:8px}.cmp-mail p{margin-bottom:8px}.cmp-mail .sk{height:6px;margin-bottom:7px}
.cmp-mail .mc-del{margin-top:6px;font-size:11px;padding:4px 9px}
.cmp-big td,.cmp-big th{height:96px}
.cmp-big b{font:800 clamp(28px,3.4vw,46px)/1 Cabinet,sans-serif;letter-spacing:-.035em}
.cmp-big b.yes{color:rgb(var(--emerald))}.cmp-big b.dead{color:rgb(var(--faint));text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgb(var(--faint)/.6)}
.cmp-t .ok,.cmp-t .no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;margin-right:10px;vertical-align:middle;border:1px solid}
.cmp-t .ok{color:rgb(var(--a1));border-color:rgb(var(--a1)/.55);background:rgb(var(--a1)/.12)}
.cmp-t .no{color:rgb(var(--faint));border-color:rgb(var(--line-br)/.8);background:transparent}
.cmp-t .ok .ic,.cmp-t .no .ic{width:12px;height:12px}
.cmp-note{margin-top:44px;text-align:center;font-size:12.5px;color:rgb(var(--faint))}
@media (max-width:760px){
  .cmp-fig{margin-bottom:26px;flex-wrap:wrap}
  .cmp-t th,.cmp-t td{padding:11px 8px;font-size:12.5px}
  .cmp-t col.c0{width:27%}.cmp-t col.c1{width:38%}.cmp-t col.c2{width:35%}.cmp-hi{left:27%;width:38%}
  .cmp-t thead th{height:84px}.cmp-h{font-size:15px}.cmp-sub{font-size:9.5px;letter-spacing:.08em}
  .cmp-t tbody th{font-size:12px}
  .cmp-t .ok,.cmp-t .no{display:grid;margin:0 auto 6px}
  .cmp-pic td{padding:16px 8px}
  .cmp-mail{font-size:10px;padding:10px 10px}.cmp-mail .mc-sub{font-size:11px}
  .cmp-big td,.cmp-big th{height:78px}.cmp-big b{font-size:20px;line-height:1.1}
}
/* SSWEB-5333: at 320 the template column is about 60px wide; merge fields break and the pill drops its icon so nothing pokes out of the card */
@media (max-width:400px){
  .cmp-t td,.cmp-t th{padding-inline:6px}.cmp-pic td.c2{padding-inline:5px}
  .cmp-mail{padding:9px 7px}.cmp-mail u{overflow-wrap:anywhere;padding:0 3px}
  .cmp-mail .mc-del{max-width:100%;padding:3px 7px;font-size:9.5px}.cmp-mail .mc-del .ic{display:none}
}

/* ================= 05 WHO WATCHED: the ledger at 80% of its old width, centred, with more air ================= */
#engine .sec-head{margin-bottom:80px}
#engine .chase{margin-top:72px}
@media (min-width:1001px){
  #engine .ledger{max-width:998px}
  #engine .lg-tbl th,#engine .lg-tbl td{padding-inline:20px}
  #engine .lg-tbl th:nth-child(1){width:28%}#engine .lg-tbl th:nth-child(2){width:17%}#engine .lg-tbl th:nth-child(3){width:18%}#engine .lg-tbl th:nth-child(4){width:21%}
  #engine .lg-tbl td:nth-child(4) .wb{width:92px;margin-right:12px}
  #engine .lg-top{padding:26px 24px 20px}#engine .lg-foot{padding:20px 24px;gap:16px 40px}
  #engine .lg-foot .src{max-width:260px}
}

/* ================= 06 THREE STOPS: our own use-case reel layout. One centred window, dimmer flanks, tick labels underneath ================= */
.control{overflow-x:clip}
.sw-stage{position:relative;--cw:min(880px,calc(100vw - 64px));--wh:650px;height:calc(var(--wh) + 80px)}
.sw-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(1200px,100%);height:130%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgb(30 46 86/.5),rgb(18 28 54/.2) 55%,rgb(var(--bg)/0))}
.sw{position:absolute;left:50%;top:50%;width:var(--cw);height:var(--wh);display:flex;flex-direction:column;
  transition:transform .8s var(--ease),opacity .6s var(--ease),filter .6s var(--ease);will-change:transform}
.sw .ap{flex:1;min-height:0}
.sw .ap-main{overflow:hidden}
.sw .ops td{height:46px}
.sw .pv{width:min(100%,440px);margin-inline:auto}
.sw .dc{gap:12px;padding-bottom:20px}.sw .dc-ck li{padding:7px 0}.sw .dc h4{font-size:21px}
.sw[data-pos="0"]{z-index:3;transform:translate(-50%,-50%);border-color:rgb(var(--line-br));box-shadow:0 40px 100px -40px rgb(0 0 0/.8)}
.sw[data-pos="-1"],.sw[data-pos="1"]{z-index:2;opacity:.6;filter:saturate(.85) brightness(.82);cursor:pointer}
.sw[data-pos="-1"]{transform:translate(calc(-50% - var(--cw) * .19 - 184px),-50%) scale(.62)}
.sw[data-pos="1"]{transform:translate(calc(-50% + var(--cw) * .19 + 184px),-50%) scale(.62)}
.sw:not([data-pos="0"]) *{pointer-events:none}
.sw-ticks{margin-top:24px}
.sw-copy{margin-top:40px;text-align:center}
.sw-c{display:flex;flex-direction:column;align-items:center;gap:14px}
.sw-c[hidden]{display:none}
.sw-c h3{font-size:clamp(26px,2.6vw,38px);line-height:1.08}
.sw-c>p:not(.fig){font-size:17px;line-height:1.55;color:rgb(var(--muted));max-width:560px;text-wrap:balance}
@media (min-width:1001px){.sw .ap{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:1000px){
  .sw-stage{height:auto}.sw-stage::before{display:none}
  .sw{position:relative;left:auto;top:auto;width:100%;height:auto;transform:none!important;opacity:1;filter:none;cursor:default}
  .sw[data-pos="-1"],.sw[data-pos="1"]{display:none}
  .sw:not([data-pos="0"]) *{pointer-events:auto}
  .sw-ticks{margin-top:32px}.sw-copy{margin-top:32px}
}
@media (max-width:760px){.sw .ops td{height:50px}.sw .pv{width:100%}}

/* ================= 07 USE-CASE CHOOSER: Orizon "Services". A smaller centre, three cards each side on curved wires, the title under it ================= */
.hub{position:relative;display:grid;grid-template-columns:260px minmax(0,340px) 260px;justify-content:space-between;align-items:center;margin-top:56px}
.hub::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,100%);height:120%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgb(30 46 86/.45),rgb(18 28 54/.16) 58%,rgb(var(--bg)/0))}
.hub .wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hub .wires path{fill:none;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.42;transition:opacity .4s var(--ease)}
.hub .wires path.on{opacity:1;filter:drop-shadow(0 0 5px currentColor)}
.hub-col{display:flex;flex-direction:column;gap:30px;position:relative;z-index:1}
.hc{position:relative;display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;cursor:pointer;border-radius:16px;border:1px solid rgb(var(--line-br)/.55);
  background:linear-gradient(180deg,rgb(var(--s2)/.85),rgb(var(--s1)/.85));padding:16px 18px 14px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.hub-col.l .hc:nth-child(2){left:14px;width:calc(100% - 14px)}.hub-col.r .hc:nth-child(2){width:calc(100% - 14px)}
.hc-top{display:flex;align-items:center;gap:12px;font:700 10.5px/1.2 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--muted))}
.hc-n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;border:1px solid rgb(var(--c)/.55);background:rgb(var(--c)/.13);color:rgb(var(--ink));font:800 13px/1 Cabinet,sans-serif;letter-spacing:0}
.hc b{display:block;font:800 19px/1.15 Cabinet,sans-serif;letter-spacing:-.015em;color:rgb(var(--ink))}
.hc-ft{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgb(var(--line));padding-top:10px;font:600 10px/1 Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgb(var(--c))}
.hc-ft .ic{width:12px;height:12px}
.hc:hover{border-color:rgb(var(--line-br))}
.hc.on{border-color:rgb(var(--c)/.85);background:linear-gradient(180deg,rgb(var(--c)/.16),rgb(var(--s1)/.88));box-shadow:0 0 40px -14px rgb(var(--c)/.55)}
.hub-centre{position:relative;z-index:1;margin:0}
.hub-centre .shot{border-radius:20px;border:1px solid rgb(var(--line-br));box-shadow:0 30px 80px -30px rgb(0 0 0/.75),0 0 80px -30px rgb(var(--a4)/.5)}
.hub-centre .play{width:52px;height:52px;margin:-26px 0 0 -26px}.hub-centre .play::before{left:21px;top:16px;border-left-width:15px;border-top-width:10px;border-bottom-width:10px}
.hub-centre .dur{position:absolute;right:12px;bottom:12px;font:700 12px/1 Inter,sans-serif;background:rgb(var(--bg)/.65);padding:6px 10px;border-radius:999px}
.hub-title{margin-top:72px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hub-out{display:flex;flex-direction:column;gap:6px;margin-top:20px}
.hub-out b{font:800 clamp(20px,1.9vw,26px)/1.2 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink))}
.hub-out span{font-size:15px;line-height:1.5;color:rgb(var(--muted));max-width:52ch;margin-inline:auto;text-wrap:balance}
.hub-title .cap{margin-top:18px}
@media (max-width:1000px){
  .hub{grid-template-columns:minmax(0,1fr);row-gap:28px;margin-top:40px}.hub .wires{display:none}
  .hub-centre{order:-1;width:min(420px,100%);margin-inline:auto}
  .hub-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hub-col.l .hc:nth-child(2){left:0;width:100%}.hub-col.r .hc:nth-child(2){width:100%}
  .hub-title{margin-top:56px}
}
@media (max-width:760px){.hub-col{grid-template-columns:minmax(0,1fr);gap:12px}.hc{padding:14px 16px 12px;gap:10px}.hc b{font-size:18px}}

/* ================= 08 PROOF: Orizon's stat band. One bordered band, big numbers in columns, a caption and its source under each ================= */
.sb{position:relative;border-radius:14px;border:1px solid rgb(var(--line-br)/.55);background:rgb(var(--s1)/.6);overflow:hidden;isolation:isolate}
.sb::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,120%);height:360px;transform:translate(-50%,-30%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgb(var(--a4)/.2),rgb(var(--a4)/.05) 62%,transparent)}
.sb-feat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end;padding:40px 44px 36px;border-bottom:1px solid rgb(var(--line-br)/.5)}
.sb-k{display:flex;align-items:center;gap:18px;font:700 12px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(var(--muted))}
.sb-k img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.sb-n{margin:.12em 0 0 -.03em;font:800 clamp(92px,13.4vw,192px)/.84 Cabinet,sans-serif;letter-spacing:-.06em;white-space:nowrap;color:transparent;
  background:linear-gradient(100deg,#2FB8C7 0%,#6C7EE3 55%,#A944FF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.sb-r{align-self:end;padding-bottom:6px}
.sb-l{font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:rgb(var(--body));max-width:520px;margin-bottom:18px}
.sb-l b{color:rgb(var(--ink));font-weight:600}
.sb-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sb-col{position:relative;display:flex;flex-direction:column;padding:34px 28px 26px;border-left:1px solid rgb(var(--line-br)/.5)}
.sb-col:first-child{border-left:0}
.sb-col::before{content:"";position:absolute;left:28px;top:0;width:36px;height:2px;border-radius:2px;background:rgb(var(--c))}
.sb-ck{font:700 12px/1.3 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--body))}
.sb-ck small{display:block;margin-top:6px;font:500 12.5px/1.3 Inter,sans-serif;letter-spacing:0;text-transform:none;color:rgb(var(--faint))}
.sb-cn{margin-top:40px;font:800 clamp(48px,5vw,72px)/.95 Cabinet,sans-serif;letter-spacing:-.05em;color:rgb(var(--ink));white-space:nowrap}
.sb-cn small{font-size:.5em;letter-spacing:-.03em;margin-left:.04em;color:rgb(var(--body))}
.sb-cl{margin-top:12px;font-size:15px;line-height:1.45;color:rgb(var(--body));max-width:22ch}
.sb-col .src{margin-top:auto;padding-top:20px;font-size:11.5px}
.sb-col>.src{border-top:0}
.sb-col .src::before{content:"";display:block;height:1px;background:rgb(var(--line));margin-bottom:14px}
@media (max-width:1000px){
  .sb-feat{grid-template-columns:1fr;gap:20px;padding:32px 28px 28px}
  .sb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-col:nth-child(3){border-left:0}.sb-col:nth-child(n+3){border-top:1px solid rgb(var(--line-br)/.5)}
}
@media (max-width:760px){
  .sb-feat{padding:26px 20px 24px}
  .sb-grid{grid-template-columns:1fr}.sb-col{border-left:0;padding:28px 20px 22px}.sb-col+.sb-col{border-top:1px solid rgb(var(--line-br)/.5)}.sb-col::before{left:20px}
  .sb-cn{margin-top:30px}
}

/* ---------- tail motion for the v5 sections (only under html.motion; motion-tail.js adds .prep then .go) ---------- */
.motion .sb.prep .sb-n{transition:clip-path 1.5s var(--ease),transform 1.5s var(--ease);clip-path:inset(-12% -8% -12% -8%)}
.motion .sb.prep:not(.go) .sb-n{clip-path:inset(0 0 100% 0);transform:translateY(60px)}
.motion .sb.prep .sb-k,.motion .sb.prep .sb-r{transition:opacity 1.1s var(--ease) .5s,transform 1.1s var(--ease) .5s}
.motion .sb.prep:not(.go) .sb-k,.motion .sb.prep:not(.go) .sb-r{opacity:0;transform:translateY(18px)}
.motion .sb.prep .sb-col{transition:opacity 1.1s var(--ease),transform 1.2s var(--ease);transition-delay:calc(var(--ci,0) * 150ms + 300ms)}
.motion .sb.prep:not(.go) .sb-col{opacity:0;transform:translateY(40px)}


/* =====================================================================================================================================
   HOME v6 MOTION (needs html.motion). P1 intro, P10 hovers, P15 ambient. One ease: cubic-bezier(.16,1,.3,1).
   ===================================================================================================================================== */
/* P1: copy stack waits for html.hero-in (set 300ms into the 900ms intro clock, SSWEB-5333), then 600ms house ease, 14px rise, no blur, delays --hd */
.motion .hero-stack>.hi{opacity:0;transform:translate3d(0,14px,0)}
.motion.hero-in .hero-stack>.hi{opacity:1;transform:none;filter:none;transition:opacity .6s var(--ease) var(--hd,0s),transform .6s var(--ease) var(--hd,0s)}
.motion.hero-settled .hero-stack>.hi{transition:none}   /* from here the scroll scrub writes these directly */
.motion .hero-scrim{opacity:0}
.motion.hero-in .hero-scrim{opacity:1;transition:opacity .6s var(--ease) .2s}
.motion.hero-settled .hero-scrim{transition:none}
.motion .hero .cue{opacity:0}
.motion.hero-in .hero .cue{opacity:1;transition:opacity .6s var(--ease) .9s}
.motion.hero-settled .hero .cue{transition:none}
/* the poster is the soft blue lift (painted at once); the wave layer cross-fades in over it, 600ms */
.motion .hero-wave{transition:opacity .6s ease}
.motion:not(.wave-on) .hero-wave{opacity:0}
/* P16: the line under the key word draws, 900ms house ease at +550ms */
.motion .hero-stack h1 .grad::after{content:"";display:block;height:3px;border-radius:3px;margin-top:10px;background:var(--spec);-webkit-text-fill-color:initial;transform:scaleX(0);transform-origin:0 50%}
.motion.hero-in .hero-stack h1 .grad::after{transform:none;transition:transform .9s var(--ease) .55s}
/* P15: the scroll cue breathes, 2s */
.motion .cue i{animation:cueLoop 2s ease-in-out infinite;transform-origin:50% 0}
@keyframes cueLoop{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}
/* P15/P17: live status dot, and the ledger row that is "running" (500ms tint) */
.motion .lg-live i{animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.4}}
.motion .lg-tbl tbody td{transition:background-color .5s var(--ease)}
.motion .lg-tbl tbody tr.tick td{background-color:rgb(var(--a4)/.1)}
.motion .lg-tbl tbody tr.tick.hot td{background-color:rgb(var(--emerald)/.09)}

/* P10 hover lift: 4px, accent border at 60%, a glow, 320ms house ease. Uses the individual `translate` property so it composes with the scroll scrub's transform */
@media (hover:hover) and (pointer:fine){
  .kc-card,.hc,.sb-col{transition:translate .32s var(--ease),border-color .28s ease,box-shadow .32s var(--ease),background .3s var(--ease)}
  .kc-card:hover,.hc:hover{translate:0 -4px;border-color:rgb(var(--c,var(--a4))/.6);box-shadow:0 14px 40px -8px rgb(0 0 0/.6),0 0 28px -4px rgb(var(--c,var(--a4))/.32)}
  .sb-col:hover{background:rgb(var(--c)/.05)}
  .rc[data-pos="-1"]:hover,.rc[data-pos="1"]:hover{opacity:.9;border-color:rgb(var(--a4)/.6)}
  .btn:not(.ghost){box-shadow:0 6px 22px -6px rgb(var(--emerald)/.35)}
  .btn:not(.ghost):hover{box-shadow:0 10px 30px -6px rgb(var(--emerald)/.5)}
  .btn.ghost:hover{border-color:rgb(var(--a3)/.7);background:rgb(var(--s2)/.8)}
}
.btn:not(.ghost){transition:transform .3s var(--ease),opacity .25s var(--ease),box-shadow .3s var(--ease)}

/* phones: the object sits centred above, the copy below (Orizon 390: object 110 to 180px above centre, copy at padding-top 45 to 52svh) */
@media (max-width:760px){
  /* SSWEB-5352 (iPhone 15): the copy sat a third of the screen down under an empty band; it now starts just under the object, which rides higher */
  .hero{align-items:flex-start;padding-top:calc(var(--nav) + 19svh);padding-bottom:112px;min-height:100svh}
  .hero-lift{top:calc(var(--nav) + 7svh);width:92vw;height:92vw}
  .hero-wave{top:calc(var(--nav) + 7svh);width:100vw;height:100vw}
  .hero-scrim{top:auto;bottom:0;transform:translate(-50%,0);height:62%}
  .hero>.dive{inset:0}
}


/* =====================================================================================================================================
   HOME R2 (Raph + Zak live review, 27 Oct 2026). Appended: everything below overrides or adds, so the shared rules above (used by other pages) stay put.
   H5 steps  H6 chooser video + lightbox  H7 comparator  H8 ledger faces  H9 three stops  H10 proof links + marquee
   ===================================================================================================================================== */

/* ---------- H5 steps: expand out, chips and badge follow, hover/focus lights one card and dims the rest ---------- */
.kc-card{--dim:1;outline:none}
.kc-card:focus-visible{outline:2px solid rgb(var(--c)/.9);outline-offset:6px;border-radius:16px}
.kc-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgb(var(--bg)/.5);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.kc-card h3,.kc-card>p,.kc-ico{transition:transform .45s var(--ease),color .3s var(--ease)}
/* --e is written by motion.js (0 to 1) while a card expands out; it is 1 (everything shown) everywhere else, so the static page and reduced motion are complete */
.kc-card .kc-n{transform:translateX(-50%) scale(calc(.45 + .55 * clamp(0, calc(var(--e,1) * 2.4), 1)));opacity:clamp(0, calc(var(--e,1) * 3), 1)}
.kc-chips{opacity:var(--dim,1);transition:opacity .45s var(--ease)}
.kc-chips li{opacity:clamp(0, calc((var(--e,1) - .55) * 2.4), 1);transition:border-color .3s var(--ease),background .3s var(--ease)}
.kc-chips.up li{transform:translate3d(0,calc((1 - var(--e,1)) * 18px),0)}
.kc-chips.dn li{transform:translate3d(0,calc((1 - var(--e,1)) * -18px),0)}
.kc-chips::before,.kc-chips::after{opacity:clamp(0, calc((var(--e,1) - .7) * 3.4), 1)}
.kc-card .kc-chips::before,.kc-card .kc-chips::after{transition:background .3s var(--ease)}
@media (hover:hover) and (pointer:fine){
  .kc-card{transition:translate .5s var(--ease),filter .5s var(--ease),border-color .28s ease,box-shadow .5s var(--ease),background .3s var(--ease)}
  /* the card you are on is lit and lifted; the others dim and slide away from it (right of it +x, left of it -x) */
  .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:not(:is(:hover,:focus-visible,.fv)){--dim:.45;filter:saturate(.6) brightness(.88)}
  .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:not(:is(:hover,:focus-visible,.fv))::after{opacity:1}
  .kc-card:is(:hover,:focus-visible,.fv) ~ .kc-card{translate:12px 0}
  .kc-card:has(~ .kc-card:is(:hover,:focus-visible,.fv)){translate:-12px 0}
  .kc-card:is(:hover,:focus-visible,.fv){translate:0 -8px;border-color:rgb(var(--c)/.9);z-index:3;
    background:linear-gradient(180deg,rgb(var(--c)/.2),rgb(var(--s2)/.92));box-shadow:0 26px 60px -16px rgb(0 0 0/.75),0 0 54px -6px rgb(var(--c)/.5)}
  .kc-card:is(:hover,:focus-visible,.fv) .kc-ico{transform:scale(1.12);background:rgb(var(--c)/.26)}
  .kc-card:is(:hover,:focus-visible,.fv) .kc-chips li{border-color:rgb(var(--c));background:linear-gradient(180deg,rgb(var(--c)/.28),rgb(var(--c)/.1))}
  .kc-card:is(:hover,:focus-visible,.fv) .kc-chips::before,.kc-card:is(:hover,:focus-visible,.fv) .kc-chips::after{background:rgb(var(--c))}
  .kc-card:is(:hover,:focus-visible,.fv) h3{color:#fff}
  .kc-card:is(:hover,:focus-visible,.fv) .kc-n{box-shadow:0 0 0 6px rgb(var(--bg)/.9),0 0 34px rgb(var(--c)/.8)}
}
@media (hover:none),(max-width:1000px){.kc-card:focus-visible{translate:none}}
/* the scene's steps stage: the page below the cards must not be hidden behind them while they expand */
.scene .kc{will-change:auto}
.scene .kc-card{will-change:transform,opacity}

/* ---------- H6 chooser: the centre object is a real muted loop; the pop-up is a lightbox over a blurred page ---------- */
.hub-centre .shot{background:rgb(var(--s1))}
.hub-centre .shot:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:4px}
.shot .cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.shot .cv.on{opacity:1}
.hub-centre .dur{display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em;transition:background .3s var(--ease)}
.hub-centre .dur::before{content:"";width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
/* v24: the clips are silent, so the active card no longer promises sound */
.lb{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.lb[hidden]{display:none}
.lb-bg{position:absolute;inset:0;background:rgb(var(--bg)/.55);-webkit-backdrop-filter:blur(22px) saturate(125%);backdrop-filter:blur(22px) saturate(125%);opacity:0;transition:opacity .45s var(--ease);cursor:pointer}
.lb.open .lb-bg{opacity:1}
.lb-dlg{position:relative;width:min(1080px,100%);max-height:100%;border-radius:20px;outline:none;opacity:0;transform:translate3d(0,26px,0) scale(.965);transition:opacity .5s var(--ease),transform .65s var(--ease)}
.lb.open .lb-dlg{opacity:1;transform:none}
.lb-page{border-radius:20px;border:1px solid rgb(var(--line-br)/.9);background:rgb(var(--s1));overflow:hidden;box-shadow:0 60px 140px -30px rgb(0 0 0/.9),0 0 120px -40px rgb(var(--a4)/.5)}
.lb-x{position:absolute;right:-14px;top:-14px;z-index:3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;cursor:pointer;color:rgb(var(--ink));border:1px solid rgb(var(--line-br));background:rgb(var(--s2));
  box-shadow:0 10px 30px -8px rgb(0 0 0/.8);transition:transform .3s var(--ease),border-color .3s var(--ease)}
.lb-x:hover{transform:scale(1.08);border-color:rgb(var(--a4))}
.lb-x .ic{width:18px;height:18px}
.lb-top{display:flex;align-items:center;gap:28px;padding:16px 26px;border-bottom:1px solid rgb(var(--line)/.8)}
.lb-top b{font:800 18px/1 Cabinet,sans-serif;letter-spacing:-.01em;color:rgb(var(--ink))}
.lb-nav{display:flex;gap:22px;margin-left:auto;font:500 13px/1 Inter,sans-serif;color:rgb(var(--muted))}.lb-nav i{font-style:normal}
.lb-cta{font:700 12px/1 Inter,sans-serif;color:#04231a;background:rgb(var(--emerald));padding:10px 14px;border-radius:10px}
.lb-body{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;padding:26px;align-items:center}
.lb-vid{border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#000;box-shadow:0 30px 70px -30px rgb(0 0 0/.9)}
.lb-vid video{width:100%;height:100%;object-fit:cover;display:block}
.lb-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.lb-side h3{font:800 22px/1.15 Cabinet,sans-serif;letter-spacing:-.015em;color:rgb(var(--ink))}
.lb-side p:not(.fig){font-size:14px;line-height:1.55;color:rgb(var(--muted))}
.lb-book{height:40px;font-size:13px}
html.lb-open{overflow:hidden}
@media (max-width:820px){
  .lb-bg{background:rgb(var(--bg)/.94);-webkit-backdrop-filter:none;backdrop-filter:none}
  .lb-body{grid-template-columns:1fr;padding:16px;gap:16px}.lb-nav,.lb-top .lb-cta{display:none}.lb-top{padding:14px 16px}
  .lb-x{right:6px;top:-52px}.lb-dlg{margin-top:44px}
  .lb-side{display:none}
}

/* ---------- H7: the dive hands over to "One list, two sends" without a bar. The ground is a gradient with a soft top (transparent at the section's top edge, full by 46svh), driven by --tbg ---------- */
.motion .scene+.sec{background:linear-gradient(rgb(var(--bg)/0),rgb(var(--bg)/calc(var(--tbg,0) * .85)) 24svh,rgb(var(--bg)/var(--tbg,0)) 52svh,rgb(var(--bg)/var(--tbg,0)))}

/* ---------- H8 faces: a real face wherever a small circle showed letters ---------- */
.av.face{padding:0;overflow:hidden;background:rgb(var(--s2))}
.av.face img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.ledger .lg-tbl td:first-child .av{width:40px;height:40px;border-width:2px}

/* ---------- H7 comparator: the page is a looping video; the boxes arrive on scroll (motion-tail.js adds .prep, then .go) ---------- */
.cmp-vid{position:relative;width:min(100%,236px);margin-inline:auto;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid rgb(var(--line-br)/.7);background:rgb(var(--s2));box-shadow:0 20px 40px -20px rgb(0 0 0/.7)}
.cmp-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-tag{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 3px;border-radius:999px;background:rgb(var(--bg)/.74);font:600 10.5px/1 Inter,sans-serif;color:rgb(var(--ink))}
.cmp-tag img{width:20px;height:20px;border-radius:50%;object-fit:cover}
@media (max-width:760px){.cmp-tag{font-size:9px;left:5px;bottom:5px}.cmp-tag img{width:16px;height:16px}}
.motion .cmp-hi{transform-origin:50% 0}
.motion .cmp.prep .cmp-hi{transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.motion .cmp.prep:not(.go) .cmp-hi{transform:scaleY(.2);opacity:0}
.motion .cmp.prep .cmp-card{transition:opacity .8s var(--ease),transform 1s var(--ease)}
.motion .cmp.prep:not(.go) .cmp-card{opacity:0;transform:translateY(46px) scale(.975)}
.motion .cmp.prep thead th{transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--hi,0) * 110ms + 250ms)}
.motion .cmp.prep:not(.go) thead th{opacity:0;transform:translateY(-22px)}
.motion .cmp.prep tbody tr>*{transition:opacity .9s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--ri,0) * 120ms + 600ms)}
.motion .cmp.prep:not(.go) tbody th{opacity:0;transform:translateX(-30px)}
.motion .cmp.prep:not(.go) tbody td.c1{opacity:0;transform:translateY(40px)}
.motion .cmp.prep:not(.go) tbody td.c2{opacity:0;transform:translateX(34px)}
.motion .cmp.prep .cmp-vid{transition:transform 1.1s var(--ease),opacity .9s var(--ease);transition-delay:.8s}
.motion .cmp.prep:not(.go) .cmp-vid{transform:scale(.86) translateY(24px);opacity:0}
.motion .cmp.prep .cmp-mail{transition:transform 1.1s var(--ease),opacity .9s var(--ease);transition-delay:.95s}
.motion .cmp.prep:not(.go) .cmp-mail{transform:translateX(56px) rotate(3.5deg);opacity:0}
.motion .cmp.prep .mc-del{transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s var(--ease);transition-delay:1.9s}
.motion .cmp.prep:not(.go) .mc-del{transform:scale(1.7) rotate(-6deg);opacity:0}
/* ticks and crosses land one by one, with a small overshoot, a beat after their row */
.motion .cmp.prep .cmp-t .ok,.motion .cmp.prep .cmp-t .no{transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .3s var(--ease);transition-delay:calc(var(--ri,0) * 120ms + 1100ms)}
.motion .cmp.prep:not(.go) .cmp-t .ok,.motion .cmp.prep:not(.go) .cmp-t .no{transform:scale(.6);opacity:0}
.motion .cmp.prep .cmp-big b{transition:transform .9s var(--ease),opacity .7s var(--ease);transition-delay:calc(var(--ri,0) * 120ms + 900ms)}
.motion .cmp.prep:not(.go) .cmp-big b{transform:translateY(16px) scale(.92);opacity:0}

/* ---------- H9 three stops: one row per stop ---------- */
.stops{display:flex;flex-direction:column;gap:clamp(40px,5.5vw,72px);max-width:1120px;margin-inline:auto}
.stop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center;padding-top:clamp(40px,5.5vw,72px);border-top:1px solid rgb(var(--line)/.8)}
.stop:first-child{border-top:0;padding-top:0}
.stop-t{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.stop-t h3{font:800 clamp(26px,2.6vw,36px)/1.1 Cabinet,sans-serif;letter-spacing:-.025em;color:rgb(var(--ink))}
.stop-t>p:not(.fig){font-size:16px;line-height:1.6;color:rgb(var(--muted));max-width:38ch}
.stop-ok{position:relative;display:inline-grid;margin-top:8px;height:46px;min-width:176px;border-radius:12px;overflow:hidden}
.stop-ok>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:0 20px;font:700 14px/1 Inter,sans-serif;white-space:nowrap}
.stop-ok .w{color:rgb(var(--body));border:1px solid rgb(var(--line-br)/.8);background:rgb(var(--s2)/.6);border-radius:12px}
.stop-ok .w .ic{opacity:.5}
.stop-ok .d{background:rgb(var(--emerald));color:#04231a;border-radius:12px;opacity:0;transform:scale(.96)}
.stop.done .stop-ok .d{opacity:1;transform:none}
.stop.done .stop-ok .w{opacity:0}
.stop-ok::after{content:"";position:absolute;inset:0;border-radius:12px;border:2px solid rgb(var(--emerald));opacity:0;pointer-events:none}
.stop.done .stop-ok::after{animation:apRing .9s var(--ease) both}
.motion .stop-ok .w,.motion .stop-ok .d{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sv{max-width:640px;width:100%;justify-self:end}
.sv .win-bar .sv-file{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:rgb(var(--body))}
.sv .win-bar .sv-file .ic{width:14px;height:14px;color:rgb(var(--a1))}
.sv .win-bar .url{margin-inline:auto}
.sv .win-bar .sv-file{margin-right:auto;margin-left:14px}
.sv-count{margin-left:auto;font-size:12.5px;color:rgb(var(--muted))}.sv-count b{color:rgb(var(--ink));font-weight:700;font-variant-numeric:tabular-nums}
.sv-rows{padding:6px 18px}
.sv-rows li{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:14px;height:56px;border-bottom:1px solid rgb(var(--line)/.7)}
.sv-rows li:last-child{border-bottom:0}
.sv-rows .av{width:38px;height:38px;border-width:2px}
.sv-rows b,.sv-tile b,.sv-to b{display:block;font:600 14px/1.25 Inter,sans-serif;color:rgb(var(--ink))}
.sv-rows small,.sv-tile small,.sv-to small{display:block;font:400 12.5px/1.3 Inter,sans-serif;color:rgb(var(--faint));margin-top:2px}
.sv-foot{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid rgb(var(--line));background:rgb(var(--s2)/.45);font-size:12.5px;color:rgb(var(--muted))}
.sv-list .sv-foot .wb{width:110px;flex:none}.sv-list .sv-foot .wb i{width:100%}
.sv-page .sv-vid{aspect-ratio:16/9;background:#000}
.sv-page .sv-vid video{width:100%;height:100%;object-fit:cover;display:block}
.sv-meta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid rgb(var(--line))}
.sv-to{display:flex;align-items:center;gap:12px}
.sv-watch{display:flex;align-items:center;gap:12px;font-size:12.5px;color:rgb(var(--muted))}.sv-watch .wb{width:120px}.sv-watch .wb i{width:100%}.sv-watch b{color:rgb(var(--emerald));font-weight:700;font-variant-numeric:tabular-nums}
.sv-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px 18px}
.sv-tile{margin:0;display:flex;flex-direction:column;gap:9px}
.sv-tv{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:rgb(var(--s2));border:1px solid rgb(var(--line-br)/.7)}
.sv-tv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-badge{position:absolute;left:8px;bottom:8px;width:30px;height:30px;border-radius:50%;overflow:hidden;border:2px solid rgb(var(--ink));box-shadow:0 4px 12px rgb(0 0 0/.5)}
.sv-badge img{width:100%;height:100%;object-fit:cover;display:block}
.sv-tile figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px}
.sv-tile .pill{height:24px;font-size:11.5px;padding:0 9px}
.sv-run .sv-foot{justify-content:space-between}.sv-sent b{color:rgb(var(--ink));font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .stop{grid-template-columns:1fr;gap:26px}.sv{justify-self:stretch;max-width:none}
}
@media (max-width:520px){.sv-tiles{gap:10px;padding:12px}.sv-tile .pill{display:none}.sv-rows{padding:4px 12px}.sv-rows li{grid-template-columns:38px minmax(0,1fr) auto;gap:10px}.sv-rows .vf{font-size:0}.sv-rows .vf .ic{width:18px;height:18px;font-size:12px}}
/* the pictures play once, on entry (motion-tail.js adds .prep then .go). Static and reduced motion: everything shown, the list complete. */
.motion .stop.prep .sv-file,.motion .stop.prep .sv-count{transition:opacity .7s var(--ease),transform .8s var(--ease)}
.motion .stop.prep:not(.go) .sv-file{opacity:0;transform:translateY(-16px)}
.motion .stop.prep:not(.go) .sv-count{opacity:0}
.motion .stop.prep .sv-rows li{transition:opacity .55s var(--ease),transform .9s cubic-bezier(.22,1.2,.36,1);transition-delay:calc(var(--ri,0) * 140ms + 450ms)}
.motion .stop.prep:not(.go) .sv-rows li{opacity:0;transform:translateY(-40px)}
.motion .stop.prep .sv-rows .av{transition:transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--ri,0) * 140ms + 650ms)}
.motion .stop.prep:not(.go) .sv-rows .av{transform:scale(.3)}
.motion .stop.prep .sv-rows .vf{transition:opacity .4s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--ri,0) * 140ms + 1000ms)}
.motion .stop.prep:not(.go) .sv-rows .vf{opacity:0;transform:scale(.4)}
.motion .stop.prep .sv-list .sv-foot .wb i,.motion .stop.prep.sv-list .wb i{transform-origin:0 50%;transition:transform 1.3s var(--ease) .6s}
.motion .stop.prep:not(.go) .sv-foot .wb i{transform:scaleX(0)}
.motion .stop.prep .sv-foot{transition:opacity .8s var(--ease) 1.5s}
.motion .stop.prep:not(.go) .sv-foot{opacity:0}
.motion .stop.prep .sv-page .sv-vid{transition:transform 1.1s var(--ease),opacity .9s var(--ease),clip-path 1.1s var(--ease);transform-origin:50% 0}
.motion .stop.prep:not(.go) .sv-page .sv-vid{opacity:0;clip-path:inset(0 0 100% 0)}
.motion .stop.prep .sv-meta>*{transition:opacity .8s var(--ease),transform .9s var(--ease)}
.motion .stop.prep .sv-meta>:nth-child(1){transition-delay:.7s}.motion .stop.prep .sv-meta>:nth-child(2){transition-delay:.85s}
.motion .stop.prep:not(.go) .sv-meta>*{opacity:0;transform:translateY(16px)}
.motion .stop.prep .sv-watch .wb i{transform-origin:0 50%;transition:transform 1.6s var(--ease) 1s}
.motion .stop.prep:not(.go) .sv-watch .wb i{transform:scaleX(0)}
.motion .stop.prep .sv-tile{transition:opacity .8s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--ti,0) * 170ms + 300ms)}
.motion .stop.prep:not(.go) .sv-tile{opacity:0;transform:translateY(34px) scale(.92)}
.motion .stop.prep .sv-badge{transition:transform .55s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--ti,0) * 170ms + 900ms)}
.motion .stop.prep:not(.go) .sv-badge{transform:scale(0)}
.motion .stop.prep .sv-run .win-bar,.motion .stop.prep .sv-page .win-bar{transition:opacity .6s var(--ease)}

/* ---------- H10 proof: the cards are links; "Clients we built for" is a CSS-only marquee (live site: two rows, opposite ways, edge-faded) ---------- */
a.sb-col,a.sb-feat{color:inherit;text-decoration:none}
a.sb-col,a.sb-feat{transition:background .35s var(--ease)}
a.sb-feat:hover,a.sb-feat:focus-visible{background:rgb(var(--a4)/.05)}
a.sb-col:hover,a.sb-col:focus-visible{background:rgb(var(--c)/.07)}
a.sb-col:focus-visible,a.sb-feat:focus-visible{outline:2px solid rgb(var(--a4));outline-offset:-4px;border-radius:0}
.sb-more{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font:700 11px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--c,var(--a4)));opacity:.8;transition:opacity .3s var(--ease),gap .3s var(--ease)}
.sb-feat .sb-more{--c:var(--a1)}
.sb-more .ic{width:12px;height:12px;transition:transform .3s var(--ease)}
a:hover>.sb-more,a:focus-visible>.sb-more,a:hover .sb-more,a:focus-visible .sb-more{opacity:1;gap:10px}
a:hover>.sb-more .ic,a:hover .sb-more .ic{transform:translate(2px,-2px)}
.marks{margin-top:96px}
.mq{display:flex;flex-direction:column;gap:4px;max-width:1120px;margin-inline:auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.mq-row{overflow:hidden;padding:14px 0}
.mq-track{display:flex;width:max-content;animation:mqScroll 40s linear infinite;will-change:transform}
.mq-row.rev .mq-track{animation-direction:reverse;animation-duration:46s}
.mq:focus-within .mq-track{animation-play-state:paused}
/* SSWEB-5333: home.js marks loops that are off screen; they hold still until they come back */
.mq.off .mq-track,.motion .lg-live.off i,.motion .cue.off i{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex:none}
.mq-set li{display:flex;align-items:center;margin:0 clamp(26px,3.2vw,46px)}
.mq-set a{display:flex;border-radius:6px;outline-offset:6px}
.mq-set img{display:block;height:30px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1);opacity:.62;transition:opacity .3s var(--ease)}
.mq-set li:hover img{opacity:1}
.mq-set img[src*="capium"]{height:22px}.mq-set img[src*="knight-frank"]{height:34px}.mq-set img[src*="futuresafe"]{height:28px}.mq-set img[src*="oanda"]{height:24px}
@keyframes mqScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* reduced motion: a still row, one set, centred and wrapped */
html.rm .mq-track,.rm .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
html.rm .mq-set[aria-hidden="true"],html.rm .mq-set li[aria-hidden="true"]{display:none}
html.rm .mq-set{flex-wrap:wrap;justify-content:center;row-gap:14px}
html.rm .mq{-webkit-mask-image:none;mask-image:none}
@media (prefers-reduced-motion:reduce){
  .mq-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .mq-set[aria-hidden="true"],.mq-set li[aria-hidden="true"]{display:none}
  .mq-set{flex-wrap:wrap;justify-content:center;row-gap:14px}
  .mq{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:760px){.marks{margin-top:64px}.mq-set img{height:24px}.mq-set img[src*="capium"]{height:18px}.mq-set img[src*="knight-frank"]{height:28px}}


/* =====================================================================================================================================
   R3 H2 (Raph review 28 Oct 2026): the How-it-works pipeline.
   The thin full-width line behind the boxes is gone. Short connectors join each box to the next (they live in the gap, drawn by the left box's ::before).
   Hover or keyboard focus on a box: it glows, its connector lights, and the glow travels on, about half of the next box catches it (.kc-lit, left-weighted),
   then a fainter wash reaches the one after. The chips above and below each box light individually and open a one-line subheading.
   Brand: ground #060A14, spectrum --a1..--a7, house ease. Emerald is not used here (it is for actions).
   ===================================================================================================================================== */
.steps .kc{--gap:36px}
@media (min-width:1001px){.steps .kc{column-gap:var(--gap)}}
.steps .kc-card{isolation:isolate;--pc:var(--c)}
.steps .kc-card:nth-child(1){--nc:var(--a3)}
.steps .kc-card:nth-child(2){--nc:var(--a5);--pc:var(--a1)}
.steps .kc-card:nth-child(3){--nc:var(--a7);--pc:var(--a3)}
.steps .kc-card:nth-child(4){--pc:var(--a5)}
/* connector: box centre to the next box centre, only the gap shows (the boxes sit over the rest) */
.steps .kc-card:not(:last-child)::before{content:"";position:absolute;left:100%;top:50%;width:var(--gap);height:2px;margin-top:-1px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,rgb(var(--c)/.6),rgb(var(--nc)/.6));opacity:clamp(0,calc((var(--e,1) - .7) * 3.4),1);
  transition:height .4s var(--ease),margin-top .4s var(--ease),width .5s var(--ease),top .5s var(--ease),box-shadow .5s var(--ease),filter .5s var(--ease)}
/* the soft glow a box picks up from the one before it: left-weighted, fades out by about the middle of the box */
.kc-lit{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(62% 130% at 0% 50%,rgb(var(--pc)/.46),rgb(var(--pc)/.16) 46%,transparent 74%);
  box-shadow:0 0 38px -8px rgb(var(--pc)/.55),inset 1px 0 0 rgb(var(--pc)/.55);transition:opacity .7s var(--ease)}

/* chips: individually hoverable / focusable, same glow, a one-line subheading opens inside */
.steps .kc-chips li{position:relative;outline:none;cursor:default;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .45s var(--ease),max-width .5s var(--ease),translate .4s var(--ease)}
.steps .kc-chips li small{display:block;max-height:0;opacity:0;overflow:hidden;margin-top:-8px;font:500 11px/1.3 Inter,system-ui,sans-serif;color:rgb(var(--body));
  transition:max-height .45s var(--ease),opacity .35s var(--ease),margin .45s var(--ease)}
.steps .kc-chips li:focus-visible{outline:2px solid rgb(var(--c)/.9);outline-offset:3px}
@media (max-width:1000px){.steps .kc-chips li small{display:none}.steps .kc-card::before{display:none}}
@media (hover:none){.steps .kc-chips li small{display:none}}

@media (hover:hover) and (pointer:fine) and (min-width:1001px){
  /* 1. the box you are on: its connector lights (the lift is cancelled so the line stays level with the next box) */
  .steps .kc-card:is(:hover,:focus-visible,.fv):not(:last-child)::before{top:calc(50% + 8px);width:calc(var(--gap) + 12px);height:3px;margin-top:-1.5px;
    background:linear-gradient(90deg,rgb(var(--c)),rgb(var(--nc)));box-shadow:0 0 14px 1px rgb(var(--c)/.75),0 0 30px 4px rgb(var(--nc)/.4)}
  .steps .kc-card:has(+ .kc-card:is(:hover,:focus-visible,.fv)):not(:first-child)::before,
  .steps .kc-card:has(+ .kc-card:is(:hover,:focus-visible,.fv))::before{width:calc(var(--gap) + 12px)}
  /* 2. the glow travels: the next box (soft, left half), its connector (fainter), the box after (fainter still) */
  .steps .kc-card:is(:hover,:focus-visible,.fv) + .kc-card > .kc-lit{opacity:1;transition-delay:.14s}
  .steps .kc-card:is(:hover,:focus-visible,.fv) + .kc-card:not(:last-child)::before{box-shadow:0 0 12px rgb(var(--c)/.5);filter:brightness(1.5);transition-delay:.34s}
  .steps .kc-card:is(:hover,:focus-visible,.fv) + .kc-card + .kc-card > .kc-lit{opacity:.55;transition-delay:.5s}
  /* the boxes the glow reaches are not dimmed with the rest (they are part of the flow) */
  .steps .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:is(:hover,:focus-visible,.fv) + .kc-card{--dim:1;filter:none}
  .steps .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:is(:hover,:focus-visible,.fv) + .kc-card::after{opacity:0}
  .steps .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:is(:hover,:focus-visible,.fv) + .kc-card + .kc-card{filter:saturate(.8) brightness(.94)}
  .steps .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:is(:hover,:focus-visible,.fv) + .kc-card + .kc-card::after{opacity:.45}
  .steps .kc-card:is(:hover,:focus-visible,.fv) + .kc-card{border-color:rgb(var(--pc)/.55)}
  /* 3. a chip on its own: the same glow, plus its stem, and the subheading opens (the chip widens to hold it) */
  .steps .kc-chips li:is(:hover,:focus-visible){translate:0 -3px;max-width:262px;border-color:rgb(var(--c));
    background:linear-gradient(180deg,rgb(var(--c)/.4),rgb(var(--c)/.14));box-shadow:0 0 0 1px rgb(var(--c)/.55),0 0 30px -2px rgb(var(--c)/.7)}
  .steps .kc-chips li:is(:hover,:focus-visible) small{max-height:3em;opacity:1;margin-top:0}
  .steps .kc-chips:has(li:is(:hover,:focus-visible))::before,.steps .kc-chips:has(li:is(:hover,:focus-visible))::after{background:rgb(var(--c));box-shadow:0 0 10px rgb(var(--c)/.9)}
}
@media (prefers-reduced-motion:reduce){.steps .kc *,.steps .kc-card::before{transition-duration:.01s !important;transition-delay:0s !important}}


/* ---------- H7 chooser tidy (30 Oct 2026): heading above the cards, calmer card footers, one even grid below 1000px ---------- */
.chooser .hub{margin-top:48px}
.hub-title{margin-top:44px}
.hc-ft{font:600 13px/1.2 Inter,sans-serif;letter-spacing:0;text-transform:none;color:rgb(var(--muted))}
.hc.on .hc-ft{color:rgb(var(--c))}
@media (max-width:1000px){
  .hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .hub-centre{grid-column:1/-1;margin-bottom:12px}
  .hub-col{display:contents}
  .hub-col .hc,.hub-col.l .hc:nth-child(2),.hub-col.r .hc:nth-child(2){left:0;width:100%}
  .hub-title{margin-top:36px}
}
@media (max-width:600px){
  .chooser .hub{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:36px}
  .hc{gap:8px}
  .hc:not(.on) .hc-ft{display:none}
}

/* ---------- H8 (30 Oct 2026): side stage rail only where the gutter is wide enough to clear the content ---------- */
/* H9 (30 Oct 2026): the centre preview is no longer a button */
.hub-centre .shot{cursor:default}

/* =====================================================================================================================================
   v21 (2 Nov 2026): home feedback round. Steps hover calmer, chooser says who it is for, proof logos, the ledger as a live feed.
   ===================================================================================================================================== */
/* steps: one card lifts 4px and lights; the others stay put and dim a little, and only after the pointer has rested 140ms, so sweeping across does not flicker */
@media (hover:hover) and (pointer:fine){
  .kc-card:is(:hover,:focus-visible,.fv) ~ .kc-card,.kc-card:has(~ .kc-card:is(:hover,:focus-visible,.fv)){translate:none}
  .kc-card:is(:hover,:focus-visible,.fv){translate:0 -4px;transition-delay:.06s}
  .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:not(:is(:hover,:focus-visible,.fv)){--dim:.75;filter:saturate(.85) brightness(.95);transition-delay:.14s}
  .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:not(:is(:hover,:focus-visible,.fv))::after{opacity:.45;transition-delay:.14s}
}
/* chooser: who the example was sent to */
.hub-out .hub-who{display:block;margin-top:4px;font:600 11px/1.4 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--faint))}
/* proof: client logos on every card */
.sb-ck img.sb-logo{display:block;height:22px;width:auto;max-width:150px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1);opacity:.88}
.sb-ck .sb-word{display:block;font:800 17px/22px Cabinet,sans-serif;letter-spacing:-.01em;text-transform:none;color:rgb(var(--ink))}
.sb-k span{letter-spacing:.16em}
.sb-more.sb-soon{color:rgb(var(--faint))}
/* ledger: the live feed */
.lg-live i{animation:lgPulse 2s cubic-bezier(0.23, 1, 0.32, 1) infinite}
@keyframes lgPulse{0%{box-shadow:0 0 0 0 rgb(var(--a1)/.6)}70%,100%{box-shadow:0 0 0 7px rgb(var(--a1)/0)}}
.lg-ping{display:flex;align-items:center;gap:10px;min-height:40px;padding:9px 28px;border-top:1px solid rgb(var(--line));font-size:13px;color:rgb(var(--faint))}
.lg-ping i{flex:none;width:7px;height:7px;border-radius:50%;background:rgb(var(--line-br))}
.lg-ping span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-ping.on{color:rgb(var(--ink))}
.lg-ping.on i{background:rgb(var(--emerald))}
.lg-ping.on span{animation:lgIn .5s cubic-bezier(0.23, 1, 0.32, 1)}
@keyframes lgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.lg-tbl tbody tr.ping td{animation:lgFlash 1.6s cubic-bezier(0.23, 1, 0.32, 1)}
@keyframes lgFlash{0%,30%{background-color:rgb(var(--emerald)/.16)}100%{background-color:rgb(var(--emerald)/.035)}}
.lg-tbl tbody tr.ping td:first-child{box-shadow:inset 3px 0 0 rgb(var(--emerald))}
.matrix i.pop{animation:lgPop .7s cubic-bezier(0.23, 1, 0.32, 1)}
@keyframes lgPop{0%{transform:scale(.95);opacity:0}50%{transform:scale(1.8);opacity:1}100%{transform:scale(1)}}
#tally b.bump{animation:lgIn .45s cubic-bezier(0.23, 1, 0.32, 1)}
.ledger .lg-tbl tbody,.ledger .matrix{transition:opacity .45s cubic-bezier(0.23, 1, 0.32, 1)}
.ledger.fade .lg-tbl tbody,.ledger.fade .matrix{opacity:.15}
#engine .lg-ping{padding-inline:20px}
@media (max-width:760px){.lg-ping{padding-inline:16px}#engine .lg-ping{padding-inline:16px}}
@media (prefers-reduced-motion:reduce){.lg-live i{animation:none}}
/* v22: while the step cards fly in or the page is scrolling, hover is off, so cards passing under a still pointer do not flash their glow and dim mid-flight */
.steps .kc.busy .kc-card{pointer-events:none}
.motion .steps .kc-card{will-change:transform,opacity}

/* v23 (2 Nov): moving between a chip and its box is seamless.
   1. The chip rows reach down/up to the box (padding fills the gap), so the pointer never leaves the card while crossing; the stems are re-anchored to match.
   2. A hovered chip no longer widens or grows (that re-wrapped its text mid-move): it only glows, and its subheading floats beside it, opacity and a 4px rise only.
   3. Shorter, undelayed state changes so quick flicks keep up. */
@media (min-width:1001px){
  .steps .kc-chips.up{bottom:100%;padding-bottom:43px}
  .steps .kc-chips.dn{top:100%;padding-top:26px}
  .steps .kc-chips.up::after{top:auto;bottom:21px;height:22px}
  .steps .kc-chips.dn::before{bottom:auto;top:0;height:26px}
}
@media (hover:hover) and (pointer:fine) and (min-width:1001px){
  .steps .kc-chips li{transition:border-color .2s cubic-bezier(0.23, 1, 0.32, 1),background .2s cubic-bezier(0.23, 1, 0.32, 1),box-shadow .25s cubic-bezier(0.23, 1, 0.32, 1)}
  .steps .kc-chips li:is(:hover,:focus-visible){translate:none;max-width:138px}
  .steps .kc-chips li small{position:absolute;left:50%;max-height:none;margin:0;width:max-content;max-width:220px;padding:6px 10px;border-radius:8px;
    background:rgb(var(--bg)/.94);border:1px solid rgb(var(--c)/.5);color:rgb(var(--body));pointer-events:none;
    opacity:0;transform:translate(-50%,4px);transition:opacity .16s cubic-bezier(0.23, 1, 0.32, 1),transform .16s cubic-bezier(0.23, 1, 0.32, 1)}
  .steps .kc-chips.up li small{bottom:calc(100% + 8px)}
  .steps .kc-chips.dn li small{top:calc(100% + 8px);transform:translate(-50%,-4px)}
  .steps .kc-chips li:is(:hover,:focus-visible) small{max-height:none;margin:0;opacity:1;transform:translate(-50%,0)}
  .steps .kc-card{transition:translate .3s cubic-bezier(0.23, 1, 0.32, 1),filter .3s cubic-bezier(0.23, 1, 0.32, 1),border-color .2s ease,box-shadow .3s cubic-bezier(0.23, 1, 0.32, 1),background .25s ease}
  .steps .kc-card:is(:hover,:focus-visible,.fv){transition-delay:0s}
  .steps .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:not(:is(:hover,:focus-visible,.fv)),
  .steps .kc:has(.kc-card:is(:hover,:focus-visible,.fv)) .kc-card:not(:is(:hover,:focus-visible,.fv))::after{transition-delay:.08s}
  .steps .kc-card::after{transition:opacity .3s cubic-bezier(0.23, 1, 0.32, 1)}
  .steps .kc-card h3,.steps .kc-card>p,.steps .kc-ico{transition:transform .25s cubic-bezier(0.23, 1, 0.32, 1),color .2s ease}
}

/* ---------- v24 chooser: the centre is the prospect's page, not just the clip. Address bar, greeting by name, the video, one next step. ---------- */
@media (min-width:1001px){.hub{grid-template-columns:250px minmax(0,390px) 250px}}
.cpg{--c:var(--a1);border-radius:18px;overflow:hidden;border:1px solid rgb(var(--line-br));background:rgb(var(--s1));box-shadow:0 30px 80px -30px rgb(0 0 0/.75),0 0 80px -30px rgb(var(--c)/.45)}
.cpg-bar{height:38px;padding:0 12px;gap:10px}.cpg-bar .dots i{width:8px;height:8px}
.cpg-bar .url{height:24px;font-size:11px;max-width:none;justify-content:flex-start;padding:0 10px;overflow:hidden;white-space:nowrap}
.cpg-bar .url span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cpg-body{display:flex;flex-direction:column;gap:12px;padding:14px 14px 16px}
.cpg-hi{display:flex;align-items:center;gap:10px;min-height:44px}
.cpg-hi .av{width:30px;height:30px;flex:none;border-width:2px}
.cpg-hi b{font:800 17px/1.2 Cabinet,sans-serif;letter-spacing:-.015em;color:rgb(var(--ink));text-wrap:balance}
.hub-centre .cpg .shot{border-radius:10px;border:1px solid rgb(var(--line-br)/.7);box-shadow:none}
.cpg-cta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cpg-btn{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:10px;background:rgb(var(--c));color:#04121f;font:700 13px/1 Inter,sans-serif;white-space:nowrap}
.cpg-note{font:600 10.5px/1.3 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:rgb(var(--muted));text-align:right}
.motion .cpg.swap .cpg-hi b,.motion .cpg.swap .cpg-hi .av,.motion .cpg.swap .cpg-cta>*,.motion .cpg.swap .url span{animation:pgIn .42s cubic-bezier(.23,1,.32,1) both}
.motion .cpg.swap .cpg-cta>*{animation-delay:.06s}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1000px){.hub-centre{width:min(440px,100%)}}
@media (prefers-reduced-motion:reduce){.cpg.swap *{animation:none!important}}
/* v24: fourth stop, results. Pills sit where the Checked ticks sit on the list. */
.sv-res .sv-rows .pill{height:24px;font-size:11.5px;padding:0 10px}
.motion .stop.prep .sv-rows .pill{transition:opacity .4s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--ri,0) * 140ms + 1000ms)}
.motion .stop.prep:not(.go) .sv-rows .pill{opacity:0;transform:scale(.6)}
@media (max-width:520px){.sv-res .sv-rows .pill{padding:0 8px;font-size:11px}}
/* v24: FutureSafe review under the results */
.rvw{margin:28px 0 0;padding:clamp(28px,4vw,48px) clamp(24px,4vw,52px);border-radius:14px;border:1px solid rgb(var(--line-br)/.55);background:rgb(var(--s1)/.6);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"k k" "q m" "by m";gap:22px 56px;align-items:start;scroll-margin-top:96px}
.rvw-k{grid-area:k;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.rvw-k img{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.rvw-stars{display:inline-flex;align-items:center;gap:10px;color:rgb(var(--emerald));font-size:16px;letter-spacing:.12em}
.rvw-stars small{font:600 12px/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--muted))}
.rvw-q{grid-area:q;margin:0;font:700 clamp(24px,2.5vw,34px)/1.22 Cabinet,sans-serif;letter-spacing:-.02em;color:rgb(var(--ink))}
.rvw-more{grid-area:m;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;align-self:center}
.rvw-more li{padding-left:18px;border-left:2px solid rgb(var(--a2)/.6);font-size:16px;line-height:1.5;color:rgb(var(--body))}
.rvw-by{grid-area:by;display:flex;gap:10px;align-items:baseline;font-size:14px;color:rgb(var(--muted))}
.rvw-by b{color:rgb(var(--ink));font-weight:600}
.rvw-by span::before{content:"·";margin-right:10px}
@media (max-width:900px){.rvw{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "q" "by" "m"}}
/* v26: phone fixes from the layout pass */
@media (hover:none),(max-width:1000px){.cpg-btn{height:44px;padding:0 18px}}
@media (max-width:520px){.rvw{padding:24px 20px;gap:18px}.rvw-q{font-size:22px}}
@media (max-width:400px){.cmp-big b{font-size:18px}}
/* v26: comparator ticks line up in one column; headings balance; proof links share a baseline */
@media (min-width:761px){
  .cmp-t tr:not(.cmp-big):not(.cmp-pic) td.c1,.cmp-t tr:not(.cmp-big):not(.cmp-pic) td.c2{text-align:left;padding-left:54px;text-indent:-34px}
  .cmp-t tr:not(.cmp-big):not(.cmp-pic) td .ok,.cmp-t tr:not(.cmp-big):not(.cmp-pic) td .no{text-indent:0}
}
.comparator h2,.comparator .sec-head p,.control h2,.chooser h2{text-wrap:balance}
.sb-col .sb-more{margin-top:auto;padding-top:16px}

/* v27: approve buttons settle in softly. The old face fades first, the green face eases in after it, the tick lands last and the ring is a faint, short breath */
.motion .stop-ok .w{transition:opacity .35s cubic-bezier(.23,1,.32,1)}
.motion .stop-ok .d{transform:scale(.985);transition:opacity .7s cubic-bezier(.23,1,.32,1) .1s,transform .8s cubic-bezier(.23,1,.32,1) .1s}
.motion .stop-ok .d .ic{opacity:0;transform:scale(.7);transition:opacity .4s cubic-bezier(.23,1,.32,1) .35s,transform .5s cubic-bezier(.23,1,.32,1) .35s}
.motion .stop.done .stop-ok .d .ic{opacity:1;transform:none}
.motion .stop.done .stop-ok::after{animation:apSoft 1.3s cubic-bezier(.23,1,.32,1) .3s both}
@keyframes apSoft{from{opacity:.4;transform:scale(1)}to{opacity:0;transform:scale(1.04,1.12)}}
@media (prefers-reduced-motion:reduce){.stop.done .stop-ok::after{animation:none}}

/* SSWEB-5352: on phones the comparator is two columns, not three. Each row's label becomes a small caption strip across both, so the
   two answers get the full width and start level with each other. The lifted column box is drawn per cell here, so no caption is cut by its edge */
@media (max-width:760px){
  .cmp-t,.cmp-t thead,.cmp-t tbody{display:block}
  .cmp-t colgroup,.cmp-t thead th.c0,.cmp-hi{display:none}
  .cmp-t tr{display:grid;grid-template-columns:1fr 1fr}
  .cmp-t thead th{height:auto;padding:18px 10px 16px}
  .cmp-t thead th.c1{border-radius:14px 14px 0 0;box-shadow:inset 0 3px 0 rgb(var(--a1)/.9)}
  .cmp-t thead th.c1,.cmp-t tbody td.c1{background:linear-gradient(180deg,rgb(var(--a4)/.26),rgb(var(--a4)/.14));border-left:1px solid rgb(var(--a4)/.6);border-right:1px solid rgb(var(--a4)/.6)}
  .cmp-t tbody tr:last-child td.c1{border-radius:0 0 14px 14px;border-bottom:1px solid rgb(var(--a4)/.5)}
  .cmp-t tbody th.c0{grid-column:1/-1;padding:9px 12px 8px;border-bottom:0;background:rgb(var(--bg)/.55);text-align:center;font:700 10px/1.2 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgb(var(--faint))}
  .cmp-t tbody td{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:12px 10px 16px;font-size:13px;line-height:1.35}
  .cmp-t .cmp-pic td{padding:14px 10px 18px;justify-content:center}
  .cmp-tag{display:none}   /* at this size the pill covered the video's own title and presenter circle */
  .cmp-big td,.cmp-big th{height:auto}.cmp-big td{justify-content:center;min-height:64px}.cmp-big b{font-size:21px}
  .cmp-t .ok,.cmp-t .no{margin:0 0 6px}
  .cmp-tag picture{display:flex;flex-shrink:0}
}