/* commerce/05-material-fieldbook/skin.css — P05 Material Fieldbook persona skin (component SK-A).
   Hand-authored by SK-A-P05-skin-builder. Overrides commerce/base/flow.css (loaded first).
   Sources: samples/05-material-fieldbook/styles.css tokens (:root lines 1–19), contents rail (161–197),
   main spine (199–203), specimen plates / plate notes (555–706), buttons (303–345).
   Structural flags on <body>: data-skin-catalog="plates" data-skin-breakdown="notes"
   data-skin-scheme="light" data-skin-density="regular" data-skin-nav="none".
   Light-only persona: the base dark block is overridden (color-scheme: light).
   Rules kept: 16 px minimum on all visible text, 44 px targets, 3 px focus, no images/fonts/URLs,
   no transition > 100 ms, none under reduced motion, table stacks ≤ 767 px, no overflow at 320–1920. */

:root, :root[data-skin-scheme] {
  color-scheme: light;
  --paper: #f4efe3;
  --paper-deep: #e8dfcd;
  --paper-light: #fffdf6;
  --ink: #17271f;
  --ink-soft: #3f5047;
  --green: #1c4a3a;
  --green-dark: #0d2d23;
  --clay: #9f3f27;
  --clay-dark: #722914;
  --mineral: #6d7961;
  --rule: #a99f8b;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;

  /* base tokens re-pointed (light in every scheme — the persona is light-only) */
  --fg: var(--ink);
  --bg: var(--paper);
  --muted: var(--ink-soft);          /* 8.9:1 on paper */
  --line: #6f665a;                   /* ≥3:1 non-text on paper */
  --line-soft: var(--rule);
  --surface: var(--paper-light);
  --accent: var(--green-dark);       /* 12.9:1 on paper */
  --accent-fg: #fffdf6;
  --link: var(--green-dark);
  --notice-bg: var(--green-dark);
  --notice-fg: #fffdf6;
  --notice-line: var(--clay);
  --error: #8a1d10;                  /* 7.9:1 on paper */
  --error-bg: #fbeee9;
  --ok: var(--green);
  --focus: #ffbf47;
  --zebra: #f8f3e8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fg: var(--ink);
    --bg: var(--paper);
    --muted: var(--ink-soft);
    --line: #6f665a;
    --line-soft: var(--rule);
    --surface: var(--paper-light);
    --accent: var(--green-dark);
    --accent-fg: #fffdf6;
    --link: var(--green-dark);
    --notice-bg: var(--green-dark);
    --notice-fg: #fffdf6;
    --notice-line: var(--clay);
    --error: #8a1d10;
    --error-bg: #fbeee9;
    --ok: var(--green);
    --focus: #ffbf47;
    --zebra: #f8f3e8;
  }
}

/* ---------- material: cream fibrous paper (gradients only on the body ground, never behind long text —
   main, header, footer surfaces are painted opaque above it) ---------- */
body[data-skin="05-material-fieldbook"] {
  font-family: var(--sans);
  line-height: 1.62;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(28deg, transparent 0 41px, rgb(23 39 31 / 4%) 41px 42px),
    repeating-linear-gradient(-16deg, transparent 0 67px, rgb(159 63 39 / 5%) 67px 68px),
    linear-gradient(180deg, var(--paper-light), var(--paper) 22rem);
  overflow-x: hidden;
}
.site-header, .flow-nav, .flow-main, .site-footer { background: transparent; }
.flow-main, .site-footer, .flow-nav, .site-header .masthead, .site-header .nojs { background: var(--paper); }

/* ---------- focus (concept page: amber outline + ink ring, ≥3:1 on paper) ---------- */
:focus-visible, [tabindex="-1"]:focus, :focus {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--green-dark);
}
:focus:not(:focus-visible) { outline: none; box-shadow: none; }
main:focus { outline: none; box-shadow: none; }

/* ---------- skip link ---------- */
.skip-link { background: var(--paper-light); color: var(--green-dark); border: 2px solid var(--green-dark); border-radius: 0; font-weight: 800; }

/* ---------- banner: green field-notice band, first, full-bleed, ≥ 4.5:1 ---------- */
.demo-notice {
  background: var(--green-dark);
  color: #fffdf6;
  border-block: 0;
  border-bottom: 3px solid var(--clay);
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: 0.012em;
  padding: 0.8rem max(1rem, calc((100% - 46rem) / 2));
  max-width: none; /* SK-A-fix-1: p max-width:72ch (line ~193) and 100vw-based padding cramped the text box at ≥1440 */
}
.nojs { padding-block: 0.5rem; }
.nojs-note { font-weight: 700; }

/* ---------- masthead: brand lockup from the concept page ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .masthead.persona-chrome { background: var(--paper-light); padding-block: 0.85rem; }
.brand-lockup {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.brand-lockup > div { display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; min-width: 0; }
.brand-lockup strong { font-family: var(--serif); font-size: 1.65rem; line-height: 1; font-weight: 700; }
.brand-lockup div span { color: var(--ink-soft); font-size: 1rem; }
.brand-mark {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: 1px solid var(--green);
  background: var(--green);
  color: #ffffff;
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1;
  font-weight: 700;
}

/* ---------- flow nav as the fieldbook contents rail ---------- */
.flow-nav { border-bottom: 1px solid var(--rule); background: var(--paper-light); }
.flow-nav-list {
  border-bottom: 0;
  margin: 0;
  gap: 0 1.25rem;
  padding-block: 0.15rem;
}
.flow-nav-list a, .flow-nav-current {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  padding-inline: 0.15rem;
  gap: 0.45rem;
}
.flow-nav-list a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.1em; color: var(--green-dark); }
.flow-nav-list a::before, .flow-nav-current::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--clay-dark);
  background: var(--paper-light);
  flex: none;
}
.flow-nav-current::before { background: var(--clay-dark); }
.flow-nav-current { color: var(--clay-dark); }

/* ---------- main: fieldbook spine rule ---------- */
.flow-main {
  border-left: 4px solid var(--clay);
  padding-left: clamp(1rem, 3vw, 2.25rem);
  padding-bottom: 1.5rem;
}
@media (max-width: 480px) { .flow-main { border-left-width: 3px; padding-left: 0.85rem; padding-right: 0.85rem; } }

/* ---------- type: serif display, ruled headings ---------- */
h1, h2, h3, .product-title, .product-name, .email-heading, .payment-form-heading {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
h1.page-heading {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin: 1.25rem 0 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
  max-width: 24ch;
}
h2 { font-size: 1.55rem; margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); }
h3 { font-size: 1.25rem; }
p, dl, ul, ol { max-width: 72ch; }
a { color: var(--green-dark); text-decoration-thickness: 0.1em; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 0.16em; }
.marker-illustrative { color: var(--clay-dark); font-style: italic; font-family: var(--serif); }
.pricing-basis, .lead-time-note, .catalog-assumption, .field-hint, .quote-intro,
.email-preview-intro, .catalog-filter-status, .flow-loading { color: var(--ink-soft); }
.quote-intro { font-family: var(--serif); font-size: 1.125rem; }

/* marginalia notes: posture, expiry, disclaimers as ruled clay-margin notes */
[data-content-id="commerce.posture-note"], .quote-expired-note, .flow-expired,
[data-content-id="confirmation.disclaimer"] {
  border-left: 3px solid var(--clay);
  border-radius: 0;
  background: var(--paper-light);
  padding: 0.75rem 1rem;
}
.flow-precondition, .flow-load-error {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--clay);
  border-radius: 0;
  background: var(--paper-light);
}
.demo-status:not(:empty) { border-left: 3px solid var(--green-dark); background: var(--paper-light); border-radius: 0; }

/* ---------- controls: square fieldbook buttons ---------- */
button, .cta-primary, .cta-secondary, .filter-button, .clear-demo, a.cta-primary, a.cta-secondary {
  border-radius: 0;
  border: 2px solid var(--green-dark);
  background: transparent;
  color: var(--green-dark);
  font-weight: 800;
  padding: 0.6rem 1rem;
  line-height: 1.25;
  transition: background-color 80ms linear, color 80ms linear;
}
button:hover, .cta-secondary:hover, .filter-button:hover, .clear-demo:hover { background: var(--paper-deep); }
.cta-primary, button.cta-primary, a.cta-primary, [type="submit"] {
  background: var(--green-dark);
  color: #fffdf6;
  border-color: var(--green-dark);
}
.cta-primary:hover, [type="submit"]:hover { background: var(--green); filter: none; }
.filter-button[aria-pressed="true"] { background: var(--green-dark); color: #fffdf6; }
.filter-button { font-weight: 700; }
input, select, textarea {
  border-radius: 0;
  border: 1px solid var(--line);
  border-bottom: 2px solid var(--green-dark);
  background: var(--paper-light);
  color: var(--ink);
}
input:hover, select:hover { border-color: var(--ink-soft); border-bottom-color: var(--green-dark); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); border-bottom-color: var(--error); }

/* ---------- forms as fieldbook entries (ruled rows, uppercase serif-kicker labels) ---------- */
form { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.field { margin: 0; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.field label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.field-hint { margin: 0.2rem 0 0.45rem; }
.field-error { color: var(--error); }
.form-required-note, [data-content-id="form.all-required"] { font-weight: 700; color: var(--ink-soft); }
.form-errors { border: 1px solid var(--error); border-left: 4px solid var(--error); border-radius: 0; background: var(--error-bg); }
.form-errors-heading { font-family: var(--serif); font-size: 1.25rem; }
form [type="submit"], form .cta-primary { margin-top: 1rem; }
form .field:last-of-type { border-bottom: 0; }

/* ---------- catalog filter: ruled note row ---------- */
.catalog-filter { padding: 0.75rem 0; border-block: 1px solid var(--rule); gap: 0.5rem; }
.catalog-filter-label {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clay-dark);
}
.catalog-assumption { font-family: var(--serif); font-size: 1.0625rem; }
.product-list-heading { margin-top: 2rem; }

/* ---------- catalog as specimen plates + notes (data-skin-catalog="plates") ----------
   Each product is one plate: a CSS-only abstract study (::before, illustrative, empty content, never
   announced) beside the ruled notes; the study alternates sides on desktop and stacks above on mobile.
   Studies vary by position; none is keyed to price, category or the product name. ---------- */
[data-skin-catalog="plates"] .product-list {
  display: block;
  margin: 0;
  border-top: 1px solid var(--rule);
  max-width: none;
}
[data-skin-catalog="plates"] .product-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto auto 1fr;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  row-gap: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem) 0 clamp(1.25rem, 3vw, 2.25rem) 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  max-width: none;
}
/* the study (illustrative) */
[data-skin-catalog="plates"] .product-card::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 5;
  align-self: stretch;
  min-height: 12rem;
  border: 1px solid var(--green-dark);
  outline: 1px solid var(--rule);
  outline-offset: 5px;
  background:
    repeating-linear-gradient(72deg, transparent 0 12px, rgb(23 39 31 / 8%) 13px 14px),
    linear-gradient(140deg, #e3c7a8, #b96c45 47%, #8f9e79);
}
/* plate letter (decorative, no digits — the persona's plate mark) */
[data-skin-catalog="plates"] .product-list { counter-reset: fieldplate; }
[data-skin-catalog="plates"] .product-card::after {
  counter-increment: fieldplate;
  content: counter(fieldplate, upper-alpha);
  position: absolute;
  top: clamp(1.25rem, 3vw, 2.25rem);
  right: 0;
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  border: 1px solid var(--green-dark);
  background: var(--paper-light);
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ink);
  pointer-events: none;
}
[data-skin-catalog="plates"] .product-card > * { grid-column: 2; min-width: 0; }
[data-skin-catalog="plates"] .product-card > .product-name { padding-right: 3.25rem; }
/* alternate the study side */
[data-skin-catalog="plates"] .product-card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr); }
[data-skin-catalog="plates"] .product-card:nth-child(even)::before { grid-column: 2; }
[data-skin-catalog="plates"] .product-card:nth-child(even) > * { grid-column: 1; }
[data-skin-catalog="plates"] .product-card:nth-child(even)::after { right: auto; left: 0; }
[data-skin-catalog="plates"] .product-card:nth-child(even) > .product-name { padding-right: 0; padding-left: 3.25rem; }
/* three studies, cycling by position (form / evidence / movement — concept-page geometry) */
[data-skin-catalog="plates"] .product-card:nth-child(3n+2)::before {
  background:
    linear-gradient(90deg, transparent 10%, rgb(23 39 31 / 12%) 10.2% 10.7%, transparent 10.9%),
    repeating-linear-gradient(#e8e1cd 0 33px, #9ba693 34px 35px);
}
[data-skin-catalog="plates"] .product-card:nth-child(3n)::before {
  background:
    radial-gradient(circle at 18% 22%, #fbf0d9 0 1.6rem, transparent 1.7rem),
    radial-gradient(circle at 72% 38%, #fbf0d9 0 1.6rem, transparent 1.7rem),
    radial-gradient(circle at 39% 78%, #fbf0d9 0 1.6rem, transparent 1.7rem),
    linear-gradient(150deg, #788972, #294d3e);
}
[data-skin-catalog="plates"] .product-card:nth-child(4n+1)::before {
  background:
    repeating-linear-gradient(-30deg, transparent 0 18px, rgb(23 39 31 / 10%) 18px 19px),
    radial-gradient(circle at 60% 40%, #fbf0d9 0 2.4rem, transparent 2.5rem),
    linear-gradient(160deg, #d9c9a6, #a25a3b 55%, #6d7961);
}
/* the notes */
.product-card .product-name { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 500; line-height: 1.2; margin: 0 0 0.35rem; }
.product-card .product-name a { color: var(--green-dark); text-decoration-thickness: 0.08em; padding-block: 0.25rem; min-height: 44px; display: inline-block; }
.product-card .product-spec { margin: 0 0 0.75rem; color: var(--ink-soft); }
.product-card .product-meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule);
}
.product-card .product-meta dt, .product-card .product-meta dd {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.product-card .product-meta dt {
  color: var(--clay-dark);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-right: 1rem;
}
.product-card .product-from-price { margin: 0.75rem 0 0; font-family: var(--serif); font-size: 1.125rem; font-weight: 500; }
.product-card .product-from-price-missing { color: var(--ink-soft); font-family: var(--sans); font-size: 1rem; }
@media (max-width: 767px) {
  [data-skin-catalog="plates"] .product-card,
  [data-skin-catalog="plates"] .product-card:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0; }
  [data-skin-catalog="plates"] .product-card::before,
  [data-skin-catalog="plates"] .product-card:nth-child(even)::before { grid-column: 1; grid-row: 1; min-height: 8rem; margin-bottom: 1.25rem; outline-offset: 4px; }
  [data-skin-catalog="plates"] .product-card > *,
  [data-skin-catalog="plates"] .product-card:nth-child(even) > * { grid-column: 1; }
  [data-skin-catalog="plates"] .product-card::after,
  [data-skin-catalog="plates"] .product-card:nth-child(even)::after { right: 0.5rem; left: auto; top: calc(clamp(1.25rem, 3vw, 2.25rem) + 0.5rem); }
  [data-skin-catalog="plates"] .product-card > .product-name,
  [data-skin-catalog="plates"] .product-card:nth-child(even) > .product-name { padding: 0; }
  .product-card .product-meta { grid-template-columns: 1fr; }
  .product-card .product-meta dt { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- product page as a plate spread: spec sheet + provenance as ruled notes ---------- */
.product-title { font-size: clamp(1.6rem, 3.2vw, 2.25rem); margin: 1.5rem 0 0.75rem; border-top: 0; padding-top: 0; }
.product-spec-sheet, .provenance, .order-summary, .margin-panel-values {
  border: 0;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding: 0;
  gap: 0;
  background: transparent;
}
.product-spec-sheet dt, .provenance dt, .order-summary dt, .margin-panel-values dt,
.product-spec-sheet dd, .provenance dd, .order-summary dd, .margin-panel-values dd {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  margin: 0;
}
.product-spec-sheet dt, .provenance dt, .order-summary dt, .margin-panel-values dt {
  color: var(--clay-dark);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-right: 1.25rem;
}
/* plate spread: the product title carries the plate mark; sections read as ruled notes down the spine */
.product-title { padding-left: 1rem; border-left: 3px solid var(--green-dark); }
.unit-price-line { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
@media (max-width: 767px) {
  .product-spec-sheet, .provenance, .order-summary, .margin-panel-values { grid-template-columns: 1fr; }
  .product-spec-sheet dt, .provenance dt, .order-summary dt, .margin-panel-values dt { border-bottom: 0; padding-bottom: 0; }
}

/* ---------- quote breakdown as ruled notes (data-skin-breakdown="notes") ---------- */
[data-skin-breakdown="notes"] .breakdown { border-top: 2px solid var(--green-dark); margin: 1rem 0 1.5rem; }
[data-skin-breakdown="notes"] .breakdown caption {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  padding: 0.6rem 0 0.5rem;
}
[data-skin-breakdown="notes"] .breakdown th, [data-skin-breakdown="notes"] .breakdown td {
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 0.75rem 0.7rem 0;
  background: transparent;
}
[data-skin-breakdown="notes"] .breakdown thead th {
  background: transparent;
  color: var(--clay-dark);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--green-dark);
}
[data-skin-breakdown="notes"] .breakdown tbody tr:nth-child(even) td,
[data-skin-breakdown="notes"] .breakdown tbody tr:nth-child(even) th { background: transparent; }
[data-skin-breakdown="notes"] .breakdown th[scope="row"] { font-family: var(--serif); font-weight: 500; font-size: 1.0625rem; }
[data-skin-breakdown="notes"] .breakdown td:last-child { font-variant-numeric: tabular-nums; }
[data-skin-breakdown="notes"] .breakdown-total th, [data-skin-breakdown="notes"] .breakdown-total td {
  background: transparent !important;
  border-top: 2px solid var(--green-dark);
  border-bottom: 1px solid var(--green-dark);
  font-weight: 700;
}
[data-skin-breakdown="notes"] .breakdown-total th[scope="row"] { font-weight: 700; }
@media (max-width: 767px) {
  [data-skin-breakdown="notes"] .breakdown tr { border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; margin-bottom: 0.75rem; }
  [data-skin-breakdown="notes"] .breakdown th, [data-skin-breakdown="notes"] .breakdown td { padding: 0.35rem 0; border-bottom: 0; }
  [data-skin-breakdown="notes"] .breakdown th[scope="row"] { background: transparent !important; padding-top: 0.6rem; }
  [data-skin-breakdown="notes"] .breakdown tr > :last-child { padding-bottom: 0.7rem; }
  [data-skin-breakdown="notes"] .breakdown td:nth-child(2)::before,
  [data-skin-breakdown="notes"] .breakdown td:nth-child(3)::before { color: var(--clay-dark); font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
  [data-skin-breakdown="notes"] .breakdown-total { border-width: 0 0 2px; border-color: var(--green-dark); }
  [data-skin-breakdown="notes"] .breakdown-total th, [data-skin-breakdown="notes"] .breakdown-total td { border-top: 0; }
  [data-skin-breakdown="notes"] .breakdown-total th[scope="row"] { border-top: 2px solid var(--green-dark); }
}
.quote-locked-state, [data-content-id="quote.locked.state"], .account-state, [data-content-id="account.state"] {
  border: 1px solid var(--green);
  border-left: 4px solid var(--green);
  border-radius: 0;
  background: var(--paper-light);
}
[data-content-id="quote.not-a-contract"] { font-family: var(--serif); font-size: 1.0625rem; }
.margin-panel { border: 1px dashed var(--line); border-radius: 0; background: var(--paper-light); }
.margin-panel summary { font-family: var(--serif); font-size: 1.125rem; }
.margin-panel[open] > summary { border-bottom-color: var(--rule); }

/* ---------- confirmation / email preview ---------- */
.order-line { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; }
.email-envelope { border: 1px solid var(--rule); border-bottom: 0; border-radius: 0; background: var(--paper-light); }
.email-body { border: 1px solid var(--rule); border-radius: 0; background: var(--paper-light); }
.email-heading { font-size: 1.35rem; }

/* ---------- footer: colophon ---------- */
.site-footer { border-top: 1px solid var(--rule); background: var(--paper-light); margin-top: 3rem; }
.footer-disclaimer { font-family: var(--serif); font-size: 1.0625rem; font-weight: 500; }
.human-next-step { color: var(--ink-soft); }
.footer-links a { color: var(--green-dark); }

/* ---------- widths / motion / forced colours ---------- */
@media (max-width: 480px) {
  .brand-lockup strong { font-size: 1.4rem; }
  .brand-mark { width: 2.4rem; height: 2.4rem; font-size: 1.25rem; }
  h1.page-heading { font-size: 1.6rem; }
  .demo-notice { font-size: 1rem; padding: 0.7rem 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .demo-notice, .form-errors, .product-card, .product-card::before, .product-card::after { border: 2px solid CanvasText; }
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
}