/* GENERATED FILE. Do not edit.
   Source: design/tokens.css, design/base.css, design/components.css, design/product.css
   Rebuild: npm run styles:build */

/* ===========================================================================
   Cybiq design tokens: the "cited verdict" identity.
   Ink and blue, light first, with a full dark theme. Mono is reserved for
   legal pinpoints so a citation always looks like a citation.

   Theme resolution order (all three blocks must exist for the toggle to win
   in both directions):
     1. :root                       light, the default
     2. prefers-color-scheme: dark  applied unless the user picked light
     3. [data-theme="dark"]         explicit choice, beats the media query

   Every colour pair used for text is asserted in tests/design-tokens.test.ts.
   Do not introduce a colour here without adding its pair to that test.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Type */
  --font-display: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Metrics */
  --maxw: 1120px;
  --measure: 68ch;
  --radius-s: 7px;
  --radius: 10px;
  --radius-l: 14px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-pad: clamp(52px, 8vw, 96px);
  --header-h: 64px;

  /* Surfaces and text */
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #eef2f8;
  --ink: #16202e;
  --ink-2: #3a4759;
  --muted: #5b6878;

  /* Brand */
  --brand: #1a56db;
  --brand-strong: #1443b0;
  --accent-text: #1443b0;
  --on-brand: #ffffff;
  --brand-soft: rgba(26, 86, 219, 0.08);
  --brand-soft-2: rgba(26, 86, 219, 0.14);

  /* Lines. --line is decorative; --line-2 carries meaning (input borders)
     and therefore clears 3:1 against --bg. */
  --line: #d9e0ea;
  --line-2: #75839a;

  /* Status. The bare token is the 3:1 UI colour (borders, rules, icons);
     the -text token is the 4.5:1 colour for words. */
  --danger: #b42318;
  --danger-text: #a11e14;
  --danger-soft: rgba(180, 35, 24, 0.08);
  --amber: #b54708;
  --amber-text: #8a4a0b;
  --amber-soft: rgba(181, 71, 8, 0.1);
  --success: #0f7b3f;
  --success-text: #0e6b37;
  --success-soft: rgba(15, 123, 63, 0.09);

  /* Focus */
  --focus: #1443b0;
  --focus-glow: rgba(26, 86, 219, 0.18);

  /* Elevation */
  --shadow-1: 0 1px 2px rgba(22, 32, 46, 0.05);
  --shadow-2: 0 6px 24px rgba(22, 32, 46, 0.08);

  /* Motion */
  --dur: 160ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* System preference: dark, unless the visitor explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: #0d1320;
    --surface: #151d2c;
    --surface-2: #1c2638;
    --ink: #e9edf4;
    --ink-2: #c5cdda;
    --muted: #9aa6b8;

    --brand: #7fa4ee;
    --brand-strong: #a6c0f5;
    --accent-text: #9db9f3;
    --on-brand: #0b1220;
    --brand-soft: rgba(127, 164, 238, 0.14);
    --brand-soft-2: rgba(127, 164, 238, 0.22);

    --line: #2a3648;
    --line-2: #6f7f98;

    --danger: #f08c82;
    --danger-text: #f4a59d;
    --danger-soft: rgba(240, 140, 130, 0.14);
    --amber: #e8a75a;
    --amber-text: #f0bc7e;
    --amber-soft: rgba(232, 167, 90, 0.14);
    --success: #5fc68f;
    --success-text: #84d4a8;
    --success-soft: rgba(95, 198, 143, 0.14);

    --focus: #a6c0f5;
    --focus-glow: rgba(127, 164, 238, 0.3);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
  }
}

/* Explicit choice: beats the media query in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1320;
  --surface: #151d2c;
  --surface-2: #1c2638;
  --ink: #e9edf4;
  --ink-2: #c5cdda;
  --muted: #9aa6b8;

  --brand: #7fa4ee;
  --brand-strong: #a6c0f5;
  --accent-text: #9db9f3;
  --on-brand: #0b1220;
  --brand-soft: rgba(127, 164, 238, 0.14);
  --brand-soft-2: rgba(127, 164, 238, 0.22);

  --line: #2a3648;
  --line-2: #6f7f98;

  --danger: #f08c82;
  --danger-text: #f4a59d;
  --danger-soft: rgba(240, 140, 130, 0.14);
  --amber: #e8a75a;
  --amber-text: #f0bc7e;
  --amber-soft: rgba(232, 167, 90, 0.14);
  --success: #5fc68f;
  --success-text: #84d4a8;
  --success-soft: rgba(95, 198, 143, 0.14);

  --focus: #a6c0f5;
  --focus-glow: rgba(127, 164, 238, 0.3);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* Legacy aliases: the pre-token stylesheets used these names and some
   product CSS still reads them. Keeping them mapped avoids a rename sweep
   through markup that tests pin. */
:root {
  --paper: var(--surface);
  --canvas: var(--bg);
  --ink-soft: var(--muted);
  --accent: var(--brand);
  --accent-ink: var(--on-brand);
  --ok: var(--success);
  --warn: var(--amber);
  --stop: var(--danger);
}

/* Raised contrast: hairlines become real lines, muted text becomes body ink. */
@media (prefers-contrast: more) {
  :root {
    --line: var(--ink);
    --muted: var(--ink-2);
    --shadow-1: none;
    --shadow-2: none;
  }
}

/* Windows High Contrast and friends: hand every colour back to the OS. */
@media (forced-colors: active) {
  :root {
    --line: CanvasText;
    --line-2: CanvasText;
    --focus: Highlight;
    --shadow-1: none;
    --shadow-2: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0.01ms;
  }
}

/* ===========================================================================
   Base layer: reset, document rhythm, typography scale, links, focus,
   utilities and the page skeleton shared by the wizard app and the static
   pages. Everything here is token driven; no literal colours.
   =========================================================================== */

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography ---------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.06;
  margin: 0 0 var(--space-4);
}

h2 {
  font-size: clamp(23px, 2.8vw, 31px);
  letter-spacing: -0.02em;
  margin: var(--space-7) 0 var(--space-3);
}

h3 {
  font-size: 19px;
  margin: var(--space-5) 0 var(--space-2);
}

h4 {
  font-size: 17px;
  margin: var(--space-4) 0 var(--space-2);
}

p {
  margin: 0 0 var(--space-4);
}

small,
.small {
  font-size: 14px;
}

strong,
b {
  font-weight: 700;
}

/* The mono kicker that labels a page or a section. */
.eyebrow,
.kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
}

/* ---- Links --------------------------------------------------------------- */

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--brand-strong);
}

/* Prose links stay underlined (WCAG 1.4.1: colour is never the only cue).
   Navigation, buttons and cards opt out explicitly below. */
main a,
.site-footer a {
  text-decoration: underline;
}

/* Every selector here carries at least one element or a second class, so it
   outranks the `main a` / `.site-footer a` underline rule above regardless of
   where the element sits. A bare `.brand` would lose and the footer wordmark
   would come out underlined. */
a.nav-link,
a.btn,
a.brand,
a.skip-link,
a.chip,
a.tab,
.toc a,
.post h2 a {
  text-decoration: none;
}

/* ---- Focus --------------------------------------------------------------- */

:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Never a bare outline:none. Inputs swap the ring for a border + glow. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 1px;
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 3px solid Highlight;
  }
}

/* ---- Utilities ----------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -100px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 var(--space-5);
  border-radius: var(--radius-s);
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
  transition: top var(--dur) var(--ease);
}

.skip-link:focus {
  top: var(--space-3);
  color: var(--on-brand);
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--section-pad);
  border-top: 1px solid var(--line);
}

.measure {
  max-width: var(--measure);
}

/* ---- Page skeleton ------------------------------------------------------- */

main {
  flex: 1 0 auto;
}

/* Static content pages: a reading sheet floated on the page ground. The
   prose column inside it is capped at --measure; wide children opt out. */
main.page {
  width: 100%;
  max-width: 64rem;
  margin: var(--space-7) auto var(--space-8);
  padding: var(--space-7) clamp(20px, 5vw, 56px) var(--space-8);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
}

main.page > h1 {
  margin-bottom: var(--space-5);
}

main.page > h1 + p,
main.page > .kicker + h1 + p {
  font-size: 19px;
  color: var(--ink-2);
}

/* Edge to edge on small screens: a floating card wastes width there. */
@media (max-width: 760px) {
  main.page {
    margin: 0 0 var(--space-6);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
  }
}

main.page > *,
main.page section > * {
  max-width: var(--measure);
}

/* Full-bleed children of a prose column: tables, tool cards, callouts. */
main.page .table-scroll,
main.page .tool,
main.page .cta,
main.page .toc,
main.page .post,
main.page > table,
main.page section > table {
  max-width: none;
}

body.prose main.page {
  max-width: 56rem;
}

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

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-6) 0;
}

/* ---- Lists --------------------------------------------------------------- */

main.page ul,
main.page ol {
  padding-left: 1.25rem;
}

main.page li {
  margin-bottom: var(--space-2);
}

/* ---- Code and quoted legal text ----------------------------------------- */

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-size: 0.86em;
}

code {
  background: var(--surface-2);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Every <pre> scrolls sideways, so the markup gives it tabindex="0" and this
   ring makes that focus visible (WCAG 2.1.1, axe scrollable-region-focusable).
   tests/design-chrome.test.ts asserts the attribute on every page. */
pre:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}

pre {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
}

/* The identity motif: quoted Official Journal text carries a brand rule. */
blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-5);
  background: var(--surface-2);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}

blockquote p {
  margin: 0 0 var(--space-2);
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Citation attribution inside a quote: mono, muted, never a page landmark. */
blockquote footer {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

blockquote footer a {
  color: var(--accent-text);
}

/* ---- Tables -------------------------------------------------------------- */

table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-4) 0;
  font-size: 0.92rem;
}

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

th {
  background: var(--surface-2);
  font-weight: 700;
}

/* Wide tables scroll inside their own box so 320px never scrolls the page.
   min-width:0 matters as much as the overflow: inside a grid the box would
   otherwise be sized to the table's min-content and widen the whole track. */
.table-scroll {
  overflow-x: auto;
  min-width: 0;
  margin: var(--space-4) 0;
  border-radius: var(--radius);
}

.table-scroll table {
  margin: 0;
}

/* A scrollable box must be reachable by keyboard, so it carries tabindex="0";
   give that focus a visible ring like any other focusable thing. */
.table-scroll:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
}

/* ---- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    /* !important is load-bearing here: this block has to beat every
       animation and transition declared anywhere else, including inside
       more specific selectors. Removing it silently breaks WCAG 2.3.3 for
       visitors who asked the OS to reduce motion. */
    /* biome-ignore lint/complexity/noImportantStyles: overrides every animation */
    animation-duration: 0.01ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: overrides every animation */
    animation-iteration-count: 1 !important;
    /* biome-ignore lint/complexity/noImportantStyles: overrides every transition */
    transition-duration: 0.01ms !important;
    /* biome-ignore lint/complexity/noImportantStyles: overrides smooth scrolling */
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Component layer: the shared chrome (header, nav, theme toggle, footer) and
   the generic building blocks every page composes from. Markup for the
   header and footer is generated by design/chrome.ts; changing a class here
   without changing it there will fail tests/design-chrome.test.ts.
   =========================================================================== */

/* ---- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(8px) saturate(1.1);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--ink);
  padding: 6px 4px;
  border-radius: var(--radius-s);
}

.brand:hover {
  color: var(--ink);
}

.brand-mark {
  flex: 0 0 auto;
  display: block;
  width: 28px;
  height: 28px;
}

.brand-mark-bg {
  fill: var(--brand);
}

.brand-mark-c {
  stroke: var(--on-brand);
}

@media (forced-colors: active) {
  .brand-mark-bg {
    fill: CanvasText;
  }

  .brand-mark-c {
    stroke: Canvas;
  }
}

.brand-byline {
  margin-left: 7px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
}

.nav-link:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.nav-link[aria-current="page"] {
  color: var(--accent-text);
  box-shadow: inset 0 -2px 0 var(--brand);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--line-2);
  color: var(--ink);
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
}

/* One glyph per theme, never both. Every rule below is scoped to
   .theme-toggle so it outranks the `.theme-toggle svg` sizing rule above;
   a bare `.icon-moon` would lose to it and render both icons. */
.theme-toggle .icon-sun {
  display: block;
}

.theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .icon-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun {
    display: none;
  }

  :root:not([data-theme="light"]) .theme-toggle .icon-moon {
    display: block;
  }
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

.menu-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 768px) {
  .menu-toggle {
    display: inline-flex;
  }

  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
  }

  .site-nav.is-open {
    display: flex;
  }

  .nav-link {
    min-height: 48px;
    border-radius: var(--radius-s);
  }

  .nav-link[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--brand);
  }

  .header-inner {
    position: relative;
    gap: var(--space-2);
  }

  /* Two class selectors, deliberately: the .btn rule that gives this link
     its display sits later in the cascade, so a single-class override here
     would lose to it and leave the CTA overflowing a 320px viewport. */
  .header-actions .header-cta {
    display: none;
  }

  .brand-byline {
    display: none;
  }
}

@media (max-width: 400px) {
  .brand {
    font-size: 17px;
  }
}

/* ---- Footer -------------------------------------------------------------- */

.site-footer {
  flex: 0 0 auto;
  margin-top: var(--space-8);
  border-top: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 15px;
}

.footer-inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-6);
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(140px, 1fr));
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 560px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

/* Grid items default to min-width:auto, which lets a wide child (a table,
   a long unbroken string) push the whole track past the viewport. Every
   grid on the site opts out. */
.footer-inner > * {
  min-width: 0;
}

.footer-brand .brand {
  margin-bottom: var(--space-3);
}

.footer-tagline {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 34ch;
}

.footer-group h2 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-3);
}

.footer-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-group li {
  margin: 0;
}

.footer-group a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 15px;
}

.footer-group a:hover {
  color: var(--accent-text);
}

.footer-legal {
  border-top: 1px solid var(--line);
  padding: var(--space-4) var(--space-5) var(--space-6);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.footer-legal p {
  margin: 0 0 var(--space-2);
  font-size: 14px;
  color: var(--muted);
}

.footer-legal p:last-child {
  margin-bottom: 0;
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

.btn-primary:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: var(--on-brand);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-ghost:hover {
  background: var(--surface-2);
}

.btn-full {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (forced-colors: active) {
  .btn {
    border: 1px solid ButtonText;
  }
}

.header-cta {
  min-height: 44px;
  padding: 10px 18px;
  font-size: 15px;
}

/* ---- Cards, chips, callouts --------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
}

.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.chip {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

/* The citation chip: a legal pinpoint always renders in mono. */
.cite-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.callout {
  margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--brand-soft);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-warn {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.callout-danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.callout-success {
  border-left-color: var(--success);
  background: var(--success-soft);
}

.note {
  color: var(--muted);
  font-size: 14px;
}

/* ---- Forms --------------------------------------------------------------- */

label {
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
  font: inherit;
  width: 100%;
  max-width: 32rem;
  min-height: 46px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--brand);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--brand);
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 auto;
}

::placeholder {
  color: var(--muted);
  opacity: 1;
}

fieldset {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}

[role="alert"],
[role="status"] {
  min-height: 1.3rem;
}

/* ---- Table of contents (faq, glossary) ---------------------------------- */

.toc {
  position: sticky;
  top: calc(var(--header-h) + 8px);
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
  max-height: 45vh;
  overflow-y: auto;
}

.toc p {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--space-6);
  font-size: 15px;
}

.toc li {
  margin-bottom: 2px;
  break-inside: avoid;
}

.toc a {
  color: var(--accent-text);
}

.toc a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .toc ul {
    columns: 1;
  }

  .toc {
    position: static;
    max-height: none;
  }
}

/* ===========================================================================
   Product layer: the Cybiq-specific classes. Class names here are pinned by
   tests/ui.test.ts (emitted by src/ui/views.ts), tests/tools-page.test.ts
   and tests/print-css.test.ts. Restyle freely, but do not rename.
   =========================================================================== */

/* ---- Wizard shell -------------------------------------------------------- */

.app-main {
  display: flex;
  flex-direction: column;
}

.app {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
}

.wizard {
  display: block;
}

.hero {
  text-align: center;
  margin-bottom: var(--space-6);
}

.hero-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-size: clamp(32px, 5.4vw, 52px);
  line-height: 1.04;
  margin: 0 0 var(--space-3);
}

.hero h1 em {
  font-style: normal;
  color: var(--accent-text);
}

.hero-subtitle,
.hero p.lede {
  color: var(--muted);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 500;
  line-height: 1.55;
  max-width: 36rem;
  margin: 0 auto;
}

.hero-trust {
  margin: var(--space-4) auto 0;
  max-width: 40rem;
  font-size: 14px;
  color: var(--muted);
}

/* ---- Question card ------------------------------------------------------- */

.step-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-3);
}

.hint {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 var(--space-4);
}

.option-group {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
}

.choice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  min-height: 46px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.choice + .choice {
  margin-top: var(--space-2);
}

.choice:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand);
}

.choice input {
  margin-top: 4px;
}

.choice .choice-title {
  display: block;
  font-weight: 700;
  color: var(--ink);
}

.choice .choice-desc {
  display: block;
  color: var(--muted);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
}

.controls {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ---- Verdict ------------------------------------------------------------- */

.verdict-banner {
  border-left: 4px solid var(--line-2);
}

.verdict-in_scope {
  border-left-color: var(--brand);
  background: var(--brand-soft);
}

.verdict-in_scope .verdict-headline {
  color: var(--brand-strong);
}

.verdict-out_of_scope,
.verdict-likely_out_of_scope {
  border-left-color: var(--line-2);
  background: var(--surface-2);
}

.verdict-out_of_scope .verdict-headline,
.verdict-likely_out_of_scope .verdict-headline {
  color: var(--ink);
}

.verdict-needs_review {
  border-left-color: var(--amber);
  background: var(--amber-soft);
}

.verdict-needs_review .verdict-headline {
  color: var(--amber-text);
}

.verdict-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--space-2);
}

.verdict-headline {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.1;
  margin: 0 0 var(--space-3);
}

.reasons {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--ink-2);
}

.reasons li {
  margin-bottom: var(--space-2);
}

.result-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

/* See .table-scroll in base.css: without this the tier table's min-content
   sizes the whole result column and the page scrolls sideways at 320px. */
.result-grid > *,
.seo-inner > * {
  min-width: 0;
}

.result-grid > .card,
.app > .card {
  margin: 0;
}

h2.section-title {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}

span.section-title {
  font-weight: 700;
  color: var(--ink-2);
  margin-right: 6px;
}

.penalty-line {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--danger);
  background: var(--danger-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15px;
  color: var(--ink-2);
}

.penalty-line strong {
  color: var(--danger-text);
}

/* ---- Obligations, timeline, deadlines ----------------------------------- */

ol.obligations,
ul.timeline,
ol.next-steps,
.deadline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

ol.next-steps {
  list-style: decimal;
  padding-left: 1.2rem;
  color: var(--ink-2);
}

.obligation {
  padding: var(--space-4) 0;
}

.obligation + .obligation {
  border-top: 1px solid var(--line);
}

.obligation-article {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 6px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.obligation-title {
  font-weight: 700;
}

.obligation-detail {
  color: var(--muted);
  font-size: 15px;
  margin: var(--space-2) 0 0;
}

.tl-item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
}

/* Below 480px a fixed date column leaves too little for the label. */
@media (max-width: 480px) {
  .tl-item {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

.tl-item + .tl-item {
  border-top: 1px solid var(--line);
}

.timeline time,
.deadline-item time {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.timeline .tl-label {
  font-weight: 700;
}

.timeline .tl-desc {
  color: var(--muted);
  font-size: 15px;
  margin: var(--space-2) 0 0;
}

.tl-chip {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--amber-soft);
  color: var(--amber-text);
}

.tl-chip-muted {
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 600;
}

.deadlines-card .badge {
  margin-right: var(--space-2);
}

.deadline-item {
  padding: var(--space-4) 0;
}

.deadline-item + .deadline-item {
  border-top: 1px solid var(--line);
}

.deadline-item time {
  margin-left: var(--space-2);
}

.deadline-label {
  display: block;
  font-weight: 700;
  margin-top: var(--space-1);
}

.deadline-desc {
  color: var(--muted);
  font-size: 15px;
  margin: var(--space-1) 0 var(--space-2);
}

.deadline-item .citations {
  margin: 0;
}

/* ---- Citations ----------------------------------------------------------- */

.citations {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

.citation-link,
.flag-error {
  color: var(--accent-text);
}

.flag-error {
  font-size: 13px;
}

/* ---- Offer panel, tiers -------------------------------------------------- */

.cta-panel {
  text-align: center;
}

.cta-panel h2 {
  margin-top: 0;
  font-size: 21px;
}

.cta-price {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--space-2) 0;
}

.cta-panel .btn {
  margin: var(--space-2) 6px 0;
}

.tier-table th,
.tier-table td {
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 14px;
  background: none;
}

.tier-table th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: bottom;
}

.tier-table td:not(:first-child),
.tier-table th:not(:first-child) {
  text-align: center;
  width: 5.5rem;
}

.tier-table .tier-current {
  background: var(--brand-soft);
  font-weight: 700;
  color: var(--accent-text);
}

/* ---- Permalink, disclaimer, watch signup -------------------------------- */

.permalink-row {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.permalink-row code {
  flex: 1 1 18rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.disclaimer {
  margin-top: var(--space-6);
  color: var(--muted);
  font-size: 14px;
}

.download-status {
  margin: var(--space-2) 0 0;
}

.watch-signup form {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--space-4) 0;
}

.watch-signup input[type="email"] {
  flex: 1 1 16rem;
  max-width: 22rem;
}

/* ---- Crawlable content block on the home page --------------------------- */

.seo {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5) var(--space-8);
  border-top: 1px solid var(--line);
}

.seo-inner {
  display: grid;
  gap: var(--space-5);
}

.seo h2 {
  margin-top: 0;
  font-size: clamp(21px, 2.4vw, 26px);
}

.seo-table {
  font-size: 15px;
}

.seo .faq dt {
  font-weight: 700;
  margin-top: var(--space-4);
}

.seo .faq dd {
  margin: var(--space-1) 0 0;
  color: var(--muted);
}

.seo-packs {
  padding-left: 1.2rem;
}

.seo-packs li {
  margin-bottom: var(--space-2);
}

/* ---- Static pages: prose, blog, chips, callouts -------------------------- */

.date {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.post {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  padding: var(--space-5);
  margin-top: var(--space-4);
  max-width: none;
}

.post h2 {
  margin: 0 0 var(--space-2);
  font-size: 21px;
}

.post h2 a {
  color: var(--ink);
}

.post h2 a:hover {
  color: var(--accent-text);
}

.post p {
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

.cta {
  background: var(--brand-soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-6);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.cta > :last-child {
  margin-bottom: 0;
}

.countdown {
  margin: var(--space-3) 0;
}

nav.related p {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

section.qa,
section.term {
  margin-top: var(--space-6);
}

section.qa h2,
section.term h2 {
  margin-top: 0;
}

section.qa h3 {
  margin-top: 0;
  font-size: 19px;
}

.answer blockquote {
  margin-left: 0;
}

/* ---- Free micro-tools (tools.html) --------------------------------------
   These rules were previously trapped inside a @media (max-width: 640px)
   block that never closed, leaving tools.html unstyled on every wider
   viewport. They belong at top level. */

.tool {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-1);
  padding: var(--space-5) var(--space-5) var(--space-6);
  margin: var(--space-6) 0;
  background: var(--surface);
}

.tool > h2 {
  margin-top: 0;
  padding-bottom: var(--space-2);
  border-bottom: 3px solid var(--brand);
  font-size: 23px;
}

.tool-form {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-5) 0;
}

.tool-field {
  display: grid;
  gap: 6px;
}

.tool-field label {
  font-size: 15px;
  font-weight: 600;
}

.tool-field .help {
  font-size: 14px;
  color: var(--muted);
}

.tool-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.tool-output {
  margin-top: var(--space-4);
}

/* No output yet means no empty grey slab. */
.tool-output pre:empty {
  display: none;
}

.tool-output pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
  max-height: 30rem;
}

.tool-status {
  font-size: 15px;
  color: var(--muted);
  min-height: 1.3rem;
  margin: var(--space-2) 0 0;
}

/* ---- Print: the R12 one-pager -------------------------------------------
   tests/print-css.test.ts pins this selector list verbatim. Do not reorder,
   rename or split it. */

.print-header {
  display: none;
}

@media print {
  @page {
    margin: 14mm;
  }

  body {
    background: #fff;
    color: #000;
    display: block;
  }

  .app {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .skip-link {
    display: none;
  }

  .site-header,
  .site-footer,
  .seo,
  .hero,
  .wizard,
  .cta-panel,
  .watch-signup,
  section.card:has(.tier-table),
  .flag-error,
  button,
  a:not(.citation-link) {
    display: none;
  }

  .print-header {
    display: block;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #000;
  }

  .print-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
  }

  .print-meta {
    margin: 0;
    font-size: 0.8rem;
    overflow-wrap: anywhere;
  }

  #app,
  #app * {
    color: #000;
    background: transparent;
    box-shadow: none;
  }

  .card,
  .verdict-banner {
    border: none;
    border-radius: 0;
    break-inside: avoid;
  }

  .penalty-line {
    border-left: 3px solid #000;
  }

  a.citation-link[href]::after {
    content: " (" attr(href) ")";
  }
}