/* The landing pages' stylesheet — index.html (Android) and ios.html (iOS).
 *
 * It lives in a file rather than inside each page because there are now two of them and this is 500
 * lines: duplicated, the two would drift, and nothing would report it. The other three public pages
 * keep their own small stylesheets — they share none of these tokens, and merging them would be a
 * bigger change than it is worth.
 *
 * Under assets/ so it inherits the one-week Cache-Control that firebase.json already sets for
 * /assets/**. It is render-blocking, same-origin and cached; the pages block on two scripts anyway.
 */

/* ── Tokens ────────────────────────────────────────────────────────────
   Palette is the app's own: periwinkle on deep navy, the same values the
   guidelines and deletion pages use. The four accents are the four trophy
   tiers, which is the only colour vocabulary this subject actually has. */
:root {
    color-scheme: dark;

    --void:    #07080f;
    --deep:    #0b0e18;
    --surface: #131829;
    --raised:  #171d33;
    --line:    #232a44;
    --line-lo: #1a2038;

    --ink:     #e7e9f3;
    --dim:     #98a0bd;
    --faint:   #6b7495;

    --peri:    #bac3ff;
    --bronze:  #c77b3e;
    --silver:  #c6cbd8;
    --gold:    #e5b84b;
    --plat:    #6fc3f2;

    --shell: min(1180px, 100% - 2.5rem);
    --nameplate: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--void);
    color: var(--ink);
    font-family: var(--nameplate);
    font-variation-settings: "wdth" 100;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--peri); }

/* height:auto is load-bearing: every screenshot carries width/height
   attributes, which otherwise pin the intrinsic height while CSS scales
   the width — the image stretches. */
img { display: block; max-width: 100%; height: auto; }

:focus-visible {
    outline: 2px solid var(--peri);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Type roles. The nameplate is Archivo pushed wide and black — engraved,
   like the plate on a trophy — and it is the only place that width axis
   is used. Everything factual is set in mono. */
.plate {
    font-weight: 900;
    font-variation-settings: "wdth" 112;
    letter-spacing: -0.02em;
    line-height: 0.98;
    text-transform: uppercase;
    text-wrap: balance;
    margin: 0;
}

.eyebrow {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0 0 1rem;
}
.eyebrow em {
    font-style: normal;
    color: var(--peri);
}
.eyebrow .sep { color: var(--line); padding: 0 .35em; }

.lede { color: var(--dim); font-size: 1.05rem; margin: 1.1rem 0 0; }

/* ── Top bar ─────────────────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--void) 82%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-lo);
}
.topbar__in {
    width: var(--shell);
    margin: 0 auto;
    height: 62px;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.topbar__mark { width: 30px; height: 30px; }
.topbar__name {
    font-weight: 800;
    font-variation-settings: "wdth" 108;
    letter-spacing: .01em;
    font-size: 1.02rem;
}
.topbar__spacer { flex: 1; }
.topbar__link {
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
}

/* The language picker's slot. The control inside it is built and styled by i18n/i18n.js,
   which uses currentColor throughout — so this only has to say where it sits and what
   colour it inherits. */
.topbar__pick {
    display: inline-flex;
    align-items: center;
    color: var(--dim);
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.cta {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .78rem 1.35rem;
    border-radius: 999px;
    background: var(--peri);
    color: #101430;
    font-weight: 800;
    font-size: .95rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    box-shadow: 0 0 0 0 rgba(186, 195, 255, .35);
}
.cta:hover {
    transform: translateY(-2px);
    background: #d2d8ff;
    box-shadow: 0 10px 30px -12px rgba(186, 195, 255, .7);
}
.cta--sm { padding: .5rem 1rem; font-size: .85rem; }
.cta__glyph { width: 18px; height: 20px; flex: none; }

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line-lo);
}
/* A tint, not a light source — the same restraint the Play compositor uses. */
.hero::before {
    content: "";
    position: absolute;
    inset: -30% 0 auto -10%;
    height: 780px;
    background: radial-gradient(46% 52% at 28% 34%, rgba(70, 78, 160, .40), transparent 70%);
    pointer-events: none;
}
.hero__in {
    position: relative;
    width: var(--shell);
    margin: 0 auto;
    padding: clamp(2.5rem, 5vw, 4rem) 0 0;
}
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.34fr) minmax(0, .66fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}
.hero h1 {
    font-size: clamp(2.25rem, 4vw, 3.05rem);
}
.hero h1 .turn { color: var(--peri); }
.hero__lede { max-width: 34rem; }
.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.4rem;
    margin-top: 2rem;
}
.hero__terms {
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--faint);
    text-transform: uppercase;
}

/* ── Device frame ────────────────────────────────────────────────────── */
.device {
    position: relative;
    margin: 0 auto;
    width: min(300px, 78%);
    padding: 9px;
    border-radius: 40px;
    background: linear-gradient(160deg, #2c3350, #14182a 55%, #0d1020);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .05),
        0 46px 90px -40px rgba(0, 0, 0, .95),
        0 18px 40px -30px rgba(80, 90, 180, .55);
}
.device img {
    border-radius: 32px;
    width: 100%;
}
.device--hero { width: min(258px, 76%); }

/* ── The case: the signature ─────────────────────────────────────────
   A real cabinet — the developer's, exactly as the app renders it. The
   four columns are the four tiers, in the four metals, set in tabular
   mono so the figures line up like a scoreboard. */
.case {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    border-top: 1px solid var(--line);
    padding: 1.6rem 0 2.4rem;
    display: grid;
    grid-template-columns: auto repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 1rem 1.5rem;
}
.case__label {
    font-family: var(--mono);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--faint);
    max-width: 12rem;
    line-height: 1.5;
    padding-bottom: .3rem;
}
.case__label b { display: block; color: var(--ink); font-weight: 600; }

.tier { text-align: left; }
.tier__n {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--tier);
}
.tier__name {
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--faint);
    margin-top: .55rem;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.tier__name::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--tier);
    flex: none;
}
.tier--bronze { --tier: var(--bronze); }
.tier--silver { --tier: var(--silver); }
.tier--gold   { --tier: var(--gold); }
.tier--plat   { --tier: var(--plat); }

/* ── Feature rows ────────────────────────────────────────────────────── */
.feature {
    width: var(--shell);
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
    border-bottom: 1px solid var(--line-lo);
}
.feature--flip .feature__copy { order: 2; }
.feature h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}
.feature__points {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
}
.feature__points li {
    position: relative;
    padding-left: 1.4rem;
    margin: .5rem 0;
    color: var(--dim);
    font-size: .96rem;
}
.feature__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 2px;
    background: var(--peri);
    opacity: .65;
}

/* ── More inside ─────────────────────────────────────────────────────── */
.more {
    width: var(--shell);
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.more h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
.more__grid {
    margin-top: 2.6rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: #33406e; transform: translateY(-3px); }
.card__shot {
    height: 168px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    background: var(--deep);
}
.card__shot img {
    width: 100%;
    object-fit: cover;
    object-position: top center;
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; }
.card h3 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 800;
    font-variation-settings: "wdth" 106;
}
.card p { margin: 0; color: var(--dim); font-size: .9rem; line-height: 1.55; }

.also {
    margin-top: 2.4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .6rem 2rem;
    list-style: none;
    padding: 1.6rem 0 0;
    border-top: 1px solid var(--line-lo);
}
.also li {
    font-family: var(--mono);
    font-size: .82rem;
    color: var(--dim);
    display: flex;
    gap: .7rem;
    align-items: baseline;
}
.also li::before {
    content: "+";
    color: var(--peri);
    font-weight: 600;
}

/* ── Legal ───────────────────────────────────────────────────────────── */
.legal {
    border-top: 1px solid var(--line-lo);
    background: var(--deep);
}
.legal__in {
    width: var(--shell);
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.legal h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.legal__grid {
    margin-top: 2.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.1rem;
}
.doc {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.3rem 1.4rem;
    transition: border-color .18s ease, transform .18s ease;
}
.doc:hover { border-color: var(--peri); transform: translateY(-3px); }
.doc__kind {
    font-family: var(--mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--faint);
}
.doc h3 {
    margin: .55rem 0 .4rem;
    font-size: 1.08rem;
    font-weight: 800;
    font-variation-settings: "wdth" 106;
}
.doc p { margin: 0; color: var(--dim); font-size: .88rem; line-height: 1.55; }

.contact {
    margin-top: 2rem;
    font-family: var(--mono);
    font-size: .85rem;
    color: var(--dim);
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot {
    border-top: 1px solid var(--line-lo);
}
.foot__in {
    width: var(--shell);
    margin: 0 auto;
    padding: 2.6rem 0 3.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2rem;
    align-items: center;
    justify-content: space-between;
}
.foot p {
    margin: 0;
    color: var(--faint);
    font-size: .82rem;
    max-width: 46rem;
    line-height: 1.6;
}
.foot__mark {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: .92rem;
}
.foot__mark img { width: 26px; height: 26px; }

/* ── Motion ──────────────────────────────────────────────────────────── */
.js .rise {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.js .rise.is-in { opacity: 1; transform: none; }
.rise--1 { transition-delay: .06s; }
.rise--2 { transition-delay: .12s; }
.rise--3 { transition-delay: .18s; }
.rise--4 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .rise { opacity: 1; transform: none; transition: none; }
    .cta, .card, .doc { transition: none; }
    .cta:hover, .card:hover, .doc:hover { transform: none; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero__grid,
    .feature { grid-template-columns: 1fr; }
    .feature__copy { order: 0 !important; }
    .hero__device { margin-top: 2.5rem; }
    .case {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
    .case__label { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 560px) {
    :root { --shell: min(1180px, 100% - 2rem); }
    body { font-size: 16px; }
    .topbar__name { display: none; }
    .topbar__link { display: none; }
    /* The store button keeps its glyph and loses its words. At this width the label is what
       decides whether the bar holds: "Jetzt bei Google Play" wraps to two lines and makes the
       button as tall as the bar it is in. Dropping the label costs nothing — the same button
       with its full label is the first thing under the fold — and it means the bar does not
       depend on which language happens to have the shortest verb. */
    .topbar__in .cta--sm { padding: .5rem; }
    .topbar__in .cta--sm span { display: none; }
    .device, .device--hero { width: min(280px, 88%); }
}

/* "Coming to the App Store" — a statement, not a button.
   There is no App Store URL yet, so this is a <span> rather than an <a>: a control that looks
   pressable and goes nowhere (or to a 404) is a worse answer than a plain sentence. It keeps the
   CTA's shape so the hero still balances, and loses everything that promises a destination. */
.cta--soon {
    background: transparent;
    color: var(--dim);
    box-shadow: inset 0 0 0 1px var(--line);
    cursor: default;
}
.cta--soon:hover { transform: none; }
.cta--soon .cta__glyph { opacity: .75; }