/* 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). */
/* Q2 (12 Oct 2026): Inter and JetBrains Mono are self hosted (instiv2-tools/fonts/build-fonts.py), no Google Fonts request.
   One variable file per face; the head preloads Inter (chrome.mjs, chrome:fonts). Rename a file when its content changes:
   /instiv2/* is cached as immutable. */
/* One face per weight the Google Fonts request had (400 to 800, mono 400 to 600), all from the same variable file (one
   download), so in between weights such as 650 match as before (to 700). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-v4.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-v4.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-v4.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-v4.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-v4.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/jbmono-v2.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/jbmono-v2.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/jbmono-v2.woff2") format("woff2"); }
@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));
  --focus: #2463EB; /* Q2: the keyboard focus ring, 3:1 or more against the page in each theme */
  --accent-ink: #2463EB; /* Q2: the accent as small text, 4.5:1 or more on the page in each theme (--accent is #7FB2FF) */
  --gain-ink: #0E7A4B; /* H1: the gain green as text on the page surfaces, 4.5:1 or more in each theme (--gain is #3DDC97) */
}
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%);
  --focus: #7FB2FF;
  --accent-ink: #7FB2FF;
  --gain-ink: #3DDC97;
}
* { 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(--focus, var(--accent)); outline-offset: 3px; }
/* Q2: every other keyboard stop shows the same ring (fields, summaries, tab stops such as the scrolling rows site.js marks) */
input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
article[data-tone="dark"], section[data-tone="dark"], div[data-tone="dark"], .pnl-dark { --focus: #7FB2FF; --accent-ink: #7FB2FF; } /* photo plates and dark panels stay dark in the light theme */

/* ---------- 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; }
/* Q2: the first plate's copy (the page's headline, its LCP) paints with the first frame instead of waiting for every
   deferred script and peel.js; it still rises into place (transform only, so it counts as painted). peel.js adds
   .peel-on once it runs and then owns the copy as before. */
.peel:not(.peel-on) .stage > .layer:first-child .copy > * { opacity: 1; transform: none; transition: none; }
/* the same animation keeps running when peel.js marks the plate as the top one, so it never jumps */
.peel:not(.peel-on) .stage > .layer:first-child .copy > *, .stage > .layer:first-child.is-top .copy > * { animation: copyRise .9s var(--ease) both; }
.stage > .layer:first-child .copy > *:nth-child(2) { animation-delay: .06s; }
.stage > .layer:first-child .copy > *:nth-child(3) { animation-delay: .12s; }
.stage > .layer:first-child .copy > *:nth-child(n+4) { animation-delay: .18s; }
@keyframes copyRise { from { transform: translate3d(0, 22px, 0); } to { 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; visibility: hidden; transition: opacity .4s, visibility 0s linear .4s; } /* I1: hidden, out of the tab order */
.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; animation: none !important; }
  .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; } }