/* Clear & Kind Canine design system: components.
   One block per component; each is documented on /design-system
   (development only). Semantic tokens only; no raw colors. */

@layer components {

  /* ---------- Skip link, draft banner, TODO markers ---------- */
  .skip-link {
    position: absolute;
    left: var(--space-16);
    top: var(--space-16);
    z-index: 100;
    padding: var(--space-12) var(--space-16);
    background: var(--surface-inverse);
    color: var(--text-on-inverse);
    border-radius: var(--radius-control);
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; outline-color: var(--focus-ring-on-inverse); outline-offset: -6px; }

  .draft-banner {
    background: var(--accent-highlight);
    color: var(--text-strong);
    padding: var(--space-12) var(--gutter);
    font-size: var(--type-body-sm);
    text-align: center;
  }

  .todo {
    display: inline;
    font-family: var(--font-sans);
    font-size: var(--type-body-sm);
    font-weight: var(--weight-medium);
    line-height: var(--leading-tight);
    letter-spacing: 0;
    text-transform: none;
    padding: 0 var(--space-4);
    outline: 1.5px dashed var(--text-strong);
    outline-offset: 1px;
    background: var(--surface-raised);
    color: var(--text-strong);
  }
  .todo-block {
    border: 1.5px dashed var(--text-strong);
    border-radius: var(--radius-control);
    padding: var(--space-12) var(--space-16);
    font-size: var(--type-body-sm);
    line-height: var(--leading-body);
    background: var(--surface-raised);
    color: var(--text-strong);
    max-width: var(--layout-prose);
  }
  .todo-block .todo { outline: none; padding: 0; }
  h1 .todo { font-size: max(1rem, .4em); }

  /* ---------- Eyebrow: small uppercase label above a heading ---------- */
  .eyebrow {
    font-family: var(--font-sans);
    font-size: var(--type-eyebrow);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--text-strong);
  }
  .on-dark .eyebrow { color: var(--text-on-inverse-label); }

  /* ---------- Titles and headings (serif) ---------- */
  .title { font-family: var(--font-serif); font-weight: var(--weight-regular); line-height: var(--leading-display); text-wrap: balance; }
  .title--xl { font-size: var(--type-display-xl); line-height: 1.06; }
  .title--lg { font-size: var(--type-display-lg); line-height: 1.06; }
  .title--md { font-size: var(--type-display-md); line-height: 1.1; }
  .heading { font-family: var(--font-serif); font-weight: var(--weight-regular); line-height: var(--leading-heading); }
  .heading--xl { font-size: var(--type-heading-xl); line-height: 1.1; }
  .heading--lg { font-size: var(--type-heading-lg); }
  .heading--md { font-size: var(--type-heading-md); }
  .heading--sm { font-size: var(--type-heading-sm); }
  .heading--xs { font-size: var(--type-heading-xs); line-height: var(--leading-title); }

  /* Text styles */
  .lead { font-size: var(--type-lead); line-height: var(--leading-body); color: var(--text-muted); max-width: 42em; }
  .on-dark .lead { color: var(--text-on-inverse); }
  .body { font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-muted); }
  .on-dark .body { color: var(--text-on-inverse); }
  .note { font-size: var(--type-ui); line-height: var(--leading-body); color: var(--text-muted); }
  .on-dark .note { color: var(--text-on-inverse-muted); }
  .meta {
    font-size: var(--type-eyebrow);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    color: var(--text-muted);
  }
  .statement { font-family: var(--font-serif); font-size: var(--type-heading-xs); line-height: var(--leading-title); color: var(--text-strong); }
  .on-dark .statement { color: var(--text-on-inverse); }

  /* ---------- Hand-drawn art from the Figma file (decoration only) ---------- */
  .svg { flex: none; }
  .scribble { color: var(--accent-primary); height: auto; pointer-events: none; }
  .scribble--title { width: min(236px, 60%); }
  .scribble--headline { width: min(270px, 70%); }
  .scribble--short { width: 140px; }
  .sketch { color: var(--accent-sketch); }
  .accent-heart { color: var(--accent-primary); }
  .accent-sun { color: var(--accent-highlight); }

  /* ---------- Rule ---------- */
  .rule { border: 0; border-top: 1px solid var(--border-subtle); margin: 0; width: 100%; }
  .on-dark .rule { border-top-color: var(--border-on-inverse); }
  .band--tint .rule { border-top-color: var(--border-field); }

  /* ---------- Header and navigation ---------- */
  .site-header {
    background: var(--surface-page);
    border-bottom: 1px solid var(--border-subtle);
  }
  .site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8) var(--space-24);
    min-height: var(--header-height);
    padding-block: var(--space-12);
  }

  /* The top row (logo, tablet CTA, menu button) always spans the full header
     height (the logo link sets it; the others center in it), so opening the menu, which wraps the nav onto new lines, doesn't
     lift the logo (Scott, 2026-10-20). */
  .site-header__inner > .brand { min-height: calc(var(--header-height) - 2 * var(--space-12)); }

  /* Brand link: the header logo (Figma 2263:10085). public/svg/emblem.svg is kept. */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    text-decoration: none;
    color: var(--text-strong);
  }
  /* Header logo (Figma 283×56); the smaller phone size (44px) up to the
     desktop nav at 1024px, so tablets use it too (Scott, 2026-10-19). */
  .brand--logo { display: inline-flex; line-height: 0; }
  .brand__logo { display: block; width: auto; height: 44px; }
  @media (min-width: 1024px) { .brand__logo { height: 56px; } }
  /* Easter egg: the hero hearts (Home, Programs) swap the logo's dog (public/js/site.js). */
  .easter-heart { pointer-events: auto; }
  /* Easter egg: html.logo-face shows the front-facing dog (set by site.js). */
  .brand__logo--face { display: none; }
  .logo-face .brand__logo--main { display: none; }
  .logo-face .brand__logo--face { display: block; }
  .brand--wiggle { animation: logo-wiggle 400ms ease-out; }
  @keyframes logo-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }

  .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16) 30px; }
  .site-nav ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-32);
    margin: 0;
  }
  .site-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--type-ui);
    line-height: normal;
    text-decoration: none;
    color: var(--text-strong);
  }
  /* Page indicator: 2px coral bar under the label. Decoration only: the
     current page is also semibold and carries aria-current. */
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: 4px;
    height: 2px;
    background: var(--indicator-current);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease-out;
  }
  .site-nav a:hover::after,
  .site-nav a:is([aria-current="page"], [aria-current="true"])::after { transform: scaleX(1); }
  .site-nav a:is([aria-current="page"], [aria-current="true"]) { font-weight: var(--weight-semibold); }

  /* Menu button (Figma mobile: a 44px three-line glyph). */
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--text-strong);
    cursor: pointer;
  }
  .nav-toggle .svg--menu { width: 44px; height: 44px; }
  .nav-toggle .icon { width: 24px; height: 24px; }
  .nav-toggle__close { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

  /* Below 1024px with JavaScript: the nav folds behind the menu button.
     Without JavaScript the nav wraps under the brand. The DOM order is the
     visual order (WCAG 2.4.3). */
  @media (max-width: 1023.98px) {
    .site-nav { width: 100%; }
    /* Shown from the first paint (it used to wait for site.js to remove a
       [hidden] attribute on DOMContentLoaded, and its late appearance pushed
       the tablet "Get in Touch" 60px left; Scott, 2026-10-20). .js is set in
       <head> before the body renders, so the button only shows when the
       script that wires it will run; without JS it stays display: none. */
    .js .nav-toggle { display: inline-flex; }
    .js .site-nav { display: none; }
    .js .site-nav.is-open { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: var(--space-16); animation: menu-in 200ms ease-out; }
    .js .site-nav ul { width: 100%; }
    .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-8) var(--space-12); }
    .js .site-nav a { width: 100%; font-size: var(--type-body); }
    .js .site-nav a::after { right: auto; width: 40px; }
  }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  /* ---------- Button (Figma "Action": 52px, radius 6, Inter semibold 14) ---------- */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-20);
    min-height: 52px;
    padding: var(--space-12) var(--space-24);
    border: 0;
    border-radius: var(--radius-control);
    font-family: var(--font-sans);
    font-size: var(--type-body-sm); /* 15px: buttons and text CTAs share one size (Scott, 2026-10-20) */
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, transform 150ms ease-out;
  }
  .button:active { transform: translateY(1px); }
  .button .svg { width: 18px; height: 18px; }
  .button .todo { background: transparent; color: inherit; outline-color: currentColor; }

  /* Primary: ink on coral (4.7:1). The label carries the meaning. */
  .button--primary { background: var(--action-primary-bg); color: var(--action-primary-text); }
  /* Hover lightens (ink on the mix: 5.5:1); darkening would drop under 4.5:1. */
  .button--primary:hover { background: color-mix(in srgb, var(--action-primary-bg) 85%, var(--white)); }
  /* Secondary: cream on ink. */
  .button--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  .button--secondary:hover { background: color-mix(in srgb, var(--action-secondary-bg) 85%, var(--surface-page)); }
  .button[disabled] { opacity: .7; cursor: progress; }
  /* Outline (Figma "Back to About Us"): ink border and text, no fill. */
  .button--outline { background: transparent; color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--text-strong); }
  .button--outline:hover { background: color-mix(in srgb, var(--text-strong) 6%, transparent); }
  /* Arrow first, pointing back (the Figma arrow, mirrored). */
  .button--back .svg { order: -1; transform: scaleX(-1); }

  /* ---------- Arrow link (Figma "Explore Our Programs", "Learn more") ---------- */
  .arrow-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 44px;
    font-size: var(--type-body-sm); /* 15px, same as button labels (Scott, 2026-10-20) */
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }
  .arrow-link { color: var(--text-strong); }
  .on-dark .arrow-link { color: var(--text-on-inverse); }
  .arrow-link:hover span { text-decoration: underline; }
  .arrow-link .svg { width: 20px; height: 18px; }

  /* ---------- Contact line: icon + text (Home hero) ---------- */
  .contact-lines { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); }
  .contact-line {
    display: inline-flex;
    align-items: center;
    gap: var(--space-12);
    min-height: 32px;
    font-size: var(--type-body-sm);
    text-decoration: none;
  }
  .contact-line:hover { text-decoration: underline; }
  .contact-line .svg { width: 17px; height: 17px; }

  /* ---------- Detail list: icon, label, value (Contact) ---------- */
  .detail-list { display: flex; flex-direction: column; gap: var(--space-28); margin: 0; }
  .detail { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--space-8) var(--space-16); }
  .detail .svg { grid-row: 1 / span 2; width: 22px; height: 22px; }
  .detail dt {
    font-size: var(--type-micro);
    font-weight: var(--weight-semibold);
    line-height: normal;
    text-transform: uppercase;
  }
  .detail dd { margin: 0; font-size: var(--type-body); line-height: var(--leading-body); color: var(--text-muted); }
  .detail dd a { color: var(--text-strong); } /* inline links: ink everywhere (CTA report) */
  .detail dd a[href^="tel:"] { white-space: nowrap; } /* keep a phone number in a sentence on one line */
  .detail--rule { border-top: 1px solid var(--border-subtle); padding-top: var(--space-28); }

  /* ---------- Program card (Figma "Program summary") ---------- */
  .cards {
    display: grid;
    gap: var(--space-24);
    margin: 0;
  }
  @media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .card {
    display: flex;
    flex-direction: column;
    gap: 23px; /* Figma 2116:2342 */
    padding: var(--space-32);
    border-radius: var(--radius-card);
    color: var(--text-strong);
  }
  .card__icon { width: 32px; height: 32px; }
  .card__title {
    font-family: var(--font-serif);
    font-size: var(--type-heading-xs);
    line-height: var(--leading-title);
    letter-spacing: .01em;
  }
  .card__text { font-size: var(--type-body); line-height: var(--leading-body); flex: 1 0 auto; }
  /* "Learn more": label left, arrow right (Figma "Program link"). */
  .card__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    min-height: 32px;
    padding-top: var(--space-8);
    font-size: var(--type-body-sm); /* 15px, same as button labels (Scott, 2026-10-20; Figma 17px) */
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }
  .card__link:hover span { text-decoration: underline; }
  .card__link .svg { width: 20px; height: 18px; }
  /* Components outrank .on-dark (base layer), so a dark card sets its own text color. */
  .card--inverse { background: var(--surface-inverse); color: var(--text-on-inverse); }
  .card--inverse .card__icon { color: var(--accent-primary); }
  /* "Learn more" and its arrow on the dark card: sand (Figma 2116:2342, 2026-10-20). */
  .card--inverse .card__link { color: var(--surface-alt); }
  /* The Puppy Foundations paw is always the icon blue (Figma 2163:4013, Scott 2026-10-19; was sage). */
  .card .svg--program-puppy-foundations { color: var(--accent-icon); }
  /* Private Coaching trophy on the sand card: coral (Figma 2163:4036). */
  .card--alt .card__icon { color: var(--accent-primary); }
  .card--tint { background: var(--surface-tint); }
  .card--alt { background: var(--surface-alt); }

  /* ---------- Client stories (Figma "Client praise") ---------- */
  .stories__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24); padding-bottom: var(--space-24); }
  /* The big quotation mark is drawn by CSS, so it adds no text to the page. */
  .stories__head::after {
    content: "\201C" / "";
    font-family: var(--font-quote);
    font-size: 100px;
    line-height: .8;
    color: var(--accent-primary);
    transform: scaleY(-1) rotate(180deg);
    font-variation-settings: "SOFT" 0, "WONK" 1;
  }
  .story-grid { display: grid; gap: var(--space-24); margin: 0; }
  @media (min-width: 768px) { .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1024px) {
    .story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .story--featured { grid-column: span 2; }
  }
  .story {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-card);
    background: var(--surface-inverse-raised);
    border: 1px solid var(--border-on-inverse);
  }
  .story figure { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-24); height: 100%; padding: var(--space-28); }
  .story blockquote p {
    font-family: var(--font-quote);
    font-size: var(--type-quote);
    line-height: var(--leading-quote);
    font-variation-settings: "SOFT" 0, "WONK" 1;
    color: var(--text-on-inverse);
  }
  .story figcaption {
    font-size: var(--type-micro);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    color: var(--text-on-inverse-label);
  }
  /* Featured story (Figma 2116:2382): sand card with a cream border, the
     quote in Noto Serif 26px upright, top-aligned with a 26px gap. */
  .story--featured { background: var(--surface-alt); border-color: var(--surface-page); }
  .story--featured figure { justify-content: flex-start; gap: 26px; padding: var(--space-28); }
  @media (min-width: 768px) { .story--featured figure { padding: 38px; } }
  .story--featured blockquote p { font-family: var(--font-serif); font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.625rem); font-style: normal; font-variation-settings: normal; line-height: 1.5; color: var(--text-strong); }
  .story--featured figcaption { color: var(--text-muted); }
  .story--featured { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }

  /* ---------- Photo slot ---------- */
  .photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-card); background: var(--surface-alt); }
  .photo img { width: 100%; height: 100%; object-fit: cover; }
  /* The photo's <picture> (sized copies) takes no box of its own. */
  .photo picture { display: contents; }
  .photo--placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-12);
    padding: var(--space-16);
    border: 1.5px dashed var(--border-field);
    color: var(--text-muted);
    text-align: center;
  }
  .photo__icon { width: 32px; height: 32px; }
  .photo--portrait { gap: 22px; border: 0; }
  .photo__portrait { width: 116px; height: 142px; color: var(--accent-sketch); }
  .photo__label { font-size: var(--type-caption); font-weight: var(--weight-medium); }
  /* Aspect ratios of the Figma photo frames. */
  .ratio-52-59 { aspect-ratio: 52 / 59; }       /* Home hero 520×590 */
  .ratio-241-225 { aspect-ratio: 241 / 225; }   /* Programs intro 482×450 */
  .ratio-129-97 { aspect-ratio: 129 / 97; }     /* program rows 516×388 */
  .ratio-21-20 { aspect-ratio: 21 / 20; }       /* Home gallery 294×280 */
  .ratio-110-97 { aspect-ratio: 110 / 97; }     /* About collage 220×194 */
  .ratio-45-47 { aspect-ratio: 45 / 47; }       /* About collage 270×282 */
  .ratio-87-122 { aspect-ratio: 87 / 122; }     /* About collage 174×244 */
  .ratio-122-115 { aspect-ratio: 122 / 115; }   /* About collage 244×230 */
  .ratio-304-175 { aspect-ratio: 304 / 175; }   /* About trainer portrait 608×350 */
  .ratio-7-5 { aspect-ratio: 7 / 5; }           /* Trainer bio hero 728×520 */
  .ratio-3-2 { aspect-ratio: 3 / 2; }           /* About trainer profiles 560×373 */
  .ratio-147-155 { aspect-ratio: 147 / 155; }   /* About mission photo 588×620 */
  .ratio-57-50 { aspect-ratio: 57 / 50; }       /* Trainer bio, other trainer 342×300 */

  /* ---------- Step (How It Works "Training journey step"; Figma 2417:388, Scott 2026-10-28) ---------- */
  /* The divider runs inside the container, from the marker to the text's edge. */
  .step__inner { display: grid; gap: var(--space-20) var(--space-40); grid-template-columns: 56px minmax(0, 1fr); align-items: start; padding-block: var(--space-40); border-top: 1px solid var(--border-subtle); }
  .step:last-child .step__inner { padding-bottom: var(--space-64); }
  .step__marker {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-round);
    background: var(--surface-inverse);
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-on-inverse);
    -webkit-font-smoothing: antialiased;
  }
  .step__heading { display: flex; flex-direction: column; gap: var(--space-20); align-self: center; }
  .step__title { font-size: var(--type-heading-sm); line-height: var(--leading-heading); }
  .step__subtitle { color: var(--text-muted); }
  .step__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-24); padding-top: 6px; }
  .step__body .note { color: var(--text-muted); }
  .step__body .rule { border-top-color: var(--border-field); }
  .step__body { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); color: var(--text-muted); }
  .step__body > p:first-child { color: var(--text-strong); }
  .step__body strong { color: var(--text-strong); }
  /* Desktop: the title above its text, both beside the marker, text 800px wide. */
  @media (min-width: 1024px) {
    .step__inner { grid-template-columns: 76px minmax(0, 800px); row-gap: var(--space-24); padding-block: 42px; }
    .step:last-child .step__inner { padding-bottom: var(--space-64); }
    .step__marker { grid-row: 1 / span 2; width: 76px; height: 76px; font-size: 2.125rem; }
    .step__heading { align-self: start; padding-top: 10px; }
    .step__title { font-size: var(--type-heading-lg); line-height: 1.15; }
    .step__body { grid-column: 2; }
  }

  /* ---------- Accordion (Figma "What's included", collapsed) ---------- */
  .accordion { width: 100%; border-block: 1px solid var(--border-subtle); }
  .accordion summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    min-height: 56px;
    font-size: var(--type-body-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion__icon { width: 20px; height: 20px; transition: transform var(--duration) ease-out; }
  .accordion[open] .accordion__icon { transform: rotate(45deg); }
  .accordion ul { margin: 0; padding: 0 0 var(--space-20) 1.25rem; color: var(--text-muted); }
  .accordion li + li { margin-top: var(--space-4); }

  /* ---------- FAQ accordion (questions are headings; Scott, 2026-10-28) ---------- */
  .faq { width: 100%; border-bottom: 1px solid var(--border-on-tint); }
  .faq__item { border-top: 1px solid var(--border-on-tint); }
  .faq__question { font: inherit; text-wrap: pretty; }
  .faq__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    width: 100%;
    min-height: 60px;
    padding: var(--space-16) var(--space-32) var(--space-16) 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--type-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-semibold);
    text-align: left;
    color: var(--text-strong);
    cursor: pointer;
  }
  .faq__toggle .accordion__icon { flex: none; width: 16px; height: 16px; }
  .faq__toggle[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
  .faq__answer { padding-bottom: var(--space-20); color: var(--text-muted); max-width: var(--layout-prose); }
  .js .faq__question:has(> [aria-expanded="false"]) + .faq__answer { display: none; }

  /* ---------- Program row (Programs) ---------- */
  /* Top-aligned, so opening "What's Included" grows the text column
     downward and the photo stays where it is. */
  .program { display: grid; gap: var(--space-32); align-items: start; padding-block: var(--space-48); border-top: 1px solid var(--border-subtle); }
  /* No rule directly under the section label: rows are divided from each other only (Scott, 2026-10-20). */
  .program:first-child { border-top: 0; }
  @media (min-width: 1024px) {
    .program { padding-block: 52px; }
    .program--with-media { grid-template-columns: minmax(0, 516fr) minmax(0, 644fr); gap: var(--space-88); }
    .program--with-media.program--media-end { grid-template-columns: minmax(0, 644fr) minmax(0, 516fr); }
    .program--media-end .program__media { order: 2; }
  }
  .program__info { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 46rem; }
  .program__heading { display: flex; flex-direction: column; gap: var(--space-14); }
  .program__title { font-size: var(--type-heading-lg); line-height: var(--leading-heading); }
  .program__tagline { font-size: 1rem; font-weight: var(--weight-medium); line-height: 1.4; color: var(--text-muted); }
  .program__tagline.meta { font-size: var(--type-eyebrow); }
  .program__media .photo { width: 100%; }

  /* ---------- Price list (Figma "Package options") ---------- */
  .price-list { width: 100%; margin: 0; }
  .price-list__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-16);
    min-height: 66px;
    border-bottom: 1px solid var(--border-on-tint);
  }
  .price-list dt { font-size: var(--type-body); }
  .price-list dd { margin: 0; font-family: var(--font-serif); font-size: var(--type-heading-xs); line-height: 1.2; }

  /* ---------- Price summary (Programs) ---------- */
  .price-line { font-family: var(--font-serif); font-size: var(--type-heading-xs); line-height: var(--leading-title); }
  .price-line strong { font-weight: var(--weight-regular); }

  /* ---------- Credentials list ---------- */
  .check-list { display: grid; gap: var(--space-12) var(--space-32); margin: 0; }
  @media (min-width: 768px) { .check-list { grid-template-columns: 1fr 1fr; } }
  .check-list li { display: flex; gap: var(--space-12); align-items: flex-start; }
  .check-list .icon { width: 22px; height: 22px; margin-top: 2px; color: var(--text-on-inverse-label); }
  .band--tint .check-list .icon, .band:not(.on-dark) .check-list .icon { color: var(--text-muted); }

  /* ---------- Form (Figma "Inquiry form") ---------- */
  .form-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
    padding: var(--space-24);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-panel);
  }
  @media (min-width: 768px) { .form-panel { padding: var(--space-40); } }
  .form-panel__title { font-size: var(--type-heading-sm); line-height: normal; }
  .form { display: grid; gap: var(--space-24); }
  .form-note { font-size: var(--type-caption); color: var(--text-muted); }
  /* A field stacks label, hint, message (the error) and control. Spacing is a
     top margin, not a gap, so an empty message slot takes no room. */
  .field { display: flex; flex-direction: column; }
  .field > * + * { margin-top: var(--space-8); }
  .field > .field__hint { margin-top: var(--space-4); }
  .field > .field__message:empty { margin-top: 0; }

  /* Phone and Email side by side (Figma "Contact fields"). From 640px the two
     fields' parts share grid rows, so their inputs stay level even when only
     one shows a hint or an error. The fields themselves keep their classes
     (display: contents only drops their box). */
  .field-pair { display: grid; gap: var(--space-24); }
  @media (min-width: 640px) {
    .field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-20); row-gap: 0; }
    .field-pair > .field { display: contents; }
    .field-pair > .field:first-child > * { grid-column: 1; }
    .field-pair > .field:last-child > * { grid-column: 2; }
    .field-pair .field__label { grid-row: 1; }
    .field-pair .field__hint { grid-row: 2; }
    .field-pair .field__message { grid-row: 3; }
    .field-pair .field > :last-child { grid-row: 4; }
  }
  .field__label { display: flex; align-items: baseline; gap: 2px; font-size: var(--type-ui); font-weight: var(--weight-medium); line-height: normal; }
  /* Required: an asterisk after the label (Figma 2116:1958). Ink, not Figma's coral:
     it carries meaning, and coral on white is 2.6:1 (Scott, 2026-10-29). Screen
     readers get "required" from the input instead. */
  .field__required { font-weight: var(--weight-semibold); color: var(--text-strong); }
  .form__legend { margin-top: calc(-1 * var(--space-8)); font-size: var(--type-caption); color: var(--text-muted); }
  /* Hint: under the label, always visible (not placeholder text). */
  .field__hint { margin-top: -4px; font-size: var(--type-caption); line-height: 1.4; color: var(--text-muted); }
  /* Format guide (USWDS-style input mask): the remaining ___-___-____ drawn
     over the input while it's focused. The typed part is invisible but takes
     the same width, so the guide lines up after what's been typed. */
  .field__masked { position: relative; }
  .field__guide {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    padding: 0 17px;
    font-size: var(--type-body-sm);
    white-space: pre;
    color: var(--border-input);
    pointer-events: none;
  }
  .field__masked.is-guiding .field__guide { display: flex; }
  .field--error .field__guide { padding-inline: 19px; }
  .field__guide-typed { visibility: hidden; }
  .field input, .field textarea, .field select {
    width: 100%;
    min-height: 54px;
    padding: var(--space-16);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-control);
    background: var(--surface-raised);
    color: var(--text-strong);
    font-size: var(--type-body-sm);
    line-height: normal;
    scroll-margin-top: 8rem;
  }
  /* Field borders: 1px blue on white is decoration; the label and the
     field's shape identify it. Focus gets the full ink ring. */
  .field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--text-strong); }
  /* Autofilled fields. Chrome paints its own background with !important, so a
     wide inset shadow covers it with the design's tint. Two rules, not one
     list: a browser that doesn't know a selector would drop the whole list. */
  .field input:autofill {
    box-shadow: inset 0 0 0 100px var(--surface-autofill);
    -webkit-text-fill-color: var(--text-strong);
    caret-color: var(--text-strong);
  }
  .field input:-webkit-autofill {
    box-shadow: inset 0 0 0 100px var(--surface-autofill);
    -webkit-text-fill-color: var(--text-strong);
    caret-color: var(--text-strong);
  }
  .field textarea { min-height: 150px; resize: vertical; }
  .field__select { position: relative; }
  .field select { appearance: none; padding-right: 48px; cursor: pointer; }
  .field__select .svg { position: absolute; right: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; pointer-events: none; }
  .form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-24); padding-top: var(--space-4); }
  .form__privacy { font-size: var(--type-body-sm); color: var(--text-muted); }
  .form__privacy a { color: var(--text-strong); }

  /* Errors: never color alone. A thicker border, an icon and text. */
  .field--error input, .field--error textarea, .field--error select { border: 3px solid var(--text-strong); }
  .field__error { display: flex; gap: var(--space-8); align-items: flex-start; font-size: var(--type-ui); font-weight: var(--weight-medium); line-height: 1.4; }
  /* flex: none keeps the icon full size when the message wraps. */
  .field__error .icon, .form-alert .icon { flex: none; width: 20px; height: 20px; margin-top: 0; }
  .form-alert a { color: inherit; }
  .error-summary, .form-alert {
    max-width: var(--layout-prose);
    border: 3px solid var(--text-strong);
    border-radius: var(--radius-control);
    padding: var(--space-16) var(--space-24);
    background: var(--surface-raised);
  }
  .error-summary__title { font-family: var(--font-sans); font-size: var(--type-body); font-weight: var(--weight-semibold); margin: 0 0 var(--space-8); }
  .error-summary ul { margin: 0; padding-left: 1.25rem; }
  .form-alert p { display: flex; gap: var(--space-8); }

  /* Honeypot: hidden from everyone; only bots fill it. */
  .hp { display: none; }

  .link-list { display: grid; gap: var(--space-8); }

  /* ---------- Footer ---------- */
  .site-footer {
    background: var(--surface-inverse);
    color: var(--text-on-inverse);
    padding-block: var(--space-48) var(--space-32);
    font-size: var(--type-ui);
    line-height: normal;
  }
  /* Figma footer 2172:6215: name, service area and contact on the left; the
     site and legal links in two columns on the right; a rule, then the
     payment statement and the copyright line. */
  .site-footer__inner { display: flex; flex-direction: column; gap: var(--space-32); }
  .site-footer__info { display: grid; gap: var(--space-32); }
  @media (min-width: 768px) { .site-footer__info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .site-footer__business { display: flex; flex-direction: column; gap: var(--space-24); }
  .site-footer__identity { display: flex; flex-direction: column; gap: var(--space-4); }
  .site-footer__name { font-family: var(--font-serif); font-size: var(--type-brand); }
  /* Text, so the label color (7.6:1), not the icon blue (4.2:1; palette switch, Scott 2026-10-29). */
  .site-footer__area { font-size: var(--type-caption); line-height: 1.65; color: var(--text-on-inverse-label); }
  .site-footer a { display: inline-flex; align-items: center; min-height: 24px; }
  .site-footer__contact { display: flex; flex-direction: column; gap: var(--space-16); font-style: normal; }
  .site-footer__contact a { gap: var(--space-12); text-decoration: none; }
  .site-footer__contact a:hover { text-decoration: underline; }
  /* Outline phone and mail at 22px, the card at 24px (Figma footer 2415:104, Scott 2026-10-28). */
  .site-footer .svg--phone, .site-footer .svg--mail, .site-footer .svg--icon-secure-payment { flex: none; width: 24px; height: 24px; color: var(--text-on-inverse-label); }
  .site-footer .svg--phone, .site-footer .svg--mail { width: 22px; height: 22px; }
  .site-footer__navs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-32); }
  .site-footer__navs ul { display: flex; flex-direction: column; gap: 7px; margin: 0; }
  .site-footer__navs a { text-decoration: none; }
  .site-footer__navs a:hover, .site-footer__links a[aria-current="page"], .site-footer__links a[aria-current="true"] { text-decoration: underline; }
  .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-14) var(--space-24); padding-top: var(--space-24); border-top: 1px solid var(--border-on-inverse); }
  .site-footer__payment { display: flex; flex: 1 1 32rem; gap: var(--space-12); align-items: flex-start; font-size: var(--type-caption); line-height: 1.6; color: var(--text-on-inverse-label); }
  .site-footer__copyright { font-size: var(--type-eyebrow); color: var(--text-on-inverse-label); }

  /* ---------- Policy pages ---------- */
  .policy h1 { font-size: var(--type-display-lg); margin-bottom: var(--space-24); }
  .policy h2 { font-size: var(--type-heading-sm); margin-top: var(--space-48); }
  .policy h3 { font-size: var(--type-heading-xs); margin-top: var(--space-32); }
  .policy .policy-section h2, .policy .policy-section h3 { font-size: var(--type-heading-xs); }
  .policy-updated { font-size: var(--type-body-sm); color: var(--text-muted); }
  .policy-full-link { margin-bottom: var(--space-32); }
  .policy ul, .policy ol { padding-left: 1.25rem; }
  /* The agreement's sections nest one level below .prose, so space their blocks here. */
  .policy :where(p, ul, ol, .table-wrap) { margin-block: 0 var(--space-16); }
  .policy li + li { margin-top: var(--space-4); }
  .table-wrap { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: var(--type-body-sm); }
  th, td { text-align: left; vertical-align: top; padding: var(--space-12); border-bottom: 1px solid var(--border-subtle); }
  th { font-weight: var(--weight-semibold); }
}