:root{
  --ui:"Helvetica Neue",Helvetica,"Segoe UI",system-ui,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --canvas:oklch(0.975 0.004 255);
  --surface:oklch(1 0 0);
  --surface-2:oklch(0.962 0.006 255);
  --border:oklch(0.912 0.008 255);
  --border-2:oklch(0.945 0.006 255);
  --ink:oklch(0.285 0.022 262);
  --muted:oklch(0.500 0.020 262);
  --faint:oklch(0.515 0.016 262);
  /* 0.545, not the design's 0.560. As a text colour on --surface-2 the
     original measured 4.2:1, and this page argues that accessibility here is
     measured rather than asserted. 0.545 is the lightest value that clears
     4.5:1 on every ground it sits on (4.52 / 4.82 / 5.04) and it lifts white
     on the button fill to 5.04:1. POST-IMPORT: re-running import-design would
     restore 0.560 from the design file. */
  --primary:oklch(0.545 0.165 258);
  --primary-ink:oklch(0.480 0.150 258);
  --primary-soft:oklch(0.952 0.032 258);
  --on-primary:oklch(1 0 0);
  --good:oklch(0.440 0.120 155);
  --good-soft:oklch(0.950 0.045 155);
  --shadow:0 1px 2px oklch(0.28 0.02 262 / 0.06), 0 1px 3px oklch(0.28 0.02 262 / 0.04);
  --shadow-lg:0 1px 2px oklch(0.28 0.02 262 / 0.06), 0 14px 30px oklch(0.28 0.02 262 / 0.09);
  --stripe:oklch(0.940 0.008 255);
}
[data-theme="dark"]{
  --canvas:oklch(0.185 0.018 262);
  --surface:oklch(0.228 0.019 262);
  --surface-2:oklch(0.208 0.019 262);
  --border:oklch(0.312 0.020 262);
  --border-2:oklch(0.282 0.019 262);
  --ink:oklch(0.960 0.006 255);
  --muted:oklch(0.745 0.018 262);
  --faint:oklch(0.700 0.018 262);
  --primary:oklch(0.680 0.145 258);
  --primary-ink:oklch(0.800 0.130 258);
  --primary-soft:oklch(0.305 0.055 258);
  --on-primary:oklch(0.180 0.018 262);
  --good:oklch(0.740 0.110 155);
  --good-soft:oklch(0.300 0.050 155);
  --shadow:0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-lg:0 1px 2px oklch(0 0 0 / 0.32), 0 16px 34px oklch(0 0 0 / 0.30);
  --stripe:oklch(0.262 0.019 262);
}
html{background:var(--canvas);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;text-wrap:pretty}
*{box-sizing:border-box}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary);opacity:0.85}
svg{display:block;flex:0 0 auto}
::selection{background:var(--primary-soft);color:var(--ink)}


/* ---- hover states, lifted from style-hover attributes ---- */
.h1:hover{color:var(--ink);background:var(--surface-2);opacity:1}
.h2:hover{color:var(--ink);background:var(--surface-2);opacity:1}
.h3:hover{color:var(--ink);background:var(--surface-2);opacity:1}
.h4:hover{color:var(--ink);background:var(--surface-2);opacity:1}
.h5:hover{color:var(--ink);background:var(--surface-2);opacity:1}
.h6:hover{color:var(--ink);border-color:var(--faint)}
.h7:hover{color:var(--on-primary);opacity:1;filter:brightness(1.06)}
.h8:hover{color:var(--on-primary);opacity:1;filter:brightness(1.06)}
.h9:hover{color:var(--ink);opacity:1;border-color:var(--faint)}
.h10:hover{color:var(--on-primary);opacity:1;filter:brightness(1.06)}
.h11:hover{color:var(--ink);opacity:1;border-color:var(--faint)}
.h12:hover{color:var(--on-primary);opacity:1;filter:brightness(1.06)}
.h13:hover{color:var(--ink);opacity:1;border-color:var(--faint)}
.h14:hover{color:var(--ink);opacity:1}
.h15:hover{color:var(--ink);opacity:1}
.h16:hover{color:var(--ink);opacity:1}
.h17:hover{color:var(--ink);opacity:1}
.h18:hover{color:var(--ink);opacity:1}
.h19:hover{color:var(--ink);opacity:1}
.h20:hover{color:var(--ink);border-color:var(--faint)}

/* ===========================================================================
   POST-IMPORT CORRECTIONS
   Everything below is authored here, not carried in from the design file.
   Re-running tools/import-design would regenerate this stylesheet and drop it.
   =========================================================================== */

/* ---- wordmark -------------------------------------------------------------
   The supplied logo, black on light and white on dark. The theme is an
   explicit attribute now rather than the OS preference, so both colourways are
   selected by [data-theme] and neither is left to a media query — a
   prefers-color-scheme source would have served the white mark to a dark-OS
   visitor reading the page in light.

   Vector now, so there is no raster fallback to arrange and no size at which
   it softens. 100px rather than 110: the traced file is cropped to its own ink
   where the PNG carried the artboard's margin, so the smaller box renders the
   same optical width. */
.wordmark { display: block; width: 100px; height: auto; }
:root[data-theme="light"] .wordmark { content: url("../images/logo-black.svg"); }
:root[data-theme="dark"]  .wordmark { content: url("../images/logo-white.svg"); }

/* ---- FAQs -----------------------------------------------------------------
   Two columns of <details>. Masonry would balance the columns better, but it
   is not shipping in Safari, and `columns` would let one answer break across a
   column boundary mid-sentence — so a plain grid, filled row-major. */
.faqs {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 12px;
  align-items: start;
}
.faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.faq > summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
/* Safari still paints its own triangle without this. */
.faq > summary::-webkit-details-marker { display: none; }
/* The chevron is drawn rather than typed, so it rotates about its own centre
   and does not inherit the text baseline. */
.faq > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  margin: 5px 0 0 auto;
  flex: 0 0 auto;
  border-right: 1.8px solid var(--muted);
  border-bottom: 1.8px solid var(--muted);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}
.faq[open] > summary::after { transform: rotate(-135deg); }
.faq > summary:hover { color: var(--primary); }
.faq > summary:hover::after { border-color: var(--primary); }
.faq > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  border-radius: 12px;
}
.faq > p {
  margin: 0;
  padding: 0 16px 15px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .faq > summary::after { transition: none; }
}

/* ---- theme toggle icon ----------------------------------------------------
   The icon matches the label: both describe what the button will do. A moon
   while the page is light (click for dark), a sun while it is dark. Previously
   a single sun sat there in both themes, which in dark mode put a sun next to
   the word "Dark". Default is light, so the moon is the default-visible one. */
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun  { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }