/* Fonts, self-hosted (SIL Open Font License), one variable file per family, Latin. */
@font-face { font-family: "Outfit"; src: url(/fonts/outfit-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Plus Jakarta Sans"; src: url(/fonts/plus-jakarta-sans-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: "Spline Sans Mono"; src: url(/fonts/spline-sans-mono-latin.woff2) format("woff2"); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }

/* Arial scaled to each web font's width and line metrics (measured in Chrome), so text doesn't re-wrap or
   jump when the web font arrives. */
@font-face { font-family: "Outfit Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 95.13%; ascent-override: 105.12%; descent-override: 27.33%; line-gap-override: 0% }
@font-face { font-family: "Plus Jakarta Sans Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 104.99%; ascent-override: 99.05%; descent-override: 20.95%; line-gap-override: 0% }

/* Colour tokens. Light is the Fuel palette (ink green, paper, lime); dark is the same family at night.
   Components use tokens only, so both modes stay in step. */
:root {
  color-scheme: light;
  --ink: #071F0E; --paper: #F6F1E7; --card: #FFFDF9; --card-2: #FBF9F4; --field: #FFFDF9;
  --line: #E6DFCD; --line-2: #F0EBDD; --line-strong: #CFC6AE;
  --muted: #5E665F; --brand: #A8F274; --brand-deep: #8FE04F; --soft: #F2F7F1; --soft-line: #D5E8C8;
  --warn: #9A3412; --warn-soft: #FDF1E7; --warn-line: #F4DCC6; --bad: #A93417; --bad-soft: #FBEDE8; --on-bad: #FFFDF9;
  --ok: #3E8A1F; --ok-ink: #2F6B17; --av: #E2EEDD;
  --solid: #071F0E; --solid-hover: #0E2E18; --on-solid: #FFFDF9;
  --hover: rgba(7, 31, 14, .06); --shade: rgba(7, 31, 14, .04); --glow: rgba(168, 242, 116, .35);
  --cost-bg: #071F0E; --cost-fg: #F6F1E7; --cost-muted: #BFD8B0; --cost-strong: #FFFDF9;
  --mono: "Spline Sans Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ink: #E9EFE6; --paper: #0D1510; --card: #141D17; --card-2: #18221B; --field: #0F1812;
    --line: #26332A; --line-2: #1E2A22; --line-strong: #3A4A3F;
    --muted: #9AA79D; --soft: #1A2A1D; --soft-line: #2D4630;
    --warn: #F0A36B; --warn-soft: #2A1D14; --warn-line: #4A3222; --bad: #F08A6E; --bad-soft: #2C1813; --on-bad: #0D1510;
    --ok: #8FE04F; --ok-ink: #A8F274; --av: #C9DCC0;
    --solid: #A8F274; --solid-hover: #BDF78F; --on-solid: #0B1A0F;
    --hover: rgba(233, 239, 230, .07); --shade: rgba(0, 0, 0, .3); --glow: rgba(168, 242, 116, .22);
    --cost-bg: #15251A; --cost-fg: #E9EFE6; --cost-muted: #A9C29C; --cost-strong: #F4F8F1;
  }
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent }
body {
  margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font: 15px/1.5 "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: inherit }
button, input, select { font: inherit; color: inherit }
.i { width: 18px; height: 18px; flex: none }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--solid); color: var(--on-solid); padding: 8px 12px; border-radius: 8px; text-decoration: none }
.skip:focus { top: 12px }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }

/* Header + stepper */
.top { display: flex; align-items: center; gap: 24px; padding: 18px 28px; border-bottom: 1px solid var(--line) }
.mark { display: flex; align-items: center; gap: 8px; font: 700 18px/1 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.02em; text-decoration: none; flex: none }
.mark i { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--ink) }
.stepper { list-style: none; margin: 0 0 0 auto; padding: 0; display: flex; gap: 6px; font-size: 13px; color: var(--muted); overflow-x: auto }
.stepper li { display: flex; align-items: center; gap: 8px; white-space: nowrap; padding: 4px 10px 4px 4px; border-radius: 99px }
.stepper .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 12px; border: 1px solid var(--line); background: var(--card) }
.stepper .done .n { background: var(--solid); border-color: var(--solid); color: var(--on-solid) }
.stepper .now { color: var(--ink); font-weight: 600; background: var(--card); box-shadow: 0 0 0 1px var(--line) }
.stepper .now .n { background: var(--brand); border-color: var(--brand); color: #0B1A0F }
.stepper .done .i { width: 13px; height: 13px }

/* Stage */
main { padding: 48px 20px 96px }
.stage { max-width: 580px; margin: 0 auto }
.eyebrowless h1, .stage h1 { font: 600 30px/1.15 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance }
.lede { color: var(--muted); margin: 0 0 28px; max-width: 52ch; text-wrap: pretty }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px }
.card + .card { margin-top: 14px }
.stack > * + * { margin-top: 14px }

label.f { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px }
.field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--field); transition: border-color .12s, box-shadow .12s }
.field:focus-within { border-color: var(--brand-deep); box-shadow: 0 0 0 3px var(--glow) }
.field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 14px; outline: none; font-size: 16px }
.field .suffix, .field .prefix { color: var(--muted); padding: 0 14px; white-space: nowrap }
.field .prefix { padding-right: 0 }
.field .icon-btn { margin-right: 6px }
.help { font-size: 13px; color: var(--muted); margin: 8px 0 0 }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.row.end { justify-content: flex-end }
.spacer { flex: 1 }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 11px 16px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition-property: background-color, border-color, color, scale; transition-duration: .12s; transition-timing-function: ease-out }
.btn:hover { border-color: var(--line-strong) }
.btn:active:not(:disabled) { scale: .96 }
.btn:disabled { opacity: .45; cursor: not-allowed }
.btn.primary { background: var(--solid); border-color: var(--solid); color: var(--on-solid) }
.btn.primary:hover { background: var(--solid-hover); border-color: var(--solid-hover) }
.btn.ghost { background: transparent; border-color: transparent }
.btn.ghost:hover { background: var(--hover) }
.btn.block { width: 100% }
.icon-btn { border: 0; background: none; color: var(--muted); border-radius: 8px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer }
.icon-btn:hover { color: var(--ink); background: var(--hover) }
.link { background: none; border: 0; padding: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-size: 14px; margin: 0 0 18px; background: none; border: 0; padding: 0; cursor: pointer }
.back:hover { color: var(--ink) }

/* Check results */
.checks { list-style: none; margin: 0; padding: 0 }
.checks li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0 }
.checks li + li { border-top: 1px solid var(--line-2) }
.checks .i { width: 20px; height: 20px; margin-top: 1px }
.checks b { display: block; font-weight: 600 }
.checks span { color: var(--muted); font-size: 14px }
.ok .i { color: var(--ok) }
.warn .i { color: var(--warn) }
.bad .i { color: var(--bad) }
.pending .i { color: var(--muted) }
.spin { animation: spin 1s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; font-size: 14px }
.callout .i { margin-top: 1px }
.callout.warn { background: var(--warn-soft); color: var(--warn) }
.callout.info { background: var(--soft); color: var(--ink); border: 1px solid var(--soft-line) }
.callout p { margin: 0 }
.callout p + p { margin-top: 6px }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; margin-top: 14px }
.check input { accent-color: var(--ink); width: 17px; height: 17px; margin: 2px 0 0 }

/* Numbered sub-steps */
.sub { list-style: none; margin: 0; padding: 0; counter-reset: s }
.sub > li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; gap: 0 12px; padding: 0 0 22px; position: relative }
.sub > li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; background: var(--paper); border: 1px solid var(--line) }
.sub > li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: var(--line) }
.sub > li > * { grid-column: 2 }
.sub h3 { margin: 2px 0 6px; font-size: 15px }
.sub p { margin: 0 0 10px; color: var(--muted); font-size: 14px }

.perm { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: table }
.perm th, .perm td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2) }
.perm th { background: var(--card-2); color: var(--muted); font-weight: 600 }
.perm tr:last-child td { border-bottom: 0 }
.perm code { font-family: var(--mono); font-size: 12px }

/* Records table */
.records { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed }
.records th:nth-child(1) { width: 52px } .records th:nth-child(3) { width: 34% } .records th:nth-child(4) { width: 104px }
.records td:nth-child(2) { overflow-wrap: anywhere }
.records th { text-align: left; color: var(--muted); font-weight: 600; padding: 0 8px 8px; font-size: 12px }
.records td { padding: 9px 8px; border-top: 1px solid var(--line-2); vertical-align: middle }
.records td.v { font-family: var(--mono); font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.records td.t { font-family: var(--mono); font-size: 12px; font-weight: 500 }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 99px; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); background: var(--card-2) }
.pill .i { width: 12px; height: 12px }
.pill.added { color: var(--ink); background: var(--soft); border-color: var(--soft-line) }
.pill.verified { color: var(--on-solid); background: var(--solid); border-color: var(--solid) }
.pill.off { opacity: .6 }
.group-label { font-weight: 600; font-size: 13px; margin: 18px 0 6px; display: flex; justify-content: space-between }
.group-label:first-child { margin-top: 0 }

/* Plan step */
.price { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); margin: 16px 0 }
.price b { font: 600 22px/1.1 Outfit, "Outfit Fallback", sans-serif }
.price span { color: var(--muted); font-size: 13px }
.watching { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); margin-top: 14px }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-deep); box-shadow: 0 0 0 0 rgba(143, 224, 79, .6); animation: pulse 1.6s ease-out infinite }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(143, 224, 79, 0) } }
.or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; margin: 18px 0 }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line) }

/* Mailboxes */
.people { display: grid; gap: 10px }
.person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; gap: 8px; align-items: center }
.field .suffix { overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 62% }
.person .field input { padding: 10px 12px; font-size: 15px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 99px; padding: 5px 12px; font-size: 13px; background: var(--card); cursor: pointer }
.chip[aria-pressed="true"] { background: var(--soft); border-color: var(--soft-line); font-weight: 600 }

/* Done + inbox preview */
.done-head { display: flex; gap: 14px; align-items: center; margin-bottom: 22px }
.done-head .badge { width: 46px; height: 46px; border-radius: 14px; background: var(--brand); color: #0B1A0F; display: grid; place-items: center; flex: none }
.done-head .badge .i { width: 24px; height: 24px }
.done-head h1 { margin: 0 }
.inbox { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden }
.inbox-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-weight: 600 }
.inbox-bar .addr { color: var(--muted); font-weight: 500; font-size: 13px }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; background: var(--warn-soft); color: var(--warn); font-size: 14px; border-bottom: 1px solid var(--warn-line) }
.banner .link { color: var(--warn) }
.mail { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; padding: 14px 16px; align-items: start }
.mail + .mail { border-top: 1px solid var(--line-2) }
.av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--av); color: #0B1A0F }
.av.brand { background: var(--brand) }
.mail > div { min-width: 0 }
.mail b { display: block }
.mail p { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.mail time { color: var(--muted); font-size: 12px }

.fade { animation: fade .22s ease-out }
@keyframes fade { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

@media (max-width: 760px) {
  .top { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 16px }
  .stepper { margin: 0; width: 100% }
  .stepper li .t { display: none }
  .stepper .now .t { display: inline }
  main { padding: 28px 16px 80px }
  .stage h1 { font-size: 25px }
  .card { padding: 18px }
  .person { grid-template-columns: 1fr }
  .records td.v, .records th:nth-child(3) { display: none }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}

/* Value line on the domain screen */
.value { display: flex; gap: 12px; align-items: flex-start; margin: 18px 4px 0; color: var(--muted); font-size: 14px }
.value .i { color: var(--ink); margin-top: 2px }
.value b { color: var(--ink) }

/* Teammate rows: sign-in email on its own line */
.person .field.wide { grid-column: 1 / 3 }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.err { color: var(--bad) }
.err:empty { display: none }

/* Admin console */
body.wide .stage { max-width: 1040px }
body.wide main { padding-top: 32px }
.topadmin { margin-left: auto; display: flex; align-items: center; gap: 12px; font-weight: 600 }
.topadmin .dom { font-size: 14px }
.av.sm { width: 30px; height: 30px; border-radius: 9px; font-size: 12px }
.admin-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 22px }
.admin-head h1 { margin: 0 }
.admin-head .sub { margin: 4px 0 0; color: var(--muted) }
.health-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 99px }
.health-pill.ok { background: var(--soft); border: 1px solid var(--soft-line) }
.health-pill.ok .i { color: var(--ok) }
.health-pill.warn { background: var(--warn-soft); color: var(--warn) }
.admin-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px }
.admin-grid .card + .card { margin-top: 0 }
.side { display: grid; gap: 14px; align-content: start }
.label { font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 }
.cost { background: var(--cost-bg); border-color: var(--cost-bg); color: var(--cost-fg); display: flex; flex-direction: column }
.cost .label { color: var(--cost-muted) }
.cost .big { font: 700 64px/1 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.03em; margin: 14px 0 10px; color: var(--cost-strong) }
.cost .big span { font-size: 20px; font-weight: 500; letter-spacing: 0; color: var(--cost-muted); margin-left: 4px }
.cost .cost-line { margin: 0 0 18px; max-width: 34ch }
.cost .cost-line b { color: var(--cost-strong) }
.cost .help { color: var(--cost-muted); margin-top: auto; padding-top: 14px }
.per { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07) }
.per p { margin: 0 }
.per b { color: var(--cost-strong) }
.mailbox-dots { display: flex; flex-wrap: wrap; gap: 4px; max-width: 220px }
.mailbox-dots i { width: 14px; height: 14px; border-radius: 4px }
.mailbox-dots i.add { background: transparent !important; border: 1.5px dashed #7F9A74 }
.meter-num { margin: 10px 0 8px }
.meter-num b { font: 600 22px/1 Outfit, "Outfit Fallback", sans-serif }
.meter { height: 8px; border-radius: 99px; background: var(--line-2); overflow: hidden }
.meter i { display: block; height: 100%; background: var(--brand-deep); border-radius: 99px }
.checks.compact li { padding: 9px 0 }
.checks.compact b { font-size: 14px }
.checks.compact span { font-size: 13px }
.sec-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px }
.sec-head h2 { font: 600 18px/1.2 Outfit, "Outfit Fallback", sans-serif; margin: 0 }
.count { font: 600 13px "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px }
.people { margin-bottom: 14px }
.flash { margin: 6px 0 10px; font-size: 13.5px; color: var(--ok-ink); min-height: 1px }
.flash:empty { margin: 0 }
.add-row { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1.1fr) auto auto; gap: 8px; align-items: center; padding: 12px; margin: 8px 0 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px }
.add-row .field input, .share-row .field input { padding: 9px 11px; font-size: 14px }
.add-row select, .share-row select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; background: var(--field); color: var(--ink) }
.add-row .help, .share-row .help { grid-column: 1 / -1; margin: 0 }
.paste { padding: 12px; margin: 8px 0 12px; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px }
.paste textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 13px/1.6 var(--mono); resize: vertical; background: var(--field) }
.paste textarea:focus { outline: 2px solid var(--brand-deep); outline-offset: -1px }
.paste-preview { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; font-size: 13px }
.paste-preview:empty { display: none }
.paste-preview li { display: flex; gap: 8px; align-items: flex-start }
.paste-preview .i { width: 16px; height: 16px; margin-top: 2px }
.paste-preview .ok .i { color: var(--ok) }
.paste-preview .warn .i, .paste-preview .why { color: var(--warn) }
.users { width: 100%; border-collapse: collapse; font-size: 14px }
.users th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line) }
.users td { padding: 10px; border-bottom: 1px solid var(--line-2); vertical-align: middle }
.users tr:last-child td { border-bottom: 0 }
.who { display: flex; gap: 10px; align-items: center; min-width: 0 }
.who .av { width: 34px; height: 34px; font-size: 12px; flex: none; color: #0B1A0F }
.who b { display: block; font-weight: 600 }
.who span { color: var(--muted); font-size: 12.5px }
td.addr, .shared-list .addr { font-family: var(--mono); font-size: 12.5px }
td.acts { text-align: right; white-space: nowrap }
td.acts > * + * { margin-left: 4px }
td.acts .icon-btn { display: inline-grid; vertical-align: middle }
.pill.waiting { color: var(--muted) }
.btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px }
.btn.danger { background: var(--bad); border-color: var(--bad); color: var(--on-bad) }
.confirm td { background: var(--bad-soft) }
.confirm-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--bad); font-size: 14px }
.confirm-row .spacer { flex: 1 }
.shared-list { list-style: none; margin: 8px 0 12px; padding: 0 }
.shared-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); font-size: 14px }
.shared-list .i { width: 14px; height: 14px; color: var(--muted) }
.shared-list .spacer { flex: 1 }
.share-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) auto; gap: 8px; align-items: center }
.share-row > * { min-width: 0 }
.ladder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end; margin: 18px 0 0 }
.ladder div { display: grid; gap: 2px; justify-items: start; color: var(--cost-muted); font-size: 12px }
.ladder i { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--glow); margin-bottom: 6px }
.ladder b { color: var(--cost-strong); font-size: 14px }
.ladder .here i { background: var(--brand) }
.ladder .here span { color: var(--cost-strong); font-weight: 600 }

@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr }
  .add-row { grid-template-columns: 1fr 1fr }
  .add-row .field:nth-child(2), .add-row .field:nth-child(3) { grid-column: 1 / -1 }
}
@media (max-width: 760px) {
  .admin-head { flex-wrap: wrap }
  .health-pill { margin-left: 0 }
  .cost .big { font-size: 52px }
  .users thead { display: none }
  .users, .users tbody, .users tr, .users td { display: block; width: 100% }
  .users tr { padding: 10px 0; border-bottom: 1px solid var(--line-2) }
  .users td { border: 0; padding: 3px 0 }
  td.acts { text-align: left }
  .share-row { grid-template-columns: minmax(0, 1fr) }
  .users td:nth-child(3), .users td:nth-child(4) { display: inline-block; width: auto; margin-right: 10px }
  .topadmin .dom { display: none }
}


/* Signed-in corner of the header */
.who-top { margin-left: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); flex: none }
.who-top .link { color: var(--muted) }
.stepper + .who-top { margin-left: 16px }
.top > .who-top:first-of-type { margin-left: auto }
.note-line { font-size: 13px; color: var(--muted); margin: 14px 0 0 }
.checks .detail { display: block; color: var(--muted); font-size: 13px; margin-top: 2px }
.task-actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap }
.err-box { margin-top: 12px }
code { font-family: var(--mono); font-size: 12.5px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 5px; padding: 0 4px }
.perm td:first-child { white-space: nowrap }
.admin-top { display: flex; align-items: center; gap: 12px }
.admin-top a { font-size: 14px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--ink) }
@media (max-width: 760px) { .who-top { margin-left: 0 } .who-top .em { display: none } }

/* ---------- Landing ----------
   Radius scale: controls 10px, the domain form 14px (10 + its 4px padding), cards and the screenshot 16px, pills full. */
body.landing { overflow-x: clip }
.l-top { display: flex; align-items: center; gap: 16px; height: 68px; padding: 0 28px; max-width: 1200px; margin: 0 auto }
.l-top nav { margin-left: auto }
.l-top nav a { text-decoration: none; font-weight: 600; font-size: 14px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; transition: background-color .12s }
.l-top nav a:hover { background: var(--hover) }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px }

.hero { max-width: 1200px; margin: 0 auto; padding: 64px 28px 16px }
.hero-copy { max-width: 780px }
.hero h1 { font: 700 clamp(36px, 4.6vw, 58px)/1.04 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance }
.hero .lede { font-size: 18px; max-width: 46ch; margin: 0 0 28px; text-wrap: pretty }
/* Hero stage: the studio photo, with the real inbox set on top of it like a window on the wall. */
.hero-stage { position: relative; margin: 56px 0 56px }
.hero-stage .photo { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; object-position: 30% 38%; border-radius: 16px; background: var(--card-2) }
.shot { position: absolute; right: 28px; bottom: -56px; width: 52%; margin: 0 }
.shot img { display: block; width: 100%; height: auto; border: 1px solid rgba(7, 31, 14, .12); border-radius: 12px; box-shadow: 0 40px 80px -32px rgba(7, 31, 14, .55), 0 2px 6px rgba(7, 31, 14, .12) }
@media (prefers-color-scheme: dark) { .shot img { border-color: rgba(233, 239, 230, .16) } }
.nav-cta { margin-left: 6px; padding: 8px 14px !important; color: var(--on-solid) !important }
.nav-cta:hover { background: var(--solid-hover) !important }

/* How it works: people, their Cloudflare account, Digismak, joined by incoming and outgoing lanes. */
.flow { padding: 64px 0 72px }
.flow-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(64px, 120px) minmax(0, 1.25fr) minmax(64px, 120px) minmax(0, 1fr); align-items: center; margin-top: 8px }
.node { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; display: grid; gap: 4px; align-content: start; min-height: 150px }
.node b { font: 600 17px/1.3 Outfit, "Outfit Fallback", sans-serif }
.node > span:last-child { color: var(--muted); font-size: 14px }
.node-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); margin-bottom: 8px }
.node-icon .i { width: 22px; height: 22px }
.node-icon.brand { background: var(--brand); border-color: var(--brand); color: #0B1A0F }
.node-cf { border-color: rgba(243, 128, 32, .45); box-shadow: 0 0 0 4px rgba(243, 128, 32, .08) }
.cf-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.cf-head img { width: 30px; height: 30px; flex: none }
.cf-row { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); border: 1px solid var(--line-2) }
.cf-row + .cf-row { margin-top: 8px }
.cf-row b { font: 600 14px "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif }
.cf-row span { color: var(--muted); font-size: 13px }
.lanes { display: grid; gap: 22px; padding: 0 6px }
.lane { position: relative; height: 2px; border-radius: 2px; overflow-x: clip; overflow-y: visible }
.lane.in { background: repeating-linear-gradient(90deg, var(--brand-deep) 0 6px, transparent 6px 11px) }
.lane.out { background: repeating-linear-gradient(90deg, #F38020 0 6px, transparent 6px 11px) }
.lane i { position: absolute; inset: 0; display: none }
.lane i::before { content: ""; position: absolute; left: 0; top: -3px; width: 14px; height: 8px; border-radius: 3px }
.lane.in i::before { background: var(--brand-deep); box-shadow: 0 0 0 3px var(--glow) }
.lane.out i::before { background: #F38020; box-shadow: 0 0 0 3px rgba(243, 128, 32, .25) }
.flow-key { display: flex; gap: 22px; justify-content: center; margin: 22px 0 0; font-size: 13px; color: var(--muted) }
.flow-key span::before { content: ""; display: inline-block; width: 18px; height: 2px; margin-right: 8px; vertical-align: 4px }
.k-in::before { background: var(--brand-deep) }
.k-out::before { background: #F38020 }

/* Footer credit */
.l-foot-left { display: flex; gap: 16px }
.powered { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--muted) }
.powered img { width: 22px; height: 22px }
.powered span { color: var(--ink); font-weight: 600 }
.powered:hover span { text-decoration: underline; text-underline-offset: 3px }

/* Motion: a short load-in, envelopes moving along the lanes, sections easing in as they scroll into view.
   Nothing moves for people who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .8s cubic-bezier(.16, 1, .3, 1) both }
  .hero-copy > :nth-child(2) { animation-delay: .08s }
  .hero-copy > :nth-child(3) { animation-delay: .16s }
  .hero-stage .photo { animation: settle 1.4s cubic-bezier(.16, 1, .3, 1) both }
  .hero-stage .shot { animation: rise 1s .35s cubic-bezier(.16, 1, .3, 1) both }
  .lane i { display: block; animation: travel-x 2.6s linear infinite }
  .lane.out i { animation-direction: reverse }
  /* Incoming mail reaches Cloudflare first, then Digismak; outgoing goes the other way. */
  .flow-map > .lanes:nth-child(4) .lane.in i, .flow-map > .lanes:nth-child(2) .lane.out i { animation-delay: 1.3s }
  .flow-map.paused .lane i { animation-play-state: paused }
  @supports (animation-timeline: view()) {
    .shot img { animation: drift linear both; animation-timeline: view(); animation-range: entry 40% exit 80% }
    .node, .rail li, .price-card, .faq dl div { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 55% }
  }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px) } }
@keyframes settle { from { opacity: 0; transform: scale(1.03) } }
@keyframes drift { from { transform: translateY(20px) } to { transform: translateY(-20px) } }
@keyframes reveal { from { opacity: 0; transform: translateY(16px) } }
@keyframes travel-x { from { transform: translateX(-14px) } to { transform: translateX(100%) } }
@keyframes travel-y { from { transform: translateY(-14px) } to { transform: translateY(100%) } }

.check-form { max-width: 500px }
.check-form label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 8px }
.check-row { display: flex; gap: 6px; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 4px; transition: border-color .12s, box-shadow .12s }
.check-row:focus-within { border-color: var(--brand-deep); box-shadow: 0 0 0 3px var(--glow) }
.check-row input { flex: 1; min-width: 0; border: 0; outline: none; padding: 10px 12px; font-size: 17px; background: transparent }
.check-row .btn { padding: 11px 18px }

.how { border-top: 1px solid var(--line); padding: 72px 0 }
.how h2, .faq h2, .price-card h2, .closing h2 { font: 600 30px/1.15 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance }
.section-lede { color: var(--muted); margin: 0 0 32px; max-width: 60ch }
.rail { list-style: none; margin: 0; padding: 0; max-width: 720px; counter-reset: s }
.rail li { position: relative; padding: 0 0 28px 40px; counter-increment: s }
.rail li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 13px "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; background: var(--card); border: 1px solid var(--line) }
.rail li:not(:last-child)::after { content: ""; position: absolute; left: 13px; top: 32px; bottom: 6px; width: 1px; background: var(--line) }
.rail h3 { font: 600 18px/1.3 Outfit, "Outfit Fallback", sans-serif; margin: 1px 0 4px }
.rail p { margin: 0; color: var(--muted); max-width: 60ch }

.price-card { background: var(--cost-bg); color: var(--cost-fg); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-bottom: 72px }
.price-card h2 { color: var(--cost-strong) }
.price-card p { margin: 0; color: var(--cost-muted); max-width: 44ch }
.price-card .big { font: 700 72px/1 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.03em; color: var(--cost-strong); margin: 22px 0 14px; font-variant-numeric: tabular-nums }
.price-card .big small { font-size: 22px; font-weight: 500; letter-spacing: 0; color: var(--cost-muted); margin-left: 4px }
.includes { list-style: none; margin: 0; padding: 0 }
.includes li { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1) }
.includes li:first-child { padding-top: 0 }
.includes li:last-child { border-bottom: 0 }
/* Competitor comparison: full width under the price, one tile per plan */
.vs { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px }
.vs h3 { font: 600 15px/1.3 "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; color: var(--cost-strong); margin: 0 0 14px }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.vs li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .06) }
.vs img { width: 24px; height: 24px; flex: none }
.vs-name { flex: 1; min-width: 0; color: var(--cost-muted); font-size: 14px }
.vs-name b { display: block; color: var(--cost-strong); font-weight: 600; font-size: 15px }
.vs-price { text-align: right; font: 700 26px/1 Outfit, "Outfit Fallback", sans-serif; color: var(--cost-strong); font-variant-numeric: tabular-nums; white-space: nowrap }
.vs-price small { display: block; font: 500 12px/1.3 "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; color: var(--cost-muted); margin-top: 5px }
.price-card .vs-note { margin-top: 12px; font-size: 13px; max-width: none }

.faq { padding-bottom: 72px }
.faq dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 24px 0 0 }
.faq dl div { padding: 18px 0; border-top: 1px solid var(--line) }
.faq dt { font-weight: 700; margin-bottom: 6px }
.faq dd { margin: 0; color: var(--muted); max-width: 60ch }

.closing { border-top: 1px solid var(--line); padding: 72px 28px 80px; display: grid; justify-items: center; text-align: center }
.closing .check-form { width: 100%; text-align: left; margin-top: 14px }

.l-foot { max-width: 1200px; margin: 0 auto; padding: 24px 28px 32px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line) }
.l-foot a { color: var(--muted) }

@media (max-width: 960px) {
  .hero { padding-top: 40px }
  .flow-map { grid-template-columns: minmax(0, 1fr); justify-items: stretch }
  .node { min-height: 0 }
  .lanes { grid-auto-flow: column; justify-content: center; gap: 48px; height: 56px; padding: 6px 0 }
  .lane { width: 2px; height: 100%; overflow-x: visible; overflow-y: clip }
  .lane.in { background: repeating-linear-gradient(180deg, var(--brand-deep) 0 6px, transparent 6px 11px) }
  .lane.out { background: repeating-linear-gradient(180deg, #F38020 0 6px, transparent 6px 11px) }
  .lane i::before { left: -3px; top: 0; width: 8px; height: 12px }
  .price-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px }
  .faq dl { grid-template-columns: minmax(0, 1fr) }
  .vs ul { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 600px) {
  .hero-stage { margin-bottom: 64px }
  .hero-stage .photo { aspect-ratio: 4 / 3; object-position: 22% 45% }
  .shot { width: 46%; right: 14px; bottom: -44px }
}
@media (max-width: 960px) and (prefers-reduced-motion: no-preference) { .lane i { animation-name: travel-y } }
@media (max-width: 760px) {
  .l-top, .hero, .wrap, .closing, .l-foot { padding-left: 16px; padding-right: 16px }
  .check-row { flex-direction: column; padding: 6px }
  .check-row .btn { width: 100% }
  .price-card .big { font-size: 56px }
  .how, .closing { padding-top: 56px; padding-bottom: 56px }
}

/* Numbers that get compared line up */
.meter-num, .ladder, .users, .records, .price, .count { font-variant-numeric: tabular-nums }
select { background-color: var(--field); color: var(--ink) }

/* ---------- SEO landing pages and guides (site/components.mjs) ---------- */
.page-hero { padding-top: 40px; padding-bottom: 28px; max-width: 1200px }
.page-hero h1 { font: 700 clamp(34px, 4.2vw, 52px)/1.06 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.03em; margin: 0 0 16px; max-width: 20ch; text-wrap: balance }
.page-hero .lede { font-size: 18px; max-width: 58ch; margin: 0 0 26px; text-wrap: pretty }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin: 0 0 22px }
.crumbs a { color: var(--muted); text-decoration: none }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px }
.updated { font-size: 13px; color: var(--muted); margin: 16px 0 0 }
.check-form.center { margin: 0 auto }

.strip { margin: 8px 0 8px; padding: 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line) }
.strip-h { margin: 0 0 12px; font-weight: 600; font-size: 14px; color: var(--muted) }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.strip li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line-2) }
.strip li img, .strip li span.mini-mark { width: 24px; height: 24px; flex: none }
.strip li span { flex: 1; min-width: 0; font-size: 13px; color: var(--muted) }
.strip li b { display: block; font-size: 15px; color: var(--ink) }
.strip li strong { font: 700 24px/1 Outfit, "Outfit Fallback", sans-serif; font-variant-numeric: tabular-nums }
.strip li.us { background: var(--cost-bg); border-color: var(--cost-bg) }
.strip li.us span { color: var(--cost-muted) }
.strip li.us b, .strip li.us strong { color: var(--cost-strong) }
.mini-mark { border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 6px var(--cost-bg), 0 0 0 1px var(--brand) }
.strip-note { margin: 12px 0 0; font-size: 12.5px; color: var(--muted) }

.prose-wrap { padding-top: 40px; padding-bottom: 24px }
.prose-wrap > section { max-width: 760px; margin: 0 0 48px }
.prose-wrap > section.wide { max-width: none }
.prose-wrap h2 { font: 600 28px/1.18 Outfit, "Outfit Fallback", sans-serif; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; scroll-margin-top: 20px }
.prose-wrap h3 { font: 600 19px/1.3 Outfit, "Outfit Fallback", sans-serif; margin: 24px 0 8px }
.prose-wrap p, .prose-wrap li { font-size: 16.5px; line-height: 1.65; color: var(--ink) }
.prose-wrap p { margin: 0 0 14px; max-width: 68ch }
.prose-wrap > section > ul:not(.ticks):not(.crosses), .prose-wrap > section > ol:not(.rail) { padding-left: 22px; margin: 0 0 16px; max-width: 66ch }
.prose-wrap a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand-deep); text-underline-offset: 3px }
.prose-wrap code { font-size: 14px }
.prose-wrap .rail { margin-top: 18px }

.table-wrap { overflow-x: auto; margin: 18px 0 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card) }
table.cmp { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums }
table.cmp caption { text-align: left; padding: 14px 16px 4px; font-weight: 600; font-size: 14px; color: var(--muted) }
table.cmp th, table.cmp td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top }
table.cmp thead th { font-size: 13px; color: var(--muted); font-weight: 600 }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: 0 }
table.cmp tbody th { font-weight: 600 }
table.cmp .us { background: var(--soft); font-weight: 700 }

.note-box { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; margin: 18px 0; font-size: 15px; max-width: 68ch }
.note-box.info { background: var(--soft); border: 1px solid var(--soft-line) }
.note-box.warn { background: var(--warn-soft); color: var(--warn) }
.note-box .i { margin-top: 3px }
.note-box p:last-child { margin-bottom: 0 }

.two-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 }
.two-lists > div { padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line) }
.two-lists h3 { margin-top: 0 }
.ticks, .crosses { list-style: none; margin: 0; padding: 0 }
.ticks li, .crosses li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; font-size: 15.5px }
.ticks .i { color: var(--ok); margin-top: 3px }
.crosses .i { color: var(--muted); margin-top: 3px }

.page-shot { margin: 20px 0 28px }
.page-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 30px 60px -30px rgba(7, 31, 14, .35) }
.page-shot figcaption { font-size: 13px; color: var(--muted); margin-top: 10px }
.prose-wrap .flow-map { margin: 22px 0 0 }

.faq-sec { max-width: 820px }
.faq-list details { border-top: 1px solid var(--line) }
.faq-list details:last-child { border-bottom: 1px solid var(--line) }
.faq-list summary { list-style: none; display: flex; align-items: center; gap: 16px; padding: 16px 0; cursor: pointer }
.faq-list summary::-webkit-details-marker { display: none }
.faq-list summary h3 { flex: 1; margin: 0; font: 600 17px/1.35 "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif }
.faq-list summary .i { flex: none; color: var(--muted); transition: transform .15s }
.faq-list details[open] summary .i { transform: rotate(45deg) }
.faq-list summary:hover h3 { text-decoration: underline; text-underline-offset: 3px }
.faq-a { padding: 0 0 16px; color: var(--muted) }
.faq-a p { color: var(--muted); font-size: 15.5px }

.related { padding-bottom: 56px }
.related h2 { font: 600 22px/1.2 Outfit, "Outfit Fallback", sans-serif; margin: 0 0 14px }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.related a { display: grid; gap: 4px; height: 100%; padding: 18px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color .12s }
.related a:hover { border-color: var(--line-strong) }
.related b { font-weight: 600 }
.related span { color: var(--muted); font-size: 14px }
.closing-note { margin: 14px 0 0; font-size: 13px; color: var(--muted) }

.l-foot-wrap { border-top: 1px solid var(--line); margin-top: 24px }
.foot-grid { max-width: 1200px; margin: 0 auto; padding: 40px 28px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px }
.foot-grid h2 { font: 600 13px "Plus Jakarta Sans", "Plus Jakarta Sans Fallback", sans-serif; color: var(--muted); margin: 0 0 10px }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px }
.foot-grid a { font-size: 14px; text-decoration: none }
.foot-grid a:hover { text-decoration: underline; text-underline-offset: 3px }
.l-foot-wrap .l-foot { border-top: 0 }
.l-foot-left a { color: var(--muted) }

@media (max-width: 760px) {
  .strip ul, .related ul, .two-lists, .foot-grid { grid-template-columns: minmax(0, 1fr) }
  .page-hero { padding-top: 28px }
  .prose-wrap h2 { font-size: 24px }
  .foot-grid { padding-left: 16px; padding-right: 16px }
}

/* Tools: savings calculator and SPF/DKIM/DMARC checker */
.tool { margin: 18px 0 24px; padding: 22px; border-radius: 16px; background: var(--card); border: 1px solid var(--line) }
.calc-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.calc-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted) }
.calc-form input, .calc-form select { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 16px; background: var(--field); color: var(--ink); font-weight: 500 }
.calc-form input:focus, .calc-form select:focus { outline: 2px solid var(--brand-deep); outline-offset: -1px }
.calc .table-wrap { margin: 18px 0 12px }
.calc tr.us-row th, .calc tr.us-row td { background: var(--soft); font-weight: 700 }
.calc-save { font-size: 17px; margin: 0 0 8px }
.calc-note { font-size: 13px; color: var(--muted); margin: 8px 0 0 }
.checker .check-form, .checker-form { max-width: 560px }
.checker-form label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 8px }
.chk-title { margin: 22px 0 12px }
.chk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.chk-card { padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); min-width: 0 }
.chk-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px }
.chk-card h3 { margin: 0; font: 600 18px Outfit, "Outfit Fallback", sans-serif }
.chk-pill { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px }
.chk-card.ok .chk-pill { background: var(--soft); color: var(--ok-ink); border: 1px solid var(--soft-line) }
.chk-card.warn .chk-pill { background: var(--warn-soft); color: var(--warn) }
.chk-card.bad .chk-pill { background: var(--bad-soft); color: var(--bad) }
.chk-card p { font-size: 15px; margin: 0 0 8px }
.chk-what { color: var(--muted); font-size: 13px !important }
.chk-card pre { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line-2); overflow-x: auto; white-space: pre-wrap; word-break: break-all }
.chk-card code { font-size: 12.5px; background: none; border: 0; padding: 0 }
.chk-note { color: var(--warn); font-size: 13.5px !important }
.chk-cta { margin-top: 16px }
.chk-wait, .chk-err { margin: 16px 0 0 }
.chk-err { color: var(--bad) }
@media (max-width: 760px) { .calc-form, .chk-grid { grid-template-columns: minmax(0, 1fr) } }

/* Marketing pages manage their own spacing (the onboarding pages pad <main>). */
body.landing main { padding: 0 }
.faq dd a, .vs-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px }
/* Comparison tables become labelled cards on phones */
@media (max-width: 600px) {
  table.cmp:not(.keep) thead { display: none }
  table.cmp:not(.keep), table.cmp:not(.keep) tbody, table.cmp:not(.keep) tr, table.cmp:not(.keep) tbody th, table.cmp:not(.keep) td { display: block; width: 100% }
  table.cmp:not(.keep) tr { padding: 12px 16px; border-bottom: 1px solid var(--line-2) }
  table.cmp:not(.keep) tbody tr:last-child { border-bottom: 0 }
  table.cmp:not(.keep) tbody th { padding: 0 0 6px; border: 0; font-size: 16px }
  table.cmp:not(.keep) td { display: flex; gap: 14px; justify-content: space-between; padding: 4px 0; border: 0; text-align: right }
  table.cmp:not(.keep) td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 500; text-align: left; flex: none; max-width: 42% }
  table.cmp:not(.keep) td[data-label=""]::before { display: none }
  table.cmp:not(.keep) .us { background: none; color: var(--ok-ink) }
}

/* ---------- Audit fixes (hit areas, focus, measure) ---------- */
/* Targets at least 24px tall (WCAG 2.5.8), and 40px for the header buttons. */
.crumbs a { padding: 4px 0 }
.l-top .mark { padding: 8px 0 }
.l-top nav a { min-height: 40px; display: inline-flex; align-items: center }
.l-foot { flex-wrap: wrap; row-gap: 8px }
.l-foot-left { flex-wrap: wrap; row-gap: 4px }
.l-foot-left a, .powered { padding: 6px 0; white-space: nowrap }
.foot-grid a { display: inline-block; padding: 3px 0 }
/* Compound fields (input + button in one box) show a solid ring, not just a faint glow (3:1 non-text contrast). */
.check-row:focus-within { outline: 2px solid var(--ink); outline-offset: 2px }
.calc-form input:focus-visible, .calc-form select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
/* Comfortable line length for answers and body copy. */
.prose-wrap p { max-width: 64ch }
.faq-a p { max-width: 64ch }

/* Step lists inside articles: the article's heading and paragraph margins shouldn't push titles away from their number. */
.prose-wrap .rail h3 { margin: 1px 0 4px }
.prose-wrap .rail p { margin: 0 }
.prose-wrap .rail li { padding-bottom: 22px }

/* Stacked phone tables keep their caption full width. */
@media (max-width: 600px) { table.cmp:not(.keep) caption { display: block; padding: 14px 16px 6px } }

/* Calculator fits two fields per row in the article column. */
.calc-form { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) }

/* Page headline: two lines on desktop for all but the longest titles. */
.page-hero h1 { max-width: 24ch; font-size: clamp(32px, 3.9vw, 48px) }

/* Closing band: room between the question and the field. */
.closing h2 { margin-bottom: 20px }

/* Article with an "On this page" list beside it on wide screens. */
.doc { display: block }
.toc { display: none }
@media (min-width: 1100px) {
  .doc.has-toc { display: grid; grid-template-columns: minmax(0, 760px) minmax(200px, 250px); justify-content: space-between; column-gap: 56px; align-items: start }
  .toc { display: block; position: sticky; top: 24px; margin-top: 40px; padding: 18px 0 0; border-top: 2px solid var(--ink) }
  .toc-h { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--muted) }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px }
  .toc a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.35; color: var(--muted); text-decoration: none }
  .toc a:hover { color: var(--ink) }
  .toc a[aria-current="true"] { color: var(--ink); font-weight: 600 }
}
.prose-wrap h2, .faq-sec h2 { scroll-margin-top: 24px }
@media (max-width: 760px) { .foot-grid a { padding: 8px 0 } .foot-grid ul { gap: 2px } }
.crumbs { align-items: center }
.l-top .mark { min-height: 44px }
@media (max-width: 760px) { .foot-grid a { padding: 10px 0 } .l-foot-left a, .powered { padding: 10px 0 } }