/* ProposalPrime shared styles for the free modules, legal, contact, thanks and 404 pages.
   The four main pages (home, course, playbook, scorecard) keep their own styles inline. */

:root{
  --navy:#14213D; --gold:#8C5F0A; --gold-lt:#D9A441; --gold-bg:#F7EFDC;
  --paper:#EFEEE6; --paper-2:#E7E5DA; --card:#FFFFFF; --ink:#1B1B18; --muted:#5B5B52;
  --line:rgba(20,33,61,0.14); --line-soft:rgba(20,33,61,0.07);
  --ok:#2F6844; --ok-bg:#E4EEE7; --bad:#A23B2E;
  --max:1120px;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, var(--line-soft) 27px, var(--line-soft) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, var(--line-soft) 27px, var(--line-soft) 28px),
    var(--paper);
  color:var(--ink); font-family:'Public Sans',-apple-system,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased;
}
[id]{ scroll-margin-top:84px; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 28px; }
h1,h2,h3{ font-family:'Zilla Slab',Georgia,serif; margin:0; letter-spacing:-0.01em; color:var(--ink); }
.eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.14em;
          text-transform:uppercase; color:var(--gold); font-weight:600; }
.mono{ font-family:'IBM Plex Mono',monospace; }
a{ color:var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
::selection{ background:var(--gold-bg); color:var(--navy); }

/* Top bar */
.topbar{ position:sticky; top:0; z-index:40; background:rgba(239,238,230,.93);
         backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:15px 28px; gap:16px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand svg{ flex:none; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-family:'Zilla Slab',serif; font-weight:700; font-size:20px; letter-spacing:-0.015em; color:var(--navy); }
.brand-name .accent, .fbrand .accent{ color:var(--gold); }
.brand-tag{ color:var(--muted); font-weight:500; font-size:11.5px; margin-top:4px; }
@media (max-width:640px){ .brand-tag{ display:none; } }
.topnav{ display:flex; align-items:center; gap:24px; }
.topnav a{ text-decoration:none; font-size:14px; color:var(--navy); font-weight:600; }
.topnav a:hover{ color:var(--gold); }
.topnav a.btn-primary, .topnav a.btn-primary:hover{ color:var(--paper); }
.topnav a[aria-current="page"]{ color:var(--gold); }
@media (max-width:860px){ .topnav a.hide-mobile{ display:none; } }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:700; font-size:14px;
      padding:12px 20px; border-radius:3px; text-decoration:none; border:1px solid var(--navy); cursor:pointer;
      font-family:'Public Sans',sans-serif; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn-primary{ background:var(--navy); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 4px 0 0 rgba(20,33,61,.25); }
.btn-gold{ background:var(--gold-lt); color:var(--navy); border-color:var(--gold-lt); }
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 4px 0 0 rgba(140,95,10,.3); }
.btn-ghost{ background:transparent; color:var(--gold); border-color:var(--gold); }
.btn-ghost:hover{ background:var(--gold-bg); }
.btn-sm{ padding:9px 14px; font-size:13px; }

/* Sections */
section{ padding:60px 0; border-top:1px solid var(--line); }
section.first{ border-top:none; }
.section-head{ max-width:660px; margin-bottom:30px; }
.section-head h2{ font-size:clamp(24px,3vw,34px); margin-top:10px; }
.section-head p{ color:var(--muted); font-size:15.5px; line-height:1.6; margin-top:12px; }

/* Page hero (free modules) */
.page-hero{ padding:58px 0 46px; }
.page-hero h1{ font-size:clamp(32px,4.4vw,52px); line-height:1.06; margin:14px 0 18px; max-width:18ch; }
.page-hero .lede{ font-size:17px; line-height:1.65; color:var(--muted); max-width:58ch; margin:0 0 26px; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.hero-split{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; }
@media (max-width:920px){ .hero-split{ grid-template-columns:1fr; gap:34px; } }
.release{ margin:0; }
.release-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:18px; }
.cell{ border:1px solid var(--line); border-radius:3px; padding:10px 10px 9px; background:var(--paper); min-height:64px;
       display:flex; flex-direction:column; justify-content:space-between; gap:6px; text-decoration:none; color:var(--muted); }
.cell .code{ font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--navy); }
.cell .st{ font-size:11.5px; line-height:1.2; }
a.cell.open{ background:var(--ok-bg); border-color:rgba(47,104,68,.4); color:var(--ok); font-weight:600; }
a.cell.open:hover{ border-color:var(--ok); }
.release figcaption{ padding:11px 18px 14px; font-size:12.5px; color:var(--muted); border-top:1px dashed var(--line); line-height:1.5; }
@media (max-width:600px){ .release{ display:none; } }

/* ===== Free modules: the lesson window ===== */
.module{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr); gap:34px; align-items:start; }
@media (max-width:920px){ .module{ grid-template-columns:1fr; gap:26px; } }
.module-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:12px; }
.mcode{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--paper);
        background:var(--navy); padding:3px 8px; border-radius:2px; }
.badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
        padding:3px 8px; border-radius:2px; }
.badge.free{ background:var(--ok-bg); color:var(--ok); }
.module h2{ font-size:clamp(24px,3vw,32px); line-height:1.15; margin-bottom:18px; }

.window{ background:var(--card); border:1px solid var(--line); border-radius:5px; overflow:hidden;
         box-shadow:0 26px 60px -30px rgba(20,33,61,.4); }
.window-bar{ display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--navy); color:#DCE2F0; }
.window-bar .d{ width:9px; height:9px; border-radius:50%; display:inline-block; }
.window-bar .d.r{ background:#D77664; } .window-bar .d.a{ background:#E4B155; } .window-bar .d.g{ background:#7FBE95; }
.window-bar .file{ font-family:'IBM Plex Mono',monospace; font-size:12px; margin-left:6px; opacity:.85;
                   white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-frame{ position:relative; aspect-ratio:16/9; background:#0E1830; }
.player-frame iframe, .player-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000; }
.player-empty{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:24px;
               color:#B9C2DA; font-size:14.5px; line-height:1.6; }
.player-empty strong{ display:block; color:#fff; font-family:'Zilla Slab',serif; font-size:20px; margin-bottom:6px; }
.player-empty a{ color:var(--gold-lt); font-weight:700; }
.lesson-list{ list-style:none; margin:0; padding:8px; display:flex; flex-direction:column; gap:4px;
              border-top:1px solid var(--line); background:var(--paper-2); }
.lesson-list button{ width:100%; text-align:left; display:flex; gap:12px; align-items:baseline; cursor:pointer;
                     font:inherit; font-size:14px; color:var(--ink); background:transparent; border:1px solid transparent;
                     border-radius:3px; padding:9px 11px; }
.lesson-list button:hover{ background:var(--card); border-color:var(--line); }
.lesson-list button[aria-current="true"]{ background:var(--card); border-color:var(--gold); font-weight:600; }
.lesson-list .n{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--gold); flex:none; }

.notes h3{ font-family:'Public Sans',sans-serif; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
           color:var(--muted); margin:0 0 10px; }
.notes p{ margin:0 0 20px; font-size:15px; line-height:1.65; color:var(--ink); }
.notes .block{ margin-bottom:24px; }
.cap-list{ list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:4px; background:var(--card); }
.cap-list li{ display:flex; gap:12px; padding:9px 12px; font-size:14px; line-height:1.45; border-bottom:1px dashed var(--line); }
.cap-list li:last-child{ border-bottom:none; }
.cap-list .n{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--gold); flex:none; padding-top:1px; }
.downloads{ list-style:none; margin:0; padding:0; }
.downloads li{ margin-bottom:8px; }
.downloads a{ font-weight:700; font-size:14px; color:var(--navy); }
.downloads a:hover{ color:var(--gold); }
.next-link{ display:inline-flex; margin-top:6px; font-weight:700; font-size:14px; color:var(--gold); text-decoration:none; }
.next-link:hover{ text-decoration:underline; }

/* Signup band */
.signup{ background:var(--navy); border-radius:6px; padding:32px 34px;
         display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; }
@media (max-width:760px){ .signup{ grid-template-columns:1fr; gap:18px; padding:28px 24px; } }
.signup h2, .signup h3{ color:#fff; font-size:clamp(21px,2.6vw,26px); margin-bottom:8px; }
.signup p{ margin:0; font-size:14.5px; line-height:1.6; color:#B9C2DA; }
.capture-form{ display:flex; gap:9px; flex-wrap:wrap; }
.capture-form input{ flex:1; min-width:180px; padding:12px 14px; font-size:14px; font-family:'Public Sans',sans-serif;
                     border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; border-radius:3px; }
.capture-form input::placeholder{ color:#8792AF; }
.form-status{ font-size:13px; line-height:1.55; color:#DCE2F0; margin:10px 0 0; min-height:0; }
.form-status:empty{ display:none; }
.form-status a{ color:var(--gold-lt); font-weight:700; }

.xsell{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:22px; }
@media (max-width:760px){ .xsell{ grid-template-columns:1fr; } }
.xcard{ display:block; text-decoration:none; color:inherit; background:var(--card); border:1px solid var(--line);
        border-radius:4px; padding:22px 24px; transition:transform .15s ease, box-shadow .15s ease; }
.xcard:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(20,33,61,.4); }
.xcard h3{ font-size:19px; margin-bottom:6px; }
.xcard p{ margin:0 0 10px; font-size:14px; color:var(--muted); line-height:1.55; }
.xcard .go{ font-size:13.5px; font-weight:700; color:var(--gold); }

/* Prose pages: privacy, terms, refunds, contact */
.prose-page{ padding:56px 0 70px; }
.prose{ max-width:720px; background:var(--card); border:1px solid var(--line); border-radius:6px; padding:44px 48px; }
@media (max-width:640px){ .prose{ padding:30px 22px; } }
.prose h1{ font-size:clamp(30px,4vw,42px); line-height:1.1; margin:10px 0 8px; }
.prose .updated{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); margin:0 0 28px; }
.prose h2{ font-size:22px; margin:34px 0 10px; }
.prose p, .prose li{ font-size:15.5px; line-height:1.7; color:#2B2B26; }
.prose p{ margin:0 0 14px; }
.prose ul{ margin:0 0 14px; padding-left:20px; }
.prose li{ margin-bottom:6px; }
.prose a{ color:var(--navy); font-weight:600; }
.prose a:hover{ color:var(--gold); }
.prose .lead{ font-size:17px; color:var(--muted); }
.callout{ background:var(--gold-bg); border:1px solid rgba(140,95,10,.22); border-radius:4px; padding:18px 20px; margin:6px 0 22px; }
.callout p{ margin:0; }
.email-big{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:clamp(17px,2.4vw,22px); font-weight:600;
            color:var(--navy); text-decoration:none; border-bottom:2px solid var(--gold-lt); padding-bottom:2px; }
.email-big:hover{ color:var(--gold); }

/* 404 and thanks */
.status-page{ padding:80px 0 90px; }
.status-inner{ max-width:640px; }
.cell-error{ display:inline-flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line);
             border-radius:4px; padding:8px 14px 8px 8px; box-shadow:0 18px 40px -26px rgba(20,33,61,.45); }
.cell-error .ref{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); background:var(--paper-2);
                  border:1px solid var(--line); padding:4px 8px; border-radius:2px; }
.cell-error .val{ font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:600; color:var(--bad); }
.cell-error .val.ok{ color:var(--ok); }
.status-page h1{ font-size:clamp(32px,4.6vw,50px); line-height:1.06; margin:26px 0 14px; }
.status-page p{ font-size:16.5px; line-height:1.65; color:var(--muted); margin:0 0 26px; max-width:52ch; }
.link-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:560px; }
@media (max-width:520px){ .link-grid{ grid-template-columns:1fr; } }
.link-grid a{ display:block; background:var(--card); border:1px solid var(--line); border-radius:3px; padding:13px 15px;
              text-decoration:none; color:var(--navy); font-weight:700; font-size:14.5px; }
.link-grid a:hover{ border-color:var(--gold); color:var(--gold); }
.link-grid a span{ display:block; font-weight:400; font-size:12.5px; color:var(--muted); margin-top:3px; }

/* Footer */
footer{ padding:38px 0 30px; border-top:1px solid var(--line); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.fbrand{ display:flex; align-items:center; gap:9px; font-family:'Zilla Slab',serif; font-weight:700; font-size:17px;
         color:var(--navy); text-decoration:none; }
.footer-links{ display:flex; gap:16px 18px; font-size:13px; flex-wrap:wrap; }
.footer-links a{ text-decoration:none; color:var(--muted); }
.footer-links a:hover{ color:var(--gold); text-decoration:underline; }
.footer-note{ font-size:12px; color:var(--muted); margin-top:16px; max-width:80ch; line-height:1.6; }

/* Section tabs at the bottom of the free modules page */
body.has-tabbar{ padding-bottom:76px; }
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--navy);
         border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:center; padding-top:8px; }
.tabbar-inner{ display:flex; gap:3px; max-width:var(--max); width:100%; padding:0 16px; overflow-x:auto; }
.sheet-tab{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#AEB8D6;
            background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-bottom:none;
            padding:9px 15px 8px; border-radius:5px 5px 0 0; text-decoration:none; white-space:nowrap;
            transition:background .15s ease,color .15s ease; }
.sheet-tab:hover{ background:rgba(255,255,255,.12); color:#fff; }
.sheet-tab.active{ background:var(--gold-lt); color:var(--navy); font-weight:600; border-color:var(--gold-lt); }
@media (max-width:560px){ .sheet-tab{ padding:8px 10px 7px; font-size:10.5px; } }

@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } html{ scroll-behavior:auto; } }
