/* ============================================================================
   store.ages.productions

   Tokens are copied from the parent site's styles.css :root. Do not invent a
   colour that is not on this list — see the token table in CLAUDE.md.
   ========================================================================== */

:root {
  --charcoal-1: #14171B;   /* primary ink */
  --charcoal-2: #2A2F36;   /* secondary */
  --charcoal-3: #1B1F24;
  --charcoal-4: #0E1115;   /* deepest — header, hero, dark bands */
  --card:       #161A1F;   /* store-only card fill on dark */
  --blue:       #355C84;   /* brand blue */
  --blue-bright:#4A78A8;   /* hover */
  --blue-soft:  #7A9BC2;   /* blue tint on dark */
  --gray-soft:  #E6E8EB;
  --gray-paper: #F4F5F7;
  --gray-line:  #D9DCE0;
  --white:      #FFFFFF;
  --ink-mute:   #5C636C;

  --font-sans: 'Sora', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1320px;
  --pad: clamp(20px, 4vw, 56px);

  --focus-ring: var(--blue-bright);
  --focus-ring-contrast: #FFFFFF;
}

/* The reset that makes --max/--pad produce the same margins as
   ages.productions and led.ages.productions. Without it, max-width caps only
   the content box and --pad is added outside it, so every section runs
   full-bleed. Verified at 1440px: 1320px box, 53px margins, content at 109px. */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* The `hidden` attribute must beat any display rule set by a class. Without
   this, `.drawer { display:flex }` wins over the UA's [hidden]{display:none}
   and the request drawer renders open on page load. */
[hidden] { display: none !important; }

body {
  font-family: var(--font-sans);
  color: var(--charcoal-1);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.band--dark :focus-visible { outline-color: var(--focus-ring-contrast); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--white); color: var(--charcoal-1);
  padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { left: 0; }

.mono {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}

/* ── Bands ────────────────────────────────────────────────────────────────── */

.band--dark  { background: var(--charcoal-4); color: var(--white); }
.band--paper { background: var(--gray-paper); border-top: 1px solid var(--gray-line);
               border-bottom: 1px solid var(--gray-line); }
.band__inner { padding: clamp(56px, 7vw, 88px) 0; }

.eyebrow { color: var(--ink-mute); margin-bottom: 14px; }
.band--dark .eyebrow { color: rgba(255,255,255,0.6); }

h1, h2, h3 { letter-spacing: -0.02em; margin: 0; }

/* Section headings and their lede both run to the width of the content box and
   break at the edge — normal greedy wrapping, nothing capping the measure.

   DO NOT reintroduce `text-wrap: balance` here, and do not put a `ch` max-width
   back on these. Balance deliberately ends a line EARLY so the lines come out
   even lengths; on a two-line heading that leaves a visible gap of empty space
   mid-phrase, which reads as a broken wrap rather than a considered one. A ch
   cap does the same thing from the other direction. Both were tried on
   2026-09-07 and rejected by the owner on sight.

   The lede keeps a fluid font-size so it scales with the viewport the way the
   heading above it does — that part of the 2026-09-07 change was the real fix
   and stays. It previously sat at a fixed 16px, so its line length never
   responded to browser width at all while the heading did. */
h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 600; line-height: 1.08; }
.lede {
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--ink-mute);
  margin: 14px 0 0;
}
.band--dark .lede { color: rgba(255,255,255,0.72); }

/* ── Prose (privacy policy and any other text-only page) ──────────────────── */

/* A reading measure, unlike the store sections: this is continuous prose that
   someone actually reads top to bottom, not a heading over a card grid. 68ch
   is the same measure the .lede settled on. */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; line-height: 1.2;
  margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--gray-line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose p { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.7;
           color: var(--charcoal-2); margin: 14px 0 0; }
.prose ul { margin: 14px 0 0; padding-left: 22px; }
.prose li { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.7;
            color: var(--charcoal-2); margin: 8px 0 0; }
.prose strong { color: var(--charcoal-1); font-weight: 600; }
.prose a { color: var(--blue); font-weight: 600; text-decoration: underline;
           text-underline-offset: 3px; }
/* Darkens on hover rather than lightening. --blue-bright is the hover colour
   everywhere else, but on the paper ground it measures 4.24:1 — fine for a
   focus ring at 3:1, under the 4.5:1 that link TEXT needs. --charcoal-1 is
   16.48:1 and still reads as a state change. */
.prose a:hover { color: var(--charcoal-1); }

/* Fla. Stat. 672.316(2) requires a disclaimer of implied warranties to be
   CONSPICUOUS — a reasonable person must notice it. Body copy does not qualify.
   Bordered, tinted and bold, so it reads as set apart on the page rather than
   buried. Do not restyle this into ordinary paragraph text. */
.legal-notice {
  border: 2px solid var(--charcoal-1); background: var(--white);
  padding: 18px 20px; margin: 18px 0 0;
}
.legal-notice p { margin: 0; font-weight: 600; color: var(--charcoal-1); }
.legal-notice p + p { margin-top: 12px; }

/* ── Header ───────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14,17,21,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.site-header .container {
  display: flex; align-items: center; gap: 28px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { height: 32px; width: auto; filter: brightness(0) invert(1); }
.brand__sub {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  color: var(--blue-soft); padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.2);
}
.nav { display: flex; gap: 26px; margin-left: auto; align-items: center; }
.nav a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.8); }
.nav a:hover { color: var(--white); }

@media (max-width: 900px) {
  .nav a:not(.btn) { display: none; }
  .site-header .container { gap: 14px; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  padding: 16px 28px; border: 1px solid transparent; cursor: pointer;
  text-align: center;
  /* A flex container drops the whitespace between "REQUEST" and its count,
     rendering "REQUEST0". gap restores the space. */
  gap: 8px;
}
.btn--primary { background: var(--blue); border-color: var(--blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-bright); border-color: var(--blue-bright); color: var(--white); }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,0.4); color: var(--white); }
.btn--ghost:hover { background: rgba(255,255,255,0.08); border-color: var(--white); }
.btn--dark { background: var(--charcoal-1); border-color: var(--charcoal-1); color: var(--white); }
.btn--dark:hover { background: var(--blue); border-color: var(--blue); }
.btn--sm { font-size: 13px; padding: 9px 16px; }
.btn--full { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.request-count { font-family: var(--font-mono); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero .container { padding-top: clamp(72px, 10vw, 132px); padding-bottom: clamp(56px, 7vw, 96px); }
.hero__tag { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.hero__dot { width: 7px; height: 7px; background: var(--blue-bright); display: inline-block; }
.hero h1 {
  font-size: clamp(38px, 6vw, 76px); font-weight: 600; line-height: 1.02;
  margin: 0 0 20px; max-width: 17ch; text-wrap: balance;
}
.hero__specs {
  font-family: var(--font-mono); font-size: clamp(13px, 1.5vw, 15px);
  letter-spacing: 0.1em; color: var(--blue-soft); margin: 0 0 24px;
}
.hero p { font-size: clamp(15px, 1.7vw, 17px); line-height: 1.65;
          color: rgba(255,255,255,0.78); max-width: 56ch; margin: 0 0 36px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Product grids ────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 24px; margin-top: 44px; }
/* Four bundles form a price ladder — 4 across on desktop reads as a
   progression, where 3-across would strand the fourth on its own row. */
.grid--bundles { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
/* Two alignments, because the cards only expand on one of the two paths.

   NO JS: the specs are still a native <details> and open inline, so a card
   grows where it stands. align-items:start keeps that growth to the one card
   the reader opened; under the default stretch every sibling in the row grows
   with it and their buttons get shoved down the page.

   JS: specs open in the <dialog> instead and no card ever grows, so start buys
   nothing and costs alignment — each card sizes to its own blurb (163-213
   characters here) and the bottom edges come out ragged. store.js marks each
   card is-expandable once it has booted, which is the only reliable signal
   that the dialog path is live, so :has() switches the row back to stretch.

   Stretch alone would not line the buttons up; .card__blurb carries flex:1, so
   the slack lands in the blurb and the price, button and specs row below it sit
   on a common baseline across the row. */
.grid--cameras { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.grid--cameras:has(.is-expandable) { align-items: stretch; }
/* Still earns its place on the no-JS path and on a single-card row, where there
   is no sibling to match heights against. */
.card--light .card__blurb { min-height: 8.2em; }

.card { display: flex; flex-direction: column; }
.card--dark { background: var(--card); border: 1px solid rgba(255,255,255,0.12); }
.card--dark:hover { border-color: var(--blue-bright); }
.card--light { background: var(--white); border: 1px solid var(--gray-line); }
.card--light:hover { border-color: var(--blue); }

/* Product stage. White, because every product here is a black camera —
   BirdDog's own renders are shot on white or transparent, and black-on-white is
   how the whole category (B&H, Videoguys) presents them. */
.card__media {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: var(--white); overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; display: block; }

.card--dark .card__media { height: 230px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.card--light .card__media { height: 190px; border-bottom: 1px solid var(--gray-line); }
.card__tier {
  position: absolute; top: 14px; left: 14px; padding: 5px 10px; z-index: 1;
  background: var(--blue); color: var(--white);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
}
.card__body { display: flex; flex-direction: column; gap: 12px; padding: 26px; flex: 1; }
.card__name { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.card--light .card__name { font-size: 19px; }
.card__specs { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--blue); }
.card--dark .card__specs { color: var(--blue-soft); font-size: 12px; letter-spacing: 0.08em; }
.card__blurb { font-size: 14.5px; line-height: 1.6; color: var(--ink-mute); flex: 1; }
.card--dark .card__blurb { color: rgba(255,255,255,0.72); }

/* ── Specifications disclosure ─────────────────────────────────────────────
   A native <details>, so it opens with no JavaScript, is keyboard-operable and
   is readable by crawlers with the page as served. store.js only adds the
   click-anywhere-on-the-card convenience on top. */

.specs { border-top: 1px solid var(--gray-line); margin-top: 4px; }

.specs__toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 2px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.specs__toggle::-webkit-details-marker { display: none; }
.specs__toggle:hover { color: var(--charcoal-1); }

.specs__chev {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  margin-bottom: 3px; transition: transform 0.18s ease;
}
.specs[open] .specs__chev { transform: rotate(-135deg); margin-bottom: -2px; }
.specs[open] .specs__toggle { color: var(--charcoal-1); }

.specs__body { padding: 6px 0 4px; }
.specs__group {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--blue);
  margin: 16px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-soft);
}
.specs__group:first-child { margin-top: 8px; }

.specs__list {
  margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 6px 14px; font-size: 12.5px; line-height: 1.45;
}
.specs__list dt { color: var(--ink-mute); }
.specs__list dd { margin: 0; color: var(--charcoal-1); overflow-wrap: anywhere; }

/* The whole card is clickable to expand, so show that. The button and the
   summary keep their own cursors. */
.card--light.is-expandable { cursor: pointer; }
.card--light.is-expandable .btn,
.card--light.is-expandable .specs__toggle { cursor: pointer; }

/* ── Specifications dialog ────────────────────────────────────────────────
   Shown by store.js instead of the inline accordion when JavaScript is
   available. The accordion styles above stay in use for the no-JS path. */

.sd {
  width: min(720px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0; border: 1px solid var(--gray-line);
  background: var(--white); color: var(--charcoal-1);
  display: flex; flex-direction: column; overflow: hidden;
}
.sd:not([open]) { display: none; }

/* The same scrim value the request drawer uses, so the two overlays read as
   one system rather than two different modals. */
.sd::backdrop { background: rgba(14, 17, 21, 0.55); }

.sd__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 26px 18px; border-bottom: 1px solid var(--gray-line);
  background: var(--white);
}
.sd__eyebrow { color: var(--ink-mute); margin: 0 0 6px; }
.sd__title { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
/* 40x40 hit area. Measured at 19x26 before, which fails WCAG 2.2 SC 2.5.8
   Target Size (Minimum) of 24x24 CSS px — the glyph is small, so the button
   has to carry the target itself. */
.sd__close {
  background: none; border: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--ink-mute);
  width: 40px; height: 40px; margin: -8px -10px -8px 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.sd__close:hover { color: var(--charcoal-1); }

/* The dialog scrolls, not the page behind it.

   `flex: 1 1 auto` with `min-height: 0`, NOT `flex: 1`. `flex: 1` is shorthand
   for `1 1 0%` — a zero flex-basis, which gives this element no intrinsic
   height. In a column flex container whose own height is `auto`, that is
   circular: the body only grows into space the dialog does not yet have, so it
   collapses to a couple of rows with the header and footer squashed around it.
   `auto` basis sizes the body to its content, the dialog then grows until
   max-height caps it, and `min-height: 0` lets it shrink below content size so
   the overflow actually scrolls. */
.sd__body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 4px 26px 20px;
}

/* Header and footer must never be compressed to make room. */
.sd__head, .sd__foot { flex: 0 0 auto; }
.sd__body .specs__group:first-child { margin-top: 12px; }

.sd__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 16px 26px; border-top: 1px solid var(--gray-line); background: var(--gray-paper);
}
.sd__price { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.sd__foot .btn { padding: 13px 22px; font-size: 13px; }

@media (max-width: 560px) {
  .sd { width: 100vw; max-width: 100vw; max-height: 92vh; }
  .sd__head, .sd__body, .sd__foot { padding-left: 18px; padding-right: 18px; }
  .sd__foot { flex-direction: column; align-items: stretch; }
}

/* ── Pricing ──────────────────────────────────────────────────────────────── */

.price { display: flex; flex-direction: column; gap: 6px; padding-top: 14px;
         border-top: 1px solid var(--gray-line); }
.card--dark .price { border-top-color: rgba(255,255,255,0.12); }

.price__row { display: flex; justify-content: space-between; align-items: baseline;
              font-family: var(--font-mono); font-size: 13px; color: var(--ink-mute); }
.card--dark .price__row { color: rgba(255,255,255,0.6); }

/* There is deliberately no struck-through price style here. MSRP equals MAP on
   every item in the catalog, so there is nothing to strike, and inventing a
   higher "was" figure would be a fictitious former price under 16 CFR 233.1.
   A .price__was rule existed and was removed on 2026-09-07 with no markup
   using it — do not add one back. See the Verified catalog in CLAUDE.md. */
.price__now { font-family: var(--font-mono); font-size: 22px; font-weight: 500;
              color: var(--charcoal-1); }
.card--dark .price__now { color: var(--white); }
.price__label { font-family: var(--font-sans); font-weight: 600; font-size: 14px;
                color: var(--charcoal-1); }
.card--dark .price__label { color: var(--white); }
.price__note { font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); }
.card--dark .price__note { color: var(--blue-soft); }

.msrp-note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
             color: var(--ink-mute); margin-top: 22px; }
.band--dark .msrp-note { color: rgba(255,255,255,0.55); }

/* ── Bundle contents ──────────────────────────────────────────────────────
   A native <details>, like the spec sheets: opens with no JavaScript and is in
   the served HTML. Kept as an inline accordion rather than an overlay because
   this is 2–8 short lines, not 40–62 spec rows — it adds roughly 150px, so it
   does not shove the grid around or lose the reader's place the way the spec
   sheets did.

   Component lines link to that product's own card further down the page
   instead of repeating the spec sheet in two places. */

.kit { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 4px; }

.kit__toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 2px; cursor: pointer; list-style: none;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.kit__toggle::-webkit-details-marker { display: none; }
.kit__toggle:hover, .kit[open] .kit__toggle { color: var(--white); }

.kit__chev {
  width: 8px; height: 8px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
  margin-bottom: 3px; transition: transform 0.18s ease;
}
.kit[open] .kit__chev { transform: rotate(-135deg); margin-bottom: -2px; }

.kit__list {
  list-style: none; margin: 12px 0 4px; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,0.78);
}
.kit__list li { padding-left: 14px; position: relative; }
.kit__list li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 4px; height: 4px; background: var(--blue-soft);
}
.kit__list a { color: var(--white); text-decoration: underline; text-underline-offset: 3px;
               text-decoration-color: rgba(255,255,255,0.35); }
.kit__list a:hover { text-decoration-color: var(--blue-soft); color: var(--blue-soft); }

/* The header is sticky, so an anchored card would land under it. */
.card--light[id] { scroll-margin-top: 92px; }

/* ── Editorial columns ────────────────────────────────────────────────────── */

.cols { display: grid; gap: clamp(28px, 4vw, 56px); margin-top: 44px;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.col { display: flex; flex-direction: column; gap: 10px;
       border-top: 2px solid var(--blue); padding-top: 18px; }
.col h3 { font-size: 19px; font-weight: 600; }
.col p { font-size: 14.5px; line-height: 1.65; color: var(--charcoal-2); margin: 0; }

.steps { display: grid; gap: 32px; margin-top: 44px; list-style: none; padding: 0;
         grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.step { display: flex; flex-direction: column; gap: 10px;
        border-top: 1px solid var(--gray-line); padding-top: 16px; }
.step__num { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--blue); }
.step h3 { font-size: 17px; font-weight: 600; }
.step p { font-size: 14px; line-height: 1.6; color: var(--ink-mute); margin: 0; }

/* ── Request form ─────────────────────────────────────────────────────────── */

.quote .container { display: grid; gap: clamp(32px, 5vw, 72px);
                    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.quote h2 { max-width: 16ch; }
.quote__copy p { font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.75);
                 max-width: 48ch; }
.quote__copy a { color: var(--blue-soft); font-weight: 600; }
.quote__copy a:hover { color: var(--white); }

.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.85); }
/* There was no ::placeholder rule, so the colour was whatever the browser
   defaulted to — in Chrome about 3.79:1 on this ground, under 1.4.3. Placeholder
   text is text. 0.60 gives 6.92:1 on --card. */
.field input::placeholder,
.field textarea::placeholder { color: rgba(255,255,255,0.60); opacity: 1; }
.field input, .field select, .field textarea {
  padding: 14px 16px; background: var(--card);
  border: 1px solid rgba(255,255,255,0.38); color: var(--white);
  font-family: var(--font-sans); font-size: 14px;
}
.field textarea { resize: vertical; min-height: 104px; }
.field__error { font-size: 12.5px; color: #F0A79B; }
.form__fine { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,0.55); }
/* The global `a { color: inherit; text-decoration: none }` would render these
   links indistinguishable from the sentence around them, which defeats the
   point of putting the notice here. --blue-soft is 6.57:1 on this ground. */
.form__fine a { color: var(--blue-soft); text-decoration: underline;
                text-underline-offset: 2px; }
.form__fine a:hover { color: var(--white); }
.form__notice { font-size: 13px; line-height: 1.6; color: #F0A79B; margin: 0; }
.form__summary { font-size: 13.5px; line-height: 1.6; color: #F0A79B; }
.form__success { padding: 26px; background: var(--card); border: 1px solid var(--blue);
                 font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.85); }
.form__success h3 { font-size: 19px; margin: 0 0 8px; color: var(--white); }

/* Honeypot — visually gone, never focusable, not announced. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Request drawer ───────────────────────────────────────────────────────── */

.drawer__scrim { position: fixed; inset: 0; background: rgba(14,17,21,0.55); z-index: 199; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--white); z-index: 200; display: flex; flex-direction: column;
  box-shadow: -16px 0 48px rgba(0,0,0,0.3);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between;
                padding: 20px 26px; border-bottom: 1px solid var(--gray-line); }
.drawer__head h2 { font-size: 16px; font-weight: 600; }
/* 40x40, matching .sd__close. At font-size 24px with 4px padding this was about
   21x32 — under the 24x24 minimum of WCAG 2.2 SC 2.5.8. The negative right
   margin keeps the glyph optically where it was against the 26px head padding,
   so the target grows without the button appearing to move. */
.drawer__close { background: none; border: none; font-size: 24px; line-height: 1;
                 cursor: pointer; color: var(--charcoal-1);
                 width: 40px; height: 40px; margin: -8px -10px -8px 0;
                 display: flex; align-items: center; justify-content: center; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 26px;
                display: flex; flex-direction: column; gap: 16px; }
.drawer__empty { font-size: 14px; line-height: 1.6; color: var(--ink-mute); }
.drawer__empty a { color: var(--blue); font-weight: 600; }
.drawer__foot { padding: 20px 26px 26px; border-top: 1px solid var(--gray-line);
                display: flex; flex-direction: column; gap: 14px; }

.line { display: flex; justify-content: space-between; gap: 12px;
        border-bottom: 1px solid var(--gray-soft); padding-bottom: 14px; }
.line__name { font-size: 15px; font-weight: 600; }
.line__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mute); }
.line__right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.line__total { font-family: var(--font-mono); font-size: 14px; }
/* min-height 24 to clear WCAG 2.2 SC 2.5.8. At padding:0 this was about 45x14,
   and it is the only way to remove an item from the request list. */
.line__remove { background: none; border: none; font-family: var(--font-mono);
                font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute);
                cursor: pointer; padding: 6px 0; min-height: 24px; }
.line__remove:hover { color: var(--charcoal-1); }

.drawer__total { display: flex; justify-content: space-between; font-size: 15px; }
.drawer__total strong { font-weight: 600; }
.drawer__total span { font-family: var(--font-mono); }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer { background: var(--charcoal-4); color: var(--white);
               border-top: 1px solid rgba(255,255,255,0.1); }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between;
                          align-items: center; gap: 18px; padding-top: 36px; padding-bottom: 36px; }
.site-footer img { height: 28px; width: auto; filter: brightness(0) invert(1); }
.site-footer__legal { font-size: 13px; color: rgba(255,255,255,0.6); }
.site-footer__legal a { color: rgba(255,255,255,0.8); }
.site-footer__legal a:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}