/* Beyond Fiat — site styles. Brand: banknote engraving; paper, ink, green, gold. */
:root{
  --paper:#EEF2EE; --paper-2:#E2E9E3; --ink:#0F1F1A; --ink-soft:#4A5C55; --rule:#B9C7BE;
  --green:#1D5C46; --gold:#A87A0C; --gold-text:#8A6408; --gold-soft:#E9D9A8; --card:#F8FAF7; --danger:#9B2C2C;
  --vault:#13372B; --vault-ink:#F1E7C8;
  --display:"Young Serif", Georgia, "Times New Roman", serif;
  --body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0E1714; --paper-2:#14211C; --ink:#E6EEE8; --ink-soft:#9FB2A8; --rule:#2C3E36;
  --green:#5FB592; --gold:#D9AE45; --gold-text:#D9AE45; --gold-soft:#3A3115; --card:#13201B; --danger:#E08080; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0E1714; --paper-2:#14211C; --ink:#E6EEE8; --ink-soft:#9FB2A8; --rule:#2C3E36;
  --green:#5FB592; --gold:#D9AE45; --gold-text:#D9AE45; --gold-soft:#3A3115; --card:#13201B; --danger:#E08080; color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;padding-inline:20px}
.wrap{max-width:1080px;margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.12;text-wrap:balance;margin:0}
h1{font-size:clamp(2.3rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.3rem}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:10px;z-index:10;background:var(--card);padding:.5em 1em;border-radius:6px}
.eyebrow{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.muted{color:var(--ink-soft)}
.small{font-size:.85rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:600 .95rem var(--body);padding:.8em 1.3em;border-radius:6px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{opacity:.9}
.btn:focus-visible,input:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* header */
header.site{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule);margin-inline:-20px;padding-inline:20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.35rem;text-decoration:none}
.seal{width:34px;height:34px;flex:none}
.seal .ring,.seal .dots{stroke:var(--gold)} .seal .dot{fill:var(--ink)}
.nav nav{display:flex;gap:22px;align-items:center;flex-wrap:wrap;font-size:.95rem}
.nav nav a{text-decoration:none;color:var(--ink-soft)}
.nav nav a:hover,.nav nav a[aria-current="page"]{color:var(--ink)}
.nav .btn{padding:.55em 1em;font-size:.88rem;color:var(--ink)}
@media (max-width:640px){.nav nav{gap:14px;font-size:.9rem}.nav nav .hide-sm{display:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;padding-block:72px 64px;align-items:center}
.hero>*{min-width:0}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.4rem);margin-block:14px 22px}
.hero h1 em{font-style:normal;color:var(--gold-text)}
.lede{font-size:1.15rem;color:var(--ink-soft);max-width:34em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.note{position:relative;background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:26px;overflow:hidden}
.note::before{content:"";position:absolute;inset:8px;border:1px dashed var(--rule);border-radius:6px;pointer-events:none}
.note-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase}
.big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;margin-block:18px 4px}
.big small{font-size:.4em;color:var(--ink-soft)}
.bar{height:12px;border-radius:6px;background:var(--paper-2);overflow:hidden;margin-block:14px 6px}
.bar span{display:block;height:100%;width:74%;background:var(--gold);border-radius:6px;transition:width .35s ease}
.ctrl{display:grid;gap:4px;margin-top:18px}
.ctrl label{display:flex;justify-content:space-between;font-size:.88rem;color:var(--ink-soft)}
.ctrl output{font-family:var(--mono);color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--green)}
.r72{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-size:.92rem;color:var(--ink-soft)}
.r72 b{font-family:var(--mono);color:var(--ink);font-weight:500}

/* sections */
section{padding-block:72px;border-top:1px solid var(--rule)}
.sec-head{display:grid;gap:12px;max-width:40em;margin-bottom:40px}
.sec-head p{color:var(--ink-soft)}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pillar{display:grid;gap:10px;align-content:start}
.pillar .k{font-family:var(--mono);font-size:.8rem;color:var(--gold-text)}
.pillar p{color:var(--ink-soft)}
.course{display:grid;grid-template-columns:1fr 340px;gap:48px;align-items:start}
.course>*{min-width:0}
.modules{list-style:none;padding:0;margin:0;display:grid;border-top:1px solid var(--rule)}
.modules li{display:grid;grid-template-columns:3.2em 1fr auto;gap:12px;padding-block:14px;border-bottom:1px solid var(--rule);align-items:baseline}
.modules .n{font-family:var(--mono);color:var(--gold-text);font-size:.85rem}
.modules .t{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.card{background:var(--card);border:1px solid var(--rule);border-radius:10px;padding:28px;display:grid;gap:14px}
.price{position:sticky;top:90px}
.price .amt{font-family:var(--mono);font-size:2.8rem;line-height:1}
.price .amt s{font-size:.45em;color:var(--ink-soft);margin-left:8px}
.card ul{margin:0;padding-left:1.1em;color:var(--ink-soft);font-size:.95rem;display:grid;gap:4px}
.tag{display:inline-block;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;background:var(--gold-soft);color:var(--ink);padding:.3em .7em;border-radius:4px;justify-self:start}
.book{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center}
.book>*{min-width:0}
.cover-img{border-radius:3px 8px 8px 3px;box-shadow:10px 14px 0 var(--paper-2);width:100%}
.facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:22px;font-family:var(--mono);font-size:.9rem}
.facts span{display:block;color:var(--ink-soft);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.kit>*{min-width:0}
form{display:grid;gap:12px}
input[type=email],input[type=text]{font:inherit;padding:.8em 1em;border:1.5px solid var(--rule);border-radius:6px;background:var(--card);color:var(--ink);width:100%}
.form-msg{font-size:.92rem;color:var(--green);min-height:1.2em}
.form-msg.err{color:var(--danger)}
.checklist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:8px}
.checklist li::before{content:"\2713";color:var(--green);margin-right:10px;font-weight:700}
.timeline{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.step{padding:18px 18px 0 0;display:grid;gap:6px;position:relative;align-content:start}
.step::before{content:"";position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.step.goal::before{background:var(--gold);border-color:var(--gold)}
.step .d{font-family:var(--mono);font-size:.85rem;color:var(--gold-text)}
.step p{color:var(--ink-soft);font-size:.95rem}
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 40px;list-style:none;padding:0;margin:0}
.rules li{padding-left:28px;position:relative}
.rules li::before{content:"\00D7";position:absolute;left:0;top:-2px;font-size:1.3rem;color:var(--danger)}
.split{display:grid;grid-template-columns:1fr 380px;gap:48px;align-items:start}
.split>*{min-width:0}

/* book page */
.toc{list-style:none;padding:0;margin:0;columns:2;column-gap:40px}
.toc li{break-inside:avoid;padding-block:8px;border-bottom:1px solid var(--rule);display:flex;gap:12px}
.toc .n{font-family:var(--mono);color:var(--gold-text);font-size:.85rem;min-width:1.8em}
.toc .part{font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);border-bottom:0;padding-top:16px}
.excerpt{max-width:36em;font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;line-height:1.7;display:grid;gap:1em}
.excerpt p:first-child::first-letter{font-family:var(--display);font-size:3.2em;float:left;line-height:.9;margin:.06em .08em 0 0;color:var(--gold-text)}
.buy{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* prose pages (privacy, disclaimer) */
.prose{max-width:42em;padding-block:56px 72px;display:grid;gap:1em}
.prose h1{margin-bottom:.3em}
.prose h2{font-size:1.5rem;margin-top:1.2em}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:4px}
.center{text-align:center;justify-items:center}

footer.site{border-top:1px solid var(--rule);padding-block:36px 48px;font-size:.85rem;color:var(--ink-soft);display:grid;gap:10px}
footer.site nav{display:flex;gap:18px;flex-wrap:wrap}
footer.site b{color:var(--ink)}

@media (max-width:860px){
  .hero,.course,.book,.kit,.split{grid-template-columns:1fr;gap:36px}
  .pillars{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr;row-gap:28px}
  .rules{grid-template-columns:1fr}
  .toc{columns:1}
  .price{position:static}
  .book .cover-wrap{max-width:220px}
  .hero{padding-block:44px}
  section{padding-block:52px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* utilities */
.mt12{margin-top:12px}.mb16{margin-bottom:16px}.mt40{margin-top:40px}.m0{margin:0}.maxw{max-width:34em}
.hero-single{grid-template-columns:1fr;padding-bottom:40px}
.hero-single .lede{max-width:40em}
section.first{border-top:0;padding-top:56px}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* app pages (login, account, lessons) */
.auth{max-width:440px;margin:56px auto 72px}
.auth h1{font-size:2.2rem;margin-block:8px 18px}
.auth form{display:grid;gap:12px}
.auth label{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.auth input{font:inherit;padding:.8em 1em;border:1.5px solid var(--rule);border-radius:6px;background:var(--card);color:var(--ink);width:100%}
.auth .links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.92rem;margin-top:8px}
.alert{padding:.8em 1em;border-radius:6px;font-size:.95rem;border:1px solid var(--rule);background:var(--card)}
.alert.err{border-color:var(--danger);color:var(--danger)}
.alert.ok{border-color:var(--green);color:var(--green)}
.page{padding-block:48px 72px}
.page>h1{margin-block:8px 12px}
.progress{height:10px;border-radius:5px;background:var(--paper-2);overflow:hidden;margin-block:10px}
.progress span{display:block;height:100%;background:var(--green)}
.mod{border-top:1px solid var(--rule);padding-block:22px}
.mod h2{font-size:1.5rem;margin-block:6px 12px}
.lessons{list-style:none;padding:0;margin:0;display:grid}
.lessons li a{display:grid;grid-template-columns:2.2em 1fr auto;gap:12px;padding:10px 0;border-bottom:1px dashed var(--rule);text-decoration:none;align-items:baseline}
.lessons .chk{font-family:var(--mono);color:var(--ink-soft)}
.lessons .done .chk{color:var(--green);font-weight:700}
.lessons .min{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft)}
.player{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;padding-block:32px 72px}
.player>*{min-width:0}
.video{width:100%;aspect-ratio:16/9;background:#000;border-radius:8px;display:block}
.video-missing{aspect-ratio:16/9;border:1px dashed var(--rule);border-radius:8px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--ink-soft)}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:20px}
.side .lessons li a{grid-template-columns:2em 1fr;font-size:.92rem}
.side .lessons .cur a{color:var(--green);font-weight:600}
.inline{display:inline}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:860px){.player{grid-template-columns:1fr}}
.field{display:grid;gap:6px}