/* ==========================================================================
   JV LAUNCH KIT — SHARED STYLESHEET
   Used by: jv-invite.html · jv-tools.html · jv-swipes.html · jv-banners.html
   Change the accent for the whole kit with one attribute on <html>:
       <html data-accent="green">
   Options: green · blue · orange · purple · cyan · red · magenta
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THEME TOKENS
   -------------------------------------------------------------------------- */
:root{
  --a:#1ec072; --a-hi:#5fe3a4; --a-lo:#00682c;
  --a-soft:rgba(30,192,114,.12); --a-line:rgba(30,192,114,.30); --a-glow:rgba(30,192,114,.45);
  --ink:#080d0b; --ink-2:#0f1614; --ink-3:#141d1a;
  --paper:#f7fbf8; --paper-2:#eef7f1; --paper-3:#e2f0e8;
  --tx:#f2f7f4; --tx-2:#c2ccc8; --tx-3:#7d8884;
  --ptx:#101516; --ptx-2:#4a5250; --ptx-3:#7d8884;
  --rule:rgba(242,247,244,.09); --rule-2:rgba(242,247,244,.16);
  --prule:#dce4e0; --prule-2:#c3cfca;
  --act:#f8c72a; --act-hi:#ffd75e; --act-lo:#e0ad14; --act-ink:#241a02;
  --act-glow:rgba(248,199,42,.45);
  --gold:#f0b429; --silver:#b9c3c9; --bronze:#cd7f45;
  --font:"Sora",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --wrap:1080px; --wrap-wide:1240px;
  --pad:clamp(20px,5vw,40px); --sec-y:clamp(64px,9vw,116px);
  --r:14px; --r-lg:20px;
  --sidebar:266px;
}
[data-accent="blue"]{
  --a:#2f8fff; --a-hi:#7ab8ff; --a-lo:#0b3d7a;
  --a-soft:rgba(47,143,255,.12); --a-line:rgba(47,143,255,.30); --a-glow:rgba(47,143,255,.45);
  --ink:#070b12; --ink-2:#0d131c; --ink-3:#121a25;
  --paper:#f7f9fd; --paper-2:#eef3fb; --paper-3:#e2eaf6;
  --tx:#f2f5fa; --tx-2:#c2c9d4; --tx-3:#7d858f;
  --prule:#dce1e9; --prule-2:#c3cbd6;
}
[data-accent="orange"]{
  --a:#ff7a29; --a-hi:#ffa96b; --a-lo:#8a3708;
  --a-soft:rgba(255,122,41,.12); --a-line:rgba(255,122,41,.30); --a-glow:rgba(255,122,41,.45);
  --ink:#100a06; --ink-2:#18110b; --ink-3:#20170f;
  --paper:#fdf9f6; --paper-2:#fbf2eb; --paper-3:#f6e7db;
  --tx:#faf5f1; --tx-2:#d2c8c0; --tx-3:#8d8279;
  --prule:#e9e1da; --prule-2:#d6cbc1;
}
[data-accent="purple"]{
  --a:#9b5cff; --a-hi:#c39dff; --a-lo:#43158f;
  --a-soft:rgba(155,92,255,.12); --a-line:rgba(155,92,255,.30); --a-glow:rgba(155,92,255,.45);
  --ink:#0b0713; --ink-2:#120d1d; --ink-3:#191227;
  --paper:#faf8fd; --paper-2:#f3eefb; --paper-3:#e9e1f6;
  --tx:#f5f2fa; --tx-2:#c8c2d4; --tx-3:#847d8f;
  --prule:#e3dee9; --prule-2:#cdc5d6;
}
[data-accent="cyan"]{
  --a:#12c8d4; --a-hi:#63e6ee; --a-lo:#04606a;
  --a-soft:rgba(18,200,212,.12); --a-line:rgba(18,200,212,.30); --a-glow:rgba(18,200,212,.45);
  --ink:#050f11; --ink-2:#0b171a; --ink-3:#101f23;
  --paper:#f5fbfc; --paper-2:#ecf7f9; --paper-3:#dcedf0;
  --tx:#f0f8f9; --tx-2:#bfcdd0; --tx-3:#7b898c;
  --prule:#d9e5e7; --prule-2:#c0cfd2;
}
[data-accent="red"]{
  --a:#ff4d55; --a-hi:#ff8a90; --a-lo:#8c1119;
  --a-soft:rgba(255,77,85,.12); --a-line:rgba(255,77,85,.30); --a-glow:rgba(255,77,85,.45);
  --ink:#110708; --ink-2:#1a0d0f; --ink-3:#221316;
  --paper:#fdf7f7; --paper-2:#fbeeef; --paper-3:#f6dfe1;
  --tx:#faf2f2; --tx-2:#d2c3c4; --tx-3:#8d7e7f;
  --prule:#e9dcdd; --prule-2:#d6c5c6;
}
[data-accent="magenta"]{
  --a:#ff3fa4; --a-hi:#ff85c6; --a-lo:#8a0f52;
  --a-soft:rgba(255,63,164,.12); --a-line:rgba(255,63,164,.30); --a-glow:rgba(255,63,164,.45);
  --ink:#110610; --ink-2:#1a0c18; --ink-3:#22121f;
  --paper:#fdf7fb; --paper-2:#fbeef6; --paper-3:#f6dfee;
  --tx:#faf2f7; --tx-2:#d2c3cc; --tx-3:#8d7e86;
  --prule:#e9dce5; --prule-2:#d6c5d0;
}
[data-cta="accent"]{--act:var(--a);--act-hi:var(--a-hi);--act-lo:var(--a-lo);--act-ink:#050807;--act-glow:var(--a-glow)}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--ink);color:var(--tx);font-family:var(--font);
 font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--a-hi);text-decoration:none}
:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:4px}
::selection{background:var(--a);color:#04120b}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}html{scroll-behavior:auto}}

h1,h2,h3,h4{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(30px,5vw,48px);letter-spacing:-.03em}
h2{font-size:clamp(25px,3.6vw,38px);margin-bottom:14px}
h3{font-size:clamp(17px,2vw,21px)}
h2 em,h1 em,h3 em{font-style:normal;color:var(--a)}
p{margin:0 0 1em}p:last-child{margin-bottom:0}
b,strong{font-weight:700;color:var(--tx)}
.lead{font-size:clamp(16px,1.6vw,18.5px);color:var(--tx-2);max-width:68ch}
.lead.center{margin-left:auto;margin-right:auto}
.center{text-align:center}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.hl{color:var(--a);font-weight:600}
.muted-tx{color:var(--tx-3)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{max-width:var(--wrap-wide);margin:0 auto;padding:0 var(--pad)}
section{padding:var(--sec-y) 0;position:relative}
section.dark{background:var(--ink-2)}
section.darker{background:var(--ink)}

.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
 font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--a);margin-bottom:13px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a);box-shadow:0 0 10px var(--a-glow)}
.sec-head{max-width:44rem;margin:0 auto clamp(30px,4.5vw,46px);text-align:center}
.sec-head .eyebrow{justify-content:center}

.mt-s{margin-top:14px}.mt-m{margin-top:24px}.mt-l{margin-top:38px}

/* --------------------------------------------------------------------------
   3. BUTTONS + PILLS
   -------------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;
 border-radius:999px;border:0;cursor:pointer;font-family:var(--font);font-size:15.5px;font-weight:700;
 letter-spacing:-.01em;text-align:center;
 background:linear-gradient(180deg,var(--act-hi),var(--act) 55%,var(--act-lo));color:var(--act-ink);
 box-shadow:0 0 0 1px rgba(0,0,0,.14) inset,0 10px 30px -12px var(--act-glow);
 transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);box-shadow:0 0 0 1px rgba(0,0,0,.14) inset,0 16px 40px -12px var(--act-glow)}
.btn:active{transform:translateY(0)}
.btn.lg{padding:18px 36px;font-size:17px}
.btn.sm{padding:9px 18px;font-size:13.5px}
.btn.ghost{background:transparent;color:var(--tx);box-shadow:0 0 0 1.5px var(--rule-2) inset}
.btn.ghost:hover{box-shadow:0 0 0 1.5px var(--a-line) inset;color:var(--a-hi)}
.btn.accent{background:linear-gradient(180deg,var(--a-hi),var(--a) 55%,var(--a-lo));color:#04120b;
 box-shadow:0 0 0 1px rgba(0,0,0,.14) inset,0 10px 30px -12px var(--a-glow)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.btn-row.center{justify-content:center}

.pill{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
 border:1.5px solid var(--a-line);background:var(--a-soft);font-family:var(--mono);font-size:11px;
 font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--a-hi)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--a);box-shadow:0 0 8px var(--a-glow)}
.pill.act{border-color:rgba(248,199,42,.4);background:rgba(248,199,42,.1);color:var(--act-hi)}
.pill.act::before{background:var(--act);box-shadow:0 0 8px var(--act-glow)}
.pill.plain::before{display:none}

.tag{display:inline-block;padding:3px 9px;border-radius:6px;font-family:var(--mono);font-size:10.5px;
 font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--a-soft);
 color:var(--a-hi);border:1px solid var(--a-line)}
.tag.n{background:rgba(255,255,255,.05);color:var(--tx-3);border-color:var(--rule-2)}

/* --------------------------------------------------------------------------
   4. CARDS
   -------------------------------------------------------------------------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
/* Exactly two columns until it has to stack. Use this for a set of FOUR: the
   auto-fit grids above will fit three across on a wide screen and leave the
   fourth card sitting alone on its own row. */
.g2x{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:760px){.g2x{grid-template-columns:1fr}}
.card{padding:24px;border-radius:var(--r-lg);border:1px solid var(--rule);
 background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
 display:flex;flex-direction:column;gap:9px}
.card p{color:var(--tx-2);font-size:15px;margin:0}
.card .k{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.16em;
 text-transform:uppercase;color:var(--a)}
.card.rail{border-left:3px solid var(--a)}
.card.link{transition:border-color .18s,transform .18s}
.card.link:hover{border-color:var(--a-line);transform:translateY(-3px)}

/* --------------------------------------------------------------------------
   5. TOP BAR + HEADER NAV
   -------------------------------------------------------------------------- */
.topbar{background:linear-gradient(90deg,var(--a-lo),var(--a) 50%,var(--a-lo));color:#04120b;
 text-align:center;padding:8px var(--pad);font-family:var(--mono);font-size:11.5px;font-weight:700;
 letter-spacing:.1em;text-transform:uppercase}
.topbar .t-act{color:var(--act-ink);background:var(--act);padding:2px 8px;border-radius:4px;margin-left:5px}

.nav{position:sticky;top:0;z-index:60;background:rgba(8,13,11,.85);backdrop-filter:blur(14px);
 border-bottom:1px solid var(--rule)}
.nav-in{max-width:var(--wrap-wide);margin:0 auto;padding:12px var(--pad);display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;
 color:var(--tx);white-space:nowrap}
.logo .mark{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--a-hi),var(--a) 45%,var(--a-lo));
 box-shadow:0 0 18px -4px var(--a-glow);color:#04120b;font-size:14px;font-weight:800}
.logo .lo-a{color:var(--a)}

/* A real logo image, for launches that have one — it replaces the generated
   .mark and the type. The height is set here and the width left to the image,
   so the row cannot jump as the file loads; put width and height attributes on
   the img as well so the browser reserves the box before it arrives.
   .brandmark is the symbol alone, .brandlock is symbol + wordmark. */
.brandlock,.brandmark{display:block;width:auto}
.brandlock{height:34px}
.brandmark{height:40px}
.brandlock.sm{height:26px}
.brandlock.lg{height:clamp(38px,5vw,52px)}
.brandmark.lg{height:clamp(64px,9vw,96px)}
/* Centred above the headline, which is where a sales page puts its logo —
   a sales page gets no nav, because a nav is a row of exits. */
.brandbar{display:flex;justify-content:center;margin-bottom:clamp(18px,2.6vw,26px)}
@media (max-width:640px){.brandlock.lg{height:32px}}

.nav-links{display:flex;gap:20px;margin-left:auto;font-size:13.5px;font-weight:500;color:var(--tx-2)}
.nav-links a{color:inherit;transition:color .15s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--a-hi)}
.nav .btn{padding:10px 20px;font-size:14px}
@media (max-width:980px){.nav-links{display:none}.nav .btn{margin-left:auto}}

/* --------------------------------------------------------------------------
   6. PERSONALIZATION BAR  (auto-substitutes link + name on every copy)
   -------------------------------------------------------------------------- */
.perso{position:sticky;top:0;z-index:70;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));
 border-bottom:1px solid var(--a-line);box-shadow:0 8px 26px -18px #000}
.perso-in{max-width:var(--wrap-wide);margin:0 auto;padding:12px var(--pad);
 display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.perso .lb{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;
 text-transform:uppercase;color:var(--a);white-space:nowrap}
.perso input{flex:1 1 190px;min-width:0;padding:10px 15px;border-radius:999px;
 border:1px solid var(--rule-2);background:rgba(0,0,0,.34);color:var(--tx);
 font-family:var(--mono);font-size:13px}
.perso input::placeholder{color:var(--tx-3);font-family:var(--font)}
.perso input:focus{border-color:var(--a);outline:none}
.perso .state{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;
 text-transform:uppercase;padding:6px 13px;border-radius:999px;white-space:nowrap;
 background:rgba(255,255,255,.05);color:var(--tx-3);border:1px solid var(--rule-2)}
.perso .state.on{background:var(--a-soft);color:var(--a-hi);border-color:var(--a-line)}

/* --------------------------------------------------------------------------
   7. APP SHELL (sidebar + main) — swipes & banners pages
   -------------------------------------------------------------------------- */
.shell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);
 max-width:1400px;margin:0 auto;gap:0;align-items:start}
.side{position:sticky;top:104px;max-height:calc(100vh - 120px);overflow-y:auto;
 padding:26px 14px 40px 20px;border-right:1px solid var(--rule);scrollbar-width:thin}
.side::-webkit-scrollbar{width:6px}
.side::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}
.side-grp{margin-bottom:22px}
.side-grp>.gl{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
 text-transform:uppercase;color:var(--tx-3);padding:0 10px 8px}
.side a{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;
 font-size:14px;color:var(--tx-2);transition:background .15s,color .15s}
.side a:hover{background:rgba(255,255,255,.05);color:var(--tx)}
.side a.on{background:var(--a-soft);color:var(--a-hi);font-weight:600}
.side a .n{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--tx-3)}
.main{padding:30px var(--pad) 80px;min-width:0}
.side-toggle{display:none}
@media (max-width:1000px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:280px;z-index:80;background:var(--ink-2);
   max-height:100vh;transform:translateX(-100%);transition:transform .25s ease;padding-top:20px}
  .side.open{transform:none}
  .side-toggle{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;
   border:1px solid var(--rule-2);background:rgba(255,255,255,.05);color:var(--tx);
   font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
   text-transform:uppercase;cursor:pointer;margin-bottom:18px}
}

/* --------------------------------------------------------------------------
   8. PHASE HEADERS + EMAIL ACCORDIONS
   -------------------------------------------------------------------------- */
.phase{margin:44px 0 18px}
.phase:first-of-type{margin-top:0}
.phase .pk{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;
 text-transform:uppercase;color:var(--a);margin-bottom:6px}
.phase h2{font-size:clamp(22px,3vw,30px);margin-bottom:8px}
.phase p{color:var(--tx-2);font-size:15.5px;max-width:64ch;margin:0}

.ecard{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:11px;
 background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
 transition:border-color .18s}
.ecard[open]{border-color:var(--a-line)}
.ecard>summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:14px}
.ecard>summary::-webkit-details-marker{display:none}
.ecard>summary:hover{background:rgba(255,255,255,.03)}
.e-meta{min-width:0;flex:1}
.e-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--tx);
 display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.e-sub{font-size:13.5px;color:var(--tx-3);margin-top:3px;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecard[open] .e-sub{white-space:normal}
.e-chev{flex:none;width:22px;height:22px;color:var(--tx-3);transition:transform .2s}
.ecard[open] .e-chev{transform:rotate(180deg);color:var(--a)}
.e-body{padding:0 20px 20px;border-top:1px solid var(--rule);margin-top:0;padding-top:18px}

.area-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.18em;
 text-transform:uppercase;color:var(--tx-3);margin:0 0 9px}
.subj{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-radius:10px;
 border:1px solid var(--rule);background:rgba(0,0,0,.24);margin-bottom:7px}
.subj .st{flex:1;font-size:14.5px;color:var(--tx-2);min-width:0}
.subj .num{font-family:var(--mono);font-size:11px;color:var(--tx-3);padding-top:2px;flex:none}

.icb{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid var(--rule-2);cursor:pointer;
 background:rgba(255,255,255,.05);color:var(--tx-2);display:grid;place-items:center;
 transition:background .15s,color .15s,border-color .15s}
.icb:hover{background:var(--a-soft);color:var(--a-hi);border-color:var(--a-line)}
.icb svg{width:15px;height:15px;fill:currentColor}
.icb.done{background:var(--a);color:#04120b;border-color:var(--a)}

.ebody-text{white-space:pre-wrap;font-size:15px;line-height:1.72;color:var(--tx-2);
 padding:18px;border-radius:10px;border:1px solid var(--rule);background:rgba(0,0,0,.24);
 margin-bottom:12px;overflow-x:auto}
.ebody-text .tok{color:var(--act);font-family:var(--mono);font-size:.9em;font-weight:700}
.ebody-text .note{color:var(--tx-3);font-style:italic}

.e-actions{display:flex;flex-wrap:wrap;gap:9px}

/* --------------------------------------------------------------------------
   9. BULLET / ANGLE BANK
   -------------------------------------------------------------------------- */
.bank{display:grid;gap:8px}
.bank .row{display:flex;align-items:flex-start;gap:12px;padding:13px 16px;border-radius:10px;
 border:1px solid var(--rule);background:rgba(255,255,255,.028);font-size:15px;color:var(--tx-2)}
.bank .row .num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--a);
 padding-top:2px;flex:none;min-width:22px}
.bank .row .t{flex:1;min-width:0}

/* --------------------------------------------------------------------------
   10. BANNERS
   -------------------------------------------------------------------------- */
.bn-group{margin-bottom:44px}
.bn-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px;
 padding-bottom:10px;border-bottom:1px solid var(--rule)}
.bn-head h3{font-size:19px}
.bn-head .dims{font-family:var(--mono);font-size:12.5px;color:var(--a-hi)}
.bn-head .use{font-size:13px;color:var(--tx-3);margin-left:auto}

.bn-stage{padding:24px;border-radius:var(--r-lg);border:1px solid var(--rule);
 background:repeating-conic-gradient(rgba(255,255,255,.028) 0% 25%,transparent 0% 50%) 50%/22px 22px;
 overflow:hidden}
.bn-fit{transform-origin:top left}

/* the banner itself — pure CSS, re-themes with the accent */
.bnr{position:relative;overflow:hidden;font-family:var(--font);color:var(--tx);
 background:radial-gradient(120% 140% at 12% 0%,var(--a-soft),transparent 58%),
  linear-gradient(145deg,var(--ink-3),var(--ink) 62%);
 border:1px solid var(--a-line);display:flex;flex:none}
.bnr::after{content:"";position:absolute;inset:0;pointer-events:none;
 background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);
 background-size:26px 26px;opacity:.5;
 mask-image:radial-gradient(70% 70% at 20% 30%,#000,transparent);
 -webkit-mask-image:radial-gradient(70% 70% at 20% 30%,#000,transparent)}
.bnr>*{position:relative;z-index:2}
.bnr .bmark{width:26px;height:26px;border-radius:7px;flex:none;display:grid;place-items:center;
 background:linear-gradient(145deg,var(--a-hi),var(--a) 45%,var(--a-lo));color:#04120b;
 font-weight:800;font-size:13px;box-shadow:0 0 14px -3px var(--a-glow)}
.bnr .bbrand{font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.bnr .bbrand span{color:var(--a)}
.bnr .bhead{font-weight:800;letter-spacing:-.025em;line-height:1.05;text-wrap:balance}
.bnr .bhead em{font-style:normal;color:var(--a)}
.bnr .bsub{color:var(--tx-2);line-height:1.35}
.bnr .bcta{display:inline-flex;align-items:center;justify-content:center;gap:6px;
 border-radius:999px;font-weight:700;white-space:nowrap;
 background:linear-gradient(180deg,var(--act-hi),var(--act) 55%,var(--act-lo));color:var(--act-ink);
 box-shadow:0 6px 20px -8px var(--act-glow)}
.bnr .bkick{font-family:var(--mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a)}
.bnr .bpay{font-family:var(--mono);font-weight:700;color:var(--act)}

/* horizontal layout */
.bnr.h{align-items:center;gap:16px;padding:0 18px}
.bnr.h .bcol{min-width:0;flex:1}
/* vertical layout */
.bnr.v{flex-direction:column;justify-content:space-between;padding:20px 18px;text-align:center;align-items:center}
/* square layout */
.bnr.s{flex-direction:column;justify-content:center;gap:12px;padding:26px;text-align:center;align-items:center}

.bn-tools{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.code{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--tx-2);
 padding:14px 16px;border-radius:10px;border:1px solid var(--rule);background:rgba(0,0,0,.32);
 white-space:pre;overflow-x:auto;margin-top:10px}

/* --------------------------------------------------------------------------
   11. HUB PAGE PIECES
   -------------------------------------------------------------------------- */
.linkbox{padding:clamp(22px,3.5vw,32px);border-radius:var(--r-lg);border:1px solid var(--a-line);
 background:linear-gradient(180deg,var(--a-soft),rgba(255,255,255,.012))}
.linkbox .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.linkbox input{flex:1 1 240px;min-width:0;padding:14px 18px;border-radius:999px;
 border:1px solid var(--rule-2);background:rgba(0,0,0,.3);color:var(--tx);
 font-family:var(--mono);font-size:14px}
.linkbox input:focus{border-color:var(--a);outline:none}

.mini-tbl{width:100%;border-collapse:collapse}
.mini-tbl th{text-align:left;padding:11px 16px;font-family:var(--mono);font-size:10.5px;
 font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);
 border-bottom:1px solid var(--rule);background:rgba(255,255,255,.03)}
.mini-tbl td{padding:13px 16px;border-bottom:1px solid var(--rule);font-size:15px}
.mini-tbl tr:last-child td{border-bottom:0}
.mini-tbl .cut{text-align:right;font-family:var(--mono);font-weight:700;color:var(--a-hi);
 font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl-wrap{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.tbl-scroll{overflow-x:auto}

.dl-list{display:grid;gap:9px}
.dl{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:12px;
 border:1px solid var(--rule);background:rgba(255,255,255,.03);transition:border-color .18s}
.dl:hover{border-color:var(--a-line)}
.dl .ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
 background:var(--a-soft);border:1px solid var(--a-line);color:var(--a);font-size:15px}
.dl .t{flex:1;min-width:0}
.dl .t b{display:block;font-size:15px;color:var(--tx)}
.dl .t span{font-size:13px;color:var(--tx-3)}

/* --------------------------------------------------------------------------
   12. FOOTER + TOAST
   -------------------------------------------------------------------------- */
footer{background:#050807;padding:26px 0;border-top:1px solid var(--rule);text-align:center}
footer p{font-size:13px;color:var(--tx-3);margin:0}
footer a{color:var(--tx-2)}
/* Held back to about half strength: the footer logo is a sign-off, not a
   second attempt at the top of the page. */
footer .brandlock,footer .brandmark{margin:0 auto 16px;opacity:.55}
.legal-note{background:#050807;padding:30px 0;border-top:1px solid var(--rule)}
.legal-note p{font-size:12.5px;line-height:1.65;color:var(--tx-3);max-width:900px;margin:0 auto}

#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,260%);z-index:200;
 opacity:0;pointer-events:none;visibility:hidden;
 padding:12px 24px;border-radius:999px;background:var(--a);color:#04120b;
 font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
 box-shadow:0 14px 40px -12px var(--a-glow);
 transition:transform .28s cubic-bezier(.2,.8,.3,1),opacity .22s ease,visibility 0s linear .28s}
#toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition-delay:0s}