/* ============================================================
   The AI Bill — site styles
   Editorial-technical: financial-publication calm + engineer precision
   ============================================================ */
:root{
  --ink:#16211c;
  --ink-soft:#4e5d55;
  --paper:#fbfaf7;
  --paper-2:#f2f0e9;
  --card:#ffffff;
  --accent:#0e6b52;          /* ledger green */
  --accent-deep:#0a4d3b;
  --money:#177a5c;
  --gold:#b98a2b;
  --line:#e3e0d5;
  --code-bg:#101816;
  --code-ink:#c9e8d9;
  --serif:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --shadow:0 8px 28px rgba(22,33,28,.07);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.7;font-size:16.5px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* Lining tabular figures everywhere. On a site whose subject is numbers,
     digits that shift width between rows are the tell that nobody looked. */
  font-variant-numeric:tabular-nums lining-nums;
}
/* Large serif needs negative tracking to hold together; small serif does not.
   One optical size does not fit both, which is why the scale below sets it
   per level rather than once on the element. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.14;color:var(--ink);letter-spacing:-.021em;}
h3,h4{letter-spacing:-.01em;line-height:1.24;}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(14,107,82,.28);}
a:hover{color:var(--accent-deep);border-bottom-color:var(--accent-deep);}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}
.narrow{max-width:780px;}
.mono{font-family:var(--mono);}
.small{font-size:13px;color:var(--ink-soft);}

/* ---------- NAV ---------- */
nav.site{position:sticky;top:0;z-index:100;background:rgba(251,250,247,.93);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.nav-in{max-width:1040px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.brand{display:flex;align-items:center;gap:10px;border:none;}
.brand .mark{width:30px;height:30px;flex:none;}
.brand .name{font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink);}
.brand .name em{font-style:italic;color:var(--accent);}
.nav-links{display:flex;gap:22px;align-items:center;}
.nav-links a{font-size:14px;font-weight:600;color:var(--ink-soft);border:none;}
.nav-links a:hover{color:var(--accent);}
.nav-links a.cta{background:var(--accent);color:#fff;padding:8px 16px;border-radius:6px;}
.nav-links a.cta:hover{background:var(--accent-deep);}
@media(max-width:720px){
  .nav-in{flex-wrap:wrap;row-gap:10px;}
  .nav-links{gap:16px;width:100%;justify-content:flex-start;flex-wrap:wrap;}
  .nav-links a{font-size:13.5px;}
  .nav-links a.cta{padding:7px 14px;margin-left:auto;}
}

/* ---------- HERO ---------- */
/* The hero earns its scale. A 54px headline in a 1040px column reads as a
   template; the eye needs a real jump between the label, the statement, and
   the body for the page to feel authored rather than filled in. */
/* Scale tuned against the fold, not against taste: at 72px on a 15ch measure
   the headline ran four lines and pushed the primary CTA to 821px — below the
   fold on a 1280x800 laptop, on the page whose job is booking teardowns.
   60px on a wider measure wraps to three lines and brings the button back up. */
.hero{padding:76px 0 64px;background:var(--paper);border-bottom:1px solid var(--line);}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:18px;display:flex;align-items:center;gap:12px;}
.kicker::after{content:"";flex:1;height:1px;background:var(--line);max-width:180px;}
.hero h1{font-size:clamp(36px,5.2vw,60px);margin-bottom:22px;max-width:19ch;letter-spacing:-.026em;line-height:1.08;}
.hero h1 em{font-style:italic;color:var(--accent);}
.lead{font-size:19.5px;color:var(--ink-soft);max-width:62ch;line-height:1.65;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;align-items:center;}
.btn{
  display:inline-block;padding:14px 26px;border-radius:4px;font-weight:600;font-size:15px;
  border:none;cursor:pointer;font-family:var(--sans);letter-spacing:.005em;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--ink);color:var(--paper);}
.btn-primary:hover{background:var(--accent-deep);color:#fff;}
.btn-ghost{border:1px solid var(--line);color:var(--ink);background:transparent;}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.hero-note{margin-top:24px;font-size:13.5px;color:var(--ink-soft);padding-left:14px;border-left:2px solid var(--line);}
@media(max-width:720px){.hero{padding:64px 0 52px;}.hero h1{max-width:none;}}

/* ---------- SECTIONS / CARDS ---------- */
section{padding:88px 0;}
/* A subtler alternate band. Hard grey slabs alternating down the page are the
   template rhythm; a near-imperceptible tint plus hairlines reads as one
   continuous document with sections, which is what it is. */
section.alt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
h2.sec{font-size:clamp(28px,3.9vw,42px);margin-bottom:16px;max-width:24ch;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:46px;border-top:1px solid var(--line);}
@media(max-width:840px){.grid3{grid-template-columns:1fr;}}
/* Hairline-separated columns rather than floating rounded boxes. Drop shadows
   on cards are the single loudest "generic" signal; space and rules do the
   same grouping job without the costume. */
.card{
  background:transparent;border:none;border-radius:0;padding:30px 28px 30px 0;box-shadow:none;
  border-right:1px solid var(--line);
}
.grid3 .card:last-child{border-right:none;}
@media(max-width:840px){
  .card{border-right:none;border-bottom:1px solid var(--line);padding:26px 0;}
  .grid3 .card:last-child{border-bottom:none;}
}
.card h3{font-size:20px;margin-bottom:10px;}
.card p{font-size:15.5px;color:var(--ink-soft);line-height:1.65;}
.card .tag{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px;}

/* ---------- CURRICULUM PAGE ---------- */
.page-head{padding:58px 0 40px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);border-bottom:1px solid var(--line);}
.page-head h1{font-size:clamp(30px,4.6vw,46px);max-width:840px;margin-bottom:14px;}
.progress-shell{margin-top:26px;max-width:560px;}
.progress-bar{height:10px;background:#e7e4da;border-radius:6px;overflow:hidden;}
.progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--money),var(--accent));border-radius:6px;transition:width .4s ease;}
.progress-label{font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);margin-top:8px;}

.layout{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;padding:48px 0 80px;}
@media(max-width:900px){.layout{grid-template-columns:1fr;}}
.toc{position:sticky;top:78px;font-size:13.5px;}
@media(max-width:900px){.toc{position:static;display:flex;flex-wrap:wrap;gap:8px;}}
.toc a{display:block;padding:7px 12px;border:none;border-left:2px solid var(--line);color:var(--ink-soft);font-weight:500;}
.toc a:hover,.toc a.active{color:var(--accent);border-left-color:var(--accent);background:rgba(14,107,82,.05);}
@media(max-width:900px){.toc a{border:1px solid var(--line);border-radius:20px;padding:5px 12px;}}

.module{background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:30px;overflow:hidden;box-shadow:var(--shadow);}
.mod-head{padding:26px 30px 20px;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start;cursor:pointer;}
.mod-num{font-family:var(--mono);font-size:13px;font-weight:700;color:#fff;background:var(--accent);border-radius:8px;padding:7px 11px;flex:none;margin-top:3px;}
.mod-head h2{font-size:23px;margin-bottom:5px;}
.mod-head .meta{font-family:var(--mono);font-size:12px;color:var(--ink-soft);}
.mod-head .chev{margin-left:auto;font-size:20px;color:var(--ink-soft);transition:transform .25s;flex:none;margin-top:6px;}
.module.open .chev{transform:rotate(90deg);}
.mod-body{display:none;padding:26px 30px 30px;}
.module.open .mod-body{display:block;}
.mod-why{font-size:15.5px;color:var(--ink-soft);border-left:3px solid var(--gold);padding:4px 0 4px 16px;margin-bottom:24px;font-style:italic;}

.rgroup{margin-bottom:22px;}
.rgroup h4{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;font-weight:700;}
.res{display:flex;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line);align-items:flex-start;}
.res:last-child{border-bottom:none;}
.res input[type=checkbox]{margin-top:6px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none;}
.res .badge{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px;flex:none;margin-top:3px;letter-spacing:.03em;}
.b-paper{background:#eef2ff;color:#3b4bc8;}
.b-video{background:#fdeeee;color:#b3403a;}
.b-course{background:#e9f6ef;color:#177a5c;}
.b-data{background:#fdf6e5;color:#9a6d13;}
.b-lab{background:#101816;color:#7fd8b4;}
.b-write{background:#f4ecfb;color:#7a3fb3;}
.res .body{font-size:15px;}
.res .body .t{font-weight:600;}
.res .body .d{font-size:13.5px;color:var(--ink-soft);}
.res.done .body{opacity:.5;text-decoration:line-through;}

.concepts{background:var(--paper-2);border-radius:10px;padding:18px 22px;margin-bottom:22px;}
.concepts h4{font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;font-weight:700;}
.concepts ul{list-style:none;}
.concepts li{font-size:14.5px;padding:4px 0 4px 22px;position:relative;color:var(--ink);}
.concepts li::before{content:"▸";position:absolute;left:2px;color:var(--gold);}

.lab-box{background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:20px 24px;margin-bottom:18px;}
.lab-box h4{font-family:var(--mono);color:#7fd8b4;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.lab-box p{font-size:14.5px;line-height:1.65;}
.artifact-box{border:1.5px dashed var(--gold);border-radius:10px;padding:16px 22px;background:#fdfaf2;}
.artifact-box h4{font-family:var(--mono);font-size:12.5px;color:var(--gold);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.artifact-box p{font-size:14.5px;color:var(--ink);}

/* big idea / thesis cards */
.thesis{border-left:4px solid var(--accent);background:var(--card);border-radius:0 12px 12px 0;padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow);}
.thesis h3{font-size:18px;margin-bottom:6px;}
.thesis p{font-size:14.5px;color:var(--ink-soft);}
.thesis .n{font-family:var(--mono);color:var(--gold);font-weight:700;margin-right:8px;}

/* ---------- FOOTER ---------- */
footer{background:var(--ink);color:#b9c4bd;padding:46px 0;font-size:13.5px;margin-top:20px;}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
footer a{color:#dfe8e2;border-bottom-color:rgba(255,255,255,.25);}
footer .fbrand{font-family:var(--serif);font-size:17px;color:#fff;}
footer .fbrand em{font-style:italic;color:#7fd8b4;}
.footnote{max-width:1040px;margin:18px auto 0;padding:0 24px;color:#8b978f;font-size:12px;line-height:1.6;}

/* Handbook chapter body. Long-form reading: generous measure, serif, and a
   line-height that survives being read for fifteen minutes straight. */
.prose{font-family:var(--serif);font-size:18.5px;line-height:1.72;color:var(--ink);}
.prose > * + *{margin-top:1.15em;}
.prose h2{font-family:var(--serif);font-size:27px;font-weight:700;line-height:1.25;margin-top:2em;letter-spacing:-.01em;}
.prose h3{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:.02em;margin-top:1.7em;}
.prose strong{font-weight:700;}
.prose em{font-style:italic;}
.prose a{color:var(--accent-deep);border-bottom:1px solid rgba(14,107,82,.35);text-decoration:none;}
.prose a:hover{border-bottom-color:var(--accent-deep);}
.prose ul,.prose ol{padding-left:1.35em;}
.prose li + li{margin-top:.5em;}
.prose li::marker{color:var(--ink-soft);}
.prose code{font-family:var(--mono);font-size:.85em;background:var(--code-bg);color:var(--code-ink);padding:.15em .4em;border-radius:4px;}
.prose pre{background:var(--code-bg);color:var(--code-ink);padding:16px 18px;border-radius:10px;overflow-x:auto;font-size:14px;line-height:1.6;}
.prose pre code{background:none;padding:0;font-size:inherit;}
.prose blockquote{border-left:3px solid var(--accent);padding-left:18px;color:var(--ink-soft);font-style:italic;}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0;}
.prose table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px;}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);}
.prose th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);}
@media (max-width:640px){.prose{font-size:17.5px;}.prose h2{font-size:23px;}}