*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-surface-page);color:var(--color-text-primary);font-family:var(--font-display);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:700}
h1{font-size:var(--text-display-hero);line-height:var(--leading-display-hero);letter-spacing:var(--tracking-display-hero)}
h2{font-size:var(--text-heading-xl);line-height:var(--leading-heading-xl);letter-spacing:var(--tracking-heading-xl)}
h3{font-size:var(--text-heading-lg);line-height:var(--leading-heading-lg);letter-spacing:var(--tracking-heading-lg)}
p{margin:0 0 var(--space-4)}
a{color:var(--color-link);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
a:hover{color:var(--color-ink)}
:focus-visible{outline:3px solid var(--color-action-focus);outline-offset:2px}
.muted{color:var(--color-text-muted)}
.mono,.kicker,.badge,.caption{font-family:var(--font-mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* Kicker — mono eyebrow, one per section only */
.kicker{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-kicker);font-weight:500;letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--color-text-muted);margin:0 0 var(--space-4)}
.kicker::before{content:"";width:8px;height:8px;background:var(--color-cobalt)}
.kicker--alert{color:var(--color-signal)} .kicker--alert::before{background:var(--color-signal)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:0 var(--space-6);border:2px solid var(--color-ink);border-radius:var(--radius-none);background:transparent;color:var(--color-ink);font:700 1rem/1 var(--font-display);letter-spacing:-0.01em;cursor:pointer;text-decoration:none;transition:box-shadow .12s,transform .12s,background .12s}
.btn:hover{box-shadow:var(--shadow-offset-ink);transform:translate(-2px,-2px)}
.btn:active{box-shadow:none;transform:none}
.btn:disabled,.btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.btn--primary{background:var(--color-action-primary);border-color:var(--color-action-primary);color:var(--color-text-on-action)}
.btn--primary:hover{background:var(--color-action-hover);border-color:var(--color-action-hover)}
.btn--onink{background:var(--color-cobalt);border-color:var(--color-cobalt);color:#fff}
.btn--onink:hover{background:var(--color-cobalt-ink);border-color:var(--color-cobalt-ink);box-shadow:var(--shadow-offset-paper)}
.btn--ghost{border-color:transparent;padding:0 var(--space-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.btn--ghost:hover{box-shadow:none;transform:none;color:var(--color-link)}
.btn--sm{min-height:38px;padding:0 var(--space-4);font-size:.9rem}

/* Inputs */
.field{display:grid;gap:var(--space-2)}
.field label{font:500 .8rem/1.2 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted)}
.input{width:100%;min-height:48px;padding:0 var(--space-4);border:2px solid var(--color-ink);border-radius:0;background:var(--color-surface-alt);color:var(--color-ink);font:400 1rem/1 var(--font-display)}
.input::placeholder{color:#8a91a0}
.input:focus{outline:3px solid var(--color-action-focus);outline-offset:2px}
.input[aria-invalid=true]{border-color:var(--color-signal);box-shadow:var(--shadow-offset-signal)}
.input:disabled{opacity:.5;background:var(--color-surface-page)}
.field .error{font:400 .8rem/1.3 var(--font-mono);color:var(--color-signal)}

/* Cards */
.card{background:var(--color-surface-alt);border:2px solid var(--color-ink);border-radius:0;box-shadow:var(--shadow-offset-ink);padding:var(--space-6)}
.card--tint{background:var(--color-surface-tint)}
.card--alert{background:var(--color-surface-alert);box-shadow:var(--shadow-offset-signal)}
.card--inverse{background:var(--color-surface-inverse);color:var(--color-text-on-inverse);border-color:var(--color-ink);box-shadow:var(--shadow-offset-cobalt)}
.card--featured{box-shadow:var(--shadow-offset-cobalt);border-color:var(--color-cobalt)}
.card h3{margin-bottom:var(--space-3)}

/* Ruled grid — the Signal layout primitive */
.ruled{display:grid;gap:2px;background:var(--color-ink);border:2px solid var(--color-ink)}
.ruled>*{background:var(--color-surface-alt);padding:var(--space-6)}
.ruled--2{grid-template-columns:repeat(2,1fr)} .ruled--3{grid-template-columns:repeat(3,1fr)} .ruled--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.ruled--3,.ruled--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ruled--2,.ruled--3,.ruled--4{grid-template-columns:1fr}}

/* Metric */
.metric{display:grid;gap:var(--space-1)}
.metric b{font-size:var(--text-metric);line-height:1;letter-spacing:-0.02em}
.metric span{font:400 .75rem/1.4 var(--font-mono);letter-spacing:.02em;color:var(--color-text-muted)}
.metric--alert b{color:var(--color-signal)}

/* Callout */
.callout{padding:var(--space-4) var(--space-5);border-left:4px solid var(--color-cobalt);background:var(--color-surface-tint)}
.callout--alert{border-color:var(--color-signal);background:var(--color-surface-alert)}
.callout--success{border-color:var(--color-success);background:#e9f5ef}

/* Badge */
.badge{display:inline-block;padding:3px 8px;border:1px solid var(--color-hair);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;background:var(--color-surface-alt)}
.badge--alert{background:var(--color-signal);border-color:var(--color-signal);color:#fff}
.badge--success{background:var(--color-success);border-color:var(--color-success);color:#fff}
.badge--tint{background:var(--color-surface-tint);border-color:var(--color-cobalt-soft);color:var(--color-cobalt-ink)}

/* Pricing */
.price{display:grid;gap:var(--space-4)}
.price .amount{font-size:var(--text-metric);font-weight:700;letter-spacing:-0.02em;line-height:1}
.price .amount small{font:400 .8rem var(--font-mono);letter-spacing:.02em;color:var(--color-text-muted);margin-left:4px}
.price ul{list-style:none;margin:0;padding:0;border-top:2px solid var(--color-ink)}
.price li{padding:var(--space-3) 0;border-bottom:1px solid var(--color-hair);display:flex;gap:var(--space-2);align-items:flex-start}
.price li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;background:var(--color-cobalt)}

/* Header */
.nav{position:sticky;top:0;z-index:20;height:var(--nav-h);background:var(--color-surface-alt);border-bottom:2px solid var(--color-ink)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)}
.nav ul{display:flex;gap:var(--space-6);list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;color:var(--color-ink);font-weight:500}
.nav ul a:hover{color:var(--color-link)}
@media(max-width:900px){.nav ul{display:none}}

/* Modal */
.modal-root{position:fixed;inset:0;display:grid;place-items:center;background:rgba(14,17,22,.7);z-index:50;padding:var(--space-6)}
.modal{width:min(560px,100%);background:var(--color-surface-alt);border:2px solid var(--color-ink);box-shadow:var(--shadow-offset-cobalt);padding:var(--space-8)}
.modal header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4)}
[hidden]{display:none !important}

/* Footer */
.footer{background:var(--color-surface-inverse);color:var(--color-text-on-inverse);padding:var(--space-14) 0 var(--space-8);border-top:2px solid var(--color-ink)}
.footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-8)}
.footer h4{font:500 .75rem/1.2 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#aab1bf;margin-bottom:var(--space-4)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.footer a{color:#fff;text-decoration:none} .footer a:hover{text-decoration:underline}
.footer .legal{margin-top:var(--space-11);padding-top:var(--space-6);border-top:1px solid #2a2f38;font:400 .75rem/1.6 var(--font-mono);color:#aab1bf}
@media(max-width:900px){.footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer .cols{grid-template-columns:1fr}}

/* Section rhythm */
.section{padding:var(--space-22) 0;border-top:2px solid var(--color-ink)}
.section--alt{background:var(--color-surface-alt)}
@media(max-width:640px){.section{padding:var(--space-14) 0} .card{padding:var(--space-5)} :root{--gutter:18px}}