/* GENERATED from brand/tokens.json by brand/make_assets.py — do not edit. */
:root {
  --paper: #F2F3F1;
  --ink: #171A21;
  --rule: #A9ADB4;
  --signal: #C63D1D;
  --gain: #1F6B3B;
  --font-display: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Arial Narrow', sans-serif;
  --font-body: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, 'DejaVu Sans Mono', monospace;
}

/* Coldstill — the instrument, not the brochure.
   Cool engineering paper with a faint graph grid, a solid ink masthead,
   and one signature element: the calculator as an instrument panel.
   Palette and type come from tokens.css (brand/tokens.json). */

* { box-sizing: border-box; }

html {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* Graph-paper field: the subject's own material, kept faint. */
  background-image:
    linear-gradient(color-mix(in srgb, var(--rule) 16%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--rule) 16%, transparent) 1px, transparent 1px);
  background-size: 28px 28px;
}

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

main.shell { padding-top: 40px; padding-bottom: 96px; }

/* --- masthead: solid ink band ------------------------------------------- */

header.masthead {
  background: var(--ink);
  /* Anchored while scrolling; the band is opaque ink, so nothing shows
     through, and no other element on the site carries a z-index. */
  position: sticky;
  top: 0;
  z-index: 100;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 18px;
  padding-bottom: 18px;
}

.masthead svg { height: 34px; width: auto; display: block; }
.logo-link { display: block; line-height: 0; }

.masthead nav { display: flex; gap: 2px; flex-wrap: wrap; }

.masthead nav a {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  text-decoration: none;
  color: var(--paper);
  padding: 9px 14px;
  border: 1.5px solid transparent;
}

.masthead nav a:hover { border-color: var(--rule); }

.masthead nav a.active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}

/* --- type roles ---------------------------------------------------------- */

h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.06;
  letter-spacing: 0.2px;
  margin: 18px 0 18px;
}

h2 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 64px 0 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  position: relative;
}

/* Technical-drawing header: a short heavy tick over the hairline. */
h2::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--ink);
}

p { margin: 12px 0; max-width: 68ch; }

a { color: var(--ink); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* The masthead band is ink, so the global ink focus ring vanishes there. */
.masthead :focus-visible { outline-color: var(--paper); }

.num { font-family: var(--font-mono); }

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

/* Single column. The hero used to be a 7fr/4fr grid with a "spec card" of
   engagement facts in the second cell — prices and jargon presented before
   the reader knew what was being sold, in the most valuable space on the
   site. The prices already appear under "How it works", so the card was
   duplication occupying the fold. */
.hero {
  margin-bottom: 8px;
}

/* Constrained measure: a full-width 1120px line is ~110 characters, which is
   past the point where the eye loses the line. */
.hero-copy { max-width: 720px; }

.hero-copy > p { font-size: 18.5px; }

/* --- tables --------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13.5px;
  margin: 18px 0;
  background: var(--paper);
}

caption {
  text-align: left;
  font-family: var(--font-body);
  font-size: 13px;
  padding-bottom: 6px;
}

th, td {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  vertical-align: top;
}

th { font-weight: 600; border-bottom: 2px solid var(--ink); }

td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* Tables scroll rather than squash.

   `table { width: 100% }` and `overflow-x: auto` cancel each other out: the
   table obediently shrinks to the container, so the wrapper never has anything
   to scroll and the columns crush instead. Measured on a 390px phone before
   this rule: the cost table wanted 718px and was being rendered into 370px,
   and the results table wanted 663px and did not scroll at all.

   `width: auto` lets the table take the width its content needs, `min-width:
   100%` keeps it filling the shell when the content is narrower, and the
   wrapper scrolls when it is not. Numeric columns never wrap — a figure broken
   across two lines is a figure nobody can compare. */
.table-scroll { overflow-x: auto; }
.table-scroll table { width: auto; min-width: 100%; }
.table-scroll td.n, .table-scroll th.n { white-space: nowrap; }

/* --- the calculator: instrument panel ------------------------------------ */

.calc {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0;
  margin: 26px 0;
}

.calc-title {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0;
  padding: 10px 18px;
  max-width: none;
}

.calc-body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 26px;
  padding: 22px;
}

.calc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-content: start; }

.calc label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.calc select,
.calc input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
}

.calc-out {
  border-left: 1px solid var(--rule);
  padding-left: 26px;
  margin-top: 0;
  align-self: start;
}

.calc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
}

.calc-row:first-child { border-top: none; }

.calc-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.calc-row.delta .v {
  color: var(--signal);          /* the one signal use: the delta figure */
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 700;
  line-height: 1.1;
}

.calc-note {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  font-size: 13px;
  margin: 0;
  max-width: none;
}

.calc-note .verified { font-family: var(--font-mono); font-size: 12px; }
.calc-note p { margin: 0 0 10px; max-width: none; }
.calc-note p:last-child { margin-bottom: 0; }

.todo {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper);
  border: 1px dashed var(--rule);
  padding: 0 5px;
}

/* --- annotations ---------------------------------------------------------- */

.annotation {
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-left: 3px solid var(--rule);
  padding: 2px 0 2px 12px;
  margin: 18px 0;
  max-width: 60ch;
}

.delta-figure { color: var(--signal); font-family: var(--font-mono); font-weight: 700; }

/* --- tiers ---------------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 20px 0;
}

.tier { background: var(--paper); border: 2px solid var(--ink); padding: 18px 22px; }

.tier h3 {
  font-family: var(--font-mono);
  font-size: 14px;
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tier .price {
  font-family: var(--font-mono);
  font-size: 30px;
  font-weight: 700;
  margin: 6px 0 12px;
}

.tier ul { margin: 0; padding-left: 18px; font-size: 14.5px; }
.tier li { margin: 5px 0; }
.tier-line { font-size: 14.5px; margin: 0; }

/* --- home: how it works --------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 22px 0;
}

.step { border-top: 3px solid var(--ink); padding-top: 12px; }

.step-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px; }

.step h3 {
  font-family: var(--font-mono);
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 4px 0 8px;
}

.step p { font-size: 14.5px; margin: 0; }

/* --- benchmark: headline figures ------------------------------------------- */

/* Deliberately the same construction as .step — top rule, mono label, so the
   page reads as one system rather than a second design. Four across on desktop,
   two on narrow screens; never one, because these figures are comparisons and
   a single column loses the comparison. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 26px 0 30px;
}

.stat { border-top: 3px solid var(--ink); padding-top: 10px; }

.stat .k {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  display: block;
  margin-bottom: 6px;
}

.stat .v {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  display: block;
}

.stat .sub { font-size: 13px; display: block; margin-top: 6px; }

@media (max-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .stat .v { font-size: 23px; }
}

/* Deltas in a results table are colour-coded in both directions. Colour is
   never the only signal: every figure keeps its + or - sign, so the table
   still reads correctly in monochrome and to anyone who cannot separate the
   two hues. A loss on this page is stated, not hidden. */
td.down, .stat .v.down { color: var(--signal); }
td.up, .stat .v.up { color: var(--gain); }

/* --- lists ----------------------------------------------------------------- */

ul.plain { padding-left: 20px; max-width: 68ch; }
ul.plain li { margin: 7px 0; }

/* --- contact ---------------------------------------------------------------- */

.contact-email {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(16px, 3vw, 21px);
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 13px 20px;
  margin: 10px 0;
  text-decoration: none;
}

.contact-email:hover { background: var(--paper); color: var(--ink); }

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

footer {
  border-top: 3px solid var(--ink);
  background: var(--paper);
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  padding-top: 32px;
  padding-bottom: 56px;
  font-size: 13.5px;
}

.footer-inner p { margin: 4px 0; max-width: none; }

.foot-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.foot-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* --- small screens ----------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 8px; }
  .calc-body { grid-template-columns: 1fr; }
  .calc-out { border-left: none; border-top: 1px solid var(--rule); padding: 14px 0 0; }
  .steps { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .masthead nav a, .contact-email, a { transition: all 120ms linear; }
}

/* --- mobile navigation: the masthead becomes a drawer --------------------- */

/* Off above the breakpoint. nav.js reads the toggle's computed display to
   decide whether the drawer exists, so the breakpoint is defined here once and
   nowhere else. */
.nav-toggle, .nav-scrim { display: none; }

/* 760px, not 700: the links need ~680px beside the logo, and the extra is
   headroom for a visitor running larger text. */
@media (max-width: 760px) {
  /* The logo and the toggle share one row and stay on it. */
  .masthead-inner { flex-wrap: nowrap; gap: 12px; }

  .nav-toggle {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--paper);
    background: transparent;
    border: 1.5px solid var(--rule);
    /* 42px tall at this font size — a thumb target, not a mouse target. */
    padding: 11px 14px;
    cursor: pointer;
    position: relative;
    z-index: 210;
    flex: none;
  }
  .nav-toggle:hover { border-color: var(--paper); }

  .masthead nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(78vw, 320px);
    background: var(--ink);
    /* A hard paper edge rather than a shadow: this site draws with rules, not
       with blur. */
    border-left: 2px solid var(--paper);
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    /* Clears the masthead band so the toggle stays visible and usable while
       the drawer is open — it is also the close button. */
    padding: 88px 0 24px;
    overflow-y: auto;
    z-index: 200;
    transform: translateX(100%);
    /* visibility, not display: it keeps the links out of the tab order while
       closed and still allows the slide. */
    visibility: hidden;
  }

  [data-nav-open] .masthead nav { transform: none; visibility: visible; }

  .masthead nav a {
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 35%, transparent);
    padding: 15px 22px;
    font-size: 14px;
  }
  .masthead nav a:hover { border-color: transparent; background: color-mix(in srgb, var(--paper) 10%, transparent); border-bottom-color: color-mix(in srgb, var(--rule) 35%, transparent); }
  .masthead nav a.active { background: var(--paper); color: var(--ink); }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
  }
  [data-nav-open] .nav-scrim { opacity: 1; visibility: visible; }

  /* Stop the page scrolling underneath the open drawer. */
  html[data-nav-open], html[data-nav-open] body { overflow: hidden; }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  /* visibility is stepped, never interpolated, and the direction matters.
     Opening: 0s with no delay, so the links are focusable in the same frame the
     drawer opens — interpolating it left them `hidden` for 180ms, and
     .focus() on a hidden element silently does nothing, so keyboard users
     landed nowhere. Closing: delayed by the slide, so the drawer is still
     visible while it travels out instead of vanishing on the spot. */
  .masthead nav { transition: transform 180ms ease-out, visibility 0s linear 180ms; }
  [data-nav-open] .masthead nav { transition: transform 180ms ease-out, visibility 0s linear 0s; }
  .nav-scrim { transition: opacity 180ms linear, visibility 0s linear 180ms; }
  [data-nav-open] .nav-scrim { transition: opacity 180ms linear, visibility 0s linear 0s; }
}

/* ---- Enquiry form ------------------------------------------------------ */
/* Shares the calculator's instrument-panel language: hard borders, mono
   inputs, no rounded corners. The form is the primary conversion surface, so
   it reads as part of the same machine rather than a bolted-on widget. */

.enquiry {
  border: 1.5px solid var(--ink);
  padding: 20px;
  margin: 22px 0 8px;
  display: grid;
  gap: 18px;
}

.enquiry-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.enquiry label,
.enquiry legend {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.enquiry input[type="text"],
.enquiry input[type="email"],
.enquiry select,
.enquiry textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 9px 10px;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0;
}

.enquiry textarea { resize: vertical; }

.enquiry fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* Radios read as a stacked list of plain choices, not a styled control. */
.enquiry .opt {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-weight: 400;
  font-size: 15px;
  margin-bottom: 7px;
}

.enquiry .opt input { flex: none; }

.enquiry button {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 28px;
  color: var(--paper);
  background: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  justify-self: start;
}

.enquiry button:hover { background: transparent; color: var(--ink); }

.enquiry-note,
.enquiry-fallback {
  font-size: 14px;
  margin: 0;
}

@media (min-width: 700px) {
  .enquiry-grid { grid-template-columns: 1fr 1fr; }
  .enquiry-grid > div:only-child { grid-column: 1 / -1; }
}

/* Honeypot. Moved off-screen rather than display:none — some bots skip fields
   that are display:none, and being off-screen catches those too. It is also
   aria-hidden and out of the tab order in the markup, so nobody using a screen
   reader or a keyboard can land in it by accident. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- cross-site region notice ---------------------------------------------
   A slim bar under the masthead, shown only when the visitor's region
   disagrees with the site they landed on. Deliberately quiet: it is an offer,
   not an interstitial, and it can be dismissed permanently. */
.region-notice {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  border-bottom: 1px solid var(--rule);
}
.region-notice a { font-weight: 600; }
.region-dismiss {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}