/* ==========================================================================
   Elite 3D Labs LLC — design tokens and base layer
   --------------------------------------------------------------------------
   Palette is sampled from the shield logo: near-black shield body, with the
   inner swirl running gold -> orange -> coral. Those three stops are the whole
   brand; everything else is neutral so the gradient stays the loudest thing on
   any page.

   Loaded on every page. Page-specific rules live in their own files so we are
   not shipping storefront CSS to the quote tool.
   ========================================================================== */

:root {
  /* -- The logo, as one URL -------------------------------------------------
     Every CSS reference to the mark goes through this token, so the version
     query lives in exactly one place on this side of the codebase.

     The ?v= must match ICON_VERSION in worker/views/brand.tsx. CSS cannot
     import from TypeScript, so this is the one genuine duplication in the logo
     pipeline — bump both together. Without it, the watermark and the tab icon
     can end up showing different artwork to the same visitor, which reads as a
     rendering bug rather than a cache one and is very hard to spot.
     ---------------------------------------------------------------------- */
  --logo-url: url("/assets/img/logo-mark.svg?v=2");

  /* -- Brand: the flame gradient, sampled off the logo ---------------------- */
  --flame-100: #fff1de;
  --flame-200: #ffdcb0;
  --flame-300: #ffc978;
  --flame-400: #ffb020; /* gold — top of the swirl */
  --flame-500: #fa8b2e; /* orange — mid */
  --flame-600: #f0736b; /* coral — bottom of the swirl */
  --flame-700: #d9544f;
  /* The brand red, darkened until link-sized text on a light ground clears
     WCAG AA. --flame-700 measures 3.78:1 against the page background, which
     reads as brand-correct and is not actually legible to everyone; this is
     4.86:1. Use it for TEXT on light, and keep --flame-700 for fills, borders
     and anything large enough to pass at 3:1. */
  --flame-800: #c4403b;

  --flame-gradient: linear-gradient(
    152deg,
    var(--flame-300) 0%,
    var(--flame-400) 26%,
    var(--flame-500) 58%,
    var(--flame-600) 100%
  );

  /* -- Neutrals: the shield body -------------------------------------------- */
  --ink-950: #08080a;
  --ink-900: #0b0b0d; /* shield black */
  --ink-800: #141418;
  --ink-700: #1e1e24;
  --ink-600: #2c2c34;
  --ink-500: #4a4a55;
  --ink-400: #6e6e7a;
  --ink-300: #9a9aa5;
  --ink-200: #c7c7cf;
  --ink-100: #e4e4e9;
  --ink-50: #f2f2f5;

  --paper: #ffffff;
  --surface: #fafafb;
  --surface-alt: #f4f4f7;
  --line: #e4e4e9;
  --line-strong: #d2d2da;

  /* -- Semantic ------------------------------------------------------------- */
  --ok-600: #17805a;
  --ok-100: #dcf5ea;
  --warn-600: #b45309;
  --warn-100: #fdf0d8;
  --danger-600: #c62f2f;
  --danger-100: #fbe4e4;
  --info-600: #2563a8;
  --info-100: #ddebfa;

  /* -- Type ----------------------------------------------------------------- */
  --font-display: "Segoe UI Variable Display", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", -apple-system,
    BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --font-mono: "Cascadia Code", "SF Mono", "JetBrains Mono", ui-monospace,
    "Consolas", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-5xl: 3.75rem;

  /* -- Space, shape, depth --------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --max-w: 1180px;
  --max-w-prose: 68ch;

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(11 11 13 / 0.06);
  --shadow: 0 2px 8px rgb(11 11 13 / 0.08);
  --shadow-lg: 0 12px 32px rgb(11 11 13 / 0.12);
  --shadow-flame: 0 6px 20px rgb(250 139 46 / 0.28);

  --focus-ring: 0 0 0 3px rgb(255 176 32 / 0.45);
  --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

* {
  margin: 0;
}

/* Defensive: a [hidden] element must stay hidden even when a component rule
   sets `display` on the same selector. Without !important the more specific
   component rule wins and "hidden" content renders. */
[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-800);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* --------------------------------------------------------------------------
   Background watermark

   The shield sits behind every page. Three rules keep it from becoming a
   readability problem, which is the usual fate of a background logo:

     1. `position: fixed` — it stays put while the page scrolls, so it reads as
        a backdrop rather than a graphic that collides with content.
     2. `pointer-events: none` — it can never intercept a click or a text
        selection. Without this it becomes an invisible sheet over the page.
     3. Low opacity plus `z-index: -1` — it sits under everything, and content
        surfaces (.card, .site-header, .hero) paint their own opaque
        backgrounds over it, so body text never sits directly on the artwork.

   It is also hidden for anyone who has asked for reduced motion or high
   contrast, and when printing.
   -------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(78vw, 760px);
  height: min(78vw, 760px);
  transform: translate(-50%, -50%);
  background-image: var(--logo-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.055;
  pointer-events: none;
  z-index: -1;
}

@media (prefers-contrast: more) {
  body::before {
    display: none;
  }
}

@media print {
  body::before {
    display: none;
  }
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 5vw, var(--text-5xl));
}
h2 {
  font-size: clamp(1.5rem, 3.5vw, var(--text-3xl));
}
h3 {
  font-size: var(--text-xl);
}
h4 {
  font-size: var(--text-lg);
}

p {
  text-wrap: pretty;
}

/*
 * --flame-800, not --flame-700.
 *
 * The lighter token is the brand red and it measures 3.78:1 against the page
 * background — under WCAG AA for text, on every link on the site. Found with a
 * contrast sweep in Chromium while checking the admin product screens, where
 * the same rule colors every table link. --flame-800 is 4.86:1 and is close
 * enough that nothing else about the design changes.
 *
 * --flame-700 stays correct for fills, borders, badges and anything large
 * enough to pass at 3:1.
 */
a {
  color: var(--flame-800);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}

a:hover {
  color: var(--flame-600);
}

:focus-visible {
  outline: 2px solid var(--flame-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.main {
  flex: 1;
}

.section {
  padding-block: var(--sp-8);
}

.prose {
  max-width: var(--max-w-prose);
}

.prose h2 {
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-3);
}

.prose h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.prose p,
.prose ul,
.prose ol,
.prose table {
  margin-bottom: var(--sp-4);
}

.prose ul,
.prose ol {
  padding-left: var(--sp-5);
}

.prose li {
  margin-bottom: var(--sp-2);
}

.stack > * + * {
  margin-top: var(--sp-4);
}

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink-900);
  color: var(--paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   Brand mark
   -------------------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}

.brand__mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.brand__name em {
  font-style: normal;
  background: var(--flame-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Site header
   -------------------------------------------------------------------------- */

.site-header {
  background: var(--ink-900);
  color: var(--ink-100);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--ink-700);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 68px;
}

.site-header .brand__name {
  color: var(--paper);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.nav a {
  color: var(--ink-200);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}

.nav a:hover {
  color: var(--paper);
  background: var(--ink-700);
}

.nav a[aria-current="page"] {
  color: var(--flame-400);
  background: var(--ink-800);
}

/* The cart lives in the nav and is bordered rather than filled: it is a
   destination, not the page's call to action. Filling it competes with the
   primary button on every page that has one. */
.nav__cart {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--ink-600);
  border-radius: var(--radius-full);
}

.nav__cart-count {
  background: var(--flame-gradient);
  color: var(--ink-950);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
  border-radius: var(--radius-full);
  padding: 0 var(--sp-2);
  /* Wide enough for two digits before it grows, so a cart going from 9 to 10
     does not shift the whole nav sideways. */
  min-width: 1.5rem;
  text-align: center;
}

.nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink-600);
  border-radius: var(--radius);
  color: var(--ink-100);
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav__toggle {
    display: block;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--ink-900);
    border-bottom: 1px solid var(--ink-700);
    padding: var(--sp-3);
    gap: var(--sp-1);
  }
  .nav[data-open="true"] {
    display: flex;
  }
  /* Stretched like every other row in the open menu, rather than sitting as a
     lone pill in the middle of it. */
  .nav__cart {
    justify-content: space-between;
  }
  .site-header .wrap {
    position: relative;
  }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition),
    background var(--transition), border-color var(--transition);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--flame-gradient);
  color: var(--ink-950);
  box-shadow: var(--shadow-flame);
}

.btn--primary:hover {
  color: var(--ink-950);
  box-shadow: 0 8px 26px rgb(250 139 46 / 0.4);
}

.btn--secondary {
  background: var(--ink-900);
  color: var(--paper);
}

.btn--secondary:hover {
  background: var(--ink-700);
  color: var(--paper);
}

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

.btn--ghost:hover {
  border-color: var(--ink-500);
  background: var(--surface-alt);
  color: var(--ink-900);
}

.btn--lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--text-base);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Cards, badges, notices
   -------------------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  transition: border-color var(--transition), box-shadow var(--transition),
    transform var(--transition);
}

.card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.badge--flame {
  background: var(--flame-100);
  color: var(--flame-700);
}

.notice {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border-left: 3px solid var(--info-600);
  background: var(--info-100);
  font-size: var(--text-sm);
}

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

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-800);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--ink-400);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--danger-600);
  font-weight: 500;
}

.field__success {
  font-size: var(--text-sm);
  color: var(--ok-600);
  font-weight: 500;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--flame-400);
  box-shadow: var(--focus-ring);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--danger-600);
}

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

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
}

th {
  background: var(--surface-alt);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-500);
}

tbody tr:last-child td {
  border-bottom: none;
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

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

.site-footer {
  background: var(--ink-900);
  color: var(--ink-300);
  padding-block: var(--sp-7) var(--sp-5);
  margin-top: var(--sp-9);
  font-size: var(--text-sm);
}

.site-footer a {
  color: var(--ink-200);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--flame-400);
  text-decoration: underline;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--ink-700);
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

.footer-col h3 {
  color: var(--paper);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}

.footer-col ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer-legal {
  padding-top: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  align-items: center;
  color: var(--ink-400);
  font-size: var(--text-xs);
}

.footer-legal nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.footer-brand .brand__name {
  color: var(--paper);
}

.footer-brand p {
  margin-top: var(--sp-3);
  max-width: 34ch;
  color: var(--ink-400);
}

/* The tagline carries the brand gradient, matching how it appears in the
   logo artwork. Uppercase and tracked out, as drawn. */
.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  background: var(--flame-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Content page components
   -------------------------------------------------------------------------- */

.lede {
  font-size: var(--text-lg);
  color: var(--ink-500);
}

.empty-state {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  max-width: 620px;
  margin-inline: auto;
}

.empty-state h1,
.empty-state h2 {
  margin-bottom: var(--sp-3);
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}

@media (max-width: 860px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--shadow);
}

.material-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-top: var(--sp-6);
  background: var(--paper);
}

.material-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--line);
}

.material-card h3 {
  margin-top: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.material-card ul {
  padding-left: var(--sp-5);
}

.material-card li {
  margin-bottom: var(--sp-2);
}

.faq-list {
  max-width: var(--max-w-prose);
  margin-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  cursor: pointer;
  padding: var(--sp-4) var(--sp-6) var(--sp-4) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--ink-900);
  list-style: none;
  position: relative;
  transition: color var(--transition);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--flame-500);
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item summary:hover {
  color: var(--flame-700);
}

.faq-item p {
  padding: 0 var(--sp-6) var(--sp-5) 0;
  color: var(--ink-500);
}

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

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

.text-muted {
  color: var(--ink-400);
}
.text-sm {
  font-size: var(--text-sm);
}
.text-center {
  text-align: center;
}
.flame-text {
  background: var(--flame-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flame-rule {
  height: 3px;
  width: 64px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--flame-gradient);
  margin: 0 0 var(--sp-5);
}

/* ==========================================================================
   Consent banner
   --------------------------------------------------------------------------
   Fixed to the bottom rather than centerd over the page. A modal overlay that
   blocks the content until answered is a cookie wall, which is a separate and
   much weaker legal position — the site stays fully usable whether or not the
   visitor ever touches this.

   `hidden` is honored through `display:none`, because setting `display:flex`
   on the element would otherwise override the attribute and the banner would
   show for everyone including visitors who already answered.
   ========================================================================== */

.consent {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--paper);
  border-top: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-4) var(--sp-5);
}

.consent[hidden] {
  display: none;
}

.consent__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  align-items: center;
  justify-content: space-between;
}

.consent__text {
  flex: 1 1 30ch;
}

.consent__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  margin: 0 0 var(--sp-1);
}

.consent__body {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-400);
  max-width: 72ch;
}

/* Reject, analytics-only and accept sit at the same level and the same size.
   Making reject visually weaker than accept is the most-enforced dark pattern
   in EU cookie decisions, so the only difference is the primary fill on
   accept — and the ghost buttons keep a full-strength border and label. */
.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.consent__actions .btn {
  font-size: var(--text-sm);
}

@media (max-width: 640px) {
  .consent__actions {
    width: 100%;
  }
  .consent__actions .btn {
    flex: 1 1 auto;
  }
}

/* The footer's "Your Privacy Choices" control. It is a <button> because it
   performs an action rather than navigating, but it has to sit in a row of
   links without looking like the odd one out. */
.footer__link-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__link-btn:hover {
  color: var(--flame-400);
}

.footer__link-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}