/* ═══════════════════════════════════════════════════════════════════════════════════════════
   Pawcast DS — COMPONENT LAYER (canonical)
   Source of truth: N:\AI\.claude\skills\pawcast-design-system\assets\components.css
   Consumed by starter.html and MIRRORED byte-identical into every product
   (e.g. pawcast-landing/demo/assets/components.css). Change it HERE, then re-copy the
   mirrors — never edit a mirror in place. Same law as tokens.css: one source, no drift.

   Consumes assets/tokens.css (layer 2 semantics only — never a primitive, never a raw value).
   Rules enforced here: R1 body floor · R2 rung geometry · R3 baseline · R4 reuse.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Landing container: full-bleed bands, content capped at the clamp ceiling (2560) with a fluid
   gutter — NOT a magic px. */
.pc-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-gutter)}
.pc-container--app{max-width:var(--container-max-app)}

/* R1: an eyebrow is BODY size. Its label-ness comes from weight + caps + tracking + colour,
   never from shrinking below the floor. */
.eyebrow{font-family:var(--font-family-body);font-weight:800;font-size:var(--font-size-body);
  line-height:var(--line-height-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary)}

/* Inline-icon sizing RULE: an icon beside text = 1em, i.e. the text's OWN font-size, so it
   auto-matches whatever tier it sits in. Uses font-size, NOT line-height. The icon-ONLY
   button (.pc-icon-btn) is different: its icon is 50% of the button box. */
.ico{width:1em;height:1em;flex:none;vertical-align:-0.125em}

/* ── .pc-on-dark ── the Forest-band helper. Put it on any section whose bg is
   --color-secondary (or a photo under an ink scrim): the roles that would fail there collapse
   to their on-dark equivalents. Nothing but cream and Sunbeam clears 7:1 on Forest. */
.pc-on-dark .eyebrow{color:var(--color-accent)}
.pc-on-dark .pc-checks svg{color:var(--color-accent)}   /* Park green is only 3.7:1 on Forest */
.pc-on-dark .pc-link,.pc-on-dark .pc-link--quiet{color:var(--color-text-on-dark)}
.pc-on-dark .pc-link--muted{color:var(--color-text-on-dark);opacity:.75}

/* ── Control rung switch ── every sized control reads --ctl-h/--ctl-px/--ctl-pxf/--ctl-fs, so a
   Button, an input, a Select and a round Icon Button of the same rung are pixel-identical
   (58 / 74 / 90px @1440). A size modifier sets nothing but these four custom properties.
   Two horizontal insets on purpose: --ctl-px is the BUTTON inset (it hugs its label, so it needs
   a generous side padding); --ctl-pxf is the FIELD inset (full-width, so it takes a square inset
   — the same token as the rung's vertical padding — or typed text looks indented). */
.pc-btn,.pc-input,.pc-select,.pc-icon-btn{--ctl-h:var(--control-h-m);--ctl-px:var(--control-pad-x-m);--ctl-pxf:var(--field-pad-x-m);--ctl-fs:var(--font-size-control-m)}
.pc-btn--s,.pc-input--s,.pc-select--s,.pc-icon-btn--s{--ctl-h:var(--control-h-s);--ctl-px:var(--control-pad-x-s);--ctl-pxf:var(--field-pad-x-s);--ctl-fs:var(--font-size-control-s)}
.pc-btn--m,.pc-input--m,.pc-select--m,.pc-icon-btn--m{--ctl-h:var(--control-h-m);--ctl-px:var(--control-pad-x-m);--ctl-pxf:var(--field-pad-x-m);--ctl-fs:var(--font-size-control-m)}
.pc-btn--l,.pc-input--l,.pc-select--l,.pc-icon-btn--l{--ctl-h:var(--control-h-l);--ctl-px:var(--control-pad-x-l);--ctl-pxf:var(--field-pad-x-l);--ctl-fs:var(--font-size-control-l)}

/* ── Button ── rising disc hover: per-style colour, NO shadow, border stays default */
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  box-sizing:border-box;height:var(--ctl-h);padding-inline:var(--ctl-px);font-size:var(--ctl-fs);
  font-family:var(--font-family-body);font-weight:800;line-height:1;white-space:nowrap;cursor:pointer;
  text-decoration:none;   /* a Button can be an <a> (pagination, CTAs) — kill the UA underline */
  border:var(--border-bold) solid var(--color-border);border-radius:var(--radius-pill);
  position:relative;overflow:hidden;z-index:1;isolation:isolate;
  /* EVERY property that changes on hover is listed here — the hover-transition law.
     background is on the list for --ghost, whose wash would otherwise snap instantly. */
  transition:color var(--duration-slow) var(--ease-in-out),
             background var(--duration-slow) var(--ease-in-out),
             border-color var(--duration-slow) var(--ease-in-out)}
.pc-btn--rounded{border-radius:var(--radius-lg)}
.pc-btn::after{content:"";position:absolute;z-index:-1;left:50%;bottom:0;width:130%;aspect-ratio:1;border-radius:50%;
  transform:translateX(-50%) translateY(102%);
  transition:transform var(--duration-slow) var(--ease-in-out),border-radius var(--duration-slow) var(--ease-in-out)}
.pc-btn:hover::after,.pc-btn:focus-visible::after{transform:translateX(-50%) translateY(6%);border-radius:var(--radius-lg)}
.pc-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus)}
.pc-btn--primary{background:var(--color-primary);color:var(--color-text-on-primary)}
.pc-btn--primary::after{background:var(--color-disc-reveal)}                 /* Fetch → white */
.pc-btn--secondary{background:var(--color-secondary);color:var(--color-text-on-dark)}
.pc-btn--secondary::after{background:var(--color-disc-reveal)}
.pc-btn--secondary:hover,.pc-btn--secondary:focus-visible{color:var(--color-text-on-primary)}
.pc-btn--outline{background:var(--color-surface);color:var(--color-text)}
.pc-btn--outline::after{background:var(--color-primary)}                     /* light → Fetch */
.pc-btn--outline:hover,.pc-btn--outline:focus-visible{color:var(--color-text-on-primary)}
/* Ghost — the 4th Button style. No fill, no border, so it can sit in a dense row (pagination,
   toolbars, "Prev/Next") without shouting. It is still a Button: same rung, same label flip.
   A subtle wash on hover replaces the rising disc (a disc needs a fill to rise into). */
.pc-btn--ghost{background:transparent;color:var(--color-text);border-color:transparent}
.pc-btn--ghost::after{display:none}
.pc-btn--ghost:hover,.pc-btn--ghost:focus-visible{background:var(--color-border-subtle)}

/* ── THE hover motion ── the label flips. This is the ONLY hover motion in the system; the Icon
   Button is the single exception (it has no label, so it rotates instead). Two stacked copies of
   the text slide up together. Applies to every Button AND every link context — nav, breadcrumb,
   footer, in-content — so hover feels identical everywhere and only the COLOUR differs.
   The second copy is injected by the DS enhancer (see starter.html / a product's main.js), so
   authors write plain markup and can never ship a button that only flips its background.
   line-height MUST come from --line-height-flip (1.35), not the Button's line-height:1 — at 1 the
   font box (1.308) overflows the window and overflow:hidden shears descenders ("p" in "recap"). */
.pc-flip{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;
  line-height:var(--line-height-flip)}
.pc-flip > span{display:block;transition:transform var(--duration-slow) var(--ease-in-out)}
/* the second copy's offset lives in `top`, NOT transform — the hover rule sets transform on BOTH
   copies, so a resting translateY(100%) would be overwritten and the label would slide clean out
   of view instead of flipping. Static offset + one shared transform = correct. */
.pc-flip > span + span{position:absolute;left:0;top:100%}
:is(.pc-btn,.pc-link,.pc-nav a):is(:hover,:focus-visible) .pc-flip > span{transform:translateY(-100%)}
@media (prefers-reduced-motion:reduce){.pc-flip > span{transition:none}}

/* ── Text field ── same height/padding/font-size rung as the ROUNDED Button, but body weight (400),
   not the Button's 800. Fixed height + centred content, so the border never changes the height. */
.pc-input{box-sizing:border-box;width:100%;height:var(--ctl-h);padding-inline:var(--ctl-pxf);
  font-size:var(--ctl-fs);font-family:var(--font-family-body);font-weight:400;line-height:1;
  background:var(--color-surface);color:var(--color-text);
  border:var(--border-medium) solid var(--color-border-subtle);border-radius:var(--radius-lg);
  transition:border-color var(--duration-base) var(--ease-standard)}
.pc-input::placeholder{color:var(--color-text-muted);opacity:1}
.pc-input:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 3px var(--color-focus)}
.pc-input[aria-invalid=true]{border-color:var(--color-danger)}
/* Text area — same shell, but it must grow, so padding-block replaces the fixed height */
.pc-textarea{height:auto;min-height:calc(2 * var(--ctl-h));padding-block:var(--space-16);
  line-height:var(--line-height-body);resize:vertical}

/* ── Select ── the Text-field shell + a trailing chevron. Chevron is a MASK filled with
   currentColor, so it flips ink→cream with the theme like every other DS icon. */
.pc-select{position:relative;display:block;color:var(--color-text);
  --pc-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolyline points='3.5 7.5 10 14 16.5 7.5' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E")}
.pc-select > .pc-input{appearance:none;-webkit-appearance:none;cursor:pointer;
  padding-inline-end:calc(var(--ctl-pxf) + var(--ctl-fs) + var(--space-8))}
.pc-select::after{content:"";position:absolute;pointer-events:none;right:var(--ctl-pxf);top:50%;
  translate:0 -50%;width:var(--ctl-fs);height:var(--ctl-fs);background:currentColor;
  -webkit-mask:var(--pc-chevron) center/contain no-repeat;mask:var(--pc-chevron) center/contain no-repeat}

/* ── Icon Button ── icon-only circle; diameter = the SAME rung height, so it lines up with a Button */
.pc-icon-btn{display:inline-grid;place-items:center;flex:none;cursor:pointer;padding:0;border:0;
  box-sizing:border-box;width:var(--ctl-h);height:var(--ctl-h);border-radius:var(--radius-pill);
  background:var(--color-border-subtle);color:var(--color-text);
  transition:transform var(--duration-page) var(--ease-standard),background var(--duration-page) var(--ease-standard),color var(--duration-page) var(--ease-standard)}
.pc-icon-btn svg,.pc-icon-btn .ico{width:50%;height:50%;display:block;vertical-align:0}
.pc-icon-btn:hover,.pc-icon-btn:focus-visible{background:var(--color-primary);color:var(--color-text-on-primary)}
.pc-icon-btn:hover{transform:rotate(90deg)}   /* rotate on HOVER only — never sticks after click/keyboard focus */
.pc-icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus)}
@media (prefers-reduced-motion:reduce){.pc-icon-btn:hover{transform:none}}

/* ── Chips (Badge, Label) ── rung S — FORCED by R1: body text has a 34px line box, so
   34 + 2×space-12 = 58px is the smallest a chip carrying body text can be. ONE chip size, not
   three. Borderless soft tint; tighter horizontal inset than a Button because a chip hugs a word,
   it isn't a target. Case is as authored — "The kit", not "THE KIT". */
.pc-badge,.pc-label{display:inline-flex;align-items:center;align-self:flex-start;gap:var(--space-8);
  box-sizing:border-box;height:var(--control-h-s);padding-inline:var(--space-16);
  color:var(--color-text);font-family:var(--font-family-body);font-weight:800;
  font-size:var(--font-size-body);text-transform:none;white-space:nowrap}
.pc-badge{border-radius:var(--radius-pill)}
.pc-label{border-radius:var(--radius-md)}
.pc-badge--fetch,.pc-label--fetch{background:var(--color-fetch-soft)}
.pc-badge--park,.pc-label--park{background:var(--color-park-soft)}
.pc-badge--sun,.pc-label--sun{background:var(--color-sun-soft)}

/* ── Link ── NO underline anywhere. A link is marked by COLOUR + WEIGHT, and confirmed by the
   hover flip. The weight is not decoration: --color-link vs body ink is only 1.31:1, so colour
   alone cannot distinguish a link inside a paragraph (WCAG 1.4.1 wants a non-colour cue, or
   ≥3:1 against the surrounding text). Bold is that cue and it costs no contrast.
   Three roles, differing ONLY in colour: */
/* ROLE 3 · prominent — inside main content, must out-read the copy around it. */
.pc-link{color:var(--color-link);text-decoration:none;font-weight:700;
  transition:color var(--duration-base) var(--ease-standard)}
/* ROLE 1 · plain — nav header, footer nav. Inherits body ink; the context already says "link". */
.pc-link--quiet{color:var(--color-text);font-weight:inherit}
/* ROLE 2 · muted — breadcrumb, legal. Quieter than the body copy on purpose; allowed slightly
   below AA precisely because it must read LIGHTER than the text beside it. */
.pc-link--muted{color:var(--color-link-muted);font-weight:inherit}
.pc-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus);border-radius:var(--radius-sm)}

/* ── Section header ── eyebrow + heading + lead. Opens almost every section.
   Bottom margin space-64 (was 48): landing surfaces are BOLD and airy — the head needs clear
   air before the content block or the section reads cramped (ref: Happly's section rhythm).
   MEASURE CAPS SIT ON THE CHILDREN, IN THEIR OWN FONT — a `max-width:34ch` on the container
   resolved against BODY's ch (~519px) and squeezed every H2 (whose ch is ~2× wider) onto
   3 cramped lines. The heading takes 28 of ITS ch; the lead takes 52 of body's. */
.pc-sec-head{display:grid;gap:var(--space-16);margin-bottom:var(--space-64)}
.pc-sec-head h2{font-size:var(--font-size-h2);line-height:var(--line-height-h2);letter-spacing:var(--letter-spacing-h2);max-width:28ch}
.pc-sec-head p{font-size:var(--font-size-lead);line-height:var(--line-height-lead);color:var(--color-text-muted);max-width:52ch}
.pc-sec-head--center{margin-inline:auto;justify-items:center;text-align:center}
.pc-sec-head--center p{margin-inline:auto}

/* ── Stat + Big stat ── the number IS the graphic, so it takes the display face */
.pc-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-32)}
.pc-stat b{display:block;font-family:var(--font-family-display);font-weight:700;
  font-size:var(--font-size-h2);line-height:1;letter-spacing:var(--letter-spacing-h2);color:var(--color-text)}
.pc-stat span{display:block;margin-top:var(--space-8);color:var(--color-text-muted)}
.pc-bigstat{text-align:center;padding-block:var(--space-64)}
.pc-bigstat b{display:block;font-family:var(--font-family-display);font-weight:700;
  font-size:var(--font-size-display);line-height:var(--line-height-display);letter-spacing:var(--letter-spacing-display)}
.pc-bigstat span{display:block;font-size:var(--font-size-lead);color:var(--color-text-muted);max-width:34ch;margin-inline:auto}

/* ── Split ── media beside text; --flip reverses. The alternating-row workhorse. */
.pc-split{display:grid;gap:var(--space-48);align-items:center;grid-template-columns:1fr}
@media (min-width:820px){.pc-split{grid-template-columns:1fr 1fr}
  .pc-split--flip .pc-split__media{order:2}}
.pc-split__media{border:var(--border-bold) solid var(--color-border);border-radius:var(--radius-xl);
  overflow:hidden;background:var(--color-accent);aspect-ratio:4/3}
.pc-split__media img,.pc-split__media video{width:100%;height:100%;object-fit:cover;display:block}
.pc-split__body{display:grid;gap:var(--space-16)}

/* ── Check list ── an affordance list; the tick is Park green, the text is body */
.pc-checks{display:grid;gap:var(--space-12);list-style:none;padding:0;margin:0}
.pc-checks li{display:flex;gap:var(--space-12);align-items:flex-start;font-size:var(--font-size-body)}
.pc-checks svg{width:1em;height:1em;flex:none;margin-top:.25em;color:var(--color-success)}

/* ── Spec list ── key/value rows. Hairline between rows, never a boxed table. */
.pc-specs{display:grid;grid-template-columns:1fr;margin:0}
@media (min-width:760px){.pc-specs{grid-template-columns:1fr 1fr;column-gap:var(--space-48)}}
.pc-spec{display:flex;justify-content:space-between;gap:var(--space-16);
  padding-block:var(--space-16);border-top:var(--border-thin) solid var(--color-border-subtle);
  transition:background var(--duration-base) var(--ease-standard)}
.pc-spec:hover{background:var(--color-border-subtle)}
.pc-spec__k{color:var(--color-text-muted)}
.pc-spec__v{font-weight:700;text-align:right}

/* ── Steps ── the numeral disc IS the Avatar component, Tone=Fetch (R4: no bespoke atom).
   Hence border-medium like every Avatar, not the Button's 4px. */
.pc-steps{display:grid;gap:var(--space-32);list-style:none;padding:0;margin:0;counter-reset:pcstep}
@media (min-width:820px){.pc-steps--row{grid-auto-flow:column;grid-auto-columns:1fr}}
.pc-steps li{display:grid;gap:var(--space-12);counter-increment:pcstep;align-content:start}
.pc-steps li::before{content:counter(pcstep);display:grid;place-items:center;
  width:var(--control-h-s);height:var(--control-h-s);border-radius:var(--radius-pill);
  background:var(--color-primary);color:var(--color-text-on-primary);
  border:var(--border-medium) solid var(--color-border);
  font-family:var(--font-family-body);font-weight:700;font-size:var(--font-size-body);line-height:1}
.pc-steps h3{font-size:var(--font-size-h4);line-height:var(--line-height-h4)}
.pc-steps p{color:var(--color-text-muted)}
/* --cards: each step packaged on the Card surface — a row of equal cards reads balanced where
   bare columns of ragged text heights don't. Sticker border like every Card. */
.pc-steps--cards li{background:var(--color-surface);border:var(--border-bold) solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-32)}

/* ── Card ── content block / feature / media card. Raised cards lift on hover (web only). */
.pc-card{background:var(--color-surface);border:var(--border-bold) solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-32);display:flex;flex-direction:column;gap:var(--space-16);
  transition:transform var(--duration-slow) var(--ease-in-out)}
.pc-card--raised{box-shadow:var(--elevation-card)}
.pc-card:hover{transform:translateY(-4px)}
.pc-card h4,.pc-card h3{font-size:var(--font-size-h4);line-height:var(--line-height-h4);letter-spacing:var(--letter-spacing-h4)}
.pc-card p{color:var(--color-text-muted);margin:0}
@media (prefers-reduced-motion:reduce){.pc-card:hover{transform:none}}

/* ── Testimonial ── sticker card + star rating + attribution.
   `color` is explicit on purpose: a Testimonial dropped onto a Forest band inherits cream, and
   cream on the card's cream surface is invisible. A light card always re-asserts ink. */
.pc-quote{display:grid;gap:var(--space-16);background:var(--color-surface);align-content:start;
  color:var(--color-text);
  border:var(--border-bold) solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-32)}
.pc-quote__stars{display:flex;gap:var(--space-4);color:var(--color-primary)}
.pc-quote__stars svg{width:1.2em;height:1.2em}
.pc-quote blockquote{margin:0;font-size:var(--font-size-lead);line-height:var(--line-height-lead)}
/* name = Body/Strong (inherits Body size), role = muted at the SAME size (R1).
   line-height 1.25 on BOTH lines, on purpose: at the body line-height (1.35) the two-line
   cluster runs 68px and overshoots the 58px avatar beside it — tightened, name+role read as
   one unit and the cluster optically centres on the avatar. Gap = space-16 to breathe. */
.pc-quote__who{display:flex;align-items:center;gap:var(--space-16)}
.pc-quote__who b{display:block;line-height:1.25}
/* use <small>, NOT a bare span — `.pc-quote__who span` would also match .pc-avatar (higher
   specificity than the .pc-avatar rule) and silently mute the initials to 6.9:1 in dark. */
.pc-quote__who small{display:block;font-size:inherit;line-height:1.25;color:var(--color-text-muted)}

/* ── Avatar ── a circle with initials is never hand-drawn. Sizes ride the control ladder
   (S default / M / L = 58/74/90 @1440, same rungs as every sized control). */
.pc-avatar{width:var(--control-h-s);height:var(--control-h-s);flex:none;border-radius:var(--radius-pill);
  display:grid;place-items:center;background:var(--color-park-soft);color:var(--color-text);
  border:var(--border-medium) solid var(--color-border);font-weight:800;font-size:var(--font-size-body)}
.pc-avatar--m{width:var(--control-h-m);height:var(--control-h-m)}
.pc-avatar--l{width:var(--control-h-l);height:var(--control-h-l);font-size:var(--font-size-control-l)}
.pc-avatar--fetch{background:var(--color-fetch-soft)}

/* ── Pull quote ── an oversized inline quote, no card. Use sparingly, once per page. */
.pc-pullquote{margin:0;padding-block:var(--space-48);max-width:24ch;
  font-family:var(--font-family-display);font-weight:700;
  font-size:var(--font-size-h3);line-height:var(--line-height-h3);letter-spacing:var(--letter-spacing-h3)}
.pc-pullquote cite{display:block;margin-top:var(--space-16);font-family:var(--font-family-body);
  font-weight:400;font-style:normal;font-size:var(--font-size-body);color:var(--color-text-muted)}

/* ── Price card ── the kit block. --featured is the one that carries the Fetch edge. */
.pc-price{display:grid;gap:var(--space-16);justify-items:start;background:var(--color-surface);
  border:var(--border-bold) solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-40)}
.pc-price--featured{background:var(--color-fetch-soft)}
.pc-price__amount{font-family:var(--font-family-display);font-weight:700;
  font-size:var(--font-size-h1);line-height:1;letter-spacing:var(--letter-spacing-h1)}
.pc-price__amount small{font-family:var(--font-family-body);font-weight:600;
  font-size:var(--font-size-body);color:var(--color-text-muted)}
.pc-price .pc-btn{width:100%}

/* ── CTA band ── full-bleed closing call to action on the Forest keepsake panel */
.pc-cta-band{background:var(--color-secondary);color:var(--color-text-on-dark);
  padding-block:var(--space-80);text-align:center}
.pc-cta-band h2{font-size:var(--font-size-h2);line-height:var(--line-height-h2);
  letter-spacing:var(--letter-spacing-h2);max-width:20ch;margin-inline:auto}
.pc-cta-band p{color:var(--color-text-on-dark);opacity:.9;max-width:46ch;margin:var(--space-16) auto 0}
.pc-cta-band .cta-row{justify-content:center;margin-top:var(--space-32)}

/* ── Accordion ── COMPONENTS.md `130:14`: surface, radius-lg, 4px sticker border, chevron rotates
   180° on expand. Body text is BODY size (R1 retired the old Body/Small).
   The BODY slides open too (hover-transition law: every click/hover change animates) —
   `::details-content` + interpolate-size animates height 0→auto with zero extra markup;
   engines without it (FF/Safari today) fall back to the instant toggle, never broken. */
.pc-acc{display:grid;gap:var(--space-16);interpolate-size:allow-keywords}
.pc-acc details::details-content{block-size:0;overflow:hidden;
  transition:block-size var(--duration-base) var(--ease-standard),
             content-visibility var(--duration-base) allow-discrete}
.pc-acc details[open]::details-content{block-size:auto}
.pc-acc details{background:var(--color-surface);border:var(--border-bold) solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--space-16) var(--space-24);
  transition:background var(--duration-base) var(--ease-standard)}
.pc-acc details:hover{background:var(--color-border-subtle)}
/* summary = Rethink, NOT Fredoka — the display face is a HEADING voice (H4 and up only); an
   interactive row at lead size takes the body face, bold. See the typography rule in prompt.md. */
.pc-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;gap:var(--space-16);
  font-family:var(--font-family-body);font-weight:700;font-size:var(--font-size-lead)}
.pc-acc summary::-webkit-details-marker{display:none}
.pc-acc summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-focus);border-radius:var(--radius-sm)}
.pc-acc summary .ico{transition:transform var(--duration-base) var(--ease-standard)}
.pc-acc details[open] summary .ico{transform:rotate(180deg)}
.pc-acc p{color:var(--color-text-muted);margin:var(--space-12) 0 0;max-width:70ch}

/* ── Alert ── soft theme-aware tint + 2px border, never a bare coloured block */
.pc-alert{display:flex;gap:var(--space-16);align-items:flex-start;
  padding:var(--space-16) var(--space-20);border-radius:var(--radius-lg);
  border:var(--border-medium) solid var(--color-border);
  background:var(--color-info-soft);color:var(--color-text)}
.pc-alert svg{width:1.4em;height:1.4em;flex:none}
.pc-alert--success{background:var(--color-park-soft)}
.pc-alert--warning{background:var(--color-sun-soft)}
.pc-alert--danger{background:var(--color-danger-soft)}

/* ── Breadcrumb ── */
.pc-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8);
  list-style:none;padding:0;margin:0;color:var(--color-text-muted)}
.pc-crumbs li{display:flex;align-items:center;gap:var(--space-8)}
.pc-crumbs li+li::before{content:"/";color:var(--color-text-muted);opacity:.6}
.pc-crumbs [aria-current=page]{color:var(--color-text);font-weight:700}

/* ── Pagination ── NOT its own control: a row of Buttons (R4). Ghost for the pages, Primary for
   the current one. The organism only tightens the inset so numerals read as squares. */
.pc-pager{display:flex;gap:var(--space-8);align-items:center;list-style:none;padding:0;margin:0}
.pc-pager .pc-btn{padding-inline:var(--space-16);min-width:var(--control-h-s)}

/* ── Table ── hairline rows, no vertical rules, ink header */
.pc-table{width:100%;border-collapse:collapse}
.pc-table th,.pc-table td{text-align:left;padding:var(--space-16);
  border-bottom:var(--border-thin) solid var(--color-border-subtle)}
.pc-table th{font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--color-text-muted);border-bottom-width:var(--border-medium);border-bottom-color:var(--color-border)}
.pc-table tbody tr{transition:background var(--duration-base) var(--ease-standard)}
.pc-table tbody tr:hover{background:var(--color-border-subtle)}

/* ── Nav ── the bordered pill bar (app/product variant, Figma `175:3`). Landings use the
   full-bleed sticky "site header" variant instead — see COMPONENTS.md. */
.pc-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);
  padding:var(--space-16) var(--space-24);background:var(--color-surface);
  border:var(--border-medium) solid var(--color-border);border-radius:var(--radius-lg)}
.pc-nav .links{display:flex;gap:var(--space-24);font-weight:700}
.pc-nav a{color:var(--color-text);text-decoration:none}  /* flip on hover, NO colour change, NO underline */

/* ── Footer ── column nav + bottom bar */
.pc-footer{border-top:var(--border-medium) solid var(--color-border-subtle);padding-block:var(--space-64)}
.pc-footer__cols{display:grid;gap:var(--space-40);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* R1: a column heading is BODY size — weight + caps + tracking + muted make it a heading */
.pc-footer h4{font-family:var(--font-family-body);font-weight:800;font-size:var(--font-size-body);
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--color-text-muted);margin-bottom:var(--space-16)}
.pc-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-12);
  font-size:var(--font-size-body)}   /* R1: footer NAV links are body — only the legal bar steps down */
/* --font-size-fine — allow-list #1 (legal / policy / © row) */
.pc-footer__bar{display:flex;flex-wrap:wrap;gap:var(--space-16);justify-content:space-between;
  align-items:center;margin-top:var(--space-48);padding-top:var(--space-24);
  border-top:var(--border-thin) solid var(--color-border-subtle);
  font-size:var(--font-size-fine);line-height:var(--line-height-fine);color:var(--color-text-muted)}
/* a <small> inside the bar must NOT shrink again (UA small = .8em would stack under fine) */
.pc-footer__bar small{font-size:inherit}

/* ── Logo strip ── "as seen in". Marks are ink at reduced opacity so they never fight the page. */
.pc-logos{display:flex;flex-wrap:wrap;gap:var(--space-48);align-items:center;justify-content:center;
  padding-block:var(--space-32);color:var(--color-text);opacity:.55}
.pc-logos > *{height:1.4rem;width:auto}

/* ── Wordmark ── Pawc●st, the `a` is an orange REC dot; ink flips via currentColor. Ratio 541:107. */
.pc-logo{height:1.9rem;width:auto;aspect-ratio:541/107;display:block;color:var(--color-text)}

/* ── R3 · alignment helpers ──
   Text beside a control → BASELINE (first-baseline). Measured 0.00px against line 1 even on a
   4-line paragraph, where `center` is 56px out. Control beside control → `center`, because an
   icon-only control has no text baseline to align to. */
.pc-baseline{display:flex;gap:var(--space-24);align-items:baseline;flex-wrap:wrap}
.cta-row{display:flex;gap:var(--space-16);flex-wrap:wrap;align-items:center}

/* ── Scroll reveal ── slow rise; the transition is only armed once .is-in lands, so the resting
   state never animates in on load. */
.pc-reveal{opacity:0;transform:translateY(var(--reveal-distance))}
.pc-reveal.is-in{opacity:1;transform:none;
  transition:opacity var(--duration-reveal) var(--ease-standard),transform var(--duration-reveal) var(--ease-standard)}
@media (prefers-reduced-motion:reduce){.pc-reveal{opacity:1;transform:none}}