/* ═══════════════════════════════════════════════════════════════════════════
   home.css: desktop Home, the front door (docs/plans/desktop/desktop-home.md)

   Linked by desktop/templates/layout.php after components.css on EVERY
   desktop page, so everything here is scoped under .page-home (and
   .desktop-footer for the footer include). Consumes the tokens from
   desktop.css (--rt-*, --accent, --surface*, --line*, --text*, --step-*,
   --radius*, --shadow-*, --font-*) and the .pl spinner block from shell.css.
   The board reuses components.css's .results-grid untouched: only the
   .home-board column tweak lives here.

   The mobile Home (pages/Home.php + its <style> blocks, assets/css/app.css)
   is the source: the hero input's grid rules, the caret, the tile poses and
   the photo-card treatment are ported by hand onto the desktop tokens.

   Sections:
     1. HERO                  the gradient panel, greeting, prompt, the Hoku input,
                              the reply fallback, region pills, doors, scroll hint
     2. BOARD                 "What's on in {short}", the live card grid
     3. TLDR                  nine photo cards
     4. KEEPER                the Keeper panels as photo cards with lists
     5. STORY                 Adam and Alice: the snap strip + the intro card
     6. DIVE                  the Instagram 3x3 grid
     7. APP                   the four video cards + store buttons
     8. CONTACT               Let's Talk card
     9. FOOTER                .desktop-footer
    10. NARROW (<= 1100px / <= 900px)

   Soehne has no weight axis: nothing here sets a weight, emphasis swaps the
   family (mobile's font-weight-bolder becomes --font-display, _600 becomes
   --font-head). No em-dashes in copy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The mobile's .text-script face (assets/css/style.css) for the story roles
   and the "Connecting People to People" title. Same file the mobile loads;
   the desktop surface does not link style.css, so the face is declared here. */
@font-face {
    font-family: 'better-rattler';
    src: url('../../../assets/fonts/better-rattler.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Page-local knobs. --home-ease is the mobile's --default-easing (the house
   curve every Home transition rides); --font-script is the mobile's
   .text-script family with the same fallback stack shape. --page-max caps
   the long scroll so the hero and the sections share one column. */
.page-home {
    --home-ease:    cubic-bezier(0.77, 0, 0, 1);
    --font-script:  'better-rattler', 'soehne-fett', -apple-system, system-ui, sans-serif;
    --page-max:     1280px;
    --photo-radius: var(--radius);

    display: block;
    max-width: 1480px;
    margin: 0 auto;
}

.page-home .text-script {
    font-family: var(--font-script);
    letter-spacing: 0;
}


/* ─── 1. HERO ─────────────────────────────────────────────────────────────── */
/* The first viewport: a brand-gradient panel (the rail's blue running into
   a darkened pink, a teal and a purple glow for the rest of the palette),
   white text, the inner column left-aligned at 820px. min-height is the
   viewport less .desktop-main's 2.5rem top padding and a sliver of the
   board beneath, so the scroll hint always has something to point at. */

.page-home .home-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 4rem);
    padding: clamp(3rem, 6vw, 5.5rem) clamp(2rem, 5vw, 5rem) 5rem;
    border-radius: var(--radius);
    color: #fff;
    background:
        radial-gradient(60% 55% at 92% 8%, color-mix(in srgb, var(--rt-teal) 45%, transparent) 0%, transparent 70%),
        radial-gradient(55% 50% at 8% 95%, color-mix(in srgb, var(--rt-purple) 55%, transparent) 0%, transparent 72%),
        linear-gradient(160deg, var(--rt-blue) 0%, color-mix(in srgb, var(--rt-pink) 70%, black) 100%);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    isolation: isolate;
}

.page-home .hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
}

/* Greeting + prompt. The greeting is one line by contract (Home.js drops
   options past the 22-char budget), so it never wraps; the prompt balances.
   Both ship visibility:hidden (below) until Home.js has split the chars. */
.page-home .hero-greeting {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.2rem);
    line-height: 1;
    letter-spacing: -.04em;
    white-space: nowrap;
    color: #fff;
    margin: 0 0 .6rem;
}

.page-home .hero-prompt {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .25);
    margin: 0 0 1.75rem;
}

/* Ship hidden. CSS applies at parse time, so nothing paints before Home.js
   runs; init() flips these to visible after GSAP has split the chars and
   swapped the input's typing surface (mobile's rule, verbatim in spirit). */
.page-home #Text-Greeting,
.page-home #Text-Prompt,
.page-home #Text-Input {
    visibility: hidden;
}

/* SplitText chars: no opacity hiding, they ship translated below their
   word's clip via inline styles set at init. */
.page-home .laleh-ch {
    display: inline-block;
    white-space: pre;   /* keep space widths */
}

/* The Hoku input: a white glass box. Row 1 is the icon gutter + the field,
   row 2 the chips + send. The textarea and the ghost phrase stack in ONE
   grid cell (mobile's .ti-field rule): whichever is taller sets the row, so
   the ghost's typing wraps and grows the box exactly like typed text. */
.page-home .hero-input {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 1.25rem 1.1rem 3.2rem;
    border-radius: 2rem;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: var(--shadow-md);
    color: var(--text);
    font-family: var(--font-text);
    font-size: var(--step-1);
    line-height: 1.3;
    transition: box-shadow .25s var(--home-ease);
}

.page-home .hero-input:focus-within {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .35), var(--shadow-md);
}

.page-home .hero-input .ti-icon {
    position: absolute;
    top: 1.15rem;
    left: 1.2rem;
    padding-top: 4px;
    font-size: 1.1em;
    color: var(--accent);
    pointer-events: none;
}

.page-home .hero-input .ti-field {
    display: grid;
    min-width: 0;
}

/* The real input disappears into the box: all chrome stays on the container.
   Bootstrap's reboot gives textarea a vertical resize handle; off here. */
.page-home .hero-input textarea {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
    font: inherit;
    color: inherit;
    display: block;
    resize: none;
    line-height: 1.3;
    /* 1 line at rest (rows=1); JS grows it with content up to 3 lines,
       then the max-height takes over and it scrolls */
    max-height: calc(1.3em * 3);
    overflow-y: auto;
}

.page-home .hero-input textarea::placeholder {
    color: transparent;
}

/* The rotating phrase types into this overlay (real DOM, never the
   placeholder attribute: animating a placeholder inside a backdrop-filter
   layer corrupts WebKit's repaints). */
.page-home #Text-Input-Ghost {
    grid-area: 1 / 1;
    line-height: 1.3;
    white-space: pre-wrap;
    pointer-events: none;
    color: var(--text-faint);
}

/* Blinking caret riding the ghost's typing: a zero-height anchor in the
   text flow (contributes nothing to the line box) whose bar is an absolute
   pseudo, so the bar can be any size without shifting the phrase. */
.page-home .laleh-cursor {
    display: inline-block;
    width: 2px;
    height: 0;
    position: relative;
    margin-left: 2px;
    animation: laleh-blink 1.06s step-end infinite;
}

.page-home .laleh-cursor::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -0.18em;   /* dip below the baseline like a real caret */
    width: 2px;
    height: 1.2em;
    background: currentColor;
}

@keyframes laleh-blink {
    50% { opacity: 0; }
}

/* Row 2: intent chips inline with the send. Send hides until there is text
   (Home.js toggles .is-visible; submit still no-ops on empty as a backstop). */
.page-home .hero-input .ti-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: .6rem 0 0;
    min-height: 2.5rem;
}

.page-home #heroChips {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: .35rem;
    overflow-x: auto;   /* long labels scroll, never wrap the row */
    scrollbar-width: none;
}

.page-home #heroChips::-webkit-scrollbar {
    display: none;
}

.page-home .hero-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: .3rem .85rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: transparent;
    color: var(--rt-crimson);
    font-family: var(--font-head);
    font-size: var(--step--1);
    line-height: 1.3;
    outline: none;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}

.page-home .hero-chip:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
    color: var(--rt-crimson);
}

.page-home .hero-chip:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The send: a round pink gradient, popping in only once there is text */
.page-home .hero-send {
    flex: 0 0 auto;
    margin-left: auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    background: linear-gradient(160deg, #ff99bd, var(--rt-pink));
    box-shadow: 0 .375rem .875rem rgba(235, 93, 143, .32);
    opacity: 0;
    visibility: hidden;
    transform: scale(.6);
    pointer-events: none;
    transition: opacity .25s var(--home-ease), transform .25s var(--home-ease), visibility 0s linear .25s;
}

.page-home .hero-send.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
    transition-delay: 0s;
}

.page-home .hero-send.is-visible:hover {
    transform: scale(1.06);
}

.page-home .hero-send.is-visible:active {
    transform: scale(.96);
}

/* No chips (.ti-nochips, set server-side): the actions row collapses and the
   send floats the box's bottom-right corner, composer-style. The field keeps
   a right gutter so typed text never slides under it. */
.page-home .hero-input.ti-nochips .ti-actions {
    margin: 0;
    min-height: 0;
}

.page-home .hero-input.ti-nochips .hero-send {
    position: absolute;
    right: .85rem;
    bottom: .85rem;
}

.page-home .hero-input.ti-nochips .ti-field {
    margin-right: 2.75rem;
}

/* Gate reply: error fallback only (verdicts open a Laleh-View thread), a
   glass note under the input. Bootstrap's [hidden] rule keeps it gone. */
.page-home .hero-reply {
    margin-top: .75rem;
    padding: .9rem 1.25rem;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: var(--step-0);
}

.page-home .hero-reply[hidden] {
    display: none;
}

.page-home .hero-reply p {
    margin: 0;
}

/* Region pills: glass chips, the active one solid white. They ride the
   doors' timeline: ship .inactive, Home.js strips it in sequence. */
.page-home .region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.75rem 0 0;
}

.page-home .region-pill {
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .5rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    cursor: pointer;
    opacity: 1;
    transform: translateY(0);
    transition:
        background .2s, border-color .2s, color .2s,
        opacity 800ms var(--home-ease),
        transform 800ms var(--home-ease);
}

.page-home .region-pill:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .55);
    color: #fff;
}

.page-home .region-pill:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7);
    outline-offset: 2px;
}

.page-home .region-pill.active {
    background: #fff;
    border-color: #fff;
    color: var(--text);
}

.page-home .region-pill .pill-name {
    font-family: var(--font-head);
}

.page-home .region-pill .pill-tagline {
    font-family: var(--font-text);
    font-size: var(--step--1);
    color: rgba(255, 255, 255, .72);
}

.page-home .region-pill.active .pill-tagline {
    color: var(--text-faint);
}

.page-home .region-pill.inactive {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

/* Home.js marks the row .is-busy while set-region.php is in flight: the
   pills dim and ignore clicks until the board re-fetch begins. */
.page-home .region-pills.is-busy {
    opacity: .6;
    pointer-events: none;
    transition: opacity .2s;
}

/* Doors: four gradient tiles (the mobile's fanned tiles, laid flat). Each
   ships .inactive and rises on the timeline's branch; hover lifts. */
.page-home .home-doors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0 0;
}

.page-home .home-door {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 150px;
    padding: 1.25rem 1.2rem 1.1rem;
    border-radius: var(--radius);
    outline: 3px solid rgba(255, 255, 255, .28);
    outline-offset: -3px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    opacity: 1;
    transform: translateY(0);
    transform-origin: 50% 100%;
    will-change: transform, opacity;
    transition:
        transform 800ms var(--home-ease),
        opacity 800ms var(--home-ease),
        box-shadow 800ms var(--home-ease);
}

.page-home .home-door:hover,
.page-home .home-door:focus-visible {
    color: #fff;
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
    transition-duration: 250ms;
}

.page-home .home-door:focus-visible {
    outline-color: #fff;
}

.page-home .home-door.inactive {
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

.page-home .home-door i {
    font-size: 2rem;
    line-height: 1;
    color: rgba(255, 255, 255, .92);
}

.page-home .home-door span {
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    letter-spacing: -.01em;
}

/* Door colours (the mobile's -20deg dark-to-base pairs on the desktop palette) */
.page-home .door-warn {
    background: linear-gradient(-20deg, color-mix(in srgb, var(--rt-amber) 68%, black) 0%, var(--rt-amber) 100%);
}

.page-home .door-primary {
    background: linear-gradient(-20deg, color-mix(in srgb, var(--rt-blue) 62%, black) 0%, var(--rt-blue) 100%);
}

.page-home .door-brand {
    background: linear-gradient(-20deg, var(--rt-crimson) 0%, var(--rt-pink) 100%);
}

.page-home .door-accent {
    background: linear-gradient(20deg, color-mix(in srgb, var(--rt-crimson) 62%, black) 0%, var(--rt-crimson) 100%);
}

/* Scroll hint: a centred chevron on a gentle bob at the panel's foot */
.page-home .hero-scroll-hint {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .3);
    font-size: .9rem;
    transform: translateX(-50%);
    animation: home-hint-bob 2.4s ease-in-out infinite;
    transition: background .2s, color .2s;
}

.page-home .hero-scroll-hint:hover {
    color: #fff;
    background: rgba(255, 255, 255, .24);
}

@keyframes home-hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}


/* ─── 2. BOARD ────────────────────────────────────────────────────────────── */
/* The long scroll's rhythm: every section after the hero shares one column
   and one head. .section-head lays out as a wrapping flex row: eyebrow and
   lede take a full line each, the title shares its line with the trailing
   control (.link or .story-nav) on a common baseline. */

.page-home .home-section {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 4rem 0;
}

.page-home .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    margin: 0 0 1.75rem;
}

.page-home .section-head > .eyebrow,
.page-home .section-head > .lede {
    flex: 0 0 100%;
}

.page-home .section-head > .eyebrow {
    margin: 0 0 .5rem;
}

.page-home .section-head > .lede {
    margin: .5rem 0 0;
}

.page-home .section-title {
    flex: 1 1 auto;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--text);
    margin: 0;
}

.page-home .section-head > .link {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: var(--step-0);
    white-space: nowrap;
}

/* The live board: components.css's .results-grid, one column tweak so twelve
   cards sit four-up at the section's width (the shared minmax(300px) falls
   to three-up a hair under 1280px). */
.page-home .home-board {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Loading (a spinner) and empty ("Nothing listed here yet.") share one box
   across every column. The spinner is shell.css's .pl in its --md size. */
.page-home .home-board-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 220px;
    padding: 2.5rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-faint);
    font-family: var(--font-head);
    font-size: var(--step-0);
    text-align: center;
}

.page-home .home-board-empty .pl {
    --pl-size: 2.5rem;
    margin: 0;
}

/* Home.js states: the grid dims while a fetch is in flight (the AI-Search
   board's .is-loading treatment, on the grid itself here since Home has no
   .results-board wrapper); .home-board-loading is the empty box carrying
   components.css's .pl.pl--inline.pl--sm.pl--mono spinner, centred. */
.page-home .home-board.is-loading {
    opacity: .6;
    pointer-events: none;
}

.page-home .home-board-empty.home-board-loading {
    border-style: solid;
    color: var(--text-faint);
}

.page-home .home-board-empty.home-board-loading .pl--inline {
    display: block;
    margin: 0 auto;
}


/* ─── 3. TLDR ─────────────────────────────────────────────────────────────── */
/* The photo card, shared by TL;DR, Keeper and Story: the page sets --bg to
   the CDN image inline; a dark gradient overlay keeps the white copy legible
   (the mobile's .home-instructional-content gradient). NOTE the inline --bg
   shadows desktop.css's --bg colour token inside these cards; nothing in a
   card reads it as a colour, so it is harmless. */

.page-home .tldr-card,
.page-home .keeper-card,
.page-home .story-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: var(--photo-radius);
    overflow: hidden;
    isolation: isolate;
    color: #fff;
    background: var(--rt-night-2) center / cover no-repeat;
    background-image: var(--bg);
    box-shadow: var(--shadow-md);
    transition: transform .35s var(--home-ease), box-shadow .35s var(--home-ease);
}

.page-home .tldr-card::before,
.page-home .keeper-card::before,
.page-home .story-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .04) 0%, rgba(0, 0, 0, .22) 45%, rgba(0, 0, 0, .74) 100%);
    pointer-events: none;
}

.page-home .tldr-card:hover,
.page-home .keeper-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(21, 56, 105, .2);
}

.page-home .tldr-body,
.page-home .story-body {
    position: relative;
    z-index: 1;
    padding: 1.5rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.page-home .tldr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.page-home .tldr-card {
    min-height: 320px;
}

/* Question: the conversational hook. Answer: the fact, in the display face.
   Punch: what sticks, muted under a hairline (the mobile triad). */
.page-home .tldr-question {
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.3;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 .6rem;
}

.page-home .tldr-answer {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 1.7vw, 1.6rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: #fff;
    margin: 0;
}

.page-home .tldr-punch {
    font-family: var(--font-text);
    font-size: var(--step--1);
    line-height: 1.35;
    text-wrap: balance;
    color: rgba(255, 255, 255, .8);
    margin: .75rem 0 0;
    padding-top: .6rem;
    border-top: 1px solid rgba(255, 255, 255, .25);
}


/* ─── 4. KEEPER ───────────────────────────────────────────────────────────── */
/* One photo card per Keeper panel (four, five where Tap to Pay is on), the
   bullet list in a dark glass box as the mobile's .home-instructional-content-list. */

.page-home .keeper-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.25rem;
}

.page-home .keeper-card {
    min-height: 460px;
    padding: 1.5rem;
}

.page-home .keeper-card > * {
    position: relative;
    z-index: 1;
}

.page-home .kc-label {
    font-family: var(--font-head);
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 .35rem;
}

.page-home .kc-title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 1.8vw, 1.75rem);
    line-height: 1.05;
    letter-spacing: -.02em;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 .25rem 5px rgba(0, 0, 0, .5);
    margin: 0 0 1rem;
}

.page-home .kc-list {
    list-style: none;
    margin: 0;
    padding: .35rem .85rem;
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, .3);
    outline: 1px solid rgba(255, 255, 255, .14);
}

.page-home .kc-list li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    column-gap: .75rem;
    align-items: start;
    padding: .55rem 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.page-home .kc-list li:first-child {
    border-top: 0;
}

.page-home .kc-list li > i {
    grid-row: 1 / span 2;
    justify-self: center;
    font-size: 1.25rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, .9);   /* the colour map below (0,3,0) outranks this default */
}

.page-home .kc-list li > span {
    grid-column: 2;
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.3;
}

.page-home .kc-sub {
    grid-column: 2;
    display: block;
    font-family: var(--font-text);
    font-size: var(--step--1);
    line-height: 1.35;
    color: rgba(255, 255, 255, .72);
    margin-top: .1rem;
}

/* The list icons carry the mobile's classes verbatim (fa-square-dollar
   text-lg text-primary-lt and co). The desktop surface never defines those
   colour utilities, so they are mapped onto the desktop tokens here, scoped
   to the list: -lt is a light tint of the family, -dk a deep one. text-lg is
   absorbed by the base icon rule (fixed 1.25rem, fixed width). */
.page-home .kc-list i {
    width: 1.6rem;
    font-size: 1.25rem;
    line-height: 1.3;
    text-align: center;
    flex: 0 0 auto;
}

.page-home .kc-list .text-primary-lt { color: color-mix(in srgb, var(--rt-blue) 55%, white); }
.page-home .kc-list .text-primary    { color: var(--rt-blue); }
.page-home .kc-list .text-primary-dk { color: color-mix(in srgb, var(--rt-blue) 70%, black); }
.page-home .kc-list .text-brand-lt   { color: color-mix(in srgb, var(--rt-pink) 60%, white); }
.page-home .kc-list .text-brand      { color: var(--rt-pink); }
.page-home .kc-list .text-brand-dk   { color: var(--rt-crimson); }
.page-home .kc-list .text-accent-lt  { color: color-mix(in srgb, var(--accent) 60%, white); }
.page-home .kc-list .text-accent     { color: var(--accent); }
.page-home .kc-list .text-warn-lt    { color: color-mix(in srgb, var(--rt-amber) 55%, white); }
.page-home .kc-list .text-warn       { color: var(--rt-amber); }
.page-home .kc-list .text-warning-lt { color: color-mix(in srgb, var(--rt-warning) 60%, white); }
.page-home .kc-list .text-warning    { color: var(--rt-warning); }
.page-home .kc-list .text-success-lt { color: color-mix(in srgb, var(--rt-green) 55%, white); }
.page-home .kc-list .text-success    { color: var(--rt-green); }
.page-home .kc-list .text-white      { color: #fff; }

/* The What Fees card's FREE badge: green in the head face */
.page-home .kc-free {
    font-family: var(--font-head);
    color: color-mix(in srgb, var(--rt-green) 60%, white);
    letter-spacing: .04em;
}


/* ─── 5. STORY ────────────────────────────────────────────────────────────── */
/* Adam and Alice as a wide snap strip: the intro card (two profiles on the
   paper surface) then eight photo cards, 520px each, one per beat.
   [data-story-prev] / [data-story-next] in the head scroll it by a card. */

.page-home #home-story .section-title {
    font-family: var(--font-script);
    font-size: clamp(2.4rem, 3.6vw, 3.2rem);
    letter-spacing: 0;
    line-height: 1;
}

.page-home .story-nav {
    flex: 0 0 auto;
    display: flex;
    gap: .5rem;
    align-self: center;
}

.page-home .story-nav button {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text-soft);
    transition: border-color .2s, color .2s, background .2s;
}

.page-home .story-nav button:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.page-home .story-nav button:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    outline: none;
}

.page-home .story-strip {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .25rem .25rem 1rem;
    margin: -.25rem -.25rem 0;
}

.page-home .story-strip::-webkit-scrollbar {
    display: none;
}

.page-home .story-card {
    flex: 0 0 520px;
    width: 520px;
    min-height: 460px;
    scroll-snap-align: start;
}

.page-home .story-label {
    font-family: var(--font-head);
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .78);
    margin: 0 0 .5rem;
}

.page-home .story-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2vw, 2.1rem);
    line-height: 1.05;
    letter-spacing: -.025em;
    text-wrap: balance;
    color: #fff;
    margin: 0 0 .5rem;
}

.page-home .story-sub {
    font-family: var(--font-head);
    font-size: var(--step-1);
    line-height: 1.25;
    color: rgba(255, 255, 255, .92);
    margin: 0 0 .75rem;
}

.page-home .story-text {
    font-family: var(--font-text);
    font-size: var(--step-0);
    line-height: 1.5;
    color: rgba(255, 255, 255, .86);
    margin: 0;
}

.page-home .story-text + .story-text {
    margin-top: .6rem;
}

/* The intro: no photo, no overlay, the two profiles side by side */
.page-home .story-card--intro {
    flex-basis: 680px;
    width: 680px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--text);
    box-shadow: none;
}

.page-home .story-card--intro::before {
    display: none;
}

.page-home .story-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

/* The round photo: an <img> or a div carrying --bg / a background-image */
.page-home .story-profile img,
.page-home .story-profile .story-avatar,
.page-home .story-profile .story-profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--rt-night-2) center / cover no-repeat;
    background-image: var(--bg);
    outline: 4px solid #fff;
    box-shadow: var(--shadow-md);
    margin: 0 0 1rem;
}

/* "This is Adam," in the head face; "a Keeper" in the script face, blue for
   the Keeper and pink for the Seeker (first / second profile, or the
   --keeper / --seeker modifiers if the page sets them). */
.page-home .story-profile h6,
.page-home .story-profile .story-name,
.page-home .story-profile .story-profile-kicker {
    font-family: var(--font-head);
    font-size: var(--step-0);
    color: var(--text-soft);
    margin: 0 0 .1rem;
}

.page-home .story-profile h2,
.page-home .story-profile .story-role,
.page-home .story-profile .story-profile-role {
    font-family: var(--font-script);
    font-size: 2.2rem;
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 .6rem;
}

.page-home .story-profile:first-child h2,
.page-home .story-profile:first-child .story-role,
.page-home .story-profile:first-child .story-profile-role,
.page-home .story-profile--keeper .story-role,
.page-home .story-profile--keeper .story-profile-role {
    color: var(--rt-blue);
}

.page-home .story-profile:last-child h2,
.page-home .story-profile:last-child .story-role,
.page-home .story-profile:last-child .story-profile-role,
.page-home .story-profile--seeker .story-role,
.page-home .story-profile--seeker .story-profile-role {
    color: var(--rt-pink);
}

.page-home .story-profile p {
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-soft);
    margin: 0;
}


/* ─── 6. DIVE ─────────────────────────────────────────────────────────────── */
/* The Instagram 3x3, square tiles, the same PhotoSwipe lightbox as mobile */

.page-home .insta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: 900px;
    margin: 0 auto;
}

.page-home .insta-grid img {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
    transition: transform .35s var(--home-ease), box-shadow .35s var(--home-ease);
}

.page-home .insta-grid img:hover {
    z-index: 1;
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}


/* ─── 7. APP ──────────────────────────────────────────────────────────────── */
/* Get the app: the four feature videos as cards tinted by the page's
   --c1 / --c2 pair (the mobile's --bg1 / --bg2), a 9:16 frame each, then
   the two store buttons in night. */

.page-home .app-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.page-home .app-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--c1, var(--rt-crimson)) 0%, var(--c2, var(--rt-pink)) 100%);
    color: #fff;
    box-shadow: var(--shadow-md);
}

/* Home.js adds .in-view (IntersectionObserver, threshold .5) as it plays the
   card's video: a small lift so the playing card reads as the live one. */
.page-home .app-card {
    transition: transform .45s var(--home-ease), box-shadow .45s var(--home-ease);
}

.page-home .app-card.in-view {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(21, 56, 105, .2);
}

.page-home .app-media {
    position: relative;
    aspect-ratio: 9 / 16;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: rgba(0, 0, 0, .28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 24px rgba(0, 0, 0, .18);
}

.page-home .app-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-home .app-body h3 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 .35rem;
}

.page-home .app-body p {
    font-family: var(--font-text);
    font-size: var(--step--1);
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    margin: 0;
}

.page-home .store-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin: 2rem 0 0;
}

.page-home .store-btn {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1.5rem;
    border-radius: 999px;
    background: var(--rt-night);
    color: #fff;
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    text-decoration: none;
    box-shadow: var(--shadow-md);
    transition: background .2s, transform .2s;
}

.page-home .store-btn:hover {
    background: var(--rt-ink);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.page-home .store-btn i {
    font-size: 1.3rem;
}


/* ─── 8. CONTACT ──────────────────────────────────────────────────────────── */
/* Let's Talk: a centred head over a white card, three rows with icon circles
   and the Calendly CTA pill. The rows are ported from the mobile's
   .contact-item; the icon and the labels are addressed both by the mobile's
   inner classes (.contact-icon / .contact-value) and by bare elements
   (> i, small) so either markup renders. */

.page-home #home-contact .section-head {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.page-home #home-contact .section-head > .lede {
    margin: .5rem auto 0;
}

.page-home .contact-card {
    max-width: 520px;
    margin: 0 auto;
    padding: 1.25rem;
    border-radius: var(--radius);
    background: var(--surface-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.page-home .contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: background .3s var(--home-ease);
}

.page-home .contact-item:hover {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    color: var(--text);
    text-decoration: none;
}

.page-home .contact-item > i,
.page-home .contact-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.page-home .contact-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.page-home .contact-item small,
.page-home .contact-label {
    display: block;
    font-family: var(--font-head);
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-bottom: 2px;
}

.page-home .contact-item span,
.page-home .contact-value {
    font-family: var(--font-head);
    font-size: var(--step-1);
    line-height: 1.2;
    color: var(--text);
    overflow-wrap: anywhere;
}

.page-home .contact-arrow {
    flex: 0 0 auto;
    color: var(--text-faint);
    font-size: .85rem;
}

.page-home .contact-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: .25rem;
    padding: .85rem 1.5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-head);
    font-size: var(--step-0);
    line-height: 1.2;
    text-decoration: none;
    transition: background .2s, transform .2s;
}

.page-home .contact-cta:hover {
    background: var(--rt-crimson);
    color: var(--on-accent);
    text-decoration: none;
    transform: translateY(-1px);
}


/* ─── 9. FOOTER ───────────────────────────────────────────────────────────── */
/* desktop/components/footer.php: muted, a hairline on top, brand left and
   links right, the legal line under both. Scoped to .desktop-footer so a
   later page can include it without .page-home. */

.desktop-footer {
    max-width: 1280px;
    margin: 2rem auto 0;
    padding: 2rem 0 .5rem;
    border-top: 1px solid var(--line);
    color: var(--text-faint);
    font-size: var(--step--1);
}

.desktop-footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
}

.desktop-footer .footer-brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    font-family: var(--font-head);
    font-size: var(--step-0);
    color: var(--text);
}

.desktop-footer .footer-brand img {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    box-shadow: var(--shadow-md);
}

.desktop-footer .footer-brand p {
    flex: 0 0 100%;
    margin: 0;
    padding-left: calc(36px + .75rem);
    font-family: var(--font-text);
    font-size: var(--step--1);
    color: var(--text-faint);
}

.desktop-footer .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
}

.desktop-footer .footer-links a {
    color: var(--text-soft);
    font-family: var(--font-head);
    text-decoration: none;
    transition: color .2s;
}

.desktop-footer .footer-links a:hover {
    color: var(--accent);
    text-decoration: none;
}

.desktop-footer .footer-legal {
    flex: 0 0 100%;
    margin: .5rem 0 0;
    color: var(--text-faint);
}


/* ─── 10. NARROW ──────────────────────────────────────────────────────────── */
/* Two steps: the three-up grids drop to two under 1100px (the content column
   is about 890px there once the gutter and padding are out); under 900px the
   shell re-lays (top bar, no rail) and everything goes one or two up. The
   story strip stays a strip. Phones never reach this surface. */

@media (max-width: 1100px) {
    .page-home .tldr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .story-card {
        flex-basis: min(520px, 78vw);
        width: min(520px, 78vw);
    }

    .page-home .story-card--intro {
        flex-basis: min(680px, 88vw);
        width: min(680px, 88vw);
    }
}

@media (max-width: 900px) {
    .page-home .home-hero {
        min-height: auto;
        padding: 2.5rem 1.5rem 4rem;
    }

    .page-home .hero-greeting {
        font-size: clamp(2.2rem, 8vw, 3rem);
    }

    .page-home .hero-prompt {
        font-size: clamp(1.2rem, 3.4vw, 1.5rem);
    }

    .page-home .hero-input {
        padding-left: 2.9rem;
        font-size: var(--step-0);
    }

    .page-home .hero-input .ti-icon {
        left: 1.05rem;
    }

    .page-home .home-doors {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .home-door {
        min-height: 120px;
    }

    .page-home .home-section {
        padding: 2.75rem 0;
    }

    .page-home .home-board {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .page-home .tldr-grid,
    .page-home .keeper-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .page-home .tldr-card {
        min-height: 260px;
    }

    .page-home .keeper-card {
        min-height: 380px;
    }

    .page-home .story-card {
        flex-basis: min(520px, 85vw);
        width: min(520px, 85vw);
        min-height: 400px;
    }

    .page-home .story-card--intro {
        flex-basis: min(680px, 90vw);
        width: min(680px, 90vw);
        padding: 1.5rem;
    }

    .page-home .story-profile img,
    .page-home .story-profile .story-avatar,
    .page-home .story-profile .story-profile-photo {
        width: 96px;
        height: 96px;
    }

    .page-home .insta-grid {
        gap: 4px;
    }

    .page-home .app-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-home .contact-card {
        padding: 1rem;
    }

    .desktop-footer .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-home .hero-scroll-hint {
        animation: none;
    }

    .page-home .story-strip {
        scroll-behavior: auto;
    }
}