/* instiv2: RupeeCase landing preview. Institutional, image led, layers that peel. */
/* Metric matched fallbacks: text set in Arial / Courier New while Inter and JetBrains Mono load takes the same width and height, so the font swap moves nothing (CLS). */
@font-face { font-family: "Inter Fallback"; font-weight: 100 549; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 106.6%; ascent-override: 90.9%; descent-override: 22.7%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; font-weight: 550 900; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 102%; ascent-override: 95%; descent-override: 23.7%; line-gap-override: 0%; }
@font-face { font-family: "JBM Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Cousine"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }
:root {
  --ink: #05080F;
  --navy: #0D1F3C;
  --navy-2: #13294D;
  --line: rgba(214, 226, 255, 0.14);
  --text: #F2F5FB;
  --muted: rgba(226, 233, 246, 0.78);
  --faint: rgba(226, 233, 246, 0.62);
  --accent: #7FB2FF;
  --gain: #3DDC97;
  --glass: rgba(10, 18, 34, 0.46);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --r: 18px;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --pad: clamp(20px, 5vw, 72px);
  --hdr: 68px;
  /* themed surfaces (light is the brand default; dark below) */
  --page: #EEF1F6;
  --page-2: #FFFFFF;
  --page-text: #0B1220;
  --page-muted: rgba(11, 18, 32, 0.76);
  --page-faint: rgba(11, 18, 32, 0.64);
  --page-line: rgba(11, 18, 32, 0.10);
  --page-glass: rgba(255, 255, 255, 0.72);
  --frame-glow: radial-gradient(90% 80% at 70% 50%, #FFFFFF 0%, #E6EBF3 70%);
  --grade: linear-gradient(180deg, rgba(13, 31, 60, 0.18), rgba(13, 31, 60, 0.04) 45%, rgba(13, 31, 60, 0.22));
}
html[data-theme="dark"] {
  --page: #05080F;
  --page-2: #0A1120;
  --page-text: #F2F5FB;
  --page-muted: rgba(226, 233, 246, 0.78);
  --page-faint: rgba(226, 233, 246, 0.62);
  --page-line: rgba(214, 226, 255, 0.14);
  --page-glass: rgba(10, 18, 34, 0.46);
  --frame-glow: radial-gradient(90% 80% at 70% 50%, #10213F 0%, #05080F 70%);
}
* { box-sizing: border-box; }
html { background: var(--page); color: var(--page-text); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 16px/1.55 Inter, "Inter Fallback", system-ui, -apple-system, sans-serif; font-feature-settings: "cv11", "ss01"; background: var(--page); overflow-x: hidden; transition: background .5s var(--ease); }
.chips b, .kicker, .num { font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
b { font-weight: 600; }

/* ---------- header ---------- */
/* chrome (F1): the header bar. Menus, the phone sheet, breadcrumbs, the dock and the footer parts live in kit.css
   (chrome section); the markup is written by instiv2-tools/chrome.mjs from chrome.json. */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--hdr);
  display: flex; align-items: center; gap: 12px; padding: 0 var(--pad);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s;
  border-bottom: 1px solid transparent;
}
.hdr { color: var(--text); }
body[data-tone="light"] .hdr { color: var(--page-text); }
body[data-tone="light"] .hdr .btn-ghost { background: rgba(255,255,255,.6); border-color: var(--page-line); color: var(--page-text); }
body[data-tone="light"] .hdr .btn-solid { background: var(--page-text); color: #fff; }
body[data-tone="light"] .hdr.is-solid { background: rgba(238, 241, 246, 0.93); border-bottom-color: var(--page-line); }
/* P1: a denser glass, so page text never ghosts through behind the logo while it scrolls under the bar */
.hdr.is-solid { background: rgba(5, 8, 15, 0.88); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-bottom-color: var(--line); }
@media (max-width: 860px) {
  body[data-tone="light"] .hdr.is-solid { background: rgba(238, 241, 246, 0.97); }
  .hdr.is-solid { background: rgba(5, 8, 15, 0.94); }
}
html[data-theme="dark"] body[data-tone="light"] .hdr .btn-solid { color: #05080F; background: #F2F5FB; }
/* a soft shade behind the clear header so the logo and menus read on bright photos; gone once the bar is solid */
.hdr::before { content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(5, 8, 15, .42), rgba(5, 8, 15, 0)); transition: opacity .4s var(--ease); }
body[data-tone="light"] .hdr::before, .hdr.is-solid::before, body.menu-open .hdr::before { opacity: 0; }
.brand-word { font-weight: 700; letter-spacing: -0.02em; font-size: 18px; }
.hdr-cta { margin-left: auto; display: flex; gap: 10px; align-items: center; flex: none; }
.theme-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-hi); cursor: pointer; color: inherit; transition: border-color .25s, transform .4s var(--ease); }
.theme-btn:hover { transform: rotate(-20deg); }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .i-sun { display: none; }
html[data-theme="dark"] .theme-btn .i-sun { display: block; }
html[data-theme="dark"] .theme-btn .i-moon { display: none; }
body[data-tone="light"] .theme-btn { border-color: var(--page-line); background: rgba(255,255,255,.6); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 600; border: 1px solid transparent; cursor: pointer; transition: transform .3s var(--ease), background .25s, border-color .25s; white-space: nowrap; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-solid { background: var(--text); color: var(--ink); }
.btn-solid:hover { background: #fff; }
.btn-ghost { background: var(--glass-hi); border-color: var(--line); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost:hover { border-color: rgba(214, 226, 255, 0.35); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- type ---------- */
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.kicker .num { color: var(--text); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 4px rgba(61, 220, 151, .16); }
.h-xl { margin: 0; font-weight: 700; font-size: clamp(44px, 7.4vw, 112px); line-height: .96; letter-spacing: -0.045em; }
.h-l { margin: 0; font-weight: 700; font-size: clamp(38px, 5.6vw, 84px); line-height: .98; letter-spacing: -0.04em; }
.h-m { margin: 0; font-weight: 700; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -0.03em; }
.sub { margin: 20px 0 0; max-width: 21.45em; font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); }

/* ---------- chips ---------- */
.chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 150px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); overflow: hidden; }
.chips li::before { content: ""; position: absolute; inset: 0; background: radial-gradient(160px circle at var(--cx, -100px) var(--cy, -100px), rgba(255,255,255,.12), transparent 60%); pointer-events: none; }
.chips b { font: 600 18px/1.2 "JetBrains Mono", "JBM Fallback", ui-monospace, monospace; letter-spacing: -0.01em; }
.chips span { font-size: 13px; color: var(--muted); }
.chips-col { flex-direction: column; align-items: flex-start; }
.chips-col li { min-width: 260px; }
.chips-row li { min-width: 0; padding: 10px 16px; }
.chips-row b { font: 600 14px/1.2 Inter, "Inter Fallback", sans-serif; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ctas-center { justify-content: center; }

/* ---------- the peel stack ---------- */
.peel { position: relative; height: calc(var(--n, 7) * 100svh); }
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; perspective: 1800px; perspective-origin: 50% 0%; background: var(--page); color: var(--text); }
.layer {
  position: absolute; inset: 0; z-index: calc(100 - var(--i, 0));
  transform-origin: 50% 0%;
  will-change: transform, filter;
}
.layer::after { /* the peel crease: a light edge and shadow that ride the lifting plate */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, rgba(255,255,255,calc(var(--curl, 0) * .22)), rgba(255,255,255,0) 22%, rgba(0,0,0,calc(var(--curl, 0) * .55)));
  pointer-events: none; opacity: var(--curl, 0);
}
.layer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 6; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9) 20%, rgba(190,215,255,1) 50%, rgba(255,255,255,.9) 80%, transparent);
  opacity: var(--curl, 0); box-shadow: 0 0 24px rgba(160,200,255,calc(var(--curl, 0) * .8)); }
.plate { position: absolute; inset: -1.6%; overflow: hidden; }
.ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.02); transition: transform 1.2s var(--ease); }
.ph-dim { filter: brightness(.55) saturate(.8); }
.plate-split .ph-inset { inset: auto 6% 8% auto; width: 34%; height: 40%; border-radius: var(--r); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--line); }
.plate::after { content: ""; position: absolute; inset: 0; background: var(--grade); mix-blend-mode: multiply; pointer-events: none; }
.stage::after { content: ""; position: absolute; inset: 0; z-index: 140; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.scrim { position: absolute; inset: 0; pointer-events: none; }
.scrim-bottom { background: linear-gradient(to top, rgba(5,8,15,.92) 0%, rgba(5,8,15,.58) 38%, rgba(5,8,15,.2) 70%, rgba(5,8,15,.38) 100%); }
/* P1: small kickers on photo plates keep a soft shade under the letters */
.layer:not(.layer-framed) .copy .kicker, .pg-hero .kicker { text-shadow: 0 1px 12px rgba(5,8,15,.75); }
.scrim-left { background: linear-gradient(to right, rgba(5,8,15,.92) 0%, rgba(5,8,15,.6) 36%, rgba(5,8,15,0) 64%); }
.scrim-right { background: linear-gradient(to left, rgba(5,8,15,.94) 0%, rgba(5,8,15,.66) 38%, rgba(5,8,15,0) 66%); }
.scrim-full { background: radial-gradient(120% 90% at 50% 40%, rgba(5,8,15,.25), rgba(5,8,15,.86)); }

.copy { position: absolute; z-index: 3; padding: 0 var(--pad); }
.copy-hero, .copy-bottom { left: 0; right: 0; bottom: clamp(36px, 9vh, 96px); }
.copy-left { left: 0; top: 50%; transform: translateY(-50%); max-width: 640px; }
.copy-right { right: 0; top: 50%; transform: translateY(-50%); max-width: 660px; padding-right: calc(var(--pad) + 64px); }
.copy-top { left: 0; right: 0; top: calc(var(--hdr) + 4vh); text-align: center; }
.copy-top .sub { margin-left: auto; margin-right: auto; max-width: 32.81em; }
.copy-center { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; }

/* staged reveal of a layer's copy when it becomes the top plate */
.copy > * { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .7s var(--ease), transform .9s var(--ease); }
.layer.is-top .copy > * { opacity: 1; transform: none; }
.layer.is-top .copy > *:nth-child(2) { transition-delay: .06s; }
.layer.is-top .copy > *:nth-child(3) { transition-delay: .12s; }
.layer.is-top .copy > *:nth-child(4) { transition-delay: .18s; }
.layer.is-top .copy > *:nth-child(5) { transition-delay: .24s; }

/* the page corner: a folded edge that invites the peel */
.corner { position: absolute; right: 0; bottom: 0; z-index: 4; width: 64px; height: 64px; cursor: pointer; pointer-events: auto;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.06) 75%, rgba(0,0,0,.25));
  transition: width .5s var(--ease), height .5s var(--ease); }
.corner:hover { width: 110px; height: 110px; }

/* framed plates: the product photos sit in a frame on wide screens (they stay sharp), full bleed on phones */
@media (min-width: 861px) {
  .layer-framed { background: var(--frame-glow); color: var(--page-text); }
  .layer-framed .sub, .layer-framed .chips span { color: var(--page-muted); }
  .layer-framed .kicker { color: var(--page-muted); }
  .layer-framed .kicker .num { color: var(--page-text); border-color: var(--page-line); }
  .layer-framed .chips li { background: var(--page-glass); border-color: var(--page-line); box-shadow: 0 10px 30px rgba(11,18,32,.06); }
  .layer-framed .plate::after { display: none; }
  .layer-framed .plate { inset: calc(var(--hdr) + 6vh) 6vw 9vh 46vw; border-radius: 26px; box-shadow: 0 50px 120px rgba(0,0,0,.65), 0 0 0 1px var(--line); }
  .layer-framed.frame-left .plate { inset: calc(var(--hdr) + 6vh) 46vw 9vh 6vw; }
  .layer-framed .scrim { display: none; }
  .layer-framed .ph { transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(1.02); }
  .layer-framed .copy-left { max-width: 40vw; }
  .layer-framed .copy-right { max-width: 40vw; }
}

/* ---------- the trading desk, real screens in 3D ---------- */
.rig { position: absolute; left: 50%; top: 66%; width: min(1180px, 86vw); aspect-ratio: 16 / 7; transform: translate(-50%, -50%) rotateX(var(--rx, 8deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .9s var(--ease); }
.mon { position: absolute; top: 4%; width: 38%; aspect-ratio: 16 / 10; border-radius: 10px; padding: 6px; background: linear-gradient(160deg, #1b2438, #070b14); box-shadow: 0 40px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12); }
.mon img, .mon video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; border-radius: 6px; filter: saturate(1.05); }
.mon::after { content: ""; position: absolute; inset: 6px; border-radius: 6px; background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(255,255,255,0) 40%); pointer-events: none; }
.mon-c { left: 31%; transform: translateZ(40px); z-index: 2; }
.mon-l { left: -2%; transform: translateZ(0) rotateY(24deg); transform-origin: right center; }
.mon-r { right: -2%; transform: translateZ(0) rotateY(-24deg); transform-origin: left center; }
.handset { position: absolute; left: 57%; bottom: 2%; width: 9.5%; aspect-ratio: 9 / 19.5; border-radius: 14px; padding: 4px; background: #0a0f1a; transform: translateZ(120px) rotateX(-6deg); box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.1); z-index: 3; }
.handset img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 11px; }
.desk-top { position: absolute; left: -20%; right: -20%; bottom: -34%; height: 40%; transform: rotateX(78deg); transform-origin: top; background: radial-gradient(60% 80% at 50% 0%, rgba(127,178,255,.14), rgba(5,8,15,0) 70%), linear-gradient(#0b1220, #05080f); }

/* ---------- rail and progress ---------- */
.rail { position: fixed; right: clamp(12px, 2vw, 28px); top: 50%; z-index: 60; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; transition: opacity .4s; }
.rail.is-off { opacity: 0; pointer-events: none; }
.rail button { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 44px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.rail button i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.3); transition: transform .3s var(--ease), background .3s; }
.rail button span { position: absolute; right: 22px; font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; white-space: nowrap; }
.rail button:hover span, .rail button:focus-visible span { opacity: 1; transform: none; }
.rail button.is-on i { background: var(--text); transform: scale(1.5); }
.peel-progress { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: 2px; background: rgba(255,255,255,.06); }
.peel-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--gain)); }
.lens-hint { position: absolute; left: 50%; bottom: 18px; z-index: 120; transform: translateX(-50%); font: 500 11px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); transition: opacity .6s; }
.lens-hint.is-gone { opacity: 0; }

/* the loupe (peel.js): a magnifier over the plate on top */
.loupe { position: absolute; left: 0; top: 0; z-index: 130; width: 0; height: 0; border-radius: 50%; overflow: hidden; opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform, opacity;
  box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 0 6px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.55), inset 0 0 40px rgba(0,0,0,.35); background: var(--ink); }
.loupe-in { position: absolute; left: 0; top: 0; transform-origin: 0 0; perspective: 1800px; perspective-origin: 50% 0%; }
.loupe-in .layer { position: absolute; inset: 0; transform: none !important; }
.loupe-glint { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(70% 50% at 30% 18%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%); }
body[data-tone="light"] .loupe { box-shadow: 0 0 0 1px rgba(11,18,32,.25), 0 0 0 6px rgba(11,18,32,.05), 0 30px 80px rgba(11,18,32,.35), inset 0 0 30px rgba(11,18,32,.12); }

/* ---------- after the stack: the record, drawn live (motion.js) ---------- */
.tapeband { background: var(--page); border-top: 1px solid var(--page-line); border-bottom: 1px solid var(--page-line); }
.tapeband .iv2-cap { display: none; }
.record { padding: clamp(72px, 11vh, 140px) var(--pad) clamp(56px, 8vh, 110px); background: var(--page); color: var(--page-text); }
.record .kicker { color: var(--page-muted); }
.record .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.sec-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 96px); align-items: end; max-width: 1400px; margin: 0 auto clamp(36px, 6vh, 64px); }
.sec-head > *, .reel-head > *, .rotband-in > *, .pg-band > *, .pg-steps > *, .pg-faq-in > * { min-width: 0; }
.sec-sub { margin: 0 0 26px; max-width: 29.02em; font-size: clamp(16px, 1.25vw, 19px); color: var(--page-muted); }
.tally { display: flex; gap: clamp(20px, 3vw, 48px); margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--page-line); }
.tally li { display: flex; flex-direction: column; gap: 6px; }
.tally b { font: 600 clamp(30px, 3vw, 46px)/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tally span { font-size: 13px; color: var(--page-muted); }
.record-curve, .record-lineup { max-width: 1400px; margin: 0 auto; }
.record-curve { margin-bottom: 18px; }

.rotband { position: relative; overflow: hidden; color: var(--text); background: var(--ink); }
.rotband-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.8) brightness(.55); transform: scale(1.04); }
.rotband::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5,8,15,.94) 0%, rgba(5,8,15,.72) 45%, rgba(5,8,15,.5)), var(--grade); }
.rotband-in { position: relative; z-index: 2; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 5vw, 80px); align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(80px, 13vh, 160px) var(--pad); }
.rotband-copy .sub { color: var(--muted); max-width: 25.24em; }
.rot-grid { display: grid; gap: 16px; }
/* the rotation cards sit over a dark photo whatever the page theme */
.rotband .iv2 { --iv2-surface: #0A1120; --iv2-surface-2: #0D1628; --iv2-fg: #F2F5FB; --iv2-muted: rgba(226,233,246,.66); --iv2-faint: rgba(226,233,246,.42); --iv2-line: rgba(214,226,255,.14); --iv2-grid: rgba(214,226,255,.06); --iv2-strat: #7FB2FF; --iv2-gain: #3DDC97; --iv2-gain-soft: rgba(61,220,151,.10); --iv2-loss: #FF7B7B; --iv2-loss-soft: rgba(255,123,123,.08); --iv2-shadow: 0 40px 90px -40px rgba(0,0,0,.9); }

/* ---------- the product in motion: real recordings in a laptop and a phone (reel.js) ---------- */
.reel { position: relative; overflow: hidden; padding: clamp(80px, 12vh, 150px) var(--pad) clamp(70px, 10vh, 130px); background: var(--frame-glow); color: var(--page-text); }
.reel .kicker { color: var(--page-muted); }
.reel .kicker .num { color: var(--page-text); border-color: var(--page-line); }
.reel-head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(28px, 5vw, 96px); align-items: end; max-width: 1400px; margin: 0 auto clamp(40px, 7vh, 72px); }
.reel-tabs { display: inline-flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; gap: 4px; padding: 4px; border: 1px solid var(--page-line); border-radius: 999px; background: var(--page-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.reel-tabs::-webkit-scrollbar { display: none; }
.reel-tabs button { flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--page-muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .3s var(--ease), color .3s; }
.reel-tabs button[aria-pressed="true"] { background: var(--page-text); color: var(--page); }
.reel-stage { position: relative; max-width: 1240px; margin: 0 auto; perspective: 2200px; }
.laptop { position: relative; width: 88%; margin: 0; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; transition: transform .9s var(--ease); }
.laptop .lid { position: relative; padding: 1.6% 1.6% 2.6%; border-radius: 18px 18px 6px 6px; background: linear-gradient(180deg, #1c2230, #0a0d14); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 0 1.5px #3a4252, 0 60px 120px -40px rgba(5,8,15,.55); }
.laptop .lid::before { content: ""; position: absolute; top: .7%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1e2636; box-shadow: 0 0 0 1px #2b3446; }
.scr { position: relative; overflow: hidden; background: #05080F; }
.laptop .scr { aspect-ratio: 16 / 10; border-radius: 6px; }
.scr video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #05080F center / cover no-repeat; transition: opacity .25s; }
.scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.09), rgba(255,255,255,0) 32%); }
.laptop.is-swap video { opacity: 0; }
.laptop .base { position: relative; width: 112%; margin-left: -6%; height: clamp(12px, 1.6vw, 22px); border-radius: 0 0 22px 22px / 0 0 14px 14px; background: linear-gradient(180deg, #d9dee7 0%, #aab2bf 45%, #7d8696 100%); box-shadow: 0 30px 50px -20px rgba(5,8,15,.6); }
.laptop .base i { position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(180deg, #9aa3b1, #c4cad4); }
html[data-theme="dark"] .laptop .base { background: linear-gradient(180deg, #4a5262 0%, #2a303c 50%, #161a22 100%); }
.handset-x { position: absolute; right: 0; bottom: -4%; width: 22%; margin: 0; padding: 1.1%; border-radius: 46px / 22px; background: linear-gradient(145deg, #3b4252, #11151d 40%, #2b313d); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 50px 90px -30px rgba(5,8,15,.7); transform: translateZ(80px) rotateY(calc(var(--ry, 0deg) * -1.6)); transition: transform .9s var(--ease); }
.handset-x .scr { aspect-ratio: 9 / 19.5; border-radius: 38px / 18px; }
.handset-x .scr::before { content: ""; position: absolute; z-index: 2; top: 1.6%; left: 50%; width: 30%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: #000; }

/* ---------- after the stack ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px; background: var(--page); }
.duo-card, .glassband { color: var(--text); }
.duo-card { position: relative; display: block; height: min(78vh, 760px); border-radius: 22px; overflow: hidden; }
.duo-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--ease); }
.duo-card:hover img { transform: scale(1.07); }
.duo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,8,15,.92), rgba(5,8,15,.2) 55%, rgba(5,8,15,.1)); }
.duo-copy { position: absolute; z-index: 2; left: clamp(20px, 3vw, 44px); right: 20px; bottom: clamp(24px, 4vw, 48px); }
.duo-copy .link { display: inline-flex; margin-top: 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.glassband { position: relative; height: 70vh; min-height: 440px; overflow: hidden; }
.glassband img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.glassband::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,8,15,.88), rgba(5,8,15,.2) 70%); }
.glassband-copy { position: absolute; z-index: 2; left: var(--pad); top: 50%; transform: translateY(-50%); max-width: 720px; }
.quote { margin: 0; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; }

/* chrome (F1): footer frame; the grouped columns, disclosures and the end row are in kit.css (chrome section) */
.ftr { padding: clamp(44px, 7vh, 72px) var(--pad) 28px; border-top: 1px solid var(--page-line); background: var(--page); color: var(--page-text); }
.fine { margin: 0 0 10px; max-width: 980px; font-size: 13px; color: var(--page-faint); }
.fine a { text-decoration: underline; }
@media (max-width: 600px) {
  .ftr { padding: 36px var(--pad) 26px; }
  .fine { font-size: 12.5px; line-height: 1.5; }
}

/* ---------- phone ---------- */
@media (max-width: 860px) {
  :root { --hdr: 60px; }
  .copy-left, .copy-right { left: 0; right: 0; top: auto; bottom: clamp(28px, 7vh, 64px); transform: none; max-width: none; padding-right: var(--pad); }
  .scrim-left, .scrim-right { background: linear-gradient(to top, rgba(5,8,15,.95) 0%, rgba(5,8,15,.74) 42%, rgba(5,8,15,.3) 78%, rgba(5,8,15,.2) 100%); }
  /* P1: on phones the copy stands higher on the photo, so the shade reaches higher too (no text on bright photo areas) */
  .scrim-bottom { background: linear-gradient(to top, rgba(5,8,15,.94) 0%, rgba(5,8,15,.76) 44%, rgba(5,8,15,.48) 72%, rgba(5,8,15,.5) 100%); }
  .scrim-full { background: radial-gradient(120% 90% at 50% 40%, rgba(5,8,15,.5), rgba(5,8,15,.88)); }
  .chips-col { flex-direction: row; }
  .chips-col li, .chips li { min-width: 0; flex: 1 1 140px; }
  .chips li span { font-size: 12px; }
  .chips b { font-size: 16px; }
  .rig { top: 68%; width: 230vw; aspect-ratio: 16 / 9; }
  .mon-l, .mon-r { opacity: .4; }
  .handset { width: 12%; left: 56%; }
  .plate-split .ph-inset { display: none; }
  .sec-head, .rotband-in, .reel-head { grid-template-columns: 1fr; }
  .tally { gap: 22px; }
  .laptop { width: 100%; }
  .handset-x { width: 34%; right: -2%; bottom: -10%; }
  .reel-stage { margin-bottom: 12%; }
  .reel-tabs button { padding: 0 13px; font-size: 13px; min-height: 44px; }
  .duo { grid-template-columns: 1fr; }
  .duo-card { height: 64vh; }
  .rail { display: none; }
  .corner { width: 52px; height: 52px; }
  .lens-hint { display: none; }
  .stage::after { display: none; }
}
@media (max-width: 420px) {
  .chips li:nth-child(n+3) { display: none; }
  .h-xl { font-size: 46px; }
}

/* ---------- reduced motion and no script: plain stacked plates ---------- */
@media (prefers-reduced-motion: reduce) {
  .peel { height: auto !important; }
  .stage { position: relative; height: auto; overflow: visible; perspective: none; }
  .layer { position: relative; height: 100svh; transform: none !important; filter: none !important; }
  .copy > * { opacity: 1; transform: none; transition: none; }
  .ph { transition: none; transform: none; }
  .corner, .lens-hint, .rail, .peel-progress, .loupe { display: none; }
}
.no-js .peel { height: auto; }
.no-js .stage { position: relative; height: auto; overflow: visible; }
.no-js .layer { position: relative; height: 100svh; }
.no-js .copy > * { opacity: 1; transform: none; }

/* the rail and hints take the tone of the plate on top */
body[data-tone="light"] .rail button i { background: rgba(11, 18, 32, .22); }
body[data-tone="light"] .rail button.is-on i { background: var(--page-text); }
body[data-tone="light"] .rail button span { color: var(--page-muted); }
body[data-tone="light"] .lens-hint { color: var(--page-faint); }
body[data-tone="light"] .peel-progress { background: rgba(11, 18, 32, .06); }

/* the closing band with the copy on the right (the screens sit left in the photo) */
.glassband-r::after { background: linear-gradient(to left, rgba(5,8,15,.9), rgba(5,8,15,.35) 60%, rgba(5,8,15,.15)); }
.glassband-r .glassband-copy { left: auto; right: var(--pad); max-width: 600px; text-align: right; }
.glassband-r .kicker { justify-content: flex-end; }

/* the product in daylight: two framed photos that follow the page theme */
.pair { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; padding: 0 14px 14px; background: var(--frame-glow); }
.pair figure { position: relative; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 0 0 1px var(--page-line), 0 40px 90px -50px rgba(5,8,15,.45); }
.pair img { width: 100%; height: min(64vh, 620px); object-fit: cover; transition: transform 1.2s var(--ease); }
.pair figure:hover img { transform: scale(1.03); }
.pair figcaption { position: absolute; left: 18px; bottom: 16px; padding: 8px 14px; border-radius: 999px; font: 500 12px/1 "JetBrains Mono", "JBM Fallback", monospace; letter-spacing: .06em; color: #0B1220; background: rgba(255,255,255,.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 860px) {
  .pair { grid-template-columns: 1fr; }
  .pair img { height: 46vh; }
  .glassband-r .glassband-copy { left: var(--pad); text-align: left; }
  .glassband-r .kicker { justify-content: flex-start; }
}

/* load the peel stack's photos two plates ahead, not all at once: plates four and beyond keep their images out of
   layout (so lazy loading waits) until peel.js marks them near. No script and reduced motion show everything. */
.stage > .layer:nth-of-type(n+3):not(.is-near) .plate img,
.stage > .layer:nth-of-type(n+3):not(.is-near) .rig img,
.stage > .layer:nth-of-type(n+3):not(.is-near) video { display: none; }
.no-js .stage > .layer .plate img, .no-js .stage > .layer .rig img { display: block !important; }
@media (prefers-reduced-motion: reduce) { .stage > .layer .plate img, .stage > .layer .rig img { display: block !important; } }

/* reduced motion and no script: the stacked plates sit below the fixed header and never spill sideways */
@media (prefers-reduced-motion: reduce) {
  .peel { position: relative; z-index: 0; isolation: isolate; }
  .stage, .stage > .layer { overflow: hidden; overflow: clip; }
  .stage > .layer { z-index: auto; }
}
.no-js .peel { position: relative; z-index: 0; isolation: isolate; }
.no-js .stage, .no-js .stage > .layer { overflow: hidden; overflow: clip; }
@media print { .cta-dock, .menu-sheet, .rail, .peel-progress, .loupe, .lens-hint, .crumbs, .skip, .nv-p { display: none !important; } }