/* ---------------------------------------------------------------------------
   poste.io design system
   Warm editorial neutrals, two type families, thin rules instead of boxes.
   Everything on the site is built from the tokens below - change them here,
   not in a page.
   --------------------------------------------------------------------------- */

:root {
    --bg: #FBFCFC;
    --bg-alt: #EBEEEE;
    --surface: #FFFFFF;
    --panel: #F2F4F4;
    --ink: #131717;
    --muted: #565F5F;
    --line: #CBD1D1;
    --line-soft: #DDE2E2;
    /* poste.io's own petrol from the header gradient (#3B8686), darkened until it
       passes AA on this background - the original only reaches 3.72:1 */
    --accent: #2E6B6B;
    --accent-hover: #275F5F;
    --ok: #2E6B4F;
    --warn: #A33B26;
    --terminal: #14181A;
    --terminal-ink: #DCE2E2;
    --bg-veil: rgba(251, 252, 252, 0.86);
    --bg-veil-solid: rgba(251, 252, 252, 0.96);

    --font-ui: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    --step-0: 16px;
    --step-1: 17px;
    --step-2: 20px;
    --step-3: 26px;
    --step-4: 34px;

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 64px;
    --space-6: 96px;
    --section: clamp(72px, 9vw, 150px);

    --radius-s: 5px;
    --radius-m: 8px;
    --width: 1320px;
    --measure: 68ch;
    --ease: 180ms cubic-bezier(0.2, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--step-0);
    line-height: 1.6;
    font-feature-settings: 'kern' 1;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 var(--space-2) 0; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-2) 0; max-width: var(--measure); }
/* the readable-line cap belongs to prose only - a layout component built on a list
   (the proof strip, the KPI row, the card index) has to be able to fill its column */
ul:not([class]), ol:not([class]) { max-width: var(--measure); }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: var(--line); transition: color var(--ease), text-decoration-color var(--ease); }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

hr { height: 0; border: none; border-top: 1px solid var(--line); margin: var(--space-5) 0; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background-color: var(--panel); padding: 0.1em 0.35em; border-radius: 3px; }

pre { font-family: var(--font-mono); font-size: 14px; line-height: 1.6; background-color: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3); overflow-x: auto; margin: var(--space-3) 0; }
pre code { background: none; padding: 0; font-size: inherit; }

img { max-width: 100%; height: auto; }

.container { width: 100%; max-width: var(--width); margin: 0 auto; padding: 0 var(--space-4); }
main.body { padding-top: var(--space-5); }
.hero + main.body { padding-top: 0; }

.eyebrow { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.eyebrow::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: 1px; background-color: var(--accent); }

.display { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; }

.section { padding: var(--section) 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: none; }
.section.tint { background-color: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.lede { font-size: var(--step-2); line-height: 1.55; color: var(--muted); max-width: 44ch; }

/* --- buttons ------------------------------------------------------------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 var(--space-3);
    font-family: var(--font-ui); font-size: 15px; font-weight: 500;
    border: 1px solid var(--ink); border-radius: var(--radius-s);
    background-color: var(--ink); color: var(--surface);
    text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.btn:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); color: var(--surface); }
.btn.ghost { background-color: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background-color: transparent; border-color: var(--ink); color: var(--ink); }
.btn.small { height: 36px; font-size: 14px; padding: 0 var(--space-2); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; }
.actions .note { color: var(--muted); font-size: 15px; }
.textlink { font-size: 15px; }

/* --- header -------------------------------------------------------------- */

.site-header { position: sticky; top: 0; z-index: 50; background-color: var(--bg-veil); backdrop-filter: saturate(120%) blur(8px); border-bottom: 1px solid transparent; transition: border-color var(--ease), background-color var(--ease); }
.site-header.scrolled { border-bottom-color: var(--line); background-color: var(--bg-veil-solid); }
.site-header .container { display: flex; align-items: center; gap: var(--space-4); height: 64px; }
.site-header .wordmark { font-family: var(--font-mono); font-size: 17px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; color: #000000; }
.site-header nav { margin-left: auto; }
.site-header nav ul { display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: 0; list-style: none; max-width: none; }
.site-header nav a:not(.btn) { position: relative; font-size: 15px; color: var(--muted); text-decoration: none; }
.site-header nav a:not(.btn):hover, .site-header nav li.active a:not(.btn) { color: var(--ink); }
.site-header nav li.active a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; background-color: var(--accent); }
.site-header nav li:last-child { margin-left: var(--space-2); padding-left: var(--space-3); border-left: 1px solid var(--line); }
.site-header nav li:last-child a::after { display: none; }
.site-header .menu-button { display: none; margin-left: auto; height: 40px; padding: 0 var(--space-2); background: none; border: 1px solid var(--line); border-radius: var(--radius-s); font-family: var(--font-ui); font-size: 15px; color: var(--ink); cursor: pointer; }

/* --- footer -------------------------------------------------------------- */

.site-footer { border-top: 1px solid var(--line); padding: var(--space-6) 0 var(--space-4) 0; margin-top: var(--section); font-size: 15px; }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-4); }
.site-footer h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; margin-bottom: var(--space-2); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .about { max-width: 32ch; color: var(--muted); }
.site-footer .wordmark { font-family: var(--font-mono); font-size: 17px; font-weight: 900; color: #000000; display: inline-flex; margin-bottom: var(--space-1); }
.site-footer .baseline { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; border-top: 1px solid var(--line-soft); margin-top: var(--space-5); padding-top: var(--space-3); color: var(--muted); font-size: 14px; }

/* --- hero ---------------------------------------------------------------- */

.hero { padding: clamp(56px, 8vw, 120px) 0 var(--space-5) 0; }
.hero h1 { font-weight: 600; font-size: clamp(46px, 6.2vw, 84px); line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 var(--space-4) 0; max-width: 15ch; }
.hero h1 .muted { color: var(--muted); }
.hero .lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink); max-width: 46ch; }
.hero .actions { margin-bottom: var(--space-2); }

/* --- product shot -------------------------------------------------------- */

.shot { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background-color: var(--surface); display: block; }
.shot img { display: block; width: 100%; }
.shot-caption { display: flex; gap: var(--space-2); align-items: baseline; margin-top: var(--space-2); font-size: 14px; color: var(--muted); }
.shot-caption .index { font-family: var(--font-mono); color: var(--accent); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }

/* --- numbered editorial rows -------------------------------------------- */

.principles { list-style: none; margin: 0; padding: 0; max-width: none; }
.principles li { display: grid; grid-template-columns: 64px minmax(0, 22ch) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--line-soft); }
.principles li:last-child { border-bottom: 1px solid var(--line-soft); }
.principles .index { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.principles h3 { margin: 0; font-size: var(--step-2); }
.principles p { margin: 0; color: var(--muted); }
.principles .detail { display: block; margin-top: var(--space-1); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }

/* --- statement ----------------------------------------------------------- */

.statement { font-weight: 600; font-size: clamp(28px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; margin: 0; }
.statement .muted { color: var(--muted); }

/* --- architecture diagram ------------------------------------------------ */

.flow { list-style: none; margin: var(--space-4) 0 0 0; padding: 0; max-width: 34ch; }
.flow li { position: relative; border: 1px solid var(--line); border-radius: var(--radius-s); background-color: var(--surface); padding: var(--space-2) var(--space-3); box-shadow: 0 1px 0 rgba(19, 23, 23, 0.03); }
.flow li + li { margin-top: 34px; }
.flow li + li::before { content: ""; position: absolute; left: 50%; top: -34px; height: 34px; border-left: 1px solid var(--line); }
.flow li + li::after { content: ""; position: absolute; left: 50%; top: -9px; width: 5px; height: 5px; margin-left: -3px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.flow .step { display: block; font-family: var(--font-mono); font-size: 14px; }
.flow .by { display: block; font-size: 13px; color: var(--muted); }
.flow li.edge { background-color: transparent; border-style: dashed; }
.flow li.highlight { border-color: var(--accent); }
.flow li.highlight .step { color: var(--accent); }

/* --- component roster ---------------------------------------------------- */

.roster { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.roster th, .roster td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--line-soft); }
.roster thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; border-bottom-color: var(--line); }
.roster tbody th { font-family: var(--font-mono); font-size: 14px; font-weight: 400; width: 22%; }
.roster td { color: var(--muted); }
.roster td:first-of-type { color: var(--ink); }

/* --- feature index ------------------------------------------------------- */

.index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5) var(--space-4); margin-top: var(--space-4); }
.index-grid h3 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; padding-bottom: var(--space-1); border-bottom: 1px solid var(--line); }
.index-grid ul { list-style: none; margin: 0; padding: 0; }
.index-grid li { padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }

/* --- terminal ------------------------------------------------------------ */

.terminal { background-color: var(--terminal); color: var(--terminal-ink); border-radius: var(--radius-m); padding: var(--space-3); position: relative; overflow: hidden; }
.terminal pre { background: none; border: none; margin: 0; padding: 0; color: inherit; font-size: 13.5px; }
.terminal .prompt { color: #7E8A8A; }
.terminal .copy { position: absolute; top: var(--space-2); right: var(--space-2); height: 30px; padding: 0 10px; font-family: var(--font-ui); font-size: 13px; color: var(--terminal-ink); background-color: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; cursor: pointer; transition: background-color var(--ease); }
.terminal .copy:hover { background-color: rgba(255, 255, 255, 0.16); }

/* --- pricing ------------------------------------------------------------- */

.plans { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.plans th, .plans td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.plans thead th { border-bottom: 1px solid var(--line); vertical-align: bottom; }
.plans thead .name { font-family: var(--font-mono); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; display: block; }
.plans thead .for { display: block; font-size: 14px; color: var(--muted); font-weight: 400; }
.plans tbody th { font-weight: 400; width: 34%; }
.plans td { width: 22%; color: var(--muted); }
.plans .yes { color: var(--ink); }
.plans .price { font-family: var(--font-mono); font-size: 22px; letter-spacing: -0.02em; }
.plans .price .per { font-family: var(--font-ui); font-size: 14px; color: var(--muted); }
.plans .was { color: var(--muted); text-decoration: line-through; font-size: 14px; display: block; }
.plans .featured { background-color: var(--panel); }

/* --- notes --------------------------------------------------------------- */

.note-box { border-left: 2px solid var(--line); padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: var(--space-3) 0; color: var(--muted); }
.note-box.pro { border-left-color: var(--accent); }
.note-box.warning { border-left-color: var(--warn); }
.note-box .label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

/* --- documentation ------------------------------------------------------- */

.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.doc .menu { position: sticky; top: 88px; font-size: 15px; }
.doc .menu h4 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; }
.doc .menu ul { list-style: none; margin: 0 0 var(--space-3) 0; padding: 0; }
.doc .menu li { margin-bottom: 3px; }
.doc .menu a { color: var(--muted); text-decoration: none; }
.doc .menu a:hover { color: var(--ink); }
.doc .content { max-width: 76ch; }
.doc .content h1 { font-size: var(--step-4); }
.doc .content h2 { font-size: var(--step-3); margin-top: var(--space-5); padding-bottom: var(--space-1); border-bottom: 1px solid var(--line-soft); }
.doc .content h3 { margin-top: var(--space-4); }
.doc .content table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 15px; }
.doc .content th, .doc .content td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.doc .free, .doc .pro, .doc .warning { border-left: 2px solid var(--line); padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: var(--space-3) 0; }
.doc .pro { border-left-color: var(--accent); }
.doc .warning { border-left-color: var(--warn); }
.doc .label { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.doc .pro .label { color: var(--accent); }
.doc pre { white-space: pre-wrap; word-wrap: break-word; }

/* --- landing pages (/compare, /migrate) ---------------------------------- */

.lp .kicker { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.lp h1 { font-weight: 600; font-size: clamp(32px, 4vw, 54px); line-height: 1.05; letter-spacing: -0.035em; margin-bottom: var(--space-3); max-width: 19ch; }
.lp h2, .lp h3 { margin-top: var(--space-5); }
.lp h2 { font-size: var(--step-2); }
.lp .sub { font-size: var(--step-2); line-height: 1.5; color: var(--muted); max-width: 46ch; }
.lp .cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-4) 0; }
.lp .cta .note, .cta .note { color: var(--muted); font-size: 15px; }

.kpis { display: flex; flex-wrap: wrap; gap: var(--space-5); margin: var(--space-4) 0; padding: 0; list-style: none; }
.kpis li { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.kpis li strong { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 34px; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) 0; padding: 0; list-style: none; }
.grid li { max-width: none; }
.grid li strong { display: block; margin-bottom: 4px; }
.grid li span { color: var(--muted); }

.cards { list-style: none; margin: var(--space-4) 0; padding: 0; }
.cards li { padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.cards li:last-child { border-bottom: 1px solid var(--line-soft); }
.cards li a { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.cards li .note { display: block; color: var(--muted); font-size: 15px; }

table.compare { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
table.compare th, table.compare td { text-align: left; vertical-align: top; padding: var(--space-2); border-bottom: 1px solid var(--line-soft); }
table.compare thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; border-bottom-color: var(--line); }
table.compare thead th.us { color: var(--accent); }
table.compare tbody th { font-weight: 400; color: var(--muted); width: 26%; }
table.compare td.us { background-color: var(--panel); }
.same { color: var(--muted); }
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: var(--space-4) 0; margin: var(--space-5) 0; }
.band h3 { margin-top: 0; }

/* --- forms --------------------------------------------------------------- */

form label { display: block; font-size: 14px; color: var(--muted); margin-top: var(--space-2); }
form input[type=text], form input[type=search], form input[type=email], form input[type=date], form input[type=password], form textarea {
    display: block; width: 100%; max-width: 32em;
    font-family: var(--font-ui); font-size: 16px; color: var(--ink);
    background-color: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
    padding: 9px 11px; margin-top: 4px;
}
form input:focus { border-color: var(--ink); }
button, .button { font-family: var(--font-ui); }
.lead-form { max-width: 34em; }
.lead-form .hp { display: none; }
.lead-form button[type=submit] { margin-top: var(--space-3); height: 44px; padding: 0 var(--space-3); background-color: var(--ink); color: var(--surface); border: 1px solid var(--ink); border-radius: var(--radius-s); font-size: 15px; font-weight: 500; cursor: pointer; }
.lead-form button[type=submit]:hover { background-color: var(--accent); border-color: var(--accent); }
.notice { border-left: 2px solid var(--ok); padding: var(--space-1) 0 var(--space-1) var(--space-3); margin: var(--space-3) 0; }
.notice.err { border-left-color: var(--warn); }

/* --- DNS tools (spf/dkim/dmarc/dnsbl) ------------------------------------ */

td.status, td.status-ok, td.status-err { width: 34px; text-align: center; color: var(--surface); }
td.status { background-color: var(--bg-alt); }
td.status-ok { background-color: var(--ok); }
td.status-err { background-color: var(--warn); }
.spf { font-weight: 600; }
.comment { color: var(--muted); }
.expl { border-left: 2px solid var(--line); padding-left: var(--space-2); margin: var(--space-1) 0 var(--space-2) 0; color: var(--muted); }
#working { margin-bottom: var(--space-2); font-size: var(--step-2); color: var(--muted); }
.well { border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); margin-bottom: var(--space-4); font-family: var(--font-display); font-size: var(--step-3); }

/* --- utilities ----------------------------------------------------------- */

.two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
.offset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-5); align-items: start; }
.muted { color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--space-3); top: var(--space-2); z-index: 100; background-color: var(--surface); border: 1px solid var(--ink); padding: var(--space-1) var(--space-2); }

.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 240ms ease, transform 240ms ease; }
.js .reveal.shown { opacity: 1; transform: none; }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 1024px) {
    .index-grid, .gallery { grid-template-columns: repeat(2, 1fr); }
    .doc { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 860px) {
    .container { padding: 0 var(--space-3); }
    .site-header nav { display: none; }
    .site-header nav.open { display: block; position: absolute; left: 0; right: 0; top: 68px; background-color: var(--bg); border-bottom: 1px solid var(--line); padding: var(--space-2) var(--space-3) var(--space-3) var(--space-3); }
    .site-header nav.open ul { flex-direction: column; align-items: stretch; gap: 0; }
    .site-header nav.open li { border-top: 1px solid var(--line-soft); }
    .site-header nav.open li:first-child { border-top: none; }
    .site-header nav.open a { display: block; padding: 12px 0; font-size: 17px; }
    .site-header nav.open .btn { margin-top: var(--space-2); width: 100%; }
    .site-header nav.open li:last-child { margin-left: 0; padding-left: 0; border-left: none; }
    .site-header nav.open li.active a::after { top: 12px; bottom: 12px; left: auto; right: 0; width: 2px; height: auto; }
    .site-header .menu-button { display: block; }

    .two-col, .offset, .doc { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .doc .menu { position: static; padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
    .principles li { grid-template-columns: 40px minmax(0, 1fr); }
    .principles li p, .principles li .detail { grid-column: 2; }
    .grid, .index-grid, .gallery { grid-template-columns: minmax(0, 1fr); }
    .kpis { gap: var(--space-4); }
    .site-footer .cols { grid-template-columns: repeat(2, 1fr); }
    .plans { font-size: 15px; }
    .plans thead th, .plans tbody th, .plans td { padding: var(--space-1); }
}

@media (max-width: 520px) {
    .site-footer .cols { grid-template-columns: minmax(0, 1fr); }
    .actions .btn, .lp .cta .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .js .reveal { opacity: 1; transform: none; }
}

/* the dots live behind everything; the reading surface sits on top of them */
#mail-net { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

.tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--accent); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }

.doc .menu li.active a { color: var(--ink); font-weight: 500; }
.doc .menu li.active { position: relative; }
.doc .menu li.active::before { content: ""; position: absolute; left: -12px; top: 8px; width: 3px; height: 12px; background-color: var(--accent); border-radius: 2px; }

.toolnav { display: flex; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-2) 0 var(--space-3) 0; margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); font-size: 15px; }
.toolnav a { color: var(--muted); text-decoration: none; }
.toolnav a:hover, .toolnav a.active { color: var(--ink); }
.toolnav a.active { font-weight: 500; }

/* --- older pages: features, DNS tool results, anything with a plain table --- */

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); margin: var(--space-4) 0; }
.features .feature h3 { font-size: var(--step-1); }
.features .feature p { color: var(--muted); }

main table, table.table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 15px; }
main table th, main table td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line-soft); vertical-align: top; }
main table thead th { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 400; border-bottom-color: var(--line); }
main table.plans td, main table.compare td, main table.roster td { border-bottom: 1px solid var(--line-soft); }

@media (max-width: 860px) {
    .features { grid-template-columns: minmax(0, 1fr); }
    main table { display: block; overflow-x: auto; }
}

/* a tinted band that reaches the container padding - vw units would overflow by the
   width of the scrollbar, and overflow-x: hidden on body would break the sticky header */
.bleed { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); }
@media (max-width: 860px) {
    .bleed { margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3)); padding-left: var(--space-3); padding-right: var(--space-3); }
}

/* --- spec strip: the interfaces, stated the way a datasheet would --------- */

.spec { display: flex; flex-wrap: wrap; gap: 0; margin: var(--space-4) 0 0 0; padding: 0; border-top: 1px solid var(--line); }
.spec > div { padding: var(--space-2) var(--space-4) var(--space-2) 0; margin-right: var(--space-4); border-right: 1px solid var(--line-soft); }
.spec > div:last-child { border-right: none; margin-right: 0; }
.spec dt { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.spec dd { font-family: var(--font-mono); font-size: 15px; margin: 0; color: var(--ink); }

@media (max-width: 860px) {
    .spec > div { padding-right: var(--space-3); margin-right: var(--space-3); }
}

/* --- proof strip: the four facts, right under the headline ---------------- */

.proof { display: grid; grid-template-columns: repeat(4, 1fr); margin: var(--space-5) 0 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.proof li { padding: var(--space-3) var(--space-3) 0 var(--space-3); border-right: 1px solid var(--line-soft); }
.proof li:first-child { padding-left: 0; }
.proof li:last-child { border-right: none; padding-right: 0; }
.proof strong { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -0.03em; line-height: 1.1; }
.proof span { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; line-height: 1.45; text-transform: uppercase; color: var(--muted); margin-top: 6px; max-width: 20ch; }

@media (max-width: 860px) {
    .proof { grid-template-columns: repeat(2, 1fr); }
    .proof li:nth-child(2n) { border-right: none; padding-right: 0; }
    .proof li:nth-child(2n+1) { padding-left: 0; }
    .proof li:nth-child(n+3) { margin-top: var(--space-3); border-top: 1px solid var(--line-soft); }
}

/* --- documentation: ranked schemes with status marks --------------------- */

.doc .content ol > li { padding: var(--space-3) 0 var(--space-4) 0; border-top: 1px solid var(--line-soft); }
.doc .content ol > li > h3:first-child { margin-top: 0; }
.doc .content ol > li > p { margin-bottom: 6px; }
.doc .content ol > li img { margin-top: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background-color: var(--surface); padding: var(--space-2); }

.doc-mark, .mark { display: inline-block; width: 18px; height: 18px; line-height: 18px; margin-right: 8px; border-radius: 3px; color: var(--surface); font-size: 11px; text-align: center; vertical-align: 1px; }
.mark.ok { background-color: var(--ok); }
.mark.warn { background-color: #9A6A18; }
.mark.note { background-color: var(--muted); }
.mark.bad { background-color: var(--warn); }

/* --- order confirmation --------------------------------------------------- */

.receipt { max-width: 46em; padding: var(--space-4) 0 var(--space-5) 0; }
.receipt .tick { fill: var(--ok); display: block; margin-bottom: var(--space-3); }
.receipt h1 { font-size: clamp(30px, 3.6vw, 44px); }
.receipt .next { list-style: none; margin: var(--space-5) 0; padding: 0; max-width: none; }
.receipt .next li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--line-soft); }
.receipt .next li:last-child { border-bottom: 1px solid var(--line-soft); }
.receipt .next .index { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.receipt .next strong { display: block; margin-bottom: 2px; }
.receipt .next span { color: var(--muted); }

/* the mark sits in front of the wordmark and takes its colour from the text */
.wordmark { display: inline-flex; align-items: center; gap: 9px; }
.wordmark .logo-mark { flex: none; height: 7px; width: 14.9px; }