/* ==========================================================================
   site.css — shared, themeless stylesheet for the COD product page skeleton.

   Every colour and font here resolves through a CSS custom property that the
   page sets in an inline :root block from a themes/themes.json preset. Nothing
   in this file may hard-code a brand colour or a font family.

   Honest persuasion only. There is deliberately no CSS for countdown timers,
   scarcity counters, star ratings or review distributions — see COMPLIANCE.md
   assertion A3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Token contract. Values are placeholders in the skeleton; the page's inline
   :root block overrides all of them. These defaults exist only so the file is
   readable standalone and are never what ships.
   -------------------------------------------------------------------------- */
:root {
  --brand: #0F5C8C;
  --accent: #C2410C;
  --font-h: system-ui, sans-serif;
  --font-b: system-ui, sans-serif;

  --bg: #ffffff;
  --bg-soft: #F2F6FA;
  --panel: #ffffff;
  --panel-2: #E9EFF5;
  --ink: #101826;
  --muted: #525C6B;
  --line: rgba(16, 24, 38, 0.12);
  --input-bg: #ffffff;

  --radius: 16px;
  --btn-radius: 999px;
  --maxw: 1140px;

  --glow-brand: color-mix(in srgb, var(--brand) 35%, transparent);
  --glow-accent: color-mix(in srgb, var(--accent) 40%, transparent);
  --shadow-card: 0 18px 50px -28px rgba(16, 24, 38, 0.28);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-color: color-mix(in srgb, var(--brand) 42%, var(--line)) var(--bg-soft);
}
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: var(--font-b); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(60% 50% at 80% -5%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(45% 40% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
}

::selection {
  background: color-mix(in srgb, var(--brand) 28%, transparent);
  color: var(--ink);
}

/* Decorative grid texture, fading in from the top */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 50% 0%, #000, transparent 72%);
}

/* Desktop: the body glow pinned to the viewport on its own opaque fixed layer under the grid,
   composited on scroll instead of repainted. Phones keep the scrolling body background. */
@media (min-width: 821px) {
  body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: inherit; }
}

h1, h2, h3 { font-family: var(--font-h); line-height: 1.08; margin: 0 0 .5em; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.85rem, 4.6vw, 3.05rem); font-weight: 800; color: var(--ink); }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p { margin: 0 0 1em; }
a { color: var(--ink); text-decoration: none; text-underline-offset: 0.18em; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: 84px 0; position: relative; }
.section--soft { background: linear-gradient(180deg, transparent, var(--bg-soft)); }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 52px; }
.section-head p { color: var(--muted); font-size: 1.08rem; }
.eyebrow {
  display: inline-block; font-family: var(--font-h); font-weight: 700; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}

/* Accessible skip link — destination-requirements policy wants pages that are
   easy to navigate, and the sticky promo bar plus header sit before the H1. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--panel); color: var(--ink); padding: 12px 18px;
  border: 1px solid var(--line); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   Buttons. Fill is --accent → a darker mix with black so white labels stay
   ≥4.5:1 at both stops (see themes/check-contrast.mjs). No brightness hover.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 86%, #000), color-mix(in srgb, var(--accent) 70%, #000));
  color: #fff; font-family: var(--font-h); font-weight: 700; font-size: 1.02rem;
  padding: 16px 30px; border: 0; border-radius: var(--btn-radius); cursor: pointer; line-height: 1.1;
  box-shadow: 0 10px 30px -8px var(--glow-accent), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -8px var(--glow-accent);
  background: color-mix(in srgb, var(--accent) 68%, #000);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.btn--block { display: flex; width: 100%; }
.btn--ghost {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  box-shadow: none;
}
.btn--ghost:hover {
  border-color: color-mix(in srgb, var(--brand) 60%, transparent);
  box-shadow: 0 0 0 1px var(--glow-brand);
  background: var(--panel);
}

/* --------------------------------------------------------------------------
   Chrome: promo bar, header, footer, consent
   -------------------------------------------------------------------------- */
.cod-bar {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 90%, #000), color-mix(in srgb, var(--accent) 70%, #000));
  color: #fff; font-family: var(--font-h); font-weight: 600; letter-spacing: .02em;
  font-size: .9rem; text-align: center; padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--line);
  max-width: none;
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; gap: 12px 20px;
}
.logo { font-family: var(--font-h); font-weight: 800; font-size: 1.3rem; color: var(--ink); display: inline-flex; flex: none; }
.nav {
  display: flex; flex-wrap: nowrap; align-items: center;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; min-width: 0; margin-right: -6px;
}
.nav a { margin-left: 10px; color: var(--muted); font-weight: 600; transition: color .15s; white-space: nowrap; padding: 10px 6px; }
.nav a:first-child { margin-left: 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
/* Inset ring: .nav is a scroll container, so an outside ring would be clipped */
.nav a:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 6px; color: var(--ink); }

.site-footer {
  background: color-mix(in srgb, var(--ink) 92%, #000); max-width: none;
  border-top: 1px solid color-mix(in srgb, var(--bg) 12%, transparent);
  color: color-mix(in srgb, var(--bg) 62%, var(--muted)); font-size: .92rem;
}
.site-footer .wrap { padding: 64px 22px 28px; }
.site-footer a { color: color-mix(in srgb, var(--bg) 82%, var(--muted)); transition: color .15s; }
.site-footer a:hover { color: var(--bg); }
.site-footer a:focus-visible { outline: 2px solid var(--bg); outline-offset: 3px; border-radius: 2px; color: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1.2fr 1.5fr; gap: 44px; padding-bottom: 40px; }
.footer-brand .footer-logo { color: var(--bg); font-family: var(--font-h); font-weight: 800; font-size: 1.3rem; }
.footer-brand p { margin: 18px 0; max-width: 34ch; line-height: 1.6; }
.footer-pay {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); background: color-mix(in srgb, var(--bg) 6%, transparent);
  font-family: var(--font-h); font-weight: 600; font-size: .85rem; color: var(--bg);
}
.footer-pay .ico { width: 18px; height: 18px; color: var(--accent); }
.footer-col h2 {
  color: var(--bg); font-family: var(--font-h); font-weight: 700; font-size: .8rem; line-height: inherit;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 16px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.site-footer address { font-style: normal; line-height: 1.85; }
.footer-legal-name { color: var(--bg); font-family: var(--font-h); font-weight: 700; }
.footer-bottom {
  border-top: 1px solid color-mix(in srgb, var(--bg) 10%, transparent); padding-top: 26px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  color: color-mix(in srgb, var(--bg) 48%, var(--muted)); font-size: .84rem;
}

/* Cookie banner pinned to the bottom of the viewport, clear of the iOS home indicator. */
.consent {
  position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--ink);
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 -12px 40px -24px rgba(0, 0, 0, .45); backdrop-filter: blur(14px);
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 12px 16px;
  align-items: center; justify-content: space-between;
}
/* Class selector beats the UA [hidden] rule that display:flex above overrides */
.consent[hidden] { display: none; }
.consent p { margin: 0; flex: 1 1 280px; max-width: 62ch; font-size: .88rem; color: var(--ink); }
.consent a { color: var(--accent); }
.consent-actions { display: flex; gap: 10px; }
.consent .btn { padding: 12px 20px; font-size: .92rem; min-height: 44px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Side padding is the .wrap 22px gutter on narrow screens and 0 once the viewport is wider than
   --maxw, as the hero always was on desktop. Clip keeps the media glow from widening the page. */
.hero { padding: 56px clamp(0px, (var(--maxw) - 100vw) / 2 + 22px, 22px) 40px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.hero p { font-size: 1.18rem; color: var(--muted); max-width: 30em; }
.hero-media { position: relative; }
.hero-media::before {
  content: ""; position: absolute; inset: -8% -6% -10% -6%; z-index: 0; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow-brand), transparent 72%);
  filter: blur(18px);
}
.hero-media img {
  position: relative; z-index: 1; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-card);
}

/* --------------------------------------------------------------------------
   Image provenance disclosure. Every <img> lives in a <figure> whose
   <figcaption> discloses AI generation or editing, required by the EU, Indian
   and New York rules Merchant Center cites. The caption is present only for
   images declared AI-generated in ai-images.json; for a real photograph the
   whole <figcaption> is deleted, because showing a disclosure on an unedited
   photo is its own misstatement. Enforced both ways by assertion P10.
   -------------------------------------------------------------------------- */
.hero-media figure, .feature-media figure { margin: 0; position: relative; z-index: 1; }
.media-note {
  margin: 10px 0 0; font-family: var(--font-h); font-weight: 600;
  font-size: .78rem; line-height: 1.45; color: var(--muted);
}

.badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  font-family: var(--font-h); font-weight: 600; font-size: .82rem; color: var(--muted); margin-bottom: 22px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px var(--glow-accent); }

.chips { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--panel); font-family: var(--font-h); font-weight: 600; font-size: .88rem;
}
.chip .ico { width: 18px; height: 18px; color: var(--accent); }

.ico { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------------------------
   Offer strip. Replaces the fake-scarcity band a lander of this shape usually
   carries: it restates the honest price and repeats the CTA, nothing more.
   -------------------------------------------------------------------------- */
.offer-strip {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 24%, var(--bg-soft)), var(--bg-soft));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.offer-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 28px 22px; }
.offer-strip .price { margin: 0 0 4px; font-family: var(--font-h); line-height: 1.08; font-size: clamp(1.7rem, 3.4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.offer-strip .sub { color: var(--ink); font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------------
   Feature blocks
   -------------------------------------------------------------------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; margin: 56px 0; }
.feature:nth-child(even) .feature-media { order: 2; }
.feature-media img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.feature-item p { margin: 0; }
.feature-item + .feature-item { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.feature p { max-width: 60ch; color: var(--muted); }

.kicker {
  display: block; font-family: var(--font-h); font-weight: 800; letter-spacing: -0.02em;
  font-size: clamp(1.12rem, 2vw, 1.38rem); line-height: 1.15;
  margin-bottom: 14px; color: var(--ink);
}

/* --------------------------------------------------------------------------
   Panels, lists, specs
   -------------------------------------------------------------------------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.panel { padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel h2, .panel h3 { margin-bottom: 18px; }
.panel h2 { font-size: 1.25rem; font-weight: 700; }

.benefits { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.benefits li { padding-left: 40px; position: relative; color: var(--ink); }
.benefits li::before {
  content: "\2713"; position: absolute; left: 0; top: -1px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 50%; font-size: .8rem; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--brand), color-mix(in srgb, var(--accent) 70%, #000));
  box-shadow: 0 4px 12px -2px var(--glow-brand);
}

.boxlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; }
.boxlist li { display: flex; gap: 11px; align-items: flex-start; }
.boxlist .ico { color: var(--accent); width: 20px; height: 20px; flex: none; margin-top: 3px; }

.specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.spec { padding: 24px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); display: flex; flex-direction: column; gap: 4px; text-align: center; }
.spec b { display: block; font-family: var(--font-h); font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 800; font-variant-numeric: tabular-nums; }
.spec span { color: var(--muted); font-size: .85rem; }

/* --------------------------------------------------------------------------
   Order form. The price breakdown above the submit button is required by
   COMPLIANCE.md A1 (Misrepresentation: billing detail must not be obscured).
   -------------------------------------------------------------------------- */
.order-wide { max-width: 560px; margin: 0 auto; }
.offer { padding: 32px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); }

.order-form { display: grid; gap: 14px; }
.order-form .btn { order: 20; }
.order-form .order-note { order: 10; }
.order-form label { font-family: var(--font-h); font-weight: 700; font-size: 1rem; color: var(--ink); display: grid; gap: 7px; }
.order-form input {
  width: 100%; padding: 15px 16px; border: 1px solid var(--line); border-radius: 12px;
  font-size: 1rem; font-family: var(--font-b); background: var(--input-bg); color: var(--ink);
  caret-color: var(--brand); accent-color: var(--brand);
  transition: border-color .15s, box-shadow .15s;
}
.order-form input:focus,
.order-form input:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--glow-brand);
}
.order-form input:user-invalid {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 16%, transparent);
}
.order-form .field-hint {
  margin: -6px 0 0; font-size: .86rem; line-height: 1.4; color: var(--ink);
}
.order-note { text-align: center; color: var(--ink); font-size: .92rem; margin: 0; }
.order-note a { color: var(--accent); }

.pricing {
  list-style: none; padding: 0; margin: 0 0 20px;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
}
.pricing li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 16px; font-size: .95rem; color: var(--muted); }
.pricing li + li { border-top: 1px solid var(--line); }
.pricing .total { background: var(--panel-2); color: var(--ink); font-family: var(--font-h); font-weight: 800; font-size: 1.12rem; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
/* Padding lives on summary so the whole row is the tap target; max-width caps the answer measure */
.faq details {
  border: 1px solid var(--line); border-radius: 14px; max-width: 46rem; margin: 0 auto 14px;
  background: var(--panel); transition: border-color .2s;
}
.faq details[open] { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.faq summary { font-family: var(--font-h); font-weight: 700; cursor: pointer; list-style: none; position: relative; padding: 18px 50px 18px 22px; border-radius: inherit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 16px; color: var(--accent); font-size: 1.4rem; font-weight: 700; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: -4px 0 0; padding: 0 22px 18px; max-width: calc(60ch + 44px); color: var(--muted); }

/* --------------------------------------------------------------------------
   Legal, contact, thank-you, unavailable: single narrow column
   -------------------------------------------------------------------------- */
.legal { max-width: 820px; }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); overflow-wrap: anywhere; }
.legal h2 { margin-top: 1.7em; font-size: 1.4rem; }
.legal > h2, .legal h3 { margin-top: 1.7em; font-size: 1.2rem; font-weight: 700; }
.legal p, .legal li { max-width: 60ch; color: var(--muted); }
/* :not(.btn) keeps a button placed in a legal column (unavailable page retry CTA) white on its fill */
.legal a:not(.btn) { color: var(--accent); }
.legal .updated { color: var(--muted); font-size: .9rem; margin-bottom: 1.6em; }
.legal .section-head + p { color: var(--ink); font-size: 1.12rem; }

/* Numbered process list, used by the thank-you page */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 18px 0; }
.steps li { position: relative; padding-left: 46px; margin: 16px 0; color: var(--ink); }
.steps li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  font-family: var(--font-h); font-weight: 700; display: flex; align-items: center;
  justify-content: center; font-size: .95rem;
}

/* A run of <br>-separated lines with no icon, so this must be block, not flex */
.callout-note {
  display: block; margin-top: 18px; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); font-size: 1rem; line-height: 1.65; color: var(--ink);
  box-shadow: var(--shadow-card);
}
.callout-note b { display: block; margin-bottom: 8px; color: var(--ink); font-family: var(--font-h); font-size: 1.05rem; }
.callout-note strong { display: block; margin-top: 10px; font-family: var(--font-h); font-size: 1.28rem; font-weight: 800; }

.table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.table th, .table td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.table th { background: var(--panel-2); font-weight: 600; }
.table-scroll { overflow-x: auto; }
code { background: var(--panel-2); padding: 2px 6px; border-radius: 4px; font-size: .9em; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  .hero-grid, .feature, .two-col { grid-template-columns: 1fr; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  .feature:nth-child(even) .feature-media { order: 0; }
  .cod-bar { font-size: .8rem; letter-spacing: 0; line-height: 1.4; padding: 7px 14px; text-wrap: balance; overflow-wrap: anywhere; }
  /* One header row: the nav scrolls sideways, and the fade on its trailing edge shows there is more */
  .site-header .wrap { padding: 7px 16px; gap: 16px; }
  .nav {
    padding-right: 28px; scroll-padding-inline-end: 28px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .section { padding: 60px 0; }
  .hero { padding-block: 36px 28px; }
  .order-wide { padding-inline: 0; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
  /* Order box drops its card chrome on phones so pricing rows and inputs get the width */
  .order-wide { margin-inline: -6px; }
  .offer { padding: 0; background: none; border: 0; box-shadow: none; }
  .pricing li { flex-wrap: wrap; column-gap: 8px; padding: 10px; }
  .pricing li > :last-child { margin-left: auto; }
  .pricing .total { font-size: .9rem; }
  .consent { flex-direction: column; align-items: stretch; }
  .consent p { flex: none; }
  .consent-actions { width: 100%; }
  .consent .btn { flex: 1; }
}

/* Reduced motion: no movement, but colour, border, shadow and focus changes still
   transition so every state change stays perceivable. Scroll reveal and the smooth
   FAQ height live behind (prefers-reduced-motion: no-preference) below, so they are
   simply absent here: content is visible and the FAQ toggles instantly. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .btn:active { transform: none; }
  .faq summary::after { transition: none; }
  .consent:not([hidden]) { animation: consent-fade .2s ease-out both; }
}

/* --------------------------------------------------------------------------
   Motion. Progressive enhancement only: every rule is gated by a feature query
   or a motion preference, and the ungated default is the static, fully visible
   page. Only opacity and transform animate, except the FAQ block-size, which is
   scoped to .faq details. No loops, nothing repeats on its own (COMPLIANCE A3).
   The hero never animates: its H1 and image are the LCP element.
   -------------------------------------------------------------------------- */
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes consent-rise {
  from { transform: translateY(100%); }
  to { transform: none; }
}
@keyframes consent-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Press feedback: a quick, slight squeeze that confirms the tap */
  .btn:active { transform: scale(.97); transition-duration: .1s; }

  /* The banner is fixed, so sliding up from its own final box shifts no layout */
  .consent:not([hidden]) { animation: consent-rise .32s cubic-bezier(0.16, 1, 0.3, 1) both; }

  /* Scroll reveal. The range ends once the block has fully entered (or 200px in,
     for blocks taller than that), so anything already on screen at load sits at
     the final keyframe. Fill is forwards only: a block still below the viewport
     keeps its normal, visible style until its entry starts, so crawlers, print and
     full-page captures never see hidden content. */
  @supports (animation-timeline: view()) {
    .feature, .panel, .spec, .offer, .faq details, .offer-row {
      animation-name: reveal-rise;
      animation-duration: auto;
      animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
      animation-fill-mode: forwards;
      animation-timeline: view();
      animation-range: entry 0% entry min(100%, 200px);
    }
  }

  /* Smooth FAQ open/close. Without ::details-content or interpolate-size the
     toggle stays instant, exactly as before. Closing is quicker than opening. */
  @supports selector(::details-content) and (interpolate-size: allow-keywords) {
    .faq details { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size .22s cubic-bezier(0.16, 1, 0.3, 1), content-visibility .22s allow-discrete;
    }
    .faq details[open]::details-content {
      block-size: auto;
      transition-duration: .32s;
    }
  }
}