/* carchart.net. The design package docs/design/system/ (the CarChart Design System, pulled from Claude Design): its
   token files (tokens/), and its components drawn in HTML and CSS (Logo, Button, Pill; ui_kits/website), because the
   site has no script. Fonts are served from this site (OFL, fonts/OFL-*.txt). No script. Phone first.
   docs/design/check/check.mjs checks this file: no value outside the tokens except the listed gaps. */

@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url('fonts/red-hat-display-latin-wght-normal.woff2') format('woff2-variations'),
       url('fonts/red-hat-display-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 700;
  src: url('fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2-variations'),
       url('fonts/ibm-plex-sans-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The tokens are the design package's files (docs/design/system/tokens/), served from tokens/ and loaded by every
   page before this file: colors.css, colors-dark-media.css (the package's dark values for a system setting),
   typography.css (with the website's fluid type steps, --web-step-*), spacing.css (with --web-space-section and
   --web-space-block). This file defines no token; it adds only the two layout values below. */
:root {
  --gutter: var(--space-7);
  --header-h: 64px;

  color-scheme: light dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* The hidden attribute wins over any display rule below (the contact page shows and hides its lines with it). */
[hidden] { display: none !important; }
/* Anchor jumps and keyboard focus stop below the sticky header (WCAG 2.4.11). */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  scroll-padding-top: calc(var(--header-h) + 1px + env(safe-area-inset-top));
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* The footer of a short page sits at the bottom of the screen (task 66 fix 6, ops's choice from common practice): the
   body is a column at least one screen high, and the footer's top margin is auto (.foot, below), so it takes the free
   space; a page taller than the screen is as it was. The unit is svh, the small viewport: on a phone with Safari's bars
   out the missing page then fits the visible screen and does not scroll (100vh is the large viewport and would scroll
   it by the height of the bars); 100vh comes first for a browser without svh. The header's rule (below) does not
   change: .page keeps its own height, and the free space is between .page and the footer. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--web-step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: 1.1;
  text-wrap: balance;
}
p { margin: 0; }
svg { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
@media (max-width: 480px) { :root { --gutter: var(--space-6); } }

/* The mono uppercase label */
.label {
  font-family: var(--font-mono);
  font-size: var(--size-caption);
  font-weight: 400;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Button (components/core/Button): primary and secondary. Height 44 px for touch. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--web-step--1);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.btn-primary:hover { color: var(--accent-ink); filter: brightness(0.92); }
.btn-secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--grid-strong); }
.btn-secondary:hover { color: var(--ink); background: var(--grid); }
.btn:active { transform: translateY(1px); }
/* Busy (the contact form's Send while it posts): dimmed, no press effect; the button keeps its focus. */
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { cursor: progress; opacity: 0.6; filter: none; }
.btn[aria-disabled="true"]:active { transform: none; }

/* Header: ui_kits/website SiteHeader, with the Shop sign-in button. It stays at the top while the reader scrolls and leaves
   when the footer comes into view (task 66 fix 5, Marshall 10-09), so the header's logo and the footer's logo are never in the
   window together. No script (docs/site-next/_headers allows none on these pages) and no animation: it is sticky layout.
   The header and main are one wrapper (.page), and a sticky box stays inside its containing block, here the wrapper, so the
   header would scroll away with the end of main, which is the footer's top edge: the footer (190 to 242 px) would be in the
   window, with the header, from the moment it comes into view (measured: the header never left). The sticky box counts its
   margin box. So the header has a bottom margin of one window (100vh) and main a top margin of minus one window: in the
   wrapper, a flex column, where margins do not collapse, the two cancel and the layout is the same as without them, and the
   header's margin box reaches the end of the wrapper one window before the header does. The header starts to go when the
   footer's top edge is one window and one header below the top of the window, and is gone when it reaches the bottom of the
   window, as the footer comes into view. 100vh is the large viewport on a phone: with Safari's bars out the header can go a
   little before the footer is in view, never after, and the margins do not change while the bars move (100dvh would). On a
   page shorter than the window plus the header, the box does not fit, so the header does not move: it scrolls away with the
   page. A page without the wrapper (the worker's answers) has a plain sticky header. */
.page { display: flex; flex-direction: column; }
.page > .top { margin-bottom: 100vh; }
.page > main { margin-top: calc(-1 * 100vh); }
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
/* The row wraps rather than overflow when text is enlarged or spaced out (WCAG 1.4.12). */
/* The brand's auto margin puts everything else on the right, on one row or on a wrapped second row. */
.top .wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-1) var(--space-7); min-height: var(--header-h); padding-block: var(--space-2); }
/* The header logo is the package's lockup (components/brand/Logo.jsx, lockup="wordmark": the small mark, the wordmark
   beside it, centred on each other), larger, and fluid like the hero heading: the mark 32 px at 320 px wide to 46 px at
   1440 px, the word 24 px to 34 px (CONTEXT item 81 a). Both are a clamp() on the same two widths as the web scale (a
   rem at its ends, so a larger text setting grows them). The word's size is a listed gap: the web scale has no step
   for it (docs/design/check/known-gaps.json). The mark has no check: it is a width and a height. */
.brand { --brand-mark: clamp(2rem, 1.75rem + 1.25vw, 2.875rem); display: inline-flex; align-items: center; gap: var(--space-3); margin-right: auto; text-decoration: none; flex: none; }
.brand svg { width: var(--brand-mark); height: var(--brand-mark); flex: none; }
/* The wordmark type: the header's (24 to 34 px) and the footer sign-off's (the lockup of the footer, below). */
.brand .word, .foot-logo .word {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-wordmark);
  color: var(--logo-word-car);
}
.brand .word span, .foot-logo .word span { color: var(--logo-word-chart); }
.brand .word { font-size: clamp(1.5rem, 1.3214rem + 0.8929vw, 2.125rem); }
.foot-logo .word { font-size: inherit; }
.lg-body { fill: var(--logo-mark); stroke: var(--logo-mark); }
.lg-pins { fill: var(--logo-pins); }
.lg-lamp { fill: var(--logo-lamp); }
.nav { display: flex; gap: var(--space-7); font-size: var(--web-step--1); }
.nav a { padding-block: var(--space-4); color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.signin { flex: none; white-space: nowrap; }
@media (max-width: 760px) { .nav { display: none; } }
/* A 300 px screen: the header row still fits. On a 280 px screen (a folding phone's cover screen) the larger logo no longer
   fits beside the button, so the row wraps (the button goes under the logo); nothing overflows. */
@media (max-width: 300px) { .top .wrap { gap: var(--space-3); } .signin { padding-inline: var(--space-5); } }
/* A short screen (a phone held sideways): the header scrolls away (it would take a large share of the screen). */
@media (max-height: 500px) { .top { position: static; } html { scroll-padding-top: 0; } }

/* Hero on chart paper: ui_kits/website Hero */
.hero {
  border-bottom: 1px solid var(--line);
  background-image:
    linear-gradient(var(--grid-strong) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  background-position: -1px -1px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--web-space-block);
  align-items: center;
  padding-block: var(--space-11) var(--space-12);
}
.hero h1 { margin-top: var(--space-5); font-size: var(--web-step-7); line-height: 1.05; }
.hero h1 .accent { color: var(--accent); }
.hero .lede { margin-top: var(--space-7); max-width: 34em; font-size: var(--web-step-1); color: var(--ink-2); }
.hero .actions { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-9); }
/* The chart-paper lines cross the small text of the hero: ink-2 keeps 4.5:1 on a line, ink-3 does not. */
.hero .label { color: var(--ink-2); }
@media (min-width: 901px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-11); padding-block: var(--web-space-section); }
}

/* The example record card: ui_kits/website RecordCard */
.record {
  margin: 0;
  width: 100%;
  max-width: 520px;
  padding: var(--space-7) var(--space-7) var(--space-6);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (min-width: 901px) { .record { justify-self: end; } }
.record { container-type: inline-size; }
@media (max-width: 480px) { .record { padding: var(--space-6) var(--space-6) var(--space-5); } }
.record .r-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
.record .r-head > div { min-width: 0; }
.record .model { font-family: var(--font-display); font-weight: 700; font-size: var(--web-step-2); line-height: 1.2; letter-spacing: var(--tracking-display); }
.record .vin { margin-top: 2px; font-family: var(--font-mono); font-size: var(--size-caption); color: var(--ink-3); overflow-wrap: anywhere; }
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-xs);
  background: var(--lamp-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); }
.record .stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.record .stats b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: var(--web-step-2); line-height: 1.1; font-variant-numeric: tabular-nums; }
.record .stats span { display: block; font-size: var(--size-caption); line-height: 1.35; color: var(--ink-3); }
.record .t-head { display: flex; justify-content: space-between; gap: var(--space-5); margin-top: var(--space-5); font-size: var(--size-small); line-height: 1.4; color: var(--ink-2); }
.record .t-head .unit { font-family: var(--font-mono); font-size: var(--size-caption); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.plot { display: block; width: 100%; height: auto; margin-top: var(--space-2); }
.plot .gl { stroke: var(--grid-strong); stroke-width: 1; }
.plot .ax { fill: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }
.plot .usual { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.plot .usual-t { fill: var(--ink-3); font-family: var(--font-body); font-size: 11px; }
.plot .area { fill: var(--trace-fill); }
.plot .trace { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.plot .pt { fill: var(--lamp); stroke: var(--panel); stroke-width: 2; }
/* The plot scales with the card: on a narrow card (a phone, or the two-column hero from 901 to about 1,100 px)
   larger text in the plot's own units keeps the axis readable. The viewport rule is the fallback for browsers
   without container queries. */
@media (max-width: 480px) {
  .plot { overflow: visible; }
  .plot .ax, .plot .usual-t { font-size: var(--size-body); }
  .plot .usual-t { transform: translateY(1.5px); }
}
@container (max-width: 440px) {
  .plot { overflow: visible; }
  .plot .ax, .plot .usual-t { font-size: var(--size-body); }
  .plot .usual-t { transform: translateY(1.5px); }
}
.record .finding {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border-radius: var(--radius-md);
  font-size: var(--size-body);
  line-height: 1.45;
}
.record .finding .dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--lamp); }
.record .finding .f-title { display: block; font-weight: 600; }
.record figcaption { margin-top: var(--space-4); font-size: var(--size-caption); color: var(--ink-3); }

/* Bands: ui_kits/website Sections */
.band { padding-block: var(--space-12); }
.band + .band { border-top: 1px solid var(--line); }
@media (min-width: 761px) { .band { padding-block: var(--web-space-section); } }
.sec-head { max-width: 720px; }
.sec-head h2 { margin-top: var(--space-4); font-size: var(--web-step-4); }
.sec-head .lede { margin-top: var(--space-5); color: var(--ink-2); }

.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--web-space-block); align-items: start; }
@media (min-width: 861px) { .two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-11); } }
.groups { margin-top: var(--web-space-block); }
.groups h3 { font-size: var(--web-step-2); }

.checks { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-4); }
.checks svg { width: 18px; height: 18px; margin-top: var(--space-1); fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#car-owners .checks { margin-top: 0; }
.cta { margin-top: var(--space-10); }

.steps { list-style: none; margin: var(--web-space-block) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); counter-reset: step; }
@media (min-width: 861px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li { padding: var(--space-7); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.steps li::before {
  counter-increment: step;
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--size-small);
  color: var(--accent);
}
.steps h3 { font-size: var(--web-step-2); }
.steps p { margin-top: var(--space-3); font-size: var(--web-step-0); color: var(--ink-2); }

/* The pilot band: the pilot text and the one button, "Write to us" (fix 4: the box has no heading or line of its own).
   One block: on a phone the button is under the text; from 761 px the text is at the left and the button at the right,
   centred on the text. */
.pilot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  justify-items: center;
  text-align: center;
  padding: var(--space-10);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
@media (max-width: 480px) { .pilot { padding: var(--space-7); } }
.pilot h2 { margin-top: var(--space-3); font-size: var(--web-step-4); }
.pilot .text { margin-top: var(--space-4); color: var(--ink-2); }

/* Footer: ui_kits/website SiteFooter. One block: the logo, the full 16-pin mark with the wordmark "CarChart" beside it,
   as tall as the mark from its top to its bottom (CONTEXT item 81 e), and under the logo the one line "CarChart is a
   product and trademark of Aucilla Systems LLC.", which starts at the left edge of the mark (fix 4: not under the "C" of
   the word); the address is at the right. The footer's word is part of the logo, not a mention of the name
   (docs/site-checks/marks.test.mjs). The whole logo has one size, the word's font size, set on the sign-off, and the mark
   is 1.5748 times it (the word is 0.635 of the mark's side: measured in Chrome, the ink of the word is then as tall as
   the ink of the mark, 60 px at a 128-px mark; the package's own lockup uses 0.68 and Logo.jsx 0.72, and both give a
   word taller than the mark). 81 px beside the 128-px mark of the website; on a phone smaller, so that the logo (5.7008
   times the word's size) fills the width between the gutters and the mark keeps 72 px or more, the limit of the full
   mark on a high-density screen (components/brand/Logo.jsx). That width is the content width of .foot .wrap, which is a
   size container, so 1cqw is a hundredth of the width between the gutters, whatever the gutter is (20 px, 16 px up to
   480 px wide), and the scrollbar and the safe-area insets are left out. --logo-fit is that fit in cqw where the browser
   has container units; the vw size it starts with is for a browser without them (it assumes the 16-px gutter, so it runs
   up to 8 px into the 20-px margin from 481 to 502 px wide).
   The drawing has empty space around its body (an eighth of its side at each side, 0.265 above and below): the mark
   moves left by the eighth (translate, a percent of its own width), so that the visible mark sits at the left edge of
   the column and the gap to the word is a quarter of the mark's side, and the margins trim the height (the nearest
   tokens that never cut into the ink: 24 px, 16 px on a phone). The mark and the word are centred on each other. On a
   phone (480 px and narrower) the logo and the line are centred. .foot-logo has no box of its own, so that its two
   children sit in the sign-off's grid. */
.foot {
  margin-top: auto;
  padding-block: var(--web-space-block) calc(var(--space-11) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: var(--web-step--1);
  color: var(--ink-3);
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-9); align-items: center; justify-content: space-between; container-type: inline-size; }
.foot-sign {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "mark word" "text text";
  justify-content: start;
  align-items: center;
  row-gap: var(--space-3);
  min-width: 0;
  --logo-fit: calc(17.54vw - 5.61px);
  font-size: min(5.08rem, var(--logo-fit));
}
@supports (width: 1cqw) { .foot-sign { --logo-fit: 17.54cqw; } }
.foot-logo { display: contents; }
.foot-logo svg { grid-area: mark; display: block; flex: none; max-width: none; width: 1.5748em; height: 1.5748em; margin-block: calc(-1 * var(--space-8)); translate: -12.5% 0; }
.foot-logo .word { grid-area: word; translate: 0 0.0123em; /* the ink of the word, measured, is 1 px (at 81 px) above the ink of the mark */ }
/* The line spans both columns under the logo. Its width is 0 with a minimum of the whole area, so that its length takes
   no part in the width of the two columns (the logo's width is the mark and the word only); it never runs past the logo,
   and on a phone, where the logo is narrower than the line, it wraps inside the logo's width. */
.foot-text { grid-area: text; width: 0; min-width: 100%; font-size: var(--web-step--1); }
/* The footer's two links: the address, and under it the shop sign-in (task 66 fix 6, Marshall 10-10), the same text link
   as the address (the footer's size, the link colour, underlined; no button, no box), so that it does not compete with
   the logo or the line. They are a column with their left edges together, at the right of the sign-off where there is room
   and under it, at the left, where there is not. Each link's target is its line and the padding of `.foot a` (below) above
   and below it, 41.7 px high as the address's was, and the gap is two paddings, so the two targets meet and do not overlap. On a phone the two are centred under the line. */
.foot-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-7); margin: 0; padding: 0; list-style: none; }
@media (max-width: 480px) {
  .foot .wrap { flex-direction: column; align-items: center; text-align: center; }
  .foot-sign { justify-content: center; }
  .foot-links { align-items: center; }
  .foot-logo svg { margin-block: calc(-1 * var(--space-6)); }
  .foot-text { text-wrap: balance; }
}
.foot a { display: inline-block; padding-block: var(--space-4); margin-block: calc(-1 * var(--space-4)); overflow-wrap: anywhere; }

/* The 404 page */
.sec-head .nf-h { margin-top: var(--space-4); font-size: var(--web-step-5); }

/* The contact page and the pages that /api/contact answers without script. The design system has no form pattern
   (CONTEXT item 51 b, gaps 3 to 7): the card, the spacing, the hint under the label, the error line, the place of
   the check and the success state follow the render of contact-texts.md (task 36 run 2), with field text at step 0
   (16 px on a phone, 17 px from about 1,400 px; iOS Safari zooms into a field under 16 px) and touch targets of 44 px. */
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.sec-head .page-h { font-size: var(--web-step-5); }
.sec-head .page-h + .lede { margin-top: var(--space-5); }
.sec-head .lede + .lede { margin-top: var(--space-3); }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; }
@media (min-width: 861px) { .form-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-11); } }
.write .sec-head .lede { font-size: var(--web-step-1); }

/* A line of context above the form (from the shop sign-in; without script). */
.notice {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: var(--web-step-0);
  line-height: 1.5;
  color: var(--ink);
}

.form-card { margin: 0; padding: var(--space-9); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (max-width: 480px) { .form-card { padding: var(--space-7) var(--space-6); } }

.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin: 0 0 var(--space-7); padding: 0; border: 0; }
fieldset.field { display: block; }
.field > label, .field > legend { padding: 0; font-size: var(--web-step--1); font-weight: 600; line-height: 1.35; color: var(--ink); }
.field .hint { font-size: var(--web-step--1); line-height: 1.4; color: var(--ink-3); }
.err, .form-error p { font-size: var(--web-step--1); font-weight: 500; line-height: 1.4; color: var(--alarm-ink); }
.form-error a { color: inherit; }
.form-error:not(:empty) { margin-bottom: var(--space-6); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%;
  max-width: 100%;
  margin: var(--space-1) 0 0;
  font-family: var(--font-body);
  font-size: var(--web-step-0);
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: var(--radius-md);
}
.field input[type="text"], .field input[type="email"], .field input[type="tel"] { min-height: 48px; padding: var(--space-4) var(--space-5); line-height: 1.4; }
/* The state list: the native list, drawn like the fields, with a chevron of two gradients (the page's policy allows
   no data: image). Forced colours get the native control back. */
.field select {
  min-height: 48px;
  padding: var(--space-4) 40px var(--space-4) var(--space-5);
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
@media (forced-colors: active) { .field select { appearance: auto; -webkit-appearance: menulist; background-image: none; } }
.field textarea { display: block; min-height: 176px; padding: var(--space-4) var(--space-5); line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
/* An error: the line above the field, and a 2 px border in the alarm color (no change of size), also while the field
   has the focus (the focus shows by the outline). These selectors must stay after the field and focus rules above. */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field [aria-invalid="true"]:focus {
  border-color: var(--alarm);
  box-shadow: inset 0 0 0 1px var(--alarm);
}

/* Native radios in the design system's RadioGroup look; nothing is chosen at the start. */
.radios { display: flex; flex-direction: column; margin-top: var(--space-1); }
.radios label { display: flex; align-items: center; gap: var(--space-5); min-height: 44px; font-size: var(--web-step-0); color: var(--ink); cursor: pointer; }
.radios input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1.5px solid var(--edge);
  border-radius: 50%;
  background: var(--panel);
  cursor: pointer;
}
.radios input:checked { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 5px, var(--panel) 5.5px); }
@media (forced-colors: active) { .radios input { appearance: auto; -webkit-appearance: radio; } }

.check-line { font-size: var(--web-step--1); line-height: 1.4; color: var(--ink-2); }
.check { min-height: 65px; margin-top: var(--space-2); }

/* The success heading is a card's heading (step 2, "card and step heading"), under the page heading (step 5) that stays
   above it; at step 4 it was 41.5 px at 1440 px, nearly the page heading's 51.9 px. */
.sent h2 { font-size: var(--web-step-2); }
.sent p { margin-top: var(--space-3); color: var(--ink-2); }

/* The honeypot: out of sight, out of the tab order, and hidden from screen readers. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* The contact page on a wide screen (fix list 1): the heading above the form, one card of at most 880 px, short
   fields in pairs or threes on a grid of six, the three choices in one row, the message across the card, and the
   check with Send at its end. Fields keep their order (name, email, phone, you are, shop, city, state, message), so
   the reading and tab order is the visual order. A phone keeps the one column above. */
@media (min-width: 861px) {
  /* Tighter than the phone, so that Send is in view at 1440 x 900 (its bottom is at 865 px, with the page heading at
     step 5): the band, 44 px fields. */
  .write { padding-block: var(--space-8) var(--web-space-section); }
  .write .wrap.form-grid { max-width: calc(880px + 2 * var(--gutter)); grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .write .sec-head .page-h + .lede { margin-top: var(--space-3); }
  .form-col .notice { margin-bottom: var(--space-6); }
  /* Each cell takes its row's height: the labels line up at the top, the fields at the bottom (margin-top: auto). */
  #contact-form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-7); align-items: stretch; padding: var(--space-8) var(--space-10) var(--space-9); }
  #contact-form > * { grid-column: 1 / -1; }
  #contact-form > .half { grid-column: span 3; }
  #contact-form > .third { grid-column: span 2; }
  #contact-form .field { margin-bottom: var(--space-5); }
  #contact-form .field input[type="text"], #contact-form .field input[type="email"], #contact-form .field input[type="tel"],
  #contact-form .field select { min-height: 44px; margin-top: auto; padding-block: var(--space-3); }
  #contact-form > fieldset.field { display: flex; flex-direction: column; justify-content: flex-end; }
  /* 6 lines on a wide screen; the phone keeps rows="7". */
  #contact-form .field textarea { margin-top: 0; height: 176px; }
  #contact-form .radios { flex-direction: row; flex-wrap: wrap; column-gap: var(--space-8); }
  .form-end { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "error error" "check send"; column-gap: var(--space-8); align-items: end; }
  .send-col { display: contents; }
  #contact-form .form-end .check-field { grid-area: check; margin: 0; }
  .form-end .form-error { grid-area: error; }
  .form-end .btn { grid-area: send; }
}