/* Home page design B (BSC-3496): the keynote page, made for the phone first. Loaded after site.css, by
   index-b.html only. The rules below are the phone layout; the min-width blocks add the wide layout.
   Colors come from the :root tokens in site.css; the stage shades below are mixed from them. */

:root {
    --b-stage: color-mix(in oklab, var(--felt-night) 62%, var(--on-color-ink));
    --b-stage-glow: color-mix(in oklab, var(--felt) 78%, transparent);
    --b-stage-floor: color-mix(in oklab, var(--felt-deep) 80%, transparent);
    --b-hair: color-mix(in srgb, var(--on-color) 14%, transparent);
    --b-halo: color-mix(in oklab, var(--felt-light) 46%, transparent);
    --b-sheet: 28px;
}
@media (min-width: 700px) { :root { --b-sheet: 44px; } }

@media (max-width: 700px) {
    main > section { padding-block: 64px; }
    .section-head { margin-bottom: 32px; }
}

/* ---------- The stage: one dark felt room, lit from above ---------- */

.b-stage {
    position: relative; overflow: hidden; isolation: isolate;
    color: var(--on-color); text-align: center;
    background:
        repeating-linear-gradient(45deg, var(--weave) 0 2px, transparent 2px 5px),
        radial-gradient(62% 58% at 50% -6%, var(--b-stage-glow), transparent 72%),
        radial-gradient(120% 50% at 50% 118%, var(--b-stage-floor), transparent 70%),
        var(--b-stage);
}
.b-stage .eyebrow { color: var(--gold-light); }
.b-stage h1, .b-stage h2 { color: var(--on-color); }
.b-stage h1 em, .b-stage h2 em { color: var(--gold-light); font-weight: 500; }
.b-stage .lede { color: var(--on-dark-soft); margin-inline: auto; }
.b-stage .actions { justify-content: center; }
.b-stage :focus-visible { outline-color: var(--gold-light); }

/* A paper sheet that slides over the stage above it. */
.b-sheet { background: var(--paper); border-radius: var(--b-sheet) var(--b-sheet) 0 0; margin-top: calc(var(--b-sheet) * -1); z-index: 1; }

/* A real screen from the app, as a phone. The corner radius matches picture.shot in site.css. */
.b-phone { display: block; height: auto; border-radius: 9.5% / 4.4%; }

/* ---------- Hero ---------- */

.b-hero { padding: 36px 0 0; }
.b-hero .eyebrow { margin-bottom: 12px; }
.b-hero h1 { font-size: clamp(2.75rem, 14vw, 4.75rem); line-height: 0.96; letter-spacing: -0.04em; margin-bottom: 0.34em; }
.b-hero h1 span, .b-hero h1 em { display: block; }
.b-hero .lede { max-width: 30ch; }
.b-hero .actions { margin-top: 24px; }

/* The app in a phone, with two court cards behind it, half below the edge of the table. */
.b-hero-art {
    position: relative; margin-top: 36px;
    --pw: clamp(204px, 60vw, 280px); --cw: calc(var(--pw) * 0.6);
    height: calc(var(--pw) * 1.24 + var(--b-sheet));
}
.b-hero-art::before {
    content: ""; position: absolute; z-index: -1; left: 50%; top: -12%;
    width: calc(var(--pw) * 2.4); height: calc(var(--pw) * 2.2); translate: -50% 0;
    background: radial-gradient(closest-side, var(--b-halo), transparent);
}
.b-hero-art .b-phone {
    position: relative; width: var(--pw); margin: 0 auto;
    box-shadow: 0 0 0 1px var(--b-hair), 0 36px 72px -16px var(--drop-deep);
}
.b-card {
    position: absolute; left: 50%; top: var(--y); width: var(--cw); height: auto; margin-left: var(--x);
    rotate: var(--r); border-radius: calc(var(--cw) * 0.07);
    filter: drop-shadow(0 20px 28px var(--drop-deep));
}
.b-card.c1, .b-card.c4 { display: none; }
.b-card.c2 { --x: calc(var(--pw) * -0.5 - var(--cw) * 0.6); --r: -13deg; --y: 15%; }
.b-card.c3 { --x: calc(var(--pw) * 0.5 - var(--cw) * 0.4); --r: 13deg; --y: 15%; }

@media (min-width: 700px) {
    .b-hero { padding-top: clamp(48px, min(7vw, 8svh), 96px); }
    .b-hero .eyebrow { margin-bottom: 16px; }
    .b-hero h1 { font-size: clamp(3rem, min(9.4vw, 13.5svh), 7.75rem); line-height: 0.94; margin-bottom: 0.3em; }
    .b-hero .lede { max-width: 38ch; }
    .b-hero .actions { margin-top: 32px; }
    .b-hero-art { margin-top: clamp(44px, 5vw, 72px); --pw: clamp(250px, 24vw, 330px); }
    .b-card.c1, .b-card.c4 { display: block; }
    .b-card.c1 { --x: calc(var(--pw) * -0.5 - var(--cw) * 1.36); --r: -24deg; --y: 30%; }
    .b-card.c2 { --x: calc(var(--pw) * -0.5 - var(--cw) * 0.7); --r: -11deg; --y: 13%; }
    .b-card.c3 { --x: calc(var(--pw) * 0.5 - var(--cw) * 0.3); --r: 11deg; --y: 13%; }
    .b-card.c4 { --x: calc(var(--pw) * 0.5 + var(--cw) * 0.36); --r: 24deg; --y: 30%; }
}

/* ---------- North Star ---------- */

.b-north { text-align: center; }
.b-star { display: block; margin: 0 auto 20px; width: 40px; height: 40px; color: var(--gold); }
.b-north h2 {
    font-size: clamp(2.3rem, 10vw, 5.75rem); line-height: 1; letter-spacing: -0.035em;
    max-width: 15ch; margin: 0 auto;
}
.b-north h2 em { color: var(--felt-ink); font-weight: 500; }
.b-lines { max-width: 40rem; margin: clamp(40px, 8vw, 96px) auto 0; }
.b-lines p {
    font-family: var(--serif); font-size: clamp(1.32rem, 5.4vw, 1.9rem); line-height: 1.3; letter-spacing: -0.015em;
    color: var(--ink-soft); margin: 0 0 1em; text-wrap: balance;
}
.b-lines p.b-beat { color: var(--ink); font-style: italic; }
.b-lines p:last-child { margin-bottom: 0; }
@media (min-width: 700px) {
    .b-star { width: 44px; height: 44px; margin-bottom: 24px; }
    .b-north h2 { font-size: clamp(2.5rem, 6.6vw, 5.75rem); }
    .b-lines p { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
}

/* ---------- The film, framed: upright in an upright window, wide in a wide one ---------- */

.b-film { margin: clamp(48px, 8vw, 104px) auto 0; max-width: 1040px; }
.b-film video {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    border-radius: var(--radius-lg); background: var(--b-stage);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--line);
}
.b-film figcaption { margin-top: 18px; text-align: center; color: var(--ink-faint); font-size: 0.95rem; }
@media (orientation: portrait) {
    .b-film { max-width: min(320px, 80vw); }
    .b-film video { aspect-ratio: 9 / 16; border-radius: 32px; }
}

/* ---------- Together: two phones and four plain facts ---------- */

.b-duo {
    display: flex; justify-content: center; align-items: flex-start;
    --pw: clamp(128px, 41vw, 216px); margin: 0 0 40px; padding-top: 12px;
}
.b-duo .b-phone { width: var(--pw); flex: none; box-shadow: 0 0 0 1px var(--line), 0 30px 48px -18px var(--drop-deep); }
.b-duo .p1 { position: relative; z-index: 1; rotate: -4deg; }
.b-duo .p2 { rotate: 4deg; margin-left: calc(var(--pw) * -0.07); margin-top: calc(var(--pw) * 0.24); }

.b-facts {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line-strong);
}
.b-facts li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.b-facts h3 { font-size: 1.28rem; line-height: 1.15; margin-bottom: 6px; }
.b-facts p { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; }
@media (min-width: 600px) {
    .b-facts { grid-template-columns: 1fr 1fr; column-gap: clamp(28px, 4vw, 56px); border-top: 0; }
    .b-facts li { padding: 26px 0; border-bottom: 0; border-top: 1px solid var(--line-strong); }
    .b-facts h3 { font-size: 1.5rem; margin-bottom: 10px; }
    .b-facts p { font-size: 1.04rem; }
}
@media (min-width: 1000px) {
    .b-together-grid {
        display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: clamp(40px, 6vw, 96px); align-items: center;
    }
    .b-duo { --pw: clamp(170px, 15.5vw, 224px); margin: 0; padding: 0 0 8px; }
}

/* ---------- Principles: five cards that stack on a phone, five chapters on a wide window ---------- */

.b-principles { list-style: none; margin: 0; padding: 0; }
.b-num {
    font-family: var(--serif); font-weight: 600; line-height: 0.8;
    letter-spacing: -0.05em; color: var(--gold); font-variant-numeric: lining-nums;
}
@supports (-webkit-text-stroke: 1px black) {
    .b-num { color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
}
.b-principles h3 { line-height: 1; letter-spacing: -0.03em; margin: 0 0 0.3em; }
.b-say { font-family: var(--serif); font-style: italic; line-height: 1.25; color: var(--felt-ink); margin: 0; }
.b-principles .b-body { margin: 0; color: var(--ink-soft); }

@media (max-width: 900px) {
    .b-principles { display: flex; flex-direction: column; gap: 16px; padding-bottom: 36px; }
    .b-principles li {
        --i: 0;
        display: flex; flex-direction: column; min-height: 21rem;
        padding: 28px 24px 28px; border-radius: 28px;
        background: var(--surface); border: 1px solid var(--line);
        box-shadow: var(--shadow-sm), 0 -20px 36px -30px var(--drop-deep);
    }
    .b-principles li:nth-child(2) { --i: 1; }
    .b-principles li:nth-child(3) { --i: 2; }
    .b-principles li:nth-child(4) { --i: 3; }
    .b-principles li:nth-child(5) { --i: 4; }
    .b-num { font-size: 3.6rem; margin-bottom: auto; padding-bottom: 28px; }
    .b-principles h3 { font-size: clamp(1.7rem, 7.6vw, 2.4rem); }
    .b-say { font-size: 1.22rem; }
    .b-principles .b-body { font-size: 1.02rem; line-height: 1.5; margin-top: 14px; max-width: var(--measure); }
}
/* The stack: each card stops under the header, a step lower than the card before it. */
@media (max-width: 900px) and (min-height: 640px) {
    .b-principles li { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px + var(--i) * 12px); }
}
@media (min-width: 901px) {
    .b-principles { margin-top: clamp(48px, 7vw, 96px); }
    .b-principles li {
        display: grid; grid-template-columns: minmax(120px, 0.55fr) 1.25fr 1fr;
        gap: 24px clamp(24px, 4vw, 64px); align-items: start;
        padding: clamp(40px, 5.5vw, 72px) 0;
        border-top: 1px solid var(--line-strong);
    }
    .b-principles li:last-child { border-bottom: 1px solid var(--line-strong); }
    .b-num { font-size: clamp(4rem, 9vw, 8rem); }
    .b-principles h3 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
    .b-say { font-size: clamp(1.25rem, 2.1vw, 1.6rem); }
    .b-principles .b-body { font-size: 1.1rem; max-width: 36ch; padding-top: 0.35em; }
}

/* ---------- The promise ---------- */

.b-promise {
    padding: 84px 0 calc(84px + var(--b-sheet));
    border-radius: var(--b-sheet) var(--b-sheet) 0 0;
}
.b-promise h2 { font-size: clamp(2rem, 10.4vw, 7.75rem); line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 0.45em; }
.b-promise h2 span, .b-promise h2 em { display: block; }
.b-promise .lede { max-width: 26ch; }
.b-terms {
    list-style: none; margin: 40px auto 0; padding: 0; max-width: 22rem;
    display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--b-hair);
}
.b-terms li { padding: 16px 0; color: var(--on-dark-soft); font-size: 0.98rem; }
.b-terms li + li { border-top: 1px solid var(--b-hair); }
.b-terms strong { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--on-color); margin-bottom: 2px; }
@media (min-width: 700px) {
    .b-promise { padding: clamp(96px, 14vw, 200px) 0 calc(clamp(96px, 14vw, 200px) + var(--b-sheet)); }
    .b-promise h2 { line-height: 0.96; }
    .b-promise .lede { max-width: 34ch; }
    .b-terms { margin-top: clamp(48px, 6vw, 72px); max-width: 880px; grid-template-columns: repeat(3, 1fr); }
    .b-terms li { padding: 24px 16px 0; font-size: 1rem; }
    .b-terms li + li { border-top: 0; border-left: 1px solid var(--b-hair); }
    .b-terms strong { font-size: 1.35rem; margin-bottom: 4px; }
}

/* ---------- The games: what you can play now, then the shelves by status ---------- */

.b-live { display: grid; gap: 12px; }
.b-feature {
    display: flex; align-items: center; gap: 16px; padding: 14px 22px 14px 14px;
    color: var(--ink); text-decoration: none;
    background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-sm);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.b-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.b-feature img { width: 68px; height: 68px; flex: none; border-radius: 22.4%; box-shadow: 0 10px 20px -12px var(--drop-deep); }
.b-feature .b-name { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.6rem; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 4px; }
.b-feature .arrow { margin-left: auto; font-size: 1.35rem; color: var(--felt-ink); }
.b-status.live { display: inline-flex; align-items: center; gap: 7px; font-size: 0.9rem; font-weight: 600; color: var(--felt-ink); }
.b-status.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex: none; }

.b-shelves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 8px; margin-top: 44px; }
.b-shelf { grid-column: span 4; --n: 4; }
.b-shelf.s2 { grid-column: span 2; --n: 2; }
.b-shelf h3 {
    font-family: var(--sans); font-size: 0.72rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-soft); margin: 0 0 18px; padding-top: 12px; border-top: 1px solid var(--line-strong);
}
.b-shelf ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 22px 8px; }
.b-shelf a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; color: var(--ink); text-decoration: none; border-radius: 16px; }
.b-shelf img {
    width: min(100%, 72px); height: auto; aspect-ratio: 1; border-radius: 22.4%;
    box-shadow: var(--shadow-sm), 0 14px 24px -16px var(--drop-deep);
    transition: transform 0.35s var(--ease);
}
.b-shelf a:hover img { transform: translateY(-4px) scale(1.04); }
.b-shelf .b-name { font-size: clamp(0.72rem, 3.3vw, 0.88rem); font-weight: 600; line-height: 1.2; }

@media (min-width: 700px) {
    .b-live { grid-template-columns: 1fr 1fr; gap: 20px; }
    .b-feature { gap: 24px; padding: 20px 30px 20px 20px; border-radius: 34px; }
    .b-feature img { width: 96px; height: 96px; }
    .b-feature .b-name { font-size: 2.2rem; margin-bottom: 6px; }
    .b-feature .arrow { font-size: 1.6rem; }
    .b-shelves { margin-top: 64px; gap: 48px 16px; }
    .b-shelf ul { gap: 28px 16px; }
    .b-shelf h3 { font-size: 0.78rem; letter-spacing: 0.14em; margin-bottom: 24px; }
    .b-shelf img { width: min(100%, 84px); }
    .b-shelf .b-name { font-family: var(--serif); font-size: 1.06rem; letter-spacing: -0.01em; }
}
@media (min-width: 1000px) {
    .b-shelves { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 56px 20px; }
    .b-shelf ul { gap: 32px 20px; }
    .b-shelf.s4 { grid-column: span 4; }
    .b-shelf.s12 { grid-column: span 8; --n: 8; }
    .b-shelf img { width: min(100%, 92px); }
}

/* ---------- Studio ---------- */

.b-studio { padding-top: 0; }
.b-studio .studio { padding-top: clamp(48px, 8vw, 104px); border-top: 1px solid var(--line-strong); }