/*
 * CertiFlow marketing site: shared styles for the home, privacy, thanks and 404 pages.
 *
 * Tokens are the warm-earth set from Docs/31-web-design.md (same values the guide and tool pages
 * carry inline), light by default, dark on the visitor's system setting or the toggle. The guides
 * and tools keep their own inline CSS and are copied in unchanged by scripts/build.mjs, so a
 * visitor sees one look across both.
 */
:root{
  --ground:#F4EFE6; --surface:#FFFFFF; --surface-sink:#E8E1D3;
  --ink:#332920; --ink-muted:#675B4E; --ink-faint:#76675A;
  --hairline:#DDD3C0; --hairline-strong:#CDBFA6;
  --accent:#B5573A; --accent-hover:#8F4028; --accent-wash:rgba(181,87,58,.09); --accent-ink:#FFFFFF;
  --data:#7E9174; --success:#3F6D4F; --danger:#9B2F2F;
  --ring:0 0 0 3px rgba(181,87,58,.35);
  --shadow-sm:0 1px 2px rgba(51,41,32,.06), 0 1px 3px rgba(51,41,32,.05);
  --shadow-md:0 6px 24px -8px rgba(51,41,32,.18), 0 2px 8px -4px rgba(51,41,32,.10);
  --radius:14px; --radius-sm:9px;
  --step--1:.9375rem; --step-0:1.0625rem; --step-1:1.1875rem; --step-2:1.5rem;
  --step-3:clamp(1.6rem, 1.15rem + 2vw, 2.1rem); --step-4:clamp(1.9rem, 1.2rem + 3vw, 2.9rem);
  --sans:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display:"Archivo", "Public Sans", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#1C1610; --surface:#2C2319; --surface-sink:#241C16;
    --ink:#F4ECE0; --ink-muted:#C9BCAC; --ink-faint:#9C8C78;
    --hairline:#3A2E24; --hairline-strong:#4A3B2C;
    --accent:#D9764F; --accent-hover:#E8926B; --accent-wash:rgba(217,118,79,.14); --accent-ink:#1C1610;
    --data:#9CAF8E; --success:#6FA383; --danger:#E08A8A;
    --ring:0 0 0 3px rgba(217,118,79,.4);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 34px -10px rgba(0,0,0,.6), 0 2px 10px -4px rgba(0,0,0,.45);
  }
}
:root[data-theme="dark"]{
  --ground:#1C1610; --surface:#2C2319; --surface-sink:#241C16;
  --ink:#F4ECE0; --ink-muted:#C9BCAC; --ink-faint:#9C8C78;
  --hairline:#3A2E24; --hairline-strong:#4A3B2C;
  --accent:#D9764F; --accent-hover:#E8926B; --accent-wash:rgba(217,118,79,.14); --accent-ink:#1C1610;
  --data:#9CAF8E; --success:#6FA383; --danger:#E08A8A;
  --ring:0 0 0 3px rgba(217,118,79,.4);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 10px 34px -10px rgba(0,0,0,.6), 0 2px 10px -4px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;color:var(--ink);font-family:var(--sans);font-size:var(--step-0);line-height:1.65;
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-wrap:break-word;
  background:
    radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--data) 18%, transparent), transparent 62%),
    radial-gradient(95% 60% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%),
    linear-gradient(176deg, var(--ground) 0%, color-mix(in srgb, var(--accent) 5%, var(--ground)) 100%);
  background-attachment:fixed;
}
.page{max-width:960px;margin:0 auto;padding:clamp(1rem, .8rem + 2vw, 1.9rem) 16px 2.6rem;}
@media (min-width:600px){.page{padding-left:clamp(1rem, .7rem + 3vw, 2.5rem);padding-right:clamp(1rem, .7rem + 3vw, 2.5rem);}}
.prose{max-width:760px;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px;}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:.5rem .8rem;border-radius:0 0 8px 0;z-index:5;}
.skip:focus{left:0;}

/* Top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative;}
.wordmark{display:inline-block;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--ink);}
.wordmark:hover{text-decoration:none;}
.wordmark span{color:var(--accent);}
.wordmark::after{
  content:"";display:inline-block;width:1.4em;height:2px;margin:0 0 .28em .35em;vertical-align:middle;background:var(--accent);
  clip-path:polygon(0 40%, 78% 40%, 78% 0, 100% 50%, 78% 100%, 78% 60%, 0 60%);
}
.nav{display:flex;align-items:center;gap:1.1rem;font-size:var(--step--1);}
.nav a{color:var(--ink-muted);white-space:nowrap;}
.wordmark{white-space:nowrap;}
/* A phone has no room for the text links beside the wordmark; the page is one short scroll anyway. */
@media (max-width:480px){.nav a{display:none;}}
.theme-toggle{
  width:38px;height:38px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--hairline);
  border-radius:10px;color:var(--ink-muted);cursor:pointer;transition:color .2s, border-color .2s;
}
.theme-toggle:hover{color:var(--accent);border-color:var(--hairline-strong);}
.theme-toggle svg{width:18px;height:18px;}
.theme-toggle .moon{display:none;}
:root[data-theme="dark"] .theme-toggle .moon{display:block;}
:root[data-theme="dark"] .theme-toggle .sun{display:none;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .moon{display:block;}
  :root:not([data-theme="light"]) .theme-toggle .sun{display:none;}
}

/* Type */
h1,h2,h3{font-family:var(--display);color:var(--ink);text-wrap:balance;}
h1{font-weight:700;font-size:var(--step-4);line-height:1.1;letter-spacing:-.02em;margin:2.2rem 0 0;}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  h1{background:linear-gradient(98deg, var(--ink) 30%, var(--accent) 98%);-webkit-background-clip:text;background-clip:text;color:transparent;}
}
h2{font-weight:700;font-size:var(--step-2);line-height:1.2;letter-spacing:-.01em;margin:2.6rem 0 .5rem;}
h3{font-weight:700;font-size:var(--step-1);margin:0 0 .3rem;}
.rail{position:relative;height:2px;width:min(230px,58%);background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 12%,transparent));margin:1rem 0;}
.rail::after{content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:var(--accent);}
.standfirst{color:var(--ink-muted);font-size:var(--step-1);max-width:60ch;margin:0 0 1.2rem;}
.lede{color:var(--ink-muted);max-width:62ch;margin:0 0 1rem;}
p{margin:0 0 1rem;}
ul{padding-left:1.2rem;}
li{margin:.3rem 0;}

/* Waitlist form */
.waitlist{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.1rem 1.2rem;max-width:560px;}
.waitlist label{display:block;font-weight:600;margin-bottom:.4rem;}
.waitlist .row{display:flex;gap:.6rem;flex-wrap:wrap;}
.waitlist input[type=email]{
  flex:1 1 220px;min-width:0;font:inherit;color:var(--ink);background:var(--ground);border:1px solid var(--hairline-strong);
  border-radius:var(--radius-sm);padding:.65rem .8rem;
}
.waitlist button{
  font:inherit;font-weight:600;color:var(--accent-ink);background:var(--accent);border:0;border-radius:var(--radius-sm);
  padding:.65rem 1.1rem;cursor:pointer;
}
.waitlist button:hover{background:var(--accent-hover);}
.waitlist button:disabled{opacity:.6;cursor:default;}
.waitlist .fine{font-size:var(--step--1);color:var(--ink-muted);margin:.7rem 0 0;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.status{margin:.7rem 0 0;font-size:var(--step--1);min-height:1.2em;}
.status.ok{color:var(--success);}
.status.err{color:var(--danger);}

/* Cards */
.grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:1rem 0 0;}
.card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.1rem 1.2rem;}
.card p{color:var(--ink-muted);margin:0;}
a.card{display:block;color:inherit;}
a.card:hover{text-decoration:none;border-color:var(--hairline-strong);box-shadow:var(--shadow-md);}
a.card h3{color:var(--accent);}
.tag{font-size:var(--step--1);color:var(--ink-faint);letter-spacing:.03em;text-transform:uppercase;font-weight:500;margin:0 0 .3rem;}
.forms{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));margin:1rem 0 0;padding:0;list-style:none;}
.forms li{background:var(--surface-sink);border-radius:var(--radius-sm);padding:.8rem 1rem;margin:0;}
.forms b{display:block;}
.forms span{color:var(--ink-muted);font-size:var(--step--1);}

footer.site{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--hairline);font-size:var(--step--1);color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;}
footer.site a{color:var(--ink-muted);text-decoration:underline;}
@media print{.theme-toggle,.waitlist{display:none !important;}}

/* Blend palette 2026-10-13 */
:root{--sage-ink:#54694C;--sage-wash:#E3E9DC;--tan:#C9A876;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sage-ink:#9CAF8E;--sage-wash:rgba(156,175,142,.14);}}
:root[data-theme="dark"]{--sage-ink:#9CAF8E;--sage-wash:rgba(156,175,142,.14);}

body{overflow-x:clip;}
.tag{color:var(--sage-ink);}
.card{border-top:4px solid var(--sage-ink);}
/* Deep-brown top band with a tan rule; stays dark in both themes. */
.topband{background:#332920;border-bottom:3px solid var(--tan);}
.topband .bar{max-width:960px;margin:0 auto;padding:.8rem 16px;}
@media (min-width:600px){.topband .bar{padding-left:clamp(1rem, .7rem + 3vw, 2.5rem);padding-right:clamp(1rem, .7rem + 3vw, 2.5rem);}}
.topband .wordmark{color:#F4EFE6;}.topband .wordmark span{color:#E58A63;}
.topband .wordmark::after{background:#E58A63;}
.topband .nav a{color:#DCCFBA;}
.topband .theme-toggle{background:transparent;border-color:#5A4636;color:#DCCFBA;}
/* "How it works": full-bleed mid-brown band across the centered page. */
.band{background:#5C4A3A;color:#F4EFE6;margin:2.6rem calc(50% - 50vw) 0;padding:2.2rem calc(50vw - 50%) 2.4rem;}
.band h2{color:#F4EFE6;margin-top:0;}
.band .card{border-top-color:var(--tan);}

/* WCAG pass 2026-10-13 */
/* Contrast fixes found by the 2026-10-13 audit: real text needs 4.5:1, form-field borders 3:1. */
:root{--accent-text:#A64E33;--input-border:#8F806C;--code-ink:#8F4028;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--accent-text:#D9764F;--input-border:#8A7A68;--code-ink:#D9764F;}}
:root[data-theme="dark"]{--accent-text:#D9764F;--input-border:#8A7A68;--code-ink:#D9764F;}
a{color:var(--accent-text);}
a.card h3,.meta b{color:var(--accent-text);}
code{color:var(--code-ink);}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{border-color:var(--input-border);}
.card p.tag{color:var(--sage-ink);}

/* Blue/orange swap 2026-10-13 */
/* Opt-in color-blind palette: red/green status colors become blue/orange. Saved in the browser (cf-palette). */
:root[data-palette="blue_orange"]{--success:#1F5FA8;--success-wash:rgba(31,95,168,.12);--danger:#A84A06;--danger-wash:rgba(168,74,6,.12);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])[data-palette="blue_orange"]{--success:#7FB0EC;--success-wash:rgba(127,176,236,.16);--danger:#F2A15A;--danger-wash:rgba(242,161,90,.16);}}
:root[data-theme="dark"][data-palette="blue_orange"]{--success:#7FB0EC;--success-wash:rgba(127,176,236,.16);--danger:#F2A15A;--danger-wash:rgba(242,161,90,.16);}