/* moatproof — production landing page styles
   Derived from the Moatproof Design System (tokens + component specs). */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Schibsted+Grotesk:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
/* base */
--paper-1:#F7F5F1;--paper-2:#EFECE5;--paper-3:#E7E3D9;
--ink-1:#15201F;--ink-2:#3C4A48;--ink-3:#68756F;
--moat-1:#0E3B3E;--moat-2:#0A2C2E;--moat-tint:#E2EAE8;--moat-on:#F7F5F1;
--hairline:#DAD5CA;--rule-strong:#15201F;
/* M-scale */
--m1:#2E7D5B;--m2:#7C8C3F;--m3:#C2973B;--m4:#BC6B2E;--m5:#A63A2E;
--m1-tint:#E4EFE9;--m2-tint:#EDEFDD;--m3-tint:#F5EDD9;--m4-tint:#F5E6D8;--m5-tint:#F3DFDB;
/* semantic */
--surface-page:var(--paper-1);--surface-card:#FCFBF8;--surface-sunken:var(--paper-2);--surface-inverse:var(--ink-1);
--text-body-c:var(--ink-1);--text-muted:var(--ink-2);--text-faint:var(--ink-3);--text-on-inverse:var(--paper-1);
--accent:var(--moat-1);--accent-hover:var(--moat-2);--accent-tint:var(--moat-tint);
--focus-ring:0 0 0 2px var(--paper-1),0 0 0 4px var(--moat-1);
--scrim:rgba(21,32,31,.44);
/* type */
--font-serif-display:'Newsreader',Georgia,serif;
--font-sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
--text-display-xl:600 64px/1.05 var(--font-serif-display);
--text-display:600 44px/1.1 var(--font-serif-display);
--text-title:600 28px/1.2 var(--font-serif-display);
--text-heading:600 20px/1.3 var(--font-sans);
--text-body-lg:400 18px/1.55 var(--font-sans);
--text-body:400 15px/1.55 var(--font-sans);
--text-small:400 13px/1.45 var(--font-sans);
--text-label:500 11px/1.2 var(--font-mono);--label-tracking:.08em;
--text-figure:500 24px/1.1 var(--font-mono);
--text-figure-lg:500 40px/1.05 var(--font-mono);
/* spacing / effects */
--space-3:12px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-10:80px;
--container-max:1120px;
--radius-xs:2px;--radius-sm:4px;--radius-pill:999px;
--shadow-card:0 1px 2px rgba(21,32,31,.06);
--shadow-overlay:0 12px 32px rgba(21,32,31,.16);
--dur:160ms;--ease-out:cubic-bezier(.2,.7,.3,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:var(--text-body);color:var(--text-body-c);background:var(--surface-page);-webkit-font-smoothing:antialiased}
a{color:var(--moat-1);text-decoration:none}
a:hover{color:var(--moat-2);text-decoration:underline}

.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-6)}
.mono-label{font:var(--text-label);font-family:var(--font-mono);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-faint)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out);text-decoration:none}
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.btn-md{padding:10px 20px;font-size:15px}
.btn-sm{padding:6px 14px;font-size:13px}
.btn-lg{padding:13px 26px;font-size:16px}
.btn-primary{background:var(--moat-1);color:var(--moat-on);border:1px solid var(--moat-1)}
.btn-primary:hover{background:var(--moat-2);border-color:var(--moat-2)}
.btn-ghost{background:transparent;color:var(--moat-1);border:1px solid transparent}
.btn-ghost:hover{background:var(--moat-tint);text-decoration:none;color:var(--moat-1)}

/* header */
.site-header{border-bottom:1px solid var(--hairline);background:var(--paper-1);position:sticky;top:0;z-index:50}
.site-header .wrap{display:flex;align-items:center;gap:32px;height:64px}
.wordmark{font:600 22px/1 var(--font-serif-display);color:var(--ink-1)}
.site-nav{display:flex;gap:24px;flex:1;font:var(--text-small)}
.site-nav a{color:var(--ink-2)}

/* hero */
.hero{border-bottom:1px solid var(--hairline)}
.hero .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;padding-top:var(--space-10);padding-bottom:var(--space-10)}
.hero h1{font:var(--text-display-xl);letter-spacing:-.015em;margin:0 0 20px;color:var(--ink-1)}
.hero .lede{font:var(--text-body-lg);color:var(--text-muted);max-width:460px;margin:0 0 28px}
.hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}

/* card */
.card{background:var(--surface-card);border:1px solid var(--hairline);border-top:2px solid var(--ink-1);border-radius:var(--radius-sm);box-shadow:var(--shadow-card)}
.card-body{padding:var(--space-5)}
.card-title{font:600 20px/1.25 var(--font-serif-display);color:var(--ink-1);margin:0 0 10px}
.card .mono-label{margin-bottom:6px}
.card-footer{border-top:1px solid var(--hairline);padding:var(--space-3) var(--space-5);font:var(--text-small);color:var(--text-faint)}

/* stat */
.stat .mono-label{margin-bottom:6px}
.stat-value{font:var(--text-figure-lg);color:var(--ink-1)}

/* score chips */
.chip{display:inline-flex;align-items:center;border-radius:var(--radius-pill);font:600 13px/1 var(--font-mono);letter-spacing:.02em;height:26px;padding:0 11px;color:var(--paper-1)}
.chip-sm{height:20px;font-size:11px;padding:0 8px}
.chip.m1{background:var(--m1)}.chip.m2{background:var(--m2)}.chip.m3{background:var(--m3)}.chip.m4{background:var(--m4)}.chip.m5{background:var(--m5)}

/* badge */
.badge{display:inline-block;font:var(--text-label);font-family:var(--font-mono);letter-spacing:var(--label-tracking);text-transform:uppercase;border-radius:var(--radius-xs);padding:4px 8px}
.badge-success{background:var(--m1-tint);color:var(--m1)}
.badge-warning{background:var(--m3-tint);color:var(--m3)}

/* ledger table */
.ledger{width:100%;border-collapse:collapse;font:var(--text-small)}
.ledger th{font:var(--text-label);font-family:var(--font-mono);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-faint);text-align:left;padding:6px 0;border-bottom:2px solid var(--ink-1)}
.ledger th.num{text-align:right}
.ledger td{padding:8px 0;border-bottom:1px solid var(--hairline)}
.ledger td.num{text-align:right}
.hero-stats{display:flex;gap:28px;margin-bottom:18px}

/* readers */
.readers{background:var(--surface-sunken);border-bottom:1px solid var(--hairline)}
.readers .wrap{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.readers .mono-label{margin-bottom:12px}
.readers h2{font:var(--text-display);margin:0 0 40px;color:var(--ink-1)}
.readers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.readers-grid p{margin:0;font:var(--text-body);color:var(--text-muted)}

/* m-scale */
.scale{background:var(--surface-inverse);color:var(--text-on-inverse)}
.scale .wrap{padding-top:var(--space-8);padding-bottom:var(--space-8);display:grid;grid-template-columns:1fr 1.4fr;gap:64px}
.scale .mono-label{color:rgba(247,245,241,.55);margin-bottom:12px}
.scale h2{font:var(--text-display);margin:0;color:var(--paper-1)}
.scale .intro{font:var(--text-body);color:rgba(247,245,241,.7);max-width:380px;margin-top:16px}
.scale-row{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(247,245,241,.16)}
.scale-row .name{width:120px;font:600 16px/1.3 var(--font-sans);color:var(--paper-1)}
.scale-row .desc{flex:1;font:var(--text-small);color:rgba(247,245,241,.7)}

/* governance / AI act */
.act{border-bottom:1px solid var(--hairline)}
.act .wrap{padding-top:var(--space-8);padding-bottom:var(--space-8);display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.act .mono-label{margin-bottom:12px}
.act h2{font:var(--text-display);margin:0 0 16px;color:var(--ink-1)}
.act .body{font:var(--text-body-lg);color:var(--text-muted);margin:0 0 24px}
.act-list{display:grid;gap:12px}
.act-item{display:flex;align-items:center;gap:16px;background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:14px 18px}
.act-item .mono-label{width:96px;margin:0}
.act-item .co{flex:1;font:var(--text-body)}

/* footer */
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse)}
.site-footer .wrap{padding-top:var(--space-7);padding-bottom:var(--space-7);display:flex;align-items:baseline;gap:40px;flex-wrap:wrap}
.site-footer .wordmark{color:var(--paper-1);font-size:20px}
.site-footer nav{display:flex;gap:24px;flex:1;font:var(--text-small)}
.site-footer nav a{color:rgba(247,245,241,.7)}
.site-footer .mono-label{color:rgba(247,245,241,.45)}

/* dialog */
.dialog-scrim{position:fixed;inset:0;background:var(--scrim);display:none;align-items:center;justify-content:center;z-index:100}
.dialog-scrim.open{display:flex}
.dialog{width:480px;max-width:calc(100vw - 48px);background:var(--surface-card);border:1px solid var(--hairline);border-top:2px solid var(--ink-1);border-radius:var(--radius-sm);box-shadow:var(--shadow-overlay)}
.dialog-body{padding:var(--space-5)}
.dialog-title{font:600 22px/1.25 var(--font-serif-display);color:var(--ink-1);margin:0 0 12px}
.dialog-fields{display:grid;gap:14px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;padding:var(--space-3) var(--space-5);border-top:1px solid var(--hairline)}
.field label{display:block;font:var(--text-label);font-family:var(--font-mono);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.field input,.field select{display:block;width:100%;font:var(--text-body);font-family:var(--font-sans);color:var(--ink-1);background:var(--surface-card);border:1px solid var(--hairline);border-radius:var(--radius-sm);padding:9px 12px}
.field input:focus,.field select:focus{outline:none;border-color:var(--moat-1)}

/* subpages */
.site-nav a.active{color:var(--ink-1);font-weight:600}
.page-hero{border-bottom:1px solid var(--hairline)}
.page-hero .wrap{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.page-hero h1{font:var(--text-display);letter-spacing:-.01em;margin:0 0 16px;color:var(--ink-1)}
.page-hero .lede{font:var(--text-body-lg);color:var(--text-muted);max-width:620px;margin:0}
.page-section{border-bottom:1px solid var(--hairline)}
.page-section .wrap{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.page-section h2{font:var(--text-title);margin:0 0 16px;color:var(--ink-1)}
.page-section .mono-label{margin-bottom:12px}
.prose{font:var(--text-body-lg);color:var(--text-muted);max-width:620px}
.prose p{margin:0 0 18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.def-row{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hairline)}
.def-row .term{width:180px;flex-shrink:0;font:600 15px/1.4 var(--font-sans);color:var(--ink-1)}
.def-row .desc{flex:1;font:var(--text-body);color:var(--text-muted)}
.cta-band{background:var(--surface-sunken)}
.cta-band .wrap{padding-top:var(--space-7);padding-bottom:var(--space-7);display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.cta-band .lead{flex:1;font:var(--text-title);color:var(--ink-1);min-width:260px}

/* responsive */
@media (max-width:960px){
  .hero .wrap,.scale .wrap,.act .wrap,.split{grid-template-columns:1fr;gap:40px}
  .readers-grid{grid-template-columns:1fr}
  .def-row{flex-direction:column;gap:4px}
  .def-row .term{width:auto}
  .hero h1{font:600 44px/1.08 var(--font-serif-display)}
  .site-nav{display:none}
}