/* =========================================================
   $OG / DESIGN PREVIEW  v3
   An immersive pass. The page is something you move through:
   a depth field of tokens behind the hero, the weekly loop played
   out as a scene that holds while you scroll, the tech underneath
   as a stack of glass layers, and a reserve you can scrub in time.

   Standalone: nothing here touches site.css.

   House rules kept:
   - motion is transform and opacity (plus two canvases drawn on
     demand), and every bit of it stops for prefers-reduced-motion
   - no gradient text, no glowing gradient buttons, no pulsing badges
   - charts are lines and arcs, never bars
   ========================================================= */

/* colour temperature of the light, animated between sections */
@property --c1{ syntax:'<color>'; inherits:true; initial-value:rgba(150,82,255,.26); }
@property --c2{ syntax:'<color>'; inherits:true; initial-value:rgba(214,80,190,.13); }
@property --c3{ syntax:'<color>'; inherits:true; initial-value:rgba(242,190,100,.15); }
@property --c4{ syntax:'<color>'; inherits:true; initial-value:rgba(60,190,214,.09); }

:root{
  color-scheme:dark;
  --ground:#07050d;
  --ink:#f5f1fb;
  --ink-2:#c1b9d0;
  --ink-3:#8b839b;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.085);

  --violet:#a86bff;
  --gold:#f2c878;
  --gold-2:#ffe2a8;
  --teal:#5fd3e3;
  --mint:#62e3a8;

  --r:18px; --r-lg:26px; --r-xl:34px;
  --sans:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ez:cubic-bezier(.22,.61,.36,1);
  --ez-out:cubic-bezier(.16,1,.3,1);

  --c1:rgba(150,82,255,.26); --c2:rgba(214,80,190,.13); --c3:rgba(242,190,100,.15); --c4:rgba(60,190,214,.09);
  transition:--c1 1.6s var(--ez), --c2 1.6s var(--ez), --c3 1.6s var(--ez), --c4 1.6s var(--ez);
}
:root[data-tone="loop"]   { --c1:rgba(140,76,255,.24); --c2:rgba(60,190,214,.15); --c3:rgba(242,190,100,.10); --c4:rgba(90,70,255,.14); }
:root[data-tone="fee"]    { --c1:rgba(242,190,100,.18); --c2:rgba(168,107,255,.16); --c3:rgba(242,176,90,.17); --c4:rgba(60,190,214,.08); }
:root[data-tone="share"]  { --c1:rgba(160,96,255,.20); --c2:rgba(242,200,120,.10); --c3:rgba(60,190,214,.12); --c4:rgba(150,82,255,.10); }
:root[data-tone="tech"]   { --c1:rgba(96,84,255,.24); --c2:rgba(60,190,214,.17); --c3:rgba(168,107,255,.12); --c4:rgba(60,190,214,.10); }
:root[data-tone="reserve"]{ --c1:rgba(242,190,100,.20); --c2:rgba(168,107,255,.18); --c3:rgba(242,190,100,.12); --c4:rgba(150,82,255,.09); }
:root[data-tone="quiet"]  { --c1:rgba(130,80,230,.16); --c2:rgba(214,80,190,.07); --c3:rgba(242,190,100,.08); --c4:rgba(60,190,214,.06); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scrollbar-width:thin; scrollbar-color:rgba(168,107,255,.38) transparent; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-thumb{ background:rgba(168,107,255,.32); border-radius:999px; border:3px solid var(--ground); }
::-webkit-scrollbar-track{ background:transparent; }
::selection{ background:rgba(168,107,255,.36); color:#fff; }
body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"ss01" 0; }
img, svg, canvas{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; text-wrap:pretty; }
.pv-wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }
main, .pv-foot{ position:relative; z-index:2; }
section, header{ scroll-margin-top:84px; }
.pv-num{ font-variant-numeric:tabular-nums; }

/* ---- the light, the grain, the field ------------------------------- */
.pv-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.pv-bg i{ position:absolute; border-radius:50%; will-change:transform; }
.pv-bg i:nth-child(1){ width:80vmax; height:80vmax; left:-26vmax; top:-36vmax; background:radial-gradient(circle, var(--c1), transparent 62%); animation:pv-drift-a 36s ease-in-out infinite; }
.pv-bg i:nth-child(2){ width:64vmax; height:64vmax; right:-22vmax; top:-20vmax; background:radial-gradient(circle, var(--c2), transparent 62%); animation:pv-drift-b 43s ease-in-out infinite; }
.pv-bg i:nth-child(3){ width:72vmax; height:72vmax; right:-28vmax; bottom:-38vmax; background:radial-gradient(circle, var(--c3), transparent 62%); animation:pv-drift-a 49s ease-in-out infinite reverse; }
.pv-bg i:nth-child(4){ width:58vmax; height:58vmax; left:-22vmax; bottom:-28vmax; background:radial-gradient(circle, var(--c4), transparent 62%); animation:pv-drift-b 55s ease-in-out infinite reverse; }
@keyframes pv-drift-a{ 50%{ transform:translate(9vmax, 7vmax) scale(1.08); } }
@keyframes pv-drift-b{ 50%{ transform:translate(-8vmax, 9vmax) scale(1.12); } }

/* Fine grain. A tiled bitmap made once, no blend mode, so scrolling over it
   costs nothing. It is what stops the large gradients from banding and
   gives the dark a surface instead of a void. */
.pv-grain{ position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.pv-field{ position:fixed; inset:0; z-index:1; width:100vw; height:100vh; pointer-events:none;
  transition:opacity .5s linear; }

/* ---- type ------------------------------------------------------------ */
h1, h2, h3{ margin:0; font-weight:600; color:var(--ink); text-wrap:balance; }
h1{ font-size:clamp(46px, 7vw, 96px); line-height:1.0; letter-spacing:-.042em; }
h2{ font-size:clamp(36px, 4.8vw, 62px); line-height:1.05; letter-spacing:-.034em; }
h3{ font-size:20px; line-height:1.3; letter-spacing:-.016em; }
.pv-dim{ color:#a698c0; }
.pv-eyebrow{ display:inline-flex; align-items:center; gap:12px; margin:0 0 22px;
  font:500 12px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.pv-eyebrow::before{ content:''; width:22px; height:2px; border-radius:2px; background:currentColor; opacity:.85; }
.pv-lede{ margin-top:24px; max-width:35em; font-size:clamp(17px, 1.45vw, 19.5px); line-height:1.66; color:var(--ink-2); }

/* word by word, rising out of a mask; calm, not bouncy */
.pv-w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .14em; margin:0 -.02em -.14em; }
.pv-w > span{ display:inline-block; transform:translateY(108%); opacity:.001;
  transition:transform 1.1s var(--ez-out), opacity .6s linear; transition-delay:calc(var(--i, 0) * 34ms + var(--d, 0s)); }
.pv-words.is-in .pv-w > span{ transform:none; opacity:1; }

/* ---- surfaces, with light that follows the pointer ------------------ */
.pv-card{ position:relative; border-radius:var(--r-xl); border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.016));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 40px 90px -60px rgba(0,0,0,.9);
  --mx:50%; --my:0%; isolation:isolate; }
.pv-card::before{ content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; z-index:2;
  background:radial-gradient(340px circle at var(--mx) var(--my), rgba(255,226,168,.55), rgba(168,107,255,.25) 30%, transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity:0; transition:opacity .5s var(--ez); }
.pv-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.055), transparent 55%);
  opacity:0; transition:opacity .5s var(--ez); }
.pv-card:hover::before, .pv-card:hover::after{ opacity:1; }

/* ---- buttons ---------------------------------------------------------- */
.pv-btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:12px; padding:16px 28px; border-radius:999px;
  border:1px solid var(--line-2); background:linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16); color:var(--ink); text-decoration:none; cursor:pointer;
  font:500 15px/1 var(--sans); letter-spacing:-.005em;
  transition:transform .5s var(--ez-out), border-color .3s, background .3s; }
.pv-btn::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.2), transparent); transform:translateX(-160%); }
.pv-btn:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.34); background:linear-gradient(160deg, rgba(255,255,255,.17), rgba(255,255,255,.05)); }
.pv-btn:hover::after{ transform:translateX(320%); transition:transform 1s var(--ez); }
.pv-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .45s var(--ez-out); }
.pv-btn:hover svg{ transform:translateX(4px); }
.pv-btn-soon{ border-color:rgba(242,200,120,.34); color:var(--gold-2); cursor:default; background:linear-gradient(180deg, rgba(255,226,168,.12), rgba(242,200,120,.035)); }
.pv-btn-soon:hover{ transform:none; border-color:rgba(242,200,120,.34); background:linear-gradient(180deg, rgba(255,226,168,.12), rgba(242,200,120,.035)); }
.pv-btn-soon:hover::after{ transform:translateX(-160%); transition:none; }
.pv-btn-sm{ padding:10px 18px; font-size:13.5px; }

/* ---- nav ----------------------------------------------------------------
   A plain instrument bar: full width, flush to the top, one hairline.
   No floating capsule, no sliding pill, no glow, no gradient. The one
   piece of state it carries is the fact that matters: the contract. */
.pv-nav{ position:fixed; top:0; left:0; right:0; z-index:50; opacity:0; border-bottom:1px solid transparent;
  background:linear-gradient(rgba(7,5,13,.78), rgba(7,5,13,0));
  transition:opacity .6s var(--ez), background-color .3s, border-color .3s; }
.is-ready .pv-nav{ opacity:1; }
.pv-nav.is-scrolled{ background:rgba(8,6,14,.94); border-color:var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.pv-nav-in{ display:flex; align-items:center; gap:40px; max-width:1240px; height:64px; margin:0 auto; padding-inline:28px; }
.pv-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.pv-word{ font-size:18px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.pv-brand-sub{ padding-left:14px; border-left:1px solid var(--line-2); font:500 11px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.pv-links{ display:flex; align-items:center; gap:28px; margin-left:auto; }
.pv-links a{ position:relative; padding:22px 0; line-height:20px; text-decoration:none; font-size:13.5px; color:var(--ink-3); transition:color .2s; }
.pv-links a:hover, .pv-links a.is-on{ color:var(--ink); }
.pv-links a.is-on::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--ink); }
.pv-nav-ca{ display:inline-flex; align-items:stretch; height:34px; border:1px solid var(--line-2); border-radius:6px; overflow:hidden;
  font:500 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; cursor:default; }
.pv-nav-ca span{ display:flex; align-items:center; padding:0 11px; color:var(--ink-3); border-right:1px solid var(--line-2); background:rgba(255,255,255,.03); }
.pv-nav-ca b{ display:flex; align-items:center; padding:0 12px; font-weight:500; color:var(--ink-2); }
@media (max-width:1160px){ .pv-links{ gap:22px; } .pv-brand-sub{ display:none; } }
@media (max-width:980px){ .pv-links{ display:none; } .pv-nav-ca{ margin-left:auto; } }
@media (max-width:420px){ .pv-nav-in{ padding-inline:18px; } }

/* ---- sections ---------------------------------------------------------- */
.pv-sec{ position:relative; padding:150px 0; }
.pv-head{ max-width:780px; }
.pv-head.is-center{ margin:0 auto; text-align:center; }
.pv-head.is-center .pv-lede{ margin-left:auto; margin-right:auto; }
@media (max-width:700px){ .pv-sec{ padding:100px 0; } }

/* ---- hero -------------------------------------------------------------- */
.pv-hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:center; padding:120px 0 90px; }
.pv-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:36px; align-items:center; width:100%; }
.pv-kicker{ display:inline-flex; align-items:center; gap:12px; margin-bottom:32px; padding:6px 16px 6px 6px;
  border-radius:999px; border:1px solid var(--line); background:var(--glass); font-size:14px; color:var(--ink-2);
  opacity:0; transform:translateY(12px); transition:opacity .9s var(--ez), transform 1.1s var(--ez-out); transition-delay:.45s; }
.pv-kicker b{ display:inline-grid; place-items:center; height:28px; padding:0 12px; border-radius:999px;
  background:rgba(168,107,255,.2); color:#ecdfff; font:500 11.5px/1 var(--mono); letter-spacing:.14em; }
.pv-hero .pv-lede, .pv-hero .pv-actions, .pv-hero-note{ opacity:0; transform:translateY(14px);
  transition:opacity 1s var(--ez), transform 1.2s var(--ez-out); }
.is-ready .pv-kicker, .is-ready .pv-hero .pv-lede, .is-ready .pv-hero .pv-actions, .is-ready .pv-hero-note{ opacity:1; transform:none; }
.is-ready .pv-hero .pv-lede{ transition-delay:1.05s; }
.is-ready .pv-hero .pv-actions{ transition-delay:1.25s; }
.is-ready .pv-hero-note{ transition-delay:1.4s; }
.pv-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.pv-hero-note{ margin-top:22px; font-size:14px; color:var(--ink-3); }

.pv-hero-mark{ position:relative; perspective:1400px; opacity:0; transform:translateY(30px) scale(.965);
  transition:opacity 1.6s var(--ez), transform 2s var(--ez-out); transition-delay:.2s; }
.is-ready .pv-hero-mark{ opacity:1; transform:none; }
.pv-hero-mark::before{ content:''; position:absolute; left:50%; top:50%; width:125%; aspect-ratio:1.55/1;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(168,100,255,.4), rgba(214,80,190,.11) 46%, transparent 70%); }
.pv-tilt{ position:relative; transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.pv-tilt svg{ width:100%; height:auto; overflow:visible; animation:pv-bob 10s ease-in-out infinite; }
@keyframes pv-bob{ 50%{ transform:translateY(-12px); } }

.pv-cue{ position:absolute; left:50%; bottom:28px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:12px;
  font:500 10.5px/1 var(--mono); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-3); text-decoration:none;
  opacity:0; transition:opacity 1s var(--ez) 1.8s; }
.is-ready .pv-cue{ opacity:1; }
.pv-cue i{ position:relative; width:1.5px; height:44px; border-radius:2px; background:rgba(255,255,255,.12); overflow:hidden; }
.pv-cue i::after{ content:''; position:absolute; left:0; right:0; top:-40%; height:40%; border-radius:2px;
  background:linear-gradient(180deg, transparent, var(--gold)); animation:pv-cue 2.6s var(--ez) infinite; }
@keyframes pv-cue{ to{ top:110%; } }

@media (max-width:940px){
  .pv-hero{ padding:104px 0 96px; align-items:flex-start; }
  .pv-hero-grid{ grid-template-columns:1fr; gap:14px; }
  .pv-hero-mark{ order:-1; width:min(100%, 470px); margin:0 auto; }
}
@media (max-width:560px){
  .pv-hero{ padding-top:92px; }
  .pv-hero-mark{ width:min(88%, 340px); }
  .pv-kicker{ margin-bottom:22px; }
  .pv-actions{ margin-top:30px; }
  .pv-cue{ display:none; }
}

/* the mark's parts, as on the entry */
.og-shadow{ stroke:rgba(18,6,46,.5); }
.og-rim{ stroke:url(#ogRim); }
.og-row{ will-change:transform; animation:og-drift var(--s, 60s) linear infinite; }
.og-row.is-rev{ animation-direction:reverse; }
@keyframes og-drift{ to{ transform:translateX(-1920px); } }
.og-sheen{ animation:og-sheen 7.5s ease-in-out 1.2s infinite; }
@keyframes og-sheen{ 0%{ transform:translateX(0); } 45%, 100%{ transform:translateX(2900px); } }

/* ---- the four plain facts ----------------------------------------------- */
.pv-band{ position:relative; padding:10px 0 40px; }
.pv-stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.pv-stat{ padding:28px 28px 30px; border-radius:var(--r-lg); }
.pv-stat span{ display:block; font:500 11.5px/1.3 var(--mono); letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); }
.pv-stat b{ display:block; margin-top:18px; font-size:clamp(34px, 3.4vw, 44px); font-weight:600; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.pv-stat small{ display:block; margin-top:12px; font-size:14px; color:var(--ink-3); line-height:1.45; }
@media (max-width:860px){ .pv-stats{ grid-template-columns:repeat(2, minmax(0,1fr)); } .pv-stat{ padding:22px; } }

/* ---- THE LOOP, as a scene ----------------------------------------------
   A tall section with a stage that holds still while you scroll through
   it. The canvas behind is drawn only while the section is on screen.   */
.pv-scene{ position:relative; height:460vh; }
.pv-scene-pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.pv-scene canvas{ position:absolute; inset:0; width:100%; height:100%; }
.pv-scene-copy{ position:absolute; z-index:2; top:50%; transform:translateY(-50%);
  left:max(28px, calc((100vw - 1180px) / 2 + 28px)); width:min(430px, 38vw); }
.pv-scene-copy .pv-eyebrow{ margin-bottom:18px; }
.pv-scene-title{ font-size:clamp(30px, 3.2vw, 44px); line-height:1.08; letter-spacing:-.03em; }
.pv-chapters{ position:relative; margin-top:36px; min-height:250px; }
.pv-chapter{ position:absolute; inset:0 0 auto 0; opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity .7s var(--ez), transform .9s var(--ez-out); }
.pv-chapter.is-on{ opacity:1; transform:none; pointer-events:auto; }
.pv-chapter-n{ font:500 12px/1 var(--mono); letter-spacing:.16em; color:var(--gold); font-variant-numeric:tabular-nums; }
.pv-chapter h3{ margin-top:14px; font-size:clamp(24px, 2.3vw, 30px); letter-spacing:-.025em; }
.pv-chapter p{ margin-top:12px; font-size:16.5px; line-height:1.65; color:var(--ink-2); }
.pv-chapter em{ display:inline-block; margin-top:18px; padding:7px 14px; border-radius:999px; font:500 12.5px/1 var(--mono); font-style:normal;
  color:var(--ink-2); border:1px solid var(--line); background:rgba(0,0,0,.25); }
.pv-rail{ position:relative; display:flex; gap:10px; align-items:center; margin-top:30px; }
.pv-rail-track{ position:relative; flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.pv-rail-fill{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--violet), var(--gold)); }
.pv-rail-dots{ display:flex; gap:8px; }
.pv-rail-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.16); transition:background .4s, transform .5s var(--ez-out); }
.pv-rail-dot.is-on{ background:var(--gold); transform:scale(1.3); }
.pv-scene-hint{ position:absolute; z-index:2; right:max(28px, calc((100vw - 1180px) / 2 + 28px)); bottom:32px;
  font:500 10.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); transition:opacity .6s; }
.pv-scene.is-done .pv-scene-hint{ opacity:0; }
@media (max-width:820px){
  .pv-scene{ height:420vh; }
  .pv-scene-copy{ top:auto; bottom:0; left:0; right:0; width:auto; transform:none; padding:28px 24px 34px;
    background:linear-gradient(180deg, transparent, rgba(7,5,13,.9) 34%, var(--ground)); }
  .pv-scene-title{ display:none; }
  .pv-scene-copy .pv-eyebrow{ display:none; }
  /* tall enough for the longest chapter (heading, four lines, chip) so the
     progress rail below never runs through it */
  .pv-chapters{ margin-top:0; min-height:268px; }
  .pv-chapter p{ font-size:15.5px; }
  .pv-scene-hint{ display:none; }
}

/* ---- the fee -------------------------------------------------------------- */
.pv-split{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1fr); gap:72px; align-items:center; margin-top:76px; }
.pv-donut{ position:relative; width:100%; max-width:450px; aspect-ratio:1; margin:0 auto; }
.pv-donut svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.pv-donut .arc{ fill:none; stroke-width:32; stroke-linecap:round; transition:stroke-dashoffset 1.8s var(--ez-out), stroke-width .5s var(--ez-out), opacity .4s; }
.pv-donut.has-focus .arc{ opacity:.28; }
.pv-donut.has-focus .arc.is-focus{ opacity:1; stroke-width:40; }
.pv-donut-c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.pv-donut-c b{ display:block; font-size:clamp(54px, 6.4vw, 80px); font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums; transition:color .4s; }
.pv-donut-c span{ display:block; margin-top:12px; font:500 11.5px/1.45 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.pv-legend{ display:grid; gap:12px; }
.pv-leg{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:20px; align-items:center; padding:24px 26px; border-radius:var(--r-lg); cursor:default;
  transition:transform .5s var(--ez-out), border-color .4s; }
.pv-leg:hover{ transform:translateX(6px); }
.pv-leg i{ width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 6px rgba(255,255,255,.04); }
.pv-leg h3{ font-size:17.5px; }
.pv-leg p{ margin-top:5px; font-size:14px; color:var(--ink-3); }
.pv-leg b{ font-size:28px; font-weight:600; letter-spacing:-.035em; font-variant-numeric:tabular-nums; }
.pv-example{ margin-top:8px; padding:20px 26px; border-radius:var(--r-lg); border:1px dashed var(--line-2); font-size:15px; color:var(--ink-2); }
.pv-example b{ color:var(--ink); font-weight:500; }
@media (max-width:940px){ .pv-split{ grid-template-columns:1fr; gap:48px; } .pv-donut{ max-width:320px; } }

/* ---- your share ------------------------------------------------------------ */
.pv-share{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:70px; }
.pv-share > div{ padding:40px; }
.pv-share label{ display:block; font:500 12px/1 var(--mono); letter-spacing:.17em; text-transform:uppercase; color:var(--ink-3); }
.pv-big{ margin-top:18px; font-size:clamp(46px, 5.4vw, 70px); font-weight:600; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.pv-big small{ font-size:.38em; font-weight:500; letter-spacing:0; color:var(--ink-3); margin-left:10px; }
.pv-range{ -webkit-appearance:none; appearance:none; width:100%; height:8px; margin:34px 0 22px; border-radius:999px; outline:none; cursor:pointer;
  background:linear-gradient(90deg, var(--violet) 0, var(--gold) var(--p, 30%), rgba(255,255,255,.1) var(--p, 30%)); }
.pv-range::-webkit-slider-thumb{ -webkit-appearance:none; width:30px; height:30px; border-radius:50%; cursor:grab; background:#fff;
  box-shadow:0 0 0 8px rgba(168,107,255,.2), 0 10px 24px rgba(0,0,0,.5); transition:box-shadow .3s; }
.pv-range:active::-webkit-slider-thumb{ cursor:grabbing; box-shadow:0 0 0 12px rgba(242,200,120,.22), 0 10px 24px rgba(0,0,0,.5); }
.pv-range::-moz-range-thumb{ width:30px; height:30px; border:0; border-radius:50%; cursor:grab; background:#fff; box-shadow:0 0 0 8px rgba(168,107,255,.2), 0 10px 24px rgba(0,0,0,.5); }
.pv-range:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 8px rgba(242,200,120,.5); }
.pv-presets{ display:flex; flex-wrap:wrap; gap:8px; }
.pv-chip{ padding:10px 16px; border-radius:999px; border:1px solid var(--line-2); background:transparent; cursor:pointer;
  font:500 13px/1 var(--mono); color:var(--ink-2); transition:background .3s, border-color .3s, color .3s, transform .4s var(--ez-out); }
.pv-chip:hover{ color:var(--ink); border-color:rgba(255,255,255,.3); transform:translateY(-1px); }
.pv-chip.is-on{ background:rgba(168,107,255,.22); border-color:rgba(168,107,255,.6); color:#fff; }
.pv-qual{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; font-size:14.5px; color:var(--ink-2); }
.pv-qual i{ width:10px; height:10px; border-radius:50%; background:var(--ink-3); transition:background .4s, box-shadow .4s; }
.pv-qual.is-yes i{ background:var(--mint); box-shadow:0 0 0 5px rgba(98,227,168,.14); }
.pv-basket{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.pv-coin{ display:inline-flex; align-items:center; gap:10px; padding:6px 15px 6px 6px; border-radius:999px; border:1px solid var(--line); background:var(--glass);
  transition:transform .5s var(--ez-out), border-color .3s; }
.pv-coin:hover{ transform:translateY(-3px); border-color:var(--line-2); }
.pv-coin img{ width:34px; height:34px; padding:7px; border-radius:50%; background:radial-gradient(circle at 36% 30%, #fff, #e6dcf8);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.8); }
.pv-coin span{ font:500 13px/1 var(--mono); }
.pv-coin small{ font-size:12.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.pv-fine{ margin-top:22px; font-size:13px; color:var(--ink-3); line-height:1.6; }
@media (max-width:860px){ .pv-share{ grid-template-columns:1fr; } .pv-share > div{ padding:30px; } }

/* ---- UNDER THE HOOD, as layers ---------------------------------------------
   A 3D stack of glass slabs that stays put while the explanations scroll.
   The one you are reading lifts out of the stack.                       */
.pv-tech{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; margin-top:40px; }
.pv-iso-wrap{ position:sticky; top:0; height:100vh; height:100svh; display:grid; place-items:center; }
.pv-iso{ position:relative; width:min(500px, 100%); aspect-ratio:1; perspective:1800px; }
.pv-iso-stack{ position:absolute; inset:0; transform-style:preserve-3d;
  transform:rotateX(57deg) rotateZ(-38deg) translateZ(-90px); }
.pv-slab{ position:absolute; left:18%; top:26%; width:64%; height:46%; border-radius:30px; transform-style:preserve-3d;
  transform:translateZ(calc(var(--z) * 56px));
  background:linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,70,230,.12) 55%, rgba(60,190,214,.06));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 40px 60px -40px rgba(0,0,0,.95);
  transition:transform 1s var(--ez-out), opacity .7s var(--ez), border-color .7s, background .7s, box-shadow .7s; }
.pv-slab::after{ content:''; position:absolute; inset:0; border-radius:inherit; transform:translateZ(-10px);
  background:rgba(28,12,64,.7); border:1px solid rgba(255,255,255,.05); }
.pv-slab-in{ position:absolute; inset:0; display:flex; align-items:center; gap:16px; padding:0 28px; }
.pv-slab-in span{ flex:none; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.28), rgba(120,60,230,.3) 62%, rgba(30,14,64,.9)); border:1px solid rgba(255,255,255,.22); }
.pv-slab-in svg{ width:24px; height:24px; fill:none; stroke:#f2eaff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.pv-slab-in b{ font:500 13px/1.2 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:#efe6ff; }
.pv-slab-in small{ display:block; margin-top:6px; font:500 10.5px/1 var(--mono); letter-spacing:.16em; color:rgba(255,226,168,.75); }
.pv-iso.has-on .pv-slab{ opacity:.42; }
.pv-iso.has-on .pv-slab.is-on{ opacity:1; transform:translateZ(calc(var(--z) * 56px + 46px));
  border-color:rgba(242,200,120,.75);
  background:linear-gradient(135deg, rgba(255,255,255,.26), rgba(168,107,255,.28) 55%, rgba(242,200,120,.1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 1px rgba(242,200,120,.3), 0 60px 90px -40px rgba(150,80,255,.9); }
.pv-iso-caption{ position:absolute; left:50%; bottom:8%; transform:translateX(-50%); white-space:nowrap;
  font:500 10.5px/1 var(--mono); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); }
.pv-explain{ min-height:88vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; }
.pv-explain small{ display:block; font:500 12px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.pv-explain h3{ margin-top:16px; font-size:clamp(28px, 2.8vw, 38px); line-height:1.1; letter-spacing:-.03em; }
.pv-explain p{ margin-top:18px; font-size:17px; line-height:1.7; color:var(--ink-2); max-width:30em; }
.pv-explain{ opacity:.32; transition:opacity .8s var(--ez); }
.pv-explain.is-on{ opacity:1; }
.pv-check{ display:inline-flex; align-self:flex-start; align-items:center; gap:10px; margin-top:24px; padding:8px 15px 8px 8px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,0,0,.24); font:500 12.5px/1.3 var(--mono); color:var(--ink-2); }
.pv-check i{ flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:rgba(98,227,168,.14); color:var(--mint); }
.pv-check svg, .pv-fact i svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (max-width:940px){
  .pv-tech{ grid-template-columns:1fr; gap:0; }
  /* On narrow screens the stack becomes a band pinned under the nav. It is
     clipped to its own box and sits on a near-solid ground, so the text
     scrolls cleanly beneath it. Before this the slabs spilled out of a box
     that faded to transparent, and sat on top of the heading being read. */
  .pv-iso-wrap{ top:64px; height:34vh; z-index:3; overflow:hidden;
    background:rgba(7,5,13,.94); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-radius:0 0 26px 26px; border-bottom:1px solid var(--line); }
  .pv-iso{ width:min(240px, 62%); }
  .pv-slab-in{ padding:0 14px; gap:9px; } .pv-slab-in span{ width:34px; height:34px; } .pv-slab-in svg{ width:17px; height:17px; }
  .pv-slab-in b{ font-size:10px; letter-spacing:.14em; } .pv-slab-in small{ display:none; }
  .pv-iso-caption{ display:none; }
  /* each explanation starts below the band, and is read while it crosses a
     line below it (see the observer margins in preview.js) */
  .pv-explain{ min-height:62vh; justify-content:flex-start; padding:12vh 0 8vh; }
}

.pv-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:40px auto 0; max-width:960px; }
.pv-fact{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:999px; border:1px solid var(--line); background:var(--glass); font-size:14px;
  transition:transform .5s var(--ez-out), border-color .3s; }
.pv-fact:hover{ transform:translateY(-2px); border-color:var(--line-2); }
.pv-fact i{ flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:rgba(98,227,168,.14); color:var(--mint); }
.pv-fact.is-note i{ background:rgba(242,200,120,.14); color:var(--gold); }
.pv-fact span{ color:var(--ink-3); }

/* ---- the reserve --------------------------------------------------------------- */
.pv-reserve{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:64px; align-items:center; margin-top:70px; padding:56px; }
.pv-ring{ position:relative; width:100%; max-width:360px; aspect-ratio:1; margin:0 auto; }
.pv-ring svg{ width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
.pv-ring .track{ fill:none; stroke:rgba(255,255,255,.06); stroke-width:16; }
.pv-ring .tick{ fill:none; stroke:rgba(255,255,255,.14); stroke-width:1; }
.pv-ring .fill{ fill:none; stroke:url(#pvRingGrad); stroke-width:16; stroke-linecap:round; transition:stroke-dashoffset 1.9s var(--ez-out); }
.pv-ring.is-scrubbing .fill{ transition:none; }
.pv-ring-c{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; }
.pv-ring-c b{ display:block; font-size:clamp(50px, 5.4vw, 66px); font-weight:600; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums; }
.pv-ring-c span{ display:block; margin-top:12px; font:500 11px/1.45 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.pv-time{ margin-top:34px; }
.pv-time-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.pv-time-top span{ font:500 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.pv-time-top b{ font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.pv-time .pv-range{ margin:18px 0 12px; }
.pv-ticks{ position:relative; height:18px; font:500 10.5px/1 var(--mono); letter-spacing:.08em; color:var(--ink-3); }
.pv-ticks span{ position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; }
.pv-ticks span:first-child{ transform:none; }
.pv-ticks span:last-child{ transform:translateX(-100%); }
.pv-time-note{ margin-top:18px; font-size:13.5px; color:var(--ink-3); line-height:1.6; }
@media (max-width:940px){ .pv-reserve{ grid-template-columns:1fr; gap:36px; padding:34px 26px; } .pv-ring{ max-width:260px; } }

.pv-rules{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:60px; }
.pv-rule{ padding:28px; border-radius:var(--r-lg); transition:transform .6s var(--ez-out); }
.pv-rule:hover{ transform:translateY(-4px); }
.pv-rule i{ display:grid; place-items:center; width:40px; height:40px; margin-bottom:20px; border-radius:50%; font-style:normal;
  background:rgba(168,107,255,.12); border:1px solid rgba(168,107,255,.28); font:500 12.5px/1 var(--mono); color:#ddcaff; }
.pv-rule h3{ font-size:17.5px; }
.pv-rule p{ margin-top:10px; font-size:14.5px; line-height:1.58; color:var(--ink-3); }
@media (max-width:1000px){ .pv-rules{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .pv-rules{ grid-template-columns:1fr; } }
.pv-gates{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.pv-gate{ display:inline-flex; align-items:baseline; gap:10px; padding:12px 18px; border-radius:999px; border:1px solid var(--line); background:var(--glass); }
.pv-gate span{ font:500 12.5px/1 var(--mono); color:var(--ink-3); }
.pv-gate b{ font-weight:600; }

/* ---- roadmap ----------------------------------------------------------------------- */
.pv-road-wrap{ position:relative; margin-top:64px; }
.pv-road-line{ position:absolute; left:26px; right:26px; top:44px; height:2px; border-radius:2px; background:rgba(255,255,255,.08); overflow:hidden; }
.pv-road-line i{ position:absolute; inset:0; transform-origin:left; transform:scaleX(0); background:linear-gradient(90deg, var(--gold), rgba(242,200,120,0));
  transition:transform 2s var(--ez-out); }
.pv-road-wrap.is-in .pv-road-line i{ transform:scaleX(var(--done, .08)); }
.pv-road{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
.pv-phase{ padding:30px 28px; border-radius:var(--r-lg); }
.pv-phase-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pv-phase-top span{ font:500 11.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); }
.pv-state{ display:inline-flex; align-items:center; gap:8px; font:500 11.5px/1 var(--mono); font-style:normal; color:var(--ink-3); }
.pv-state::before{ content:''; width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.2); }
.pv-phase.is-done .pv-state{ color:var(--mint); } .pv-phase.is-done .pv-state::before{ background:var(--mint); }
.pv-phase.is-live{ border-color:rgba(242,200,120,.32); }
.pv-phase.is-live .pv-state{ color:var(--gold); }
.pv-phase.is-live .pv-state::before{ background:var(--gold); box-shadow:0 0 0 5px rgba(242,200,120,.16); }
.pv-phase h3{ margin-top:22px; font-size:20px; }
.pv-phase ul{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.pv-phase li{ position:relative; padding-left:18px; font-size:14.5px; color:var(--ink-2); line-height:1.5; }
.pv-phase li::before{ content:''; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.28); }
@media (max-width:1000px){ .pv-road{ grid-template-columns:repeat(2, minmax(0,1fr)); } .pv-road-line{ display:none; } }
@media (max-width:560px){ .pv-road{ grid-template-columns:1fr; } }

/* ---- questions ------------------------------------------------------------------------ */
.pv-faq{ display:grid; gap:12px; max-width:860px; margin:60px auto 0; }
.pv-q{ border-radius:var(--r-lg); }
.pv-q summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:24px 26px 24px 30px; cursor:pointer; font-size:17.5px; font-weight:500; letter-spacing:-.012em; border-radius:var(--r-lg); }
.pv-q summary::-webkit-details-marker{ display:none; }
.pv-q summary i{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line-2);
  transition:transform .6s var(--ez-out), background .3s, border-color .3s; }
.pv-q summary i svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.pv-q summary:hover i{ border-color:rgba(255,255,255,.34); }
.pv-q[open] summary i{ transform:rotate(135deg); background:var(--glass-2); }
.pv-q-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ez-out); }
.pv-q[open] .pv-q-body{ grid-template-rows:1fr; }
.pv-q-body > div{ overflow:hidden; }
.pv-q p{ padding:0 30px 26px; font-size:16px; line-height:1.72; color:var(--ink-2); }
.pv-q p + p{ margin-top:-12px; }
.pv-risk{ max-width:860px; margin:40px auto 0; padding:32px 34px; border-radius:var(--r-lg);
  border:1px solid rgba(242,200,120,.22); background:rgba(242,200,120,.04); }
.pv-risk h3{ font-size:16px; color:var(--gold-2); }
.pv-risk p{ margin-top:12px; font-size:14.5px; line-height:1.68; color:var(--ink-2); }

/* ---- closing ----------------------------------------------------------------------------- */
.pv-close{ position:relative; min-height:92vh; display:grid; place-items:center; padding:120px 0 140px; text-align:center; }
.pv-close h2{ font-size:clamp(44px, 6.4vw, 92px); letter-spacing:-.045em; }
.pv-close .pv-lede{ margin-left:auto; margin-right:auto; }
.pv-close .pv-actions{ justify-content:center; }

.pv-foot{ padding:48px 0 80px; border-top:1px solid var(--line); font-size:13px; line-height:1.72; color:var(--ink-3); }
.pv-foot p + p{ margin-top:10px; }

.pv-flag{ position:fixed; right:16px; bottom:16px; z-index:60; display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(242,200,120,.3); background:rgba(20,14,32,.86); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font:500 11px/1 var(--mono); letter-spacing:.08em; color:var(--gold-2); white-space:nowrap; transition:opacity .3s, transform .4s var(--ez-out); }
.pv-flag i{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.pv-flag.is-gone{ opacity:0; transform:translateY(8px); pointer-events:none; }

/* ---- arriving ------------------------------------------------------------------------------- */
.pv-rv{ opacity:0; transform:translateY(34px); transition:opacity 1.1s var(--ez), transform 1.3s var(--ez-out); transition-delay:var(--d, 0s); }
.pv-rv.is-in{ opacity:1; transform:none; }
html:not(.js) .pv-rv, html:not(.js) .pv-w > span{ opacity:1; transform:none; }
html:not(.js) .pv-nav, html:not(.js) .pv-hero-mark, html:not(.js) .pv-kicker,
html:not(.js) .pv-hero .pv-lede, html:not(.js) .pv-hero .pv-actions, html:not(.js) .pv-hero-note{ opacity:1; transform:none; }
html:not(.js) .pv-nav{ opacity:1; }

:focus-visible{ outline:2px solid rgba(200,150,255,.9); outline-offset:3px; }

/* ---- calm ------------------------------------------------------------------------------------
   Reduced motion gets the same page with every scene laid flat: no pinning,
   no canvases, no drifting, everything already in place.               */
html.is-calm{ scroll-behavior:auto; }
html.is-calm *, html.is-calm *::before, html.is-calm *::after{ animation:none !important; transition:none !important; }
html.is-calm .pv-rv, html.is-calm .pv-w > span{ opacity:1; transform:none; }
html.is-calm .pv-field, html.is-calm .pv-scene canvas, html.is-calm .pv-scene-hint, html.is-calm .pv-rail{ display:none; }
html.is-calm .pv-scene{ height:auto; }
html.is-calm .pv-scene-pin{ position:relative; height:auto; overflow:visible; }
html.is-calm .pv-scene-copy{ position:relative; top:auto; left:auto; transform:none; width:auto; max-width:1180px; margin:0 auto; padding:120px 28px; background:none; }
html.is-calm .pv-chapters{ min-height:0; display:grid; gap:32px; }
html.is-calm .pv-chapter{ position:relative; opacity:1; transform:none; }
html.is-calm .pv-iso-wrap{ position:relative; height:auto; padding:30px 0; background:none; }
html.is-calm .pv-explain{ opacity:1; min-height:0; padding:34px 0; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
}

/* ---- v3 additions ---------------------------------------------------------------------- */
.pv-rail-dot{ display:block; }
.pv-coin-t em{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; font:700 13px/1 var(--sans); font-style:normal; color:#ffe7b8;
  background:radial-gradient(circle at 36% 30%, #9a6cf0, #51209f 60%, #260b5c); box-shadow:inset 0 0 0 1.5px rgba(242,200,120,.8); }
.pv-coin-more{ padding:6px 16px; border-style:dashed; }
.pv-coin-more span{ color:var(--ink-3); }
.pv-road-wrap{ margin-top:96px; }
.pv-road-line{ top:-34px; }

/* ---- v4 additions ------------------------------------------------------------------------ */
/* the nav carries the real mark, drawn from the same outlines as the hero */

/* ---- v4.1: clarity pass ------------------------------------------------------------------ */
/* the header carries a plain wordmark */
/* one week, start to finish */
.pv-week .pv-rule p{ color:var(--ink-2); }
.pv-week-note{ margin-top:28px; max-width:46em; font-size:14.5px; line-height:1.6; color:var(--ink-3); }
@media (max-width:940px){ .pv-week{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:560px){ .pv-week{ grid-template-columns:1fr; } }
/* the calculator's example week */
.pv-big-sm{ font-size:clamp(34px, 3.6vw, 48px); }
.pv-week-ex{ margin-top:26px; line-height:1.6; }

/* ---- v4.2: less template, same personality ------------------------------------------------
   Kept: the coin field, the mark, the flow scene, the layers, the colour.
   Removed: grain, drifting aurora blobs, pointer glow on cards, shine sweeps,
   gradient button fills, dash labels in tracked mono caps, the pill tag. */
.pv-grain, .pv-flag, .pv-cue, .pv-scene-hint{ display:none !important; }
.pv-bg{ opacity:.6; }
.pv-bg i{ animation:none; }
.pv-card::before, .pv-card::after{ display:none; }
.pv-tilt{ transform:none !important; }

.pv-eyebrow{ display:block; margin:0 0 14px; font:600 15px/1.3 var(--sans); letter-spacing:0; text-transform:none; color:var(--gold); }
.pv-eyebrow::before{ display:none; }
.pv-head h2, .pv-scene-title{ letter-spacing:-.035em; }

.pv-btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); transition:background-color .2s, border-color .2s; }
.pv-btn::after{ display:none; }
.pv-btn:hover{ transform:none; background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28); }
.pv-btn:hover svg{ transform:translateX(3px); }
.pv-btn-soon, .pv-btn-soon:hover{ background:rgba(242,200,120,.1); border-color:rgba(242,200,120,.32); }

.pv-kicker{ padding:0; border:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border-radius:0;
  font:500 15px/1.3 var(--sans); color:var(--ink-2); }
.pv-kicker{ display:block; gap:0; }
/* data labels in plain sentence case, not tracked mono capitals */
.pv-stat span, .pv-share label{ font:500 14px/1.35 var(--sans); letter-spacing:0; text-transform:none; color:var(--ink-3); }
.pv-donut-c span, .pv-ring-c span{ font:500 13.5px/1.45 var(--sans); letter-spacing:0; text-transform:none; }
/* the label rule above is for the stat's own label only: spans inside its note stay inline */
.pv-stat small span{ display:inline; font:inherit; letter-spacing:inherit; text-transform:none; color:inherit; }

/* ---- v5: condensed, understood at a glance ---------------------------------------------------
   One row shows the whole mechanism with real numbers. Nothing floats in
   the background, nothing holds the scroll. */
.pv-field{ display:none !important; }
.pv-sec{ padding:110px 0; }
.pv-band{ padding-top:10px; }
@media (max-width:760px){ .pv-sec{ padding:80px 0; } }

.og-flow{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:30px; margin-top:52px; }
.og-step{ position:relative; padding:26px 24px 28px; border-radius:var(--r-lg); }
.og-step + .og-step::after{ content:''; position:absolute; left:-21px; top:50%; width:11px; height:11px; margin-top:-6px;
  border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); transform:rotate(45deg); opacity:.85; }
.og-step small{ display:block; font:500 14px/1.3 var(--sans); color:var(--ink-3); }
.og-step b{ display:block; margin-top:12px; font-size:clamp(30px, 3vw, 40px); font-weight:600; letter-spacing:-.04em; line-height:1.05; }
.og-step h3{ margin-top:16px; font-size:17.5px; letter-spacing:-.02em; line-height:1.3; }
.og-step p{ margin-top:8px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.og-step.is-end{ border-color:rgba(242,200,120,.4); }
.og-step.is-end b{ color:var(--gold-2); }
.og-asides{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.og-aside{ display:flex; align-items:baseline; gap:18px; padding:18px 24px; border-radius:var(--r-lg); border:1px dashed var(--line-2); font-size:15px; line-height:1.55; color:var(--ink-2); }
.og-aside > b{ flex:none; min-width:52px; font-size:22px; font-weight:600; letter-spacing:-.03em; color:var(--ink); }
@media (max-width:980px){
  .og-flow{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
  .og-step + .og-step::after{ display:none; }
  .og-asides{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .og-flow{ grid-template-columns:1fr; gap:26px; }
  .og-step + .og-step::after{ display:block; left:50%; top:-19px; margin:0 0 0 -6px; transform:rotate(135deg); }
}

.og-layers{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; margin-top:52px; }
.og-layer{ padding:24px 22px 26px; border-radius:var(--r-lg); }
.og-layer i{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid var(--line-2); }
.og-layer i svg{ width:20px; height:20px; fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.og-layer small{ display:block; margin-top:18px; font:600 13.5px/1 var(--sans); color:var(--gold); }
.og-layer h3{ margin-top:8px; font-size:17px; letter-spacing:-.02em; line-height:1.3; }
.og-layer p{ margin-top:8px; font-size:14px; line-height:1.55; color:var(--ink-2); }
#tech .pv-facts{ margin-top:22px; }
@media (max-width:1060px){ .og-layers{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:700px){ .og-layers{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:440px){ .og-layers{ grid-template-columns:1fr; } }

.og-reserve{ display:grid; grid-template-columns:280px 1fr; gap:60px; align-items:center; margin-top:52px; padding:44px; border-radius:var(--r-xl); }
.og-reserve .pv-ring{ max-width:280px; }
.og-rows{ list-style:none; }
.og-rows li{ display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--line); font-size:15.5px; }
.og-rows li:first-child{ border-top:1px solid var(--line); }
.og-rows span{ color:var(--ink-3); }
.og-rows b{ font-weight:500; text-align:right; color:var(--ink); }
.og-rows b span{ color:inherit; }
.og-reserve .pv-fine a{ color:var(--gold-2); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:860px){ .og-reserve{ grid-template-columns:1fr; gap:30px; padding:28px 22px; } .og-reserve .pv-ring{ max-width:210px; margin:0 auto; } }
/* on a phone the steps stack, joined by a short gold line rather than a tiny rotated chevron */
@media (max-width:560px){
  .og-step + .og-step::after{ left:50%; top:-20px; width:0; height:14px; margin:0; border-top:0; border-right:0; border-left:1.5px solid var(--gold); transform:none; }
}