/* MicroFret site, shared by every page. Sections: 1 tokens, 2 type, 3 surfaces, 4 header and menu, 5 buttons, 6 pricing pieces,
   7 pages and steps, 8 footer, 9 preferences. Page styles: home.css (home) and flow.css (buy, download, thanks).
   Contrast pairs are tested in test/site-invariants.test.js.
   Fonts: Windows gets Bahnschrift; others get Barlow enlarged 4% (2 to 5% narrower than Bahnschrift) and, while it loads,
   Barlow Fallback (a scaled local Arial) so the swap does not move text. No extra font file. */

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap;
  size-adjust: 104%;
  src: url("/assets/fonts/barlow-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap;
  size-adjust: 104%;
  src: url("/assets/fonts/barlow-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap;
  size-adjust: 104%;
  src: url("/assets/fonts/barlow-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Tajawal"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/tajawal-400-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/assets/fonts/tajawal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/tajawal-500-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/assets/fonts/tajawal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/tajawal-700-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Tajawal"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("/assets/fonts/tajawal-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


@font-face { font-family: "Barlow Fallback"; font-weight: 400; src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 99.5%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 95%; ascent-override: 100%; descent-override: 20%; line-gap-override: 0%; }

/* ==== 1. Tokens ================================================================
   Names from the first version are kept as they were (--wood-*, --cream, --tan, --muted, --brass*, --ok,
   --bad, --radius, --gutter, --max, --font, --font-mono). The rest is new (DESIGN.md). */

/* ==== 1. Tokens ================================================================
   Names from the first version are kept as they were (--wood-*, --cream, --tan, --muted, --brass*, --ok,
   --bad, --radius, --gutter, --max, --font, --font-mono). The rest is new (DESIGN.md). */
:root {
  color-scheme: dark;

  /* colour: wood is the page, plate is raised wood, inset is the plug-in's green glass, brass is the one warm light */
  --wood-0: #120b06;
  --wood-1: #1a110b;
  --wood-2: #25170d;
  --wood-3: #301e11;
  --wood-4: #4a321a;
  --cream: #efe2cf;
  --tan: #c9ae8e;
  --muted: #9a8068;
  --brass: #d2a96a;
  --brass-hi: #e6c58f;
  --brass-lo: #a9803f;
  --display-bg: #0a150e;
  --display-edge: #070f0a;
  --signal: #93c49c;
  --signal-dim: #5f8f6c;
  --ok: #8fd3a0;
  --bad: #f2a08f;
  --bad-ink: #2b0d07;
  --line-hi: rgba(255, 220, 170, 0.1);
  --line-lo: rgba(0, 0, 0, 0.55);

  /* shape */
  --radius: 14px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 9999px;

  /* space: 4px scale, then layout measures */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 72px;
  --gutter: 16px;
  --gutter-wide: 24px;
  --max: 1120px;
  --prose-max: 40rem;
  --form-max: 520px;
  --header-h: 57px; /* the real height is written by site-core.js; this is the fallback */
  --sticky-bar-h: 0px; /* the mobile CTA bar sets it while it is showing (scroll-padding-bottom) */

  /* motion: every transition uses these; reduced motion sets them to nothing (section 12) */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 400ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* type */
  --font: Bahnschrift, "Barlow", "Barlow Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: Consolas, "SF Mono", Menlo, monospace;
  --fs-display: clamp(2.1rem, 7vw, 3.6rem); /* DESIGN.md says clamp(2.25rem, 6.2vw, 4rem); kept at the current size so the hero looks the same */
  --fs-title: clamp(1.6rem, 4vw, 2.4rem);
  --fs-heading: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.1rem, 2.4vw, 1.2rem); /* DESIGN.md: up to 1.3rem; capped at today's 1.2rem */
  --fs-label: 0.8125rem;
  --fs-numeric: clamp(2.75rem, 8vw, 3.75rem);
  --fs-mono: 0.92rem;
}
[dir="rtl"] { --font: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 8px); scroll-padding-bottom: var(--sticky-bar-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cream);
  background-color: var(--wood-1);
  background-image:
    radial-gradient(1200px 500px at 50% -120px, rgba(210, 169, 106, 0.16), transparent 70%),
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0) 0 5px, rgba(0, 0, 0, 0.07) 5px 6px, rgba(255, 220, 170, 0.015) 6px 11px);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, video { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: var(--brass-hi); text-underline-offset: 3px; }
a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--brass-hi); outline-offset: 3px; border-radius: 4px; }
.inset :focus-visible, .player :focus-visible, .key:focus-visible { outline-color: var(--cream); } /* brass-hi is too close to the green glass */
::selection { background: var(--brass); color: var(--wood-1); }

/* ==== 2. Type roles =============================================================
   display (the one hero H1), title (H2), heading (H3, cards), body, lead, label (the plug-in's small
   tracked caps), numeric (prices, tabular), mono (keys, paths). Letter-spacing and uppercase are Latin only. */
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; letter-spacing: 0.01em; }
h1, .t-display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: 0.005em; }
.page h1 { font-size: var(--fs-title); line-height: 1.15; }
h2, .t-title { font-size: var(--fs-title); }
h3, .t-heading { font-size: var(--fs-heading); font-weight: 600; line-height: 1.25; }
.t-body { font-size: var(--fs-body); font-weight: 400; line-height: 1.6; }
.lead, .t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--tan); max-width: 40em; }
.eyebrow, .t-label { color: var(--brass); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: var(--fs-label); margin-bottom: 8px; }
.t-numeric { font-size: var(--fs-numeric); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.t-mono { font-family: var(--font-mono); font-size: var(--fs-mono); direction: ltr; unicode-bidi: isolate; }

/* Arabic ramp: larger, looser (the English line-height clips the marks of a two-line heading); no tracking, no capitals */
[dir="rtl"] body { font-size: 1.125rem; line-height: 1.8; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .t-display, [dir="rtl"] .t-title, [dir="rtl"] .t-heading { line-height: 1.35; letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .t-label { font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--brass); color: var(--wood-1); padding: 10px 16px; border-radius: var(--r-sm); font-weight: 700; z-index: 100; text-decoration: none; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ==== 3. Surfaces: plate, inset, chip, divider ==================================
   Plate = raised wood with an engraved edge (light on top, dark below), not a bordered box.
   Inset = the plug-in's green glass: only for things that are alive (the demo player, the licence key).
   The older class names are listed with the new ones so every page is migrated without touching its HTML. */
.plate, .card, .steps li, .features li, .faq details, .specs div, .proof li {
  background: var(--wood-2);
  border: 1px solid transparent; /* invisible, but a real edge in forced-colors mode */
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 var(--line-hi), inset 0 -1px 0 var(--line-lo), 0 1px 0 var(--line-lo);
}
.inset, .player, .key {
  background: var(--display-bg);
  border-radius: var(--r-md);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.65), inset 0 0 0 1px var(--display-edge), 0 1px 0 var(--line-hi);
}
.chip {
  display: inline-flex; align-items: center; min-height: 28px; padding: 2px 14px;
  background: var(--wood-1); border: 1px solid var(--brass); border-radius: var(--r-full);
  color: var(--brass-hi); font-weight: 600; font-size: 0.9rem; line-height: 1.2;
}
.chip-quiet { border-color: var(--muted); color: var(--tan); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* engraved line with a brass tick: replaces the plain borders around bands */
.divider { display: block; position: relative; height: 2px; margin: 0; border: 0; background: linear-gradient(var(--line-lo) 0 1px, var(--line-hi) 1px 2px); }
.divider::after, .band::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: var(--gutter); width: 20px; height: 3px; border-radius: 2px; background: var(--brass); }
.band { position: relative; background: rgba(18, 11, 6, 0.55); box-shadow: inset 0 -1px 0 var(--line-hi), inset 0 -2px 0 var(--line-lo); }
.band::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 2px; background: linear-gradient(var(--line-lo) 0 1px, var(--line-hi) 1px 2px); }
.band::after { inset-inline-start: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); } /* the tick sits above the container's start edge */

/* ==== 4. Header and menu ========================================================
   One 56px row: brand, language pill, one call to action. Under 900px the page links are a native <details> menu
   below the header (it scrolls away; the header is what stays). From 900px the same links sit in the row. */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(18, 11, 6, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--wood-4); }
.bar { display: flex; align-items: center; gap: 8px 12px; min-height: 56px; padding-block: 6px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--cream); text-decoration: none; font-weight: 600; letter-spacing: 0.32em; font-size: 1.05rem; margin-inline-end: auto; }
[dir="rtl"] .brand { letter-spacing: 0.2em; }
.brand svg { width: 26px; height: 26px; flex: none; }
.nav { display: none; }
.nav a { color: var(--tan); text-decoration: none; padding: 6px 2px; white-space: nowrap; font-weight: 500; transition: color var(--dur-fast) var(--ease); }
.nav a:hover { color: var(--cream); }
.lang { display: inline-flex; align-items: center; min-height: 44px; color: var(--tan); text-decoration: none; border: 1px solid var(--muted); border-radius: var(--r-full); padding: 4px 12px; font-size: 0.95rem; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.lang:hover { color: var(--cream); border-color: var(--tan); }
@media (max-width: 479px) {
  .brand { letter-spacing: 0.08em; font-size: 0.9rem; gap: 8px; }
  [dir="rtl"] .brand { letter-spacing: 0.06em; }
  .lang { padding-inline: 10px; }
}
@media (max-width: 349px) { .brand span { display: none; } }
@media (min-width: 900px) {
  .bar { gap: 8px 16px; }
  .brand { margin-inline-end: 0; }
  .nav { display: flex; gap: 4px 18px; margin-inline: auto 8px; }
  .menu-bar { display: none; }
}
.menu-bar { border-bottom: 1px solid var(--line-lo); box-shadow: 0 1px 0 var(--line-hi); }
.menu summary { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-block: 6px; padding: 6px 16px; border: 1px solid var(--muted); border-radius: var(--r-full); color: var(--tan); cursor: pointer; list-style: none; font-weight: 500; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 8px; height: 8px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur) var(--ease); }
.menu[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.menu summary:hover { color: var(--cream); border-color: var(--tan); }
.menu nav { display: grid; margin: 0 0 12px; padding: 6px; background: var(--wood-2); border-radius: var(--r-md); box-shadow: inset 0 1px 0 var(--line-hi), inset 0 -1px 0 var(--line-lo); }
.menu nav a { display: flex; align-items: center; min-height: 44px; padding: 6px 14px; color: var(--cream); text-decoration: none; border-radius: var(--r-sm); }
.menu nav a:hover { background: rgba(239, 226, 207, 0.08); }
.menu nav a.menu-sep { margin-top: 4px; border-top: 1px solid var(--line-hi); }
.menu nav a[aria-current="page"], .foot a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--brass); }

/* ==== 5. Buttons ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 24px;
  border-radius: var(--r-full); border: 1px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; text-align: center;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn-primary { background: linear-gradient(180deg, var(--brass-hi), var(--brass)); color: var(--wood-1); box-shadow: 0 2px 0 var(--brass-lo), 0 8px 24px rgba(0, 0, 0, 0.35); }
.btn-primary:hover { color: var(--wood-1); background: linear-gradient(180deg, #f1d4a6, var(--brass-hi)); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 0 0 var(--brass-lo), 0 4px 12px rgba(0, 0, 0, 0.35); } /* pressed: the underside is gone, the button sits 1px lower */
.btn-ghost, .btn-secondary { background: transparent; color: var(--cream); border-color: var(--tan); }
.btn-ghost:hover, .btn-secondary:hover { background: rgba(239, 226, 207, 0.08); color: var(--cream); }
.btn-ghost:active, .btn-secondary:active { background: rgba(239, 226, 207, 0.14); transform: translateY(1px); }
.btn-small { min-height: 40px; padding: 6px 14px; font-size: 0.95rem; }
.btn-link { display: inline-flex; gap: 0.3em; align-items: center; min-height: 44px; padding: 6px 10px; font-weight: 600; color: var(--brass-hi); }
/* disabled: dimmed AND explained. Put the reason in a .btn-reason line next to the button; never leave a silent grey button. */
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; }
.btn-reason { display: block; margin: 8px 0 0; color: var(--tan); font-size: 0.93rem; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block: 24px 8px; }

/* ==== 6. Pricing pieces shared by the home page and the buy page ================== */
.price-card {
  background: radial-gradient(120% 60% at 50% 0, rgba(210, 169, 106, 0.1), transparent 70%), linear-gradient(180deg, var(--wood-3), var(--wood-2));
  border: 2px solid var(--brass); border-radius: var(--r-xl); padding: 28px 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
}
.price-card .btn { width: 100%; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.price { font-size: var(--fs-numeric); font-weight: 700; line-height: 1; color: var(--cream); font-variant-numeric: tabular-nums lining-nums; margin: 0; }
.price .cur { font-size: 0.4em; font-weight: 600; color: var(--tan); letter-spacing: 0.04em; }
.price-was { margin: 8px 0 0; }
.price-was s { color: var(--tan); font-size: 1.25rem; text-decoration-thickness: 2px; }
.price-sub { margin: 8px 0 0; color: var(--tan); font-size: 1rem; }
.ticks { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.ticks li { padding-inline-start: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.45em; width: 14px; height: 8px; border-inline-start: 3px solid var(--brass); border-bottom: 3px solid var(--brass); transform: rotate(-45deg); }
[dir="rtl"] .ticks li::before { transform: rotate(45deg); }
.pay-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.pay-label { margin: 0; color: var(--tan); font-size: 0.93rem; }
/* Prices: same width before and after the server answers (tabular figures), and hidden, not removed, until it does. */
[data-price-usd], [data-price-iqd] { font-variant-numeric: tabular-nums lining-nums; }
.js [data-price-pending] { visibility: hidden; }
/* Who is looking decides what is shown: dollars and cards for everybody, dinar and wallets only for Iraq (html[data-iq], set from /api/config) */
html:not([data-iq]) [data-iq-only], html[data-iq] [data-not-iq] { display: none; }
.fine { color: var(--tan); font-size: 0.93rem; }

/* ==== 7. Pages, prose, notices, steps ============================================= */
.page { padding-block: 40px 64px; }
.narrow { max-width: 760px; }
.prose h2 { margin-top: 1.6em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.2em; }
.prose ul { padding-inline-start: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.card { padding: 22px; }
.plate.refunds { padding: 4px 22px 6px; margin-block: 20px; }
.plate.refunds:target { border-color: var(--brass); }
/* in-page notices: a plate with a coloured edge on the start side (brass = info, bad = problem) */
.alert { margin-bottom: 1em; border-radius: var(--r-md); padding: 14px 16px; background: var(--wood-3); border: 1px solid transparent; border-inline-start: 4px solid var(--brass); box-shadow: inset 0 1px 0 var(--line-hi), inset 0 -1px 0 var(--line-lo); }
.alert.warn { border-inline-start-color: var(--bad); }
.status { min-height: 1.4em; color: var(--tan); font-size: 0.95rem; margin: 10px 0 0; }
.install { padding-inline-start: 1.3em; }
.install li { margin-bottom: 0.6em; }
.steps { display: grid; gap: 16px; padding: 0; margin: 0; list-style: none; counter-reset: step; }
@media (min-width: 760px) { .steps:not(.steps-list) { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; padding: 24px 20px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--brass); color: var(--brass-hi); font-weight: 700; margin-bottom: 12px; }
.steps h3 { margin-bottom: 6px; }
.steps p { margin: 0; color: var(--tan); }
.steps p + p { margin-top: 10px; }
.eula { white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; background: var(--wood-0); border: 1px solid var(--wood-4); border-radius: var(--r-md); padding: 18px; direction: ltr; text-align: left; overflow-wrap: anywhere; }
.copy-status { margin-inline-start: 10px; color: var(--ok); font-size: 0.93rem; }

/* ==== 8. Footer, banner, print ==================================================== */
.site-footer { border-top: 1px solid var(--wood-4); background: var(--wood-0); padding-block: 32px; color: var(--tan); font-size: 0.96rem; }
.foot { display: grid; gap: 16px; }
@media (min-width: 760px) { .foot { grid-template-columns: 1fr auto; align-items: center; } }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { display: inline-flex; align-items: center; min-height: 28px; color: var(--tan); }
.foot a:hover { color: var(--cream); }
.foot a[aria-current="page"] { color: var(--cream); }
.foot p { margin: 0; }
.test-banner { background: var(--bad); color: var(--bad-ink); font-weight: 700; text-align: center; padding: 8px var(--gutter); }
@media print { .site-header, .menu-bar, .site-footer, .player, .sticky-bar { display: none; } body { background: #fff; color: #000; } }

/* ==== 9. Preferences ============================================================== */
/* Touch: every control is at least 44px tall. With a mouse the minimum is 24px plus spacing. */
@media (pointer: coarse) {
  .nav a, .foot a, .btn-small { display: inline-flex; align-items: center; min-height: 44px; }
  .check label { padding-block: 8px; }
  .foot nav { gap: 0 20px; }
}

/* Reduced motion: nothing moves, but state changes still happen (the tokens go to nothing instead of
   a blanket "animation: none", so the waiting state keeps its text and its static loader). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.01ms; --dur: 0.01ms; --dur-slow: 0.01ms; }
  html { scroll-behavior: auto; }
  .btn:active, .play:active, .sticky-bar { transform: none; }
  .spinner i { animation: none; opacity: 0.9; }
}

/* More contrast: lift the faint wood edges to the muted tone and drop the grain. */
@media (prefers-contrast: more) {
  :root { --wood-4: #9a8068; --line-hi: rgba(255, 220, 170, 0.35); --line-lo: rgba(0, 0, 0, 0.9); }
  body { background-image: none; }
  .plate, .card, .steps li, .features li, .faq details, .specs div, .proof li, .alert { border-color: var(--muted); }
  .ab button small, .specs dt { color: var(--tan); }
}

/* Forced colours (Windows High Contrast): system colours, every edge kept, selection shown by outline too. */
@media (forced-colors: active) {
  .btn, .play, .ab button, .lang, .chip, .menu summary { border: 2px solid ButtonText; }
  .btn-primary { background: ButtonFace; color: ButtonText; box-shadow: none; }
  .btn-primary:hover, .btn-ghost:hover { background: Highlight; color: HighlightText; }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: 1; color: GrayText; border-color: GrayText; }
  .ab button[aria-pressed="true"] { outline: 3px solid Highlight; outline-offset: 2px; }
  .plate, .card, .steps li, .features li, .faq details, .specs div, .proof li, .alert, .inset, .player, .key, .price-card, .menu nav { border: 1px solid CanvasText; }
  .band { border-block: 1px solid CanvasText; }
  .band::before, .divider { background: CanvasText; }
  :focus-visible { outline: 3px solid Highlight; }
  .ticks li::before { border-color: CanvasText; }
  .test-banner { border: 2px solid CanvasText; }
}