/* home.css — demo showcase home (W3 + W6.F.A.2 enrichment).
 *
 * Section-by-section from top (per index.php composition order):
 *   .home-hero          — full-bleed hero with copy + builder screenshot
 *   .home-how           — 3-step "How it works" strip
 *   .home-live-preview  — code snippet + builder screenshot side-by-side  [F.A.2]
 *   .home-proof         — 5-stat package-facts strip                       [F.A.2]
 *   .home-featured      — 6 featured examples with show-off-read-more      [F.A.2]
 *   .home-use-cases     — 4 audience cards mapping to cookbook recipes     [F.A.2]
 *   .home-api           — Builder methods + events at a glance             [F.A.2]
 *   .home-gallery       — 4-thumbnail gallery teaser
 *   .home-devs          — 3-pillar developer strip
 *   .home-faq           — 10-question CSS-only accordion                   [F.A.2]
 *   .home-section__*    — shared section header primitives
 *
 * Token discipline: every color/space/radius/shadow trips through a
 * --demo-* CSS var. No magic hex, no raw px (font-size exceptions: the
 * hero heading uses clamp() with three token endpoints). Buyers can
 * recolor the entire surface by editing tokens.css alone.
 *
 * Light/dark: handled by the global [data-theme] selectors that already
 * flip --demo-* values; only the hero/live-preview screenshot swap and
 * a handful of section gradients need explicit overrides.
 */

/* ──────────────────────────────────────────────
 * Layout primitives
 * ────────────────────────────────────────────── */

.demo-home {
  /* Each section sets its own padding; the home itself just stacks. */
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-9);
  padding-bottom: var(--demo-space-10);
}

@media (max-width: 768px) {
  .demo-home {
    gap: var(--demo-space-8);
    padding-bottom: var(--demo-space-9);
  }
}

/* Shared section frame — every home-* section uses --inner to centre. */
.home-hero__inner,
.home-how__inner,
.home-live-preview__inner,
.home-proof__inner,
.home-featured__inner,
.home-use-cases__inner,
.home-api__inner,
.home-gallery__inner,
.home-devs__inner,
.home-faq__inner {
  max-width: var(--demo-content-max);
  margin: 0 auto;
  padding: 0 var(--demo-space-6);
}

/* Section header (eyebrow · title · lede) used by how/examples/gallery/devs. */
.home-section__header {
  margin: 0 0 var(--demo-space-7);
}
.home-section__header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--demo-space-6);
  flex-wrap: wrap;
}
.home-section__eyebrow {
  display: inline-block;
  margin-bottom: var(--demo-space-2);
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-accent);
}
.home-section__title {
  margin: 0 0 var(--demo-space-3);
  font-size: var(--demo-fs-2xl);
  font-weight: var(--demo-fw-display);
  line-height: var(--demo-lh-heading);
  letter-spacing: var(--demo-ls-display);
  color: var(--demo-text-strong);
  max-width: 32ch;
}
.home-section__lede {
  margin: 0;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-regular);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
  max-width: 60ch;
}

/* ──────────────────────────────────────────────
 * Hero
 * ────────────────────────────────────────────── */

.home-hero {
  position: relative;
  padding-top: var(--demo-space-9);
  padding-bottom: var(--demo-space-8);
  overflow: hidden;
}
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 80% 0%, var(--demo-accent-soft), transparent 70%),
    radial-gradient(40% 60% at 0% 30%, var(--demo-accent-soft), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}
.home-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  /* Shot column slightly wider than copy at >=1024px — premium SaaS
   * hero feel without overwhelming the value-prop on the left. */
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: var(--demo-space-8);
  align-items: center;
}
@media (max-width: 1024px) {
  .home-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--demo-space-8);
  }
}

.home-hero__copy { display: flex; flex-direction: column; gap: var(--demo-space-5); }

.home-hero__pill {
  align-self: flex-start;
}

.home-hero__title {
  margin: 0;
  font-size: clamp(var(--demo-fs-2xl), 5.2vw, var(--demo-fs-hero));
  font-weight: var(--demo-fw-display);
  line-height: var(--demo-lh-display);
  letter-spacing: var(--demo-ls-display);
  color: var(--demo-text-strong);
  max-width: 18ch;
}
.home-hero__title-accent {
  color: var(--demo-accent);
}

.home-hero__lede {
  margin: 0;
  font-size: var(--demo-fs-lg);
  font-weight: var(--demo-fw-regular);
  line-height: var(--demo-lh-body);
  color: var(--demo-text);
  max-width: 56ch;
}

.home-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-space-3);
  margin-top: var(--demo-space-2);
}

/* Hero CTAs need to feel "premium" — bigger height, subtle shadow on
 * primary. Adds a `--lg` btn modifier specific to hero / section CTAs. */
.demo-btn--lg {
  height: 48px;
  padding: 0 var(--demo-space-5);
  font-size: var(--demo-fs-md);
  border-radius: var(--demo-radius-md);
}
.home-hero__cta-primary {
  box-shadow: var(--demo-shadow-md);
}
.home-hero__cta-primary:hover {
  box-shadow: var(--demo-shadow-lg);
}

/* Proof strip — tabular numerals, 3 columns at >=480px, stacked below. */
.home-hero__proof {
  list-style: none;
  margin: var(--demo-space-5) 0 0;
  padding: var(--demo-space-5) 0 0;
  border-top: 1px solid var(--demo-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-space-7);
}
.home-hero__proof-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-hero__proof-stat {
  font-size: var(--demo-fs-xl);
  font-weight: var(--demo-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-heading);
  line-height: 1;
}
.home-hero__proof-label {
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-medium);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
}

/* Hero screenshot — light/dark both <img>'d, hidden via [data-theme].
 * Frame is FLAT by default (the chrome is the hero — no perspective
 * gymnastics fighting it for attention). On hover we tilt slightly in
 * the *reverse* direction (right edge pushed back, left edge forward,
 * top tipped away) — a small "pick-it-up-and-look" gesture, not a
 * static depth treatment. Reverse direction = opposite of the v2
 * default, which pushed left back / right forward. Effects below the
 * tilt: bezel padding (thin device frame) + symmetric soft shadow
 * (lifted off the page). All drop on narrow viewports + reduced-motion. */
.home-hero__shot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Perspective only used by the hover tilt now, but kept declared so
   * the transition has somewhere to land. */
  perspective: 1300px;
  perspective-origin: 50% 50%;
}
.home-hero__shot-frame {
  position: relative;
  width: 100%;
  padding: 8px;
  border-radius: var(--demo-radius-xl);
  border: 1px solid var(--demo-border);
  background: var(--demo-bg-elevated);
  /* Symmetric soft shadow — frame sits flat, just lifted off the page. */
  box-shadow:
    0 24px 48px -24px rgba(0, 0, 0, 0.18),
    0 12px 20px -12px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  /* Aspect 16/10 crops the empty-canvas tail of the 1280×900 source so the
   * hero leans on the chrome (top nav + sidebars) — the part buyers want
   * to see. `object-position: top center` on the img anchors the crop. */
  aspect-ratio: 16 / 10;
  /* Flat by default — straightened up per 2026-05-08 user feedback
   * (v2 leaned right-edge-forward; the chrome reads better square). */
  transform: none;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
[data-theme='dark'] .home-hero__shot-frame {
  /* Dark mode shadow needs more opacity to register on the dark bg. */
  box-shadow:
    0 24px 48px -24px rgba(0, 0, 0, 0.45),
    0 12px 20px -12px rgba(0, 0, 0, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.20);
}
@media (hover: hover) {
  .home-hero__shot:hover .home-hero__shot-frame {
    /* Light reverse-direction tilt — right edge pushed back (positive
     * rotateY), top tipped slightly away (positive rotateX). Opposite
     * of the v2 default. Subtle on purpose: the gesture, not the depth,
     * is the point. */
    transform: rotateY(4deg) rotateX(2deg) scale(1.015);
    box-shadow:
      18px 28px 56px -24px rgba(0, 0, 0, 0.22),
      8px 14px 24px -12px rgba(0, 0, 0, 0.13),
      0 1px 2px rgba(0, 0, 0, 0.05);
  }
  [data-theme='dark'] .home-hero__shot:hover .home-hero__shot-frame {
    box-shadow:
      18px 28px 56px -24px rgba(0, 0, 0, 0.50),
      8px 14px 24px -12px rgba(0, 0, 0, 0.36),
      0 1px 2px rgba(0, 0, 0, 0.22);
  }
}
.home-hero__shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  /* Inner image radius — outer (xl=16) minus bezel padding (8) = 8. */
  border-radius: calc(var(--demo-radius-xl) - 8px);
}
@media (max-width: 1024px) {
  /* Below 1024px the hero stacks copy on top, screenshot below. The 3D
   * tilt looks awkward at narrow widths — kill it and revert to the
   * flat frame so the screenshot reads as a clean reference. */
  .home-hero__shot {
    perspective: none;
  }
  .home-hero__shot-frame {
    transform: none;
    padding: 6px;
    box-shadow: var(--demo-shadow-md);
  }
  [data-theme='dark'] .home-hero__shot-frame {
    box-shadow: var(--demo-shadow-md);
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero__shot-frame {
    transition: none;
  }
  .home-hero__shot:hover .home-hero__shot-frame {
    /* Reduced-motion: skip the hover tilt entirely. Default is already
     * flat, so "no motion" reads as "stays still". */
    transform: none;
  }
}
.home-hero__shot-img--light { display: block; }
.home-hero__shot-img--dark  { display: none; }
[data-theme='dark'] .home-hero__shot-img--light { display: none; }
[data-theme='dark'] .home-hero__shot-img--dark  { display: block; }

.home-hero__shot-glow {
  position: absolute;
  inset: -8% -10% auto auto;
  width: 70%;
  height: 60%;
  background: radial-gradient(closest-side, var(--demo-accent-soft), transparent 75%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

/* ──────────────────────────────────────────────
 * How it works (3-step strip)
 * ────────────────────────────────────────────── */

.home-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--demo-space-5);
  counter-reset: how-step;
}
@media (max-width: 768px) {
  .home-how__steps { grid-template-columns: minmax(0, 1fr); }
}

.home-how__step {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
  padding: var(--demo-space-6);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  transition: border-color 160ms ease, transform 160ms ease;
  /* Without min-width:0 the inner <pre white-space:nowrap> code line
   * forces the grid column to blow out at narrow viewports — see
   * the W6.F.A.2 mobile-overflow fix. */
  min-width: 0;
}
.home-how__step:hover {
  border-color: var(--demo-text-muted);
  transform: translateY(-2px);
}

.home-how__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--demo-radius-pill);
  background: var(--demo-primary);
  color: var(--demo-primary-fg);
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-bold);
  font-variant-numeric: tabular-nums;
}

.home-how__title {
  margin: 0;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text-strong);
}

.home-how__body {
  margin: 0;
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
}

.home-how__code {
  margin: var(--demo-space-2) 0 0;
  padding: var(--demo-space-3) var(--demo-space-4);
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
  color: var(--demo-text);
  overflow-x: auto;
  white-space: nowrap;
}
.home-how__code code {
  background: transparent;
  padding: 0;
  color: inherit;
}

/* ──────────────────────────────────────────────
 * Gallery teaser
 * ────────────────────────────────────────────── */

.home-gallery__all {
  flex-shrink: 0;
}

.home-gallery__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--demo-space-5);
}
@media (max-width: 1024px) {
  .home-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .home-gallery__grid { grid-template-columns: 1fr; }
}

.home-gallery__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.home-gallery__card-thumb {
  display: block;
  width: 100%;
  /* 496×558 is the source SVG/PNG shape — match exactly so the image
   * sits flush without object-fit cropping or letterboxing. */
  aspect-ratio: 496 / 558;
  background: var(--demo-bg);
  border-bottom: 1px solid var(--demo-border);
  overflow: hidden;
}
.home-gallery__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.home-gallery__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--demo-space-2);
  padding: var(--demo-space-4) var(--demo-space-5);
}

.home-gallery__card-title {
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-body);
  /* Truncate over-long titles with ellipsis. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-gallery__card-cat {
  flex-shrink: 0;
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-medium);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
}

.home-gallery__empty {
  /* Reuse .demo-page__placeholder layout but kill its full-width feel. */
  margin: 0;
}

/* ──────────────────────────────────────────────
 * Made for developers (3-pillar strip)
 * ────────────────────────────────────────────── */

.home-devs {
  padding: var(--demo-space-8) 0;
  background:
    linear-gradient(180deg, transparent 0%, var(--demo-bg-elevated) 50%, transparent 100%);
}

.home-devs__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--demo-space-7);
}
@media (max-width: 768px) {
  .home-devs__grid {
    grid-template-columns: 1fr;
    gap: var(--demo-space-5);
  }
}

.home-devs__pillar {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
}

.home-devs__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--demo-bg);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  color: var(--demo-accent);
}
.home-devs__icon .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.home-devs__title {
  margin: 0;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text-strong);
}

.home-devs__body {
  margin: 0;
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
}

.home-devs__cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-1);
  margin-top: var(--demo-space-2);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
}
.home-devs__cta .material-symbols-outlined {
  font-size: 18px;
  transition: transform 160ms ease;
}
.home-devs__cta:hover {
  color: var(--demo-accent);
}
.home-devs__cta:hover .material-symbols-outlined {
  transform: translateX(4px);
}

/* ══════════════════════════════════════════════════════════════════
 * W6.F.A.2 — Showcase home enrichment sections
 * ══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
 * Live preview (code + screenshot side-by-side)
 *
 * The "show, don't tell" moment. Side-by-side at >=1024px so the
 * buyer's eye can dart between the snippet on the left and the
 * canvas it produces on the right. Stacked at <1024px (code on
 * top — buyer reads what the integration looks like first, then
 * sees it). The code chrome reuses .demo-code-popover from
 * code-popover.css; this section just frames it at full width.
 * ────────────────────────────────────────────── */

.home-live-preview {
  padding: var(--demo-space-9) 0 var(--demo-space-8);
}

.home-live-preview__inner {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-7);
}

.home-live-preview__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--demo-space-7);
  /* stretch — both columns reach the grid-row height so the snippet
   * + screenshot frames bottom-align with their CTAs. The popover
   * grows to fill via flex:1 in .home-live-preview__popover. */
  align-items: stretch;
}

@media (max-width: 1024px) {
  .home-live-preview__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--demo-space-6);
  }
}

.home-live-preview__code {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-4);
  min-width: 0;
}

.home-live-preview__code .demo-code-popover {
  /* Snippet card lives on top of the section bg; bump the shadow
   * so it reads as a primary surface, not a secondary chip. */
  box-shadow: var(--demo-shadow-md);
}

/* Popover takes all available column height so the View-full-snippet
 * CTA bottom-aligns with the screenshot CTA in the right column. */
.home-live-preview__popover {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.home-live-preview__popover .demo-code-popover__body {
  flex: 1 1 auto;
}

.home-live-preview__source-cta {
  align-self: flex-start;
}

.home-live-preview__shot {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-4);
  min-width: 0;
}
.home-live-preview__shot-frame {
  position: relative;
  padding: 6px;
  border-radius: var(--demo-radius-xl);
  border: 1px solid var(--demo-border);
  background: var(--demo-bg-elevated);
  box-shadow:
    0 16px 32px -16px rgba(0, 0, 0, 0.16),
    0 8px 16px -8px rgba(0, 0, 0, 0.10),
    0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
[data-theme='dark'] .home-live-preview__shot-frame {
  box-shadow:
    0 16px 32px -16px rgba(0, 0, 0, 0.42),
    0 8px 16px -8px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.18);
}
.home-live-preview__shot-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: calc(var(--demo-radius-xl) - 6px);
}
.home-live-preview__shot-img--light { display: block; }
.home-live-preview__shot-img--dark  { display: none; }
[data-theme='dark'] .home-live-preview__shot-img--light { display: none; }
[data-theme='dark'] .home-live-preview__shot-img--dark  { display: block; }
.home-live-preview__shot-cta {
  align-self: flex-start;
}

/* ──────────────────────────────────────────────
 * Proof strip — package facts at a glance
 *
 * Five evenly-distributed stat columns. Reads more like a
 * metric ribbon than a sentence. At <1024 it goes 3-up wrap
 * (3 over 2); at <600 it stacks. The neutral elevated
 * background sets it apart from sections above and below.
 * ────────────────────────────────────────────── */

.home-proof {
  padding: var(--demo-space-8) 0;
  background: var(--demo-bg-elevated);
  border-top: 1px solid var(--demo-border);
  border-bottom: 1px solid var(--demo-border);
}
.home-proof__strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--demo-space-6);
  align-items: start;
}
@media (max-width: 1024px) {
  .home-proof__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-proof__strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--demo-space-5);
  }
}
@media (max-width: 380px) {
  .home-proof__strip { grid-template-columns: 1fr; }
}
.home-proof__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--demo-space-1);
  position: relative;
  padding: 0;
}
.home-proof__icon {
  font-size: 22px;
  color: var(--demo-text-muted);
  margin-bottom: var(--demo-space-2);
  /* Material Symbols variation — slightly thinner stroke for a quieter
     read alongside the bold display number. */
  font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 24;
}
.home-proof__num {
  font-size: var(--demo-fs-2xl);
  font-weight: var(--demo-fw-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--demo-ls-heading);
  line-height: 1;
  color: var(--demo-text-strong);
}
.home-proof__label {
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text);
  letter-spacing: var(--demo-ls-body);
  margin-top: var(--demo-space-2);
}
.home-proof__note {
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-medium);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
  margin-top: 2px;
}

/* ──────────────────────────────────────────────
 * Featured examples — per-category showcase grid (W6.F.A.5)
 *
 * Replaces the W6.F.A.2 flat 6-tile grid + <details> accordion.
 *
 * Layout per tier section:
 *   ┌─────────────────────────────────────────────────────────┐
 *   │ <pill> <Tier name>  <count>            [View all → /…]  │
 *   │ <one-line tier lede>                                     │
 *   ├─────────────────────────────────────────────────────────┤
 *   │ [tile 1]  [tile 2]  [tile 3]                             │
 *   └─────────────────────────────────────────────────────────┘
 *
 * Tier section header is row-flex on desktop with the View-all
 * CTA right-aligned; mobile (<768px) collapses to vertical stack
 * (heading above CTA). Tile grid is 3-up at >=1280, 2-up at 768-
 * 1280, 1-up below. Each tile is a single <a> for the "stretched
 * link" pattern — entire surface activates the example deep-link.
 *
 * Tier sections are visually separated by an extra space-7 of top
 * margin so the buyer reads them as distinct buckets, not a wall.
 *
 * Reuses the F.A.4 walker so home auto-syncs with plan progress —
 * adding a new example index.php under demo/examples/<tier>/<slug>/
 * surfaces here on the next request, zero home-maintenance.
 * ────────────────────────────────────────────── */

.home-featured__tier {
  /* First tier sits flush with the section header; subsequent tiers
   * get an extra gap so the boundary reads cleanly. */
  margin-top: var(--demo-space-9);
}
.home-featured__tier:first-of-type {
  margin-top: var(--demo-space-7);
}

.home-featured__tier-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--demo-space-5);
  flex-wrap: wrap;
  margin-bottom: var(--demo-space-5);
  padding-bottom: var(--demo-space-4);
  border-bottom: 1px solid var(--demo-border);
}
.home-featured__tier-heading {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-2);
  min-width: 0;
  flex: 1 1 auto;
}

.home-featured__tier-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--demo-space-3);
  margin: 0;
  font-size: var(--demo-fs-xl);
  font-weight: var(--demo-fw-display);
  letter-spacing: var(--demo-ls-display);
  line-height: var(--demo-lh-tight);
  color: var(--demo-text-strong);
}
.home-featured__tier-name {
  /* The pill already shows the tier label in muted body weight; the
   * title text repeats it in display weight so the section reads as
   * a real heading. Hub tier-section partial uses the same pattern. */
  display: inline-block;
}
.home-featured__tier-count {
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-regular);
  color: var(--demo-text-muted);
  letter-spacing: var(--demo-ls-body);
  font-variant-numeric: tabular-nums;
}
.home-featured__tier-lede {
  margin: 0;
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
  max-width: 64ch;
}

/* View-all CTA — the right-aligned `demo-btn--ghost` instance. The
 * button primitive ships its own hover/focus states from app.css; we
 * only need to anchor it to the right edge and let it shrink to fit
 * its content (no flex:1). */
.home-featured__view-all {
  flex: 0 0 auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .home-featured__tier-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--demo-space-3);
  }
  .home-featured__view-all {
    align-self: flex-start;
  }
}

/* ───────── Tile grid ───────── */

.home-featured__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--demo-space-5);
  align-items: stretch;
}
@media (max-width: 1199px) {
  .home-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-featured__grid { grid-template-columns: 1fr; }
}

/* When a tier has only 1-2 cards we still want the tiles to read at
 * a sensible size (not stretched to fill 1/3 of the row). The data-
 * attr from the partial drives the grid clamp. */
.home-featured__grid[data-home-featured-count='1'] { grid-template-columns: minmax(0, 1fr); max-width: 480px; }
.home-featured__grid[data-home-featured-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) {
  .home-featured__grid[data-home-featured-count='1'],
  .home-featured__grid[data-home-featured-count='2'] {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

.home-featured__card {
  display: flex;
  min-width: 0;
}

/* The <a> IS the tile — single click target, single focus ring,
 * stretched-link semantics. Tile shape: 132px hero band on top
 * (icon + #N badge), then body padding-stack of pills · title ·
 * lede · "View example →" CTA. */
.home-featured__tile {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.home-featured__tile:hover,
.home-featured__tile:focus-visible {
  border-color: var(--demo-accent);
  box-shadow: var(--demo-shadow-md);
  transform: translateY(-2px);
}
.home-featured__tile:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 3px;
}

/* Hero media band — accent-soft wash + tier icon centred + #N badge
 * top-right. The badge gives each tile per-row identity even though
 * the tier icon repeats across the 3 tiles in the section. */
.home-featured__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 132px;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, transparent 70%),
    var(--demo-bg);
  border-bottom: 1px solid var(--demo-border);
}
[data-theme='dark'] .home-featured__media {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 70%),
    var(--demo-bg);
}
.home-featured__icon {
  font-size: 56px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
  color: var(--demo-text-strong);
  opacity: 0.85;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), color 160ms ease;
}
.home-featured__tile:hover .home-featured__icon,
.home-featured__tile:focus-visible .home-featured__icon {
  color: var(--demo-accent);
  transform: scale(1.04);
}
.home-featured__num {
  position: absolute;
  top: var(--demo-space-3);
  right: var(--demo-space-3);
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  letter-spacing: var(--demo-ls-caps);
  color: var(--demo-text-muted);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-pill);
  font-variant-numeric: tabular-nums;
}

/* W6.F.B.5 — "Live in browser" badge.
 *
 * Lands in the home-featured tile's media band (top-left, opposite
 * the #N badge). Surfaces only when the example has an inline mini-
 * builder ($exampleMiniBuilder or $exampleCookbookDemo declared).
 * The dot pulses subtly to signal "this is live, not a screenshot";
 * `prefers-reduced-motion: reduce` suppresses the animation.
 */
.home-featured__live {
  position: absolute;
  top: var(--demo-space-3);
  left: var(--demo-space-3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  font-size: var(--demo-fs-xs);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-success);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-success);
  border-radius: var(--demo-radius-pill);
  white-space: nowrap;
}
.home-featured__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--demo-success);
  box-shadow: 0 0 0 0 var(--demo-success);
  animation: home-featured-live-pulse 2400ms ease-out infinite;
}
.home-featured__live-label {
  letter-spacing: 0.01em;
}

@keyframes home-featured-live-pulse {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--demo-success) 70%, transparent); }
  70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--demo-success)  0%, transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--demo-success)  0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .home-featured__live-dot { animation: none; }
}

.home-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
  padding: var(--demo-space-5);
  flex: 1 1 auto;
}

.home-featured__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--demo-space-2);
}

.home-featured__title {
  display: block;
  margin: 0;
  font-size: var(--demo-fs-lg);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-heading);
  line-height: var(--demo-lh-tight);
}

.home-featured__lede {
  display: block;
  margin: 0;
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
  font-weight: var(--demo-fw-regular);
}
.home-featured__lede code {
  /* Reuse the global inline <code> chip styling from app.css; just
   * lock the mono family explicitly so spans inside <a>s don't pick
   * up the inherited body face. */
  font-family: var(--demo-font-mono);
}

.home-featured__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-1);
  padding-top: var(--demo-space-2);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-body);
}
.home-featured__cta .material-symbols-outlined {
  font-size: 16px;
  transition: transform 160ms ease;
}
.home-featured__tile:hover .home-featured__cta,
.home-featured__tile:focus-visible .home-featured__cta {
  color: var(--demo-accent);
}
.home-featured__tile:hover .home-featured__cta .material-symbols-outlined,
.home-featured__tile:focus-visible .home-featured__cta .material-symbols-outlined {
  transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
  .home-featured__tile,
  .home-featured__icon,
  .home-featured__cta .material-symbols-outlined {
    transition: none;
  }
  .home-featured__tile:hover,
  .home-featured__tile:focus-visible {
    transform: none;
  }
  .home-featured__tile:hover .home-featured__icon,
  .home-featured__tile:focus-visible .home-featured__icon {
    transform: none;
  }
}

/* ──────────────────────────────────────────────
 * Use cases (4 audience cards)
 *
 * Each card is a single <a> filling the tile so any click /
 * keyboard activation routes to the deep-linked example.
 * 4-up at >=1280, 2×2 at 768-1280, stacked below.
 * ────────────────────────────────────────────── */

.home-use-cases__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--demo-space-4);
}
@media (max-width: 1199px) {
  .home-use-cases__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .home-use-cases__grid {
    grid-template-columns: 1fr;
    gap: var(--demo-space-3);
  }
}

.home-use-cases__card {
  display: flex;
  min-width: 0;
}

.home-use-cases__link {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
  width: 100%;
  padding: var(--demo-space-6);
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.home-use-cases__link:hover,
.home-use-cases__link:focus-visible {
  border-color: var(--demo-accent);
  box-shadow: var(--demo-shadow-md);
  transform: translateY(-2px);
}
.home-use-cases__link:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: 2px;
}

.home-use-cases__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--demo-accent-soft);
  border-radius: var(--demo-radius-md);
  color: var(--demo-accent);
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.home-use-cases__audience {
  margin: 0;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-heading);
}

.home-use-cases__lede {
  margin: 0;
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text-secondary);
}

.home-use-cases__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--demo-space-1);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-body);
}
.home-use-cases__cta .material-symbols-outlined {
  font-size: 18px;
  transition: transform 160ms ease;
}
.home-use-cases__link:hover .home-use-cases__cta .material-symbols-outlined,
.home-use-cases__link:focus-visible .home-use-cases__cta .material-symbols-outlined {
  transform: translateX(4px);
}

/* ──────────────────────────────────────────────
 * API at a glance (methods + events)
 *
 * Two columns of dense, scannable rows. Each method row is a
 * link into /docs/; each event row stays static (the snippet
 * IS the doc). At <1024 the 2 columns stack so each list reads
 * top-down without competing horizontally.
 * ────────────────────────────────────────────── */

.home-api {
  padding: var(--demo-space-9) 0 var(--demo-space-8);
}

.home-api__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--demo-space-7);
  margin-top: var(--demo-space-6);
}
@media (max-width: 1024px) {
  .home-api__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--demo-space-6);
  }
}

.home-api__group {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
  /* Without min-width:0 the pre.home-api__snippet long lines force
   * the grid column to blow out — same fix as .home-how__step. */
  min-width: 0;
}
.home-api__group-title {
  margin: 0 0 var(--demo-space-2);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-bold);
  letter-spacing: var(--demo-ls-caps);
  text-transform: uppercase;
  color: var(--demo-text-muted);
}

.home-api__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
}

.home-api__row {
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease;
}
.home-api__row:hover {
  border-color: var(--demo-accent);
  transform: translateY(-1px);
}

/* Two row variants share the same padded-wrapper pattern:
 *   methods → wrapped in <a class="home-api__row-link">  (link card)
 *   events  → wrapped in <div class="home-api__row-body"> (no href)
 * Both wrappers are padding anchors so the .home-api__snippet's
 * negative-margin trick (line 1240) extends edge-to-edge inside the
 * row card. Without this wrapper on events rows, the negative margin
 * pulls the snippet OUTSIDE the <li> (the bug surfaced in F.A.2 polish). */
.home-api__row-link,
.home-api__row-body {
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-2);
  padding: var(--demo-space-4) var(--demo-space-5);
  text-decoration: none;
  color: inherit;
}
.home-api__row-link:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: -2px;
}
.home-api__row-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.home-api__name {
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-sm);
  font-weight: var(--demo-fw-bold);
  color: var(--demo-text-strong);
  background: transparent;
  padding: 0;
  letter-spacing: 0;
}

.home-api__lede {
  font-size: var(--demo-fs-xs);
  color: var(--demo-text-secondary);
  line-height: var(--demo-lh-body);
}

.home-api__snippet {
  margin: var(--demo-space-2) calc(var(--demo-space-5) * -1) calc(var(--demo-space-4) * -1);
  padding: var(--demo-space-3) var(--demo-space-5);
  background: var(--demo-code-syntax-bg);
  border-top: 1px solid var(--demo-border);
  font-family: var(--demo-font-mono);
  font-size: var(--demo-fs-xs);
  line-height: 1.55;
  color: var(--demo-code-syntax-fg);
  overflow-x: auto;
  white-space: pre;
}
.home-api__snippet code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-family: inherit;
}

.home-api__more {
  margin: var(--demo-space-6) 0 0;
  font-size: var(--demo-fs-sm);
  color: var(--demo-text-secondary);
  text-align: center;
}
.home-api__more a {
  color: var(--demo-accent);
  font-weight: var(--demo-fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid var(--demo-accent-soft);
  transition: border-color 120ms ease;
}
.home-api__more a:hover {
  border-bottom-color: var(--demo-accent);
}
.home-api__more code {
  /* inline code chip already styled by app.css */
  font-family: var(--demo-font-mono);
  font-size: 0.92em;
}

/* ──────────────────────────────────────────────
 * FAQ accordion (CSS-only <details> disclosure)
 *
 * Centered single column, max 720 px so the answers stay
 * readable without horizontal eye-travel. <details><summary>
 * is the disclosure pattern; the chevron rotates on [open].
 * No JS — keyboard a11y comes free, search engines parse
 * <summary> as Q-A pairs (SEO win).
 * ────────────────────────────────────────────── */

.home-faq {
  padding: var(--demo-space-8) 0 var(--demo-space-9);
}
.home-faq__inner { max-width: 800px; }
.home-faq__inner .home-section__header { text-align: center; }
.home-faq__inner .home-section__title { margin-left: auto; margin-right: auto; }
.home-faq__inner .home-section__lede { margin-left: auto; margin-right: auto; }

.home-faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--demo-space-3);
}

.home-faq__item {
  background: var(--demo-bg-elevated);
  border: 1px solid var(--demo-border);
  border-radius: var(--demo-radius-md);
  overflow: hidden;
  transition: border-color 160ms ease;
}
.home-faq__item:hover { border-color: var(--demo-text-muted); }
.home-faq__details[open] {
  /* Lift open items so the buyer can see which row they expanded. */
}
.home-faq__details[open] + .home-faq__item,
.home-faq__details[open] {
  /* placeholder for future open-state styling */
}

.home-faq__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--demo-space-4);
  padding: var(--demo-space-4) var(--demo-space-5);
  cursor: pointer;
  font-size: var(--demo-fs-md);
  font-weight: var(--demo-fw-semibold);
  color: var(--demo-text-strong);
  letter-spacing: var(--demo-ls-body);
  transition: background-color 120ms ease;
}
.home-faq__summary::-webkit-details-marker { display: none; }
.home-faq__summary:hover { background-color: var(--demo-accent-soft); }
.home-faq__summary:focus-visible {
  outline: 2px solid var(--demo-accent);
  outline-offset: -2px;
}
.home-faq__question { flex: 1 1 auto; }

.home-faq__chevron {
  font-size: 22px;
  color: var(--demo-text-muted);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), color 120ms ease;
  flex-shrink: 0;
}
.home-faq__details[open] .home-faq__chevron {
  transform: rotate(180deg);
  color: var(--demo-accent);
}

.home-faq__answer {
  padding: 0 var(--demo-space-5) var(--demo-space-5);
  border-top: 1px dashed var(--demo-border);
  padding-top: var(--demo-space-4);
}
.home-faq__answer p {
  margin: 0;
  font-size: var(--demo-fs-sm);
  line-height: var(--demo-lh-body);
  color: var(--demo-text);
}
.home-faq__answer a {
  color: var(--demo-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--demo-accent-soft);
  transition: border-color 120ms ease;
}
.home-faq__answer a:hover {
  border-bottom-color: var(--demo-accent);
}
.home-faq__answer code {
  font-family: var(--demo-font-mono);
  font-size: 0.92em;
}

/* ──────────────────────────────────────────────
 * Reduced motion — disable card lifts + chevron slides + tilt.
 * ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .home-how__step:hover,
  .home-gallery__card:hover,
  .home-featured__card:hover .home-featured__details,
  .home-use-cases__link:hover,
  .home-use-cases__link:focus-visible,
  .home-api__row:hover { transform: none; }
  .home-devs__cta:hover .material-symbols-outlined,
  .home-use-cases__link:hover .home-use-cases__cta .material-symbols-outlined,
  .home-use-cases__link:focus-visible .home-use-cases__cta .material-symbols-outlined,
  .home-featured__view:hover .material-symbols-outlined { transform: none; }
  .home-featured__details[open] .home-featured__more-icon,
  .home-faq__details[open] .home-faq__chevron { transition: none; }
}