/* =========================================================================
   OrderEnough design system

   A drawing-office look: paper ground, ink furniture, one yellow accent, and
   hairline rules doing the work that shadows and rounded corners usually do.
   Nothing here is decorative for its own sake. The grid lines are the same
   1px rule repeated, so panels can butt together with a gap of exactly one
   pixel and read as a single ruled sheet.

   Three typefaces, all self hosted from /assets/fonts:
     Archivo 800, stretched, uppercase   headings and the wordmark
     IBM Plex Sans                       body copy
     IBM Plex Mono                       labels, units, figures, formulas

   Everything is a custom property, so the whole site can be re-skinned from
   the two blocks at the top.
   ========================================================================= */

/* ------------------------------ fonts ---------------------------------- */
/* font-display: swap keeps first paint immediate. The fallback metrics are
   close enough that the swap does not move much: Plex Sans against system-ui
   and Plex Mono against the system monospace. */
@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-display.e63d4fc5.woff2') format('woff2-variations'),
       url('/assets/fonts/archivo-display.e63d4fc5.woff2') format('woff2');
  font-weight: 800;
  font-stretch: 100% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Sans';
  src: url('/assets/fonts/plexsans.d53db9f2.woff2') format('woff2-variations'),
       url('/assets/fonts/plexsans.d53db9f2.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-400.b275bedb.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-500.15a2b4c2.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('/assets/fonts/plexmono-600.44b56804.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------ tokens --------------------------------- */
:root {
  /* Paper side */
  --paper:      #F2F0EB;
  --paper-2:    #EAE7E0;
  --line:       #D8D4C9;
  --line-2:     #C4BFB2;
  --ink:        #14161A;
  --ink-2:      #2B2F36;
  --ink-3:      #4A4F57;
  --ink-4:      #6B6F76;

  /* Ink side: panels, header, footer */
  --on-ink:     #F2F0EB;
  --on-ink-2:   #A7ACB4;
  --line-ink:   #3A3F47;
  --ink-panel:  #14161A;
  --ink-panel-2:#1B1E24;

  /* The one accent */
  --yellow:     #FFD100;
  --yellow-2:   #E8BE00;
  --yellow-ink: #7A5E00;  /* yellow dark enough to read as text on paper */
  --yellow-wash:rgba(255, 209, 0, .16);

  /* Used only where meaning demands a second colour */
  --alert:      #A32B1C;
  --alert-wash: #F7E6E3;

  --wrap: 1280px;
  --col: 720px;
  --gutter: 32px;
  --rule: 1px;

  --display: 'Archivo', 'Arial Narrow', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  color-scheme: light;
}

html[data-theme="dark"] {
  --paper:      #14161A;
  --paper-2:    #1B1E24;
  --line:       #333840;
  --line-2:     #454B54;
  --ink:        #F2F0EB;
  --ink-2:      #DCD9D2;
  --ink-3:      #B6BAC1;
  --ink-4:      #9096A0;

  --on-ink:     #F2F0EB;
  --on-ink-2:   #A7ACB4;
  --line-ink:   #3A3F47;
  --ink-panel:  #0D0F12;
  --ink-panel-2:#171A1F;

  --yellow-ink: #FFD100;
  --yellow-wash:rgba(255, 209, 0, .10);

  --alert:      #F09182;
  --alert-wash: #2E1512;

  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

a { color: var(--ink); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--yellow-ink); text-decoration: underline; }

img, svg { max-width: 100%; }
svg { display: block; }

input, button, select, textarea { font: inherit; color: inherit; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

::selection { background: var(--yellow); color: #14161A; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
html[data-theme="dark"] :focus-visible { outline-color: var(--yellow); }


/* ----------------------------- utilities -------------------------------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yellow); color: #14161A; padding: 12px 18px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.skip:focus { left: 0; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mono label: the small uppercase caption used all over the site. */
.eyebrow, .toc-title, .ad-label, .result-label, .group-tag, .card-cat, .board-cat {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Section counter, as on a drawing: "01 / WHY" */
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--ink); display: block; flex: none;
}
.eyebrow.no-rule::before { display: none; }

/* Ruled sheet: every cell draws its own hairline ring, and the 1px gap means
   the rings of neighbouring cells land on exactly the same pixel. Doing it
   per cell rather than as a container background matters when the last row is
   short: an unfilled grid cell then stays paper instead of showing as a
   block of rule colour. */
.ruled { display: grid; gap: var(--rule); }
.ruled > * { background: var(--paper); box-shadow: 0 0 0 var(--rule) var(--line); min-width: 0; }

/* Squared paper, used behind hero blocks. */
.gridpaper {
  background-image:
    linear-gradient(rgba(20, 22, 26, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 22, 26, .055) 1px, transparent 1px);
  background-size: 100% 34px, 34px 100%;
}
html[data-theme="dark"] .gridpaper {
  background-image:
    linear-gradient(rgba(242, 240, 235, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 240, 235, .05) 1px, transparent 1px);
}

/* ---------------------------- typography -------------------------------- */
h1, h2, h3, h4 { color: var(--ink); margin: 0; }

.display, h1 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: -.02em;
  text-wrap: balance;
}
/* The lower bound of each clamp has to be small enough that the longest
   heading on the site still fits a 320px screen: Archivo at 800 and stretched
   to 118% is wide, and a display heading that overflows takes the whole page
   with it. The vw term is what governs on a phone, the ceiling on a desktop. */
h1 { font-size: clamp(29px, 7.6vw, 64px); }
.h1-hero { font-size: clamp(34px, 9vw, 88px); line-height: .92; }

h2 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  text-transform: uppercase;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1;
  letter-spacing: -.01em;
  text-wrap: balance;
}

h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.3; }
h4 { font-family: var(--sans); font-weight: 600; font-size: 16px; }

/* Yellow marker behind a phrase in a display heading. */
.mark { background: var(--yellow); color: #14161A; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }

/* ------------------------------ header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--ink-panel); color: var(--on-ink);
}
.header-in {
  height: 66px; display: flex; align-items: center; gap: 32px;
}
.brandmark {
  display: flex; align-items: baseline; gap: 8px;
  color: var(--on-ink); flex: none;
  padding: 5px 0;                      /* keeps the tap target above 24px */
}
.brandmark:hover { color: var(--on-ink); text-decoration: none; }
.brandmark span.word {
  font-family: var(--display); font-weight: 800; font-stretch: 125%;
  font-size: 22px; letter-spacing: .01em; text-transform: uppercase; line-height: 1;
}
.brandmark span.dot { width: 7px; height: 7px; background: var(--yellow); display: block; flex: none; }

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
  padding: 8px 13px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--on-ink-2); border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--yellow); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--on-ink); border-bottom-color: var(--yellow); }

.header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav + .header-tools { margin-left: 0; }

.iconbtn {
  background: none; border: 1px solid var(--line-ink); color: var(--on-ink-2);
  width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.iconbtn:hover { color: var(--yellow); border-color: var(--yellow); }
.iconbtn svg { width: 18px; height: 18px; }
.theme-dark-only { display: none; }
html[data-theme="dark"] .theme-dark-only { display: block; }
html[data-theme="dark"] .theme-light-only { display: none; }
.menu-btn { display: none; }

/* Segmented metric / imperial control. */
.unit-toggle { display: flex; border: 1px solid var(--line-ink); flex: none; }
.unit-toggle button {
  background: none; border: 0; color: var(--on-ink-2); cursor: pointer;
  padding: 7px 11px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
}
.unit-toggle button + button { border-left: 1px solid var(--line-ink); }
.unit-toggle button:hover { color: var(--yellow); }
.unit-toggle button[aria-pressed="true"] { background: var(--yellow); color: #14161A; }

/* Header call to action. */
.header-cta {
  background: var(--yellow); color: #14161A; border: 0; flex: none;
  padding: 11px 17px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.header-cta:hover { background: var(--on-ink); color: #14161A; text-decoration: none; }

.mobile-nav { display: none; background: var(--ink-panel); border-top: 1px solid var(--line-ink); }
.mobile-nav.open { display: block; }
.mobile-nav ul { list-style: none; margin: 0; padding: 8px 0 14px; }
.mobile-nav li { border-bottom: 1px solid var(--line-ink); }
.mobile-nav li:last-child { border-bottom: 0; }
.mobile-nav a, .mobile-nav .menu-action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 14px var(--gutter); background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-ink-2);
}
.mobile-nav a:hover, .mobile-nav .menu-action:hover { color: var(--yellow); text-decoration: none; }
.mobile-nav a[aria-current="page"] { color: var(--yellow); }
.mobile-nav svg { width: 17px; height: 17px; }

/* ------------------------------- hero ----------------------------------- */
.hero { border-bottom: 1px solid var(--line); padding-bottom: 58px; }
.hero-in { padding: 76px 0 0; display: grid; grid-template-columns: 1.12fr .88fr; gap: 60px; align-items: start; }
.hero-copy { min-width: 0; }
.hero-copy h1 { margin: 22px 0 0; }
.hero-copy .lede { margin: 26px 0 0; max-width: 46ch; }
.hero-actions { display: flex; gap: 12px; margin: 34px 0 0; flex-wrap: wrap; }

/* The board sits slightly proud of the sheet: a hard offset, never a blur. */
.hero .board.ruled {
  grid-template-columns: repeat(3, 1fr);
  box-shadow: 14px 14px 0 rgba(20, 22, 26, .09);
}
html[data-theme="dark"] .hero .board.ruled { box-shadow: 14px 14px 0 rgba(0, 0, 0, .35); }

/* The quieter heading block used by every page that is not the homepage. */
.page-head { border-bottom: 1px solid var(--line); padding: 34px 0 42px; }
.page-head .lede { margin: 18px 0 0; max-width: 62ch; }
.page-head .eyebrow { margin-bottom: 16px; }
.page-head .finder { margin-top: 26px; }

/* Figure row under the hero copy. */
.stats { display: flex; flex-wrap: wrap; gap: 0; margin: 52px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stat { padding: 18px 28px; border-right: 1px solid var(--line); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat-n { font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--ink); line-height: 1; }
.stat-l { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: 6px; }

/* ------------------------------ buttons --------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 23px; border: 1px solid var(--ink); cursor: pointer;
  font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  background: none; color: var(--ink);
}
.btn:hover { text-decoration: none; }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; }
.btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.btn-ghost:hover { background: var(--yellow); border-color: var(--yellow); color: #14161A; }
.btn-yellow { background: var(--yellow); border-color: var(--yellow); color: #14161A; font-weight: 600; }
.btn-yellow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-sm { padding: 11px 16px; font-size: 12px; }

/* Buttons that sit on an ink panel. */
.on-ink .btn { border-color: var(--line-ink); color: var(--on-ink); }
.on-ink .btn:hover { border-color: var(--yellow); color: var(--yellow); }

/* ------------------------------ sections -------------------------------- */
.band { border-bottom: 1px solid var(--line); }
.band-in { padding: 72px 0; }
.wrap.band-in { padding-left: var(--gutter); padding-right: var(--gutter); }
.band-tight { padding: 48px 0; }
.band-ink { background: var(--ink-panel); color: var(--on-ink-2); border-bottom: 0; }
.band-ink h1, .band-ink h2, .band-ink h3 { color: var(--on-ink); }
.band-ink .eyebrow { color: var(--yellow); }
.band-ink .eyebrow::before { background: var(--yellow); }
.band-yellow { background: var(--yellow); color: #14161A; border-bottom: 0; }
.band-yellow h2 { color: #14161A; }

.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.band-head .finder { flex: 1 1 280px; max-width: 420px; }
.band-head h2 { margin: 14px 0 0; }
.cta-sub { font-size: 16px; margin: 12px 0 0; color: #3A3F47; max-width: 56ch; }

/* Heading in a narrow left column, content in a wide right one. */
.split { display: grid; grid-template-columns: 300px 1fr; gap: 60px; align-items: start; }
.split-head h2 { margin: 14px 0 0; }
.cells.ruled { grid-template-columns: repeat(3, 1fr); }

/* The calculator gets the full sheet width, above the article. */
.calc-band { padding: 44px 0 0; }

/* ------------------------------- cards ---------------------------------- */
/* Calculator tiles. The icon carries the recognition, the mono line carries
   the group, and the whole tile turns yellow under the cursor. */
.cards { list-style: none; margin: 0; padding: 0; }
.cards.ruled { grid-template-columns: repeat(4, 1fr); }
.cards.ruled-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  display: flex; flex-direction: column; gap: 0;
  padding: 22px; min-height: 190px; height: 100%;
  color: var(--ink-2); background: var(--paper);
}
.card:hover { background: var(--yellow); color: #14161A; text-decoration: none; }
.card:hover .card-cat, .card:hover .card-desc { color: #3A3F47; }
.card:hover .card-title, .card:hover .card-go { color: #14161A; }
.card:hover .chip { border-color: #14161A; }
.card:hover .chip svg { color: #14161A; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-cat { font-size: 11px; letter-spacing: .1em; }
.card-title { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--ink); margin: 14px 0 6px; }
.card-desc { font-size: 14px; line-height: 1.5; color: var(--ink-3); margin: 0; }
.card-go {
  margin-top: auto; padding-top: 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4);
  display: flex; align-items: center; gap: 7px;
}
.card-go svg { width: 13px; height: 13px; }

/* Icon holder. Square, hairline, monochrome: the shape does the work. */
.chip {
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--line-2); background: transparent;
}
.chip svg { color: var(--ink); }
.chip-sm { width: 28px; height: 28px; }
.chip-sm svg { width: 16px; height: 16px; }
.chip-md { width: 38px; height: 38px; }
.chip-md svg { width: 21px; height: 21px; }
.chip-lg { width: 46px; height: 46px; }
.chip-lg svg { width: 26px; height: 26px; }

/* The board of every calculator, used in the hero and the index. */
.board.ruled { grid-template-columns: repeat(4, 1fr); }
.board-item {
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  padding: 18px 16px; color: var(--ink-2); min-height: 118px;
}
.board-item:hover { background: var(--yellow); color: #14161A; text-decoration: none; }
.board-item:hover .chip { border-color: #14161A; }
.board-item:hover .chip svg, .board-item:hover .board-name { color: #14161A; }
.board-name { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--ink); margin-top: auto; }

/* Compact shortcut row. */
.pill-row { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; }
.pill a {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-2); padding: 8px 13px 8px 9px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2);
}
.pill a:hover { background: var(--yellow); border-color: var(--yellow); color: #14161A; text-decoration: none; }
.pill a:hover .chip { border-color: #14161A; }
.pill a:hover svg { color: #14161A; }
.pill-plain a { padding: 8px 13px; }

/* The homepage index: every calculator in one scannable block, filtered live
   by the search box beside the heading. A grid rather than a wrapped row so
   the names line up in columns and the eye can run down them. */
.pill-index {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}
.pill-index .pill a { width: 100%; }
.pill-index .pill[hidden] { display: none; }

/* Numbered explainer cells. */
.numbered { counter-reset: n; }
.cell { padding: 26px; background: var(--paper); }
.cell-n { font-family: var(--mono); font-size: 12px; color: var(--ink-4); }
.cell h3 { margin: 12px 0 8px; font-size: 18px; }
.cell p { font-size: 15px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.band-ink .cell { background: var(--ink-panel); }
.band-ink .cell p { color: var(--on-ink-2); }
.band-ink .cell-n { color: var(--yellow); }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-top: 40px; }
.step-n { font-family: var(--display); font-weight: 800; font-stretch: 125%; font-size: 64px; line-height: .8; color: var(--yellow); }
.steps h3 { margin: 20px 0 8px; }
.steps p { font-size: 15px; line-height: 1.6; color: var(--on-ink-2); margin: 0; }

/* --------------------------- group headings ----------------------------- */
.group-head { margin-bottom: 22px; }
.group-head h2 { margin: 14px 0 0; }
.group-head p { color: var(--ink-3); margin: 12px 0 0; max-width: 62ch; }

/* --------------------------- breadcrumbs -------------------------------- */
.breadcrumbs { padding: 26px 0 0; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 0; padding: 0; }
.breadcrumbs li { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); }
.breadcrumbs li + li::before { content: "/"; color: var(--line-2); }
.breadcrumbs a { color: var(--ink-4); text-decoration: underline; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ------------------------------ byline ---------------------------------- */
.byline {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  margin: 20px 0 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4);
}
.byline .verified { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); }
.byline svg { width: 14px; height: 14px; color: var(--ink); }
.byline strong { font-weight: 500; color: var(--ink); }

/* ------------------------------ layout ---------------------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
.main-col { max-width: var(--col); min-width: 0; }
.side-col { position: sticky; top: 90px; }

/* ---------------------------- calculator -------------------------------- */
/* Inputs on paper, answer on ink. The split is the point: you are reading a
   worksheet on the left and a delivery note on the right. */
.calc { margin: 0 0 44px; }
.calc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--rule); background: var(--line);
  border: 1px solid var(--line);
}
.calc-form { background: var(--paper); padding: 28px; }
.calc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink); padding-bottom: 12px; margin-bottom: 24px;
}
.calc-head .h {
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.calc-head .unit-toggle { border-color: var(--ink); }
.calc-head .unit-toggle button { color: var(--ink-3); }
.calc-head .unit-toggle button:hover { color: var(--ink); }
.calc-head .unit-toggle button + button { border-left-color: var(--ink); }
.calc-head .unit-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Field grid: hairlines again, so inputs read as boxes on a form. Rings per
   cell, so an odd number of fields does not leave a coloured hole. */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rule); }
.field {
  background: var(--paper); padding: 15px 16px; display: flex; flex-direction: column;
  box-shadow: 0 0 0 var(--rule) var(--line);
}
.field.span { grid-column: 1 / -1; }
.field > label:not(.check) {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-4);
}
/* .control is a wrapper: the number sits next to its unit on the baseline. */
.field .control { display: flex; align-items: baseline; gap: 7px; margin-top: 8px; min-width: 0; }
.field .control input,
.field .control select {
  width: 100%; min-width: 0; background: none; border: 0; outline: none; padding: 0;
  font-family: var(--mono); font-size: 26px; font-weight: 500; color: var(--ink);
}
/* Option labels are long ("Sealed plasterboard or lining paper"), and a select
   clips rather than wraps, so this one runs smaller than the number fields. */
.field .control select {
  font-size: 14px; font-weight: 400; border-bottom: 1px solid var(--line-2);
  padding-bottom: 5px; cursor: pointer; text-overflow: ellipsis;
}
.field .control input:focus-visible,
.field .control select:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.field .control input[aria-invalid="true"] { color: var(--alert); }
.field .unit-suffix { font-family: var(--mono); font-size: 13px; color: var(--ink-4); flex: none; }
.field .help { font-family: var(--mono); font-size: 11px; line-height: 1.5; color: var(--ink-4); margin-top: 8px; }
.field[hidden] { display: none; }
.field > label.check { display: flex; align-items: center; gap: 11px; padding: 6px 0; font-family: var(--sans); font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--ink-2); cursor: pointer; }
.field > label.check input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex: none; }

.calc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

/* Assumptions strip under the form. */
.assume { margin-top: 24px; border: 1px solid var(--line); background: var(--yellow-wash); padding: 18px 20px; }
.assume .t { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.assume ul { margin: 11px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.assume li + li { margin-top: 4px; }

/* The answer panel. */
.calc-result {
  background: var(--ink-panel); color: var(--on-ink-2); padding: 28px;
  display: flex; flex-direction: column;
}
.calc-result .result-label {
  color: var(--yellow); border-bottom: 1px solid var(--line-ink); padding-bottom: 12px; margin: 0;
  font-size: 12px; letter-spacing: .12em;
}
/* Caption above the figure, the way a delivery note labels a quantity. */
.result-head { padding: 26px 0 22px; border-bottom: 1px dashed var(--line-ink); }
.result-cap {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-2); margin: 0 0 9px; min-height: 1em;
}
.result-value {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--mono); font-weight: 600; color: var(--yellow);
  font-size: clamp(44px, 5vw, 68px); line-height: .9;
}
.result-value .u { font-size: 20px; font-weight: 400; color: var(--on-ink-2); }

.result-list { list-style: none; margin: 23px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--rule); }
.result-list li { background: var(--ink-panel); padding: 17px 18px; box-shadow: 0 0 0 var(--rule) var(--line-ink); }
.result-list:empty { display: none; }
.result-list .k {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-ink-2); line-height: 1.45;
}
/* Some of these read as a sentence rather than a figure ("1 x 5 L + 1 x 1 L"),
   so the size has to suit a short phrase, not just two digits. The headline
   above carries the impact. */
.result-list .v {
  display: block;
  font-family: var(--mono); font-size: 22px; font-weight: 500; color: var(--on-ink);
  margin-top: 8px; line-height: 1.25;
}
.result-list .v .u { font-size: 14px; color: var(--on-ink-2); }

.result-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-ink); font-size: 14px; line-height: 1.6; color: var(--on-ink-2); }
.result-note + .result-note { margin-top: 9px; padding-top: 0; border-top: 0; }
.result-warn {
  margin-top: 18px; border: 1px solid var(--yellow); padding: 13px 15px;
  font-family: var(--mono); font-size: 12px; line-height: 1.55; color: var(--yellow);
  display: flex; gap: 10px; align-items: flex-start;
}
.result-warn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
/* The working: the same formula the article prints, sitting next to the
   answer it produced, so the figure can be checked without scrolling. */
.working { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-ink); }
.working .t { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-2); }
.working .f {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.85; color: var(--on-ink);
  margin-top: 11px; white-space: pre-wrap;
}

.calc-result .calc-actions { margin-top: auto; padding-top: 26px; }
.copied { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); align-self: center; }

/* Progressive disclosure for the six most-used material calculators. */
.field-sections { display: grid; gap: 14px; }
.field-section { margin: 0; padding: 0; border: 0; min-width: 0; }
.field-section[hidden] { display: none; }
.field-section legend { padding: 0 0 7px; font-size: 15px; font-weight: 600; color: var(--ink); }
.calc-simple .field { padding: 10px 12px; min-width: 0; position: relative; }
.calc-simple .field > label:not(.check) { font-family: var(--sans); font-size: 13px; letter-spacing: 0; text-transform: none; }
.calc-simple .field .control { margin-top: 4px; }
.calc-simple .field .control input { font-size: 24px; line-height: 1.25; }
.calc-simple .field .control select { font-family: var(--sans); font-size: 15px; }
.calc-simple .field.has-help > label { padding-right: 30px; }
.field-help > summary { position: absolute; top: 3px; right: 3px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; font-size: 14px; color: var(--ink-3); }
.field-help > summary::-webkit-details-marker { display: none; }
.field-help .help { display: block; font-family: var(--sans); font-size: 13px; }
.more-options { border-top: 1px solid var(--line); }
.more-options > summary, .result-details > summary { cursor: pointer; padding: 14px 0; font-size: 14px; font-weight: 600; }
.more-options > summary { color: var(--ink); }
.more-options > .fields { margin-top: 4px; }
.result-details { margin-top: 20px; border-top: 1px solid var(--line-ink); }
.result-details > summary { color: var(--on-ink); }
.result-details .result-list { margin-top: 4px; }
.result-allowance { margin: 15px 0 0; font-size: 14px; color: var(--on-ink-2); }
.result-allowance:empty { display: none; }
.calc-simple .result-list > li:only-child { grid-column: 1 / -1; }
.calc-simple summary:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.calc-simple .calc-actions { margin-top: 18px; }
.calc-simple .calc-head { margin-bottom: 18px; }
@media (min-width: 360px) and (max-width: 620px) {
  .calc-simple .fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .calc-simple .field:has(.check) { grid-column: 1 / -1; }
}
@media print {
  .calc-simple .calc-result * { color: #000 !important; }
  .calc-simple .result-list li { background: #fff; }
}

/* ------------------------------- prose ---------------------------------- */
.prose { font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.prose > * + * { margin-top: 1.05em; }
.prose h2 { margin-top: 2.2em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.8em; font-size: 18px; }
.prose p { margin: 0; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { text-decoration: underline; }

/* pre-wrap so a formula written over several lines keeps them, and so a long
   one wraps on a phone instead of forcing a sideways scroll. */
.formula {
  font-family: var(--mono); font-size: 14px; line-height: 1.9;
  background: var(--paper-2); border-left: 3px solid var(--yellow);
  padding: 16px 18px; color: var(--ink); white-space: pre-wrap;
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.table-wrap caption { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.table-wrap th, .table-wrap td { padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.table-wrap thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); font-weight: 400; background: var(--paper-2); }
.table-wrap tbody th { font-weight: 600; color: var(--ink); }
.table-wrap tr:last-child th, .table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td { font-family: var(--mono); font-size: 13.5px; }

.callout { display: flex; gap: 14px; border: 1px solid var(--line); background: var(--yellow-wash); padding: 17px 19px; }
.callout svg { width: 19px; height: 19px; flex: none; color: var(--ink); margin-top: 2px; }
.callout .ct { font-weight: 600; color: var(--ink); }
.callout p { margin: 5px 0 0; font-size: 15px; }
.callout.warn { border-color: var(--alert); background: var(--alert-wash); }
.callout.warn svg { color: var(--alert); }

.deflist { margin: 0; }
.deflist dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: 16px; }
.deflist dt:first-child { margin-top: 0; }
.deflist dd { margin: 5px 0 0; }

/* ------------------------------- toc ------------------------------------ */
.toc { border: 1px solid var(--line); padding: 20px; margin-bottom: 46px; }
.toc-title { margin-bottom: 12px; font-size: 11px; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; border-top: 1px solid var(--line); }
.toc li:first-child { border-top: 0; }
.toc a { display: flex; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--ink-2); }
.toc a::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--ink-4); padding-top: 2px; }
.toc a:hover { color: var(--yellow-ink); text-decoration: none; }

/* -------------------------------- faq ----------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 34px 17px 0; position: relative;
  font-weight: 600; color: var(--ink); font-size: 16.5px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 20px; color: var(--ink-4); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--yellow-ink); }
.faq .answer { padding: 0 0 18px; color: var(--ink-3); }
.faq .answer p { margin: 0; }

/* ------------------------------- forms ---------------------------------- */
.form { display: grid; gap: var(--rule); background: var(--line); border: 1px solid var(--line); max-width: 560px; }
.form .field { padding: 15px 16px; }
.form input:not([type=checkbox]), .form textarea, .form select {
  width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line-2); outline: none;
  padding: 5px 0; margin-top: 7px; font-family: var(--mono); font-size: 15px; color: var(--ink);
}
.form textarea { resize: vertical; min-height: 120px; font-family: var(--sans); }
.form input:focus-visible, .form textarea:focus-visible { border-bottom-color: var(--ink); outline: none; }
.form-actions { background: var(--paper); padding: 15px 16px; }
.form-status { font-family: var(--mono); font-size: 12px; color: var(--ink-4); margin-top: 12px; }
.notice { border: 1px solid var(--line); background: var(--paper-2); padding: 15px 17px; font-size: 15px; }

/* ------------------------------ finder ---------------------------------- */
.finder { display: flex; align-items: center; gap: 12px; border: 1px solid var(--ink); padding: 0 14px; max-width: 460px; }
.finder svg { width: 17px; height: 17px; color: var(--ink-4); flex: none; }
.finder input[type="search"] {
  flex: 1; background: none; border: 0; outline: none; padding: 13px 0;
  font-family: var(--mono); font-size: 14px; color: var(--ink); min-width: 0;
}
.finder input::placeholder { color: var(--ink-4); }
.finder:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.finder-clear { flex: none; min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--ink); cursor: pointer; font: 500 12px var(--mono); text-decoration: underline; }
.finder-help, .finder-status { font: 400 13px/1.6 var(--sans); color: var(--ink-3); margin: 8px 0; }
.finder-status { min-height: 1.6em; font-weight: 600; }
[hidden] { display: none !important; }
.job-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 24px 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.job-route { min-width: 0; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.job-route h3 { font: 600 22px/1.25 var(--sans); letter-spacing: -.02em; margin: 0 0 12px; text-transform: none; }
.job-route p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; color: var(--ink-2); }
.job-route-links { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; margin: 0; }
.job-route-links a, .job-route-guide a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.job-route-guide { margin-top: 10px !important; }
.job-route-guide svg { width: 16px; height: 16px; margin-left: 8px; }
.action-status { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.copy-fallback { display: block; width: 100%; min-height: 100px; padding: 12px; margin-top: 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); font: 13px/1.5 var(--mono); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1000px) { .job-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .job-routes { grid-template-columns: 1fr; } .job-route { padding: 20px; } }
@media print { .action-status, .copy-fallback { display: none !important; } }
/* Hidden until the finder has something to report. app.js flips it to block. */
.no-results { display: none; font-family: var(--mono); font-size: 14px; color: var(--ink-4); padding: 22px 0 0; }
.no-results p { margin: 0 0 12px; }
.finder-categories { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; }
.finder-categories a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }

/* Category filter buttons on the index. */
.filters { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.filters a, .filters button {
  border: 1px solid var(--ink); background: none; color: var(--ink); cursor: pointer;
  padding: 9px 15px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.filters a:hover, .filters button:hover { background: var(--yellow); border-color: var(--yellow); color: #14161A; text-decoration: none; }
.filters .n { opacity: .55; }

/* -------------------------------- ads ----------------------------------- */
/* Reserved height so an ad landing late cannot shift the page. */
.ad { margin: 34px 0; border: 1px solid var(--line); padding: 12px; background: var(--paper-2); }
.ad-label { font-size: 10px; letter-spacing: .14em; margin-bottom: 8px; }
.ad-slot { display: block; min-height: 250px; }
.ad-ph {
  min-height: 250px; display: grid; place-items: center;
  border: 1px dashed var(--line-2); color: var(--ink-4);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
.ad-side { margin: 0; }
.ad-side .ad-slot, .ad-side .ad-ph { min-height: 600px; }

/* ------------------------------ related --------------------------------- */
.related { margin-top: 52px; }
.related h2 { margin-bottom: 20px; }

/* ------------------------------ footer ---------------------------------- */
.site-footer { background: var(--ink-panel); color: var(--on-ink-2); border-top: 1px solid var(--line-ink); margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 54px 0 38px; }
.footer-about .brandmark { margin-bottom: 14px; }
.footer-about p { font-size: 14px; line-height: 1.6; margin: 0; max-width: 34ch; }
.site-footer h3 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink); }
.site-footer ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.site-footer a { font-size: 14px; color: var(--on-ink-2); display: inline-block; padding: 4px 0; }
.site-footer a:hover { color: var(--yellow); text-decoration: none; }
.footer-small { font-size: 13px; line-height: 1.6; margin: 14px 0 0; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px 0 38px; border-top: 1px solid var(--line-ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
}
.footer-bottom button {
  background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--on-ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; text-decoration: underline;
}
.footer-bottom button:hover { color: var(--yellow); }

/* --------------------------- cookie banner ------------------------------ */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--ink-panel); color: var(--on-ink-2); border-top: 2px solid var(--yellow);
  display: none;
}
.cookie-banner.show { display: block; }
.cookie-in { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; padding: 22px 0; }
.cookie-banner h2 { font-size: 20px; color: var(--on-ink); }
.cookie-banner p { font-size: 14px; line-height: 1.55; margin: 8px 0 0; max-width: 78ch; }
.cookie-banner a { color: var(--yellow); text-decoration: underline; }
.cookie-btns { display: flex; gap: 9px; flex-wrap: wrap; }
.cookie-btns .btn { border-color: var(--line-ink); color: var(--on-ink); }
.cookie-btns .btn:hover { border-color: var(--yellow); color: var(--yellow); }
.cookie-btns .btn-yellow, .cookie-btns .btn-yellow:hover { background: var(--yellow); border-color: var(--yellow); color: #14161A; }

.consent-box { border: 1px solid var(--line); padding: 20px; }
.consent-current { font-family: var(--mono); font-size: 13px; color: var(--ink-2); }

/* ------------------------------ updated --------------------------------- */
.updated-line { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }

/* ============================== responsive ============================== */
/* The full navigation and tools need more room than a tablet header provides. */
@media (max-width: 1200px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .header-cta { display: none; }
}
@media (max-width: 1080px) {
  .layout { grid-template-columns: 1fr; }
  .side-col { position: static; }
  .cards.ruled { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .hero-in { grid-template-columns: 1fr; gap: 44px; padding-top: 52px; }
  .hero .board.ruled { grid-template-columns: repeat(4, 1fr); box-shadow: none; }
  .calc-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .board.ruled { grid-template-columns: repeat(3, 1fr); }
  .cells.ruled { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .menu-btn { display: grid; }
  .header-cta { display: none; }
  .header-in { gap: 14px; }
  .header-tools { gap: 8px; }
  .cards.ruled, .cards.ruled-3 { grid-template-columns: repeat(2, 1fr); }
  .band-in { padding: 52px 0; }
  .cells.ruled { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .header-tools .unit-toggle { display: none; }
  /* Chip above the heading rather than orphaned on a line of its own. */
  .title-row { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .stats { flex-direction: column; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 0; width: 100%; }
  .stat:last-child { border-bottom: 0; }
  .cookie-in { grid-template-columns: 1fr; gap: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .fields { grid-template-columns: 1fr; }
  .result-list { grid-template-columns: 1fr; }
  .card { min-height: 0; }
}

@media (max-width: 460px) {
  .cards.ruled, .cards.ruled-3, .board.ruled, .hero .board.ruled { grid-template-columns: 1fr 1fr; }
  .field .control input { font-size: 23px; }
}

/* "OrderEnough" is eleven characters of stretched Archivo, so on the narrowest
   phones the wordmark has to give way rather than push the header wide. */
@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .brandmark span.word { font-size: 18px; }
  .header-in { gap: 10px; }
}
@media (max-width: 350px) {
  .brandmark span.word { font-size: 16px; }
  .cards.ruled, .cards.ruled-3, .board.ruled, .hero .board.ruled { grid-template-columns: 1fr; }
}

.shopping-tools, .order-checklist { border: 1px solid var(--line); padding: 26px; margin: 0 0 36px; }
.shopping-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.shopping-tools h2, .order-checklist h2 { font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }
.affiliate-disclosure, .shopping-note { font-size: 14px; line-height: 1.65; }
.shopping-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 20px 0; }
.shopping-list .tool-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; border: 1px solid var(--line); padding: 20px; background: var(--paper-2); }
.shopping-list .tool-card:only-child { grid-column: 1 / -1; }
.tool-card-heading { display: flex; align-items: center; gap: 10px; }
.tool-type { font: 500 12px/1.5 var(--mono); }
.shopping-list h3 { font: 600 21px/1.25 var(--sans); margin: 0; }
.shopping-list p { font-size: 15px; line-height: 1.65; margin: 0; }
.shopping-list .btn { white-space: normal; margin-top: auto; min-height: 46px; text-align: center; justify-content: center; }
.shopping-list .tool-store { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.tool-buy-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.tool-buy-links .btn { margin-top: 4px; }
.tool-fit { padding: 4px 0 12px; }
.order-checklist { background: var(--paper-2); }
.order-plan-title { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.order-checklist ol { padding-left: 22px; margin: 0 0 12px; }
.order-checklist li { padding: 4px 0; font-size: 15px; line-height: 1.6; }
.order-assumptions { font-size: 14px; margin: 0; }
.order-assumptions a { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; }
.shopping-next { margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.shopping-next p { flex-basis: 100%; margin: 0; font-weight: 600; }
.shopping-next a { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; text-underline-offset: 3px; }
.shopping-subtitle { font-size: 21px; margin: 26px 0 8px; }
.shopping-guide { margin: 8px 0 0; font-weight: 600; }
.shopping-guide a { display: inline-flex; align-items: center; min-height: 44px; }
.result-next-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 18px; }
.result-order-link, .result-shopping-link { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; color: var(--on-ink); text-decoration: underline; text-underline-offset: 4px; }
.result-order-link { font-weight: 600; }
.result-shopping-link { font-size: 14px; }
.result-order-link:hover, .result-order-link:focus-visible, .result-shopping-link:hover, .result-shopping-link:focus-visible { color: var(--yellow); }
#order-check, #shopping-tools, h2[id], h3[id] { scroll-margin-top: 100px; }
.shopping-note { margin: 0; }
.affiliate-footer { margin: 24px 0; }
.source-notes { margin: 48px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.source-notes h2 { margin-top: 0; }
.source-notes .source-review { font-size: 14px; color: var(--ink-3); }
@media (max-width: 620px) { .shopping-tools, .order-checklist { padding: 20px; } .shopping-list { grid-template-columns: 1fr; } }

@media print {
  .shopping-tools, .affiliate-footer, .result-next-steps { display: none !important; }
  .site-header, .site-footer, .ad, .cookie-banner, .calc-actions, .toc, .side-col { display: none !important; }
  body { background: #fff; color: #000; }
  .calc-result { background: #fff; color: #000; border: 1px solid #000; }
  .result-value, .calc-result .result-label { color: #000; }
  .layout { grid-template-columns: 1fr; }
}