/* Spendlint design system, v1.
   A bill someone has been through with a highlighter: warm paper, black ink,
   one yellow highlighter for the brand and for what matters, hairlines
   instead of shadows, Space Grotesk for headings and JetBrains Mono for
   every figure and rule id. Savings are green, warnings amber, serious red;
   the highlighter is never a status colour. */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("fonts/space-grotesk-var.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/jetbrains-mono-var.woff2") format("woff2");
}
:root {
  color-scheme: light;
  --bg: #f4f1e9; --surface: #fffdf8; --surface-2: #ece8dd; --surface-3: #e2dccd;
  --ink: #141519; --ink-2: #444750; --muted: #5f6370; --line: #d9d4c7; --line-strong: #141519;
  --hl: #ffe14d; --hl-ink: #141519; --hl-soft: #fff5b8;
  --good: #0e8f55; --good-soft: #dff3e8; --good-ink: #0b6e42;
  --warn: #e0a416; --warn-soft: #fbefcd;
  --serious: #d64533; --serious-soft: #f9ddd8;
  --navy: #141519; --navy-ink: #f4f1e9;
  --accent: #141519; --accent-2: #000000; --accent-soft: #ece8dd; --accent-ink: #f4f1e9;
  --display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 6px;
  --shadow: none; --shadow-lg: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121317; --surface: #191a1f; --surface-2: #23252c; --surface-3: #2c2e36;
    --ink: #f1efe9; --ink-2: #bdbec6; --muted: #868994; --line: #2f3138; --line-strong: #f1efe9;
    --hl: #ffe14d; --hl-ink: #141519; --hl-soft: #4a4114;
    --good: #22b56f; --good-soft: #14301f; --good-ink: #4fd68f;
    --warn: #f0b42e; --warn-soft: #3b2f0e;
    --serious: #f0654f; --serious-soft: #3e1c17;
    --navy: #000000; --navy-ink: #f1efe9;
    --accent: #f1efe9; --accent-2: #ffffff; --accent-soft: #23252c; --accent-ink: #121317;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15.5px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--hl); text-decoration-thickness: 2px; }
::selection { background: var(--hl); color: var(--hl-ink); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px 64px; }
@media (max-width: 640px) { .wrap { padding: 0 16px 48px; } }
.wrap.narrow { max-width: 720px; }
h1, h2, h3, .brand, .btn, .tile .label, .eyebrow, .pill, .stat p, .plan .eyebrow, .faq summary { font-family: var(--display); }
h1 { font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 10px; }
h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 44px 0 12px; line-height: 1.15; }
h3 { font-size: 16px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
p.lede { font-size: 17.5px; color: var(--ink-2); max-width: 62ch; margin: 0 0 20px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.eyebrow { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 8px; }
.section-intro { color: var(--ink-2); max-width: 66ch; margin: -4px 0 18px; }
mark, .hl { background: var(--hl); color: var(--hl-ink); padding: 0 .14em; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.num, .tile .value, .amount, .stat .n, .tbl .num, .bar .amt, .teaser .row .m, .roi-out .value, .price .amount { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* nav */
nav.top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 18px 0; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; }
.brand b { font-weight: 700; background: var(--hl); color: var(--hl-ink); padding: 0 .1em; margin-left: -.02em; border-radius: 2px; }
nav.top .links { margin-left: auto; display: flex; gap: 2px; align-items: center; }
nav.top .links a, nav.top .links button { color: var(--ink-2); text-decoration: none; font: inherit; font-family: var(--display); font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: var(--radius); background: none; border: 0; cursor: pointer; }
nav.top .links a:hover, nav.top .links button:hover { background: var(--surface-2); color: var(--ink); }
nav.top .links a.btn.primary { background: var(--ink); color: var(--bg); padding: 9px 14px; }
nav.top .links a.btn.primary:hover { background: var(--hl); color: var(--hl-ink); }
@media (max-width: 640px) {
  nav.top { padding: 12px 0 10px; }
  nav.top .links a.marketing { display: none; }
  nav.top .links a, nav.top .links button { padding: 7px 9px; font-size: 13px; }
}

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--display); font-size: 14.5px; font-weight: 700; border-radius: var(--radius); padding: 10px 16px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .12s ease, color .12s ease, border-color .12s ease; line-height: 1.2; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.primary:hover { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--surface-2); }
.btn.ghost { background: transparent; color: var(--navy-ink); border-color: rgba(244,241,233,.45); }
.btn.ghost:hover { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); }
.btn.subtle { background: none; color: var(--ink-2); border-color: transparent; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.btn.subtle:hover { color: var(--ink); text-decoration-color: var(--hl); text-decoration-thickness: 2px; }
.btn.big { font-size: 16px; padding: 13px 22px; }
.btn.block { display: flex; width: 100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--hl); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; }
@media (max-width: 640px) { .btn { white-space: normal; text-align: center; } }

/* layout bits */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.card.pad { padding: 22px 24px; }
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (max-width: 640px) { .grid.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tile { padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile .label { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile .value { font-size: 28px; font-weight: 600; overflow-wrap: anywhere; }
.tile .value.up { color: var(--good-ink); }
.tile .sub { font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 640px) { .tile { padding: 12px 14px; } .tile .value { font-size: 22px; } .tile .label { font-size: 10px; } }

/* flashes */
.flash { padding: 11px 14px; border-radius: var(--radius); margin: 16px 0; font-size: 14px; border: 1px solid var(--line); border-left: 4px solid var(--ink); background: var(--surface); }
.flash.success { border-left-color: var(--good); }
.flash.warning { border-left-color: var(--warn); background: var(--warn-soft); }
.flash.error { border-left-color: var(--serious); background: var(--serious-soft); }

/* landing: hero */
.hero { position: relative; display: grid; gap: 34px; padding: 48px 0 8px; align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: 48px; } }
/* the hero is a bill, not a screenshot: ruled paper, mono figures, two
   lines under the highlighter, a note in the margin */
.bill { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 16px; box-shadow: 0 1px 0 var(--line), 0 12px 0 -6px var(--surface-2); max-width: 640px; justify-self: end; width: 100%; }
@media (max-width: 959px) { .bill { justify-self: start; } }
.bill-head { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 0 10px; border-bottom: 1px solid var(--line-strong); }
.bill-head b { color: var(--ink); font-weight: 600; }
.bill-lines { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bill-lines th { text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 8px 6px 0; }
.bill-lines td { padding: 8px 8px 8px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.bill-lines td:first-child { font-family: var(--mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.bill-lines td:nth-child(2) { color: var(--ink-2); }
.bill-lines .num { font-family: var(--mono); text-align: right; white-space: nowrap; }
.bill-lines th.num { text-align: right; }
.bill-lines tr.marked td { position: relative; z-index: 0; color: var(--hl-ink); font-weight: 600; }
.bill-lines tr.marked td:nth-child(2) { color: var(--hl-ink); }
/* the mark sits behind the text (its own stacking context), overshoots the
   line by a few pixels and leans like a real highlighter */
.bill-lines tr.marked td::before { content: ""; position: absolute; left: -4px; right: -2px; top: 5px; bottom: 5px; background: var(--hl); border-radius: 2px; transform: skewX(-4deg); z-index: -1; }
.bill-lines tr.marked td:first-child::before { left: -6px; }
.bill-note { margin: 12px 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.bill-note .stamp { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; padding: 1px 6px; margin-right: 6px; transform: rotate(-2deg); }
@media (max-width: 640px) { .bill { padding: 14px 14px 12px; } .bill-lines td:nth-child(2) { font-size: 12.5px; } .bill-lines td:first-child { white-space: normal; overflow-wrap: anywhere; } }
.hero-text { max-width: 780px; }
.hero h1 { font-size: 54px; max-width: 20ch; }
@media (max-width: 760px) { .hero h1 { font-size: 38px; } }
.hero h1 em { font-style: normal; background: var(--hl); color: var(--hl-ink); padding: 0 .12em; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* the highlighted word takes turns (Azure bill, 365 bill): a short fade, no
   movement, and nothing at all for people who asked for reduced motion */
.hero h1 em { display: inline-block; transition: opacity .26s ease; }
.hero h1 em.swap { opacity: 0; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 14px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-2); font-family: var(--mono); }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.trust span::before { content: ""; width: 6px; height: 6px; background: var(--ink); flex: none; }
.frame { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.frame-bar { height: 30px; display: flex; gap: 7px; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.frame-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.frame img, .frame picture { display: block; width: 100%; height: auto; }
.frame.fade { position: relative; }
.frame.fade::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(to bottom, transparent, var(--surface)); pointer-events: none; }

/* the front page and the features page breathe: wider gaps between
   sections, short lead-ins, and a one-line pointer to the long version */
.landing h2 { margin-top: 64px; }
.landing .band h2 { margin-top: 0; }
.landing .section-intro { margin-bottom: 20px; }
.landing .stats { margin-top: 40px; }
.landing .steps .card p, .landing .jobs .card p { margin-bottom: 0; }
.jobs .card h3 { margin: 4px 0 8px; font-size: 17px; }
.more { margin: 12px 0 0; font-size: 14px; }
.more a { color: var(--ink); font-weight: 600; text-decoration-color: var(--hl); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.honest { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; font-size: 14px; color: var(--ink-2); }
.honest div { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.honest b { color: var(--ink); display: block; margin-bottom: 4px; font-family: var(--display); }
.jump { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; font-family: var(--mono); font-size: 12.5px; }
.jump a { color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; text-decoration: none; }
.jump a:hover { color: var(--ink); border-color: var(--ink); }

/* stats strip */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 30px 0 0; }
.stat { padding: 18px 20px; }
.stat .n { font-size: 40px; font-weight: 600; line-height: 1; color: var(--ink); }
.stat .n.green { color: var(--good-ink); }
.stat p { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); font-family: var(--body); }
.stat p a { color: var(--muted); }

/* sections */
.split { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.5fr); gap: 26px; align-items: center; }
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }
.gallery-wide { margin-top: 14px; }
.steps { counter-reset: step; }
.steps .card { position: relative; padding-left: 64px; }
.steps .card::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; left: 20px; top: 22px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--hl-ink); background: var(--hl); padding: 2px 6px; border-radius: 3px; }
.features { padding-left: 18px; margin: 0; }
.features li { margin: 8px 0; color: var(--ink-2); }
.features li b { color: var(--ink); }
.features.check { list-style: none; padding-left: 0; }
.features.check li { padding-left: 24px; position: relative; }
.features.check li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; background: var(--ink); }

/* comparison table */
.compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { padding: 11px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare th { font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.compare th.us { color: var(--ink); background: var(--hl); }
.compare td.yes { color: var(--good-ink); font-weight: 700; }
.compare td.no { color: var(--muted); }
.compare tr:last-child td { border-bottom: 0; }
.compare-wrap { overflow-x: auto; }
.cite { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.cite a { color: var(--muted); }

/* pricing */
.plans .price { text-align: left; align-items: stretch; }
.price { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.price .amount { font-size: 36px; font-weight: 600; }
.price .amount small { font-family: var(--body); font-size: 14px; color: var(--muted); font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.plans .features.left { padding-left: 0; margin: 6px 0 18px; flex: 1; }
.price.featured { border-color: var(--line-strong); border-width: 2px; position: relative; }
.price.featured::before { content: "Most popular"; position: absolute; top: -12px; left: 22px; background: var(--hl); color: var(--hl-ink); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; }
.plan-card .split-row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.plan-card h3 { margin: 4px 0 6px; }
.roi { margin: 4px 0 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--good-soft); color: var(--good-ink); font-size: 14px; }

/* dark band (MSP / closing CTA) */
.band { background: var(--navy); color: var(--navy-ink); border-radius: var(--radius); padding: 36px 34px; margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .8fr); gap: 24px; align-items: center; }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; padding: 28px 24px; } }
.band h2 { color: var(--navy-ink); margin: 0 0 8px; }
.band p { color: rgba(244,241,233,.78); margin: 0; }
.band .eyebrow { color: var(--hl); }
.band .actions { justify-content: flex-end; }

/* faq */
.faq details { border-top: 1px solid var(--line); padding: 4px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-weight: 700; padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink); font-weight: 700; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 14px; color: var(--ink-2); max-width: 72ch; }

/* tables & lists */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.tbl td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl .primary { font-weight: 600; }
.tbl .sub { display: block; font-size: 12px; color: var(--muted); font-family: var(--body); }
.tbl.small { font-size: 12.5px; }
.tbl .mono { font-family: var(--mono); font-size: 11.5px; overflow-wrap: anywhere; }
.tbl td.actions { white-space: nowrap; }
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card.table { padding: 6px 22px; }
@media (max-width: 640px) {
  .card.table { padding: 4px 16px; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; width: 100%; }
  .tbl.stack thead { display: none; }
  .tbl.stack tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl.stack tr:last-child { border-bottom: 0; }
  .tbl.stack td { padding: 3px 0; border: 0; text-align: left; white-space: normal; }
  .tbl.stack td:empty { display: none; }
  .tbl.stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .tbl.stack td.actions { display: flex; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px; padding-top: 8px; white-space: normal; }
  .tbl.stack td.actions form.inline { display: contents; }
}
.pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; border-radius: 3px; padding: 3px 8px; background: var(--surface-2); white-space: nowrap; border: 1px solid var(--line); }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill.done { background: var(--good-soft); border-color: transparent; } .pill.done .dot { background: var(--good); }
.pill.running, .pill.queued { background: var(--warn-soft); border-color: transparent; } .pill.running .dot, .pill.queued .dot { background: var(--warn); }
.pill.failed { background: var(--serious-soft); border-color: transparent; } .pill.failed .dot { background: var(--serious); }
.pill.cancelled { background: var(--surface-2); color: var(--ink-2); border-color: transparent; } .pill.cancelled .dot { background: var(--muted); }
.pill.paid { background: var(--hl); color: var(--hl-ink); border-color: transparent; } .pill.paid .dot { background: var(--hl-ink); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
form.inline { display: inline; }

/* forms */
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 4px; font-family: var(--display); }
input[type=text], input[type=password], input[type=number], select { width: 100%; font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.help { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
code, pre { font: 12.5px/1.5 var(--mono); }
code { background: var(--surface-2); padding: 1px 5px; border-radius: 3px; }
pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; }

/* preview bars */
.bars { display: grid; gap: 8px; }
.bar { display: grid; grid-template-columns: 150px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; }
.bar .track { height: 10px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--ink); border-radius: 2px; }
.bar .amt { text-align: right; font-weight: 600; }
.teaser { display: grid; gap: 8px; }
.teaser .row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.teaser .row .t { font-weight: 600; }
.teaser .row .m { font-weight: 700; white-space: nowrap; }
.locked { position: relative; overflow: hidden; }
.locked .blur { filter: blur(5px); user-select: none; pointer-events: none; opacity: .7; }
.locked .overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.paywall { border: 2px solid var(--line-strong); }
.paywall ul { padding-left: 18px; margin: 8px 0 14px; color: var(--ink-2); }
.progress { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.spinner { width: 18px; height: 18px; border: 3px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } html { scroll-behavior: auto; } }

footer { margin-top: 56px; border-top: 1px solid var(--line); padding-top: 18px; font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 8px 18px; }
footer a { color: var(--muted); }

/* price bands */
.compare.bands td.primary { font-family: var(--display); font-weight: 700; }
.compare.bands td.num b { font-family: var(--mono); font-weight: 600; font-size: 15px; }

/* features and benefits */
.pillar h3 { margin: 2px 0 10px; font-size: 17px; }
.pillar .features li { margin: 10px 0; }
.benefit { display: block; color: var(--good-ink); font-size: 13.5px; margin-top: 2px; }
.benefit::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ink); margin: 0 8px 2px 0; }

/* ROI calculator */
.roi-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; margin: 4px 0 16px; }
.roi-inputs label { margin: 0; }
.roi-inputs input[type=number], .roi-inputs select { width: 100%; font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); margin-top: 4px; }
.roi-inputs input[type=number] { font-family: var(--mono); }
.roi-out .tile { background: var(--surface-2); border-radius: var(--radius); }

/* ---- scan steps: every stage, its state and how long it took ---- */
.steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
.steps .step { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px 10px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--line); }
.steps .step:last-child { border-bottom: 0; }
.steps .mark { width: 9px; height: 9px; display: inline-block; background: var(--ink); align-self: center; }
.steps .step.pending .mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); opacity: .5; }
.steps .step.pending .lbl { color: var(--muted); }
.steps .step.running .mark { background: var(--hl); box-shadow: 0 0 0 2px var(--hl-soft); animation: stepPulse 1.2s ease-in-out infinite; }
.steps .step.running .lbl { font-weight: 700; }
.steps .step.skipped .mark { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
.steps .step.skipped .lbl { color: var(--muted); }
.steps .step.cancelled .mark { background: var(--muted); } .steps .step.cancelled .lbl { color: var(--ink-2); text-decoration: line-through; }
.steps .step.partial .mark { background: var(--warn); }
.steps .step.failed .mark { background: var(--serious); }
.steps .step.failed .lbl { color: var(--serious); font-weight: 700; }
.steps .note { grid-column: 2; font-size: 12px; color: var(--muted); }
.steps .secs { font-family: var(--mono); font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; grid-column: 3; grid-row: 1; }
.steps-done { margin: 10px 0 0; font-size: 13px; }
.steps-done summary { cursor: pointer; color: var(--ink-2); font-weight: 600; }
@keyframes stepPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }