/* =====================================================================
   home_b.css — /, Homepage B

   Source of truth: bmad-output/redesign-home-b/dc/Wayfable-Homepage-B.dc.html.
   The artboard is a canvas component whose renderVals() computes every
   style object per device; this sheet is that function written out once as
   a page vocabulary — mobile values as the default, desktop values from the
   site's 768px breakpoint (decisions.md ruling 5). Every literal below is a
   value from renderVals(); when goal 08's diff finds one that is not, the
   sheet is wrong, not the artboard.

   ⛔ EVERY SELECTOR THAT NAMES A CLASS NAMES AN hb- ONE (design contract
   §4.6), so this sheet cannot reach a component on any other page. Enforced
   by tests/test_home_b.py. The one body-level rule is scoped with :has().

   ⛔ NO CUSTOM PROPERTIES ARE DEFINED HERE (contract §1.6): the footer
   renders from undefined variables by design and a page sheet that defines
   one repaints it. The design's palette ships as literals (decisions.md
   ruling 3):
     page #FDF8F0  card #FFFEFB / #FFFFFF  band #F5EDE1  line #E9E0CF
     ink #2C2418   heading #1F5540  forest #2D6A4F  hover #24503C
     text #55503F / #6E6555 / #8A7F68  gold #C8922A  sage #A8C5B5
     sunlit #EDD9A3  pale-forest #D8E6DD  bar #DDD5C2
   ===================================================================== */

/* The design paints the whole page #FDF8F0; the shared chrome has no
   background of its own, so it shows this on / and each page's own cream
   elsewhere. Scoped so no other page changes. */
body:has(.hb-page) { background: #FDF8F0; }

.hb-page {
    font-family: Inter, system-ui, sans-serif;
    color: #2C2418;
    -webkit-font-smoothing: antialiased;
    /* The design's root sets no line-height, so every element without one of
       its own renders at `normal` (~1.2). styles.css gives body 1.6; left to
       inherit, eyebrows, buttons, pills, card titles and footer links all
       stood taller than drawn (goal 08 diff, D1). Explicit values below
       override this as they do in renderVals(). */
    line-height: normal;
}
.hb-page *, .hb-page *::before, .hb-page *::after { box-sizing: border-box; }
/* The helmet's `a { color }`; :where() keeps it at zero specificity so the
   button classes below win without doubling every selector. */
:where(.hb-page) a { color: #2D6A4F; }
:where(.hb-page) a:hover { color: #24503C; }

/* --- Section shells ---------------------------------------------------
   renderVals: sec = { padding: desktop ? '88px 56px' : '48px 20px' } plus,
   at desktop only, { maxWidth: 1120, margin: '0 auto' } — the band
   background is constrained to the 1120 measure, not full-bleed. */
.hb-hero, .hb-section, .hb-band { padding: 48px 20px; }
.hb-band { background: #F5EDE1; }
.hb-hero { padding-top: 22px; padding-bottom: 40px; }

/* --- Type --------------------------------------------------------------- */
.hb-eyebrow, .hb-label, .hb-kicker {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #2D6A4F;
    margin: 0 0 12px;
}
.hb-eyebrow { margin: 0 0 10px; }
.hb-label--light { color: #A8C5B5; }

.hb-h1 {
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 1.13;
    letter-spacing: -0.015em;
    margin: 0 0 14px;
    text-wrap: pretty;
    max-width: 700px;
}
.hb-h2 {
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    font-size: 27px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
    text-wrap: pretty;
    max-width: 720px;
    color: #1F5540;
}
.hb-h3 {
    font-family: Lora, Georgia, serif;
    font-size: 19px;
    font-weight: 600;
    line-height: normal;  /* styles.css gives h3 1.3; the design's h3 sets none */
    margin: 0 0 10px;
}
.hb-lede {
    font-size: 17px;
    line-height: 1.6;
    color: #55503F;
    margin: 0 0 18px;
    max-width: 620px;
    text-wrap: pretty;
}
.hb-sub {
    font-size: 16.5px;
    line-height: 1.65;
    color: #6E6555;
    margin: 0 0 28px;
    max-width: 680px;
    text-wrap: pretty;
}
.hb-body { font-size: 16px; line-height: 1.6; color: #6E6555; margin: 0 0 14px; }
.hb-note { font-size: 15px; line-height: 1.65; color: #6E6555; margin: 26px 0 0; max-width: 700px; }
.hb-note a { color: #2D6A4F; }
.hb-link { font-size: 15px; color: #2D6A4F; }
.hb-num {
    font-family: Lora, Georgia, serif;
    font-size: 15px;
    color: #C8922A;
    display: block;
    margin-bottom: 10px;
}

/* --- Buttons ------------------------------------------------------------ */
.hb-btn {
    display: inline-block;
    background: #2D6A4F;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 600;
    padding: 16px 28px;
    border-radius: 10px;
    text-decoration: none;
}
.hb-btn:hover { color: #FFFFFF; }
.hb-btn--gold { background: #EDD9A3; color: #24503C; }
.hb-btn--gold:hover { color: #24503C; }
.hb-btn-solid {
    display: inline-block;
    background: #2D6A4F;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    align-self: flex-start;
    margin-top: auto;
}
.hb-btn-solid:hover { color: #FFFFFF; }
.hb-btn-ghost {
    display: inline-block;
    align-self: flex-start;
    margin-top: auto;
    border: 1px solid #2D6A4F;
    color: #2D6A4F;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
}
.hb-cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* --- Hero --------------------------------------------------------------- */
.hb-hero-grid { display: flex; flex-direction: column; gap: 22px; }
.hb-hero-art { display: block; }
.hb-hero-img { display: block; width: 100%; height: auto; max-width: 280px; margin: 0 auto; }

.hb-player {
    background: #FFFEFB;
    border: 1px solid #E9E0CF;
    border-radius: 12px;
    padding: 18px;
    margin: 0 0 18px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.hb-player-head { display: flex; align-items: center; gap: 16px; }
.hb-player-play {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: #2D6A4F;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 0 0 0 4px;
    /* A real <button> now: the UA's border, font and margin are reset so it
       paints exactly as the artboard's span did. */
    border: 0;
    margin: 0;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
}
/* Playing: two CSS bars, not a glyph — Inter has no "❚" and the fallback
   paints a square. */
.hb-player-play.is-playing { padding-left: 0; }
.hb-player-play.is-playing .hb-player-glyph {
    display: block;
    width: 12px;
    height: 14px;
    font-size: 0;
    background: linear-gradient(to right, #FFFFFF 0 4px, transparent 4px 8px, #FFFFFF 8px 12px);
}
.hb-player-play:focus-visible { outline: 2px solid #2D6A4F; outline-offset: 3px; }
.hb-player-titles { display: flex; flex-direction: column; gap: 3px; }
.hb-player-title { font-family: Lora, Georgia, serif; font-size: 19px; font-weight: 600; }
.hb-player-meta { font-size: 14px; color: #6E6555; }
.hb-waveform { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.hb-waveform span { flex: 1 1 auto; border-radius: 2px; background: #DDD5C2; }
/* At rest, the artboard's nine painted bars; once playback starts the bars
   track progress instead. */
.hb-waveform:not(.is-live) span:nth-child(-n+9) { background: #2D6A4F; }
.hb-waveform.is-live span.is-played { background: #2D6A4F; }
.hb-player-caption { font-size: 11px; line-height: 1.45; color: #7A7168; margin: 0; }
.hb-player-caption a { color: #2D6A4F; }
.hb-player-passage { display: none; }
.hb-player-name { color: #2D6A4F; }
.hb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-pill {
    font-size: 13.5px;
    font-weight: 500;
    color: #55503F;
    border: 1px solid #E9E0CF;
    border-radius: 999px;
    padding: 7px 13px;
}
.hb-pill--len { display: none; }

/* --- Where to start ------------------------------------------------------ */
.hb-nights-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 28px; }
.hb-night {
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 12px;
    border: 1px solid #E9E0CF;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
    color: inherit;
    text-decoration: none;
}
.hb-night:hover { color: inherit; }
.hb-night.is-on { border-color: #2D6A4F; background: #FFFFFF; }
.hb-night-emoji { font-size: 24px; line-height: 1; }
.hb-night-title { font-family: Lora, Georgia, serif; font-size: 19px; font-weight: 600; color: #2C2418; }
.hb-night-desc { font-size: 15px; line-height: 1.55; color: #6E6555; }
.hb-quote {
    background: #FFFFFF;
    border: 1px solid #E9E0CF;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 2px 14px rgba(44, 36, 24, 0.05);
}
.hb-passage {
    font-family: Lora, Georgia, serif;
    font-size: 20px;
    line-height: 1.55;
    color: #2C2418;
    margin: 0;
    text-wrap: pretty;
}
.hb-quote-row { margin-top: 18px; }

/* --- How it works / cards -------------------------------------------- */
.hb-tri { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
.hb-card {
    background: #FFFEFB;
    border-radius: 12px;
    padding: 26px;
    border: 1px solid #E9E0CF;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}
.hb-how-link { font-size: 15px; margin: 24px 0 0; }

/* --- Pricing -------------------------------------------------------------
   ⭐ ONE ROW OF EQUAL COLUMNS (goal 21, decisions.md §12). The plans left the
   card: there is no fill, no radius and no ring, so nothing about a column's
   frame says it is the recommended one. Depth is the design system's hairline
   and nothing else.

   The row is grid-auto-flow rather than a fixed four-track template, because
   pack_links_enabled decides server-side whether three columns render or
   four. Auto columns take their count from the items, so the gated state is
   three equal columns and not four tracks with an empty one.

   ⚠ #DDD5C2, not #E9E0CF. Both are palette values (ds_rules.py PALETTE), but
   the hairline was calibrated against the card, and on the #F5EDE1 band it
   measures about 1.08:1 and does not read at 1px. The bar value is the one
   that survives the band. */
.hb-price-row { display: grid; }
.hb-plan { display: flex; flex-direction: column; }
.hb-plan + .hb-plan { margin-top: 26px; padding-top: 26px; border-top: 1px solid #DDD5C2; }
/* Stretched and centred: at four across a left-aligned label inside a 208px
   column reads as debris rather than a button. */
.hb-plan .hb-btn-ghost {
    align-self: stretch;
    text-align: center;
    min-height: 44px;
    margin-top: auto;
}
.hb-price {
    font-family: Lora, Georgia, serif;
    /* 40px was drawn for a 492px card. The row is 252px a column, where 34
       keeps the figure the loudest thing in it without crowding the unit. */
    font-size: 34px;
    line-height: 1.1;
    color: #1F5540;
    margin: 0 0 6px;
}
/* Muted, not faint. #8A7F68 on this surface is one of the three pairings that
   fails AA at text sizes (decisions.md flag F4); the row is new work, and the
   rule set says new work does not inherit the calibration. */
.hb-price-unit { font-size: 16px; font-weight: 500; color: #6E6555; font-family: Inter, system-ui, sans-serif; }
.hb-price-note { font-size: 15px; line-height: 1.5; color: #55503F; margin: 0 0 16px; }
.hb-features {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
}
.hb-feature { font-size: 15px; line-height: 1.55; color: #6E6555; padding: 10px 0; border-top: 1px solid #DDD5C2; }

/* --- Before you start ---------------------------------------------------- */
.hb-trust-grid { display: flex; flex-direction: column; gap: 20px; }
.hb-trust-list { display: flex; flex-direction: column; }
.hb-trust-row {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 16px;
    padding: 18px 0;
    border-top: 1px solid #E9E0CF;
}
.hb-trust-num { font-family: Lora, Georgia, serif; font-size: 15px; color: #C8922A; padding-top: 4px; }
.hb-trust-art { display: block; }
.hb-trust-img { display: block; width: 100%; height: auto; max-width: 280px; margin: 0 auto; }

/* --- The forest CTA band (full-bleed: no inner measure in renderVals) ---- */
.hb-cta { background: #2D6A4F; color: #FFFFFF; padding: 48px 20px; }
.hb-cta-heading {
    font-family: Lora, Georgia, serif;
    font-weight: 600;
    color: #FFFFFF;
    font-size: 27px;
    line-height: 1.2;
    margin: 0 0 14px;
    max-width: 700px;
}
.hb-cta-body { font-size: 17px; line-height: 1.65; color: #D8E6DD; margin: 0 0 28px; max-width: 560px; }

/* =====================================================================
   Desktop — the design's 1280 view, from 768px up
   ===================================================================== */
@media (min-width: 768px) {
    .hb-hero, .hb-section, .hb-band { padding: 88px 56px; max-width: 1120px; margin: 0 auto; }
    .hb-hero { padding-top: 72px; padding-bottom: 80px; }

    .hb-eyebrow { margin: 0 0 18px; }
    .hb-h1 { font-size: 52px; margin: 0 0 20px; }
    .hb-h2 { font-size: 38px; }
    .hb-lede { font-size: 19px; margin: 0 0 26px; }
    .hb-sub { font-size: 18px; }

    .hb-hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 56px;
        align-items: center;
        max-width: 1120px;
        margin: 0 auto;
    }
    .hb-hero-img { max-width: 480px; }
    .hb-player { padding: 26px; margin: 0 0 26px; }
    .hb-player-passage {
        display: block;
        font-family: Lora, Georgia, serif;
        font-size: 22px;
        line-height: 1.55;
        color: #2C2418;
        margin: 0;
        text-wrap: pretty;
    }
    .hb-pill--len { display: block; }

    .hb-nights-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .hb-night { padding: 22px 20px; }
    .hb-quote { padding: 30px; }
    .hb-passage { font-size: 22px; }

    .hb-tri { grid-template-columns: repeat(3, 1fr); gap: 24px; }

    /* The row proper. 1120 shell less 56px of padding each side is a 1008px
       measure, so four columns are 252px and 22px of padding each side
       leaves 208px of text. The edge columns give their outer padding back
       so the row starts and ends flush with the heading above it. */
    .hb-price-row { grid-auto-flow: column; grid-auto-columns: 1fr; align-items: stretch; }
    .hb-plan { padding: 0 22px; }
    .hb-plan:first-child { padding-left: 0; }
    .hb-plan:last-child { padding-right: 0; }
    .hb-plan + .hb-plan { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid #DDD5C2; }

    .hb-trust-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 56px; align-items: center; }
    .hb-trust-row { column-gap: 24px; padding: 22px 0; }
    .hb-trust-img { max-width: 380px; }

    .hb-cta { padding: 80px 56px; }
    .hb-cta-heading { font-size: 38px; }
}