/* SPEK marketing site styles — layout/composition from the owner-approved
 * reference (Downloads/SPEK Homepage.html, 2026-08-16), which is built on the
 * same SPEK token set as the app.
 *
 * TOKENS ARE A COPY. Source of truth: styles/tokens/colors.css and
 * styles/tokens/typography.css in this repo — edit there, re-copy here.
 * This folder deploys standalone (no build step), so it cannot @import
 * across the repo root. Verified: the reference's own token block is
 * byte-equivalent to the app's.
 */
:root{
/* Brand */
--spek-red:#FF3B24;
--spek-red-600:#E42F1A;
--spek-red-700:#C42413;
--spek-red-100:#FFE3DF;
--spek-red-50:#FFF2F0;
--near-black:#111315;
--warm-white:#F7F6F2;
--white:#FFFFFF;
--soft-gray:#E9E8E4;

/* Neutral ramp (cool-neutral, derived from Near Black) */
--n-0:#FFFFFF;
--n-25:#FAFAF8;
--n-50:#F7F6F2;
--n-100:#EFEEEA;
--n-200:#E9E8E4;
--n-300:#D7D6D1;
--n-400:#B4B3AE;
--n-500:#8A8C8E;
--n-600:#5F6265;
--n-700:#3C4043;
--n-800:#232629;
--n-900:#111315;

/* Semantic status */
--status-ok:#1F7A4D;
--status-ok-bg:#E7F3EC;
--status-warn:#B4740A;
--status-warn-bg:#FBF1DF;
--status-danger:#C42413;
--status-danger-bg:#FDE9E6;
--status-info:#2A5C8A;
--status-info-bg:#E8F0F7;

/* Surfaces */
--surface-page:var(--warm-white);
--surface-card:var(--white);
--surface-sunken:var(--n-100);
--surface-inverse:var(--near-black);
--surface-accent-soft:var(--spek-red-50);
--surface-hover:var(--n-50);

/* Text */
--text-primary:var(--near-black);
--text-secondary:var(--n-600);
--text-muted:var(--n-500);
--text-inverse:var(--white);
--text-accent:var(--spek-red);
--text-link:var(--spek-red);
--text-link-hover:var(--spek-red-700);

/* Borders */
--border-subtle:var(--n-200);
--border-default:var(--n-300);
--border-strong:var(--n-400);
--border-accent:var(--spek-red);
--border-inverse:#2A2E31;

/* Interactive */
--action-primary-bg:var(--spek-red);
--action-primary-bg-hover:var(--spek-red-600);
--action-primary-bg-active:var(--spek-red-700);
--action-primary-fg:var(--white);
--focus-ring:0 0 0 3px rgba(255,59,36,.28);

/* Plan / drawing canvas */
--plan-bg:#FBFBF9;
--plan-line:#C9C8C3;
--plan-line-strong:#9B9A95;
--plan-grid:#EDECE8;

/* Type */
--font-ui:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--fs-display:44px;--fs-h1:32px;--fs-h2:24px;--fs-h3:19px;--fs-h4:16px;
--fs-body:14px;--fs-body-lg:16px;--fs-sm:13px;--fs-xs:12px;--fs-micro:11px;
--lh-tight:1.1;--lh-heading:1.2;--lh-snug:1.35;--lh-body:1.5;--lh-loose:1.65;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;
--tracking-display:-0.02em;--tracking-heading:-0.01em;--tracking-eyebrow:0.14em;
--text-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui);
--text-eyebrow:var(--fw-semibold) var(--fs-micro)/1.2 var(--font-ui);

/* Shape & motion */
--radius-xs:2px;--radius-sm:3px;--radius-md:5px;
--control-h-sm:28px;--control-h-lg:46px;
--border-w:1px;
--shadow-xs:0 1px 1px rgba(17,19,21,.04);
--shadow-md:0 2px 6px rgba(17,19,21,.07),0 1px 2px rgba(17,19,21,.05);
--dur-fast:120ms;
--ease-in-out:cubic-bezier(.4,0,.2,1);
--transition-control:background-color var(--dur-fast) var(--ease-in-out),border-color var(--dur-fast) var(--ease-in-out),color var(--dur-fast) var(--ease-in-out),box-shadow var(--dur-fast) var(--ease-in-out);
}

/* ── Base (reference) ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--text-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,p{margin:0}
img{max-width:100%}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
::selection{background:var(--spek-red-100);color:var(--near-black)}
:focus-visible{outline:2px solid var(--spek-red);outline-offset:2px}

.wrap{max-width:1180px;margin:0 auto;padding:0 56px}
.wide{max-width:1440px;margin:0 auto;padding:0 40px}

/* header */
header.site{position:sticky;top:0;z-index:40;background:rgba(247,246,242,.9);backdrop-filter:blur(12px);border-bottom:var(--border-w) solid var(--border-subtle)}
header.site .wrap{height:72px;display:flex;align-items:center;gap:56px}
header.site nav{display:flex;gap:32px}
header.site nav a,.signin{font:var(--fw-medium) var(--fs-sm)/1 var(--font-ui);color:var(--text-secondary);text-decoration:none}
header.site nav a:hover,.signin:hover{color:var(--text-primary);text-decoration:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:var(--border-w) solid transparent;border-radius:var(--radius-sm);font-family:var(--font-ui);font-weight:var(--fw-medium);cursor:pointer;text-decoration:none;transition:var(--transition-control);white-space:nowrap}
.btn:hover{text-decoration:none}
.btn-sm{height:var(--control-h-sm);padding:0 14px;font-size:var(--fs-xs)}
.btn-lg{height:46px;padding:0 24px;font-size:var(--fs-body-lg)}
.btn-primary{background:var(--action-primary-bg);color:var(--action-primary-fg)}
.btn-primary:hover{background:var(--action-primary-bg-hover);color:#fff}
.btn-primary:active{background:var(--action-primary-bg-active)}
.btn-secondary{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn-secondary:hover{background:var(--surface-card);color:var(--text-primary);border-color:var(--near-black)}
/* Legal pages' header button (pre-reference class, kept for /privacy /terms) */
.btn-ghost{display:inline-flex;align-items:center;height:34px;padding:0 16px;background:transparent;color:var(--text-primary);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-sm);font:var(--fw-semibold) var(--fs-sm)/1 var(--font-ui);text-decoration:none}
.btn-ghost:hover{border-color:var(--near-black);text-decoration:none;color:var(--text-primary)}

/* type */
.eyebrow{font:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-secondary)}
.eyebrow.red{color:var(--spek-red)}
.display{font:var(--fw-bold) 92px/.96 var(--font-ui);letter-spacing:-.04em}
h2.sec{font:var(--fw-semibold) 44px/1.08 var(--font-ui);letter-spacing:-.028em}
.lede{font:var(--fw-regular) 20px/1.5 var(--font-ui);color:var(--text-secondary)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* drafting devices */
.rule{height:1px;background:var(--border-subtle)}
.hair{border-top:var(--border-w) solid var(--border-subtle)}
.split{display:grid;align-items:center}
.split>*{min-width:0}

/* supporting point lists */
.pts{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;font:var(--text-body)}
.pts li{display:flex;gap:12px;align-items:flex-start}
.pts li svg{width:14px;height:14px;color:var(--spek-red);flex:0 0 14px;margin-top:3px}

/* pricing */
.tier{background:var(--surface-card);border:var(--border-w) solid var(--border-subtle);border-radius:var(--radius-md);padding:40px 36px;display:flex;flex-direction:column}
.tier h3{font:var(--fw-semibold) var(--fs-h3)/1.2 var(--font-ui);letter-spacing:var(--tracking-heading);white-space:nowrap}
.tier .desc{font:var(--fs-xs)/1.5 var(--font-ui);color:var(--text-secondary);margin-top:10px;min-height:36px}
.tier .amt{font:var(--fw-semibold) 44px/1 var(--font-ui);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tier .billed,.tier .subline{font:var(--fs-xs)/1.4 var(--font-ui);margin-top:12px;min-height:34px}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font:var(--text-body)}
.tier li{display:flex;gap:12px;align-items:flex-start}
.tier li svg{width:14px;height:14px;color:var(--spek-red);flex:0 0 14px;margin-top:3px}

/* ══ DARK-SURFACE BLOCK — everything below renders on var(--near-black). ══
   The light-surface rule (nothing lighter than --text-secondary as text)
   INVERTS here: on #111315, --n-400 measures ~7.5:1 and --n-500 ~5.1:1 —
   both clear AA — while --n-600 (2.9:1) does NOT and is banned on dark.
   The contrast guard in tests/marketingSite.test.ts slices this file at
   this marker and applies the right rule to each half. */
.btn-ondark{background:transparent;color:var(--white);border-color:#3A3E41}
.btn-ondark:hover{background:rgba(255,255,255,.06);color:var(--white);border-color:var(--n-500)}
.titleblock{display:flex;align-items:stretch;background:var(--near-black);color:var(--n-400)}
.tb{padding:14px 20px;border-right:1px solid #26292C}
/* Reference used --n-600 here (2.9:1 on near-black) — bumped to --n-500
   (5.1:1) for AA; 11px uppercase mono labels are text, not decoration. */
.tb .k{font:var(--fs-micro)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--n-500)}
.tb .v{font:var(--fw-medium) var(--fs-xs)/1 var(--font-mono);color:var(--white);margin-top:7px}
footer.site{background:var(--near-black);color:var(--n-400);padding:88px 0 40px}
footer.site a{color:var(--n-400);font:var(--fs-xs)/1 var(--font-ui);text-decoration:none}
footer.site a:hover{color:var(--white);text-decoration:none}

/* ── The demo/founding capture form (reference-styled; ids are founding.js's
      contract — do not rename) ─────────────────────────────────────────── */
.demo-form{max-width:560px;margin:40px auto 0;text-align:left;display:flex;flex-direction:column;gap:16px}
.form-field{display:flex;flex-direction:column;gap:6px}
.form-field label{font:var(--fw-medium) var(--fs-sm)/1.3 var(--font-ui);color:var(--text-primary)}
.form-field .optional{font-size:var(--fs-sm);font-weight:var(--fw-regular);color:var(--text-secondary)}
.form-field input{height:46px;padding:0 14px;border:var(--border-w) solid var(--border-default);border-radius:var(--radius-sm);font:var(--fw-regular) var(--fs-body-lg)/1 var(--font-ui);color:var(--text-primary);background:var(--surface-card);transition:var(--transition-control)}
.form-field input:focus{outline:none;border-color:var(--spek-red);box-shadow:var(--focus-ring)}
.founding-hp{display:none}
.notice-ok{padding:14px 16px;background:var(--status-ok-bg);color:var(--status-ok);border:var(--border-w) solid var(--status-ok);border-radius:var(--radius-sm);font:var(--fw-medium) var(--fs-body)/1.5 var(--font-ui)}
.notice-err{padding:14px 16px;background:var(--status-danger-bg);color:var(--status-danger);border:var(--border-w) solid var(--status-danger);border-radius:var(--radius-sm);font:var(--fw-medium) var(--fs-body)/1.5 var(--font-ui)}

/* ── Legal pages (/privacy, /terms — pre-reference structure, kept) ────── */
.section{max-width:1080px;margin:0 auto;padding:48px 24px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.legal h2{font:var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-ui);margin-top:40px}
.legal h3{font:var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-ui);margin-top:24px}
.legal p,.legal li{font:var(--fw-regular) var(--fs-body-lg)/var(--lh-loose) var(--font-ui);color:var(--text-secondary);margin-top:12px}

/* ── Responsive (reference) ────────────────────────────────────────────── */
@media (max-width:1040px){header.site nav{display:none}header.site .wrap{gap:24px}}
@media (max-width:1000px){#pricing .tiers{grid-template-columns:1fr 1fr!important}}
@media (max-width:900px){
.display{font-size:clamp(44px,11vw,92px)}
h2.sec{font-size:clamp(28px,6vw,44px)}
#workflow .steps,#pricing .tiers,footer.site .cols,.stack{grid-template-columns:1fr!important;gap:32px!important}
.founding{flex-direction:column;align-items:flex-start!important;gap:20px!important}
.founding p{flex:1 1 auto!important}
.wrap,.wide{padding-left:24px!important;padding-right:24px!important}
.split{grid-template-columns:1fr!important;gap:40px!important}
.split>.art{order:2}
.split>.copy{order:1}
.titleblock{flex-wrap:wrap}
.tb{border-right:0;flex:1 1 50%!important}
}