/* Resolved — shared design system.
   Tokens, fonts, base elements, header, and the dark CTA are defined once here
   and reused by every page. Page-specific styles stay inline in each page.
   Fonts are self-hosted (latin subset) under /fonts — no third-party CDN, and
   deterministic for the visual-QA screenshot suite. */

@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/hankengrotesk-400.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/hankengrotesk-500.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/hankengrotesk-600.woff2') format('woff2');}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/hankengrotesk-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibmplexmono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibmplexmono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibmplexmono-600.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/newsreader-400-italic.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/newsreader-500.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/newsreader-600.woff2') format('woff2');}

:root {
  --paper:#FBFAF7; --surface:#FFFFFF; --ink:#1A1A17; --ink2:#56524A;
  --ink3:#8C877C; --line:#ECE8E0; --line2:#DCD7CC; --indigo:#2D34B0;
  --indigo-d:#232888; --indigo-soft:#EEEFFB; --green:#1B7A4F;
  --green-soft:#E7F2EC; --red:#B53D26; --red-soft:#FAEAE5; --amber:#9A6B12;
  --amber-soft:#F6EFDC; --th-bg:#F4F2EC; --callout-bd:#DEE0F6;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Hanken Grotesk",-apple-system,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink);
       font:16px/1.55 var(--sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; }
::selection { background:#2D34B0; color:#fff; }
[hidden] { display:none !important; }

.mono { font-family:var(--mono); }
.pos { color:var(--green); }
.neg { color:var(--red); }

.main { max-width:1120px; margin:0 auto; padding:0 28px; }

/* primary action button (also used as the dark-CTA / form submit) */
.btn-primary { font-family:var(--sans); font-size:15.5px; font-weight:600;
               padding:16px 30px; border-radius:12px; border:0; background:var(--indigo);
               color:#fff; white-space:nowrap; cursor:pointer; }
.btn-primary:hover { background:var(--indigo-d); }

/* ===== header (identical on every page) ===== */
header { border-bottom:1px solid var(--line); }
.hdr { max-width:1120px; margin:0 auto; padding:22px 28px;
       display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-family:var(--serif); font-size:23px; font-weight:600;
            letter-spacing:-0.015em; text-decoration:none; color:inherit; }
.wordmark .dot { color:var(--indigo); }
nav { display:flex; align-items:center; gap:28px; font-size:14.5px; color:var(--ink2); }
nav a { text-decoration:none; cursor:pointer; white-space:nowrap; }
nav a:hover { color:var(--ink); }
nav a.active { color:var(--ink); font-weight:600; }
.pill-signin { border:1px solid var(--line2); padding:8px 16px; border-radius:9px;
               white-space:nowrap; color:var(--ink); font-weight:600; }

/* ===== dark CTA band (shared by the marketing pages) ===== */
.cta-dark { margin-top:72px; background:var(--ink); border-radius:22px;
            padding:56px 48px; color:#fff; }
.cta-dark h2 { font-family:var(--serif); font-weight:500;
               font-size:clamp(28px,3.6vw,40px); letter-spacing:-0.018em;
               margin:0 0 14px; max-width:22ch; }
.cta-dark p { font-size:17px; color:#C9C5BC; max-width:54ch; margin:0 0 30px; line-height:1.55; }
.cta-dark .row { display:flex; gap:12px; flex-wrap:wrap; }
.cta-dark a { text-decoration:none; font-size:15.5px; font-weight:600;
              padding:15px 28px; border-radius:12px; }
.cta-dark a.light { background:#fff; color:var(--ink); }
.cta-dark a.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); }

/* ===== shared marketing primitives ===== */
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:0.16em;
           text-transform:uppercase; color:var(--indigo); margin-bottom:22px; }
.section-title { font-family:var(--serif); font-weight:500; font-size:28px;
                 letter-spacing:-0.018em; margin:0 0 20px; }

/* ===== form inputs (sign-in, prompts) — indigo focus ring ===== */
.fld { width:100%; font-size:15px; padding:13px 15px; border-radius:11px;
       border:1.5px solid var(--line2); background:var(--surface); color:var(--ink);
       font-family:var(--sans); outline:none; }
.fld:focus { border-color:var(--indigo); box-shadow:0 0 0 4px var(--indigo-soft); }
/* pricing tier <button> reusing the .cta look */
.buybtn { font:inherit; cursor:pointer; width:100%; }

/* ===== app shell (authenticated pages: report / dashboard / cpa) ===== */
.app { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side { border-right:1px solid var(--line); padding:24px 18px; position:sticky; top:0;
        height:100vh; display:flex; flex-direction:column; gap:6px; background:var(--paper); }
.side .brand { font-family:var(--serif); font-size:22px; font-weight:600;
               letter-spacing:-0.015em; text-decoration:none; color:inherit; padding:6px 10px 18px; }
.side .brand .dot { color:var(--indigo); }
.navitem { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink2);
           font-size:14.5px; font-weight:500; padding:10px 10px; border-radius:9px; }
.navitem .nd { width:6px; height:6px; border-radius:2px; background:var(--line2); flex:none; }
.navitem:hover { color:var(--ink); }
.navitem.active { color:var(--ink); font-weight:600; background:var(--indigo-soft); }
.navitem.active .nd { background:var(--indigo); }
/* shared sidebar (rendered by app.js): justified nav rows + Pro/Soon tags + sign-out */
.sidenav { display:flex; flex-direction:column; gap:2px; }
.navitem { justify-content:space-between; }
.navleft { display:flex; align-items:center; gap:10px; }
.navtag { font-family:var(--mono); font-size:10px; letter-spacing:0.04em; text-transform:uppercase;
          border-radius:5px; padding:2px 6px; }
.navtag.lock { color:var(--amber); background:var(--amber-soft); }
.navtag.soon { color:var(--ink3); background:#EFEDE6; }
.side .infocard { margin-top:auto; background:var(--surface); border:1px solid var(--line);
                  border-radius:12px; padding:14px; font-size:12.5px; color:var(--ink3); line-height:1.5; }
.side .infocard .signout { color:var(--indigo); font-weight:600; text-decoration:none; font-size:12.5px; }
.topbar { position:sticky; top:0; z-index:5; background:var(--paper);
          border-bottom:1px solid var(--line); padding:18px 32px;
          display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar .ttl { font-family:var(--serif); font-size:25px; font-weight:500; letter-spacing:-0.015em; margin:2px 0 0; }
.appmain { padding:32px; max-width:1180px; }
@media (max-width:860px) {
  .app { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
          border-right:0; border-bottom:1px solid var(--line); }
  .side .infocard { display:none; }
}