/* ============================================================
   IRONCLAD — Shared site stylesheet
   Brand: dark institutional / "Bloomberg-terminal" palette.
   Used by every page in the redesign (home, platform, pricing,
   consulting, podcast, vault). Edit design tokens here once.
   Created 2026-06-09.
   ============================================================ */

:root{
  --bg:#070b14;
  --bg2:#0b1120;
  --panel:#0f1726;
  --panel2:#131d31;
  --border:#1d2940;
  --text:#e8eef8;
  --muted:#8c9bb8;
  --faint:#5d6b87;
  --gold:#c9a24b;
  --gold-soft:#d8b96f;
  --risk:#c2554d;
  --green:#4e9a6b;
  --grid:#0e1626;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:'Playfair Display',Georgia,serif;font-weight:600;line-height:1.15;letter-spacing:-.01em}
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:18px;display:block;
}
.mono{font-family:'JetBrains Mono',monospace}
a{color:inherit;text-decoration:none}
.btn{
  display:inline-block;padding:14px 26px;border-radius:4px;
  font-size:14px;font-weight:600;letter-spacing:.03em;cursor:pointer;
  transition:.2s;border:1px solid transparent;font-family:'Inter',sans-serif;
}
.btn-gold{background:var(--gold);color:#0a0e16;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-soft)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* NAV */
nav{
  position:sticky;top:0;z-index:50;
  background:rgba(7,11,20,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Playfair Display',serif;font-size:21px;font-weight:700;letter-spacing:.02em}
.logo .mark{width:30px;height:30px;border:1.5px solid var(--gold);border-radius:3px;display:grid;place-items:center;color:var(--gold);font-size:15px}
.logo-img{height:34px;width:auto;display:block}
footer .logo-img{height:40px}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14px;color:var(--muted);font-weight:500}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:16px}

/* mobile menu (hamburger + slide-down panel) — hidden on desktop */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:none;border:0;cursor:pointer;padding:9px}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{display:none;border-top:1px solid var(--border);background:rgba(7,11,20,.98);backdrop-filter:blur(10px);padding:10px 0 16px}
.nav-mobile a{display:block;padding:12px 32px;color:var(--muted);font-size:15.5px;font-weight:500}
.nav-mobile a:hover{color:var(--text);background:var(--panel)}
.nav-mobile-label{display:block;margin-top:8px;padding:16px 32px 6px;border-top:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.nav-mobile-group{padding-bottom:8px;border-bottom:1px solid var(--border);margin-bottom:8px}
.nav-mobile-group a{padding-left:44px;font-size:14.5px}

/* dropdown (The Vault) */
.has-drop{position:relative}
.drop{
  position:absolute;top:130%;left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
  padding:8px;min-width:200px;opacity:0;visibility:hidden;transition:.18s;
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
}
.has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop a{display:block;padding:9px 12px;border-radius:5px;color:var(--muted);font-size:13.5px}
.drop a:hover{background:var(--panel2);color:var(--text)}

/* HERO (home) */
.hero{
  position:relative;padding:96px 0 80px;overflow:hidden;
  background:
    radial-gradient(1100px 500px at 75% -10%, rgba(201,162,75,.10), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;opacity:.5;mask-image:radial-gradient(900px 500px at 70% 30%,#000,transparent 75%);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:54px;margin-bottom:22px}
.hero h1 .accent{color:var(--gold)}
.hero p.sub{font-size:18px;color:var(--muted);max-width:560px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-meta{margin-top:34px;display:flex;gap:28px;font-size:13px;color:var(--faint);flex-wrap:wrap}
.hero-meta b{color:var(--text);font-weight:600}

/* PAGE HERO (inner pages — centered, no screenshot) */
.page-hero{
  position:relative;padding:84px 0 64px;overflow:hidden;text-align:center;
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(201,162,75,.10), transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
}
.page-hero::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:48px 48px;opacity:.45;mask-image:radial-gradient(700px 420px at 50% 20%,#000,transparent 75%);
}
.page-hero .inner{position:relative;max-width:760px;margin:0 auto}
.page-hero h1{font-size:46px;margin-bottom:18px}
.page-hero h1 .accent{color:var(--gold)}
.page-hero p.sub{font-size:18px;color:var(--muted);max-width:620px;margin:0 auto 30px}
.page-hero .hero-cta{justify-content:center}

/* screenshot frame */
.shot{
  border:1px solid var(--border);border-radius:8px;background:var(--panel);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);overflow:hidden;
}
.shot .bar{height:34px;background:var(--panel2);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;padding:0 13px}
.shot .bar span{width:10px;height:10px;border-radius:50%;background:#2a3a57}
.shot .body{display:block;background:#0a0f1a}
.shot .body img{display:block;width:100%;height:auto}

/* SECTION shell */
section{padding:88px 0;border-top:1px solid var(--border)}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head h2{font-size:36px;margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:17px}
.center{text-align:center;margin-left:auto;margin-right:auto}

/* cards */
.cards{display:grid;gap:18px}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--border);border-radius:8px;padding:26px;
  transition:.2s;
}
.card:hover{border-color:#2c3c5c;transform:translateY(-2px)}
.card .ico{width:38px;height:38px;border:1px solid var(--gold);border-radius:5px;display:grid;place-items:center;color:var(--gold);margin-bottom:16px;font-size:17px}
.card h3{font-family:'Inter',sans-serif;font-weight:600;font-size:17px;margin-bottom:8px;letter-spacing:0}
.card p{color:var(--muted);font-size:14.5px}
.card .num{font-family:'JetBrains Mono',monospace;color:var(--faint);font-size:12px;margin-bottom:14px;letter-spacing:.1em}

/* feature row (alternating screenshot + copy) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:84px}
.feature:last-child{margin-bottom:0}
.feature.flip .copy{order:2}
.feature.flip .visual{order:1}
.feature .copy h3{font-size:28px;margin-bottom:14px}
.feature .copy p{color:var(--muted);font-size:16px;margin-bottom:18px}
.feature .copy ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.feature .copy li{padding-left:22px;position:relative;color:var(--muted);font-size:15px}
.feature .copy li::before{content:"▸";position:absolute;left:0;color:var(--gold)}

/* problem list (risk) */
.risk-list{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px}
.risk{background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--risk);border-radius:6px;padding:18px 16px}
.risk h3{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--risk);letter-spacing:.1em;margin-bottom:9px;font-weight:500;text-transform:uppercase}
.risk p{font-size:14px;color:var(--muted)}

/* proof strip */
.proof{background:var(--bg2)}
.proof-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.proof-grid .stat{padding:8px}
.proof-grid .big{font-family:'Playfair Display',serif;font-size:40px;color:var(--gold);line-height:1}
.proof-grid .lbl{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);letter-spacing:.12em;margin-top:12px;text-transform:uppercase}
.badges{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.badge{border:1px solid var(--border);border-radius:30px;padding:9px 20px;font-size:13px;color:var(--muted);font-family:'JetBrains Mono',monospace;letter-spacing:.05em}
.badge:hover{border-color:var(--gold);color:var(--gold)}

/* walkthrough */
.walk{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start}
.walk-steps{display:flex;flex-direction:column;gap:4px}
.walk-step{padding:14px 16px;border-left:2px solid var(--border);color:var(--muted);font-size:15px;cursor:pointer}
.walk-step:hover{color:var(--text)}
.walk-step.active{border-left-color:var(--gold);color:var(--text);background:linear-gradient(90deg,rgba(201,162,75,.08),transparent)}
.walk-step .mono{display:block;font-size:11px;color:var(--faint);margin-bottom:3px}

/* band (consulting CTA) */
.band{background:linear-gradient(120deg,#0d1830,#0a0f1c);border:1px solid var(--border);border-radius:10px;padding:48px;display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.band h2{font-size:30px;margin-bottom:12px}
.band p{color:var(--muted);font-size:16px}
.band .right{text-align:right}

/* vault grid */
.vault-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.vault-item{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:22px 18px;text-align:center;transition:.2s}
.vault-item:hover{border-color:var(--gold);color:var(--gold)}
.vault-item .vi{font-size:22px;margin-bottom:12px;color:var(--gold)}
.vault-item h3{font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;letter-spacing:0}
.vault-item p{font-size:12.5px;color:var(--faint);margin-top:5px}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--border);border-radius:10px;padding:32px 28px;display:flex;flex-direction:column}
.plan.feat{border-color:var(--gold);box-shadow:0 30px 70px -40px rgba(201,162,75,.5)}
.plan .pname{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.plan .price{font-family:'Playfair Display',serif;font-size:44px;margin:14px 0 2px}
.plan .price small{font-size:15px;color:var(--faint);font-family:'Inter',sans-serif}
.plan .pdesc{color:var(--muted);font-size:14px;margin-bottom:22px;min-height:40px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.plan li{padding-left:24px;position:relative;color:var(--muted);font-size:14px}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.plan li.off{color:var(--faint)}
.plan li.off::before{content:"–";color:var(--faint)}
.plan .btn{text-align:center}
.ribbon{display:inline-block;background:rgba(201,162,75,.12);color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;padding:4px 10px;border-radius:4px;border:1px solid rgba(201,162,75,.3);margin-bottom:14px;align-self:flex-start}

/* episode list (podcast) */
.ep-list{display:flex;flex-direction:column;gap:12px}
.ep{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:18px 22px;transition:.2s}
.ep:hover{border-color:#2c3c5c;transform:translateY(-1px)}
.ep .epnum{font-family:'JetBrains Mono',monospace;font-size:20px;color:var(--gold);text-align:center}
.ep .eptitle{font-weight:600;font-size:16px;margin-bottom:4px}
.ep .epmeta{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--faint)}
.ep .epdesc{color:var(--muted);font-size:13.5px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep-loading{color:var(--faint);font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.1em;text-align:center;padding:40px}

/* FAQ */
.faq{display:flex;flex-direction:column;gap:0;max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border);padding:20px 4px}
.faq summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);font-size:15px;margin-top:12px;max-width:720px}

/* final cta */
.final{text-align:center;background:
   radial-gradient(700px 300px at 50% 0%,rgba(201,162,75,.10),transparent 70%),var(--bg)}
.final h2{font-size:42px;margin-bottom:14px}
.final p{color:var(--muted);font-size:18px;margin-bottom:30px}
.final .hero-cta{justify-content:center}

/* footer */
footer{border-top:1px solid var(--border);background:var(--bg2);padding:54px 0 36px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer h4{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.15em;color:var(--faint);text-transform:uppercase;margin-bottom:16px}
footer a{display:block;color:var(--muted);font-size:14px;margin-bottom:9px}
footer a:hover{color:var(--text)}
.foot-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;color:var(--faint);font-size:13px;font-family:'JetBrains Mono',monospace;gap:16px;flex-wrap:wrap}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;margin:0;transition:.2s}
.foot-social a:hover{border-color:var(--gold);color:var(--gold)}

.tag{display:inline-block;background:rgba(201,162,75,.12);color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;padding:5px 12px;border-radius:4px;border:1px solid rgba(201,162,75,.3)}

/* ---- responsive ---- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero h1{font-size:40px}
  .page-hero h1{font-size:36px}
  .c4,.c3{grid-template-columns:repeat(2,1fr)}
  .risk-list{grid-template-columns:repeat(2,1fr)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .vault-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr}
  .feature{grid-template-columns:1fr;gap:28px}
  .feature.flip .copy{order:1}
  .feature.flip .visual{order:2}
  .walk{grid-template-columns:1fr}
  .band{grid-template-columns:1fr;text-align:left}
  .band .right{text-align:left}
  .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .nav-mobile:not([hidden]){display:block}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .c4,.c3,.c2,.risk-list,.proof-grid,.vault-grid,.foot-grid{grid-template-columns:1fr}
  .hero h1{font-size:32px}
  .ep{grid-template-columns:48px 1fr;gap:12px}
  .ep .epright{display:none}
}

/* ---- Gumroad overlay button ----
   We keep Gumroad's `.gumroad-button` class because that class is what triggers
   the overlay checkout. But Gumroad's bundle (a) injects its own button styling
   and (b) appends a full "gumroad" wordmark (`.logo-full`, ~7.14em wide) inside
   the button — both clash with the dark institutional brand.
   UPDATED (2026-06-19): reclaim the button to our gold .btn look and drop the
   wordmark. !important is required because Gumroad injects its stylesheet at
   runtime, AFTER site.css, so it otherwise wins the cascade.
   To keep a small Gumroad logo instead of removing it (trust signal), swap the
   `.logo-full` rule's `display:none` for `width:4em!important`. */
a.gumroad-button{
  background-color:var(--gold)!important;color:#0a0e16!important;
  border:1px solid var(--gold)!important;border-radius:4px!important;
  padding:14px 26px!important;font-family:'Inter',sans-serif!important;
  font-size:14px!important;font-weight:600!important;letter-spacing:.03em!important;
  line-height:1!important;box-shadow:none!important;
}
a.gumroad-button:hover{
  background-color:var(--gold-soft)!important;color:#0a0e16!important;
  transform:none!important;box-shadow:none!important; /* kill Gumroad's "press" shift */
}
.gumroad-button .logo-full{display:none!important;} /* hide Gumroad wordmark */

/* ---- Toolkit value-ladder: every card wears a price tag (FREE or $NN) ----
   Uniformity = quality: each card is a flex column and the CTA group (price tag
   + button) is pinned to the bottom with margin-top:auto, so every tag and every
   button lines up across the row no matter how long each description runs.
   Buttons stretch to one uniform full width. The price lives on the button
   label itself (e.g. "Get it — $17"), so no separate price-tag chip is needed;
   the label font is bumped up so the price reads clearly. */
.card.tool{display:flex;flex-direction:column}
.tool-cta{margin-top:auto;padding-top:22px;display:flex;flex-direction:column;align-items:stretch}
/* All three CTAs must be pixel-identical. The Gumroad button is the source of
   truth (its override pins line-height:1 + padding); match the plain .btn free
   buttons to the SAME geometry so the free buttons aren't taller. Keep the two
   font-size values in lockstep if you change them. */
.tool-cta .btn{width:100%;text-align:center;font-size:24px;line-height:1;padding:14px 26px}
.tool-cta .gumroad-button{width:100%!important;font-size:24px!important;line-height:1!important;padding:14px 26px!important}