/* Surface: home (/). Prefix cr-home. "Premium dark glow" (ops/design/curio-glow-brief.md).
   Tokens and cr-* primitives only (curio-tokens.css, curio-brand.css); no keyframes here.
   Breakpoints: 480 / 640 / 900. Order: 1 shared, 2 hero, 3 demo, 4 steps, 5 modes, 6 reveal,
   7 talk, 8 trust, 9 guides, 10 faq, 11 closing, 12 dialogs, 13 reduced motion. */

/* ---------- 1. Shared ---------- */
.cr-home { overflow-x: clip; }
.cr-home__band { position: relative; }
.cr-home__band.cr-section { padding-block: calc(var(--section-y) * .75); }
.cr-home__h2 { margin: var(--sp-4) 0 0; }
.cr-home__intro { max-width: 720px; margin-bottom: var(--sp-7); }
.cr-home__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3) var(--sp-5);
    margin-bottom: var(--sp-7);
}
.cr-home__more {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--sp-6);
    margin: var(--sp-5) 0 0;
}

/* Hover lift + glow for the glass cards in this page (transform/opacity only). */
.cr-home__step,
.cr-home__mode,
.cr-home__trust > li { display: flex; flex-direction: column; }
.cr-home__step::after,
.cr-home__mode::after,
.cr-home__trust > li::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: var(--glow-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
    .cr-home__step:hover,
    .cr-home__mode:hover,
    .cr-home__trust > li:hover,
    .cr-js .cr-home__step.is-visible:hover,
    .cr-js .cr-home__mode.is-visible:hover,
    .cr-js .cr-home__trust > li.is-visible:hover { transform: translateY(-4px); border-color: var(--glass-border-strong); }
    .cr-home__step:hover::after,
    .cr-home__mode:hover::after,
    .cr-home__trust > li:hover::after { opacity: 1; }
}
.cr-home__mode:focus-within::after { opacity: 1; }

/* Player dots used in the mocks. */
.cr-home__dot {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--r-pill);
    background: var(--g-brand-btn);
    color: var(--c-on-brand);
    font: 700 var(--fs-1)/1 var(--font-display);
}
.cr-home__dot--b { background: var(--c-pink-text); color: var(--c-bg); }

/* ---------- 2. Hero ---------- */
.cr-home__hero {
    padding-block: var(--sp-6) var(--sp-8);
    scroll-margin-top: var(--header-h);
}
.cr-home__hero-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.cr-home__title { max-width: 1040px; margin: var(--sp-5) 0 0; }
/* "Games for two," on one line, the gradient phrase on the next (wraps by itself when narrow). */
.cr-home__title .cr-gradient-text { display: block; padding-bottom: .06em; }
.cr-home__lead { max-width: 36ch; margin: var(--sp-5) 0 0; }
.cr-home__hero-copy > .cr-alert { width: 100%; max-width: 520px; margin-top: var(--sp-5); text-align: left; }
.cr-home__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    width: 100%;
    max-width: 420px;
    margin-top: var(--sp-6);
}
.cr-home__fine { margin: var(--sp-5) 0 0; font-size: var(--fs-2); color: var(--c-text-3); }
.cr-home__talk-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--sp-2);
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-2);
    color: var(--c-text-2);
}
.cr-home__talk-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-height: 44px;
    color: var(--c-pink-text);
    font-weight: 600;
    text-decoration: none;
}
.cr-home__talk-link:hover { color: var(--c-text); }

@media (min-width: 640px) {
    .cr-home__hero { padding-block: var(--sp-7) var(--sp-8); }
    .cr-home__actions { flex-direction: row; justify-content: center; width: auto; max-width: none; }
}

/* ---------- 3. Live-round demo (CSS-only loop: cr-seq over --dur-loop) ---------- */
.cr-home__stage { margin-top: var(--sp-8); }
.cr-home__demo {
    max-width: 940px;
    margin: 0 auto;
    animation: cr-float 8s var(--ease-in-out) infinite;
}
.cr-home__demo-screen { overflow: hidden; }
.cr-home__demo-bar { gap: 6px; }
.cr-screen__bar > .cr-home__demo-url {
    flex: 1;
    min-width: 0;
    width: auto;
    height: auto;
    margin-right: 26px;
    overflow: hidden;
    border-radius: 0;
    background: none;
    color: var(--c-text-3);
    font-size: var(--fs-1);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cr-home__demo-body {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-4);
    text-align: left;
}
.cr-home__demo-play { display: grid; gap: var(--sp-4); min-width: 0; }
.cr-home__demo-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cr-home__demo-pair { display: flex; }
.cr-home__demo-pair > .cr-home__dot + .cr-home__dot { margin-left: calc(-1 * var(--sp-2)); }

.cr-home__q {
    padding: var(--sp-5);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
    background: var(--g-card-glow), var(--glass-bg-strong);
    box-shadow: var(--glass-highlight);
}
.cr-home__q-label {
    margin: 0;
    color: var(--c-violet-text);
    font: 600 var(--fs-1)/1.2 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}
.cr-home__q-text {
    margin: var(--sp-2) 0 0;
    color: var(--c-text);
    font: 700 var(--fs-4)/1.25 var(--font-display);
    letter-spacing: -.02em;
    text-wrap: balance;
}
.cr-home__q-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-4); }
.cr-home__opt {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: var(--sp-2);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    color: var(--c-text-2);
    font: 600 var(--fs-2)/1.2 var(--font-body);
    text-align: center;
}
.cr-home__opt.is-picked { border-color: var(--c-violet); background: var(--c-accent-tint); color: var(--c-text); box-shadow: var(--glow-1); }

.cr-home__answers { display: grid; gap: var(--sp-2); }
.cr-home__answer {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg);
    color: var(--c-text-2);
    font-size: var(--fs-2);
}
.cr-home__answer strong { color: var(--c-text); font-weight: 600; }
.cr-home__answer--b { justify-self: end; }

.cr-home__demo-result {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-3);
    background: var(--g-card-glow), var(--c-surface-2);
    box-shadow: var(--glow-2);
}
.cr-home__ring { position: relative; flex-shrink: 0; width: 104px; aspect-ratio: 1; }
.cr-home__ring-svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.cr-home__ring-track,
.cr-home__ring-arc { fill: none; stroke-width: 10; }
.cr-home__ring-track { stroke: var(--c-line-strong); }
.cr-home__ring-arc { stroke: url(#cr-home-ring); stroke-linecap: round; stroke-dasharray: 80 100; }
.cr-home__ring-stop--a { stop-color: var(--c-violet); }
.cr-home__ring-stop--b { stop-color: var(--c-pink); }
.cr-home__ring-stop--c { stop-color: var(--c-coral); }
.cr-home__ring-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    grid-auto-flow: column;
    align-items: baseline;
    color: var(--c-text);
    font: 700 var(--fs-5)/1 var(--font-display);
    letter-spacing: -.03em;
}
.cr-home__ring-num small { font-size: var(--fs-2); color: var(--c-text-2); }
.cr-home__result-copy { display: grid; gap: var(--sp-2); flex: 1; min-width: 0; }
.cr-home__match {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    color: var(--c-success);
    font: 700 var(--fs-3)/1.2 var(--font-display);
}
.cr-home__result-label { margin: 0; color: var(--c-text-2); font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; }
.cr-home__meter { display: block; height: 8px; overflow: hidden; border-radius: var(--r-pill); background: var(--c-line); }
.cr-home__meter-fill {
    display: block;
    width: 80%;
    height: 100%;
    border-radius: var(--r-pill);
    background: var(--g-brand);
    transform-origin: left center;
    animation: cr-bar var(--dur-loop) var(--ease-out) infinite both;
    animation-delay: 2.3s;
}

/* The loop: answer 1, answer 2, then the result. Windows never overlap the next cycle. */
.cr-home__seq { animation: cr-seq var(--dur-loop) var(--ease-out) infinite both; }
.cr-home__seq--1 { animation-delay: .4s; }
.cr-home__seq--2 { animation-delay: 1.4s; }
.cr-home__seq--3 { animation-delay: 2.3s; }

@media (min-width: 640px) {
    .cr-home__demo-body { padding: var(--sp-6); }
    .cr-home__q-text { font-size: var(--fs-5); }
}
@media (min-width: 900px) {
    .cr-home__stage { margin-top: var(--sp-8); }
    .cr-home__demo-body { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--sp-6); padding: var(--sp-7); }
    .cr-home__demo-result { flex-direction: column; justify-content: center; text-align: center; padding: var(--sp-6); }
    .cr-home__result-copy { width: 100%; justify-items: center; }
    .cr-home__meter { width: 100%; }
    .cr-home__ring { width: 168px; }
    .cr-home__ring-num { font-size: var(--fs-6); }
}

/* ---------- 4. How a game works ---------- */
.cr-home__steps { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin: 0; }
.cr-home__steps > .cr-home__step { padding: var(--sp-5); }
.cr-home__steps > li::before {
    position: static;
    display: block;
    margin-bottom: var(--sp-3);
    font-size: var(--fs-6);
}
.cr-home__step h3 { margin: 0; }
.cr-home__step > p { margin: var(--sp-2) 0 var(--sp-5); color: var(--c-text-2); font-size: var(--fs-2); line-height: 1.55; }
.cr-home__mini {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: auto;
    padding: var(--sp-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-3);
    background: var(--c-surface-2);
}
.cr-home__mini-link {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--c-text-2);
    font-size: var(--fs-1);
    white-space: nowrap;
}
.cr-home__mini-link > span { overflow: hidden; text-overflow: ellipsis; }
.cr-home__mini-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    flex-shrink: 0;
    padding: var(--sp-1) var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--g-brand-btn);
    color: var(--c-on-brand);
    font: 600 var(--fs-1)/1.4 var(--font-body);
}
.cr-home__mini--chat { flex-direction: column; align-items: flex-end; }
.cr-home__bubble {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    max-width: 100%;
    padding: var(--sp-2) var(--sp-3);
    overflow: hidden;
    border-radius: var(--r-3) var(--r-3) var(--r-1) var(--r-3);
    background: var(--g-brand-btn);
    color: var(--c-on-brand);
    font-size: var(--fs-1);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.cr-home__bubble--link { border: 1px solid var(--glass-border-strong); background: var(--glass-bg-strong); color: var(--c-pink-text); }
.cr-home__mini--compare { justify-content: center; gap: var(--sp-3); }
.cr-home__mini-pick {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-pill);
    background: var(--glass-bg-strong);
    color: var(--c-text);
    font: 600 var(--fs-2)/1.2 var(--font-body);
}
.cr-home__mini-vs {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--r-pill);
    background: var(--c-success-bg);
    color: var(--c-success);
}
@media (min-width: 900px) {
    .cr-home__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-home__steps > .cr-home__step { padding: var(--sp-6); }
    .cr-home__steps > li::before { margin-bottom: var(--sp-5); font-size: var(--fs-7); }
    .cr-home__step > p { font-size: var(--fs-3); }
}

/* ---------- 5. Pick a length ---------- */
/* Small orb kept fully inside the band so its edge never shows as a hard line. */
.cr-home__orb-modes { top: 18%; left: -12%; }
.cr-home__modes { display: grid; gap: var(--sp-5); }
.cr-home__mode { gap: var(--sp-3); }
.cr-home__mode--pick { border-color: var(--glass-border-strong); box-shadow: var(--glow-1); }
.cr-home__mode-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.cr-home__mode-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-3);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-highlight);
}
.cr-home__mode h3 { margin: 0; }
.cr-home__mode-stat { margin: 0; color: var(--c-text-2); font: 500 var(--fs-3)/1.2 var(--font-body); }
.cr-home__mode-stat strong {
    margin-right: var(--sp-1);
    color: var(--c-text);
    font: 700 var(--fs-6)/1 var(--font-display);
    letter-spacing: -.03em;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .cr-home__mode-stat strong {
        background: var(--g-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}
.cr-home__mode > p:not(.cr-home__mode-stat) { margin: 0; color: var(--c-text-2); font-size: var(--fs-2); }
.cr-home__mode-form { margin-top: auto; padding-top: var(--sp-4); }
@media (min-width: 900px) {
    .cr-home__modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 6. See where you match ---------- */
.cr-home__reveal { display: grid; gap: var(--sp-8); align-items: center; }
.cr-home__checks { display: grid; gap: var(--sp-4); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.cr-home__checks li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--c-text); font-size: var(--fs-3); line-height: 1.5; }
.cr-home__checks .cr-icon { width: 24px; height: 24px; margin-top: 1px; }

.cr-home__verdict { position: relative; isolation: isolate; margin: 0; }
.cr-home__verdict::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: -1;
    background: var(--g-glow-pink);
    pointer-events: none;
}
.cr-home__verdict-card {
    max-width: 400px;
    margin: 0 auto;
    padding: var(--sp-6);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-5);
    background: var(--g-card-glow), var(--c-surface);
    box-shadow: var(--glow-2);
    text-align: center;
    transform: rotate(-2deg);
}
.cr-home__verdict-top { display: flex; align-items: center; justify-content: space-between; }
.cr-home__verdict-brand { min-height: 0; font-size: var(--fs-2); }
.cr-home__verdict-eyebrow {
    margin: var(--sp-6) 0 0;
    color: var(--c-violet-text);
    font: 600 var(--fs-1)/1.2 var(--font-body);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}
.cr-home__verdict-players {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    color: var(--c-text);
    font-weight: 600;
}
.cr-home__verdict-and { color: var(--c-text-3); font-weight: 400; }
.cr-home__verdict-label { margin: var(--sp-6) 0 0; color: var(--c-text-2); font-size: var(--fs-1); letter-spacing: .06em; text-transform: uppercase; }
.cr-home__verdict-score { margin: var(--sp-1) 0 0; font: 700 var(--fs-display)/1 var(--font-display); letter-spacing: var(--ls-display); }
.cr-home__verdict-score small { color: var(--c-text-2); font-size: var(--fs-5); }
.cr-home__verdict-title { margin: var(--sp-3) 0 0; color: var(--c-text); font: 700 var(--fs-5)/1.1 var(--font-display); letter-spacing: var(--ls-heading); }
.cr-home__verdict-conn { margin: var(--sp-3) 0 0; color: var(--c-text-2); font-size: var(--fs-2); }
.cr-home__verdict-conn strong { color: var(--c-text); }
@media (min-width: 900px) {
    .cr-home__reveal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-9); }
    .cr-home__verdict-card { padding: var(--sp-7); }
}

/* ---------- 7. Curio Talk (secondary band; people strip markup and persona data untouched) ---------- */
/* Two small orbs glow through the glass card; a gradient hairline marks its top edge. */
/* Orbs stay inside the band so their edge never shows as a hard line. */
.cr-home__orb-talk-a { top: 2%; left: -8%; }
.cr-home__orb-talk-b { right: -8%; bottom: 2%; }
.cr-home__talk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); border-color: var(--glass-border-strong); box-shadow: var(--e-2); }
.cr-home__talk::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 1px;
    background: var(--g-hairline);
    pointer-events: none;
}
.cr-home__talk-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
.cr-home__chips { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-4); }
.cr-home__talk-copy > h2 { margin: 0; }
.cr-home__talk-copy > p:last-child { max-width: 56ch; margin: var(--sp-3) 0 0; color: var(--c-text-2); font-size: var(--fs-3); }
.cr-home__talk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }

/* Secondary CTA (Duo stays the primary on home): dark pill, 1px brand-gradient border, soft glow. */
.cr-home__talk-btn { border-color: transparent; box-shadow: var(--glow-1); }
.cr-home__talk-btn::before,
.cr-home__talk-btn::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
}
.cr-home__talk-btn::before { inset: -1px; z-index: -2; background: var(--g-brand); }
.cr-home__talk-btn::after { inset: 0; z-index: -1; background: var(--g-card-glow), var(--c-surface); }
.cr-home__talk-btn .cr-icon { transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
    .cr-home__talk-btn:hover { box-shadow: var(--glow-2); }
    .cr-home__talk-btn:hover .cr-icon { transform: translateX(3px); }
}

@media (min-width: 900px) {
    .cr-home__talk { padding: var(--sp-7); }
    .cr-home__talk-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--sp-7); }
    .cr-home__talk-cta { justify-content: flex-end; }
}

/* People strip. Arrows sit beside the track, never over a card. The track fades only at an edge
   that still has more people (the carousel JS sets .is-scrolled / .is-at-end / .is-fit).
   Fade mask from tokens only: an opaque --g-brand layer covers the middle; three stacked
   --g-hairline layers (alpha 0 to .7 across their first quarter) build a soft ramp at each edge. */
.cr-home__people {
    --home-fade: var(--sp-7);
    --home-fade-l: 0px;
    --home-fade-r: var(--home-fade);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-inline: calc(-1 * var(--sp-5));
}
.cr-home__people.is-scrolled { --home-fade-l: var(--home-fade); }
.cr-home__people.is-at-end { --home-fade-r: 0px; }
.cr-home__track {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: var(--sp-3);
    overflow-x: auto;
    margin-block: calc(-1 * var(--sp-4));
    padding: var(--sp-5);
    scroll-padding-inline: var(--sp-5);
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: var(--g-brand), var(--g-hairline), var(--g-hairline), var(--g-hairline), var(--g-hairline), var(--g-hairline), var(--g-hairline);
            mask-image: var(--g-brand), var(--g-hairline), var(--g-hairline), var(--g-hairline), var(--g-hairline), var(--g-hairline), var(--g-hairline);
    -webkit-mask-size: calc(100% - var(--home-fade-l) - var(--home-fade-r)) 100%, calc(var(--home-fade) * 4) 100%;
            mask-size: calc(100% - var(--home-fade-l) - var(--home-fade-r)) 100%, calc(var(--home-fade) * 4) 100%;
    -webkit-mask-position: var(--home-fade-l) 0, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0;
            mask-position: var(--home-fade-l) 0, 0 0, 0 0, 0 0, 100% 0, 100% 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
.cr-home__track::-webkit-scrollbar { display: none; }

.cr-home__person {
    position: relative;
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-1);
    min-height: 44px;
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-3);
    background: var(--g-card-glow), var(--glass-bg);
    box-shadow: var(--glass-highlight);
    color: var(--c-text);
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform var(--dur-3) var(--ease-out), border-color var(--dur-2) var(--ease);
}
.cr-home__person::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow: var(--glow-1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
    .cr-home__person:hover { transform: translateY(-4px); border-color: var(--glass-border-strong); }
    .cr-home__person:hover::after { opacity: 1; }
}
.cr-home__person:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cr-home__person:focus-visible::after { opacity: 1; }

/* Avatar: brand-gradient ring, a dark gap, then the photo or initial, with a soft violet glow. */
.cr-home__avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--sp-2);
    padding: 2px;
    border-radius: var(--r-pill);
    background: var(--g-brand);
    box-shadow: var(--glow-1);
}
.cr-home__avatar > img:first-child,
.cr-home__initial {
    width: 100%;
    height: 100%;
    border: 3px solid var(--c-surface);
    border-radius: var(--r-pill);
    background: var(--c-surface-2);
}
.cr-home__avatar > img:first-child { object-fit: cover; }
.cr-home__initial {
    display: grid;
    place-items: center;
    color: var(--c-text);
    font: 700 var(--fs-4)/1 var(--font-display);
}
.cr-home__flag { position: absolute; right: -2px; bottom: 2px; width: 20px; height: 14px; border-radius: 0; box-shadow: var(--e-1); }
.cr-home__flag-emoji { position: absolute; right: -6px; bottom: -2px; font-size: var(--fs-2); line-height: 1; }
.cr-home__person-name { font-size: var(--fs-2); font-weight: 600; text-align: center; overflow-wrap: anywhere; }
.cr-home__person-meta { color: var(--c-text-3); font-size: var(--fs-1); }

/* Arrows: only with JS and room for them (640+); phones swipe. Hidden (space kept) when everyone fits. */
.cr-home__nav { display: none; flex: 0 0 auto; }
.cr-home__nav--prev .cr-icon { transform: rotate(180deg); }
.cr-home__nav[aria-disabled="true"] { opacity: .35; cursor: default; }
@media (hover: hover) {
    .cr-home__nav:hover:not([aria-disabled="true"]) { border-color: var(--c-violet); box-shadow: var(--glow-1); }
}
.cr-home__people.is-fit .cr-home__nav { visibility: hidden; }
@media (min-width: 640px) {
    .cr-home__people { margin-inline: 0; }
    .cr-js .cr-home__nav { display: inline-flex; }
    .cr-home__track { padding-inline: var(--sp-1); scroll-padding-inline: var(--sp-1); }
    .cr-home__person { flex-basis: 148px; }
}

/* Two people or fewer: a plain row, no scrolling, no fades. */
.cr-home__people.is-compact { margin-inline: 0; }
.cr-home__people.is-compact .cr-home__track {
    overflow: visible;
    padding-inline: 0;
    -webkit-mask-image: none;
            mask-image: none;
}

/* ---------- 8. Trust ---------- */
.cr-home__trust { display: grid; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.cr-home__trust-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-3);
    background: var(--glass-bg-strong);
    box-shadow: var(--glass-highlight);
}
.cr-home__trust h3 { margin: var(--sp-5) 0 0; }
.cr-home__trust p { margin: var(--sp-2) 0 0; color: var(--c-text-2); font-size: var(--fs-2); }
@media (min-width: 900px) {
    .cr-home__trust { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cr-home__trust p { font-size: var(--fs-3); }
}

/* ---------- 9. Popular guides (covers in .cr-frame) ---------- */
.cr-home__guide-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.cr-home__guide { display: flex; }
.cr-home__guide-link.cr-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-3);
}
/* Below 640px: compact rows, cover thumbnail left. */
.cr-home__guide-link.cr-card { flex-direction: row; align-items: center; gap: var(--sp-3); }
.cr-home__guide-frame { display: block; flex: 0 0 112px; padding: var(--sp-1); }
.cr-home__guide-frame > .cr-home__guide-img { aspect-ratio: 1; }
.cr-frame > .cr-home__guide-img { object-fit: cover; }
.cr-home__guide-body { display: grid; gap: var(--sp-1); min-width: 0; padding: 0 var(--sp-2) 0 0; }
.cr-home__guide-meta { color: var(--c-text-3); font-size: var(--fs-1); }
.cr-home__guide-title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--c-text);
    font: 600 var(--fs-3)/1.3 var(--font-display);
    letter-spacing: -.015em;
}
.cr-home__guide-more {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-1);
    color: var(--c-pink-text);
    font: 600 var(--fs-2)/1.2 var(--font-body);
}
.cr-home__guide-more .cr-icon { transition: transform var(--dur-2) var(--ease-out); }
.cr-home__guide-link:hover .cr-home__guide-more .cr-icon { transform: translateX(3px); }
@media (min-width: 640px) {
    .cr-home__guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
    .cr-home__guide-link.cr-card { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
    .cr-home__guide-frame { flex: none; }
    .cr-home__guide-frame > .cr-home__guide-img { aspect-ratio: 16 / 10; }
    .cr-home__guide-body { gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); }
    .cr-home__guide-title { font-size: var(--fs-4); }
}
@media (min-width: 900px) {
    .cr-home__guide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 10. FAQ ---------- */
.cr-home__band--guides { padding-bottom: 0; }
.cr-home__faq { display: grid; gap: var(--sp-6); }
.cr-home__faq-head .cr-link { margin-top: var(--sp-3); }
.cr-home__ask-q { min-width: 0; }
.cr-home__ask-a { max-width: 66ch; margin: 0; font-size: var(--fs-2); line-height: 1.65; }
@media (min-width: 900px) {
    .cr-home__faq { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
    .cr-home__faq-head { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
    .cr-home__ask-a { font-size: var(--fs-3); }
}

/* ---------- 11. Closing band ---------- */
.cr-home__band--close { padding-top: var(--sp-6); }
.cr-home__cta { display: flex; flex-direction: column; align-items: center; }
.cr-home__cta-title { margin: 0; }
.cr-home__cta-lead { max-width: 36ch; margin: var(--sp-4) 0 0; }
.cr-home__actions--center { align-items: stretch; }
@media (min-width: 640px) {
    .cr-home__actions--center { align-items: center; }
}

/* ---------- 12. Dialogs (mode picker, join). Bottom sheet below 640px. ---------- */
dialog.cr-home__dialog {
    width: 100%;
    max-width: none;
    max-height: 90dvh;
    margin: auto 0 0;
    overflow-y: auto;
    border-bottom: 0;
    border-radius: var(--r-4) var(--r-4) 0 0;
    background: var(--g-card-glow), var(--c-surface);
    box-shadow: var(--e-3);
}
@media (min-width: 640px) {
    dialog.cr-home__dialog {
        width: calc(100% - 2rem);
        max-width: 460px;
        margin: auto;
        border-bottom: 1px solid var(--glass-border-strong);
        border-radius: var(--r-4);
        box-shadow: var(--glow-2);
    }
}
.cr-home__panel { display: grid; gap: var(--sp-4); }
.cr-home__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cr-home__panel-head > h2 { margin: 0; font-size: var(--fs-4); }
.cr-home__close { width: 44px; margin-right: calc(-1 * var(--sp-2)); padding: 0; }
.cr-home__panel-desc { margin: 0; color: var(--c-text-2); font-size: var(--fs-2); }
.cr-home__options { display: grid; gap: var(--sp-3); }
.cr-home__option {
    position: relative;
    display: grid;
    gap: var(--sp-1);
    min-height: 56px;
    padding: var(--sp-4);
    border: 1px solid var(--glass-border-strong);
    border-radius: var(--r-3);
    background: var(--glass-bg);
    color: var(--c-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.cr-home__option:hover,
.cr-home__option:focus-visible { border-color: var(--c-violet); background: var(--glass-bg-hover); box-shadow: var(--glow-1); }
.cr-home__option:disabled { opacity: .45; cursor: not-allowed; }
.cr-home__option-chip { color: var(--c-violet-text); font: 600 var(--fs-1)/1.3 var(--font-body); letter-spacing: .04em; }
.cr-home__option-name { font: 700 var(--fs-3)/1.3 var(--font-display); }
.cr-home__option-desc { color: var(--c-text-2); font-size: var(--fs-2); }

/* ---------- 13. Reduced motion: the demo shows its final, static state ---------- */
@media (prefers-reduced-motion: reduce) {
    .cr-home__demo,
    .cr-home__seq,
    .cr-home__meter-fill { animation: none; }
    .cr-home__step:hover,
    .cr-home__mode:hover,
    .cr-home__trust > li:hover,
    .cr-js .cr-home__step.is-visible:hover,
    .cr-js .cr-home__mode.is-visible:hover,
    .cr-js .cr-home__trust > li.is-visible:hover,
    .cr-home__person:hover,
    .cr-home__talk-btn:hover .cr-icon { transform: none; }
}