/* ============================================================
   THE VIRAL VAULT — vault.css
   Direction: "Private vault, open ledger" (quiet luxury)
   Single shared stylesheet for all pages.
   ============================================================ */

/* ---------- 1. FONTS (self-hosted, variable, latin) ---------- */
@font-face{
  font-family:"Inter";
  src:url("/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("/fonts/space-grotesk-var.woff2") format("woff2");
  font-weight:300 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Newsreader";
  src:url("/fonts/newsreader-italic-var.woff2") format("woff2");
  font-weight:200 800;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* metric-adjusted local fallbacks (CLS guard) */
@font-face{
  font-family:"Inter-fb";src:local("Arial");
  size-adjust:107%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%;
}
@font-face{
  font-family:"SG-fb";src:local("Arial");
  size-adjust:105.5%;ascent-override:93.3%;descent-override:27.7%;line-gap-override:0%;
}

/* ---------- 2. DESIGN TOKENS (brief §2, verbatim) ---------- */
:root{
  /* ---------- background layers (cool near-black) ---------- */
  --bg-0:#050508;   /* page canvas, footer                          */
  --bg-1:#0A0B10;   /* chamber bands, cards, header scrim base      */
  --bg-2:#0F1118;   /* raised: card hover, open accordion, table th */
  --bg-3:#14161F;   /* inputs, code/spec chips                      */

  /* ---------- text tiers (neutral — never blue-tinted body) ---------- */
  --ink-1:#F4F5F7;  /* display, headings, prices                    */
  --ink-2:#C7CAD1;  /* leads, feature lists, body-primary           */
  --ink-3:#8A8E99;  /* secondary body, captions        (≈6.0:1)     */
  --ink-4:#7A7F8C;  /* fine print, legal, meta         (≈5.0:1 AA)  */
  --ink-inverse:#04121A; /* text on filled accent buttons/badges    */

  /* ---------- accents (ink, not light) ---------- */
  --accent:#7DD0FF;      /* THE blue: primary CTA fill, price-of-record,
                            links, focus. One filled use per viewport */
  --accent-deep:#3D9BE9; /* hover/pressed, underlines, active nav    */
  --accent-ice:#D9F1FF;  /* italic serif keywords, ::selection bg    */
  --ok:#3FE0CF;          /* SEMANTIC ONLY: checks, "included", success */
  --warn:#E8B96A;        /* struck anchor prices, "maybe not yet" ✕. ≤1/page */
  --danger:#F07A6E;      /* form errors only                         */

  /* ---------- lines & fills ---------- */
  --line-1:rgba(244,245,247,.10);   /* primary hairline (neutral)   */
  --line-2:rgba(244,245,247,.055);  /* faint dividers, table rules  */
  --line-accent:rgba(125,208,255,.35); /* featured card border ONLY */
  --fill-1:rgba(244,245,247,.03);   /* whisper fill: chips, zebra   */
  --fill-accent:rgba(125,208,255,.07); /* featured wash, selected col */

  /* ---------- elevation (neutral only) ---------- */
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.35);
  --shadow-2:0 2px 4px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.5);
  --glow-cta-hover:0 6px 20px rgba(125,208,255,.18); /* the ONLY glow */
  --focus-ring:0 0 0 2px var(--bg-0), 0 0 0 4px var(--accent);

  /* ---------- the one permitted gradient ---------- */
  --aperture:radial-gradient(ellipse 60% 45% at 50% -10%,
             rgba(125,208,255,.10), transparent 70%);

  /* ---------- radii ---------- */
  --r-1:6px;      /* buttons, inputs, chips     */
  --r-2:12px;     /* cards, modules             */
  --r-3:16px;     /* featured/bundle card, imagery mats */
  --r-pill:100px; /* badges + header pill only  */

  /* ---------- spacing (8px base) ---------- */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  --section-pad:clamp(5rem, 4rem + 6vw, 8.5rem);
  --wrap-max:1120px; --wrap-pad:clamp(1.25rem, 5vw, 4rem);
  --head-gap:clamp(2.5rem, 2rem + 3vw, 4rem);

  /* ---------- motion ---------- */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-1:150ms; /* hovers, color        */
  --dur-2:300ms; /* buttons, accordion   */
  --dur-3:650ms; /* scroll reveals       */

  /* ---------- fonts ---------- */
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --font-editorial:"Newsreader",Georgia,"Times New Roman",serif;
}
::selection{background:var(--accent-ice);color:#04121A}

/* metric fallbacks slotted in without touching the token block above */
@supports (size-adjust:100%){
  :root{
    --font-display:"Space Grotesk","SG-fb",ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
    --font-body:"Inter","Inter-fb",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  }
}

/* ---------- 3. TYPE SCALE (brief §3.2) ---------- */
:root{
  --t-display:clamp(2.6rem, 1.4rem + 5vw, 4.6rem);
  --t-h2:clamp(1.9rem, 1.2rem + 2.8vw, 3.0rem);
  --t-h3:clamp(1.35rem, 1.05rem + 1.2vw, 1.9rem);
  --t-h4:1.125rem;
  --t-lead:clamp(1.05rem, .95rem + .5vw, 1.25rem);
  --t-body:1rem;
  --t-small:.875rem;
  --t-fine:.8125rem;
  --t-label:.72rem;
  --t-price:clamp(2.1rem, 1.6rem + 2vw, 3rem);
  --t-btn:.9375rem;
}

/* ---------- 4. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:80px;scroll-padding-bottom:88px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  background:var(--bg-0);color:var(--ink-2);
  font-family:var(--font-body);font-size:var(--t-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
hr{border:0;border-top:1px solid var(--line-1)}
strong,b{font-weight:600;color:var(--ink-1)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-1)}
.payhip-buy-button{text-decoration:none!important}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink-1);font-weight:500;text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.03em;max-width:18ch}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.025em;max-width:18ch}
h3{font-size:var(--t-h3);line-height:1.15;letter-spacing:-.015em}
h4{font-family:var(--font-body);font-weight:600;font-size:var(--t-h4);line-height:1.3}

.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:52ch}
.small{font-size:var(--t-small);line-height:1.55}
.fine{font-size:var(--t-fine);line-height:1.6;color:var(--ink-4)}
.fine a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
.fine a:hover{color:var(--accent)}
.mono{font-family:var(--font-mono)}
.center{text-align:center}
.center h1,.center h2,.center .lead{margin-inline:auto}

/* the italic serif keyword — exactly twice per page */
.kw{font-family:var(--font-editorial);font-style:italic;font-weight:450;color:var(--accent-ice);letter-spacing:0}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--ink-inverse);padding:.7rem 1.2rem;border-radius:0 0 var(--r-1) 0;font:600 var(--t-fine)/1 var(--font-body)}
.skip-link:focus{left:0}

/* ---------- 5. LAYOUT ---------- */
.wrap{max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--wrap-pad)}
.section{padding-block:var(--section-pad)}
.section-head{margin-bottom:var(--head-gap)}
.section-head .lead{margin-top:var(--s-5)}
.section-head h2{margin-top:var(--s-5)}
.chamber{background:var(--bg-1);border-block:1px solid var(--line-2)}

/* section label: dial glyph + mono index */
.sec-label{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.sec-label .dial-glyph{width:16px;height:16px;flex:none;color:var(--accent);opacity:.85}
.sec-label::after{content:"";width:56px;height:1px;background:var(--line-1);transform-origin:left}
html.js .reveal .sec-label::after{transform:scaleX(0)}
html.js .reveal.in .sec-label::after{transform:scaleX(1);transition:transform 800ms var(--ease-out) 150ms}

/* ---------- 6. HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
.site-header.scrolled{background:rgba(5,5,8,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-bottom-color:var(--line-2)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .site-header.scrolled{background:#0A0B10F2}
}
html.menu-open .site-header{background:#0A0B10}
.header-in{
  max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--wrap-pad);
  height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s-4);
}
.logo{display:inline-flex;align-items:center;gap:.5rem;justify-self:start}
.logo svg{height:15px;width:auto;flex:none}
.logo .wordmark{font-family:var(--font-display);font-weight:500;font-size:1rem;letter-spacing:-.02em;color:var(--ink-3);white-space:nowrap}
.logo .wordmark b{font-weight:500;color:var(--ink-1)}
.logo .wordmark sup{font-size:.55em;color:var(--ink-4)}
.site-nav{display:flex;gap:var(--s-5);justify-self:center}
.site-nav a{font-size:var(--t-small);font-weight:500;color:var(--ink-3);transition:color var(--dur-1)}
.site-nav a:hover{color:var(--ink-1)}
.site-nav a[aria-current="page"]{color:var(--ink-1);text-decoration:underline;text-decoration-color:var(--accent-deep);text-underline-offset:6px}
.header-right{display:flex;align-items:center;gap:var(--s-3);justify-self:end}
.pill{
  display:inline-flex;align-items:center;border:1px solid var(--line-1);background:var(--fill-1);
  border-radius:var(--r-pill);padding:.5rem 1rem;white-space:nowrap;
  font-size:var(--t-fine);font-weight:600;color:var(--ink-1);
  transition:color var(--dur-1),border-color var(--dur-1);
}
.pill:hover{color:var(--accent);border-color:var(--accent)}
.menu-btn{display:none}
@media (max-width:879px){
  .site-nav{display:none}
  .pill{padding:.4rem .75rem}
  .menu-btn{
    display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;
    width:44px;height:44px;border-radius:var(--r-1);
  }
  .menu-btn span{display:block;width:18px;height:1.5px;background:var(--ink-1);transition:transform var(--dur-2) var(--ease-inout),opacity var(--dur-2)}
  html.menu-open .menu-btn span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  html.menu-open .menu-btn span:nth-child(2){opacity:0}
  html.menu-open .menu-btn span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
}
.menu-sheet{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg-1);border-bottom:1px solid var(--line-1);box-shadow:var(--shadow-2)}
html.menu-open .menu-sheet{display:block}
html.menu-open{overflow:hidden}
.menu-sheet a{
  display:flex;align-items:center;justify-content:space-between;min-height:56px;
  padding-inline:var(--wrap-pad);border-top:1px solid var(--line-2);
  font-size:1rem;font-weight:500;color:var(--ink-2);
}
.menu-sheet a:hover{color:var(--ink-1);background:var(--fill-1)}
.menu-sheet .m-bundle{color:var(--accent);font-weight:600}
@media (min-width:880px){.menu-sheet{display:none!important}}

/* ---------- 7. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.5rem;border-radius:var(--r-1);
  font-family:var(--font-body);font-size:var(--t-btn);font-weight:600;letter-spacing:0;
  line-height:1.2;text-align:center;cursor:pointer;white-space:nowrap;
  transition:background var(--dur-2) var(--ease-out),color var(--dur-1),border-color var(--dur-1),transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.btn:focus-visible{transition:none}
.btn-primary{background:var(--accent);color:var(--ink-inverse);border:1px solid transparent}
.btn-primary:hover{background:#8FD8FF;color:var(--ink-inverse);transform:translateY(-1px);box-shadow:var(--glow-cta-hover)}
.btn-primary:active{transform:translateY(0);box-shadow:none}
.btn-secondary{background:transparent;color:var(--ink-1);border:1px solid var(--line-1)}
.btn-secondary:hover{color:var(--ink-1);border-color:var(--ink-3);background:var(--fill-1)}
.btn-secondary:active{background:var(--fill-1)}
.btn-text{
  display:inline-flex;align-items:baseline;gap:.35rem;color:var(--accent);
  font-size:var(--t-btn);font-weight:500;transition:color var(--dur-1);
}
.btn-text:hover{color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.btn-text .ar{display:inline-block;transition:transform var(--dur-1) var(--ease-out)}
.btn-text:hover .ar{transform:translateX(3px)}
.btn-text:hover .ar-d{transform:translateY(3px)}
.cta-row{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
@media (max-width:639px){
  .tier .btn,.buy-summary .btn,.buy-card .btn,.bundle-cta .btn{width:100%}
}
@media (max-width:379px){
  .btn{padding-inline:1rem;white-space:normal}
}

/* ---------- 8. THE DIAL ---------- */
.dial{display:block;color:var(--accent)}
.dial .d-line{fill:none;stroke:currentColor;stroke-opacity:.14;stroke-width:1}
.dial .d-ticks{fill:none;stroke:currentColor;stroke-opacity:.5}
.dial .d-notch{fill:none;stroke:currentColor;stroke-opacity:.9;stroke-width:3}
.dial .d-hub{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1}
.dial .d-mote{fill:currentColor}
.dial-rotor{transform:rotate(var(--scroll-rot,0deg));transform-origin:50% 50%}
.dial-motes{animation:dial-drift 60s linear infinite;transform-origin:50% 50%}
@keyframes dial-drift{to{transform:rotate(360deg)}}
.dial-glyph{display:inline-block;vertical-align:-.125em;color:inherit}
/* placements */
.hero-dial{position:absolute;width:min(900px,80vw);height:min(900px,80vw);top:50%;right:-12%;transform:translateY(-52%);opacity:.05;pointer-events:none}
.page-dial{position:absolute;width:480px;height:480px;top:-140px;right:-120px;opacity:.04;pointer-events:none}
.moment-dial{position:absolute;width:min(1100px,120vw);height:min(1100px,120vw);top:50%;left:50%;transform:translate(-50%,-50%);opacity:.08;pointer-events:none}

/* ---------- 9. BADGES ---------- */
.badge{
  display:inline-flex;align-items:center;border-radius:var(--r-pill);
  background:var(--fill-1);border:1px solid var(--line-1);
  padding:.3rem .7rem;font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;
}
.badge-accent{background:var(--fill-accent);border-color:transparent;color:var(--accent)}

/* ---------- 10. TIER CARDS ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
@media (max-width:879px){
  .tiers{grid-template-columns:1fr}
  .tier--featured{order:-1}
}
.tier{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-2);
  padding:var(--s-6);overflow:hidden;
  transition:border-color var(--dur-1),background var(--dur-1);
}
.tier:hover{border-color:var(--ink-4);background:var(--bg-2)}
.tier--featured{border-color:var(--line-accent)}
.tier--featured:hover{border-color:var(--line-accent);background:var(--bg-1)}
.tier--featured::before{content:"";position:absolute;top:0;left:1px;right:1px;height:2px;background:var(--accent);border-radius:0 0 2px 2px}
.tier--featured::after{content:"";position:absolute;inset:0 0 70% 0;background:linear-gradient(180deg,var(--fill-accent),transparent);pointer-events:none}
.tier>*{position:relative;z-index:1}
.tier .badge{position:absolute;top:var(--s-4);right:var(--s-4);z-index:2}
.tier-index{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.tier-name{margin-top:var(--s-3)}
.tier-promise{margin-top:var(--s-2);font-size:var(--t-small);color:var(--ink-3);min-height:2.7em}
.price-row{margin-top:var(--s-5)}
.price{
  display:block;font-family:var(--font-display);font-weight:600;font-size:var(--t-price);
  line-height:1;letter-spacing:-.02em;color:var(--ink-1);font-variant-numeric:tabular-nums;
}
.tier--featured .price{color:var(--accent)}
.price-meta{display:block;margin-top:var(--s-2);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-4)}
.tier .rule{margin-block:var(--s-5)}
.ok-list{list-style:none}
.ok-list li{
  position:relative;padding:.4rem 0 .4rem 1.6rem;
  font-size:var(--t-small);line-height:1.55;color:var(--ink-2);
}
.ok-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:14px;height:14px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.chips{
  margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
}
.tier-ctas{margin-top:var(--s-5);display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start}
.tier .fine{margin-top:var(--s-4)}
.tier-ctas+.fine{margin-top:var(--s-3)}
.under-note{margin-top:var(--s-7)}

/* ---------- 11. MANIFEST LIST ---------- */
.manifest{list-style:none;counter-reset:mf}
.manifest li{
  display:grid;grid-template-columns:2.4rem 1fr auto;gap:0 var(--s-4);align-items:baseline;
  padding-block:var(--s-4);border-bottom:1px solid var(--line-2);
}
.manifest li:first-child{border-top:1px solid var(--line-2)}
.mf-i{font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-4);letter-spacing:.06em;transition:color var(--dur-1)}
.mf-t{font-family:var(--font-body);font-weight:600;font-size:var(--t-h4);color:var(--ink-1);line-height:1.3;transition:color var(--dur-1)}
.mf-d{grid-column:2;font-size:var(--t-small);color:var(--ink-3);margin-top:.2rem}
.mf-q{grid-column:3;grid-row:1;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.manifest li:hover .mf-t{color:var(--accent-ice)}
.manifest li:hover .mf-i{color:var(--accent)}
.manifest-cols{column-gap:48px}
@media (min-width:900px){.manifest-cols{columns:2}.manifest-cols li{break-inside:avoid}}
.spec-row{
  margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-variant-numeric:tabular-nums;
}

/* ---------- 12. COMPARISON TABLE ---------- */
.cmp-outer{position:relative}
.cmp-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cmp{width:100%;min-width:780px;border-collapse:collapse;font-size:var(--t-small)}
.cmp th,.cmp td{padding:.9rem 1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-2)}
.cmp thead th{
  background:var(--bg-2);color:var(--ink-1);font-family:var(--font-body);font-weight:600;
  font-size:var(--t-small);vertical-align:bottom;
}
.cmp thead th:first-child{border-radius:var(--r-1) 0 0 0}
.cmp thead th:last-child{border-radius:0 var(--r-1) 0 0}
.cmp .cmp-name{display:block;margin-top:.45rem}
.cmp .cmp-price{display:block;font-family:var(--font-mono);font-weight:500;font-size:var(--t-fine);color:var(--ink-3);margin-top:.3rem;font-variant-numeric:tabular-nums}
.cmp .cmp-struck{display:block;font-family:var(--font-mono);font-size:var(--t-fine);color:var(--warn);text-decoration:line-through;margin-top:.3rem;font-variant-numeric:tabular-nums}
.cmp .cmp-anchor{color:var(--accent);text-decoration:none;font-weight:600}
.cmp tbody th{font-weight:500;color:var(--ink-2)}
.cmp tbody th,.cmp thead th:first-child{position:sticky;left:0;background:var(--bg-0);z-index:1}
.cmp thead th:first-child{background:var(--bg-2)}
.chamber .cmp tbody th{background:var(--bg-1)}
.cmp .val{font-family:var(--font-mono);font-size:var(--t-fine);color:var(--ink-2);font-variant-numeric:tabular-nums}
.cmp .no{color:var(--ink-4)}
.cmp .col-b{background:var(--fill-accent)}
.cmp .ck{display:inline-block;width:14px;height:14px;background:var(--ok);vertical-align:-.1em;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cmp .cta-row-cells td{padding-top:var(--s-5);border-bottom:0}
.cmp .cta-row-cells .btn{min-height:44px;padding:.6rem 1.1rem;font-size:var(--t-small);white-space:normal}
.cmp .cta-row-cells .btn-text{white-space:nowrap}
.cmp-hint{display:none;margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
@media (max-width:879px){
  .cmp-hint{display:block}
  .cmp-outer::after{content:"";position:absolute;top:0;right:0;bottom:0;width:48px;background:linear-gradient(to left,var(--bg-0),transparent);pointer-events:none}
  .chamber .cmp-outer::after{background:linear-gradient(to left,var(--bg-1),transparent)}
}
.cmp-more{margin-top:var(--s-6)}

/* ---------- 13. THE LEDGER ---------- */
.ledger{font-family:var(--font-mono);font-size:var(--t-small);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.ledger-row{display:flex;align-items:baseline;gap:.75rem;padding-block:.55rem}
.ledger-row .l-name{white-space:nowrap;color:var(--ink-2)}
.ledger-row .l-dots{flex:1;border-bottom:1px dotted var(--line-1);transform:translateY(-.28em)}
.ledger-row .l-amt{white-space:nowrap;text-align:right;color:var(--ink-1)}
.ledger-rule{border:0;border-top:3px double var(--line-1);margin-block:.55rem}
.l-strike .l-name{color:var(--ink-3)}
.l-strike .l-amt{color:var(--warn);text-decoration:line-through}
.l-total .l-name{color:var(--ink-1);font-weight:600}
.l-total .l-amt{color:var(--accent);font-weight:600}
.l-ok .l-amt{color:var(--ok)}
.ledger-fine{margin-top:var(--s-4)}

/* ---------- 14. FACTS STRIP ---------- */
.facts{
  list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:.35rem;
  padding-block:var(--s-3);border-block:1px solid var(--line-2);
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
}
.facts li{white-space:nowrap}
.facts li:not(:last-child)::after{content:"·";margin-left:.6rem;color:var(--ink-4)}
.facts--loose{border-block:0;padding-block:0;color:var(--ink-3)}

/* ---------- 15. BUY CARD / RECEIPT / CROSS-SELL ---------- */
.prod-grid{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start}
@media (max-width:979px){.prod-grid{grid-template-columns:1fr}}
.prod-aside{position:sticky;top:96px}
@media (max-width:979px){.prod-aside{position:static}}
.buy-card{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-2);padding:var(--s-6)}
.buy-card .price{margin-top:var(--s-3)}
.buy-card .ok-list{margin-top:var(--s-4)}
.buy-card .btn{margin-top:var(--s-5);width:100%}
.buy-card .facts{margin-top:var(--s-4)}
.buy-card .fine{margin-top:var(--s-4)}
.receipt{margin-top:var(--s-5);border-top:1px solid var(--line-2);padding-top:var(--s-4)}
.receipt li{
  list-style:none;display:flex;align-items:center;gap:.6rem;padding-block:.35rem;
  font-family:var(--font-mono);font-size:var(--t-fine);color:var(--ink-3);
}
.file-chip{
  flex:none;display:inline-flex;align-items:center;background:var(--bg-3);border-radius:var(--r-1);
  padding:.15rem .45rem;font-size:.66rem;letter-spacing:.08em;color:var(--ink-2);
}
.xsell{
  margin-top:var(--s-5);border-top:1px solid var(--line-2);padding-top:var(--s-4);
  font-size:var(--t-fine);color:var(--ink-3);
}
/* buy summary (homepage chamber) */
.buy-summary{
  background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--r-2);
  padding:var(--s-6);position:sticky;top:96px;
}
@media (max-width:979px){.buy-summary{position:static}}
.bs-name{font-family:var(--font-body);font-weight:600;font-size:var(--t-h4);color:var(--ink-1)}
.buy-summary .price{margin-top:var(--s-4)}
.buy-summary .ok-list{margin-top:var(--s-4)}
.buy-summary .btn{margin-top:var(--s-5);width:100%}
.buy-summary .btn-text{margin-top:var(--s-4)}
.buy-summary .fine{margin-top:var(--s-4)}

/* ---------- 16. STICKY MOBILE BUY BAR ---------- */
.buybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:none;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:.75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
  background:rgba(10,11,16,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-top:1px solid var(--line-1);
  transform:translateY(100%);visibility:hidden;
  transition:transform var(--dur-2) var(--ease-out),visibility 0s var(--dur-2);
}
.buybar.show{transform:translateY(0);visibility:visible;transition:transform var(--dur-2) var(--ease-out)}
.buybar .bb-name{font-size:var(--t-fine);font-weight:500;color:var(--ink-1);line-height:1.3}
.buybar .bb-price{display:block;font-family:var(--font-mono);font-size:var(--t-label);color:var(--ink-3);font-variant-numeric:tabular-nums}
.buybar .btn{min-width:48px;min-height:48px;flex:none}
@media (max-width:979px){.buybar{display:flex}}

/* ---------- 17. FAQ ACCORDION ---------- */
.faq{border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-block:1.375rem;cursor:pointer;list-style:none;
  font-family:var(--font-body);font-weight:500;font-size:1.0625rem;color:var(--ink-1);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";flex:none;font-family:var(--font-mono);font-weight:400;font-size:1.25rem;
  color:var(--ink-3);line-height:1;transition:transform var(--dur-2) var(--ease-inout);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open]{background:transparent}
.qa-body{display:grid;grid-template-rows:1fr}
.faq details[open] .qa-body{animation:qa-open var(--dur-2) var(--ease-inout)}
@keyframes qa-open{from{grid-template-rows:0fr}to{grid-template-rows:1fr}}
.qa-body>div{overflow:hidden}
.qa-body p{max-width:60ch;color:var(--ink-3);padding-bottom:1.375rem}
.qa-body p+p{margin-top:.5rem}

/* ---------- 18. FIT PANEL ---------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4rem)}
@media (max-width:719px){.fit{grid-template-columns:1fr}}
.fit h3{font-size:var(--t-h4);font-family:var(--font-body);font-weight:600}
.fit ul{list-style:none;margin-top:var(--s-4)}
.fit li{
  position:relative;padding:.875rem 0 .875rem 2rem;border-bottom:1px solid var(--line-2);
  font-size:var(--t-small);color:var(--ink-2);
}
.fit li::before{
  content:"";position:absolute;left:0;top:1.05em;width:14px;height:14px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background:var(--ok);
}
.fit .dont li::before{
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  background:var(--warn);
}

/* ---------- 19. IMAGERY MAT / GALLERY ---------- */
.mat{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--s-4)}
.mat img{border-radius:calc(var(--r-3) - var(--s-2))}
.chamber .mat{background:var(--bg-2)}
.chamber .swipe{background:var(--bg-2)}
.chamber .swipe-head{background:var(--bg-3)}
.mat-caption{
  margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
}
.gallery-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4)}
@media (max-width:639px){
  .gallery-2{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-3);padding-bottom:var(--s-2)}
  .gallery-2>*{flex:0 0 78%;scroll-snap-align:start}
}

/* ---------- 20. HERO (homepage) ---------- */
.hero{
  position:relative;overflow:hidden;min-height:88vh;min-height:88svh;
  display:flex;align-items:center;
  background-image:var(--aperture);background-repeat:no-repeat;
  padding-block:calc(var(--s-9) + 64px) var(--s-8);
}
.hero-grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.hero-copy h1{margin-top:var(--s-5)}
.hero-copy .lead{margin-top:var(--s-5)}
.hero-copy .cta-row{margin-top:var(--s-6)}
.hero-copy .facts{margin-top:var(--s-6)}
.honesty{margin-top:var(--s-4);font-size:var(--t-fine);color:var(--ink-4)}
.hero-art{position:relative}
.hero-composite{position:relative;aspect-ratio:1;max-width:520px;margin-left:auto}
.hero-composite .mat{position:absolute;box-shadow:var(--shadow-1)}
.hero-composite .mat-fan-l{width:56%;left:-4%;top:10%;transform:rotate(-7deg)}
.hero-composite .mat-fan-r{width:56%;right:-4%;top:6%;transform:rotate(6deg)}
.hero-composite .mat-front{width:66%;left:17%;top:26%;box-shadow:var(--shadow-2);z-index:2}
@media (max-width:979px){
  .hero{min-height:0;padding-top:calc(var(--s-8) + 64px)}
  .hero-grid{grid-template-columns:1fr}
  .hero-dial{right:-45%;top:0;transform:none;opacity:.04}
  .hero-composite{position:static;aspect-ratio:auto;max-width:none;margin:0;
    display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
  .hero-composite .mat{position:static;width:auto;transform:none;box-shadow:none;padding:var(--s-2)}
  .hero-composite .mat img{border-radius:calc(var(--r-2) - var(--s-1))}
  .hero-composite .mat-front{order:-1}
}

/* ---------- 21. PAGE-HERO (subpages) ---------- */
.page-hero{
  position:relative;overflow:hidden;
  background-image:radial-gradient(ellipse 60% 45% at 50% -10%,rgba(125,208,255,.06),transparent 70%);
  background-repeat:no-repeat;
  padding-block:calc(var(--s-8) + 64px) var(--s-8);
}
.crumb{
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);
}
.crumb a{color:var(--ink-4)}
.crumb a:hover{color:var(--accent)}
.page-hero h1{font-size:var(--t-h2);margin-top:var(--s-5)}
.page-hero .lead{margin-top:var(--s-4)}
.offer-row{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap;margin-top:var(--s-6)}
.offer-row .price{display:inline-block}
.page-hero .facts{margin-top:var(--s-5)}
.page-hero .meta-line{margin-top:var(--s-4);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}

/* ---------- 22. PACKS PRICE LIST ---------- */
.packs-group+.packs-group{margin-top:var(--s-7)}
.packs-title{
  display:flex;align-items:baseline;gap:var(--s-3);
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--line-1);
}
.packs-title .sub{color:var(--ink-4);text-transform:none;letter-spacing:.04em}
.pack-row{
  display:grid;grid-template-columns:7.5rem 1fr auto auto;gap:var(--s-4);align-items:center;
  padding-block:var(--s-4);border-bottom:1px solid var(--line-2);
}
.pack-tier{font-weight:600;font-size:var(--t-small);color:var(--ink-1)}
.pack-desc{font-size:var(--t-small);color:var(--ink-3)}
.pack-price{font-family:var(--font-mono);font-size:var(--t-small);color:var(--ink-1);font-variant-numeric:tabular-nums;text-align:right}
.pack-row .btn{min-height:44px;padding:.5rem 1rem;font-size:var(--t-small)}
@media (max-width:639px){
  .pack-row{grid-template-columns:1fr auto;grid-template-rows:auto auto}
  .pack-desc{grid-column:1 / -1;grid-row:2}
  .pack-price{text-align:right}
  .pack-row .btn{grid-column:1 / -1;grid-row:3;width:100%}
}
.packs-note{margin-top:var(--s-6)}

/* CSS-drawn pack previews */
.filmstrip{display:flex;gap:3px;position:relative;border-radius:var(--r-2);overflow:hidden}
.filmstrip .frame{flex:1;aspect-ratio:9/16;background:var(--bg-3);border:1px solid var(--line-1);border-radius:3px}
.filmstrip .count{
  position:absolute;inset:auto var(--s-3) var(--s-3) auto;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-2);
  background:rgba(5,5,8,.7);padding:.25rem .6rem;border-radius:var(--r-1);
}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;position:relative;border-radius:var(--r-2);overflow:hidden}
.mosaic .tile{aspect-ratio:1;background:var(--fill-1);border:1px solid var(--line-2);border-radius:4px}
.mosaic .tile:nth-child(5n){background:var(--fill-accent)}
.mosaic .count{
  position:absolute;inset:auto var(--s-3) var(--s-3) auto;
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-2);
  background:rgba(5,5,8,.7);padding:.25rem .6rem;border-radius:var(--r-1);
}

/* ---------- 23. UTILITY PAGE PIECES ---------- */
/* after-checkout steps: one ruled horizontal row */
.steps-row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-5);border-block:1px solid var(--line-1);padding-block:var(--s-5)}
@media (max-width:719px){.steps-row{grid-template-columns:1fr 1fr}}
@media (max-width:479px){.steps-row{grid-template-columns:1fr}}
.steps-row .st-n{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-4)}
.steps-row h3,.steps-row .st-t{font-family:var(--font-body);font-weight:600;font-size:var(--t-small);color:var(--ink-1);margin-top:var(--s-2)}
.steps-row p{font-size:var(--t-fine);color:var(--ink-3);margin-top:var(--s-1)}

/* spec sheet */
.spec-sheet{border-top:1px solid var(--line-2)}
.spec-sheet div{display:grid;grid-template-columns:10rem 1fr;gap:var(--s-4);padding-block:var(--s-3);border-bottom:1px solid var(--line-2)}
.spec-sheet dt{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding-top:.2em}
.spec-sheet dd{color:var(--ink-2);font-size:var(--t-small)}
@media (max-width:479px){.spec-sheet div{grid-template-columns:1fr}}

/* persona quotes (kits page) */
.quote-row{display:grid;grid-template-columns:3rem 1fr;gap:var(--s-4);padding-block:var(--s-5);border-bottom:1px solid var(--line-2)}
.quote-row .q-glyph{font-family:var(--font-editorial);font-style:italic;font-size:3rem;line-height:.8;color:var(--accent-ice)}
.quote-row blockquote{font-size:var(--t-lead);color:var(--ink-2);max-width:52ch}
.quote-row .q-attr{margin-top:var(--s-3);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}

/* coaching note card */
.note-card{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:clamp(1.5rem,4vw,3rem);max-width:620px}
.note-card .salutation{font-family:var(--font-editorial);font-style:italic;font-size:var(--t-h3);color:var(--accent-ice)}
.note-card p{margin-top:var(--s-4);color:var(--ink-2)}
.note-card .sign{margin-top:var(--s-5);font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

/* tools rows */
.tool-row{display:grid;grid-template-columns:40px 1fr auto;gap:var(--s-4);align-items:center;padding-block:var(--s-4);border-bottom:1px solid var(--line-2)}
.tool-init{
  width:40px;height:40px;display:grid;place-items:center;background:var(--fill-1);
  border:1px solid var(--line-1);border-radius:var(--r-1);
  font-family:var(--font-mono);font-weight:500;color:var(--ink-2);
}
.tool-row .t-name{font-weight:600;color:var(--ink-1);font-size:var(--t-small)}
.tool-row .t-why{font-size:var(--t-small);color:var(--ink-3)}
@media (max-width:639px){.tool-row{grid-template-columns:40px 1fr}.tool-row .btn-text{grid-column:2}}

/* moment pages (404, thank-you) */
.moment{position:relative;overflow:hidden;min-height:72vh;display:flex;align-items:center;text-align:left}
.big-404{font-family:var(--font-display);font-weight:500;font-size:clamp(6rem,20vw,13rem);line-height:1;letter-spacing:-.04em;color:var(--ink-1)}
.moment h1{margin-top:var(--s-5)}
.big-404+h1{margin-top:var(--s-4)}
.moment .lead{margin-top:var(--s-4)}
.moment .fine{margin-top:var(--s-5)}
.moment .fine+.fine{margin-top:var(--s-2)}
.moment .cta-row{margin-top:var(--s-6)}
.moment-steps{max-width:560px;margin-top:var(--s-7)}

/* anchor chips (faq page) */
.anchor-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip{
  display:inline-flex;align-items:center;min-height:40px;padding:.35rem .85rem;
  border:1px solid var(--line-1);background:var(--fill-1);border-radius:var(--r-pill);
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  transition:color var(--dur-1),border-color var(--dur-1);
}
.chip:hover{color:var(--accent);border-color:var(--accent)}

/* cross-sell ladder strip (product pages) */
.ladder-strip{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line-1)}
@media (max-width:719px){.ladder-strip{grid-template-columns:1fr}}
.ladder-strip>div{padding:var(--s-5);border-right:1px solid var(--line-2)}
.ladder-strip>div:last-child{border-right:0}
@media (max-width:719px){.ladder-strip>div{border-right:0;border-bottom:1px solid var(--line-2)}.ladder-strip>div:last-child{border-bottom:0}}
.ladder-strip .ls-k{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.ladder-strip .ls-n{font-weight:600;color:var(--ink-1);font-size:var(--t-small);margin-top:var(--s-2)}
.ladder-strip .ls-p{font-family:var(--font-mono);font-size:var(--t-small);color:var(--ink-3);margin-top:var(--s-1);font-variant-numeric:tabular-nums}
.ladder-strip .is-this{background:var(--fill-1)}

/* ---------- 24. PROSE / LEGAL TEMPLATE ---------- */
.prose{max-width:66ch;color:var(--ink-2)}
.prose h2{
  font-size:var(--t-h3);margin-top:var(--s-8);padding-top:var(--s-5);
  border-top:1px solid var(--line-2);
}
.prose h2 .idx{display:block;font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);margin-bottom:var(--s-2)}
.prose h3{font-size:var(--t-h4);font-family:var(--font-body);font-weight:600;margin-top:var(--s-6)}
.prose p{margin-top:var(--s-4)}
.prose ul,.prose ol{margin-top:var(--s-4);padding-left:1.25rem}
.prose li{margin-top:var(--s-2)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose ul.do,.prose ul.dont{list-style:none;padding-left:0}
.prose ul.do li,.prose ul.dont li{position:relative;padding-left:1.75rem}
.prose ul.do li::before,.prose ul.dont li::before{
  content:"";position:absolute;left:0;top:.35em;width:14px;height:14px;background:var(--ok);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.prose ul.dont li::before{
  background:var(--warn);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 25. HOMEPAGE SPLITS / BUNDLE CARD ---------- */
.split{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
@media (max-width:979px){.split{grid-template-columns:1fr}}
.split-main .gallery-2{margin-top:var(--s-7)}
.split-main>.fine{margin-top:var(--s-3)}
.mirror{display:grid;grid-template-columns:5fr 6fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
@media (max-width:879px){.mirror{grid-template-columns:1fr}}
.mirror .spec-row{margin-top:var(--s-4)}
.mirror-actions{margin-top:var(--s-6);display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}

.bundle-card{
  position:relative;background:var(--bg-2);border:1px solid var(--line-accent);
  border-radius:var(--r-3);box-shadow:var(--shadow-2);padding:clamp(1.5rem,4vw,3rem);
  overflow:hidden;
}
.bundle-card::before{content:"";position:absolute;inset:0 0 72% 0;background:linear-gradient(180deg,var(--fill-accent),transparent);pointer-events:none}
.bundle-card>*{position:relative}
.bundle-card .badge{position:absolute;top:clamp(1rem,3vw,1.75rem);right:clamp(1rem,3vw,1.75rem)}
@media (max-width:879px){.bundle-card .badge{position:static;display:inline-flex;margin-bottom:var(--s-5)}}
.bundle-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:879px){.bundle-grid{grid-template-columns:1fr}}
.bundle-cta .bs-name{font-size:var(--t-h3);font-family:var(--font-display);font-weight:500;color:var(--ink-1)}
.bundle-cta p{margin-top:var(--s-4)}
.bundle-cta .btn{margin-top:var(--s-5)}
.bundle-cta .fine{margin-top:var(--s-4)}
.bundle-card+.fine{margin-top:var(--s-6)}

/* ---------- 26. FOOTER (3 tiers) ---------- */
.site-footer{background:var(--bg-0);border-top:1px solid var(--line-1)}
.foot-echo{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);flex-wrap:wrap;
  padding-block:var(--s-7);border-bottom:1px solid var(--line-2);
}
.foot-echo p{font-family:var(--font-display);font-weight:500;font-size:var(--t-h3);letter-spacing:-.015em;color:var(--ink-1);text-wrap:balance}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:var(--s-6);padding-block:var(--s-8)}
@media (max-width:879px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:539px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{margin-top:var(--s-4);font-size:var(--t-small);color:var(--ink-3);max-width:34ch}
.foot-brand .facts{margin-top:var(--s-5)}
.foot-col h3{
  font-family:var(--font-mono);font-size:var(--t-label);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
}
.foot-col ul{list-style:none;margin-top:var(--s-4)}
.foot-col li{margin-top:var(--s-2)}
.foot-col a{font-size:var(--t-small);color:var(--ink-3);transition:color var(--dur-1)}
.foot-col a:hover{color:var(--ink-1)}
.foot-legal{padding-block:var(--s-6);border-top:1px solid var(--line-2)}
.foot-legal p{font-size:var(--t-fine);line-height:1.6;color:var(--ink-4);max-width:90ch}
.foot-sign{
  display:flex;align-items:center;gap:.6rem;margin-top:var(--s-5);
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);
}
.foot-sign .dial-glyph{color:var(--accent);opacity:.7}

/* ---------- 27. FINAL CLOSE ---------- */
.final-close{text-align:center}
.final-close h2,.final-close .lead{margin-inline:auto}
.final-close .lead{margin-top:var(--s-5)}
.final-close .cta-row{margin-top:var(--s-6);justify-content:center}
.final-close .facts{margin-top:var(--s-7);justify-content:center}

/* ---------- 28. REVEAL SYSTEM (brief §10.1) ---------- */
html.js .reveal{opacity:0;transform:translateY(14px)}
html.js .reveal.in{opacity:1;transform:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}

/* ---------- 29. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .reveal .sec-label::after{transform:none}
  .dial-motes{animation:none}
  .dial-rotor{transform:none}
  .buybar{transition:none}
}

/* ---------- 30. PRINT (quiet) ---------- */
@media print{
  .site-header,.buybar,.menu-sheet,.skip-link{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   CINEMATIC LAYER — luminous dark, ambient aurora, WebGL hero,
   scroll choreography support. Appended overrides; cascade wins.
   ============================================================ */
:root{
  --bg-0:#07080E; --bg-1:#0D0F17; --bg-2:#131622; --bg-3:#181C2A;
  --line-1:rgba(244,245,247,.13); --line-2:rgba(244,245,247,.07);
  --amb1:#123A5E; --amb2:#0D4A44;
}

/* ---------- ambient aurora (fixed, behind everything) ---------- */
.ambient{position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 22% 24%, var(--amb1) 0%, transparent 68%),
    radial-gradient(40% 44% at 80% 72%, var(--amb2) 0%, transparent 66%);
  opacity:.42;filter:blur(60px) saturate(1.25);
  transform:translateZ(0);will-change:opacity;
  transition:opacity .6s ease}
.ambient::before{content:"";position:absolute;inset:0;
  background:radial-gradient(55% 50% at 55% 110%, rgba(63,224,207,.10), transparent 70%)}
.ambient::after{content:"";position:fixed;inset:0;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
body{position:relative}
body > header, body > main, body > footer, .buy-bar{position:relative;z-index:1}

/* sections go glassy so the aurora breathes through */
main .section{background:transparent}
main .section.chamber{background:linear-gradient(180deg, rgba(15,17,26,.78), rgba(9,10,16,.62));
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.site-footer{background:rgba(6,7,12,.82);backdrop-filter:blur(8px)}

/* ---------- scroll progress hairline ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  transform-origin:0 50%;transform:scaleX(0);pointer-events:none;
  background:linear-gradient(90deg,var(--accent),var(--ok))}

/* ---------- hero scene ---------- */
.hero{position:relative;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center}
.hero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-keyart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:.42;transform:scale(1.06);filter:saturate(1.1) brightness(.92)}
#vaultFX{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-veil{position:absolute;inset:0;opacity:.55;
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(7,8,14,.95) 8%, transparent 55%),
    linear-gradient(180deg, rgba(7,8,14,.55), rgba(7,8,14,.18) 30%, rgba(7,8,14,.28) 78%, rgba(7,8,14,.9))}
.hero .wrap{position:relative;z-index:2}
html.fx-live .hero .hero-dial{display:none}
.hero-art .mat{background:rgba(13,15,23,.55);backdrop-filter:blur(6px)}

/* legacy reveal system neutralised when GSAP owns motion */
html.fx .reveal{opacity:1!important;transform:none!important;transition:none!important}
html.fx .hero h1, html.fx main h2{overflow:hidden}
html.fx .w{display:inline-block;will-change:transform}

/* ---------- pointer tilt + specular sheen ---------- */
.tilt{position:relative;transform-style:preserve-3d}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--shx,50%) var(--shy,50%), rgba(255,255,255,.16), transparent 52%);
  opacity:0;transition:opacity .35s ease}
.tilt:hover::after{opacity:1}

/* ---------- marquee ticker ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line-2);padding:.9rem 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:3.5rem;width:max-content;
  animation:vv-mq 42s linear infinite;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.marquee-track b{color:var(--accent);font-weight:500}
@keyframes vv-mq{to{transform:translateX(-50%)}}

/* ---------- luminosity bumps (deliberate, still disciplined) ---------- */
.btn-primary{box-shadow:0 2px 14px rgba(125,208,255,.22)}
.btn-primary:hover{box-shadow:0 6px 28px rgba(125,208,255,.38)}
.tier--featured{box-shadow:0 0 0 1px var(--line-accent), 0 18px 60px rgba(125,208,255,.10)}
.bundle-card{box-shadow:0 0 0 1px var(--line-accent), 0 30px 90px rgba(125,208,255,.12)}
.price{text-shadow:0 0 24px rgba(125,208,255,.25)}
.sec-label .dial-glyph{filter:drop-shadow(0 0 6px rgba(125,208,255,.6))}

/* ---------- reduced motion / fallbacks ---------- */
@media (prefers-reduced-motion:reduce){
  .ambient{opacity:.28}
  .marquee-track{animation:none}
  .hero-keyart{transform:none}
}
html.no-fx .hero-keyart{opacity:.55}
@media (max-width:767px){
  .ambient{filter:blur(44px) saturate(1.2);opacity:.38}
  .hero{min-height:92vh;min-height:92svh}
}

/* hero covers idle float (img inner so pointer-tilt owns the figure) */
.hero-composite .mat img{animation:vv-float 7s ease-in-out infinite alternate}
.hero-composite .mat-fan-l img{animation-delay:-2.4s}
.hero-composite .mat-fan-r img{animation-delay:-4.8s}
@keyframes vv-float{from{transform:translateY(4px)}to{transform:translateY(-7px)}}
@media (prefers-reduced-motion:reduce){.hero-composite .mat img{animation:none}}

/* ---------- real-media showcase (video reel + design wall) ---------- */
.reel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.reel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:.5rem}
  .reel .reel-item{flex:0 0 58%;scroll-snap-align:center}}
.reel-item{position:relative;aspect-ratio:9/16;border-radius:var(--r-2);overflow:hidden;
  border:1px solid var(--line-1);background:var(--bg-1);box-shadow:var(--shadow-1)}
.reel-item video,.reel-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel-item::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(5,5,8,.55))}
.reel-tag{position:absolute;left:10px;bottom:8px;z-index:2;font-family:var(--font-mono);
  font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.design-wall{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.design-wall{grid-template-columns:repeat(2,1fr)}}
.design-wall figure{margin:0;border-radius:var(--r-2);overflow:hidden;border:1px solid var(--line-1);
  background:#000;box-shadow:var(--shadow-1);position:relative}
.design-wall img{display:block;width:100%;height:auto;transition:transform var(--dur-2) var(--ease-out)}
.design-wall figure:hover img{transform:scale(1.045)}
.media-note{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--ink-4);
  text-transform:uppercase;margin:.9rem 0 0;display:flex;align-items:center;gap:.6rem}
.media-note::before{content:"";width:18px;height:1px;background:var(--line-1)}
.media-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:var(--s-6) 0}
@media(max-width:760px){.media-strip{grid-template-columns:repeat(3,1fr)}}
.media-strip .reel-item{aspect-ratio:9/14}
.media-strip figure{margin:0;border-radius:var(--r-1);overflow:hidden;border:1px solid var(--line-1);background:#000}
.media-strip figure img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:9/14}


/* legacy engines without aspect-ratio: give media tiles real height */
@supports not (aspect-ratio: 1){
  .reel-item{height:400px}
  .media-strip figure img{height:280px}
}

/* ---------- look-inside lightbox ---------- */
.peek-bound{cursor:zoom-in}
.peek-bound:focus-visible{box-shadow:var(--focus-ring);outline:none}
.peek{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center}
.peek.open{display:flex}
.peek-backdrop{position:absolute;inset:0;background:rgba(4,4,7,.9);backdrop-filter:blur(8px)}
.peek-stage{position:relative;z-index:1;max-width:min(88vw,900px);max-height:86vh;margin:0;
  display:flex;flex-direction:column;gap:.7rem;align-items:center}
.peek-stage img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--r-2);
  border:1px solid var(--line-1);box-shadow:var(--shadow-2)}
.peek-stage figcaption{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3)}
.peek-btn{position:absolute;z-index:2;width:46px;height:46px;border-radius:var(--r-pill);
  border:1px solid var(--line-1);background:rgba(13,15,23,.85);color:var(--ink-1);
  font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-1),color var(--dur-1)}
.peek-btn:hover{border-color:var(--accent);color:var(--accent)}
.peek-btn:focus-visible{box-shadow:var(--focus-ring);outline:none}
.peek-prev{left:clamp(8px,3vw,40px);top:50%;transform:translateY(-50%)}
.peek-next{right:clamp(8px,3vw,40px);top:50%;transform:translateY(-50%)}
.peek-close{top:18px;right:18px}
.peek-count{position:absolute;z-index:2;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--ink-3)}

/* ---------- exit-intent nudge ---------- */
.nudge{position:fixed;inset:0;z-index:210;display:flex;align-items:center;justify-content:center}
.nudge-backdrop{position:absolute;inset:0;background:rgba(4,4,7,.82);backdrop-filter:blur(10px)}
.nudge-card{position:relative;z-index:1;width:min(92vw,460px);background:var(--bg-1);
  border:1px solid var(--line-accent);border-radius:var(--r-3);padding:2.1rem 2rem 1.6rem;
  box-shadow:var(--shadow-2);text-align:center;animation:nudge-in .35s var(--ease-out)}
@keyframes nudge-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nudge-card{animation:none}}
.nudge-label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.nudge-card h2{font-size:1.45rem;line-height:1.15;margin-bottom:1.1rem;text-wrap:balance}
.nudge-ledger{margin:0 0 1.3rem;border-block:1px solid var(--line-2);padding:.9rem 0;
  font-family:var(--font-mono);font-size:.82rem}
.nudge-ledger p{display:flex;justify-content:space-between;gap:1rem;margin:.35rem 0;color:var(--ink-3)}
.nudge-ledger b{font-weight:500;color:var(--ink-2)}
.nudge-ledger p:nth-child(2) b{color:var(--warn);text-decoration:line-through}
.nudge-total{color:var(--ink-1)!important}
.nudge-total b{color:var(--accent)!important;font-weight:600}
.nudge-card .btn{width:100%;margin-bottom:.6rem}
.nudge-dismiss{background:none;border:none;cursor:pointer;margin-bottom:.8rem}
.nudge-card .fine{font-size:.72rem}
.nudge-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:var(--r-pill);
  border:1px solid var(--line-1);background:none;color:var(--ink-3);font-size:1.05rem;cursor:pointer}
.nudge-close:hover{color:var(--ink-1);border-color:var(--ink-4)}
.nudge-close:focus-visible{box-shadow:var(--focus-ring);outline:none}

/* ---------- guides hub rows ---------- */
.guide-row{display:flex;justify-content:space-between;align-items:center;gap:2rem;
  padding:1.5rem 1.6rem;border:1px solid var(--line-1);border-radius:var(--r-2);
  background:var(--bg-1);text-decoration:none;transition:border-color var(--dur-1),background var(--dur-1)}
.guide-row:hover{border-color:var(--ink-4);background:var(--bg-2)}
.guide-row h3{font-size:1.15rem;letter-spacing:-.01em;margin-bottom:.35rem;color:var(--ink-1)}
.guide-row p{font-size:.875rem;color:var(--ink-3);max-width:52ch}
.guide-row .btn-text{flex:none;white-space:nowrap}
@media(max-width:640px){.guide-row{flex-direction:column;align-items:flex-start;gap:.8rem}}

/* ---------- the vault wall (scrolling media marquee) ---------- */
.vault-wall{display:flex;flex-direction:column;gap:14px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.vw-row{display:flex;gap:14px;width:max-content;animation:vv-mq 70s linear infinite}
.vw-row.rev{animation-direction:reverse;animation-duration:84s}
.vw-row img{height:150px;width:auto;border-radius:9px;border:1px solid var(--line-1);display:block}
@media(max-width:760px){.vw-row img{height:104px}}
.vw-row.vw-slow{animation-duration:96s}
@media(prefers-reduced-motion:reduce){.vw-row{animation:none}}

/* ---------- kit finder quiz ---------- */
.quiz-progress{display:flex;gap:.5rem;margin-bottom:1.6rem}
.qp-tick{width:34px;height:3px;border-radius:2px;background:var(--fill-1);transition:background var(--dur-2)}
.qp-tick.on{background:var(--accent)}
.quiz-q{font-size:1.45rem;margin-bottom:1.2rem;letter-spacing:-.01em}
.quiz-opt{display:block;width:100%;text-align:left;margin-bottom:.7rem;padding:1rem 1.2rem;
  background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--r-1);color:var(--ink-2);
  font-family:var(--font-body);font-size:.95rem;cursor:pointer;
  transition:border-color var(--dur-1),color var(--dur-1),background var(--dur-1)}
.quiz-opt:hover{border-color:var(--accent);color:var(--ink-1);background:var(--bg-3)}
.quiz-opt:focus-visible{box-shadow:var(--focus-ring);outline:none}
.quiz-why{color:var(--ink-3);line-height:1.6}

/* ---------- honest event ribbon ---------- */
.event-ribbon{position:sticky;top:64px;z-index:45;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:center;justify-content:center;
  margin:0 auto;padding:.42rem 1rem;text-align:center;
  border-bottom:1px solid var(--line-accent);background:rgba(13,26,38,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media(max-width:640px){.event-ribbon .er-end{display:none}.event-ribbon{top:56px}}
.er-name{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.er-deal{font-size:.86rem;color:var(--ink-1)}
.er-code{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;color:var(--ink-inverse);
  background:var(--accent);border:none;border-radius:4px;padding:.15rem .55rem;cursor:pointer}
.er-end{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink-4)}

/* ---------- vault terminal ---------- */
.vt{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(4,4,7,.7)}
.vt.on{display:flex}
.vt-win{width:min(92vw,640px);background:#05060A;border:1px solid var(--line-accent);border-radius:10px;box-shadow:var(--shadow-2);overflow:hidden}
.vt-bar{display:flex;justify-content:space-between;align-items:center;padding:.5rem .9rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line-2)}
.vt-x{background:none;border:none;color:var(--ink-3);font-size:1rem;cursor:pointer}
.vt-out{height:240px;overflow-y:auto;padding:.9rem;font-family:var(--font-mono);font-size:.8rem;line-height:1.7;color:var(--ink-2)}
.vt-line.vt-echo{color:var(--ink-4)}
.vt-in{display:flex;gap:.5rem;padding:.6rem .9rem;border-top:1px solid var(--line-2);font-family:var(--font-mono);color:var(--accent)}
.vt-in input{flex:1;background:none;border:none;outline:none;color:var(--ink-1);font-family:var(--font-mono);font-size:.85rem}

/* ---------- vault keeper ---------- */
.vk{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:150}
@media(max-width:979px){body:has(.buy-bar) .vk{bottom:calc(92px + env(safe-area-inset-bottom))}}
.vk-fab{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-accent);background:var(--bg-1);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);transition:transform var(--dur-1)}
.vk-fab:hover{transform:translateY(-2px)}
.vk-win{position:absolute;right:0;bottom:64px;width:min(88vw,360px);background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--r-3);box-shadow:var(--shadow-2);overflow:hidden}
.vk-head{padding:.8rem 1rem;border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:.6rem}
.vk-head b{font-family:var(--font-display);font-size:.95rem}
.vk-head span{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);flex:1}
.vk-x{background:none;border:none;color:var(--ink-3);font-size:1.1rem;cursor:pointer}
.vk-log{height:250px;overflow-y:auto;padding:.9rem;display:flex;flex-direction:column;gap:.6rem}
.vk-msg{max-width:88%;padding:.6rem .8rem;border-radius:10px;font-size:.84rem;line-height:1.5}
.vk-msg a{color:var(--accent)}
.vk-bot{background:var(--bg-2);color:var(--ink-2);border:1px solid var(--line-2);align-self:flex-start}
.vk-user{background:var(--fill-accent);color:var(--ink-1);align-self:flex-end}
.vk-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 .9rem .6rem}
.vk-chip{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;padding:.3rem .6rem;border-radius:100px;border:1px solid var(--line-1);background:none;color:var(--ink-3);cursor:pointer}
.vk-chip:hover{color:var(--accent);border-color:var(--accent)}
.vk-form{display:flex;gap:.5rem;padding:.7rem .9rem;border-top:1px solid var(--line-2)}
.vk-form input{flex:1;background:var(--bg-3);border:1px solid var(--line-2);border-radius:6px;padding:.5rem .7rem;color:var(--ink-1);font-size:.84rem;outline:none}
.vk-form input:focus-visible{box-shadow:var(--focus-ring)}

/* ---------- 404 heist ---------- */
.heist{max-width:420px;margin:2.5rem auto 0;text-align:center}
.heist-dials{display:flex;gap:1rem;justify-content:center;margin:1.2rem 0}
.hd{display:flex;flex-direction:column;gap:.4rem;align-items:center}
.hd button{width:44px;height:34px;border-radius:6px;border:1px solid var(--line-1);background:var(--bg-2);color:var(--accent);font-size:1rem;cursor:pointer}
.hd button:hover{border-color:var(--accent)}
.hd .hd-n{font-family:var(--font-mono);font-size:2rem;color:var(--ink-1);width:44px;text-align:center;
  border-block:1px solid var(--line-accent);padding:.3rem 0}
.hd .hd-hint{font-size:.9rem;height:1.2em;color:var(--warn)}
.heist-try{margin-top:.6rem}
.heist-msg{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;color:var(--ink-3);margin-top:1rem;min-height:1.4em}
.heist-msg b{color:var(--accent)}

/* ---------- vault status log ---------- */
.status-row{display:grid;grid-template-columns:110px 1fr;gap:1.4rem;padding:1.4rem 0;border-top:1px solid var(--line-2)}
.status-row .st-date{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;color:var(--accent);padding-top:.3rem}
.status-row h2{font-size:1.15rem;margin-bottom:.35rem;letter-spacing:-.01em}
.status-row p{font-size:.9rem;color:var(--ink-3);line-height:1.6}
@media(max-width:560px){.status-row{grid-template-columns:1fr;gap:.3rem}}

.menu-sheet .sheet-bundle{color:var(--accent);font-weight:600}

.egg-hint{font-family:var(--font-mono);font-size:.62rem;color:var(--ink-4);opacity:.55}
.egg-hint b{color:var(--accent);font-weight:500}
@media(hover:none){.egg-hint{display:none}}

/* ---------- affiliate media kit ---------- */
.kit-dl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-5);
  border:1px solid var(--line-accent);border-radius:var(--r-3);background:var(--fill-accent);
  padding:clamp(1.5rem,4vw,2.5rem)}
.kit-dl h3{font-size:var(--t-h3)}
.kit-dl .kd-meta{margin-top:var(--s-2);font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kit-strip{display:flex;gap:var(--s-4);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--s-2)}
.kit-strip .mat{flex:0 0 auto;scroll-snap-align:start}
.kit-strip .mat img{height:clamp(180px,22vw,248px);width:auto}
.swipe{break-inside:avoid;border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--bg-1);
  overflow:hidden;margin-bottom:var(--s-4)}
.swipe-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:.6rem .6rem .6rem var(--s-4);border-bottom:1px solid var(--line-2);background:var(--bg-2)}
.swipe-label{font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4)}
.swipe-copy{flex:none;font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);padding:.35rem .7rem;border:1px solid var(--line-accent);
  border-radius:var(--r-1);transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.swipe-copy:hover{background:var(--fill-accent)}
.swipe-copy.copied{color:var(--ok);border-color:rgba(63,224,207,.4)}
html:not(.js) .swipe-copy{display:none}
.swipe-body{padding:var(--s-4);font-family:var(--font-mono);font-size:var(--t-fine);
  color:var(--ink-2);line-height:1.75;white-space:pre-wrap;overflow-wrap:break-word}
.swipe-body b{font-family:inherit;font-weight:600;color:var(--accent)}
.swipe-stack{margin-top:var(--s-6)}
@media (min-width:900px){.swipe-stack{columns:2;column-gap:var(--s-4)}}