/* Promote My Concert — component styles. Mobile-first: base rules are for the smallest screen;
   min-width queries add layout upward. Values are tokens (theme.json presets / custom), except
   media-query breakpoints, which CSS cannot read from custom properties: 640px (two-up),
   900px (side-by-side splits, three tiers) and 1024px (four steps). The header uses container
   queries in em instead (see "Header"), so it follows the reader's text size.

   Only the reset is layered: layered rules lose to unlayered ones, and WordPress's global styles
   are unlayered, so component rules stay unlayered to win on specificity. WordPress emits no
   block-gap margins (theme.json spacing.blockGap = null), so every container owns its own gap.

   Motion: transform/opacity for movement, short colour fades on hover; nothing animates on a
   keyboard action; anchor jumps are instant (no smooth scroll). */

@layer reset;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; -webkit-text-size-adjust: 100%; }
  body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img { max-width: 100%; height: auto; display: block; }
  :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
}

:root {
  --pmc-ease: var(--wp--custom--motion--ease-out);
  --pmc-press: var(--wp--custom--motion--press);
  --pmc-fast: var(--wp--custom--motion--fast);
  --pmc-base: var(--wp--custom--motion--base);
}
:where(h1, h2) { text-wrap: balance; }
:where(h1, h2) strong { font-weight: 700; }
:where(p) { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }

/* ---------- Layout ---------- */
/* The 1200px content width includes the gutters, as in the prototype's --measure. */
.pmc-wrap { width: 100%; max-width: var(--wp--style--global--content-size); margin-inline: auto; padding-inline: var(--wp--custom--gutter); }
.pmc-section { padding-block: var(--wp--preset--spacing--10); }
.pmc-band { background: var(--wp--preset--color--panel); border-block: 1px solid var(--wp--preset--color--rule); }
.pmc-stack { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--5); }
.pmc-stack--tight { gap: var(--wp--preset--spacing--3); }
.pmc-stack--loose { gap: var(--wp--preset--spacing--9); }
.pmc-split { display: grid; gap: var(--wp--preset--spacing--7); align-items: center; }
.pmc-split--top { align-items: start; }
@media (min-width: 900px) {
  .pmc-section { padding-block: var(--wp--preset--spacing--12); }
  .pmc-split { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--9); }
}

/* ---------- Type ---------- */
.pmc-eyebrow { font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.pmc-lede { font-size: var(--wp--preset--font-size--lede); color: var(--wp--preset--color--text-muted); }
/* Single-column text and forms keep a readable line length below the side-by-side breakpoint. */
@media (max-width: 899.98px) { .pmc-split > * { max-width: var(--wp--custom--measure); } }

/* ---------- Buttons (links styled as buttons; actions are <button>) ---------- */
.pmc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
  border-radius: var(--wp--custom--radius--control); border: 1px solid transparent;
  font: 600 var(--wp--preset--font-size--body)/1.5 var(--wp--preset--font-family--body);
  text-decoration: none; text-align: center; text-wrap: balance; cursor: pointer;
  transition: transform var(--pmc-press) var(--pmc-ease), background-color var(--pmc-fast) ease, border-color var(--pmc-fast) ease, color var(--pmc-fast) ease;
}
.pmc-btn:active:not(:focus-visible) { transform: scale(0.97); }   /* pointer presses only */
.pmc-btn--primary { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); }
.pmc-btn--ghost { color: var(--wp--preset--color--text); border-color: var(--wp--preset--color--ghost-border); font-weight: 500; }
.pmc-btn--small { padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--5); font-size: var(--wp--preset--font-size--small); }
.pmc-btn--ghost.pmc-btn--small { font-weight: 600; }
.pmc-btn--compact { padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); font-size: var(--wp--preset--font-size--note); line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .pmc-btn--primary:hover { background: var(--wp--preset--color--accent-hover); color: var(--wp--preset--color--on-accent); }
  .pmc-btn--ghost:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
}
.pmc-btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; }

/* ---------- Header: sticky, one row from 320px up ----------
   On a one-page site the nav stays in reach. Anchor jumps and focus land below it
   (scroll-padding = its height; WCAG 2.4.11), and it clears the admin bar for staff. */
:root { --pmc-header-h: 76px; }
html { scroll-padding-top: var(--pmc-header-h); }   /* a section's top rule lands on the header's */
.wp-site-blocks > header.wp-block-template-part {
  position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: var(--wp--custom--layer--sticky);
  background: var(--wp--preset--color--ground); box-shadow: 0 1px 0 transparent;   /* a shadow line takes no layout space */
}
/* A hairline fades in over the first 64px of scroll, where scroll-linked CSS is supported. */
@supports (animation-timeline: scroll()) {
  .wp-site-blocks > header.wp-block-template-part { animation: pmc-header-rule linear both; animation-timeline: scroll(root); animation-range: 0 64px; }
  @keyframes pmc-header-rule { to { box-shadow: 0 1px 0 var(--wp--preset--color--rule); } }
}
/* The header steps down by its own width in its own text size (container queries in em), so
   enlarged text drops links before anything is pushed off screen (WCAG 1.4.4, 1.4.10). The
   thresholds equal the old 480/640/768/1024 px viewport breakpoints at default text size (the
   header's content width there, ÷ its 17 px text). It grows with its content instead of clipping. */
.pmc-header { container: pmc-header / inline-size; display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--3); min-height: var(--pmc-header-h); }
/* The brand lockup (Edwin's Rose Picker Music mark, 2026-10-28): mark, name, "from" line. */
.pmc-brand { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--3); min-height: 44px; text-decoration: none; color: var(--wp--preset--color--text); }
.pmc-brand__mark { flex: none; width: 40px; height: auto; }
.pmc-brand__text { display: flex; flex-direction: column; gap: 2px; }
.pmc-wordmark { font: 700 var(--wp--preset--font-size--wordmark)/1.1 var(--wp--preset--font-family--display); letter-spacing: -0.01em; white-space: nowrap; }
.pmc-brand__from { font-size: var(--wp--preset--font-size--micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--text-label); white-space: nowrap; }
/* Narrow headers step down: no "from" line (was under 640 px), then the mark alone, which leaves room
   for the account link beside Order now (about 584 px at default text size; the link keeps its name). */
@container pmc-header (max-width: 34.63em) { .pmc-brand__from { display: none; } }
@container pmc-header (max-width: 32em) {   /* hidden from sight, not from screen readers: it stays the link's name */
  .pmc-brand__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .pmc-brand__mark { width: 44px; }
}
.pmc-nav { display: flex; align-items: center; gap: var(--wp--preset--spacing--6); font-size: var(--wp--preset--font-size--note); font-weight: 500; }
.pmc-nav .pmc-btn { white-space: nowrap; }
.pmc-nav a:not(.pmc-btn) { display: none; align-items: center; min-height: 44px; white-space: nowrap; text-decoration: none; color: var(--wp--preset--color--text); transition: color var(--pmc-fast) ease; }
/* The account link (Sign in / Dashboard / Console) shows on phones too, beside Order now: a signed-in
   customer reaches the app from the top of any page (2026-10-28 review). */
.pmc-nav a.pmc-nav__signin { display: inline-flex; }
/* Very large text on a phone: the account link steps out so Order now stays on screen (the footer
   and the order section still have it). At default text size even a 320 px phone keeps it. */
@container pmc-header (max-width: 15em) { .pmc-nav a.pmc-nav__signin { display: none; } }
/* The text links appear once all of them fit on one line beside the wordmark (was 768 px, tablet
   portrait) with tighter spacing; the account link (Sign in / Dashboard / Console) and full spacing
   once there is room (was 1024 px). Narrower, the footer and the order section have them. */
@container pmc-header (min-width: 41.56em) { .pmc-nav { gap: var(--wp--preset--spacing--4); } .pmc-nav a:not(.pmc-btn) { display: inline-flex; } }
@container pmc-header (min-width: 41.56em) and (max-width: 56.46em) { .pmc-nav a.pmc-nav__signin { display: none; } }
@container pmc-header (min-width: 56.47em) { .pmc-nav { gap: var(--wp--preset--spacing--6); } }
@media (hover: hover) and (pointer: fine) { .pmc-nav a:not(.pmc-btn):hover { color: var(--wp--preset--color--accent); } }

/* ---------- Hero (core/cover; height owned here, not by the block) ---------- */
.pmc-hero.wp-block-cover { min-height: min(680px, 88svh); padding: 0; align-items: flex-end; }
.pmc-hero .wp-block-cover__inner-container { width: 100%; }
.pmc-hero__content { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); padding-block: var(--wp--preset--spacing--10) var(--wp--preset--spacing--8); }
.pmc-hero__title { max-width: 14ch; color: var(--wp--preset--color--text); }
.pmc-hero__sub { font-size: var(--wp--preset--font-size--intro); max-width: 54ch; color: var(--wp--preset--color--text-soft); }
.pmc-actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); }
.pmc-actions .pmc-btn { flex: 1 1 auto; }
@media (min-width: 640px) { .pmc-actions .pmc-btn { flex: 0 0 auto; } }
@media (min-width: 900px) { .pmc-hero__content { padding-block: var(--wp--preset--spacing--12) var(--wp--preset--spacing--11); } }

/* ---------- Photos: one aspect ratio per layout, never a fixed height ---------- */
.pmc-photo { margin: 0; }
.pmc-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--wp--custom--radius--card); }
@media (min-width: 900px) { .pmc-photo img { aspect-ratio: 27 / 26; } }   /* the prototype's 540 × 520 */

/* ---------- How it works: 1, 2, then 4 columns (never 3 + 1) ---------- */
.pmc-steps { list-style: none; padding: 0; display: grid; gap: var(--wp--preset--spacing--7) var(--wp--preset--spacing--6); }
@media (min-width: 640px) { .pmc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pmc-steps { grid-template-columns: repeat(4, 1fr); } }
.pmc-step { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); border-top: 2px solid var(--wp--preset--color--rule-input); padding-top: var(--wp--preset--spacing--5); }
.pmc-step__num { font: 700 var(--wp--preset--font-size--note)/1 var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); }
.pmc-step h3 { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--title); font-weight: 600; line-height: 1.25; }
.pmc-step p:not(.pmc-step__num) { color: var(--wp--preset--color--text-muted); }

/* ---------- Straight up ---------- */
.pmc-promise { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); font-size: var(--wp--preset--font-size--lede); }
.pmc-promise__item { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); }
.pmc-promise__item + .pmc-promise__item { border-top: 1px solid var(--wp--preset--color--rule); padding-top: var(--wp--preset--spacing--6); }
.pmc-promise h3 { font-size: var(--wp--preset--font-size--subhead); font-weight: 600; }
.pmc-promise p { color: var(--wp--preset--color--text-muted); }

/* ---------- Pricing: one column (capped), then three (never 2 + 1) ---------- */
.pmc-pricing { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.pmc-pricing h2 { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--heading); font-weight: 500; line-height: 1.08; letter-spacing: -0.015em; }
.pmc-pricing__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--wp--preset--spacing--4) var(--wp--preset--spacing--7); }
.pmc-pricing__note { color: var(--wp--preset--color--text-muted); max-width: 44ch; }
.pmc-tiers { list-style: none; padding: 0; display: grid; gap: var(--wp--preset--spacing--4); max-width: var(--wp--custom--measure); }
/* Three across from the same breakpoint as the splits; tighter card padding until there's room. */
@media (min-width: 900px) { .pmc-tiers { grid-template-columns: repeat(3, 1fr); max-width: none; } }
.pmc-tier {
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--5);
  background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule-card);
  border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--6);
}
.pmc-tier--featured { border-color: var(--wp--preset--color--accent); }
@media (min-width: 900px) and (max-width: 1199.98px) { .pmc-tier { padding: var(--wp--preset--spacing--5); } }
.pmc-tier__head { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--1); }
.pmc-tier__cap { color: var(--wp--preset--color--text-label); font-size: var(--wp--preset--font-size--label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pmc-tier h3 { font: 600 var(--wp--preset--font-size--card)/1.1 var(--wp--preset--font-family--display); }
.pmc-tier__price { font: 700 var(--wp--preset--font-size--price)/1 var(--wp--preset--font-family--display); letter-spacing: -0.02em; }
.pmc-tier__price small { font: 400 var(--wp--preset--font-size--small)/1 var(--wp--preset--font-family--body); letter-spacing: 0; color: var(--wp--preset--color--text-label); }
.pmc-tier__stats { display: flex; align-items: flex-start; gap: var(--wp--preset--spacing--4); border-block: 1px solid var(--wp--preset--color--rule-card); padding-block: var(--wp--preset--spacing--4); }
.pmc-tier__stats > div { display: flex; flex-direction: column; flex: 1 1 0; }
.pmc-tier__stats strong { font: 700 var(--wp--preset--font-size--intro)/1.3 var(--wp--preset--font-family--display); white-space: nowrap; }
.pmc-tier__stats span { color: var(--wp--preset--color--text-label); font-size: var(--wp--preset--font-size--micro); }
.pmc-tier__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--small); }
.pmc-tier__includes { color: var(--wp--preset--color--text); font-weight: 600; }
.pmc-tier .pmc-btn { margin-top: auto; }
.pmc-pricing__foot { color: var(--wp--preset--color--text-label); font-size: var(--wp--preset--font-size--note); max-width: 80ch; }

/* ---------- Start an order ---------- */
.pmc-order { align-items: start; }
.pmc-order .pmc-stack { gap: var(--wp--preset--spacing--4); }
.pmc-order__title { font-size: var(--wp--preset--font-size--headline); line-height: 1.02; letter-spacing: -0.02em; }
.pmc-order .pmc-actions { margin-top: var(--wp--preset--spacing--2); }
/* On phones the two order buttons stack full width, like the hero's. */
@media (max-width: 639.98px) { .pmc-order .pmc-actions .pmc-btn { flex-basis: 100%; } }
.pmc-needs {
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4);
  background: var(--wp--preset--color--card); border: 1px solid var(--wp--preset--color--rule-card);
  border-radius: var(--wp--custom--radius--card); padding: var(--wp--preset--spacing--6);
}
.pmc-needs h3 { font: 600 var(--wp--preset--font-size--card)/1.1 var(--wp--preset--font-family--display); }
.pmc-needs ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); color: var(--wp--preset--color--text-muted); }
.pmc-needs li { padding-left: var(--wp--preset--spacing--5); position: relative; }
.pmc-needs li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); }

/* ---------- About (#about): photo and story, then the two founders ----------
   Phones: a short 3:2 crop of the photo above the story. From 900 px: a third-width photo beside
   the story, the founders two-up underneath. The photo opens full size in the viewer below. */
.pmc-about { display: grid; gap: var(--wp--preset--spacing--7); }
.pmc-about__photo { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); max-width: var(--wp--custom--measure); }
.pmc-about__photo figcaption { font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--text-label); }
.pmc-zoom { position: relative; display: block; border-radius: var(--wp--custom--radius--card); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.pmc-zoom img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 6%; border-radius: var(--wp--custom--radius--card); transition: transform var(--pmc-press) var(--pmc-ease); }
.pmc-zoom:active:not(:focus-visible) img { transform: scale(0.98); }
.pmc-zoom__badge {
  position: absolute; right: var(--wp--preset--spacing--3); bottom: var(--wp--preset--spacing--3);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  color: var(--wp--preset--color--text); background: color-mix(in srgb, var(--wp--preset--color--ground) 72%, transparent); transition: background-color var(--pmc-fast) ease, color var(--pmc-fast) ease;
}
@media (hover: hover) and (pointer: fine) { .pmc-zoom:hover .pmc-zoom__badge { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--on-accent); } }
.pmc-about__intro > p { max-width: var(--wp--custom--measure); }   /* about 65 characters a line; ch is too wide in this face */
.pmc-about__intro > p:not(.pmc-lede) { color: var(--wp--preset--color--text-muted); }
.pmc-about__intro .pmc-lede { color: var(--wp--preset--color--text); }
.pmc-founders { display: grid; gap: var(--wp--preset--spacing--6); }
.pmc-founder { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); padding-top: var(--wp--preset--spacing--4); border-top: 2px solid var(--wp--preset--color--accent); font-size: var(--wp--preset--font-size--note); line-height: 1.5; }
.pmc-founder h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3); font: 600 var(--wp--preset--font-size--card)/1.1 var(--wp--preset--font-family--display); }
.pmc-founder__role { font: 600 var(--wp--preset--font-size--label)/1.2 var(--wp--preset--font-family--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--accent); }
.pmc-founder p { color: var(--wp--preset--color--text-muted); }
/* Single column: every block keeps the readable measure (as .pmc-split does). */
@media (max-width: 899.98px) { .pmc-about > *, .pmc-faq__cols { max-width: var(--wp--custom--measure); } }
@media (min-width: 640px) and (max-width: 899.98px) { .pmc-founders { max-width: none; grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .pmc-about { grid-template-columns: clamp(280px, 32%, 360px) minmax(0, 1fr); gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--9); align-items: start; }
  .pmc-about__photo img { aspect-ratio: 11 / 12; }
  .pmc-founders { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--9); }
}

/* ---------- FAQ (#faq): two columns of groups from 900 px, across the full content width ---------- */
.pmc-faq { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); }
.pmc-faq__head { max-width: var(--wp--custom--measure); }
.pmc-faq__cols { display: grid; gap: var(--wp--preset--spacing--8); align-items: start; }
.pmc-faq__col { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--8); min-width: 0; }
@media (min-width: 900px) { .pmc-faq__cols { grid-template-columns: 1fr 1fr; gap: var(--wp--preset--spacing--8) var(--wp--preset--spacing--9); } }
.pmc-faq__group { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--3); }
.pmc-faq__group h2 { font: 500 var(--wp--preset--font-size--card)/1.15 var(--wp--preset--font-family--display); }
.pmc-faq__group h2 strong { font-weight: 700; }
.pmc-faq__list { border-top: 1px solid var(--wp--preset--color--rule); }
.pmc-qa { border-bottom: 1px solid var(--wp--preset--color--rule); }
.pmc-qa summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--wp--preset--spacing--4);
  min-height: 52px; padding-block: var(--wp--preset--spacing--3); font: 600 var(--wp--preset--font-size--body)/1.35 var(--wp--preset--font-family--display);
}
.pmc-qa summary::-webkit-details-marker { display: none; }
.pmc-qa summary::after { content: "+"; flex: none; font-size: 1.4em; line-height: 1; color: var(--wp--preset--color--accent); transition: transform var(--pmc-fast) var(--pmc-ease); }
.pmc-qa[open] summary::after { transform: rotate(45deg); }
.pmc-qa p { padding-bottom: var(--wp--preset--spacing--4); color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--small); }
.pmc-qa .pmc-qa__list-title strong { color: var(--wp--preset--color--text); font-weight: 600; }
.pmc-qa .pmc-qa__list-title { padding-bottom: var(--wp--preset--spacing--2); }
/* A list ends with the same 16 px a paragraph does, so every list title sits one step below what precedes it;
   items are spaced between, not after (the last item's space would add to the list's). */
.pmc-qa__list { margin: 0; padding: 0 0 var(--wp--preset--spacing--4) 1.25em; list-style: disc; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--small); }
.pmc-qa__list li { overflow-wrap: break-word; }
.pmc-qa__list li + li { padding-top: var(--wp--preset--spacing--2); }
.pmc-qa__list li::marker { color: var(--wp--preset--color--accent); }
@media (hover: hover) and (pointer: fine) { .pmc-qa summary:hover { color: var(--wp--preset--color--accent); } }
.pmc-link-btn { font: inherit; color: var(--wp--preset--color--accent); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

/* ---------- Ask a question: the widget's styles are assets/css/assistant.css; the site's tokens for it ---------- */
:root {
  --ask-color-accent: var(--wp--preset--color--accent);
  --ask-color-danger: var(--wp--preset--color--danger);
  --ask-color-card: var(--wp--preset--color--card);
  --ask-color-ground: var(--wp--preset--color--ground);
  --ask-color-on-accent: var(--wp--preset--color--on-accent);
  --ask-color-panel: var(--wp--preset--color--panel);
  --ask-color-rule-card: var(--wp--preset--color--rule-card);
  --ask-color-rule-input: var(--wp--preset--color--rule-input);
  --ask-color-text: var(--wp--preset--color--text);
  --ask-color-text-label: var(--wp--preset--color--text-label);
  --ask-color-text-muted: var(--wp--preset--color--text-muted);
  --ask-ease: var(--pmc-ease);
  --ask-fast: var(--pmc-fast);
  --ask-font: var(--wp--preset--font-family--body);
  --ask-gutter: var(--wp--custom--gutter);
  --ask-layer-assistant: var(--wp--custom--layer--assistant);
  --ask-layer-launcher: var(--wp--custom--layer--launcher);
  --ask-press: var(--pmc-press);
  --ask-radius-card: var(--wp--custom--radius--card);
  --ask-radius-control: var(--wp--custom--radius--control);
  --ask-size-body: var(--wp--preset--font-size--body);
  --ask-size-card: var(--wp--preset--font-size--card);
  --ask-size-label: var(--wp--preset--font-size--label);
  --ask-size-note: var(--wp--preset--font-size--note);
  --ask-size-small: var(--wp--preset--font-size--small);
  --ask-space-2: var(--wp--preset--spacing--2);
  --ask-space-3: var(--wp--preset--spacing--3);
  --ask-space-4: var(--wp--preset--spacing--4);
  --ask-space-5: var(--wp--preset--spacing--5);
}
@media (prefers-reduced-motion: reduce) { .pmc-qa summary::after { transition: none; } }

/* ---------- Footer links ---------- */
.pmc-footer__nav { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2) var(--wp--preset--spacing--5); }
.pmc-footer__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--wp--preset--color--text-muted); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pmc-footer__nav a:hover { color: var(--wp--preset--color--accent); } }

/* ---------- Footer ---------- */
.pmc-footer { border-top: 1px solid var(--wp--preset--color--rule); }
.pmc-footer__legal { flex-basis: 100%; font-size: var(--wp--preset--font-size--micro); }
.pmc-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); padding-block: var(--wp--preset--spacing--6); font-size: var(--wp--preset--font-size--label); color: var(--wp--preset--color--text-label); }

@media (prefers-reduced-motion: reduce) {
  .pmc-btn:active:not(:focus-visible) { transform: none; }
  .pmc-form__done { transition: opacity var(--pmc-base) ease; @starting-style { opacity: 0; transform: none; } }
}

/* ---------- About and FAQ pages ---------- */
/* A page's h1 is the headline size: the display size belongs to the home page's hero. */
.pmc-page-title { font-size: var(--wp--preset--font-size--headline); line-height: 1.02; letter-spacing: -0.02em; }
/* The closing band: heading, a line, and the way back to the stages under them (like "Start an order"). */
.pmc-next { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--5); }
.pmc-next > .pmc-stack { max-width: var(--wp--custom--measure); }
/* Phones: the About page leads with its heading, then the photo. */
@media (max-width: 899.98px) { .pmc-about__intro { order: -1; } }
/* The page you're on, in the header (About, FAQ). */
.pmc-nav a[aria-current="page"] { color: var(--wp--preset--color--accent); }
/* "Why us", inside the pricing band under the stages (Edwin: "underneath the packages"). */
.pmc-why { padding-top: var(--wp--preset--spacing--8); border-top: 1px solid var(--wp--preset--color--rule); }