/* the digits of a scoreboard, like the big scores in the apps */
@font-face {
    font-family: 'Scoreboard';
    src: url('/assets/fonts/scoreboard.ttf') format('truetype');
    font-display: swap;
}

/* the look of the splash screen of the apps: the soft blue page, white cards, the four colors of the players */
:root {
    --page: #E8EEFA;
    --surface: #FFFFFF;
    --surface-2: #DCE3F0;
    --text: #161C24;
    --text-2: #434954;
    --primary: #005FAA;
    --on-primary: #FFFFFF;
    --tonal: #D3E4FF;
    --on-tonal: #0A2E52;
    --outline: #C2C7D3;
    --blue: #2196F3;
    --red: #F44336;
    --green: #4CAF50;
    --purple: #9C27B0;
    --gold: #FFB300;
    --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
    --shadow-up: 0 2px 4px rgba(16, 24, 40, .08), 0 18px 40px rgba(16, 24, 40, .12);
    --spring: cubic-bezier(.34, 1.56, .64, 1);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --page: #0D141C;
        --surface: #19212B;
        --surface-2: #232C37;
        --text: #DEE3EC;
        --text-2: #BCC3D0;
        --primary: #9ECAFF;
        --on-primary: #00325A;
        --tonal: #1F3A58;
        --on-tonal: #D3E4FF;
        --outline: #3A434F;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
        --shadow-up: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --page: #0D141C;
    --surface: #19212B;
    --surface-2: #232C37;
    --text: #DEE3EC;
    --text-2: #BCC3D0;
    --primary: #9ECAFF;
    --on-primary: #00325A;
    --tonal: #1F3A58;
    --on-tonal: #D3E4FF;
    --outline: #3A434F;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-up: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 40px rgba(0, 0, 0, .4);
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Google Sans Flex', 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--page);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; }

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 24px;
}

/* the name of the studio, spaced out like on the splash of the apps, after the mark: the four colors of the players
   as the quadrants of the icons, rounder outside */
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    letter-spacing: .32em;
    font-size: 18px;
    color: var(--text);
    text-decoration: none;
}

.wordmark .mark {
    width: 30px;
    height: 30px;
    flex: none;
    overflow: visible;
}

/* the four tiles step apart and the mark tilts, on a spring */
.wordmark .mark path { transition: transform .45s var(--spring); }

.wordmark .mark { transition: transform .45s var(--spring); }

.wordmark:hover .mark { transform: rotate(-8deg); }

.wordmark:hover .mark path:nth-child(1) { transform: translate(-1.5px, -1.5px); }
.wordmark:hover .mark path:nth-child(2) { transform: translate(1.5px, -1.5px); }
.wordmark:hover .mark path:nth-child(3) { transform: translate(-1.5px, 1.5px); }
.wordmark:hover .mark path:nth-child(4) { transform: translate(1.5px, 1.5px); }

/* TOP BAR */
.top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 0;
}

.top nav {
    display: flex;
    gap: 4px;
}

.top nav a {
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--text-2);
    transition: background .2s;
}

.top nav a:hover { background: var(--surface-2); }

/* HERO */
.hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
    padding: 40px 0 96px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
    color: var(--text-2);
}

h1 {
    font-size: clamp(46px, 7.2vw, 88px);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 750;
    margin: 24px 0 20px;
}

h1 .accent { color: var(--primary); }

.lead {
    font-size: clamp(18px, 2vw, 21px);
    color: var(--text-2);
    max-width: 30em;
    margin: 0 0 32px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* M3 buttons: a pill that gets squarer while pressed */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    border: 0;
    cursor: pointer;
    transition: border-radius .35s var(--spring), transform .35s var(--spring);
}

.btn:active { border-radius: 16px; transform: scale(.97); }

.btn svg { width: 22px; height: 22px; flex: none; }

.btn-filled { background: var(--primary); color: var(--on-primary); }

.btn-tonal { background: var(--tonal); color: var(--on-tonal); }

.btn-small {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
    gap: 8px;
}

.btn-small:active { border-radius: 12px; }

.btn-small svg { width: 18px; height: 18px; }

/* the live scoreboard of the hero, like the board of Multi */
.board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    background: #FFFFFF;
    border-radius: 44px;
    box-shadow: var(--shadow-up);
    transform: rotate(2.5deg);
}

.tile {
    position: relative;
    aspect-ratio: 1 / .92;
    border-radius: 18px;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: hidden;
}

.tile:nth-child(1) { background: var(--blue); border-top-left-radius: 36px; }
.tile:nth-child(2) { background: var(--red); border-top-right-radius: 36px; }
.tile:nth-child(3) { background: var(--green); border-bottom-left-radius: 36px; }
.tile:nth-child(4) { background: var(--purple); border-bottom-right-radius: 36px; }

.tile .who {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(15px, 1.7vw, 19px);
    font-weight: 700;
}

.tile .who img { width: 1.9em; height: 1.9em; }

.tile .score {
    font-family: 'Scoreboard', 'Google Sans Flex', sans-serif;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 1;
}

.tile .score.bump { animation: bump .5s var(--spring); }

@keyframes bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.tile .plus {
    position: absolute;
    bottom: 14%;
    right: 12%;
    font-family: 'Scoreboard', sans-serif;
    font-size: 20px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .25);
    opacity: 0;
}

.tile .plus.show { animation: plus 1.1s ease-out; }

@keyframes plus {
    0% { opacity: 0; transform: translateY(8px); }
    20% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-14px); }
}

/* the crown on the leader, like in the app */
.crown {
    position: absolute;
    width: clamp(30px, 3.4vw, 44px);
    top: 12px;
    right: 16px;
    transform: rotate(18deg) scale(0);
    transition: transform .45s var(--spring);
}

.tile.leader .crown { transform: rotate(18deg) scale(1); }

.board-note {
    text-align: center;
    font-size: 14px;
    color: var(--text-2);
    margin-top: 22px;
}

/* SECTIONS */
.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

h2 {
    font-size: clamp(32px, 4.2vw, 48px);
    line-height: 1.05;
    letter-spacing: -.025em;
    font-weight: 720;
    margin: 0;
}

.section-head p {
    margin: 0;
    color: var(--text-2);
    font-size: 17px;
    max-width: 26em;
}

/* STATS: four tiles in the colors of the players, with scoreboard digits */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 112px;
}

.stat {
    border-radius: 28px;
    padding: 26px 24px 22px;
    color: #FFFFFF;
    transition: border-radius .4s var(--spring), transform .4s var(--spring);
}

.stat:hover { border-radius: 40px; transform: translateY(-4px); }

.stat:nth-child(1) { background: var(--blue); }
.stat:nth-child(2) { background: var(--red); }
.stat:nth-child(3) { background: var(--green); }
.stat:nth-child(4) { background: var(--purple); }

.stat .num {
    font-family: 'Scoreboard', 'Google Sans Flex', sans-serif;
    font-size: clamp(40px, 4.6vw, 58px);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.stat .num small {
    font-family: 'Google Sans Flex', sans-serif;
    font-size: .5em;
    font-weight: 700;
}

.stat .label {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 600;
    opacity: .92;
}

/* APPS */
/* three apps on the first row, the other two wider under them */
.apps {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 112px;
}

.app {
    grid-column: span 2;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--shadow);
    transition: border-radius .4s var(--spring), transform .4s var(--spring), box-shadow .3s;
}

.app:nth-child(n + 4) { grid-column: span 3; }

.app:hover {
    border-radius: 36px;
    transform: translateY(-4px);
    box-shadow: var(--shadow-up);
}

.app-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.app-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    flex: none;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

.app h3 {
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.01em;
    font-weight: 700;
    margin: 0;
}

.app h3 a { text-decoration: none; }

/* the whole card opens the page of the app; the store buttons stay on top of it */
.app h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.app { cursor: pointer; }

.app .stores { position: relative; z-index: 1; }

.app h3 a:hover { color: var(--primary); }

.app .kind {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 2px;
}

.app p {
    margin: 0 0 18px;
    font-size: 16px;
    color: var(--text-2);
    flex: 1;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 14px;
    font-weight: 600;
}

.chip .star { color: var(--gold); }

.stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.badge-new {
    position: absolute;
    top: 18px;
    right: 18px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: #3A2600;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: rotate(4deg);
}

/* FOOTER */
footer {
    padding: 48px 0 56px;
    border-top: 1px solid var(--outline);
}

.foot {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
}

.foot .tag {
    margin: 12px 0 0;
    color: var(--text-2);
    font-size: 15px;
}

.foot h4 {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-2);
}

.foot ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 8px;
    font-size: 15px;
}

.foot ul a { text-decoration: none; overflow-wrap: anywhere; }

.foot ul a:hover { text-decoration: underline; }

.copy {
    margin: 40px 0 0;
    font-size: 14px;
    color: var(--text-2);
}

@media (max-width: 960px) {
    .hero { grid-template-columns: 1fr; gap: 48px; padding-bottom: 72px; }
    .board-box { max-width: 480px; width: 100%; margin: 0 auto; }
    .apps { grid-template-columns: 1fr 1fr; }
    .app, .app:nth-child(n + 4) { grid-column: auto; }
    .stats { grid-template-columns: 1fr 1fr; }
    .section-head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
    .wrap { padding: 0 16px; }
    .top { padding: 20px 0; }
    .top nav a { padding: 8px 12px; }
    .hero { padding-top: 16px; }
    .apps { grid-template-columns: 1fr; }
    .board { border-radius: 36px; gap: 8px; padding: 8px; }
    .tile { border-radius: 14px; }
    .stats, .apps { margin-bottom: 80px; }
    .btn { height: 52px; padding: 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}

/* APP PAGES: one template for every app */
.crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-2);
    text-decoration: none;
    padding: 8px 14px 8px 10px;
    border-radius: 999px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.app-hero {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: center;
    padding: 32px 0 96px;
}

.app-hero .app-icon {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    margin: 28px 0 20px;
}

.app-hero h1 {
    font-size: clamp(40px, 5.6vw, 68px);
    margin: 0 0 16px;
}

.app-hero .actions { margin-top: 8px; }

/* on the phone of the visitor its own store comes first, filled */
.btn-store-first { order: -1; background: var(--primary); color: var(--on-primary); }

/* a screenshot in a light, thin frame, like the cards */
.shot {
    border-radius: 26px;
    overflow: hidden;
    background: var(--surface);
    padding: 5px;
    box-shadow: 0 0 0 1px var(--outline), var(--shadow-up);
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 21px;
}

.app-hero .shot { transform: rotate(-2deg); }

.sports {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 32px;
}

/* the features: numbered like the scores of a scoreboard, in the colors of the players */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 112px;
}

.feature {
    border-radius: 28px;
    padding: 24px;
    background: var(--surface);
    box-shadow: var(--shadow);
    transition: border-radius .4s var(--spring), transform .4s var(--spring);
}

.feature:hover { border-radius: 40px; transform: translateY(-4px); }

.feature .n {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    color: #FFFFFF;
    font-family: 'Scoreboard', 'Google Sans Flex', sans-serif;
    font-size: 28px;
    margin-bottom: 18px;
}

.feature:nth-child(4n + 1) .n { background: var(--blue); }
.feature:nth-child(4n + 2) .n { background: var(--red); }
.feature:nth-child(4n + 3) .n { background: var(--green); }
.feature:nth-child(4n + 4) .n { background: var(--purple); }

.feature h3 {
    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 6px;
}

.feature p {
    margin: 0;
    color: var(--text-2);
    font-size: 16px;
}

/* the screenshots, side by side and swiped on the phone */
.gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 112px;
}

.gallery figure { margin: 0; }

.gallery figcaption {
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-2);
    text-align: center;
}

.gallery .shot { padding: 4px; border-radius: 20px; }

.gallery .shot img { border-radius: 16px; }

/* the questions, each one a card that opens */
.faq {
    display: grid;
    gap: 8px;
    margin-bottom: 112px;
    max-width: 820px;
}

.faq details {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: border-radius .4s var(--spring);
}

.faq details[open] { border-radius: 28px; }

.faq summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 56px 20px 24px;
    font-size: 18px;
    font-weight: 650;
    position: relative;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
    content: '+';
    position: absolute;
    right: 22px;
    top: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--surface-2);
    font-size: 22px;
    font-weight: 500;
    transition: transform .4s var(--spring);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq details p {
    margin: 0;
    padding: 0 24px 22px;
    color: var(--text-2);
    font-size: 16px;
}

.more {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 112px;
}

.more a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px 10px 10px;
    border-radius: 22px;
    background: var(--surface);
    box-shadow: var(--shadow);
    text-decoration: none;
    font-weight: 650;
    transition: border-radius .4s var(--spring), transform .4s var(--spring);
}

.more a:hover { border-radius: 28px; transform: translateY(-3px); }

.more img { width: 44px; height: 44px; border-radius: 13px; }

/* apps that live in portrait: a phone standing up next to the text */
.app-hero.portrait { grid-template-columns: 1.3fr .7fr; }

.app-hero.portrait .shot, .split-shot .shot { max-width: 340px; margin: 0 auto; transform: none; }

.gallery.portrait { grid-auto-columns: minmax(0, 260px); justify-content: start; }

/* one feature told with a picture beside it */
.split {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 112px;
}

.split h2 { margin-bottom: 16px; }

@media (max-width: 960px) {
    .app-hero, .app-hero.portrait, .split { grid-template-columns: 1fr; gap: 40px; padding-bottom: 72px; }
    .gallery.portrait { grid-auto-columns: 62%; }
    .features { grid-template-columns: 1fr 1fr; }
    .gallery {
        grid-auto-columns: 78%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px;
    }
    .gallery figure { scroll-snap-align: start; }
}

@media (max-width: 620px) {
    .features { grid-template-columns: 1fr; }
    .features, .gallery, .faq, .more { margin-bottom: 80px; }
    .app-hero .app-icon { margin-top: 20px; }
}

/* LEGAL PAGES: the privacy policies, readable text in a card */
.legal-head { padding: 24px 0 32px; }

.legal-head h1 { font-size: clamp(40px, 5.6vw, 64px); margin: 28px 0 8px; }

.legal-head .lead { margin: 0; }

.legal {
    max-width: 820px;
    background: var(--surface);
    border-radius: 28px;
    box-shadow: var(--shadow);
    padding: 16px 40px 32px;
    margin-bottom: 96px;
    font-size: 17px;
    color: var(--text-2);
}

.legal h2 {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--text);
    margin: 32px 0 8px;
}

.legal p, .legal ul { margin: 0 0 14px; }

.legal ul { padding-left: 22px; }

.legal li { margin-bottom: 6px; }

.legal a { color: var(--primary); overflow-wrap: anywhere; }

@media (max-width: 620px) {
    .legal { padding: 8px 20px 24px; border-radius: 22px; }
}

.legal-short {
    background: var(--tonal);
    color: var(--on-tonal);
    border-radius: 20px;
    padding: 4px 24px 12px;
    margin: 24px 0 20px;
}

.legal-short h2 { color: var(--on-tonal); margin-top: 18px; }

.legal-short a { color: inherit; }

.legal-table { overflow-x: auto; margin: 0 0 14px; }

.legal table { width: 100%; border-collapse: collapse; font-size: 15px; }

.legal th { text-align: left; color: var(--text); font-weight: 700; padding: 10px 12px 10px 0; border-bottom: 2px solid var(--outline); }

.legal td { vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--outline); }

.legal td:first-child { font-weight: 600; min-width: 130px; }

.legal strong { color: var(--text); }