/* ==========================================================================
   Velari Secure Practice — site v3
   The site is scored like the reel: pinned "film" scenes scrub a timeline
   with the scroll position, the product's own surfaces carry the story,
   big words land one at a time, and a Bayer dither replaces soft glows.
   Palette and type are the brand's (navy / paper / gold, Fraunces,
   Public Sans, DM Mono). No new colours.
   ========================================================================== */

@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces-roman-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/Fraunces-italic-var.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('/fonts/DMMono-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('/fonts/PublicSans-var.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --room: #070b10;
  --navy: #0d1a27;
  --navy-2: #0a121c;
  --navy-3: #13202e;
  --ink: #13202e;
  --paper: #f7f4ed;
  --paper-2: #efe9dc;
  --card: #fffdf8;
  --gold: #a67a24;
  --gold-deep: #8a651d;
  --gold-bright: #d9bb6e;
  --gold-pale: #f3e6c4;
  --oxide: #8f3a26;
  --oxide-pale: #f1dcd5;
  --ok: #3d7a5c;
  --ok-bright: #6fbf93;
  --ok-pale: #dcebe2;
  --muted: #5c6a78;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --wrap: 1280px;
  --gut: clamp(20px, 4.4vw, 64px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --land: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* colour contexts: components read --fg / --fg-2 / --accent / --rule / --surface */
:root, .sec--paper, .sec--paper-2, .sec--gold, .on-paper {
  --fg: var(--ink); --fg-2: #4d5b69; --accent: var(--gold-deep); --rule: rgba(19, 32, 46, .13); --rule-2: rgba(19, 32, 46, .32); --surface: var(--card);
}
.sec--room, .sec--navy, .sec--deep, .sec--oxide, .page-hero, .ftr, .on-navy {
  --fg: var(--paper); --fg-2: rgba(247, 244, 237, .66); --accent: var(--gold-bright); --rule: rgba(247, 244, 237, .12); --rule-2: rgba(247, 244, 237, .34); --surface: var(--navy-3);
}
.sec--gold { --accent: var(--ink); --fg-2: rgba(19, 32, 46, .76); --rule: rgba(19, 32, 46, .2); }
.sec--oxide { --accent: var(--gold-pale); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--room); }
body {
  margin: 0; background: var(--paper); color: var(--fg);
  font: 400 17.5px/1.6 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, h5, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
q { quotes: none; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--gold-bright); color: var(--ink); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--gold-bright); color: var(--ink); font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }

/* film grain over everything, like the reel */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- layout ---------- */
.wrap { position: relative; width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding-inline: var(--gut); }
.sec { position: relative; padding-block: clamp(88px, 10vw, 160px); background: var(--bg, transparent); color: var(--fg); }
.sec--room { --bg: var(--room); }
.sec--navy { --bg: var(--navy); }
.sec--deep { --bg: var(--navy-2); }
.sec--paper { --bg: var(--paper); }
.sec--paper-2 { --bg: var(--paper-2); }
.sec--gold { --bg: var(--gold-bright); }
.sec--oxide { --bg: var(--oxide); }
.stack { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); }
.split--c { align-items: center; }
@media (max-width: 960px) { .split { grid-template-columns: minmax(0, 1fr); } }
.sticky { position: sticky; top: 120px; align-self: start; }
@media (max-width: 960px) { .sticky { position: static; } }
.head { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; margin-bottom: clamp(40px, 5vw, 72px); }
.head--c { align-items: center; text-align: center; }
.head--c .lede { margin-inline: auto; }
.head--row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px 64px; flex-wrap: wrap; }
.head--row > .stack { flex: 1 1 520px; }
.head--row > .lede { flex: 0 1 420px; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ''; width: 28px; height: 1.5px; background: currentColor; flex: none; }
.eyebrow--c::after { content: ''; width: 28px; height: 1.5px; background: currentColor; flex: none; }
.d-hero, .d-xl, .d-l, .d-m, .d-s, .punch {
  font-family: var(--display); color: var(--fg); font-weight: 430;
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 0; text-wrap: balance;
}
.d-hero { font-size: clamp(44px, 6.3vw, 104px); line-height: .98; letter-spacing: -.036em; font-weight: 410; }
.d-xl { font-size: clamp(42px, 6vw, 100px); line-height: .98; letter-spacing: -.034em; font-weight: 410; }
.d-l { font-size: clamp(36px, 4.4vw, 70px); line-height: 1.02; letter-spacing: -.03em; }
.d-m { font-size: clamp(27px, 2.8vw, 42px); line-height: 1.08; letter-spacing: -.022em; }
.d-s { font-size: clamp(21px, 1.7vw, 26px); line-height: 1.16; letter-spacing: -.012em; font-weight: 500; }
.lede { font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; color: var(--fg-2); max-width: 58ch; text-wrap: pretty; }
.body { color: var(--fg-2); max-width: 64ch; text-wrap: pretty; }
.body + .body { margin-top: 1em; }
.fine { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); }
.fine a, .body a, .lede a { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.tag { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 26px; border-radius: 999px; border: 0; cursor: pointer;
  font: 650 15.5px/1 var(--body); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: transform .45s var(--ease-out), background-color .2s, box-shadow .25s, color .2s;
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: scale(.97); }
.btn--gold { background: var(--gold-bright); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 10px 30px -8px rgba(217, 187, 110, .55); }
.btn--gold:hover { background: #e6ca84; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -2px 0 rgba(0, 0, 0, .1), 0 14px 40px -8px rgba(217, 187, 110, .75); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #1d2f42; }
.btn--ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn--sm { padding: 11px 18px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- header: a floating glass pill ---------- */
.hdr { position: fixed; top: 14px; left: 50%; z-index: 80; width: min(1240px, calc(100% - 24px)); transform: translateX(-50%); color: var(--paper); transition: transform .5s var(--ease-out); }
.hdr-in {
  position: relative; display: flex; align-items: center; gap: 22px; padding: 7px 7px 7px 16px; border-radius: 999px;
  background: rgba(10, 16, 24, .58); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .09), 0 12px 40px -12px rgba(0, 0, 0, .5);
  transition: background-color .3s;
}
.hdr.solid .hdr-in { background: rgba(10, 16, 24, .8); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; position: relative; z-index: 2; }
.brand img { width: 30px; height: 30px; }
.brand-w { font: 500 23px/1 var(--display); letter-spacing: -.02em; font-variation-settings: 'opsz' 72, 'SOFT' 30; }
.brand-s { display: none; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { padding: 9px 14px; border-radius: 999px; font: 550 14.5px/1 var(--body); text-decoration: none; color: rgba(247, 244, 237, .74); transition: color .2s, background-color .2s; }
.nav a:hover { color: var(--paper); background: rgba(247, 244, 237, .07); }
.nav a[aria-current="page"] { color: var(--gold-bright); }
.nav .nav-cta { display: none; }
.menu { display: none; }
@media (max-width: 900px) {
  .hdr-cta { display: none; }
  .menu { display: grid; place-items: center; gap: 6px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(247, 244, 237, .08); cursor: pointer; }
  .menu i { display: block; width: 18px; height: 1.5px; background: var(--paper); transition: transform .35s var(--ease-out); }
  .menu i + i { margin-top: -2px; }
  .hdr.open .menu i:first-child { transform: translateY(3.5px) rotate(45deg); }
  .hdr.open .menu i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
  .nav {
    position: absolute; left: 0; right: 0; top: calc(100% + 10px); flex-direction: column; align-items: stretch; gap: 2px; padding: 12px;
    border-radius: 26px; background: rgba(10, 16, 24, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .09), 0 30px 60px rgba(0, 0, 0, .45);
    opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top; pointer-events: none; transition: opacity .25s, transform .35s var(--ease-out);
  }
  .hdr.open .nav { opacity: 1; transform: none; pointer-events: auto; }
  .nav a { padding: 15px 16px; font-size: 18px; border-radius: 16px; }
  .nav .nav-cta { display: block; margin-top: 8px; background: var(--gold-bright); color: var(--ink); text-align: center; font-weight: 650; }
}

/* scene HUD: chapter + page progress, like a timeline scrubber */
.hud { position: fixed; left: 18px; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 14px; border-radius: 999px; background: rgba(10, 16, 24, .66); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .09); color: var(--paper); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; }
.hud.on { opacity: 1; transform: none; }
.hud-bar { position: relative; width: 64px; height: 2px; border-radius: 2px; background: rgba(247, 244, 237, .16); overflow: hidden; }
.hud-bar b { position: absolute; inset: 0; background: var(--gold-bright); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hud-n { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.hud-t { display: inline-block; min-width: 10ch; color: rgba(247, 244, 237, .78); }
@media (max-width: 900px) { .hud { display: none; } }

/* ---------- film: pinned scenes scrubbed by scroll ---------- */
.film { position: relative; background: var(--bg, var(--room)); color: var(--fg); }
.film-stage { position: relative; min-height: 100svh; overflow: hidden; }
.js.pin .film { height: calc(var(--len) * var(--lenx, 1) * 1svh); }
.js.pin .film-stage { position: sticky; top: 0; height: 100svh; min-height: 0; }
@media (max-width: 959px) {
  .js.pin .film[data-pin="wide"] { height: auto; }
  .js.pin .film[data-pin="wide"] .film-stage { position: relative; height: auto; min-height: 0; }
}

/* dithered glow: a Bayer-ordered halo painted per frame at low resolution */
.glow { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
/* dithered colour cut between sections */
.dither-edge { position: absolute; left: 0; right: 0; top: 0; z-index: 4; height: 40px; pointer-events: none; background-repeat: repeat-x; image-rendering: pixelated; }

/* ---------- 01 · hero film ---------- */
.film--hero .film-stage { perspective: 1800px; perspective-origin: 50% 30%; background: radial-gradient(ellipse 70% 60% at 50% 110%, #122234 0%, transparent 70%), var(--room); }
.hf-copy { position: absolute; left: 50%; top: clamp(112px, 17svh, 170px); z-index: 3; width: min(940px, 64vw); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hf-copy .lede { max-width: 60ch; }
.hf-copy .btn-row { justify-content: center; margin-top: 8px; }
@media (max-width: 1100px) { .hf-copy { width: min(860px, calc(100% - var(--gut) * 2)); } }
@media (max-width: 640px) { .hf-copy { top: 104px; gap: 18px; } .hf-copy .lede { font-size: 16px; } .hf-copy .btn-row { flex-direction: column; align-items: stretch; width: 100%; } }
.hf-hint { position: absolute; left: 50%; bottom: 22px; z-index: 3; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 244, 237, .5); }
.hf-hint i { position: relative; width: 1.5px; height: 26px; background: rgba(247, 244, 237, .18); overflow: hidden; }
.hf-hint i::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: var(--gold-bright); animation: hint 1.8s var(--ease-io) infinite; }
@keyframes hint { from { transform: translateY(-110%); } to { transform: translateY(260%); } }
.hf-chips { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hchip {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 11px; padding: 6px 8px 6px 6px; border-radius: 15px;
  overflow: hidden; isolation: isolate; white-space: nowrap; opacity: 0; will-change: transform;
  background: linear-gradient(180deg, #fffdf8 0%, #f3ecdc 100%); color: var(--ink);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(19, 32, 46, .07), 0 0 0 1px rgba(166, 122, 36, .3), 0 18px 36px -12px rgba(0, 0, 0, .6);
}
.hchip::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 48%, rgba(255, 240, 200, .5) 52%, transparent 65%); transform: translateX(-130%); animation: sheen 7s var(--ease-io) infinite; animation-delay: calc(var(--i, 0) * .7s); }
@keyframes sheen { 0%, 70% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
.hchip b, .chip b {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: #f0d58f; font-weight: 400;
  background: radial-gradient(circle at 30% 22%, #33495f 0%, #13202e 55%, #0a121c 100%);
  box-shadow: inset 0 0 0 1px rgba(217, 187, 110, .4), inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 14px rgba(217, 187, 110, .35); text-shadow: 0 0 8px rgba(240, 213, 143, .9);
}
.cl { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.cl strong { font: 650 14px/1 var(--body); color: var(--ink); letter-spacing: -.005em; }
.cl em { font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.hchip s { position: relative; width: 40px; height: 23px; border-radius: 12px; margin-left: 4px; background: linear-gradient(180deg, #c29431 0%, #8a651d 100%); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35), 0 0 12px rgba(217, 187, 110, .45); }
.hchip s::after { content: ''; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; transform: translateX(17px); background: radial-gradient(circle at 35% 30%, #fff 0%, #f3eee4 60%, #d9d1c1 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }

.hf-win { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.win {
  position: absolute; left: 50%; top: 0; width: 1180px; height: 700px; transform-origin: 50% 0; will-change: transform;
  transform: translateX(-50%) translateY(66svh) rotateX(18deg) scale(.8);
  display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--card); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(247, 244, 237, .16), 0 50px 120px -20px rgba(0, 0, 0, .75), 0 0 0 10px rgba(247, 244, 237, .04);
  font-size: 15px; line-height: 1.3;
}
.win-bar { flex: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; background: #f1ece1; border-bottom: 1px solid rgba(19, 32, 46, .08); }
.win-bar > i { width: 12px; height: 12px; border-radius: 50%; background: #d9d2c3; }
.win-bar > span { flex: 1; text-align: center; font: 500 12.5px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.win-bar > em { font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); padding: 7px 10px; border-radius: 999px; background: var(--gold-pale); }
.win-body { flex: 1; min-height: 0; display: flex; }
.win-side { flex: none; width: 200px; display: flex; flex-direction: column; gap: 22px; padding: 22px 14px; background: var(--navy); color: var(--paper); }
.ws-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px; }
.ws-brand img { width: 26px; height: 26px; }
.ws-brand b { font: 500 20px/1 var(--display); letter-spacing: -.02em; }
.win-side ul { display: flex; flex-direction: column; gap: 2px; }
.win-side li { padding: 10px 12px; border-radius: 10px; font-size: 14px; color: rgba(247, 244, 237, .62); }
.win-side li.on { background: rgba(217, 187, 110, .14); color: var(--gold-bright); box-shadow: inset 2px 0 0 var(--gold-bright); }
.ws-foot { margin-top: auto; padding: 12px; border-radius: 12px; background: rgba(247, 244, 237, .06); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(247, 244, 237, .6); }
.ws-foot b { display: block; font: 500 30px/1 var(--display); color: var(--ok-bright); letter-spacing: 0; margin-bottom: 4px; }
.win-main { position: relative; flex: 1; min-width: 0; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.inv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.inv-head h3 { font: 480 32px/1 var(--display); letter-spacing: -.025em; font-variation-settings: 'opsz' 96, 'SOFT' 30; }
.inv-head p { margin-top: 8px; font: 500 12.5px/1 var(--mono); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.inv-head p b { color: var(--ink); font-weight: 500; }
.inv-meter { display: flex; gap: 4px; }
.inv-meter i, .inv-meter span { display: block; width: 18px; height: 8px; border-radius: 3px; background: #e7e0d1; transition: background-color .2s; }
.inv-meter span.on { background: var(--gold); }
.inv { display: flex; flex-direction: column; border-radius: 14px; box-shadow: 0 0 0 1px rgba(19, 32, 46, .09); overflow: hidden; background: #fff; }
.inv-row { display: grid; grid-template-columns: 1.55fr .75fr 1.25fr .7fr 1.05fr; align-items: center; gap: 12px; height: 55px; padding: 0 18px; border-top: 1px solid rgba(19, 32, 46, .07); font-size: 14.5px; color: #3c4a58; }
.inv-th { height: 40px; border-top: 0; background: #faf7f0; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.inv-row .f { display: flex; align-items: center; gap: 10px; font-weight: 650; color: var(--ink); }
.inv-row .f b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 400; color: #f0d58f; background: var(--navy-3); }
.dflt { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); padding: 6px 9px; border-radius: 999px; background: var(--gold-pale); }
.dflt::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.dflt--x { color: var(--oxide); background: var(--oxide-pale); }
.dflt--x::before { background: var(--oxide); }
.dec { position: relative; display: flex; align-items: center; height: 30px; }
.dec em, .dec strong { position: absolute; left: 0; top: 50%; translate: 0 -50%; white-space: nowrap; font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; }
.dec em { font-style: normal; color: #9aa3ad; box-shadow: inset 0 0 0 1.5px #d6d0c4; background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, .8) 4px 6px); }
.pin .dec strong { opacity: 0; }
html:not(.pin) .dec em { opacity: 0; }
[data-d="a"] .dec strong { background: var(--ok-pale); color: #2f6249; }
[data-d="r"] .dec strong { background: var(--gold-pale); color: var(--gold-deep); }
[data-d="b"] .dec strong { background: var(--oxide-pale); color: var(--oxide); }
.win-log { flex: none; width: 270px; padding: 24px 18px; background: #faf7f0; border-left: 1px solid rgba(19, 32, 46, .07); display: flex; flex-direction: column; gap: 14px; }
.win-log h4 { font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.win-log ol { display: flex; flex-direction: column; gap: 8px; }
.win-log li { padding: 10px 12px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px rgba(19, 32, 46, .07); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pin .win-log li { opacity: 0; }
.win-log li b { font: 700 10px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; margin-right: 6px; }
.win-log li span { display: block; margin-top: 4px; font: 500 11px/1.2 var(--mono); color: var(--muted); letter-spacing: .02em; }
.win-stamp { position: absolute; right: 30px; top: 22px; z-index: 3; color: var(--ok); background: rgba(255, 253, 248, .9); font-size: 20px; }
.pin .win-stamp { opacity: 0; }
/* narrow design: the window becomes a phone-width app */
.win.m { width: 380px; height: 640px; }
.win.m .win-side, .win.m .win-log { display: none; }
.win.m .win-main { padding: 20px 16px; gap: 14px; }
.win.m .inv-head { flex-direction: column; align-items: flex-start; }
.win.m .inv-head h3 { font-size: 28px; }
.win.m .inv-row { grid-template-columns: minmax(0, 1fr) 104px; height: 54px; padding: 0 14px; }
.win.m .inv-row > span:nth-child(2), .win.m .inv-row > span:nth-child(3), .win.m .inv-row > span:nth-child(4) { display: none; }
.win.m .win-stamp { display: none; }
.hf-cur { position: absolute; left: 0; top: 0; z-index: 6; width: 30px; height: 30px; opacity: 0; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); will-change: transform; }

/* ---------- 02 · punchline ---------- */
.film--punch .film-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(28px, 4vw, 48px); padding: 90px var(--gut) 60px; text-align: center; }
.punch { position: relative; z-index: 2; font-size: clamp(50px, 8.2vw, 148px); line-height: .98; letter-spacing: -.042em; font-weight: 400; max-width: 16ch; text-wrap: initial; }
.pl { display: block; }
.pw { display: inline-block; will-change: transform, opacity, filter; }
.pw.acc { color: var(--gold-bright); }
.punch-sub { position: relative; z-index: 2; max-width: 52ch; margin-inline: auto; }

/* ---------- 03 · bento tiles with live mini surfaces ---------- */
.bento { display: grid; gap: 18px; }
.bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .bento--3 { grid-template-columns: minmax(0, 1fr); } }
[data-spot] { position: relative; isolation: isolate; }
[data-spot]::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(217, 187, 110, .2), transparent 60%); opacity: 0; transition: opacity .35s; pointer-events: none; }
[data-spot]:hover::before { opacity: 1; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 30px; border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08), 0 30px 60px -40px rgba(13, 26, 39, .35); transition: transform .5s var(--ease-out), box-shadow .3s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(166, 122, 36, .35), 0 40px 70px -40px rgba(13, 26, 39, .45); }
.tile > .tag, .tile > h3, .tile > p, .tile > q { margin-inline: 16px; }
.tile > .tag { margin-top: 14px; }
.tile h3 { font: 460 clamp(26px, 2.2vw, 32px)/1.05 var(--display); letter-spacing: -.024em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.tile p { color: var(--fg-2); font-size: 16px; }
.tile q { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rule); font: 500 18px/1.3 var(--display); color: var(--fg); font-variation-settings: 'opsz' 72; }
.tile-ui { position: relative; height: 230px; border-radius: 18px; overflow: hidden; background: var(--navy); color: var(--paper); }
.ui-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-bottom: 1px solid rgba(247, 244, 237, .08); }
.ui-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(247, 244, 237, .16); }
.ui-bar span { margin-left: 8px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: rgba(247, 244, 237, .55); }
.ui-ehr-in { padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; }
.ui-lines { display: flex; flex-direction: column; gap: 9px; }
.ui-lines i { display: block; height: 8px; border-radius: 4px; background: rgba(247, 244, 237, .1); }
.ui-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 16px; background: var(--card); color: var(--ink); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); }
.ui-toggle b { display: block; font: 650 16px/1.1 var(--body); }
.ui-toggle b::first-letter { color: var(--gold); }
.ui-toggle em { display: block; margin-top: 4px; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.switch { position: relative; flex: none; width: 62px; height: 34px; border-radius: 17px; border: 0; padding: 0; background: #8d97a3; transition: background-color .25s; cursor: default; }
.switch i { position: absolute; left: 3px; top: 3px; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .5s var(--spring); }
.is-on .switch, .switch[aria-checked="true"] { background: var(--gold); }
.is-on .switch i, .switch[aria-checked="true"] i { transform: translateX(28px); }
.ui-upd { padding: 22px 16px; background: radial-gradient(ellipse 80% 90% at 50% 0%, #1a2d42, var(--navy)); display: flex; flex-direction: column; gap: 12px; }
.ui-toast { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(247, 244, 237, .96); color: var(--ink); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .7); transition: transform .7s var(--spring), opacity .4s; }
.ui-toast b { font: 650 14px/1.1 var(--body); }
.ui-toast span { grid-column: 1; font-size: 13px; line-height: 1.3; color: #4d5b69; }
.ui-toast em { grid-row: 1 / span 2; grid-column: 2; font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); background: var(--gold-pale); padding: 7px 9px; border-radius: 999px; }
.js .ui-upd:not(.is-on) .ui-toast { opacity: 0; transform: translateY(-24px) scale(.94); }
.ui-upd .ui-toast--2 { transition-delay: .35s; }
.ui-chat-in { padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.ui-q { min-height: 104px; padding: 14px 16px; border-radius: 16px; background: rgba(247, 244, 237, .07); box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .12); font-size: 15px; line-height: 1.45; color: var(--paper); }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--gold-bright); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ui-warn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--oxide); color: var(--paper); font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .5s var(--spring); }
.ui-chat.warn .ui-warn { opacity: 1; transform: none; }

/* ---------- 04 · the sprint world ---------- */
.film--world .film-stage { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.5fr); gap: clamp(28px, 3.5vw, 56px); padding: 104px var(--gut) 48px; max-width: 1600px; margin: 0 auto; }
.wf-cap { display: flex; flex-direction: column; justify-content: center; gap: 40px; min-width: 0; }
.wf-slot { position: relative; min-height: 330px; }
.wf-card { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 18px; opacity: 0; }
.wf-card.is-on { opacity: 1; }
.wf-card h3 { font: 440 clamp(34px, 3.4vw, 54px)/1.02 var(--display); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.wf-card p { color: var(--fg-2); max-width: 44ch; }
.wf-card .keep, .keep { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; padding: 10px 14px 10px 10px; border-radius: 999px; background: rgba(217, 187, 110, .1); box-shadow: inset 0 0 0 1px rgba(217, 187, 110, .3); font: 500 13px/1 var(--mono); color: var(--paper); letter-spacing: .02em; }
.keep span { flex: none; white-space: nowrap; padding: 6px 9px; border-radius: 999px; background: var(--gold-bright); color: var(--ink); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.wf-rail { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--rule); counter-reset: r; }
.wf-rail li { counter-increment: r; position: relative; display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--rule); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(247, 244, 237, .4); transition: color .3s; }
.wf-rail li::before { content: '0' counter(r); color: inherit; width: 22px; }
.wf-rail li::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--gold-bright); transform-origin: left; transform: scaleX(var(--f, 0)); }
.wf-rail li.cur { color: var(--paper); }
.wf-rail li.done { color: rgba(247, 244, 237, .7); }
.wf-view { position: relative; min-width: 0; border-radius: 28px; overflow: hidden; background: radial-gradient(ellipse 80% 80% at 50% 40%, #16283a, var(--navy-2) 75%); box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .08); }
.wf-view::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(217, 187, 110, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 187, 110, .07) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 100%); }
.world { position: absolute; left: 0; top: 0; width: 1720px; height: 820px; transform-origin: 0 0; }
.panel { position: absolute; width: 520px; height: 380px; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgba(247, 244, 237, .12), 0 40px 80px -30px rgba(0, 0, 0, .7); transition: box-shadow .4s; }
.panel.cur { box-shadow: 0 0 0 2px var(--gold-bright), 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(217, 187, 110, .35); }
.panel[data-i="0"] { left: 0; top: 0; } .panel[data-i="1"] { left: 600px; top: 0; } .panel[data-i="2"] { left: 1200px; top: 0; }
.panel[data-i="3"] { left: 0; top: 440px; } .panel[data-i="4"] { left: 600px; top: 440px; } .panel[data-i="5"] { left: 1200px; top: 440px; }
.world.m { width: 760px; height: 1320px; }
.world.m .panel { width: 360px; height: 400px; }
.world.m .panel[data-i="0"] { left: 0; top: 0; } .world.m .panel[data-i="1"] { left: 400px; top: 0; }
.world.m .panel[data-i="2"] { left: 0; top: 440px; } .world.m .panel[data-i="3"] { left: 400px; top: 440px; }
.world.m .panel[data-i="4"] { left: 0; top: 880px; } .world.m .panel[data-i="5"] { left: 400px; top: 880px; }
.world.m .p-body { padding: 16px 18px; gap: 12px; }
.world.m .p-title { flex-direction: column; align-items: flex-start; gap: 6px; }
.world.m .p-ring { display: none; }
.world.m .p-tl li { grid-template-columns: 40px minmax(0, 1fr); height: auto; padding: 9px 0; }
.world.m .p-tl li em { display: none; }
.world.m .p-tl::before { left: 40px; } .world.m .p-tl li::before { left: 35px; }
.world.m .p-term { font-size: 13.5px; }
.p-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; background: #f1ece1; border-bottom: 1px solid rgba(19, 32, 46, .07); }
.p-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d2c3; }
.p-bar span { flex: 1; margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.p-bar em { font: 500 12px/1 var(--mono); font-style: normal; color: var(--gold-deep); }
.p-body { flex: 1; min-height: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.p-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.p-title b { font: 480 25px/1 var(--display); letter-spacing: -.02em; font-variation-settings: 'opsz' 96, 'SOFT' 30; }
.p-title em { font: 500 11.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.p-rows { display: flex; flex-direction: column; }
.p-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 50px; border-bottom: 1px solid rgba(19, 32, 46, .07); font-size: 16px; font-weight: 600; }
.p-rows li:last-child { border-bottom: 0; }
.p-rows em { font-style: normal; }
.pill { font: 700 11px/1 var(--body); letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; white-space: nowrap; font-style: normal; }
.pill--ok { background: var(--ok-pale); color: #2f6249; }
.pill--g { background: var(--gold-pale); color: var(--gold-deep); }
.pill--x { background: var(--oxide-pale); color: var(--oxide); }
.p-flow { width: 100%; height: auto; overflow: visible; }
.pf-cols text { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--gold-deep); text-anchor: middle; }
.pf-lines path { fill: none; stroke: var(--gold); stroke-width: 2; }
.pin .pf-lines path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.pf-nodes rect { fill: var(--navy-3); }
.pf-nodes text { font: 600 10.5px var(--body); fill: var(--paper); text-anchor: middle; }
.p-rows--v li { height: 46px; }
.mini-stamp { font: 800 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border: 2.5px solid currentColor; border-radius: 7px; transform: rotate(-6deg); }
.ms-ok { color: var(--ok); } .ms-g { color: var(--gold-deep); } .ms-x { color: var(--oxide); }
.p-mail { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: #f5f0e5; font-size: 13.5px; line-height: 1.4; color: #3c4a58; min-height: 72px; }
.p-mail b { display: block; margin-bottom: 4px; font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.p-body--split { flex-direction: row; gap: 20px; }
.p-body--split > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.p-rows--a li { height: 44px; font-size: 14.5px; }
.p-rows--a em { font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; }
.p-rows--a em.ok { background: var(--ok-pale); color: #2f6249; }
.p-rows--a em.x { background: var(--oxide-pale); color: var(--oxide); }
.p-rows--a li.hot { margin-inline: -10px; padding-inline: 10px; border-radius: 10px; background: rgba(143, 58, 38, calc(var(--hot, 0) * .1)); }
.p-ring { flex: none; width: 128px; align-self: center; position: relative; text-align: center; }
.p-ring svg { width: 128px; height: 128px; }
.p-ring circle { fill: none; stroke: #ebe4d6; stroke-width: 9; }
.p-ring circle.arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: .33; }
.p-ring b { position: absolute; left: 0; right: 0; top: 44px; font: 480 30px/1 var(--display); }
.p-ring em { display: block; margin-top: 6px; font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.panel--term { background: #0a121c; color: var(--paper); box-shadow: 0 0 0 1px rgba(247, 244, 237, .14), 0 40px 80px -30px rgba(0, 0, 0, .8); }
.panel--term .p-bar { background: #111c28; border-color: rgba(247, 244, 237, .06); }
.panel--term .p-bar i { background: rgba(247, 244, 237, .16); }
.panel--term .p-bar span { color: rgba(247, 244, 237, .55); }
.panel--term .p-bar em { color: var(--gold-bright); }
.p-term { gap: 10px; font: 400 15px/1.2 var(--mono); }
.p-term p { display: flex; align-items: baseline; gap: 10px; }
.p-term p i { flex: 1; border-bottom: 1.5px dotted rgba(247, 244, 237, .2); }
.p-term .t-cmd { color: var(--gold-bright); margin-bottom: 6px; }
.p-term b { font-weight: 500; }
.p-term b.ok { color: var(--ok-bright); } .p-term b.g { color: var(--gold-bright); }
.p-term .t-end { margin-top: auto; color: rgba(247, 244, 237, .5); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; }
.p-tl { display: flex; flex-direction: column; position: relative; }
.p-tl::before { content: ''; position: absolute; left: 44px; top: 10px; bottom: 10px; width: 2px; background: #ebe4d6; }
.p-tl li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 18px; height: 60px; font-size: 15px; font-weight: 600; }
.p-tl li::before { content: ''; position: absolute; left: 39px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 3px var(--gold); }
.p-tl time { font: 500 13px/1 var(--mono); color: var(--muted); }
.p-tl span { padding-left: 10px; }
.p-tl em { font: 600 10.5px/1 var(--mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: #efe9dc; color: var(--muted); }
.p-tl em.x { background: var(--oxide-pale); color: var(--oxide); }
.p-tl em.g { background: var(--gold-pale); color: var(--gold-deep); }
@media (max-width: 959px) {
  .film--world .film-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 18px; padding: 86px 16px 16px; }
  .wf-cap { gap: 0; }
  .wf-slot { min-height: 212px; }
  .wf-card { top: auto; bottom: 0; translate: none; gap: 10px; }
  .wf-card h2 { font-size: clamp(30px, 8vw, 40px); }
  .wf-card h3 { font-size: clamp(28px, 7.4vw, 36px); }
  .wf-card p { font-size: 15.5px; line-height: 1.5; }
  .wf-card .lede { font-size: 15.5px; }
  .wf-rail { display: none; }
  .wf-view { border-radius: 22px; }
}
/* no-film fallback: a plain grid of the six surfaces */
html:not(.pin) .film--world .film-stage{ grid-template-columns: minmax(0, 1fr); padding-block: 120px 80px; }
html:not(.pin) .wf-slot{ min-height: 0; }
html:not(.pin) .wf-card{ position: static; translate: none; display: none; }
html:not(.pin) .wf-card[data-c="intro"]{ display: flex; opacity: 1; }
html:not(.pin) .wf-rail{ display: none; }
html:not(.pin) .wf-view{ overflow: visible; background: none; box-shadow: none; }
html:not(.pin) .wf-view::before{ display: none; }
html:not(.pin) .world{ position: static; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; transform: none !important; }
html:not(.pin) .panel{ position: relative; left: auto !important; top: auto !important; width: auto; }

/* ---------- 05 · data map, full bleed ---------- */
html:not(.js) .map { display: none; }
.map { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: radial-gradient(ellipse 80% 70% at 50% 40%, #17293b 0%, #0a121c 72%); box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .08); }
.map.v { aspect-ratio: 4 / 5; }
.map--full { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.map--full.v { aspect-ratio: auto; }
.map-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.map-persp { position: absolute; inset: 0; perspective: 1400px; }
.map-plane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.map-grid { position: absolute; inset: -300px; background-image: linear-gradient(rgba(217, 187, 110, .16) 2px, transparent 2px), linear-gradient(90deg, rgba(217, 187, 110, .16) 2px, transparent 2px); background-size: 100px 100px; background-position: 300px 300px; -webkit-mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, #000 45%, transparent 100%); }
.map-col { position: absolute; width: 820px; margin-left: -410px; text-align: center; }
.map-col b { display: block; font: 700 76px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); }
.map-col span { display: block; margin-top: 16px; font: 400 40px/1.2 var(--body); color: rgba(247, 244, 237, .62); }
.map.v .map-col { width: 720px; margin-left: -360px; padding: 20px 0 24px; border-radius: 26px; background: #0a121c; box-shadow: 0 0 0 3px rgba(217, 187, 110, .4); }
.map-node { position: absolute; width: 370px; height: 140px; margin: -70px 0 0 -185px; border-radius: 24px; background: var(--navy-3); border: 4px solid var(--gold); display: grid; place-items: center; font: 500 70px/1 var(--display); color: var(--paper); font-variation-settings: 'opsz' 72; }
.map.v .map-node { width: 340px; margin-left: -170px; font-size: 64px; }
.map-svg { position: absolute; left: 0; top: 0; overflow: visible; }
.map-count { position: absolute; right: 3.4%; top: 5%; text-align: right; color: var(--paper); }
.map--full .map-count { top: auto; bottom: 6svh; right: var(--gut); }
.map-count b { display: block; font: 500 clamp(52px, 8vw, 120px)/1 var(--mono); color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.map-count span { font: 700 clamp(10px, 1vw, 13px)/1 var(--body); letter-spacing: .24em; text-transform: uppercase; }
.map-replay { position: absolute; left: 3%; bottom: 4.5%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(247, 244, 237, .1); color: var(--paper); font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .4s; }
.map.done .map-replay { opacity: 1; }
.map--full .map-replay { display: none; }
.mf-cap { position: absolute; left: var(--gut); top: 108px; z-index: 3; max-width: 470px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.mf-cap .lede { font-size: 17px; }
@media (max-width: 760px) { .mf-cap { top: 92px; right: var(--gut); } .mf-cap .lede { display: none; } }
html:not(.pin) .film--map .film-stage{ min-height: 0; padding: 120px var(--gut) 80px; }
html:not(.pin) .map--full{ position: relative; aspect-ratio: 16 / 9; border-radius: 22px; margin-top: 180px; }
html:not(.pin) .map--full.v{ aspect-ratio: 4 / 5; }
html:not(.pin) .mf-cap{ top: 120px; }

/* ---------- 06 · vendors, sideways ---------- */
.film--hs { --bg: var(--paper); --fg: var(--ink); --fg-2: #4d5b69; --accent: var(--gold-deep); --rule: rgba(19, 32, 46, .13); }
@media (max-width: 760px) { .film--hs { --lenx: 1.4; } }
.film--hs .film-stage { background: var(--paper); }
.hs-track { display: flex; height: 100%; will-change: transform; }
.hs-intro { flex: none; width: min(620px, 100vw); padding: 120px var(--gut) 64px; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.vfoot { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font: 500 12px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }
.vp { position: relative; flex: none; width: clamp(300px, 34vw, 560px); padding: 120px clamp(24px, 3vw, 48px) 64px; display: flex; flex-direction: column; gap: 16px; background: var(--bg); color: var(--c); overflow: hidden; }
.vp .tag { color: inherit; opacity: .8; }
.vp h3 { font: 700 clamp(40px, 4.6vw, 78px)/.96 var(--display); letter-spacing: -.035em; font-variation-settings: 'opsz' 144, 'SOFT' 0; max-width: 8ch; }
.vp p { font-size: 17px; opacity: .85; max-width: 26ch; }
.vp::after { content: attr(data-n); position: absolute; right: -.04em; bottom: 24%; z-index: 0; font: 400 clamp(180px, 22vw, 380px)/1 var(--display); letter-spacing: -.06em; font-variation-settings: 'opsz' 144, 'SOFT' 30; color: currentColor; opacity: .08; pointer-events: none; }
.vp > * { position: relative; z-index: 1; }
.vp .stamp { margin-top: auto; align-self: flex-start; font-size: clamp(20px, 2vw, 30px); border-width: 5px; padding: 12px 20px; }
@media (max-width: 760px) { .vp { width: 86vw; } }
.stamp { display: inline-block; padding: 10px 18px; border: 4px solid currentColor; border-radius: 10px; color: var(--sc, currentColor); font: 800 clamp(18px, 1.6vw, 22px)/1 var(--body); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: rotate(var(--rot, -8deg)); }
html:not(.pin) .film--hs .film-stage{ overflow: visible; }
html:not(.pin) .hs-track{ flex-wrap: wrap; height: auto; transform: none !important; }
html:not(.pin) .hs-intro{ width: 100%; max-width: none; }
html:not(.pin) .vp{ width: 50%; min-height: 380px; padding-top: 40px; }
@media (max-width: 760px) { html:not(.pin) .vp{ width: 100%; } }

/* ---------- 07 · files bento ---------- */
.fbento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.ftile { grid-column: span 2; display: flex; flex-direction: column; gap: 18px; padding: 12px 12px 28px; border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08), 0 30px 60px -40px rgba(13, 26, 39, .35); transition: transform .5s var(--ease-out), box-shadow .3s; }
.ftile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(166, 122, 36, .35), 0 40px 70px -40px rgba(13, 26, 39, .45); }
.ftile--xl { grid-column: span 4; grid-row: span 2; background: var(--navy); --fg: var(--paper); --fg-2: rgba(247, 244, 237, .66); --accent: var(--gold-bright); }
.ftile--w { grid-column: span 3; }
.ftile-cap { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; margin-top: auto; }
.ftile-cap h3 { font: 460 clamp(26px, 2.2vw, 34px)/1.05 var(--display); letter-spacing: -.024em; font-variation-settings: 'opsz' 144, 'SOFT' 30; color: var(--fg); }
.ftile-cap p { color: var(--fg-2); font-size: 16px; }
@media (max-width: 1000px) { .fbento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftile, .ftile--w { grid-column: span 1; } .ftile--xl { grid-column: span 2; grid-row: auto; } }
@media (max-width: 640px) { .fbento { grid-template-columns: minmax(0, 1fr); } .ftile, .ftile--w, .ftile--xl { grid-column: auto; } }
.browser { border-radius: 16px; overflow: hidden; background: #111c28; box-shadow: 0 0 0 1px rgba(247, 244, 237, .1); }
.br-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; }
.br-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(247, 244, 237, .16); }
.br-url { flex: 1; max-width: 340px; margin: 0 auto; padding: 7px 12px; border-radius: 8px; background: rgba(247, 244, 237, .07); text-align: center; font: 500 12px/1 var(--mono); color: rgba(247, 244, 237, .66); }
.br-view { position: relative; height: clamp(320px, 34vw, 470px); overflow: hidden; background: var(--paper-2); }
.br-view::after { content: ''; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent, var(--paper-2)); pointer-events: none; }
.doc { width: min(640px, 92%); margin: 22px auto 0; padding: 30px 34px 40px; border-radius: 6px; background: var(--card); color: var(--ink); box-shadow: 0 20px 50px -20px rgba(13, 26, 39, .35); will-change: transform; }
.doc-h { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--ink); }
.doc-h img { width: 40px; height: 40px; }
.doc-h b { display: block; font: 500 26px/1 var(--display); letter-spacing: -.02em; }
.doc-h span { display: block; margin-top: 6px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.doc h5 { margin: 26px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.doc-t > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(19, 32, 46, .08); font-size: 15px; font-weight: 600; }
.doc-bars > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 14px; padding: 7px 0; font-size: 14px; }
.doc-bars i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) calc(var(--w) * 100%), #e7e0d1 0); }
.doc-p { font-size: 14.5px; color: var(--muted); }
.fmini { position: relative; min-height: 190px; padding: 22px; border-radius: 16px; background: var(--paper-2); color: var(--ink); overflow: hidden; }
.fm-read span { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fm-read b { display: block; margin: 8px 0 14px; font: 500 38px/1 var(--display); letter-spacing: -.03em; color: var(--gold-deep); }
.fm-read li { position: relative; padding: 6px 0 6px 22px; font-size: 14.5px; font-weight: 600; border-top: 1px solid rgba(19, 32, 46, .08); }
.fm-read li::before { content: ''; position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gold); }
.fm-gantt { display: flex; flex-direction: column; gap: 12px; }
.g-h { display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .12em; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid rgba(19, 32, 46, .1); }
.fm-gantt i { display: block; height: 16px; border-radius: 5px; margin-left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); background: var(--gold); transform-origin: left; }
.fm-gantt i:nth-of-type(even) { background: var(--navy-3); }
.js .fm-gantt i { transform: scaleX(0); transition: transform .9s var(--ease-out); }
.js .in .fm-gantt i, .js .fm-gantt.in i { transform: none; }
.fm-gantt i:nth-of-type(2) { transition-delay: .12s; } .fm-gantt i:nth-of-type(3) { transition-delay: .24s; } .fm-gantt i:nth-of-type(4) { transition-delay: .36s; } .fm-gantt i:nth-of-type(5) { transition-delay: .48s; }
.fm-tix { display: flex; flex-direction: column; gap: 8px; background: var(--navy-2); color: var(--paper); font: 400 13.5px/1.45 var(--mono); }
.fm-tix p { padding: 10px 12px; border-radius: 10px; background: rgba(247, 244, 237, .05); box-shadow: inset 0 0 0 1px rgba(247, 244, 237, .08); }
.fm-tix b { display: inline-block; margin-right: 10px; color: var(--gold-bright); font-weight: 500; }
.fm-ev > div { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(19, 32, 46, .08); font-size: 15px; font-weight: 600; }
.fm-ev > div:last-child { border-bottom: 0; }

/* ---------- 08 · film player ---------- */
.player { position: relative; max-width: 1200px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 28px; overflow: hidden; background: var(--navy); box-shadow: 0 0 0 1px rgba(247, 244, 237, .1), 0 60px 140px -40px rgba(0, 0, 0, .9); transform-origin: 50% 0; }
.player.v { aspect-ratio: 9 / 16; max-width: min(420px, 100%); }
.player video { width: 100%; height: 100%; object-fit: cover; }
.pl-hud { position: absolute; left: 20px; right: 20px; top: 18px; display: flex; justify-content: space-between; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 244, 237, .8); pointer-events: none; }
.pl-rec { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 999px; background: rgba(7, 11, 16, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pl-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); animation: blink 1.4s steps(1) infinite; }
.pl-tc { padding: 8px 11px; border-radius: 999px; background: rgba(7, 11, 16, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.pl-sound { position: absolute; right: 18px; bottom: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px 11px 13px; border: 0; border-radius: 999px; background: var(--card); color: var(--ink); font: 650 14px/1 var(--body); cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); transition: transform .4s var(--ease-out); }
.pl-sound:hover { transform: translateY(-2px); }
.pl-eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.pl-eq i { width: 3px; height: 4px; border-radius: 1px; background: var(--gold); }
.pl-sound[aria-pressed="true"] .pl-eq i { animation: eq .9s var(--ease-io) infinite alternate; }
.pl-sound[aria-pressed="true"] .pl-eq i:nth-child(2) { animation-delay: -.3s; } .pl-sound[aria-pressed="true"] .pl-eq i:nth-child(3) { animation-delay: -.6s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
.pl-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(247, 244, 237, .12); }
.pl-prog b { position: absolute; inset: 0; background: var(--gold-bright); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- 09 · privacy ---------- */
.film--priv .film-stage { display: flex; align-items: center; padding-block: 110px 60px; }
.rec { position: relative; width: 100%; max-width: 520px; padding: 30px 34px 18px; border-radius: 22px; background: var(--card); color: var(--ink); box-shadow: 0 34px 80px rgba(13, 26, 39, .14), 0 0 0 1px rgba(19, 32, 46, .06); }
.rec-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 2px solid rgba(19, 32, 46, .08); }
.rec-top b { font: 700 13px/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-deep); }
.rec-top i { font: 500 11.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--muted); padding: 6px 10px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px rgba(19, 32, 46, .18); }
.rec li { display: flex; flex-direction: column; gap: 8px; padding: 15px 0; border-bottom: 2px solid rgba(19, 32, 46, .06); }
.rec li:last-child { border-bottom: 0; }
.rec li > span { font: 700 11.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.rec li em { position: relative; align-self: flex-start; font: 500 24px/1.1 var(--body); font-style: normal; }
.rec li u { position: absolute; left: -7px; right: -9px; top: -3px; bottom: -3px; border-radius: 3px; background: var(--ink); transform-origin: left; }
.rec-cap { margin-top: 14px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.ck { width: 44px; height: 44px; flex: none; overflow: visible; }
.ck circle { fill: none; stroke: var(--accent); stroke-width: 5; }
.ck path { fill: none; stroke: var(--fg); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.cklist { display: flex; flex-direction: column; }
.cklist li { display: flex; align-items: flex-start; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--rule); }
.cklist li:first-child { border-top: 1px solid var(--rule); }
.cklist .ck { width: 30px; height: 30px; margin-top: 1px; }
.cklist b { display: block; font-weight: 650; color: var(--fg); }
.cklist p { color: var(--fg-2); font-size: 16px; }
.js [data-checks] .ck circle, .js [data-checks] .ck path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js [data-checks] .ck circle { transition: stroke-dashoffset .6s var(--ease-out); transition-delay: calc(var(--i) * 200ms); }
.js [data-checks] .ck path { transition: stroke-dashoffset .35s var(--ease-out); transition-delay: calc(var(--i) * 200ms + 380ms); }
.js [data-checks].in .ck circle, .js [data-checks].in .ck path { stroke-dashoffset: 0; }

/* ---------- 10 · steps with a scroll playhead ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); padding-top: 64px; }
.steps::before, .steps::after { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; border-radius: 2px; background: var(--rule); }
.steps::after { background: var(--gold); transform-origin: left; transform: scaleX(var(--p, 1)); }
.steps-ph { position: absolute; top: 4px; left: 0; z-index: 2; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 0 6px rgba(217, 187, 110, .25); transform: translateX(var(--x, 0px)); }
.steps li { position: relative; display: flex; flex-direction: column; gap: 12px; opacity: var(--o, 1); transition: opacity .3s; }
.steps li::before { content: ''; position: absolute; left: 0; top: -60px; width: 20px; height: 20px; border-radius: 50%; background: var(--paper-2); box-shadow: inset 0 0 0 3px var(--gold); }
.steps .tag { color: var(--accent); }
.steps h3 { font: 460 clamp(26px, 2.3vw, 34px)/1.05 var(--display); letter-spacing: -.024em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.steps p { color: var(--fg-2); font-size: 16.5px; }
@media (max-width: 860px) {
  .steps { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 48px; gap: 40px; }
  .steps::before, .steps::after { left: 13px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps::after { transform-origin: top; transform: scaleY(var(--p, 1)); }
  .steps-ph { top: 0; left: 4px; margin-left: 0; margin-top: -10px; transform: translateY(var(--y, 0px)); }
  .steps li::before { left: -48px; top: 2px; }
}

/* ---------- 11 · who: a kinetic list of practice types ---------- */
.who { overflow: hidden; padding-bottom: clamp(56px, 6vw, 96px); }
.who .d-l { max-width: 20ch; margin-top: 22px; }
.tmq { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-direction: column; gap: 4px; }
.tmq-row { display: flex; gap: .5em; white-space: nowrap; font: 420 clamp(52px, 8.4vw, 148px)/1.02 var(--display); letter-spacing: -.04em; font-variation-settings: 'opsz' 144, 'SOFT' 30; will-change: transform; }
.tmq-row span { display: inline-flex; align-items: center; gap: .5em; }
.tmq-row span::after { content: '✦'; font-size: .36em; color: var(--ink); opacity: .55; }
.tmq-row span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; font: 480 clamp(20px, 1.8vw, 26px)/1.2 var(--display); font-variation-settings: 'opsz' 96, 'SOFT' 30; letter-spacing: -.018em; color: var(--fg); transition: color .2s; }
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--rule-2); transition: transform .45s var(--ease-out), background-color .2s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 15px; right: 15px; top: 21px; height: 1.5px; background: var(--fg); }
.faq summary i::after { transform: rotate(90deg); transition: transform .45s var(--ease-out); }
.faq details[open] summary i { background: var(--gold-bright); box-shadow: none; transform: rotate(180deg); }
.faq details[open] summary i::after { transform: rotate(0deg); }
.faq .ans { padding: 0 64px 30px 0; color: var(--fg-2); max-width: 72ch; }
.faq .ans a { color: var(--fg); text-decoration-color: var(--accent); }

/* ---------- CTA + crest ---------- */
.cta { text-align: center; overflow: hidden; padding-block: clamp(120px, 14vw, 220px); }
.cta .wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta .d-xl, .cta .d-l { max-width: 13ch; margin: 22px auto 0; }
.cta .lede { margin: 28px auto 0; }
.cta .btn-row { justify-content: center; margin-top: 40px; }
.cta .fine { margin-top: 20px; }
.crest { position: relative; width: 112px; height: 112px; margin: 0 auto 28px; }
.crest > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.crest path { fill: none; stroke: var(--gold-bright); stroke-width: 150; stroke-linejoin: round; }
.js .crest path { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-io), opacity .5s 1.5s; }
.js .crest.in path { stroke-dashoffset: 0; opacity: 0; }
.js .crest img { clip-path: inset(100% 0 0 0); transition: clip-path .7s var(--ease-io) .75s; }
.js .crest.in img { clip-path: inset(0 0 0 0); }
.crest-ring { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -120px 0 0 -120px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.crest.in .crest-ring { animation: ring2 1.4s var(--ease-out) .2s; }
@keyframes ring2 { from { opacity: .8; transform: scale(.45); } to { opacity: 0; transform: scale(1.8); } }

/* ---------- footer with a giant wordmark ---------- */
.ftr { position: relative; background: var(--navy-2); color: var(--fg); padding-top: clamp(72px, 8vw, 110px); overflow: hidden; }
.ftr-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.ftr-brand p { margin-top: 20px; max-width: 42ch; color: var(--fg-2); font-size: 15.5px; }
.ftr .brand { margin: 0; }
.ftr-h { font: 500 11.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 18px; }
.ftr ul { display: flex; flex-direction: column; gap: 12px; }
.ftr ul a { text-decoration: none; color: rgba(247, 244, 237, .78); font-size: 15.5px; transition: color .2s; }
.ftr ul a:hover { color: var(--gold-bright); }
.ftr ul li { color: rgba(247, 244, 237, .6); font-size: 15.5px; }
.ftr-legal { display: flex; justify-content: space-between; gap: 32px; margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 13px; color: rgba(247, 244, 237, .5); }
.ftr-legal p:first-child { max-width: 72ch; }
.ftr-legal strong { color: rgba(247, 244, 237, .8); }
.ftr-legal a { color: rgba(247, 244, 237, .7); }
.ftr-legal .r { text-align: right; flex: none; }
.ftr-word { position: relative; margin-top: clamp(24px, 4vw, 56px); height: .74em; font: 420 clamp(120px, 27vw, 460px)/1 var(--display); letter-spacing: -.055em; font-variation-settings: 'opsz' 144, 'SOFT' 30; text-align: center; color: #121e2b; user-select: none; overflow: hidden; }
.ftr-word span { display: block; transform: translateY(calc((1 - var(--p, 1)) * 30%)); background: linear-gradient(180deg, #2c4259 0%, #15222f 55%, #0a121c 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 860px) { .ftr-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } .ftr-legal { flex-direction: column; } .ftr-legal .r { text-align: left; } }

/* ---------- inner pages ---------- */
.page-hero { position: relative; overflow: hidden; background: var(--room); color: var(--fg); padding: clamp(150px, 20vw, 230px) 0 clamp(72px, 9vw, 130px); }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .d-xl { max-width: 15ch; margin-top: 26px; }
.page-hero .lede { margin-top: 28px; }
.page-hero .btn-row { margin-top: 36px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--rule); }
.stat { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 10px; }
.stat + .stat { padding-left: 22px; border-left: 1px solid var(--rule); }
.stat b { font: 430 clamp(34px, 3.8vw, 58px)/1 var(--display); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 30; color: var(--fg); }
.stat span { font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { padding-left: 0; border-left: 0; } .stat:nth-child(n+3) { margin-top: 22px; border-top: 1px solid var(--rule); } }
.receipt { width: 100%; max-width: 440px; justify-self: end; padding: 30px 30px 26px; border-radius: 6px; background: var(--card); color: var(--ink); font: 500 15px/1.5 var(--mono); box-shadow: 0 34px 80px rgba(0, 0, 0, .45); transform: rotate(2deg); }
.receipt h3 { font: 500 24px/1.1 var(--display); letter-spacing: -.015em; margin-bottom: 18px; }
.receipt li { display: flex; gap: 8px; padding: 6px 0; }
.receipt li span:nth-child(2) { flex: 1; border-bottom: 1.5px dotted rgba(19, 32, 46, .3); transform: translateY(-5px); }
.receipt .tot { margin-top: 12px; padding-top: 14px; border-top: 2px solid var(--ink); font-size: 17px; }
.receipt .stamp { margin-top: 20px; color: var(--ok); font-size: 15px; border-width: 3px; --rot: -10deg; }
.js .receipt li { clip-path: inset(0 100% 0 0); transition: clip-path .5s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 300ms); }
.js .receipt.in li { clip-path: inset(0 0 0 0); }
@media (max-width: 960px) { .receipt { justify-self: start; } }
.offer { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 36px 32px 32px; border-radius: 26px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08), 0 30px 60px -40px rgba(13, 26, 39, .35); --fg: var(--ink); --fg-2: #4d5b69; --accent: var(--gold-deep); --rule: rgba(19, 32, 46, .12); transition: transform .5s var(--ease-out); }
.offer:hover { transform: translateY(-4px); }
.offer--lead { background: var(--navy); color: var(--paper); box-shadow: 0 0 0 2px var(--gold-bright), 0 50px 90px -40px rgba(13, 26, 39, .6); --fg: var(--paper); --fg-2: rgba(247, 244, 237, .7); --accent: var(--gold-bright); --rule: rgba(247, 244, 237, .16); }
.offer .stamp { position: absolute; right: 22px; top: -18px; background: var(--gold-bright); color: var(--ink); border-color: var(--ink); font-size: 14px; border-width: 3px; --rot: 4deg; }
.offer h3 { font: 460 30px/1.05 var(--display); letter-spacing: -.024em; font-variation-settings: 'opsz' 144, 'SOFT' 30; color: var(--fg); }
.offer > p { color: var(--fg-2); font-size: 16px; }
.price { display: flex; flex-direction: column; gap: 6px; padding-block: 18px; border-block: 1px solid var(--rule); }
.price b { font: 430 58px/1 var(--display); letter-spacing: -.04em; color: var(--fg); font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.price span { font: 500 11.5px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.offer .cklist li { border-color: var(--rule); padding: 11px 0; }
.offer .cklist li:first-child { border-top: 0; }
.offer .cklist p { font-size: 15.5px; color: var(--fg); }
.offer .cklist .ck { width: 24px; height: 24px; }
.offer .btn { margin-top: auto; align-self: flex-start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.rules li { display: flex; gap: 20px; padding: 30px; border-radius: 24px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.rules h3 { font: 480 24px/1.1 var(--display); letter-spacing: -.02em; font-variation-settings: 'opsz' 96, 'SOFT' 30; margin-bottom: 8px; }
.rules p { color: var(--fg-2); font-size: 16px; }
.rules .ck { width: 40px; height: 40px; }
@media (max-width: 760px) { .rules { grid-template-columns: minmax(0, 1fr); } }
/* risks: cards that stack as you scroll */
.rstack { display: flex; flex-direction: column; gap: 0; }
.rcard { position: sticky; top: calc(96px + var(--i) * 14px); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 24px clamp(32px, 5vw, 80px); min-height: min(520px, 70svh); margin-bottom: 36px; padding: clamp(28px, 4vw, 56px); border-radius: 30px; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08), 0 -20px 60px -30px rgba(13, 26, 39, .25); transform-origin: 50% 0; --fg: var(--ink); --fg-2: #4d5b69; --accent: var(--gold-deep); --rule: rgba(19, 32, 46, .12); --surface: var(--paper-2); }
.rcard:nth-child(even) { background: var(--navy); color: var(--paper); --fg: var(--paper); --fg-2: rgba(247, 244, 237, .7); --accent: var(--gold-bright); --rule: rgba(247, 244, 237, .14); --surface: var(--navy-3); box-shadow: 0 0 0 1px rgba(247, 244, 237, .08), 0 -20px 60px -30px rgba(0, 0, 0, .5); }
.rcard .rn { font: 420 clamp(90px, 12vw, 190px)/.8 var(--display); letter-spacing: -.05em; color: var(--accent); font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.rcard h3 { margin-top: 24px; font: 440 clamp(32px, 3.4vw, 54px)/1.02 var(--display); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 30; color: var(--fg); }
.rcard .body { font-size: clamp(17px, 1.3vw, 20px); color: var(--fg); }
.rcard > div:last-child { display: flex; flex-direction: column; justify-content: flex-end; gap: 22px; }
.fix { display: flex; gap: 16px; padding: 22px 24px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.fix .ck { width: 30px; height: 30px; }
.fix b { display: block; font: 500 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.fix p { color: var(--fg); font-size: 16px; }
@media (max-width: 860px) { .rcard { grid-template-columns: minmax(0, 1fr); min-height: 0; top: calc(84px + var(--i) * 10px); } .rcard .rn { font-size: 80px; } }
.moments { display: flex; flex-direction: column; }
.moments li { padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 16.5px; color: var(--fg-2); }
.moments li:first-child { border-top: 1px solid var(--rule); }
.moments strong { color: var(--fg); font: 480 22px/1.25 var(--display); font-variation-settings: 'opsz' 72, 'SOFT' 30; }
/* packet page */
.files { display: flex; flex-direction: column; }
.file { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 48px; padding-block: clamp(28px, 3vw, 44px); border-top: 1px solid var(--rule); align-items: start; }
.file:last-child { border-bottom: 1px solid var(--rule); }
.file .fnum { font: 420 64px/.8 var(--display); letter-spacing: -.04em; color: var(--accent); font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.file .tag { color: var(--accent); }
.file h3 { font: 460 clamp(26px, 2.4vw, 36px)/1.04 var(--display); letter-spacing: -.026em; font-variation-settings: 'opsz' 144, 'SOFT' 30; margin-top: 10px; }
.file .fname { margin-top: 12px; font: 500 13px/1.5 var(--mono); color: var(--fg-2); }
@media (max-width: 860px) { .file { grid-template-columns: minmax(0, 1fr); } }
.tl { position: relative; display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); padding-top: 64px; }
.tl::before, .tl::after { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--rule); }
.tl::after { background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 1)); }
.tl li { position: relative; display: flex; flex-direction: column; gap: 10px; opacity: var(--o, 1); transition: opacity .3s; }
.tl li::before { content: ''; position: absolute; left: 0; top: -60px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg, var(--navy)); box-shadow: inset 0 0 0 3px var(--accent); }
.tl .tag { color: var(--accent); }
.tl h3 { font: 480 clamp(21px, 1.7vw, 25px)/1.12 var(--display); font-variation-settings: 'opsz' 96, 'SOFT' 30; letter-spacing: -.015em; }
.tl p { color: var(--fg-2); font-size: 15.5px; }
@media (max-width: 960px) {
  .tl { grid-template-columns: minmax(0, 1fr); padding-top: 0; padding-left: 48px; gap: 32px; }
  .tl::before, .tl::after { left: 13px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .tl::after { transform-origin: top; transform: scaleY(var(--p, 1)); }
  .tl li::before { left: -48px; top: 2px; }
}
.mapcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mapcards li { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 22px; background: var(--card); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08); transition: transform .5s var(--ease-out), box-shadow .3s; }
.mapcards li:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(166, 122, 36, .4), 0 30px 50px -30px rgba(13, 26, 39, .35); }
.mapcards h3 { font: 480 21px/1.15 var(--display); font-variation-settings: 'opsz' 72, 'SOFT' 30; letter-spacing: -.012em; color: var(--fg); }
.mapcards p { font-size: 15px; color: var(--fg-2); }
@media (max-width: 1000px) { .mapcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .mapcards { grid-template-columns: minmax(0, 1fr); } }
.readout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 860px) { .readout { grid-template-columns: minmax(0, 1fr); } }
.panel-s { padding: 34px; border-radius: 26px; background: var(--card); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08); }
.panel-s h3 { font: 480 26px/1.1 var(--display); font-variation-settings: 'opsz' 96, 'SOFT' 30; letter-spacing: -.02em; margin-bottom: 18px; color: var(--fg); }
.panel-s .cklist li:first-child { border-top: 0; }
.panel-s .cklist p { color: var(--fg); }
.stampwall { display: flex; flex-wrap: wrap; gap: 26px 30px; justify-content: center; padding-block: 10px; }
.stampwall .stamp { font-size: clamp(18px, 2vw, 28px); border-width: 5px; padding: 12px 20px; }
.stampwall .stamp:nth-child(3n+1) { --rot: -6deg; } .stampwall .stamp:nth-child(3n+2) { --rot: 4deg; } .stampwall .stamp:nth-child(3n) { --rot: -2deg; }
.js .stamps:not(.in) .stamp { opacity: 0; }
.js .stamps.in .stamp { animation: slam .5s both; animation-delay: calc(var(--i) * 120ms + 150ms); }
@keyframes slam {
  0% { opacity: 0; transform: rotate(-24deg) scale(2.6); animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  62% { opacity: 1; transform: rotate(var(--rot, -8deg)) scale(.95); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: rotate(var(--rot, -8deg)) scale(1); }
}
.prose { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(32px, 6vw, 96px); padding-block: clamp(32px, 4vw, 56px); border-top: 1px solid var(--rule); }
.prose:last-of-type { border-bottom: 1px solid var(--rule); }
.prose h2 { font: 460 clamp(26px, 2.4vw, 34px)/1.08 var(--display); font-variation-settings: 'opsz' 144, 'SOFT' 30; letter-spacing: -.024em; color: var(--fg); }
.prose .body { font-size: clamp(17px, 1.3vw, 19.5px); }
@media (max-width: 860px) { .prose { grid-template-columns: minmax(0, 1fr); } }
.lcard { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border-radius: 24px; background: var(--card); box-shadow: 0 0 0 1px rgba(19, 32, 46, .08); text-decoration: none; transition: transform .5s var(--ease-out), box-shadow .3s; }
.lcard:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(166, 122, 36, .4), 0 30px 50px -30px rgba(13, 26, 39, .35); }
.lcard b { font: 480 23px/1.15 var(--display); font-variation-settings: 'opsz' 96, 'SOFT' 30; letter-spacing: -.015em; }
.lcard span:not(.tag) { color: var(--fg-2); font-size: 15.5px; }
.lcard i { margin-top: auto; padding-top: 16px; font: 500 12.5px/1 var(--mono); font-style: normal; color: var(--accent); }
/* scroll-lit statement: words light up as they pass the reading line */
.lit { font: 440 clamp(32px, 4.2vw, 66px)/1.1 var(--display); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 30; text-wrap: balance; max-width: 22ch; }
.lit .lw { color: var(--fg); opacity: .18; transition: opacity .25s; }
.lit .lw.on { opacity: 1; }
.notfound { min-height: 88svh; display: flex; align-items: center; }

/* ---------- reveals (time-based, for normal-flow sections) ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity .9s var(--ease-out), transform 1s var(--ease-out), filter .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 1ms); }
.js [data-reveal].in { opacity: 1; transform: none; filter: none; }
.js [data-split] .w { display: inline-block; }
.js [data-split] .w > span { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(12px); transition: opacity .7s var(--land), transform .8s var(--land), filter .7s var(--land); transition-delay: calc(var(--i) * 55ms); }
.js [data-split].in .w > span { opacity: 1; transform: none; filter: none; }
.js [data-stagger] > * { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--i) * 110ms); }
.js [data-stagger].in > * { opacity: 1; transform: none; }
.js [data-stagger].in > *:hover { transition-delay: 0s; }

/* ---------- reduced motion: every scene rests on its finished frame ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js [data-split] .w > span, .js [data-stagger] > * { opacity: 1; transform: none; filter: none; }
}

/* ---------- packet page · the five files dealt as you scroll ---------- */
.film--deck .film-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 20px; padding: 104px var(--gut) 40px; max-width: 1440px; margin: 0 auto; }
.dk-head { display: flex; align-items: baseline; gap: 10px 22px; flex-wrap: wrap; }
.dk-head .d-m { font-size: clamp(22px, 1.8vw, 28px); color: var(--fg-2); }
.dk-grid { padding-top: 40px; }
.dk-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); min-height: 0; }
.dk-item { display: contents; }
.dk-cap { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: 14px; }
.dk-n { font: 420 clamp(80px, 10vw, 150px)/.8 var(--display); letter-spacing: -.05em; color: var(--gold-bright); font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.dk-cap h3 { margin-top: 10px; font: 440 clamp(32px, 3.2vw, 50px)/1.02 var(--display); letter-spacing: -.03em; font-variation-settings: 'opsz' 144, 'SOFT' 30; }
.dk-cap .fname { font: 500 13px/1.5 var(--mono); color: var(--gold-bright); }
.dk-cap p:not(.fname) { color: var(--fg-2); max-width: 46ch; }
.dk-card { grid-column: 2; grid-row: 1; align-self: center; justify-self: center; width: min(600px, 100%); height: min(600px, 100%); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px rgba(247, 244, 237, .12), 0 50px 100px -30px rgba(0, 0, 0, .8); transform-origin: 50% 0; will-change: transform; }
.dk-card--dark { background: #0f1a26; }
.dk-bar { flex: none; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; background: #f1ece1; border-bottom: 1px solid rgba(19, 32, 46, .07); }
.dk-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9d2c3; }
.dk-bar span { margin-left: 8px; font: 500 12px/1 var(--mono); color: var(--muted); }
.dk-card--dark .dk-bar { background: #142231; border-color: rgba(247, 244, 237, .06); }
.dk-card--dark .dk-bar i { background: rgba(247, 244, 237, .18); }
.dk-card--dark .dk-bar span { color: rgba(247, 244, 237, .6); }
.dk-doc { flex: 1; min-height: 0; padding: 26px 30px; overflow: hidden; }
.dk-doc h5 { margin: 22px 0 10px; font: 500 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.dk-doc.fm-tix { display: flex; flex-direction: column; gap: 10px; border-radius: 0; font-size: 14.5px; }
.dk-risk { margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--gold-pale); }
.dk-risk span { display: block; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.dk-risk b { display: block; margin-top: 8px; font: 460 44px/1 var(--display); letter-spacing: -.03em; color: var(--gold-deep); }
.dk-acts { counter-reset: a; display: flex; flex-direction: column; }
.dk-acts li { counter-increment: a; display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(19, 32, 46, .08); font-size: 15px; font-weight: 600; }
.dk-acts li::before { content: counter(a); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); font: 500 12px/1 var(--mono); }
.dk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.dk-two p { font-size: 14px; color: var(--muted); }
.dk-gantt { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; }
.dk-gantt > div { display: grid; grid-template-columns: 140px minmax(0, 1fr) 84px; align-items: center; gap: 12px; height: 46px; border-bottom: 1px solid rgba(19, 32, 46, .07); font-size: 14px; font-weight: 600; }
.dk-gantt .g-h { display: grid; grid-template-columns: 140px repeat(3, minmax(0, 1fr)) 84px; height: 30px; font-weight: 500; }
.dk-gantt i { display: block; height: 14px; border-radius: 5px; margin-left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); background: var(--gold); }
.dk-gantt > div:nth-child(odd) i { background: var(--navy-3); }
.dk-gantt em { font: 500 10.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; }
@media (max-width: 959px) {
  .film--deck .film-stage { padding: 88px 16px 16px; gap: 12px; }
  .dk-head .d-m { display: none; }
  .dk-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
  .dk-cap { grid-column: 1; grid-row: 1; align-self: end; gap: 6px; }
  .dk-n { font-size: 56px; }
  .dk-cap h3 { margin-top: 0; font-size: 30px; }
  .dk-cap p:not(.fname) { font-size: 15px; line-height: 1.5; }
  .dk-card { grid-column: 1; grid-row: 2; height: calc(100% - 26px); align-self: end; }
  .dk-doc { padding: 18px 20px; }
  .dk-gantt > div { grid-template-columns: 110px minmax(0, 1fr); }
  .dk-gantt .g-h { grid-template-columns: 110px repeat(3, minmax(0, 1fr)); }
  .dk-gantt em, .dk-gantt .g-h span:last-child:empty { display: none; }
}
html:not(.pin) .film--deck .film-stage { display: block; padding-block: 110px 80px; }
html:not(.pin) .dk-grid { display: flex; flex-direction: column; gap: 56px; margin-top: 40px; }
html:not(.pin) .dk-item { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; }
html:not(.pin) .dk-card { height: 540px; }
@media (max-width: 959px) { html:not(.pin) .dk-item { grid-template-columns: minmax(0, 1fr); } }