/* Self-hosted, subsetted from the very TTFs the app ships in
   core/resources/.../font/ — see scripts/build-site-fonts.py, which also
   regenerates them. Nothing here is fetched from a font CDN on purpose:
   one third-party request is one too many on the page whose central claim
   is that nothing tracks the visitor.

   Licences travel with the bytes, as OFL requires: fonts/Manrope-OFL.txt
   and fonts/JetBrainsMono-OFL.txt. */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/manrope-400.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/manrope-500.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/manrope-600.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/manrope-700.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/manrope-800.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/jetbrains-mono-500.woff2") format("woff2");
}

/* Tokens are the app's, not the web's: every value below is copied from
   core/designsystem (AppColors.kt, AppDimens.kt). Someone who taps a store
   badge should land in the same product they just looked at.

   Three rules travel with the palette and are not cosmetic:
     1. Mint/verdict green marks "verified safe" and nothing else — never a
        button, never a decorative fill. In light mode a filled primary
        button is ink; in dark mode it is mint, because ink on a dark
        surface vanishes (this is what FoodScannerTheme.kt does too).
     2. --danger-* is the *verdict* red (#8C1D18), which is not the
        validation-error red the app keeps well away from verdicts.
     3. Colour is never the only signal — every verdict also carries an icon
        and its own wording. */
:root {
    /* Light ramp — AppColors.Light */
    --surface: #fbfcfa;
    --surface-alt: #eef3f0;
    --surface-sunken: #e8f0ec;
    --outline: #e4ebe7;
    --outline-card: #dde5e1;
    --outline-strong: #c7d2cd;

    --ink: #0b1f1b;
    --ink-alt: #04302a;
    --teal: #00695b;
    --teal-deep: #004c42;
    --mint: #8ff3d8;

    --text-1: #0b1f1b;
    --text-2: #38443f;
    --text-3: #5b6a64;
    --text-4: #8a9791;

    /* The dark band under "Stažení". Raised in dark mode, where an ink band
       on an ink page would disappear. */
    --band: #0b1f1b;
    --band-border: transparent;
    --band-text: #e8f0ec;
    --band-muted: rgba(221, 246, 239, 0.76);
    --band-accent: #8ff3d8;

    /* Verdict ramps — AppColors.VerdictLight */
    --safe-fill: #ddf6ef;
    --safe-ink: #04302a;
    --safe-accent: #0f8a6a;
    --safe-reason: #f1faf6;
    --safe-reason-border: #a9dfcc;

    --traces-fill: #ffe6c4;
    --traces-ink: #341c00;
    --traces-accent: #7a4405;
    --traces-reason: #fff8ee;
    --traces-reason-border: #e7c9a0;

    --unsafe-fill: #ffdbd5;
    --unsafe-ink: #40060b;
    --unsafe-accent: #8c1d18;
    --unsafe-reason: #fff5f3;
    --unsafe-reason-border: #f0bdb6;

    --unknown-fill: #eef3f0;
    --unknown-ink: #5b6a64;
    --unknown-border: transparent;
    --unknown-reason: #f6f9f7;
    --unknown-reason-border: #dde5e1;

    /* The active segment is borderless in light mode and carries a tinted
       shadow instead; dark mode swaps that for a visible border. */
    --seg-border-width: 0;
    --seg-shadow: 0 6px 18px -8px;

    /* Phone mock */
    --screen: #fbfcfa;
    --screen-chrome: #38443f;
    --screen-thumb: #eef3f0;
    --bezel: linear-gradient(165deg, #33403c 0%, #0b1f1b 58%, #1b2724 100%);

    /* AppDimens.AppRadius */
    --r-chip: 10px;
    --r-tile: 14px;
    --r-block: 18px;
    --r-card: 20px;
    --r-button: 16px;
    --r-verdict: 20px;

    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;

    --shadow-lift: 0 30px 70px -32px rgba(11, 31, 27, 0.55);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* AppColors.Dark */
        --surface: #0e1917;
        --surface-alt: #16211e;
        --surface-sunken: #1b2724;
        --outline: #3a4844;
        --outline-card: #3a4844;
        --outline-strong: #3a4844;

        --teal: #e8f0ec;
        --teal-deep: #fbfcfa;

        --text-1: #e8f0ec;
        --text-2: #a9b5af;
        --text-3: #a9b5af;
        --text-4: #6d7c77;

        --band: #16211e;
        --band-border: #3a4844;

        /* AppColors.VerdictDark — deliberately not the light fills dimmed:
           at night a full mint or salmon panel glares. */
        --safe-fill: #0e5443;
        --safe-ink: #ddf6ef;
        --safe-accent: #54c4a4;
        --safe-reason: #122a24;
        --safe-reason-border: #0e5443;
        --safe-border: #54c4a4;

        --traces-fill: #5b3b0a;
        --traces-ink: #ffe6c4;
        --traces-accent: #e0b472;
        --traces-reason: #1e1a11;
        --traces-reason-border: #4a3008;
        --traces-border: #8a5d14;

        --unsafe-fill: #8c1d18;
        --unsafe-ink: #ffdbd5;
        --unsafe-accent: #f2837a;
        --unsafe-reason: #1e1312;
        --unsafe-reason-border: #4a1512;
        --unsafe-border: #b3403a;

        --unknown-fill: #1b2724;
        --unknown-ink: #a9b5af;
        --unknown-border: #3a4844;
        --unknown-reason: #16211e;
        --unknown-reason-border: #24312d;

        --seg-border-width: 1.5px;
        --seg-shadow: 0 0 0 0;

        --screen: #16211e;
        --screen-chrome: #a9b5af;
        --screen-thumb: #1b2724;
        --bezel: linear-gradient(165deg, #33403c 0%, #060f0d 58%, #1b2724 100%);

        --shadow-lift: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-1);
    background: var(--surface);
    -webkit-font-smoothing: antialiased;
}

/* Links are teal in light mode (BrandTeal = the app's `primary`, "links,
   text buttons") and plain underlined text in dark, where the only light
   greens left belong to verdicts. */
a {
    color: var(--teal);
    text-decoration: none;
}

a:hover {
    color: var(--teal-deep);
    text-decoration: underline;
}

/* In dark mode a prose link is underlined rather than tinted, because the
   only light greens left on the page belong to verdicts and a mint link
   beside a verdict panel reads as one. Chrome (nav, brand, buttons, store
   badges) is already unmistakably interactive and keeps its clean edge. */
@media (prefers-color-scheme: dark) {
    a:not(.brand):not(.btn):not(.store-badge):not(.site-nav a) {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .site-nav a {
        text-decoration: none;
    }
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

p {
    margin: 0;
}

.container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
}

.mono {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Header ──────────────────────────────────────────────────────── */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--outline);
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    backdrop-filter: blur(16px);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-1);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.03em;
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: url("favicon.svg") center / cover no-repeat;
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    justify-content: flex-end;
}

.site-nav a {
    color: var(--text-2);
    font-size: 14px;
    font-weight: 600;
}

.site-nav a.is-primary {
    color: var(--text-1);
    font-weight: 800;
}

.site-nav a.lang-switch {
    padding: 4px 10px;
    border: 1px solid var(--outline-strong);
    border-radius: 999px;
    font-size: 13px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 1.5px solid transparent;
    border-radius: var(--r-button);
    font-weight: 800;
    font-size: 15.5px;
    letter-spacing: -0.01em;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.btn:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

/* Ink, not green: a primary-coloured button would read as a verdict. */
.btn-primary {
    background: var(--ink);
    color: var(--surface);
}

.btn-primary:hover {
    background: var(--ink-alt);
    color: var(--surface);
}

.btn-secondary {
    border-color: var(--outline-strong);
    color: var(--text-1);
}

.btn-secondary:hover {
    border-color: var(--text-1);
    color: var(--text-1);
}

@media (prefers-color-scheme: dark) {
    .btn-primary {
        background: var(--mint);
        color: var(--ink-alt);
    }

    .btn-primary:hover {
        background: #a6f6e1;
        color: var(--ink-alt);
    }

    .btn-primary,
    .btn-secondary {
        text-decoration: none;
    }
}

/* ── Hero ────────────────────────────────────────────────────────── */

.hero {
    padding: 80px 0 88px;
}

.hero-grid {
    display: grid;
    gap: 48px;
    grid-template-columns: 1fr;
    align-items: center;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 7px 14px;
    border: 1px solid var(--outline-strong);
    border-radius: 999px;
    background: var(--surface-alt);
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (prefers-color-scheme: dark) {
    .eyebrow {
        color: var(--mint);
    }
}

.hero-copy h1 {
    margin-top: 24px;
    font-size: clamp(2.4rem, 4.6vw, 3.5rem);
    line-height: 1.04;
    letter-spacing: -0.038em;
}

.hero-copy h1 .quiet {
    color: var(--text-3);
    font-weight: 500;
}

.lede {
    margin-top: 22px;
    max-width: 44ch;
    font-size: 18.5px;
    color: var(--text-2);
    text-wrap: pretty;
}

.lede strong {
    color: var(--text-1);
    font-weight: 800;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.hero-meta {
    margin-top: 22px;
    color: var(--text-4);
    font-size: 11.5px;
}

/* ── Phone mock ──────────────────────────────────────────────────── */

.hero-art {
    display: flex;
    justify-content: center;
}

.phone-frame {
    width: 306px;
    max-width: 100%;
    padding: 11px;
    border-radius: 44px;
    background: var(--bezel);
    box-shadow: var(--shadow-lift);
    animation: rise 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

.phone-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 512px;
    padding: 18px 16px 20px;
    border-radius: 34px;
    background: var(--screen);
}

.screen-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--screen-chrome);
    font-size: 13.5px;
    font-weight: 700;
}

.screen-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.screen-thumb {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 1px solid var(--outline-card);
    border-radius: var(--r-tile);
    background: var(--screen-thumb);
    color: var(--text-4);
}

.screen-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.screen-name strong {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.025em;
}

.screen-name .mono {
    font-size: 10.5px;
    color: var(--text-3);
    letter-spacing: 0.06em;
}

/* The collapsed ingredients disclosure and the ODbL attribution — both are
   on the real product detail, and without them the mock screen is a third
   empty. */
.screen-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: 13px 14px;
    border: 1px solid var(--outline-card);
    border-radius: var(--r-tile);
    color: var(--text-1);
    font-size: 13.5px;
    font-weight: 700;
}

.screen-row svg {
    color: var(--text-4);
}

.screen-source {
    color: var(--text-4);
    font-size: 9.5px;
    letter-spacing: 0.08em;
}

/* ── Verdict traffic light ───────────────────────────────────────── */

/* Left-to-right severity, so the lit step always sits in the same place.
   The reached step takes 1.6 of the row against 1 for the other two, which
   is the ratio the app uses — see VerdictTrafficLight.kt. */
.scale {
    display: flex;
    align-items: stretch;
    gap: 10px;
    height: 118px;
}

.scale.is-large {
    height: 140px;
}

.seg {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: var(--r-verdict);
    /* The app draws the dimmed steps on surfaceVariant, one shade off the
       screen they sit on. --surface-alt is that screen here, so a dimmed
       step painted with it has nothing to be dimmed against. */
    background: var(--surface-sunken);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    opacity: 0.45;
}

.seg svg {
    width: 24px;
    height: 24px;
}

.seg.is-on {
    flex: 1.6 1 0;
    border: var(--seg-border-width) solid currentColor;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    opacity: 1;
}

.scale.is-large .seg.is-on {
    font-size: 16px;
}

.seg.is-on svg {
    width: 36px;
    height: 36px;
}

.seg-safe.is-on {
    border-color: var(--safe-border, transparent);
    background: var(--safe-fill);
    color: var(--safe-ink);
    box-shadow: var(--seg-shadow) var(--safe-accent);
}

.seg-traces.is-on {
    border-color: var(--traces-border, transparent);
    background: var(--traces-fill);
    color: var(--traces-ink);
    box-shadow: var(--seg-shadow) var(--traces-accent);
}

.seg-unsafe.is-on {
    border-color: var(--unsafe-border, transparent);
    background: var(--unsafe-fill);
    color: var(--unsafe-ink);
    box-shadow: var(--seg-shadow) var(--unsafe-accent);
}

/* Unknown is not a fourth step. You cannot point at a step nobody
   established, and a traffic light with nothing lit reads as "safe". */
.panel-unknown {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 20px;
    border: var(--seg-border-width) solid var(--unknown-border);
    border-radius: var(--r-verdict);
    background: var(--unknown-fill);
    color: var(--unknown-ink);
    font-size: 15px;
    font-weight: 800;
}

.panel-unknown svg {
    flex: none;
    width: 24px;
    height: 24px;
}

.reason {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1.5px solid;
    border-radius: var(--r-block);
}

.reason-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.reason-safe {
    border-color: var(--safe-reason-border);
    background: var(--safe-reason);
    color: var(--safe-ink);
}

.reason-safe .reason-label {
    color: var(--safe-accent);
}

.reason-unsafe {
    border-color: var(--unsafe-reason-border);
    background: var(--unsafe-reason);
    color: var(--unsafe-ink);
}

.reason-unsafe .reason-label {
    color: var(--unsafe-accent);
}

.reason p {
    font-size: 14.5px;
    line-height: 1.45;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.chip {
    padding: 5px 11px;
    border-radius: var(--r-chip);
    background: var(--surface-sunken);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
}

.chip.is-hit {
    background: var(--unsafe-fill);
    color: var(--unsafe-ink);
}

/* ── Sections ────────────────────────────────────────────────────── */

.section {
    padding: 84px 0;
}

.section-alt {
    background: var(--surface-alt);
    border-top: 1px solid var(--outline);
    border-bottom: 1px solid var(--outline);
}

.section h2 {
    font-size: clamp(1.85rem, 3.4vw, 2.5rem);
    line-height: 1.12;
}

.section-sub {
    max-width: 62ch;
    margin-top: 14px;
    color: var(--text-2);
    font-size: 17px;
    text-wrap: pretty;
}

.verdict-grid {
    display: grid;
    gap: 36px;
    grid-template-columns: 1fr;
    align-items: start;
    margin-top: 36px;
}

/* The scale sits on a card, not straight on the section. The dimmed steps
   are drawn on surfaceVariant, so on a surfaceVariant band they would have
   no panel to be dimmed against — in the app they always sit on a screen
   surface a shade lighter. */
.verdict-demo {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--outline-card);
    border-radius: var(--r-card);
    background: var(--surface);
}

.verdict-note {
    max-width: 56ch;
    padding-left: 2px;
    color: var(--text-3);
    font-size: 13.5px;
    text-wrap: pretty;
}

.facts {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.facts li {
    position: relative;
    padding-left: 19px;
    color: var(--text-2);
    font-size: 15px;
    text-wrap: pretty;
}

.facts li::before {
    content: "";
    position: absolute;
    top: 0.6em;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
}

@media (prefers-color-scheme: dark) {
    .facts li::before {
        background: var(--mint);
    }
}

.facts strong {
    color: var(--text-1);
    font-weight: 800;
}

/* ── Steps ───────────────────────────────────────────────────────── */

.steps {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr;
    margin: 36px 0 0;
    padding: 0;
    list-style: none;
}

.steps li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 2px solid var(--outline-strong);
}

.steps li:first-child {
    border-top-color: var(--text-1);
}

.step-index {
    color: var(--teal);
    font-size: 12px;
}

@media (prefers-color-scheme: dark) {
    .step-index {
        color: var(--mint);
    }
}

.steps h3 {
    font-size: 17px;
    letter-spacing: -0.015em;
}

.steps p {
    color: var(--text-2);
    font-size: 15px;
    text-wrap: pretty;
}

/* ── Features ────────────────────────────────────────────────────── */

/* Three fixed columns, not auto-fit: six tiles in `auto-fit minmax(240px)`
   land as 4 + 2 on a 1120 px container and leave a hole in the second row. */
.feature-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
    margin-top: 34px;
}

.feature {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 1px solid var(--outline-card);
    border-radius: var(--r-card);
    background: var(--surface);
    transition: transform 180ms ease, border-color 180ms ease;
}

.feature:hover {
    transform: translateY(-4px);
    border-color: var(--outline-strong);
}

.feature h3 {
    font-size: 17px;
    letter-spacing: -0.015em;
}

.feature p {
    color: var(--text-2);
    font-size: 14.5px;
    text-wrap: pretty;
}

.feature svg {
    width: 28px;
    height: 28px;
    color: var(--text-1);
}

.feature .accent {
    color: var(--teal);
}

/* Not mint in dark: a filled mint shape inside an illustration is
   decoration, and decoration is the one thing mint may never be. Mint stays
   on actions only — the button, the eyebrows, the list bullets. */
@media (prefers-color-scheme: dark) {
    .feature .accent {
        color: var(--text-2);
    }
}

/* ── Privacy + disclaimer ────────────────────────────────────────── */

.split {
    display: grid;
    gap: 40px;
    grid-template-columns: 1fr;
    align-items: start;
}

.privacy-more {
    margin-top: 22px;
    font-size: 15px;
    font-weight: 800;
}

.notice {
    padding: 28px;
    border: 1px solid var(--outline-card);
    border-radius: var(--r-card);
    background: var(--surface-sunken);
}

.notice-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.notice-head svg {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--text-2);
}

.notice h3 {
    font-size: 19px;
}

.notice-body {
    display: flex;
    flex-direction: column;
    gap: 13px;
    margin-top: 18px;
    color: var(--text-2);
    font-size: 14.5px;
}

.notice-body strong {
    color: var(--text-1);
    font-weight: 800;
}

.notice-body p {
    text-wrap: pretty;
}

/* ── Download ────────────────────────────────────────────────────── */

.download {
    padding: 80px 0;
    border-top: 1px solid var(--band-border);
    border-bottom: 1px solid var(--band-border);
    background: var(--band);
    color: var(--band-text);
}

.download h2 {
    margin-top: 14px;
    font-size: clamp(1.75rem, 3.2vw, 2.375rem);
    color: var(--band-text);
}

.download-eyebrow {
    color: var(--band-accent);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.download p {
    color: var(--band-muted);
}

.download-lede {
    max-width: 44ch;
    margin-top: 14px;
    font-size: 16.5px;
    text-wrap: pretty;
}

.download-actions {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.store-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Official artwork from Google and Apple, self-hosted: hotlinking their
   CDNs would hand every visitor's IP to both companies on a page whose
   whole claim is that nothing tracks you. Neither badge may be recoloured,
   and both ship black — so they sit on a light shelf rather than straight
   on the ink band, which is also the background each vendor's guidelines
   ask for.

   The two are not the same shape: Google's PNG bakes in 23 % of vertical
   transparent padding (192 px of ink in a 250 px image, measured), Apple's
   SVG has none. Matching the rendered heights would leave Apple's badge
   visibly larger, so Google's is scaled up by 1/0.768 and pulled back with
   a negative margin, which lands both black plates at 44 px. */
.store-shelf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    padding: 16px 22px;
    border-radius: var(--r-card);
    /* Deliberately not var(--surface): the shelf must not follow the theme.
       Both badges are black artwork in both schemes and neither vendor
       permits recolouring, so the plate they sit on stays light at night
       too — which is the background Apple's guidelines ask for. */
    background: #fbfcfa;
}

.store-row {
    display: contents;
}

.store-badge {
    display: inline-flex;
    align-items: center;
    transition: transform 180ms ease;
}

.store-badge:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.badge-appstore {
    display: block;
    width: auto;
    height: 44px;
}

/* Each locale's Google PNG bakes in a different amount of transparent
   padding — cs is 192 px of ink in 250, en only 168 — so a shared height
   would render the two at visibly different sizes. --plate carries the
   measured fraction and the height is derived from the plate size we
   actually want, which is Apple's 44 px. */
.badge-play {
    --plate-height: 44px;
    --plate: 0.768;
    display: block;
    width: auto;
    height: calc(var(--plate-height) / var(--plate));
    margin-block: calc((var(--plate-height) - var(--plate-height) / var(--plate)) / 2);
    margin-inline: -6px;
}

.badge-play[data-locale="en"] {
    --plate: 0.672;
}

.download .note {
    max-width: 48ch;
    font-size: 13px;
    text-wrap: pretty;
}

.download .note a {
    color: var(--band-accent);
}

.download .note a:hover {
    color: var(--band-text);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.site-footer {
    padding: 30px 0 40px;
    color: var(--text-3);
    font-size: 13.5px;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    align-items: center;
    justify-content: space-between;
}

.footer-inner p {
    margin: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
}

/* ── Legal pages ─────────────────────────────────────────────────── */

.legal {
    padding: 56px 0 72px;
}

.legal-inner {
    max-width: 720px;
    margin: 0 auto;
}

.legal-inner h1 {
    margin: 0 0 8px;
    font-size: clamp(2rem, 4vw, 3rem);
}

.legal-inner h2 {
    margin-top: 40px;
    font-size: 1.25rem;
}

.legal-inner h3 {
    margin-top: 24px;
    color: var(--text-2);
    font-size: 1.05rem;
}

.legal-inner p,
.legal-inner li {
    line-height: 1.65;
}

.legal-inner ul {
    padding-left: 1.25rem;
}

.legal-meta {
    margin: 0 0 32px;
    color: var(--text-3);
    font-size: 0.9rem;
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (min-width: 720px) {
    .steps,
    .split {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .download-inner {
        display: grid;
        gap: 48px;
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

@media (min-width: 960px) {
    .hero-grid {
        grid-template-columns: 1.08fr 0.92fr;
        gap: 56px;
    }

    .verdict-grid {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 44px;
    }

    .steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 719px) {
    /* Five anchors wrap onto a second row inside a sticky header and eat
       ~40 px of every screen for the whole scroll. The sections are one
       swipe apart on a phone anyway; only the store link earns its place. */
    .site-nav a:not(.is-primary):not(.lang-switch) {
        display: none;
    }

    .hero {
        padding: 38px 0 44px;
    }

    .section,
    .download {
        padding: 44px 0;
    }

    .cta-row {
        width: 100%;
        flex-direction: column;
    }

    .cta-row .btn {
        width: 100%;
    }

    .scale {
        height: 106px;
        gap: 8px;
    }

    .seg {
        padding: 12px 6px;
        font-size: 10px;
    }

    .seg.is-on {
        font-size: 13.5px;
    }

    .seg.is-on svg {
        width: 30px;
        height: 30px;
    }

    .seg svg {
        width: 18px;
        height: 18px;
    }

    .store-shelf {
        width: 100%;
        justify-content: center;
        gap: 10px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .phone-frame {
        animation: none;
    }

    .btn:hover,
    .feature:hover,
    .store-badge:hover {
        transform: none;
    }
}