/* Latuvo landing page — System 24 brand surface.
   Mirrors the iOS app's Deep Court / Felt / Bone palette and the
   Welcome view's hero composition (`LATUV●` wordmark, "Find. Play.
   Win." headline, supporting caption). The legal pages keep
   `style.css`'s light reading theme — this stylesheet is the
   landing-only counterpart. */

:root {
    --deep-court: #0E1B2C;
    --deep-court-2: #142535;
    --bone: #EDECE6;
    --bone-dim: rgba(237, 236, 230, 0.62);
    --bone-ter: rgba(237, 236, 230, 0.38);
    --felt: #C9D54A;
    --felt-dim: #8FA02A;
    --felt-text: #0E1B2C;
    --hairline: rgba(237, 236, 230, 0.10);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--deep-court);
    color: var(--bone);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    max-width: 720px;
    margin: 0 auto;
    padding: 96px 24px 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 80px);
}

/* Wordmark — `LATUV` in Inter Medium with the felt ball as the
   terminal `O`. Sized via `font-size`; the ball scales off it. */
.wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-size: 88px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--bone);
    margin-bottom: 48px;
}
.wordmark__letters { display: inline-block; }
.wordmark__ball {
    display: inline-block;
    /* Match Inter's cap-height (~0.72em) so the ball's visible top sits
       on the cap-line and its bottom on the baseline — same vertical
       extent as the `LATUV` letters next to it. */
    width: 0.72em;
    height: 0.72em;
    margin-left: 0.03em;
}

@media (max-width: 520px) {
    .wordmark { font-size: 56px; margin-bottom: 32px; }
    main { padding: 64px 20px 48px; }
}

.headline {
    font-size: 44px;
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 24px;
}

.headline .accent { color: var(--felt); }

@media (max-width: 520px) {
    .headline { font-size: 32px; }
}

.caption {
    font-size: 17px;
    line-height: 1.5;
    color: var(--bone-dim);
    max-width: 420px;
    margin: 0 0 56px;
}

/* Status note — quiet, sits below the caption. */
.status {
    font-size: 14px;
    color: var(--bone-ter);
    margin: 0 0 48px;
    letter-spacing: 0.01em;
}

/* Contact + legal links, in a single horizontal row. */
.links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    font-size: 15px;
}
.links a {
    color: var(--felt);
    text-decoration: none;
    font-weight: 500;
}
.links a:hover { text-decoration: underline; }

footer {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    text-align: center;
    color: var(--bone-ter);
    font-size: 13px;
}