/* Fernwild Florist — first-party florist template (S115).
   All imagery is authored CSS. No media, fonts, icons, embeds, CDNs, analytics or tracking.

   Voice: BOTANICAL AND ROMANTIC. Dusky rose, deep plum and sage on warm cream, a serif display over
   a sans body, soft 16px radii. It is a WARMER, more colourful serif than vowbarn's austere
   hairline-serif editorial, and unlike anything else in the library (haulwell's indigo caps,
   brightloom's cyan, greenfold's green).

   This template carries a BOUQUET FINDER (see finder.js): a client-side recommender that takes an
   occasion, a budget and a colour and suggests bouquets from a small catalogue, with a graceful
   "nearest match" when nothing fits exactly. No API, no key, no network — prices are illustrative
   and labelled fictional. */

:root {
  --plum: #4a2540;
  --plum-mid: #6b3a5c;
  /* ⭐ S186 — #c85a7a → #b45069, a 6% darkening, because white text on the old value
     measured 4.04:1 and AA small text needs 4.5. That was recorded in
     contrast-baseline.json at S116 across FIVE rows per page (both buttons, the filter
     submit, the order submit and the assistant launcher) and deferred as "a palette-wide
     design decision". It is not palette-wide: this is the one hue white sits on.
     ✓ MEASURED after: white on it 4.89:1, and it on cream 4.54:1 so it still works as text. */
  --rose: #b45069;
  --rose-deep: #a8425f;
  --rose-soft: #f4e3ea;
  --sage: #8ba36f;
  --sage-deep: #6f8755;
  --cream: #faf6f0;
  --card: #fffdfa;
  --line: #e9ddd2;
  --ink: #35242e;
  /* ⭐ S186 — #7a6a72 → #6f6068, and I got this one wrong the first time. Earlier in the same
     session I saw the 4.12:1 row for --muted on --rose-soft, reasoned it was a single instance
     and that moving a body-text token was "palette-wide", and left it. The full-page sweep
     found it on FOUR elements on /order.html — and by then it was the only failing route in a
     library of twenty. A defect left alone because it looked small stops looking small when
     everything around it is clean. ✓ MEASURED after: 4.80 on rose-soft, 5.50 on cream,
     5.83 on card — every ground it appears on improves. */
  --muted: #6f6068;
  --radius: 16px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Theming for the shared accessibility panel (library/shared/a11y/). Presentation is the
     TENANT's, logic is shared — the platform's own law, one level down. */
  --a11y-ink: var(--ink);
  --a11y-surface: var(--card);
  --a11y-line: var(--line);
  --a11y-radius: var(--radius);
  --a11y-sans: var(--sans);

  /* Theming for the shared scripted assistant. */
  /* ⛔ THE SECOND CONSTRUCTION SITE FOR THE SAME COLOUR. The assistant launcher takes its
     background from here, not from --rose, so changing only --rose above would have left
     the "Quick answers" button at 4.04:1 — a half-fix that looks complete. Kept in step. */
  --assistant-accent: #b45069;
  --assistant-accent-ink: #fff;
  --assistant-panel: #fffdfa;
  --assistant-ink: #35242e;
  --assistant-muted: #7a6a72;
  --assistant-soft: #f4e3ea;
  --assistant-line: #e9ddd2;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--cream);
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; letter-spacing: -0.005em; }
a { color: inherit; }
ul, ol { list-style: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 12;
  background: var(--plum); color: #fff; padding: 0.55rem 1.1rem;
  border-radius: 0 0 12px 12px; text-decoration: none; font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--rose); outline-offset: 2px; }

/* ---------- Header + navigation ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem; background: var(--cream);
  border-bottom: 1px solid var(--line); position: relative;
}
.wordmark {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; color: var(--plum); white-space: nowrap;
}
.wordmark span[aria-hidden] { color: var(--rose); }
.nav-disclosure summary {
  list-style: none; cursor: pointer; user-select: none;
  font-weight: 700; padding: 0.55rem 1.1rem;
  border: 1.5px solid var(--plum); border-radius: 999px; color: var(--plum);
}
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure[open] summary { background: var(--plum); color: var(--cream); }
.nav-disclosure nav {
  position: absolute; right: 1.35rem; left: 1.35rem; top: calc(100% + 0.5rem); z-index: 9;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 0.9rem; box-shadow: 0 18px 38px rgba(74, 37, 64, 0.18);
}
.nav-disclosure nav a:not(.button) { text-decoration: none; font-weight: 700; padding: 0.6rem 0.8rem; border-radius: 9px; color: var(--plum); }
.nav-disclosure nav a:not(.button):hover { background: var(--rose-soft); }

.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav {
  position: static; flex-direction: row; align-items: center; gap: 0.4rem;
  background: none; border: 0; padding: 0; box-shadow: none;
}
.nav-disclosure.nav-inline nav a { padding: 0.45rem 0.8rem; }

.header-call { display: none; }
@media (max-width: 799px) {
  .site-header { gap: 0.6rem; }
  .header-call { display: inline-block; margin-left: auto; }
}
@media (max-width: 479px) {
  .site-header { padding: 0.8rem 0.9rem; gap: 0.45rem; }
  .wordmark { font-size: 1.25rem; }
  .header-call { font-size: 0.9rem; }
  .nav-disclosure summary { padding: 0.42rem 0.85rem; font-size: 0.9rem; }
}

/* ---------- Buttons ---------- */
.button {
  display: inline-block; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 1rem;
  background: var(--rose); color: #fff;
  border: 1.5px solid var(--rose); border-radius: 999px;
  padding: 0.8rem 1.8rem; cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.button:hover { background: var(--rose-deep); border-color: var(--rose-deep); transform: translateY(-1px); }
.button-small { padding: 0.5rem 1.1rem; font-size: 0.94rem; }
.button-outline { background: transparent; color: var(--plum); border-color: var(--plum); }
.button-outline:hover { background: var(--plum); color: var(--cream); }
.button-light { background: var(--cream); color: var(--plum); border-color: var(--cream); }
.button-light:hover { background: #fff; border-color: #fff; }
.call-link { font-weight: 700; color: var(--rose-deep); text-decoration: none; white-space: nowrap; }
.call-link:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.hero { background: var(--cream); padding: 3rem 1.35rem 2.5rem; }
.hero-inner {
  max-width: 70rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center;
}
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.05fr 1fr; gap: 3rem; } }
.eyebrow {
  display: inline-block; font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--rose-deep); background: var(--rose-soft);
  border-radius: 999px; padding: 0.35rem 0.95rem; margin-bottom: 1.1rem;
}
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 3.9rem); max-width: 15ch; }
.hero h1 em { font-style: italic; color: var(--rose); }
.hero-sub { margin-top: 1.1rem; font-size: 1.12rem; max-width: 44ch; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.7rem; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; margin-top: 1.5rem; }
.hero-badges li { font-size: 0.93rem; font-weight: 600; color: var(--plum); padding-left: 1.3rem; position: relative; }
.hero-badges li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--sage);
}
.hero-plate { height: clamp(250px, 38vw, 380px); border-radius: var(--radius); border: 1px solid var(--line); display: block; width: 100%; object-fit: cover;}

/* ---------- Notice strip ---------- */
.notice { background: var(--plum); color: var(--cream); padding: 1.15rem 1.35rem; }
.notice p { max-width: 70rem; margin: 0 auto; text-align: center; font-size: 0.98rem; }
.notice strong { color: #e6b8cb; }

/* ---------- Section frame + filter strip ---------- */
.section { max-width: 70rem; margin: 0 auto; padding: 3rem 1.35rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section-head h2, .band h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section-intro { margin-top: 0.6rem; max-width: 52ch; color: var(--muted); }
.filter-count { color: var(--rose-deep); font-weight: 700; }

.strip { background: var(--rose-soft); padding: 1.4rem 1.35rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-form {
  max-width: 70rem; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 0.85rem; align-items: end;
}
@media (min-width: 700px) { .filter-form { grid-template-columns: 1fr 1fr auto; } }
.filter-form .field label { color: var(--plum); font-size: 0.9rem; font-weight: 700; }
.filter-form select {
  width: 100%; margin-top: 0.35rem; padding: 0.7rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 10px;
}

/* ---------- Cards ---------- */
.item-grid { display: grid; grid-template-columns: 1fr; gap: 1.4rem; margin-top: 1.9rem; }
@media (min-width: 620px) { .item-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .item-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(74, 37, 64, 0.15); }
.card-body { padding: 1.2rem 1.35rem 1.45rem; }
.card-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.card-title { font-size: 1.25rem; }
.card-where { font-size: 0.92rem; font-weight: 700; color: var(--rose-deep); white-space: nowrap; }
.card-meta { margin-top: 0.45rem; color: var(--muted); font-size: 0.96rem; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.85rem; }
.card-tags li {
  font-size: 0.78rem; font-weight: 600; color: var(--plum);
  background: var(--rose-soft); border-radius: 999px; padding: 0.22rem 0.75rem;
}
.card-art { height: 210px; display: block; width: 100%; object-fit: cover;}
.filter-empty { margin-top: 1.9rem; padding: 1.5rem; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }

/* ---------- CSS artwork (all authored gradients) ----------
   Flowers are DISCRETE radial-gradient blooms (a repeating radial clipped into a band stacks into
   pillars); parts must TOUCH; a glow needs a gradual falloff. */

.art-bouquet, .art-posy, .art-vase, .art-rose, .art-wreath {
  background-repeat: no-repeat;
  background-color: var(--rose-soft);
}

/* Wrapped bouquet: a cluster of blooms over green stems, tied with a ribbon band. */
/* Round hand-tied posy: a tight bunch of blooms with a ribbon below. */
/* Vase of flowers: blooms on stems rising out of a vase. */
/* Single rose: concentric petals with a leaf. */
/* Wreath: a green ring with blooms set around it. */
/* ---------- The bouquet finder — this template's signature tool ---------- */
.finder {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; margin-top: 1.9rem;
}
.finder h3 { font-size: 1.4rem; }
.finder > p { color: var(--muted); margin-top: 0.5rem; max-width: 58ch; }
.finder-controls { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 680px) { .finder-controls { grid-template-columns: repeat(3, 1fr); } }
.finder-controls .field label { display: block; font-weight: 600; font-size: 0.95rem; }
.finder-controls select {
  width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px;
}
.finder-note { margin-top: 1.2rem; font-weight: 600; color: var(--plum); }
.finder-results { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.1rem; }
@media (min-width: 620px) { .finder-results { grid-template-columns: 1fr 1fr 1fr; } }
.finder-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.finder-card .fc-art { display: block; width: 100%; height: 120px; object-fit: cover; }
.finder-card .fc-body { padding: 0.85rem 1rem 1.05rem; }
.finder-card h3 { font-family: var(--serif); font-size: 1.15rem; }
.finder-card .fc-price { font-weight: 700; color: var(--rose-deep); margin-top: 0.15rem; }
.finder-card .fc-meta { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; }
.finder-card .fc-reserve { display: inline-block; margin-top: 0.7rem; font-weight: 700; font-size: 0.9rem; color: var(--rose-deep); text-decoration: none; }
.finder-card .fc-reserve:hover { text-decoration: underline; }
.finder-caveat { margin-top: 1.2rem; font-size: 0.93rem; color: var(--muted); max-width: 62ch; }

/* ---------- Feature grid + bands ---------- */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 1.3rem; margin-top: 1.9rem; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-grid li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.feature-grid h3 { font-size: 1.2rem; margin-bottom: 0.45rem; }
.feature-grid p { color: var(--muted); font-size: 0.97rem; }

.band { background: var(--plum); color: var(--cream); padding: 3.5rem 1.35rem; text-align: center; }
.band h2 { color: var(--cream); }
.band p { max-width: 50ch; margin: 0.9rem auto 1.7rem; color: #d9bece; }

/* ---------- Interior pages ---------- */
.page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.35rem 3rem; }
.breadcrumb a { font-weight: 600; text-decoration: none; color: var(--muted); }
.breadcrumb a:hover { color: var(--rose-deep); }
.page-hero { padding: 1.5rem 0 0.5rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); }
.page-hero p { margin-top: 0.9rem; max-width: 54ch; color: var(--muted); }

/* ---------- Forms (preview-safe) ---------- */
.form-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 1.9rem; }
@media (min-width: 860px) { .form-layout { grid-template-columns: 1.4fr 1fr; } }
.book-form {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.75rem; display: grid; grid-template-columns: 1fr; gap: 1rem; align-self: start;
}
@media (min-width: 620px) { .book-form { grid-template-columns: 1fr 1fr; } .field-wide { grid-column: 1 / -1; } }
.field label { display: block; font-weight: 600; font-size: 0.95rem; }
.label-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  width: 100%; margin-top: 0.35rem; padding: 0.72rem 0.8rem;
  font: inherit; color: var(--ink); background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px;
}
.book-form .button { justify-self: start; }
.form-status { grid-column: 1 / -1; font-weight: 600; color: var(--plum); min-height: 1.4em; }

.panel { background: var(--rose-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; align-self: start; }
.panel h2 { font-size: 1.35rem; }
.steps { counter-reset: step; margin-top: 1.2rem; }
.steps li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3rem; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: -0.05rem;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-weight: 700; color: var(--cream); background: var(--sage-deep); border-radius: 50%;
}
.steps h3 { font-size: 1.1rem; }
.steps p { color: var(--muted); font-size: 0.96rem; }
.note { margin-top: 1.5rem; color: var(--muted); font-size: 0.95rem; max-width: 60ch; }

/* ---------- Footer ---------- */
footer {
  background: var(--plum); color: #c3a7b5;
  padding: 2.6rem 1.35rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem;
}
.wordmark-footer { font-family: var(--serif); font-size: 1.45rem; color: var(--cream); margin-bottom: 0.5rem; }
footer .call-link { color: #e6b8cb; }
/* ⭐ S186 — #97788a → #b09aa6. The old grey measured 3.29:1 on the plum footer against a
   4.5 requirement, on every page, and the truth notice is the one line on a demo that most
   has to be readable. ✓ MEASURED after: 4.92:1, still visibly quieter than the footer body
   (#c3a7b5, 5.84:1), so the hierarchy this grey exists to create survives. */
.footer-truth { max-width: 34ch; font-size: 0.88rem; color: #b09aa6; align-self: end; }
.footer-powered { margin-top: 0.9rem; font-size: 0.85rem; color: #b09aa6; }
.footer-powered a { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: #e6b8cb; }

/* Footer navigation (S186) — the owner asked for "headers and footers with FAQs". The
   footer is where someone who scrolled the whole page and did not find their answer
   ends up, so it is the right place for the awkward questions rather than only the
   sales route. Links are DEEP: "Delivery & areas" lands on that heading, not on a page
   they then have to scan. Screen-reader users judge a link by its first few words at
   speed (Krug ch.12), so the meaning is front-loaded. */
.footer-nav { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.footer-nav h2 {
  font-family: var(--sans); font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--cream);
  margin-bottom: 0.7rem;
}
.footer-nav ul { display: grid; gap: 0.45rem; }
.footer-nav a { color: #c3a7b5; text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 2px; }
/* 24px is WCAG 2.2 SC 2.5.8's floor for a standalone target, and a stacked list of
   links is exactly what that criterion was written for. */
.footer-nav a { display: inline-block; min-height: 24px; }

/* ---------- Questions & answers ------------------------------------ S186
   Native <details>, so every answer is readable, expandable and linkable with
   JavaScript off — the same disclosure idiom the header nav already uses rather
   than a second, scripted accordion. */
.faq-list { margin-top: 1.6rem; display: grid; gap: 0.75rem; }
.faq-item {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.faq-item summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.25rem; position: relative;
  font-weight: 700; font-size: 1.03rem; color: var(--plum);
  min-height: 44px; display: flex; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A rotating chevron drawn in CSS — these packages ship no icon font and no SVG sprite. */
.faq-item summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%;
  width: 0.55rem; height: 0.55rem; margin-top: -0.35rem;
  border-right: 2px solid var(--rose-deep); border-bottom: 2px solid var(--rose-deep);
  transform: rotate(45deg); transform-origin: center;
  transition: transform 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -0.1rem; }
.faq-item summary:hover { background: var(--rose-soft); }
.faq-item summary:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: -3px; }
.faq-answer { padding: 0 1.25rem 1.25rem; }
.faq-answer p { color: var(--muted); max-width: 68ch; }
/* A heading targeted by a footer link needs to be focusable, or the jump moves the
   viewport and leaves the keyboard behind. tabindex="-1" in the markup does that;
   this stops it drawing a permanent outline for mouse users. */
.section-head h2:focus { outline: none; }
.section-head h2:focus-visible { outline: 3px solid var(--rose-deep); outline-offset: 4px; }

/* ---------- First-decision rail ---------- */
.decision-strip { background: var(--rose-soft); border-block: 1px solid var(--line); padding: 3.1rem 1.35rem 3.25rem; }
.decision-intro, .decision-grid { max-width: 70rem; margin-inline: auto; }
.decision-kicker { color: var(--rose-deep); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.decision-intro h2 { margin-top: 0.45rem; color: var(--plum); font-size: clamp(2rem, 4.8vw, 3rem); }
.decision-intro > p:last-child { margin-top: 0.75rem; max-width: 57ch; color: var(--muted); }
.decision-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.8rem; }
.decision-card { display: flex; min-height: 14rem; flex-direction: column; gap: 0.7rem; padding: 1.35rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; box-shadow: 0 12px 24px rgba(74, 37, 64, 0.08); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.decision-card:hover { color: var(--ink); background: #fff; transform: translateY(-3px); box-shadow: 0 18px 32px rgba(74, 37, 64, 0.15); }
.decision-card:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--rose); outline-offset: 3px; }
.decision-card-soft { background: #fffaf5; }
.decision-card-dark { color: #fff; background: var(--plum); border-color: var(--plum); }
.decision-card-dark:hover { color: #fff; background: var(--plum-mid); }
.decision-number { color: var(--rose-deep); font-size: 0.69rem; font-weight: 800; letter-spacing: 0.13em; line-height: 1.35; }
.decision-card-dark .decision-number { color: #fff; }
.decision-card strong { margin-top: auto; font-family: var(--serif); font-size: clamp(1.35rem, 2.5vw, 1.75rem); line-height: 1.12; }
.decision-card > span:not(.decision-number, .decision-link) { color: var(--muted); font-size: 0.91rem; line-height: 1.5; }
.decision-card-dark > span:not(.decision-number, .decision-link) { color: #fff; }
.decision-link { display: flex; align-items: baseline; gap: 0.35rem; margin-top: 0.35rem; padding-top: 0.8rem; border-top: 1px solid var(--line); color: var(--rose-deep); font-size: 0.88rem; font-weight: 800; }
.decision-link span[aria-hidden] { margin-left: auto; color: var(--rose-deep); font-size: 1.15rem; }
.decision-card-dark .decision-link { border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.decision-card-dark .decision-link span[aria-hidden] { color: #fff; }
@media (min-width: 760px) { .decision-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .decision-card { border: 0; border-radius: 0; } }
@media (max-width: 479px) { .decision-strip { padding-inline: 0.9rem; } .decision-card { min-height: 0; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .button:hover, .card:hover { transform: none; }
  .decision-card:hover { transform: none; }
}

/* --- Touch targets ------------------------------------------------ S116
   A standalone control needs 44x44 CSS px (Apple HIG; WCAG 2.5.5 AAA, and 2.5.8 AA
   sets a 24px floor). The S116 polish pass measured the header phone link at 23px
   and the Menu button at 35px on a 390px viewport, on every template in the library.
   On a trades site the phone number IS the conversion — it was rendering at half the
   required size at exactly the width most visitors arrive on.

   Layout only, no colour, so this block is copy-paste identical across every palette
   in the library. Inline links inside prose are deliberately NOT touched: both WCAG
   target-size rules exempt them, and padding them out would wreck the body copy. */
@media (max-width: 799px) {
  .header-call,
  .nav-disclosure summary,
  .nav-disclosure nav .call-link,
  .button,
  .button-small,
  button[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* --- Accessibility: the two modes only this palette can define ------ S186
   Everything else the panel does is name-independent and lives in the shared
   library/shared/a11y/a11y.css. These two cannot be: they have to override THIS
   template's own variables, and the 20 templates do not share a vocabulary
   (measured S186 — `--ink` 19/20, `--muted` 19/20, `--line` 18/20, `--card` 17/20).
   Shipping them from the shared file would have worked here and silently done
   nothing on the four templates that name things differently.

   `check-library-a11y.mjs` fails the build if a package mounts the panel without
   both blocks, so "the widget is on it" can never mean "and two of its seven
   controls do nothing". */

/* High contrast — every ink-role token to black, every canvas-role token to white.
   Listing all twelve is the point: a token left out keeps its brand hue and becomes
   the one low-contrast element on a page somebody switched to high contrast. */
html[data-a11y-contrast="high"] {
  --plum: #000;
  --plum-mid: #000;
  --rose: #000;
  --rose-deep: #000;
  --sage: #000;
  --sage-deep: #000;
  --ink: #000;
  --muted: #000;
  --line: #000;
  --cream: #fff;
  --card: #fff;
  --rose-soft: #fff;
}

/* Colour-blind friendly — the Okabe-Ito colour-universal pair (#0072B2 blue,
   #E69F00 orange), which stays separable under protan, deutan AND tritan vision
   where a rose/sage/plum set narrows.
   ⚠ `--plum` moves to a NEUTRAL dark, not a blue. It is the chrome behind white
   text; leaving it in the red family would keep the exact rose-vs-plum pairing this
   mode exists to remove, one level below the accent swap. */
html[data-a11y-colour="safe"] {
  --plum: #1f2933;
  --plum-mid: #37434f;
  --rose: #0072b2;
  --rose-deep: #005a8d;
  --rose-soft: #e8f1f7;
  --sage: #e69f00;
  --sage-deep: #8a5f00;
  /* ⛔⭐ S188 — THE ASSISTANT LAUNCHER WAS THE MOST VISIBLE THING THIS MODE MISSED. Its accent is
     its own token (`--assistant-accent`, the same #b45069 as `--rose`) and it was not in this
     list, so a reader who switched the mode on got a page of blue and orange with one rose button
     pinned over it. ⚠ 15 of the library's 22 templates have the same gap — see
     `scripts/prove-colour-modes.mjs`. White on #0072b2 is 5.18:1, so the launcher's bold label
     stays AA. */
  --assistant-accent: #0072b2;
  /* The panel's pale rose wash, for the same reason — it is `--rose-soft`'s twin and was missed
     alongside it. ⚠ There is no `--assistant-accent-hover`; an earlier draft of this block
     overrode one and it would have been dead code. */
  --assistant-soft: #e8f1f7;
}

/* ⛔⭐⭐⭐ S188 — AND THE FOOTER, THE BAND AND THE NOTICE STRIP WERE HARD-CODED, SO NO VARIABLE
   OVERRIDE COULD EVER HAVE REACHED THEM. The owner found this by eye on the live demo: switching
   to "Colour-blind friendly" left the whole footer pink, "Same-day delivery" pink, and the
   launcher rose, while every other accent on the page had gone blue and orange.

   ✓ MEASURED before and after with `scripts/prove-colour-modes.mjs`: 61 saturated colours on `/`
   that the mode never touched, 42 of them `#c3a7b5` alone. Every gate in the library was green on
   it — `check-library-a11y` says 20 of 20, the panel mounts, the contrast sweep passes in every
   mode — because they all ask whether the CONTROL exists and whether the result is LEGIBLE, and
   none of them asked whether the colour changed.

   ⚠ THE GROUND MOVES TOO, WHICH IS WHY THESE VALUES ARE NOT JUST "THE OLD PINK, DESATURATED".
   All three surfaces are `var(--plum)`, which becomes #1f2933 here, so S186's measured ratios
   against the old plum do not carry over. Recomputed against #1f2933, and the hierarchy S186
   built (links brighter than supporting copy) is preserved:
     #cbd5df on #1f2933 = 9.9:1   links and band copy
     #9fb0bf on #1f2933 = 6.8:1   the quieter truth panel and byline
     #e69f00 on #1f2933 = 7.0:1   the phone number and emphasis — the mode's own orange, so the
                                  one thing the eye should jump to is part of the palette rather
                                  than a survivor of the old one. */
html[data-a11y-colour="safe"] footer,
html[data-a11y-colour="safe"] .footer-nav a,
html[data-a11y-colour="safe"] .band p {
  color: #cbd5df;
}

html[data-a11y-colour="safe"] .footer-truth,
html[data-a11y-colour="safe"] .footer-powered {
  color: #9fb0bf;
}

html[data-a11y-colour="safe"] footer .call-link,
html[data-a11y-colour="safe"] .footer-powered a:hover,
html[data-a11y-colour="safe"] .notice strong {
  color: #e69f00;
}