/* ============================================================
   FRAMEWORK FORGE — R04 FUSION DESIGN SYSTEM
   Base: R03 "Systems House" identity (dark, gold, editorial)
   Donor: Satoshi typeface (from purchased Webflow template)
   Upgrade: refined type + scroll motion + elevated surfaces
   ============================================================ */

/* ---------- Satoshi (self-hosted, from template) ---------- */
@font-face{font-family:Satoshi;font-weight:300;font-style:normal;font-display:swap;src:url("fonts/Satoshi-Light.woff") format("woff")}
@font-face{font-family:Satoshi;font-weight:400;font-style:normal;font-display:swap;src:url("fonts/Satoshi-Regular.woff") format("woff")}
@font-face{font-family:Satoshi;font-weight:500;font-style:normal;font-display:swap;src:url("fonts/Satoshi-Medium.woff") format("woff")}
@font-face{font-family:Satoshi;font-weight:700;font-style:normal;font-display:swap;src:url("fonts/Satoshi-Bold.woff") format("woff")}
@font-face{font-family:Satoshi;font-weight:900;font-style:normal;font-display:swap;src:url("fonts/Satoshi-Black.woff") format("woff")}

:root{
  --ink:#07080a;
  --charcoal:#101216;
  --panel:#151820;
  --panel-soft:rgba(255,255,255,.045);
  --paper:#f7f1e6;
  --paper-dim:rgba(247,241,230,.74);
  --muted:#a8a59e;
  --line:rgba(255,255,255,.11);
  --line-strong:rgba(242,196,109,.36);
  --gold:#f2c46d;
  --gold-bright:#ffe1a0;
  --gold-soft:rgba(242,196,109,.16);
  --ember:#ff7a32;
  --platinum:#b7c2cf;
  --green:#f2c46d;
  --max:1180px;
  --radius:14px;
  --radius-sm:10px;
  --nav:78px;
  --shadow:0 24px 80px rgba(0,0,0,.5);
  --shadow-card:0 18px 50px rgba(0,0,0,.36);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --display:Satoshi,ui-sans-serif,system-ui,-apple-system,sans-serif;
  --body:Satoshi,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;min-height:100vh;color:var(--paper);
  background:
    radial-gradient(circle at 16% 6%,rgba(183,194,207,.08),transparent 26rem),
    radial-gradient(circle at 82% 12%,rgba(242,196,109,.16),transparent 28rem),
    linear-gradient(160deg,#07080a 0%,#11141b 48%,#07080a 100%);
  font-family:var(--body);
  font-weight:400;
  line-height:1.6;
  letter-spacing:.002em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* grain + grid atmosphere (kept from R03, refined) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(120deg,transparent 0 28%,rgba(242,196,109,.04) 29%,transparent 31% 100%),
    radial-gradient(circle at 50% 112%,rgba(255,122,50,.1),transparent 36rem);
}

img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea,select{font:inherit}

.shell{width:min(100% - 32px,var(--max));margin:0 auto}

.skip-link{
  position:fixed;left:12px;top:12px;z-index:40;transform:translateY(-140%);
  background:var(--paper);color:var(--ink);padding:10px 14px;border-radius:8px;
  font-weight:700;text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}

/* ---------------- NAV ---------------- */
.topbar{
  position:sticky;top:0;z-index:20;height:var(--nav);
  border-bottom:1px solid transparent;
  background:rgba(7,8,10,.55);
  backdrop-filter:blur(18px);
  transition:background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.topbar.scrolled{
  background:rgba(7,8,10,.86);
  border-bottom-color:var(--line);
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.nav{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:12px;min-width:0;text-decoration:none}
.brand img{
  width:44px;height:44px;border-radius:10px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.045);padding:4px;
  box-shadow:0 0 24px rgba(242,196,109,.12);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.brand:hover img{transform:rotate(-4deg) scale(1.05);box-shadow:0 0 30px rgba(242,196,109,.3)}
.brand strong,.brand span{display:block}
.brand strong{font-family:var(--display);font-weight:900;font-size:.96rem;line-height:1;letter-spacing:.06em;text-transform:uppercase}
.brand span{margin-top:5px;color:var(--muted);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700}

.nav-links{display:flex;gap:4px;align-items:center;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);padding:5px}
.nav-links a{
  text-decoration:none;color:var(--muted);padding:9px 14px;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:color .2s var(--ease),background .2s var(--ease);
}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current="page"]{color:var(--ink);background:linear-gradient(135deg,var(--gold),var(--gold-bright));outline:none}

/* ---------------- BUTTONS ---------------- */
.nav-cta,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:13px 22px;border-radius:999px;
  border:1px solid var(--line-strong);text-decoration:none;
  font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
}
.nav-cta,.button.primary{
  color:var(--ink);
  background:linear-gradient(135deg,var(--gold),var(--gold-bright));
  box-shadow:0 15px 42px rgba(242,196,109,.18);
}
/* sheen sweep on hover */
.nav-cta::after,.button.primary::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease-out);
}
.nav-cta:hover::after,.button.primary:hover::after{transform:translateX(120%)}
.button.secondary{color:var(--paper);background:rgba(255,255,255,.045);border-color:var(--line)}
.button.secondary:hover{background:rgba(255,255,255,.09);border-color:var(--line-strong)}
.button:hover,.button:focus-visible,.nav-cta:hover,.nav-cta:focus-visible{transform:translateY(-2px);outline:none}
.button.primary:hover,.nav-cta:hover{box-shadow:0 20px 54px rgba(242,196,109,.3)}

/* ---------------- KICKER ---------------- */
.kicker{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;
  color:var(--gold);font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.kicker::before{content:"";width:38px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}

/* ---------------- TYPOGRAPHY ---------------- */
h1,h2,h3,.serif{font-family:var(--display)}
h1{margin:0;font-weight:900;font-size:clamp(3rem,6.4vw,6.6rem);line-height:.92;letter-spacing:-.025em;text-wrap:balance}
h2{margin:0;font-weight:900;font-size:clamp(2.1rem,4.6vw,4.4rem);line-height:.96;letter-spacing:-.02em;text-wrap:balance}
h3{margin:0;font-weight:700;font-size:1.4rem;line-height:1.1;letter-spacing:-.01em}
p{margin:0}
.lead{margin-top:24px;max-width:720px;color:var(--paper-dim);font-size:clamp(1.04rem,1.6vw,1.3rem);font-weight:400;line-height:1.6}
.accent{color:var(--gold);text-shadow:0 0 28px rgba(242,196,109,.24)}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* ---------------- HERO ---------------- */
.hero{
  min-height:calc(100vh - var(--nav));
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(340px,.96fr);
  gap:clamp(34px,5vw,76px);align-items:center;
  padding:clamp(54px,8vw,96px) 0 78px;position:relative;
}
.hero::before{
  content:"";position:absolute;width:min(58vw,660px);aspect-ratio:1;left:-14%;top:16%;
  background:url("brand/framework-forge-seal.png") center/contain no-repeat;
  opacity:.07;pointer-events:none;animation:slow-spin 90s linear infinite;
}
.hero-copy,.hero-visual{position:relative;z-index:1}

/* ---------------- INSTITUTION / GATE CARD ---------------- */
.institution-card{
  border:1px solid var(--line);border-radius:var(--radius);
  background:
    radial-gradient(circle at 70% 10%,rgba(242,196,109,.12),transparent 18rem),
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025)),
    rgba(16,18,22,.92);
  box-shadow:var(--shadow);overflow:hidden;position:relative;
}
.gate-card{min-height:620px;display:grid;align-content:space-between}
.gate-card::before{
  content:"";position:absolute;inset:-1px;
  background:conic-gradient(from 80deg,transparent,rgba(129,216,255,.12),transparent,rgba(242,196,109,.2),transparent);
  opacity:.62;animation:slow-spin 22s linear infinite;z-index:-2;
}
.gate-card::after{
  content:"";position:absolute;inset:1px;border-radius:calc(var(--radius) - 1px);
  background:
    radial-gradient(circle at 50% 4%,rgba(242,196,109,.17),transparent 20rem),
    linear-gradient(180deg,#151820,#090a0d 68%);
  z-index:-1;
}
.gate-head,.gate-body,.gate-foot{position:relative;z-index:1}
.gate-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.status-dot{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.status-dot::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 22px var(--green);animation:pulse 2.4s var(--ease) infinite}
.gate-body{padding:36px 28px;text-align:center}
.gate-body img{width:min(76%,380px);margin:0 auto;filter:drop-shadow(0 24px 60px rgba(242,196,109,.24));animation:float 7s ease-in-out infinite}
.gate-foot{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.gate-stat{min-height:100px;padding:18px;border-right:1px solid var(--line)}
.gate-stat:last-child{border-right:0}
.gate-stat strong{display:block;font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.gate-stat span{display:block;margin-top:8px;color:var(--muted);font-size:.9rem}

/* ---------------- SECTIONS ---------------- */
section{padding:clamp(72px,9vw,108px) 0;border-top:1px solid var(--line)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:38px}
.section-head h2{max-width:14ch}
.section-head p{max-width:520px;color:var(--muted);font-size:1.02rem}

.room-grid,.trust-grid,.product-grid,.library-grid,.contact-grid{display:grid;gap:16px}
.room-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.trust-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.contact-grid{grid-template-columns:.9fr 1.1fr}

/* ---------------- SURFACES / CARDS ---------------- */
.panel,.room,.trust-item,.tool-card,.sample-card,.article-card,.manual-row,.diagnostic{
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)),rgba(16,18,22,.78);
  position:relative;
}
.room,.trust-item,.tool-card,.sample-card,.article-card,.manual-row{padding:22px}

/* interactive lift for content cards */
.trust-item,.tool-card,.sample-card,.article-card,.room{
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.trust-item:hover,.tool-card:hover,.sample-card:hover,.article-card:hover,.room:hover{
  transform:translateY(-5px);border-color:var(--line-strong);box-shadow:var(--shadow-card);
}

.room span,.trust-item span,.tool-card span,.article-card span,.sample-card span,.manual-row span{
  display:inline-block;margin-bottom:16px;color:var(--gold);
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.room p,.trust-item p,.tool-card p,.article-card p,.sample-card p,.manual-row p{margin-top:12px;color:var(--muted)}

.trust-wall{background:radial-gradient(circle at 100% 0%,rgba(242,196,109,.13),transparent 28rem),rgba(255,255,255,.025)}
.trust-item{min-height:170px}
.trust-item strong{display:block;font-size:1.05rem}

.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:16px;align-items:stretch}
.standard-panel{padding:clamp(24px,4vw,44px);min-height:510px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.standard-panel::before{content:"";position:absolute;width:460px;aspect-ratio:1;left:-140px;top:-120px;border-radius:50%;border:1px solid rgba(242,196,109,.2);box-shadow:inset 0 0 80px rgba(242,196,109,.06),0 0 90px rgba(129,216,255,.08)}
.standard-panel>*{position:relative;z-index:1}
.standard-list{list-style:none;display:grid;gap:12px;margin:0;padding:16px}
.standard-list li{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;background:rgba(7,8,10,.34);color:var(--paper-dim);transition:border-color .3s var(--ease),background .3s var(--ease)}
.standard-list li:hover{border-color:var(--line-strong);background:rgba(7,8,10,.5)}

/* ---------------- TOOL / PRODUCT CARDS ---------------- */
.tool-card{min-height:440px;display:flex;flex-direction:column;overflow:hidden}
.tool-card::before{content:attr(data-number);position:absolute;right:18px;top:14px;font-family:var(--display);color:rgba(255,255,255,.06);font-size:5rem;font-weight:900;line-height:1;transition:color .35s var(--ease)}
.tool-card:hover::before{color:rgba(242,196,109,.12)}
.tool-card h3{margin-top:28px;max-width:300px}
.tool-list{list-style:none;display:grid;gap:10px;margin:22px 0 0;padding:0;color:var(--paper-dim)}
.tool-list li{display:grid;grid-template-columns:14px 1fr;gap:10px}
.tool-list li::before{content:"";width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--gold);box-shadow:0 0 18px rgba(242,196,109,.4)}
.card-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;padding-top:24px}
.mini-link{display:inline-flex;align-items:center;gap:6px;color:var(--gold);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:gap .25s var(--ease)}
.mini-link::after{content:"\2192";transition:transform .25s var(--ease)}
.mini-link:hover{gap:10px}
.mini-link:hover::after{transform:translateX(3px)}

/* ---------------- SAMPLE VAULT ---------------- */
.sample-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
.sample-card{min-height:210px}
.sample-stack{display:grid;gap:16px}
.preview-document{padding:24px;background:linear-gradient(180deg,#f3ece0,#e7ddcc);color:#131313;border-radius:var(--radius);min-height:430px;box-shadow:0 24px 70px rgba(0,0,0,.42);position:relative;overflow:hidden}
.preview-document::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--gold),var(--ember))}
.preview-document .doc-label{color:#8e6521;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.preview-document h3{margin:20px 0 14px;font-size:clamp(2rem,4vw,3.4rem);font-weight:900;letter-spacing:-.02em}
.preview-document p,.preview-document li{color:#3b372f}
.preview-document ol{display:grid;gap:12px;margin:24px 0 0;padding-left:22px}

/* ---------------- DIAGNOSTIC ---------------- */
.diagnostic{padding:24px}
.diagnostic form{display:grid;gap:14px}
.diagnostic fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;margin:0}
.diagnostic legend{color:var(--gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;padding:0 8px}
.diagnostic label{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;color:var(--paper-dim);padding:9px 0;cursor:pointer;transition:color .2s var(--ease)}
.diagnostic label:hover{color:var(--paper)}
.diagnostic input[type=radio]{accent-color:var(--gold);margin-top:.25em}
.result-box{margin-top:18px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:18px;background:rgba(242,196,109,.075);transition:background .3s var(--ease)}
.result-box strong{display:block;color:var(--gold);margin-bottom:8px;font-family:var(--display);font-weight:700}

/* ---------------- PAGE HERO ---------------- */
.page-hero{padding:clamp(80px,10vw,110px) 0 clamp(40px,5vw,60px)}
.page-hero h1{max-width:980px}
.page-hero .lead{max-width:760px}

.contact-grid .standard-panel h2{font-size:clamp(1.8rem,3.4vw,3.2rem);overflow-wrap:anywhere}

/* ---------------- MANUAL ---------------- */
.manual{display:grid;gap:12px}
.manual-row{display:grid;grid-template-columns:260px 1fr;gap:24px;transition:border-color .3s var(--ease),background .3s var(--ease)}
.manual-row:hover{border-color:var(--line-strong)}

/* ---------------- PRODUCT DETAIL ---------------- */
.product-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);gap:18px;align-items:start}
.detail-panel{padding:clamp(24px,4vw,42px)}
.product-aside{position:sticky;top:calc(var(--nav) + 20px);padding:18px}
.product-aside img{border-radius:var(--radius-sm);border:1px solid var(--line);background:#090a0d}
.meta-list{display:grid;gap:8px;margin-top:18px}
.meta-list div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:10px;color:var(--muted)}
.meta-list strong{color:var(--paper)}

/* ---------------- FOOTER ---------------- */
.footer{border-top:1px solid var(--line);padding:36px 0 44px;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap}
.footer-links{display:flex;flex-wrap:wrap;gap:16px}
.footer a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease)}
.footer a:hover,.footer a:focus-visible{color:var(--gold);outline:none}

/* ============================================================
   SCROLL REVEAL (progressive enhancement; JS adds .reveal-in)
   ============================================================ */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform}
.js [data-reveal].reveal-in{opacity:1;transform:none}

/* ---------------- KEYFRAMES ---------------- */
@keyframes slow-spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1000px){
  .nav-links{display:none}
  .hero,.split,.sample-grid,.contact-grid,.product-detail{grid-template-columns:1fr}
  .room-grid,.trust-grid,.product-grid,.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-aside{position:static}
}
@media (max-width:680px){
  :root{--nav:70px}
  .shell{width:min(100% - 22px,var(--max))}
  .brand img{width:38px;height:38px}
  .brand span{display:none}
  .nav-cta{min-height:42px;padding:10px 14px;font-size:.66rem}
  h1{font-size:clamp(2.9rem,14vw,4.6rem)}
  .room-grid,.trust-grid,.product-grid,.library-grid,.gate-foot{grid-template-columns:1fr}
  .gate-stat{border-right:0;border-bottom:1px solid var(--line)}
  .gate-stat:last-child{border-bottom:0}
  .section-head{display:grid}
  .manual-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1 !important;transform:none !important}
}
/* ============================================================
   FRAMEWORK FORGE — R06 FORGE CINEMATIC
   Appends to site.css. Adds the cinematic visual escalation:
   atmospheric backdrops, glass-gold cards, per-product ember
   colors, the Product Stages, the System Map showstopper.
   Mobile portrait + desktop landscape both verified.
   ============================================================ */

/* -------- Per-product ember palette (each system wears its color) -- */
:root{
  --ember-gold:#f2c46d;
  --ember-gold-deep:#ffb347;
  --ember-green:#6dffa4;
  --ember-cyan:#69efff;
  --ember-purple:#a46bff;
}

/* -------- ATMOSPHERIC SECTION — full-bleed cinematic backdrop ------- */
.atmosphere{
  position:relative; isolation:isolate;
  overflow:hidden;
  padding:clamp(60px,8vw,140px) 0;
}
.atmosphere::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--bg-image);
  background-size:cover; background-position:center;
  opacity:.28;
  filter:saturate(1.08) contrast(1.04);
}
.atmosphere::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(7,8,10,.65) 0%, rgba(7,8,10,.35) 28%, rgba(7,8,10,.35) 72%, rgba(7,8,10,.85) 100%),
    radial-gradient(circle at 50% 100%, rgba(242,196,109,.06), transparent 60%);
}
@media (max-width:780px){
  /* Mobile portrait — tighten focus on the anvil, drop opacity heavier */
  .atmosphere::before{
    background-position:65% center; background-size:cover;
    opacity:.18;
  }
}

/* -------- GLASS-GOLD CARD — replaces flat panels everywhere -------- */
.glass-card{
  position:relative; padding:clamp(22px,3vw,32px);
  background:
    linear-gradient(155deg, rgba(255,255,255,.038) 0%, rgba(255,255,255,.018) 60%, rgba(242,196,109,.04) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  box-shadow:
    0 24px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(242,196,109,.06);
  -webkit-backdrop-filter:blur(14px) saturate(1.05); backdrop-filter:blur(14px) saturate(1.05);
  transition:border-color .3s var(--ease), transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.glass-card::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:var(--radius);
  padding:1px;
  background:linear-gradient(160deg, rgba(242,196,109,.45) 0%, rgba(242,196,109,0) 35%, rgba(242,196,109,0) 65%, rgba(242,196,109,.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.glass-card:hover{ transform:translateY(-3px); box-shadow:0 32px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(242,196,109,.16); }

/* -------- LIVING EMBER — slow pulse on key brand elements --------- */
@keyframes emberPulse{
  0%,100%{ filter:drop-shadow(0 0 8px rgba(242,196,109,.20)) drop-shadow(0 0 22px rgba(255,138,0,.10)); }
  50%   { filter:drop-shadow(0 0 14px rgba(242,196,109,.45)) drop-shadow(0 0 32px rgba(255,138,0,.22)); }
}
.ember-pulse{ animation:emberPulse 4.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .ember-pulse{ animation:none; } }

/* -------- PRODUCT STAGE — the procession layout ------------------- */
.stage{
  display:grid; gap:clamp(28px,4vw,56px);
  align-items:center;
  grid-template-columns:1fr;
  padding:clamp(48px,6vw,80px) 0;
  position:relative;
}
@media (min-width:880px){
  .stage{ grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
  .stage.reverse{ grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); }
  .stage.reverse .stage-cover{ order:2; }
  .stage.reverse .stage-copy{ order:1; }
}
.stage-cover{
  position:relative;
  display:grid; place-items:center;
  padding:clamp(20px,3vw,40px);
  border-radius:var(--radius);
  background:radial-gradient(circle at 50% 30%, rgba(var(--stage-rgb,242 196 109)/.18), transparent 60%);
}
.stage-cover img{
  display:block; width:100%; max-width:380px; height:auto;
  border-radius:var(--radius-sm);
  filter:drop-shadow(0 30px 80px rgba(0,0,0,.55))
         drop-shadow(0 0 40px rgba(var(--stage-rgb,242 196 109)/.22));
  transition:transform .5s var(--ease-out);
}
.stage:hover .stage-cover img{ transform:translateY(-4px) scale(1.015); }
.stage-copy{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.stage-tag{
  display:inline-flex; align-items:center; gap:8px;
  font:800 .68rem/1 var(--display); letter-spacing:.22em; text-transform:uppercase;
  color:rgb(var(--stage-rgb,242 196 109));
  align-self:flex-start;
}
.stage-tag::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:rgb(var(--stage-rgb,242 196 109));
  box-shadow:0 0 14px rgb(var(--stage-rgb,242 196 109));
}
.stage-tag.coming::before{ background:transparent; border:1px solid currentColor; box-shadow:none; }
.stage-title{
  margin:0;
  font:900 clamp(2rem,4vw,3.4rem)/1.02 var(--display);
  letter-spacing:-.015em; color:var(--paper);
}
.stage-title em{ font-style:normal; color:rgb(var(--stage-rgb,242 196 109)); }
.stage-desc{ margin:0; color:var(--paper-dim); font-size:1.05rem; line-height:1.62; max-width:54ch; }
.stage-meta{ display:flex; flex-wrap:wrap; gap:10px 24px; color:var(--muted); font:600 .82rem/1.2 var(--display); letter-spacing:.04em; }
.stage-meta strong{ color:var(--paper); }
.stage-price{
  font:900 clamp(2.2rem,4vw,3rem)/1 var(--display); color:var(--paper);
  letter-spacing:-.02em; margin:6px 0 0;
}
.stage-price small{ display:block; font:700 .65rem/1 var(--display); letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.stage-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.stage-actions .button{ min-width:0; }
.stage-divider{
  height:1px; border:0;
  background:linear-gradient(90deg, transparent, rgba(242,196,109,.18), transparent);
  margin:0 auto; max-width:60%;
}

/* COMING-stage placeholder cover (no image yet) */
.stage-cover.coming{
  min-height:380px;
  border:1px dashed rgba(var(--stage-rgb,242 196 109)/.30);
  display:grid; place-items:center; text-align:center;
}
.stage-cover.coming .coming-mark{
  display:grid; gap:14px; place-items:center;
  color:rgb(var(--stage-rgb,242 196 109));
}
.stage-cover.coming .coming-mark .glyph{
  width:84px; height:84px; border-radius:50%;
  border:1.5px solid currentColor;
  display:grid; place-items:center;
  font:900 1.8rem/1 var(--display);
  box-shadow:0 0 30px rgb(var(--stage-rgb,242 196 109)/.20);
}
.stage-cover.coming .coming-mark .label{
  font:800 .68rem/1.2 var(--display); letter-spacing:.28em; text-transform:uppercase;
}
.stage-cover.coming .coming-mark .sub{
  font:700 1.4rem/1.1 var(--display); letter-spacing:-.01em; color:var(--paper); max-width:18ch;
}

/* -------- NOTIFY-ME inline form (for coming stages) -------------- */
.notify-inline{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  padding:14px; border-radius:999px;
  background:rgba(7,8,10,.6); border:1px solid rgba(255,255,255,.10);
  max-width:520px;
}
.notify-inline input[type=email]{
  flex:1 1 200px; min-width:0;
  padding:10px 14px;
  background:transparent; color:var(--paper);
  border:0; outline:none;
  font:500 .96rem/1.2 var(--body);
}
.notify-inline input[type=email]::placeholder{ color:var(--muted); }
.notify-inline .honeypot{ position:absolute; left:-9999px; width:1px; height:1px; }
.notify-inline button{ white-space:nowrap; padding:10px 18px; }

/* -------- LINEUP HERO — the 5-product Systems House shot --------- */
.lineup-hero{
  margin:32px auto 0;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 40px 110px rgba(0,0,0,.5), inset 0 0 0 1px rgba(242,196,109,.10);
  position:relative;
}
.lineup-hero img{ width:100%; height:auto; display:block; }
.lineup-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 70%, rgba(7,8,10,.6) 100%);
}

/* -------- SYSTEM MAP — the showstopper diagram ------------------- */
.system-map{
  position:relative;
  display:grid; gap:clamp(20px,3vw,40px);
  padding:clamp(40px,6vw,80px) clamp(20px,3vw,40px);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 50% 50%, rgba(242,196,109,.08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(7,8,10,.5));
  border:1px solid rgba(255,255,255,.06);
  overflow:hidden;
}
.system-map::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(242,196,109,.18), transparent 40%);
  filter:blur(40px); opacity:.6;
}
.system-flow{
  display:grid; gap:14px; position:relative;
  grid-template-columns:1fr;
}
@media (min-width:980px){
  .system-flow{ grid-template-columns:repeat(5,1fr); align-items:stretch; }
}
.system-node{
  position:relative;
  padding:22px;
  border-radius:var(--radius-sm);
  background:
    radial-gradient(circle at 50% 0%, rgb(var(--node-rgb,242 196 109)/.18), transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgb(var(--node-rgb,242 196 109)/.30);
  display:grid; gap:10px; align-content:start;
  box-shadow:0 18px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .35s var(--ease-out), border-color .25s var(--ease);
}
.system-node:hover{ transform:translateY(-4px); border-color:rgb(var(--node-rgb,242 196 109)/.65); }
.system-node .step{
  font:800 .65rem/1 var(--display); letter-spacing:.22em; text-transform:uppercase;
  color:rgb(var(--node-rgb,242 196 109));
}
.system-node h4{
  margin:0; font:900 1.1rem/1.1 var(--display); letter-spacing:-.01em; color:var(--paper);
}
.system-node p{ margin:0; color:var(--paper-dim); font-size:.86rem; line-height:1.5; }
.system-node .glyph{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid rgb(var(--node-rgb,242 196 109));
  display:grid; place-items:center;
  color:rgb(var(--node-rgb,242 196 109));
  font:900 1rem/1 var(--display);
  box-shadow:0 0 24px rgb(var(--node-rgb,242 196 109)/.30);
  margin-bottom:4px;
}
/* Flow connectors — horizontal on desktop, vertical on mobile */
@media (min-width:980px){
  .system-flow::before{
    content:""; position:absolute; left:6%; right:6%; top:62px; height:2px;
    background:linear-gradient(90deg, transparent, rgba(242,196,109,.35) 14%, rgba(242,196,109,.35) 86%, transparent);
    z-index:-1;
  }
}
@media (max-width:979px){
  .system-node{ position:relative; }
  .system-node:not(:last-child)::after{
    content:""; position:absolute; left:50%; bottom:-14px; width:2px; height:14px;
    background:linear-gradient(180deg, rgba(242,196,109,.4), rgba(242,196,109,.1));
    transform:translateX(-50%);
  }
}

/* -------- BUTTON SAFETY — never wrap inside narrow grid ---------- */
.button, .nav-cta, .stage-actions a.button{ white-space:nowrap; }

/* -------- CONTACT EMAIL BREAK FIX -------------------------------- */
/* Stop the email address from breaking at character boundaries */
.standard-panel h2,
.contact-grid h2,
.mail{
  overflow-wrap:break-word!important;
  word-break:normal!important;
  hyphens:none;
}

/* -------- FIX PRODUCTS CATALOG BUTTONS — never clip the label --- */
.catalog-card .button{
  white-space:normal;
  font-size:.66rem;
  letter-spacing:.12em;
  padding:13px 14px;
}

/* -------- HOMEPAGE MAP TEASER ------------------------------------ */
.map-teaser{
  display:grid; gap:24px;
  padding:clamp(28px,4vw,56px);
  border-radius:var(--radius);
  background:
    radial-gradient(circle at 20% 0%, rgba(242,196,109,.16), transparent 50%),
    linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border:1px solid rgba(242,196,109,.22);
  box-shadow:var(--shadow);
  position:relative; overflow:hidden;
}
.map-teaser-row{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-top:6px;
}
.map-teaser-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:rgba(7,8,10,.6); border:1px solid rgba(255,255,255,.10);
  font:700 .72rem/1 var(--display); letter-spacing:.14em; text-transform:uppercase;
  color:var(--paper);
}
.map-teaser-chip .dot{
  width:8px; height:8px; border-radius:50%;
  background:rgb(var(--chip-rgb,242 196 109));
  box-shadow:0 0 12px rgb(var(--chip-rgb,242 196 109));
}
.map-teaser-chip .arrow{ color:var(--muted); margin-left:4px; }

/* -------- HERO LINEUP — homepage seal replacement ---------------- */
.hero-lineup{
  position:relative;
  padding:clamp(20px,3vw,36px);
  border-radius:var(--radius);
  background:radial-gradient(circle at 50% 30%, rgba(242,196,109,.10), transparent 60%);
  display:grid; gap:18px; place-items:center;
}
.hero-lineup img{
  width:100%; height:auto; max-width:560px; display:block;
  border-radius:var(--radius-sm);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.hero-lineup .caption{
  font:800 .7rem/1.2 var(--display); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); text-align:center;
}
.hero-lineup .caption-sub{
  font:600 .78rem/1.4 var(--body); color:var(--paper-dim); text-align:center; max-width:36ch;
}

/* -------- PAGE PADDING — ensure footer never collides with buy-bar ---- */
body.has-buy-bar{ padding-bottom:84px; }
@media (max-width:780px){
  body.has-buy-bar{ padding-bottom:120px; }
}

/* -------- MOBILE NAV FIX — ensure brand wordmark stays visible ---- */
@media (max-width:560px){
  .brand span span{ display:none; }       /* hide "Systems House" tag */
  .brand span strong{ font-size:.95rem; }  /* keep "Framework Forge" */
  .nav-links{ display:none; }              /* hide desktop nav on tiny */
  /* Keep nav-cta + brand visible */
}

/* ────────────────────────────────────────────────────────────────
   R06.1 — Email word-break + seal-rendering bleeding fixes
   ──────────────────────────────────────────────────────────────── */

/* Email-as-heading on contact page — was butchered by the H2 size */
.standard-panel h2,
.contact-grid h2{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:none;
  /* Shrink the size so the email fits on one line at typical widths,
     wraps cleanly at narrow widths instead of mid-character. */
  font-size:clamp(1.2rem, 3vw, 2.1rem)!important;
  line-height:1.18;
  letter-spacing:-.01em;
}

/* Email-as-card-strong on trust page — was overflowing into neighbor */
.trust-item strong,
.tool-list li,
.mail{
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  hyphens:none;
}
.trust-item strong{
  font-size:clamp(.86rem, 1.8vw, 1.05rem);
  line-height:1.32;
}

/* Brand nav icon — tame the SVG glow filter at tiny nav size so it
   doesn't render as a hot square halo. */
.brand img{
  filter:drop-shadow(0 0 6px rgba(242,196,109,.18));
}
/* ════════════════════════════════════════════════════════════════
   FRAMEWORK FORGE — R07 MASTER (appended to site.css)
   Adds: The Forge interactive entry (Move A), Library essay reading
   layout (Move B), Living Forge motion layer (Move C).
   ════════════════════════════════════════════════════════════════ */

/* ═══════════════ MOVE A — THE FORGE ═══════════════ */
.forge-page{ padding:clamp(48px,7vw,90px) 0; }
.forge-shell{ display:grid; gap:clamp(28px,4vw,48px); }

.forge-intro{
  max-width:760px; display:grid; gap:18px;
}
.forge-h1{
  font:900 clamp(2.4rem,5vw,4.4rem)/1.02 var(--display);
  letter-spacing:-.022em; margin:0;
}
.forge-lede{
  font-size:clamp(1.02rem,1.6vw,1.22rem);
  color:var(--paper-dim); line-height:1.6; margin:0; max-width:64ch;
}

/* The card the diagnostic lives in */
.forge-card{
  display:grid; gap:24px;
  padding:clamp(24px,3.5vw,48px);
  max-width:840px;
}
.forge-step{ display:grid; gap:16px; }
.step-number{
  font:800 .68rem/1 var(--display); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.step-q{
  font:900 clamp(1.5rem,2.8vw,2.2rem)/1.18 var(--display);
  letter-spacing:-.012em; color:var(--paper); margin:0;
}
.step-help{
  color:var(--paper-dim); font-size:.96rem; line-height:1.55; margin:0;
}
.step-form{ display:grid; gap:10px; margin-top:8px; }

/* Each option is a luxurious checkbox/radio card */
.forge-option{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .12s var(--ease);
  position:relative;
}
.forge-option:hover{ border-color:var(--line-strong); background:rgba(242,196,109,.04); }
.forge-option:active{ transform:translateY(1px); }
.forge-option input[type=radio]{
  flex:0 0 auto; margin-top:.32em;
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px;
  border:1.5px solid var(--line-strong);
  border-radius:50%;
  background:transparent;
  transition:border-color .2s, box-shadow .2s;
  cursor:pointer;
}
.forge-option input[type=radio]:checked{
  border-color:var(--gold);
  box-shadow:inset 0 0 0 4px var(--gold), 0 0 18px rgba(242,196,109,.35);
}
.forge-option span{
  display:grid; gap:4px; min-width:0;
  font-size:.96rem; line-height:1.45; color:var(--paper-dim);
}
.forge-option span strong{
  color:var(--paper); font:800 1.02rem/1.25 var(--display); letter-spacing:-.005em;
  display:block;
}
.forge-option.selected{
  border-color:var(--gold);
  background:linear-gradient(160deg, rgba(242,196,109,.10), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px var(--gold) inset, 0 18px 50px rgba(0,0,0,.45);
}

/* Bottom nav controls + step dots */
.forge-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:8px;
  border-top:1px solid var(--line); padding-top:18px;
}
.step-dots{ display:flex; gap:10px; }
.dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.10);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.dot.active{
  background:var(--gold);
  box-shadow:0 0 14px rgba(242,196,109,.6);
}
#prevBtn[hidden]{ display:none; }
#nextBtn:disabled{ opacity:.4; cursor:not-allowed; }

/* ─── RESULT REVEAL ─── */
.forge-result{ position:relative; max-width:920px; }
.result-inner{
  position:relative; z-index:1;
  display:grid; gap:24px;
  padding:clamp(28px,4vw,52px);
  animation: resultRise .6s var(--ease-out) both;
}
@keyframes resultRise{
  from{ opacity:0; transform:translateY(20px) scale(.99); }
  to  { opacity:1; transform:translateY(0)   scale(1);    }
}
.result-title{
  font:900 clamp(2.2rem,4.5vw,3.6rem)/1.05 var(--display);
  letter-spacing:-.015em; margin:0;
}
.result-reason{
  margin:0; color:var(--paper-dim); font-size:1.06rem; line-height:1.6; max-width:64ch;
}
.result-system-map{
  display:grid; gap:14px;
  grid-template-columns:1fr;
  padding:24px;
  background:rgba(7,8,10,.5);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
@media(min-width:760px){
  .result-system-map{ grid-template-columns:repeat(5, 1fr); align-items:stretch; position:relative; }
  .result-system-map::before{
    content:""; position:absolute; left:8%; right:8%; top:42px; height:2px;
    background:linear-gradient(90deg, transparent, rgba(242,196,109,.30) 14%, rgba(242,196,109,.30) 86%, transparent);
    z-index:-1;
  }
}
.result-node{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 10px;
  border-radius:var(--radius-sm);
  border:1px solid rgb(var(--node-rgb,242 196 109)/.25);
  background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  text-decoration:none;
  transition:transform .25s var(--ease-out), border-color .25s, box-shadow .3s;
}
.result-node:hover{ transform:translateY(-2px); border-color:rgb(var(--node-rgb,242 196 109)/.6); }
.result-node .node-glyph{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid rgb(var(--node-rgb,242 196 109));
  color:rgb(var(--node-rgb,242 196 109));
  font:900 .9rem/1 var(--display);
}
.result-node .node-label{
  font:800 .68rem/1 var(--display); letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper-dim);
}
/* The HIGHLIGHTED recommended node — the ember of the result */
.result-node.highlighted{
  background:radial-gradient(circle at 50% 30%, rgb(var(--node-rgb,242 196 109)/.30), transparent 70%), rgba(7,8,10,.6);
  border-color:rgb(var(--node-rgb,242 196 109));
  box-shadow:0 0 0 1px rgb(var(--node-rgb,242 196 109)) inset, 0 18px 50px rgba(0,0,0,.5), 0 0 40px rgb(var(--node-rgb,242 196 109)/.45);
  animation: nodePulse 2.6s ease-in-out infinite;
}
.result-node.highlighted .node-glyph{ box-shadow:0 0 22px rgb(var(--node-rgb,242 196 109)/.55); }
.result-node.highlighted .node-label{ color:var(--paper); }
@keyframes nodePulse{
  0%,100%{ box-shadow:0 0 0 1px rgb(var(--node-rgb,242 196 109)) inset, 0 18px 50px rgba(0,0,0,.5), 0 0 40px rgb(var(--node-rgb,242 196 109)/.45); }
  50%   { box-shadow:0 0 0 1px rgb(var(--node-rgb,242 196 109)) inset, 0 18px 50px rgba(0,0,0,.5), 0 0 60px rgb(var(--node-rgb,242 196 109)/.75); }
}
@media (prefers-reduced-motion: reduce){
  .result-node.highlighted{ animation:none; }
  .result-inner{ animation:none; }
}

.result-actions{
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.result-quiet{
  margin:0; color:var(--muted); font-size:.82rem; letter-spacing:.02em;
}

/* ── EMBER FLASH — the signature transition ───────────────── */
.ember-flash{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(255,138,0,0), rgba(7,8,10,0) 60%);
  opacity:0;
  transition:opacity .3s ease;
}
.ember-flash.flashing{
  animation: emberFlash .8s ease-out both;
}
@keyframes emberFlash{
  0%   { opacity:0;
         background:radial-gradient(circle at 50% 50%, rgba(255,138,0,0), rgba(7,8,10,0) 60%); }
  35%  { opacity:1;
         background:radial-gradient(circle at 50% 50%, rgba(255,200,100,.95), rgba(255,138,0,.7) 24%, rgba(7,8,10,.4) 60%); }
  100% { opacity:0;
         background:radial-gradient(circle at 50% 50%, rgba(255,138,0,0), rgba(7,8,10,0) 60%); }
}

/* ═══════════════ MOVE B — LIBRARY ESSAYS ═══════════════ */
.essay-page{
  max-width:760px; margin:0 auto; padding:clamp(60px,8vw,120px) clamp(20px,5vw,40px) 80px;
}
.essay-meta{
  display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center;
  color:var(--muted); font:700 .76rem/1 var(--display);
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:24px;
}
.essay-meta .eyebrow-row{ margin:0; }
.essay-meta .dot-sep{ width:4px; height:4px; border-radius:50%; background:var(--gold); }
.essay-title{
  font:900 clamp(2.4rem,5.2vw,4.4rem)/1 var(--display);
  letter-spacing:-.025em; color:var(--paper); margin:0 0 18px;
}
.essay-deck{
  font:500 clamp(1.1rem,2vw,1.36rem)/1.55 var(--display);
  color:var(--paper-dim); margin:0 0 48px;
  font-style:italic;
  max-width:62ch;
}
.essay-body > *{ max-width:62ch; }
.essay-body h2{
  font:900 clamp(1.6rem,3vw,2.2rem)/1.15 var(--display);
  letter-spacing:-.012em; color:var(--paper);
  margin:56px 0 16px;
}
.essay-body h3{
  font:800 clamp(1.2rem,2.2vw,1.4rem)/1.25 var(--display);
  letter-spacing:-.008em; color:var(--paper);
  margin:40px 0 12px;
}
.essay-body p{
  font-size:1.06rem; line-height:1.78; color:var(--paper-dim); margin:0 0 22px;
}
.essay-body p strong{ color:var(--paper); font-weight:700; }
.essay-body blockquote{
  margin:36px 0; padding:24px 28px;
  background:rgba(242,196,109,.05);
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--paper); font:600 1.15rem/1.55 var(--display);
  letter-spacing:-.005em;
}
.essay-body ul, .essay-body ol{
  font-size:1.04rem; line-height:1.75; color:var(--paper-dim);
  padding-left:24px; margin:0 0 24px;
}
.essay-body li{ margin-bottom:8px; }
.essay-body li strong{ color:var(--paper); }
.essay-divider{
  display:block; width:60px; height:1px; margin:60px 0;
  background:linear-gradient(90deg, var(--gold), transparent);
  border:0;
}
.essay-related{
  margin-top:80px; padding:32px; border-radius:var(--radius);
  border:1px solid var(--line-strong);
  background:radial-gradient(circle at 0% 0%, rgba(242,196,109,.08), transparent 50%), rgba(255,255,255,.02);
}
.essay-related .eyebrow-row{ margin-bottom:10px; }
.essay-related h3{ margin:0 0 6px; font:900 1.4rem/1.2 var(--display); }
.essay-related p{ color:var(--paper-dim); margin:0 0 18px; line-height:1.55; max-width:54ch; }

/* Library card update — each essay gets a real "Read →" link */
.article-card .read-link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:18px; padding:0;
  color:var(--gold); text-decoration:none;
  font:700 .76rem/1 var(--mono,var(--display)); letter-spacing:.16em; text-transform:uppercase;
  border-bottom:1px solid rgba(242,196,109,.4);
  padding-bottom:4px;
}
.article-card .read-link:hover{ color:var(--gold-bright); border-color:var(--gold); }
.article-card[data-status="future"] .read-link{ color:var(--muted); border-color:rgba(255,255,255,.1); }

/* ═══════════════ MOVE C — LIVING FORGE MOTION ═══════════════ */

/* Slow gold shimmer on .accent text — replaces static gold with sub
   tle motion. Eye won't catch it consciously, but the page feels alive. */
@keyframes goldShimmer{
  0%,100%{ filter: drop-shadow(0 0 14px rgba(242,196,109,.18)); }
  50%   { filter: drop-shadow(0 0 22px rgba(242,196,109,.42)); }
}
.accent{ animation: goldShimmer 5.5s ease-in-out infinite; }

/* CTA hover pulse — the primary buttons get a slow ember halo when hovered */
.button.primary, .nav-cta{
  position:relative;
  transition: transform .2s var(--ease), box-shadow .35s var(--ease-out);
}
.button.primary:hover, .nav-cta:hover{
  box-shadow:0 22px 60px rgba(242,196,109,.4), 0 0 26px rgba(255,138,0,.35);
  animation: ctaPulse 1.8s ease-in-out infinite;
}
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 22px 60px rgba(242,196,109,.36), 0 0 22px rgba(255,138,0,.30); }
  50%   { box-shadow:0 26px 70px rgba(242,196,109,.52), 0 0 36px rgba(255,138,0,.48); }
}

/* The signature scroll-driven brightness for system-node and stage-cover —
   they "ignite" as they enter view. Hooks: data-scroll-ignite="" on element.
   Driven by JS (in r07-motion.js). */
[data-scroll-ignite]{
  transition: filter .6s var(--ease-out), transform .6s var(--ease-out);
  filter: brightness(.85) saturate(.9);
}
[data-scroll-ignite].lit{
  filter: brightness(1.05) saturate(1.1);
}

/* prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce){
  .accent, .button.primary:hover, .nav-cta:hover{ animation:none; }
  [data-scroll-ignite]{ transition:none; filter:none; }
}

/* Forge page mobile tweak — drop padding so the card breathes */
@media (max-width:560px){
  .forge-card{ padding:22px 18px; }
  .forge-option{ padding:14px; }
  .forge-option span{ font-size:.92rem; }
  .forge-nav{ flex-wrap:wrap; gap:12px; }
  .forge-nav .step-dots{ order:3; width:100%; justify-content:center; }
}
/* ════════════════════════════════════════════════════════════════
   FRAMEWORK FORGE — R08 MOBILE STRUCTURE PASS
   Appends to site.css. Fixes the catastrophic mobile UX gap from
   R07: no nav, hidden wordmark, content treated as one long landing.
   ════════════════════════════════════════════════════════════════ */

/* ─── RESTORE the brand wordmark on mobile (was hidden by my R06 CSS) ─── */
@media (max-width:560px){
  .brand span span{ display:block!important; }       /* show "Systems House" */
  .brand span strong{ font-size:1rem; }
  /* And the desktop .nav-links stays hidden — replaced by the hamburger */
}

/* ════════════════ HAMBURGER MENU + DRAWER ════════════════ */
.menu-toggle{
  display:none;
  appearance:none; -webkit-appearance:none;
  width:44px; height:44px;
  background:rgba(7,8,10,.55);
  border:1px solid var(--line);
  border-radius:12px;
  padding:0;
  cursor:pointer;
  align-items:center; justify-content:center;
  position:relative;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.menu-toggle:hover, .menu-toggle:focus-visible{ border-color:var(--gold); background:rgba(242,196,109,.10); outline:none; }
.menu-toggle .bars{
  position:relative; width:20px; height:14px;
}
.menu-toggle .bars::before,
.menu-toggle .bars::after,
.menu-toggle .bars span{
  content:""; position:absolute; left:0; right:0; height:2px;
  background:var(--paper);
  border-radius:2px;
  transition:transform .35s var(--ease-out), opacity .25s var(--ease), top .35s var(--ease-out);
}
.menu-toggle .bars::before{ top:0; }
.menu-toggle .bars span{ top:6px; }
.menu-toggle .bars::after{ top:12px; }
.menu-toggle[aria-expanded="true"]{ border-color:var(--gold); background:rgba(242,196,109,.14); }
.menu-toggle[aria-expanded="true"] .bars::before{ transform:rotate(45deg); top:6px; }
.menu-toggle[aria-expanded="true"] .bars span{ opacity:0; }
.menu-toggle[aria-expanded="true"] .bars::after{ transform:rotate(-45deg); top:6px; }

/* The drawer overlay — slides in from the right on mobile */
.mobile-drawer{
  position:fixed; top:0; right:0;
  width:min(86vw, 380px); height:100vh; height:100dvh;
  background:
    radial-gradient(circle at 100% 0%, rgba(242,196,109,.18), transparent 50%),
    linear-gradient(180deg, rgba(11,13,18,.98), rgba(7,8,10,.98));
  border-left:1px solid var(--line-strong);
  box-shadow:-40px 0 80px rgba(0,0,0,.6);
  z-index:90;
  display:flex; flex-direction:column;
  padding:24px 24px calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateX(110%);
  transition:transform .42s var(--ease-out);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
          backdrop-filter:blur(20px) saturate(1.1);
  overflow-y:auto;
}
.mobile-drawer.open{ transform:translateX(0); }
.mobile-drawer-scrim{
  position:fixed; inset:0;
  background:rgba(7,8,10,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  z-index:89;
  opacity:0; pointer-events:none;
  transition:opacity .35s var(--ease);
}
.mobile-drawer-scrim.open{ opacity:1; pointer-events:auto; }

.mobile-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:18px; margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.mobile-drawer-head .seal{
  width:42px; height:42px;
  filter:drop-shadow(0 0 12px rgba(242,196,109,.30));
}
.mobile-drawer-head .label{
  display:flex; flex-direction:column; gap:2px; flex:1; margin-left:14px;
  min-width:0;
}
.mobile-drawer-head .label strong{
  color:var(--paper); font:800 1rem/1.1 var(--display); letter-spacing:-.005em;
}
.mobile-drawer-head .label small{
  color:var(--gold); font:700 .62rem/1 var(--display); letter-spacing:.22em; text-transform:uppercase;
}
.drawer-close{
  width:36px; height:36px; flex:0 0 auto;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px;
  color:var(--paper-dim); cursor:pointer;
  display:grid; place-items:center;
  font:700 1.2rem/1 var(--display);
}
.drawer-close:hover{ border-color:var(--gold); color:var(--gold); }

.mobile-drawer-section{
  display:flex; flex-direction:column;
  margin:0 0 4px;
}
.mobile-drawer-section + .mobile-drawer-section{ margin-top:10px; }
.mobile-drawer-section .section-label{
  display:block;
  color:var(--muted); font:700 .62rem/1 var(--display);
  letter-spacing:.22em; text-transform:uppercase;
  padding:14px 4px 8px;
}

.mobile-drawer a.drawer-link{
  display:flex; align-items:center; gap:14px;
  padding:15px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  color:var(--paper);
  text-decoration:none;
  font:700 1rem/1.2 var(--display);
  letter-spacing:-.005em;
  margin-bottom:8px;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .12s var(--ease);
}
.mobile-drawer a.drawer-link:hover, .mobile-drawer a.drawer-link:focus-visible{
  border-color:var(--gold); background:rgba(242,196,109,.06); outline:none;
}
.mobile-drawer a.drawer-link:active{ transform:translateX(2px); }
.mobile-drawer a.drawer-link[aria-current="page"]{
  border-color:var(--gold);
  background:linear-gradient(160deg, rgba(242,196,109,.12), rgba(242,196,109,.03));
  box-shadow:0 0 0 1px rgba(242,196,109,.25) inset, 0 0 28px rgba(242,196,109,.18);
}
.mobile-drawer a.drawer-link .glyph{
  width:34px; height:34px; flex:0 0 auto;
  border-radius:50%;
  display:grid; place-items:center;
  border:1px solid rgba(242,196,109,.45);
  color:var(--gold); font:900 .72rem/1 var(--display);
  background:radial-gradient(circle at 50% 30%, rgba(242,196,109,.20), transparent 70%);
}
.mobile-drawer a.drawer-link .meta{
  display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;
}
.mobile-drawer a.drawer-link .meta small{
  color:var(--paper-dim); font:500 .76rem/1.2 var(--body); letter-spacing:.01em;
}
.mobile-drawer a.drawer-link .arrow{
  margin-left:auto; color:var(--muted); font:700 .9rem/1 var(--display);
  transition:transform .25s var(--ease), color .25s var(--ease);
}
.mobile-drawer a.drawer-link:hover .arrow{ color:var(--gold); transform:translateX(3px); }

.mobile-drawer .drawer-cta-row{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid; gap:10px;
}
.mobile-drawer .drawer-cta-row .button{ width:100%; justify-content:center; }

.mobile-drawer-foot{
  margin-top:auto; padding-top:24px;
  color:var(--muted); font:600 .72rem/1.4 var(--display);
  letter-spacing:.02em; text-align:center;
}
.mobile-drawer-foot a{ color:var(--paper-dim); margin:0 8px; text-decoration:none; }
.mobile-drawer-foot a:hover{ color:var(--gold); }

/* Show the hamburger + activate drawer only on mobile */
@media (max-width:880px){
  .menu-toggle{ display:flex; }
  .nav-links{ display:none!important; }
  .nav-cta{ display:none!important; }
}
@media (min-width:881px){
  .mobile-drawer, .mobile-drawer-scrim, .menu-toggle{ display:none!important; }
}
/* Lock body scroll while drawer is open */
body.drawer-open{ overflow:hidden; }

/* ════════════════ MOBILE CONTENT POLISH ════════════════ */

/* Cap the lineup-hero image so it doesn't dominate the mobile fold */
@media (max-width:780px){
  .lineup-hero img{
    max-height:62vh;
    object-fit:contain;
  }
}

/* Tighter stage padding on mobile + cover treatment */
@media (max-width:780px){
  .stage{ padding:32px 0; gap:24px; }
  .stage-cover{ padding:14px; }
  .stage-cover img{ max-width:280px; }
  .stage-cover.coming{ min-height:280px; padding:30px 18px; }
  .stage-cover.coming .coming-mark .glyph{ width:64px; height:64px; font-size:1.4rem; }
  .stage-cover.coming .coming-mark .sub{ font-size:1.1rem; }
  .stage-title{ font-size:clamp(1.7rem,7vw,2.4rem)!important; }
  .stage-desc{ font-size:.96rem; }
  .stage-actions{ flex-direction:column; gap:8px; }
  .stage-actions .button{ width:100%; justify-content:center; }
}

/* Forge card mobile tightening */
@media (max-width:560px){
  .forge-card{ padding:18px 16px; }
  .forge-option{ padding:12px 14px; gap:10px; }
  .forge-option span{ font-size:.92rem; line-height:1.42; }
  .forge-option span strong{ font-size:.98rem; }
  .step-q{ font-size:1.4rem; }
  .forge-nav{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .forge-nav .step-dots{ order:3; width:100%; justify-content:center; padding-top:8px; }
  .forge-nav .button{ flex:1; min-width:0; padding:11px 14px; font-size:.7rem; letter-spacing:.1em; }
}

/* Result map on mobile — horizontal compact rows instead of huge stacked column */
@media (max-width:760px){
  .result-system-map{ grid-template-columns:1fr; padding:16px; gap:10px; }
  .result-node{
    flex-direction:row; padding:12px 14px; text-align:left;
  }
  .result-node .node-glyph{ width:34px; height:34px; flex:0 0 auto; }
  .result-node .node-label{ font-size:.74rem; letter-spacing:.16em; }
}

/* Lead magnet, hero, headlines tighter on mobile */
@media (max-width:560px){
  .lead-magnet{ padding:22px; }
  .lead-magnet h3{ font-size:1.35rem; line-height:1.2; }
  .page-hero h1{ font-size:clamp(2.2rem,9vw,3rem)!important; }
  .forge-h1{ font-size:2.4rem; line-height:1.05; }
  .essay-title{ font-size:2.2rem; line-height:1.05; }
  .essay-deck{ font-size:1.05rem; }
  .essay-body p{ font-size:1rem; line-height:1.7; }
  .glass-card{ padding:20px 16px; }
}

/* Trust grid on mobile — single column with proper card heights */
@media (max-width:780px){
  .trust-grid, .room-grid, .product-grid, .library-grid{
    grid-template-columns:1fr!important;
    gap:12px;
  }
}

/* Make catalog hero h1 readable on phones */
@media (max-width:560px){
  section.atmosphere h1{ font-size:clamp(2rem,8vw,2.8rem)!important; line-height:1.04; }
}
/* ════════════════════════════════════════════════════════════════
   FRAMEWORK FORGE — R08.1 POLISH PASS
   Appends to site.css. Six mobile flaws fixed in one CSS-only patch
   to earn the 3-flaw redline.
   ════════════════════════════════════════════════════════════════ */

/* ─── Fix 1: FF-001 / FF-002 / FF-003 ghost watermark on mobile ──
   At desktop this is gorgeous depth. At <680px it overflows the
   card width and gets clipped on the right edge. Shrink + reposition
   to bottom-right so it still feels like a passport stamp. */
@media (max-width:680px){
  .tool-card{ overflow:hidden; }
  .tool-card::before{
    font-size:2.6rem!important;
    top:auto!important;
    bottom:14px!important;
    right:14px!important;
    opacity:.55;
    letter-spacing:.02em;
    transition:none!important;
  }
  .tool-card:hover::before{ color:rgba(242,196,109,.18)!important; }
}

/* ─── Fix 2: Hero seal watermark cropped off the left edge ──
   The institution-card's faint seal background was positioned for
   desktop dimensions; on mobile it falls off the left. Re-center it
   behind the headline at a smaller, calmer scale. */
@media (max-width:780px){
  .institution-card{
    background-position:center 65%!important;
    background-size:min(72vmin, 360px) auto!important;
    background-repeat:no-repeat!important;
  }
  .hero::before{
    background-position:center center!important;
    background-size:cover!important;
    opacity:.42!important;
  }
}
/* Also tame any rogue body-level seal watermark on the homepage hero */
@media (max-width:560px){
  body::before, .hero-stage::before{
    background-position:center 60%!important;
    background-size:64vmin auto!important;
    opacity:.4!important;
  }
}

/* ─── Fix 3: Forge result-system-map — compress vertical column on phones ──
   Five tall stacked nodes was eating two screens. Switch to 2-column
   grid with the 5th node spanning both. */
@media (max-width:560px){
  .result-system-map{
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:14px!important;
  }
  .result-node{
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    padding:14px 10px!important;
    gap:6px!important;
  }
  .result-node:nth-child(5){
    grid-column:1 / -1;          /* Last node spans both columns */
  }
  .result-node .node-glyph{ width:30px; height:30px; }
  .result-node .node-label{ font-size:.7rem; letter-spacing:.14em; }
  .result-system-map::before{ display:none; } /* hide connector line at mobile grid */
}

/* ─── Fix 4: Forge Step 3 options ── density relief on mobile ── */
@media (max-width:560px){
  .forge-step[data-step="3"] .forge-option span{
    font-size:.9rem; line-height:1.36;
  }
  .forge-step[data-step="3"] .forge-option span strong{
    font-size:.96rem; margin-bottom:1px;
  }
  /* Same density treatment for steps 1 and 2 — consistency */
  .forge-option span{ font-size:.92rem; line-height:1.4; }
}

/* ─── Fix 5: Library essay typography scale on small phones ── */
@media (max-width:520px){
  .essay-page{ padding:48px 18px 60px; }
  .essay-title{ font-size:2.1rem; line-height:1.04; }
  .essay-deck{ font-size:1.02rem; line-height:1.52; margin-bottom:36px; }
  .essay-body p{ font-size:1rem; line-height:1.72; margin-bottom:18px; }
  .essay-body h2{ font-size:1.5rem; line-height:1.18; margin-top:44px; }
  .essay-body h3{ font-size:1.18rem; margin-top:32px; }
  .essay-body blockquote{
    font-size:1.04rem; padding:18px 20px; margin:28px 0;
  }
  .essay-body ul, .essay-body ol{ font-size:.98rem; line-height:1.7; }
  .essay-related{ padding:24px 20px; margin-top:60px; }
  .essay-related h3{ font-size:1.2rem; }
  .essay-related p{ font-size:.95rem; line-height:1.55; }
}

/* ─── Fix 6: Lead-magnet email row stacks on narrow phones ──
   At <480px the email input + button on one row gets crushed.
   Force vertical stack with full-width inputs. */
@media (max-width:480px){
  .lead-form .row{
    flex-direction:column!important; gap:8px!important;
  }
  .lead-form input[type=email]{
    width:100%; flex:none;
  }
  .lead-form button{
    width:100%; justify-content:center;
  }
  .notify-inline{
    flex-direction:column; align-items:stretch; border-radius:18px;
    gap:8px; padding:12px;
  }
  .notify-inline input[type=email]{ width:100%; padding:12px 14px; }
  .notify-inline button{ width:100%; justify-content:center; }
}

/* ─── Fix 7: Trust page card density at mobile ──
   Each trust-item had heavy vertical padding which made the 8 cards
   into 8 full scrolls. Compact treatment. */
@media (max-width:780px){
  .trust-item, .article-card{
    min-height:auto!important;
    padding:18px!important;
  }
  .trust-item span,
  .article-card span{
    font-size:.66rem!important; letter-spacing:.18em;
  }
  .trust-item strong,
  .article-card h3{
    font-size:1.05rem!important; line-height:1.28!important;
    margin:6px 0 8px!important; display:block;
  }
  .trust-item p,
  .article-card p{
    font-size:.92rem!important; line-height:1.55!important;
  }
}

/* ─── Fix 8: /system page Why-this-order pillars stack on mobile ──
   The 4-column pillar grid was already responsive, but at <680 the 2-col
   intermediate state crushed the icon. Force single column with cleaner
   spacing. */
@media (max-width:680px){
  .sales-pillars{
    grid-template-columns:1fr!important; gap:10px!important;
  }
  .pillar{ padding:18px 20px!important; }
  .pillar h4{ font-size:1.05rem!important; }
  .pillar p{ font-size:.92rem!important; line-height:1.55!important; }
  .pillar .icon{ margin-bottom:10px; width:32px; height:32px; }
}

/* ─── Quiet bonus: Inside-list density relief at mobile ── */
@media (max-width:560px){
  .inside-list li{
    padding:13px 14px 13px 38px!important;
    font-size:.96rem!important; line-height:1.5!important;
  }
  .inside-list li::before{
    left:14px!important; top:16px!important;
    width:12px; height:12px;
  }
}

/* ════════════════════════════════════════════════════════════════
   R08.2 — Drawer-on-inner-pages + hero seal re-center + premium type
   ════════════════════════════════════════════════════════════════ */

/* Fix 2: Hero seal watermark — was positioned off-screen left for
   desktop's artistic crop. On mobile, re-center behind the headline. */
@media (max-width:780px){
  .hero::before{
    left:50%!important; top:50%!important;
    transform:translate(-50%, -50%)!important;
    width:min(72vw, 380px)!important;
    aspect-ratio:1!important;
    opacity:.05!important;
  }
}

/* Fix 3: VIEW PASSPORT mini-link — make it look like a proper CTA,
   not plain text. Pair it visually with the GET buttons. */
.mini-link, .card-actions a.mini-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 20px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--paper);
  text-decoration:none;
  font:800 .68rem/1 var(--display);
  letter-spacing:.2em; text-transform:uppercase;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.mini-link:hover, .card-actions a.mini-link:hover{
  border-color:var(--gold); background:rgba(242,196,109,.08); color:var(--gold);
}
.mini-link::after{ content:""; }   /* drop any decorative arrow weirdness */

/* Fix 4: Premium typography — bump weight on body + tighten letter-spacing
   on display text so the site reads as substantial, not cheap. */
body{
  font-weight:500;            /* was 400 — feels more substantial */
  letter-spacing:.0015em;     /* was .002 — slightly tighter */
}
p, .lead, .stage-desc, .essay-body p, .step-help, .forge-lede{
  font-weight:450;            /* lighter on long copy so it stays readable */
  letter-spacing:.0035em;
}
strong, .button, .nav-cta, .stage-tag, .step-number, .eyebrow-row{
  font-weight:800;            /* small caps elements heavier */
}
h1, h2, h3, .stage-title, .forge-h1, .essay-title, .result-title{
  font-weight:900;
  letter-spacing:-.018em;     /* tighter on display headlines for that editorial feel */
}

/* ════════════════════════════════════════════════════════════════
   R08.3 — Forge wizard, stage title block, tap highlight
   ════════════════════════════════════════════════════════════════ */

/* Bug 1: The Forge wizard was showing all 3 steps because my
   .forge-step { display:grid } overrode the [hidden] attribute. */
.forge-step[hidden]{ display:none!important; }

/* Bug 2 + 3: Stage titles — descriptor goes to its own line in its
   product's ember color. Removes the dash visual + makes every title
   render in the same two-line shape so sizes look consistent. */
.stage-title{
  font:900 clamp(1.9rem,4.2vw,3.2rem)/1.04 var(--display);
  letter-spacing:-.018em; color:var(--paper); margin:0;
}
.stage-title em{
  display:block;
  font-style:normal;
  font-weight:900;
  color:rgb(var(--stage-rgb,242 196 109));
  letter-spacing:-.018em;
  margin-top:6px;
}

/* Bug 4: Browser tap-highlight defaults to system green or blue.
   Force brand gold so taps on links/buttons stay on-brand. */
html, body{
  -webkit-tap-highlight-color:rgba(242,196,109,.18);
}
a, button, [role="button"]{
  -webkit-tap-highlight-color:rgba(242,196,109,.22);
}

/* Bonus: also hide the result.system-map connector before-line on mobile
   single-column layout (was visible behind nodes when stacked). */
@media (max-width:560px){
  .result-system-map::before{ display:none!important; }
}

/* Bonus: ensure forge-step shows even after JS fails — fallback */
.no-js .forge-step{ display:grid!important; }

/* ════════════════════════════════════════════════════════════════
   FRAMEWORK FORGE — R08.4 PROFESSOR PASS
   Six flaws the petty professor caught on the deploy review.
   ════════════════════════════════════════════════════════════════ */

/* ─── Flaw 1: Front-page hero seal bleed on mobile ───────────────
   The .hero::before seal watermark was still rendering at ≤780px and
   bleeding INTO the CTA stack, making the buttons look like they sat
   on top of a partial seal. Kill all three competing watermark
   pseudo-elements on mobile so the hero stays clean. */
@media (max-width:780px){
  .hero::before,
  .hero-stage::before,
  body::before {
    display:none !important;
  }
  /* Restore breathing room between CTAs and the seal display card */
  .hero .actions { margin-bottom:22px; }
}

/* ─── Flaw 2: "EVEAL RECOMMENDATION" clipped in forge wizard ─────
   At ≤560px, flex:1 on both Back + Reveal gave them equal width.
   "Reveal recommendation →" overflowed; "Back" wasted space.
   Heavier flex weight on Next + tighter type. JS also shortens the
   label to "Reveal →" on phones. */
@media (max-width:560px){
  .forge-nav { gap:8px !important; align-items:stretch; }
  .forge-nav #prevBtn { flex:0 0 auto !important; padding:11px 18px !important; }
  .forge-nav #nextBtn { flex:1 1 auto !important; padding:11px 12px !important;
                        font-size:.66rem !important; letter-spacing:.06em !important;
                        white-space:nowrap; }
  .forge-nav .step-dots { padding-top:6px !important; }
}

/* ─── Flaw 3: White period after gold "Legacy Builder." ──────────
   The "." sat outside .accent so it rendered paper-white against a
   gold name. CSS belt — primary fix is moving the period inside the
   span via the HTML/JS. This trailing-content rule is a safety net. */
.result-title .accent { color:var(--gold); }
.result-title .accent::after {
  /* No content — kept blank deliberately. Period now lives inside the
     accent span (see forge.html + site.js change). */
}

/* ─── Flaw 4: Double-highlight in burger drawer ──────────────────
   Autofocus on first link gave it :focus-visible gold treatment
   simultaneously with the aria-current="page" item. Two highlights
   looked like a menu bug. Distinguish them: focus = thin gold ring,
   aria-current = full ember glow. */
.mobile-drawer a.drawer-link:focus-visible{
  background:rgba(255,255,255,.025) !important;
  border-color:rgba(242,196,109,.55) !important;
  box-shadow:0 0 0 2px rgba(242,196,109,.20) !important;
  outline:none !important;
}
.mobile-drawer a.drawer-link[aria-current="page"]{
  border-color:var(--gold) !important;
  background:linear-gradient(160deg, rgba(242,196,109,.14), rgba(242,196,109,.04)) !important;
  box-shadow:0 0 0 1px rgba(242,196,109,.30) inset, 0 0 32px rgba(242,196,109,.22) !important;
}
/* Belt-and-suspenders: even if focus stays after click, the aria-current
   takes visual precedence. */
.mobile-drawer a.drawer-link[aria-current="page"]:focus-visible{
  box-shadow:0 0 0 1px rgba(242,196,109,.30) inset, 0 0 32px rgba(242,196,109,.28) !important;
}

/* ─── Flaw 5: "Visible before purchase." awkward wrap ────────────
   Browser broke after "before" creating an unbalanced 2-liner.
   text-wrap:balance auto-balances; explicit max-inline-size keeps it
   tidy on tiny phones. */
.trust-hero h2,
.page-hero h1,
.atmosphere h1,
.hero h1{
  text-wrap:balance;
}
@media (max-width:560px){
  .trust-hero h2{
    font-size:clamp(2.2rem, 9vw, 3rem) !important;
    line-height:1.04 !important;
    max-inline-size:14ch;
  }
}

/* ─── Flaw 6: "Build a brand. Leave a legacy." 3-line stage ──────
   Longest descriptor of all 5 products was wrapping at the period,
   creating an awkward unintentional break. Shrink em on mobile so
   the longest descriptor fits on its own single line; the shorter
   ones get more breathing room. Plus text-wrap:balance for safety. */
@media (max-width:780px){
  .stage-title{
    text-wrap:balance;
  }
  .stage-title em{
    font-size:clamp(1.2rem, 4.6vw, 1.85rem) !important;
    line-height:1.18 !important;
    letter-spacing:-.012em !important;
    margin-top:8px !important;
    text-wrap:balance;
    max-inline-size:22ch;
  }
}
@media (max-width:480px){
  .stage-title em{
    font-size:clamp(1.05rem, 5.2vw, 1.55rem) !important;
  }
}


/* Product page: reflection tool card grid. Moved from invalid inline @media. */
.tool-feature-grid{
  display:grid;
  gap:24px;
  grid-template-columns:200px 1fr;
  align-items:center;
}
@media (max-width:680px){
  .tool-feature-grid{grid-template-columns:1fr;}
}


/* ---- Selected Work : SOULYFE live embed ---------------------------- */
.case-figure{margin:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:var(--shadow-card)}
.case-frame{position:relative;width:100%;aspect-ratio:320/189;overflow:hidden;background:#05070b center/cover no-repeat}
.case-scale{position:absolute;top:0;left:0;width:1280px;height:756px;transform-origin:top left}
.case-embed{width:1280px;height:756px;border:0;pointer-events:none;background:transparent;display:block}
.case-open{position:absolute;inset:0;z-index:3;display:block}
.live-badge{position:absolute;top:14px;right:14px;z-index:4;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;background:rgba(5,7,11,.62);border:1px solid var(--line);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:700 .68rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--paper)}
.live-badge i{width:7px;height:7px;border-radius:50%;background:#33d39b;animation:livePulse 2s var(--ease) infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(51,211,155,.55)}70%{box-shadow:0 0 0 7px rgba(51,211,155,0)}100%{box-shadow:0 0 0 0 rgba(51,211,155,0)}}
.case-caption{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding:26px 30px;border-top:1px solid var(--line)}
.case-caption .case-text{max-width:64ch}
.case-caption .case-text .kicker{margin-bottom:6px}
.case-caption h3{margin:10px 0 8px;font-size:1.45rem;font-family:var(--display)}
.case-caption .case-text p{color:var(--paper-dim);margin:0;font-size:1rem;line-height:1.55}
.case-caption .button{flex:0 0 auto}
@media(max-width:760px){.case-caption{padding:22px 20px;gap:20px}.case-caption .button{width:100%;justify-content:center}}

/* Selected Work : live embed on ALL devices — SOULYFE suppresses its install prompt in-frame */
.case-still{display:none !important}