/* ==========================================================================
   Wayfable Homepage (R1) — hm- component set
   Spec: bmad-output/redesign/DESIGN.md §2.10 + EXPERIENCE.md §R1.
   Consumes design tokens from styles.css only; defines no custom properties;
   restyles no existing class (scoped wrapper-context rules only, per the
   ia-footer-col precedent in DESIGN §2.13). That invariant is now ENFORCED:
   tests/test_marketing_pages.py::
   test_landing_home_css_never_restyles_a_locked_class_unscoped fails if any
   selector in this file names a non-hm- class without an hm- ancestor.
   White literals appear only where the locked system already uses white: the
   card surfaces (.hm-resource-card, .hm-pillar-card) and the forest-band
   link/CTA focus rings — sanctioned pairs 4 and 12–14 plus the white
   focus-recipe variant in DESIGN §3.4.
   Rebuilt benefits-led 2026-07-27 per bmad-output/redesign/
   homepage-benefits-spec.md §7 (hm-pillar-*, hm-route-*, forest CTA focus).
   ========================================================================== */

/* --- Eyebrow kicker chip (DESIGN §2.10 hm-eyebrow) ---
   Inter 600, uppercase, letter-spaced, forest on parchment pill (5.47:1).
   Sits ABOVE the H1, never inside it. */
.hm-eyebrow {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--forest-moss);
    background: var(--parchment);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}

/* --- Charcoal section sub (R-1: driftwood barred from new body copy) --- */
.hm-section-sub {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    text-align: center;
    max-width: 680px;
    margin: 0 auto var(--space-8);
    line-height: 1.6;
}

/* --- Specimen-label fact bar (DESIGN §2.10 hm-limits-bar / hm-limit-item) ---
   Four specimen-label fact chips: Lora 600 figure + Inter caption, both
   charcoal (final-review ruling 10 — figures never gold/ember), plus a
   visible tick row. Figures are duplicated as crawlable prose in the adjacent
   paragraph (GEO).

   REPURPOSED, NOT RESTYLED (homepage-benefits-spec §7.3, flag F-04): on the
   benefits-led homepage this bar carries STORY-SHAPING specimens — 4 age
   bands · 3 modes · 6 storyteller styles · 5/10/15 minutes — not the Yoto
   hardware limits it was named for. Every declaration below is byte-for-byte
   what shipped with the hardware content (including the --space-7 fix and the
   four-across-only-at-1024 rule, both verified at 320/480/768/1024/1440), so
   the class name is now a dev-facing misnomer. Do not rename it: renaming
   means re-verifying CSS that is known good. */
.hm-limits-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    /* FIX ROUND 1 (finding 4): was 900px, which inset the fact-chip row 90px on
       BOTH sides relative to the .hm-pillar-grid directly beneath it inside
       #features (bar 270→1170 under a grid at 180→1260 at 1440). Matching the
       pillar grid's 1080px makes the two rows share one edge at every width
       ≥1024; below that both are already clamped by the section's 5% padding,
       so nothing changes there. The ≥1024 four-across rule below only gets
       roomier: each chip goes from (900−36)/4 = 216px to (1080−36)/4 = 261px,
       comfortably clear of the ~215px the specimens need. */
    max-width: 1080px;
    /* BUG: this was `var(--space-7) auto var(--space-6)`. --space-7 does not
       exist in the styles.css scale (1,2,3,4,5,6,8,10), so the whole shorthand
       was invalid at computed-value time and `margin` fell back to its initial
       0 — which killed BOTH the top separation (the chips sat flush on the
       .compare-card bottom border, 0px gap at 1440/768/375) and the `auto`
       centring. --space-8 = 3rem restores the 48px gap and re-centres the bar
       on the section. */
    margin: var(--space-8) auto var(--space-6);
}

/* Column flex so the three parts can be distributed vertically. Grid stretch
   already makes every chip the height of the tallest, but the content was
   top-aligned inside that height: chip 2's label wraps to two lines at 261px,
   so its tick sat 22px below the other three while chips 1/3/4 carried ~30px
   of dead space under theirs. The label absorbs that slack instead (below), so
   the four ticks land on one line. */
.hm-limit-item {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
}

.hm-limit-figure {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-2xl);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    /* Specimen label: the figure is one value ("100MB · 60 min"), so it must
       never break mid-value across two lines. */
    white-space: nowrap;
}

.hm-limit-label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    margin-top: var(--space-1);
    /* Take the row's leftover height so every tick starts at the same y and the
       label-to-tick gap stays a constant --space-2 in all four chips. */
    flex: 1 1 auto;
}

.hm-limit-tick {
    display: inline-flex;
    align-items: center;
    /* As a column-flex child it would stretch to the full chip width and lose
       its centring, since text-align cannot centre a stretched flex item. */
    align-self: center;
    gap: var(--space-1);
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-success);
}

.hm-limit-tick svg {
    flex-shrink: 0;
}

/* --- Free tools & guides resource cards (DESIGN §2.10 hm-resource-card) --- */
.hm-resource-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 900px;
    /* BUG: was `margin: 0 auto` with no bottom value, so the following
       .sb-relief-cta ghost button sat flush on the card bottom border (0px at
       1440/768/375) and its rounded top corners crossed the card gutter.
       --space-8 matches .sb-relief-grid (landing_v3.css:219) so the two
       sibling sections share one CTA rhythm. */
    margin: 0 auto var(--space-8);
}

.hm-resource-card {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hm-resource-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hm-resource-card:focus-visible {
    outline: 2px solid var(--forest-moss);
    outline-offset: 2px;
    box-shadow: var(--shadow-md);
}

/* Sage-mist as decorative fill only (R-9) — the icon box, not a boundary. */
.hm-resource-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    background: var(--sage-mist);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

.hm-resource-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.hm-resource-body {
    flex: 1;
}

.hm-resource-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin: var(--space-2) 0;
}

.hm-resource-desc {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    line-height: 1.6;
    margin: 0;
}

.hm-resource-arrow {
    color: var(--forest-moss);
    font-weight: 600;
}

/* --- Theme chip row (DESIGN §2.10 hm-chip-row) ---
   Spacing wrapper guaranteeing >=44px targets for .lib-badge--link chips.
   Rules are scoped to this wrapper context only — the badge recipe itself
   is untouched everywhere else. */
.hm-chip-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    max-width: 720px;
    margin: 0 auto var(--space-6);
}

.hm-chip-row .lib-badge--link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    font-size: var(--text-sm);
    /* Cloud surface so the parchment-filled chip stays visible against the
       parchment band this section sits on (scoped, token-only). */
    background: var(--cloud);
    border: 1px solid var(--color-border);
}

.hm-chip-row .lib-badge--link:hover {
    background: var(--parchment);
}

/* --- Reference link recipe (DESIGN §2 conventions) ---
   Inter 500 forest (6.23:1), no underline at rest, underline + hover green
   on hover, standard 2px focus outline. */
.hm-ref-link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--color-primary);
    text-decoration: none;
    /* Touch target: the link's own box was only 20px tall. Block padding
       grows the hit area to 44px WITHOUT changing `display`, so the in-prose
       instances (landing.html S3 siblings / S7 research / S10 credits
       footnote, guides_hub.html) keep wrapping inside their sentences. An
       inline-flex box would have turned those into unbreakable atomic
       inlines. */
    padding-block: 12px;
}

.hm-ref-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.hm-ref-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- White text link on forest bands (R-7: never gold on forest) ---
   White focus-ring variant per DESIGN §3.4. */
.hm-band-link {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: var(--space-2) 0;
    margin-top: var(--space-3);
}

.hm-band-link:hover {
    text-decoration-thickness: 2px;
}

.hm-band-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Forest-band CTA focus ring (homepage-benefits-spec §12, flag F-16) ---
   VERIFIED GAP: .sb-final-cta (landing_v3.css 398–417) ships :hover but no
   :focus-visible rule at all, so a keyboard user got only the browser default
   ring on a white pill over forest. This is the sanctioned white focus variant
   (DESIGN §3.4).

   FIX ROUND 1 (finding 3): this used to scope off `.yoto-section` and
   `.sb-final-section`, both of which are LOCKED non-hm- classes — so it was
   not the scoped-hm--wrapper precedent the header comment claimed. The scope
   is now `.hm-forest-band`, a styling-free hook added to the two forest
   sections in landing.html, which makes this a true ancestor-scoped rule with
   an hm- ancestor (the DESIGN §2.13 ia-footer-col precedent). The
   .sb-final-cta recipe is untouched, and proto/landing_v3.html's copy of the
   band — which carries no hm- hook — is unaffected. */
.hm-forest-band .sb-final-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- Playback-route list (S5, forest band only) ---
   White at every size (6.39:1 on forest ✓). Sage-mist is barred here: R-4
   permits it only at ≥18px and these lines are --text-base. No bullets — the
   route name in <strong> is the marker. */
.hm-route-list {
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 var(--space-6);
}

.hm-route {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: #fff;
    margin-bottom: var(--space-3);
}

.hm-route:last-child {
    margin-bottom: 0;
}

.hm-route strong {
    font-weight: 600;
    color: #fff;
}

/* --- Benefit pillar cards (homepage-benefits-spec §7.2) ---
   The same white-card-with-border recipe as .hm-resource-card, so the grid
   reads on both cloud and parchment bands. NON-INTERACTIVE: no hover lift and
   no focus ring — a pillar card is not a link. */
.hm-pillar-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    max-width: 1080px;
    margin: 0 auto var(--space-8);
}

.hm-pillar-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    text-align: left;
}

.hm-pillar-emoji {
    display: block;
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: var(--space-3);
}

.hm-pillar-title {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--text-lg);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

/* Charcoal at full opacity (15.30:1 on white). Never driftwood (R-1), and
   never the opacity:0.85 the old inline-styled feature grid used — that was
   quietly reducing effective contrast on body copy. */
.hm-pillar-body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text-primary);
    margin: 0;
}

/* NOTE: spec §7.2's optional `.hm-pillar-list` is deliberately NOT shipped —
   no pillar card in §4's copy carries a bulleted list, so the rule would be
   dead CSS. If one is ever added, do NOT reuse `.feature-list`: that recipe
   drops to 0.7rem (≈11px) on mobile, unreadable outside a pricing card. */

/* --- Stagger delays for hm- grid children (pre-wired pattern,
   landing.css 1335–1351 idiom) --- */
.hm-limits-bar .fade-up:nth-child(2),
.hm-resource-grid .fade-up:nth-child(2),
.hm-pillar-grid .fade-up:nth-child(2) {
    transition-delay: 80ms;
}

.hm-limits-bar .fade-up:nth-child(3),
.hm-pillar-grid .fade-up:nth-child(3) {
    transition-delay: 160ms;
}

.hm-limits-bar .fade-up:nth-child(4),
.hm-pillar-grid .fade-up:nth-child(4) {
    transition-delay: 240ms;
}

.hm-pillar-grid .fade-up:nth-child(5) {
    transition-delay: 320ms;
}

.hm-pillar-grid .fade-up:nth-child(6) {
    transition-delay: 400ms;
}

/* --- Responsive (audit points 320 / 768 / 1024 / 1440) --- */

@media (min-width: 480px) {
    /* Limits chips 2x2 between stacked-at-320 and four-across desktop */
    .hm-limits-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .hm-eyebrow {
        font-size: var(--text-sm);
    }

    .hm-resource-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pillar grids hold 3 or 6 cards; 2-up at tablet, 3-up from 1024. */
    .hm-pillar-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* FIX ROUND 1 (finding 5): at 768–1023 the 2-up rule above left the THIRD card
   of a 3-card grid alone on row 2 at half width, with an empty half-gutter
   beside it — twice on the page (#about-them and #features). #what-you-get has
   6 cards and tiles cleanly 2×3, so it must keep the plain 2-up.
   `:nth-child(3):last-child` selects the third card ONLY when it is also the
   last one, which is exactly the 3-card case; the 6-card grid's third card has
   siblings after it and is never matched. Spanning both columns is preferred
   over going 3-up here: at 768 the section's 5% padding leaves ~691px, so
   three tracks would be ~214px wide and, minus the card's 2×--space-6 padding,
   leave a ~148px measure — roughly 19 characters a line. */
@media (min-width: 768px) and (max-width: 1023px) {
    .hm-pillar-grid .hm-pillar-card:nth-child(3):last-child {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    /* Four-across only once each chip clears ~215px. At 768 the four chips got
       ~166px, which broke "100MB · 60 min" and "600MB · 6 h" across two lines,
       wrapped "pixel icons per track", and pushed all four "handled
       automatically" ticks onto two lines at four different baselines.
       768–1023 keeps the tidy 2×2 from the 480 rule above. The shaping
       specimens that replaced them are shorter still ("5 · 10 · 15" is the
       widest figure and is nowrap), so the same rule holds. */
    .hm-limits-bar {
        grid-template-columns: repeat(4, 1fr);
    }

    .hm-pillar-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .hm-resource-card {
        flex-direction: column;
        gap: var(--space-3);
    }

}

/* PRE-EXISTING BUG (identical at HEAD) — landing.css keeps .pricing-grid at
   repeat(3, 1fr) at EVERY width. The three cards carry 50px of horizontal
   padding each, so their combined min-content width exceeds the viewport
   below ~1024px: the document scrolled to 455px at 375 and to 882px at 768.
   (`1fr` is `minmax(auto, 1fr)`, so the tracks cannot shrink past min-content
   — the overflow is not a gap/padding problem and is not fixable by the
   gap rule landing.css already ships at this breakpoint.)
   Single column with a readable measure up to 1023px; the featured card's
   scale(1.05) (gated ≥768px in landing.css) stays inside the viewport at
   480 × 1.05 = 504px.

   FIX ROUND 1 (finding 2): this used to be a bare `.pricing-grid` rule, i.e.
   an unscoped restyle of a locked component (contract §4.5/§4.6), relying on
   source order to win. It is now scoped to `.hm-pricing-fit`, a styling-free
   hook on the '/' pricing section, so the locked .pricing-grid recipe is
   restyled nowhere — only inside this one opted-in wrapper. The extra class
   also raises specificity to (0,2,0), so the rule no longer depends on
   landing_home.css happening to load after landing.css. */
@media (max-width: 1023px) {
    .hm-pricing-fit .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}