/* landing.css — Live Subtitles
 *
 * One stylesheet for the homepage across all 16 locales (previously 1343 lines of
 * <style> duplicated into every locale folder). Replaces Bootstrap 5 + Swiper:
 * the page needs a nav, a grid, an accordion and one dialog, all of which are
 * ~200 lines of CSS and a <details>/<dialog> element.
 *
 * Identity follows the mobile store assets (docs/google-play/assets): brand blue
 * #005495 on white. The only other accent is the product's own translation-line
 * orange, used exclusively inside subtitle visuals so the page and the app agree.
 */

:root {
    --brand: #005495;
    --brand-dark: #003f71;
    --brand-tint: #eaf2f8;
    --ink: #0c1826;
    --ink-soft: #3b4a5c;
    --muted: #667689;
    --line: #e3e8ef;
    --bg: #ffffff;
    --bg-alt: #f6f8fb;
    --sub-orange: #ff9500;   /* product translation line, on dark only */
    --yes: #0f7b4f;
    --no: #b03a3a;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(12, 24, 38, .06), 0 1px 3px rgba(12, 24, 38, .04);
    --shadow-md: 0 4px 16px rgba(12, 24, 38, .08);
    --shadow-lg: 0 18px 48px rgba(12, 24, 38, .14);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* .site-header is sticky over a 64px nav, so anchor targets have to clear it or
 * the heading they scroll to lands underneath the bar. */
section[id], .section__head[id] { scroll-margin-top: 80px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .6em; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h1 { font-size: clamp(2.05rem, 4.4vw, 3.15rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); }
h3 { font-size: 1.125rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.wrap { max-width: 1120px; margin-inline: auto; padding-inline: 24px; }
.section { padding: 84px 0; }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.section__head { max-width: 660px; margin-bottom: 44px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p { color: var(--ink-soft); font-size: 1.0625rem; margin: 0; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .82rem 1.55rem;
    border: 1px solid transparent;
    border-radius: 10px;
    font: inherit; font-weight: 600; font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); color: #fff; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: #c3cddb; background: #fbfcfe; }
.btn--sm { padding: .5rem 1.05rem; font-size: .9375rem; border-radius: 8px; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px;
}

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

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) {
    .site-header { backdrop-filter: blur(8px); }
}
.nav { display: flex; align-items: center; gap: 1.5rem; min-height: 64px; }
.nav__brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: 1.0625rem; color: var(--ink); letter-spacing: -.01em;
}
.nav__brand:hover { text-decoration: none; }
.nav__brand img { width: 26px; height: 26px; border-radius: 6px; }
.nav__links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav__links a { color: var(--ink-soft); font-size: .9375rem; font-weight: 500; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__side { display: flex; align-items: center; gap: .75rem; }

.lang-select {
    appearance: none;
    padding: .45rem 1.9rem .45rem .7rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23667689' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .6rem center;
    color: var(--ink-soft); font: inherit; font-size: .875rem; cursor: pointer;
}

.nav__toggle {
    display: none;
    margin-left: auto;
    padding: .45rem; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; cursor: pointer;
}

@media (max-width: 860px) {
    .nav__links { display: none; }
    .nav__toggle { display: inline-flex; }
    .nav__side { display: none; }
    .nav.is-open { flex-wrap: wrap; padding-bottom: 1rem; }
    .nav.is-open .nav__links {
        display: flex; flex-direction: column; gap: .9rem;
        width: 100%; order: 3; margin-left: 0; padding-top: 1rem;
        border-top: 1px solid var(--line);
    }
    .nav.is-open .nav__side { display: flex; order: 4; width: 100%; }
    .nav.is-open .nav__side .btn { flex: 1; }
}

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

.hero { padding: 68px 0 76px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.hero__lead { font-size: 1.1875rem; color: var(--ink-soft); max-width: 34em; margin-bottom: 1.75rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1.1rem; }
/* The trial line and the store rating are two facts, not one sentence, and they
 * only fit on one line in the single-column hero — in the two-column one the
 * text column is too narrow, in every locale, so the rating always wraps. A
 * literal separator between them is then stranded at the end of the first line.
 * So: a wrapping flex row whose column-gap is the room for a separator, and the
 * separator itself hangs to the left of the rating as a pseudo-element. When
 * the rating starts a line the mark hangs outside the paragraph, where the clip
 * takes it away — which is also what puts the rating on its own line unaided on
 * a phone. */
.hero__note {
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: .9rem; row-gap: .3rem;
    overflow: hidden;
    font-size: .9375rem; color: var(--muted); margin: 0 0 1.5rem;
}
.hero__note .rating { position: relative; }
.hero__note .rating::before {
    content: '\B7';
    position: absolute; left: -.55rem; top: 0; bottom: 0;
    display: flex; align-items: center;
}

.rating { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--ink-soft); }
.rating:hover { text-decoration: none; }
.rating__stars { color: #f0a202; letter-spacing: .08em; }
.rating__src { color: var(--muted); }

.proof { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.proof li {
    display: flex; align-items: center; gap: .45rem;
    font-size: .9375rem; font-weight: 500; color: var(--ink-soft);
}
.proof svg { flex: none; width: 17px; height: 17px; color: var(--brand); }

.apps-line { margin-top: 1.75rem; }
.apps-line__label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 .6rem; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.chips li {
    padding: .3rem .65rem;
    border: 1px solid var(--line); border-radius: 999px;
    background: #fff;
    font-size: .8125rem; font-weight: 500; color: var(--ink-soft);
}

/* App logo grid. The name stays as real text under each logo: it reads better than a
 * hover tooltip and keeps the app names in the HTML rather than only in alt text. */
.applogos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 12px; margin: 0; padding: 0; list-style: none;
}
.applogos li {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    padding: 1rem .5rem .85rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    text-align: center;
}
.applogos img { width: 34px; height: 34px; object-fit: contain; }
.applogos span { font-size: .8125rem; font-weight: 500; color: var(--ink-soft); line-height: 1.25; }
@media (max-width: 560px) {
    .applogos { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
    .applogos img { width: 28px; height: 28px; }
    .applogos span { font-size: .75rem; }
}

/* Product frame — mirrors the real app: title bar, scene, control row, dual lines. */
.frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0d1117;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(12, 24, 38, .12);
}
.frame__bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .55rem .8rem;
    background: #161b22;
    color: #c9d3df; font-size: .8125rem;
}
.frame__dots { display: flex; gap: .3rem; }
.frame__dots span { width: 10px; height: 10px; border-radius: 50%; background: #2f3742; }
.frame__scene { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.frame__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 26%; }
.frame__scene::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .06) 46%, transparent 64%);
}
.frame__live {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .2rem .5rem; border-radius: 5px;
    background: rgba(0, 0, 0, .58);
    color: #fff; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
}
.frame__live i { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; }
.subs { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(560px, 90%); z-index: 2; }
.subs div {
    padding: .5rem .8rem; border-radius: 5px;
    background: rgba(0, 0, 0, .74);
    text-align: center; font-weight: 600;
    font-size: clamp(.9375rem, 1.6vw, 1.0625rem); line-height: 1.35;
    min-height: 1.9em;
}
.subs .orig { color: #fff; }
.subs .trans { color: var(--sub-orange); margin-top: 6px; }
.subs .typing::after {
    content: ''; display: inline-block; width: 2px; height: 1em;
    margin-left: 2px; background: currentColor; vertical-align: -.12em;
    animation: caret .75s steps(1) infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.frame__controls {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .6rem .8rem;
    background: #161b22; border-top: 1px solid #232a34;
    font-size: .8125rem; color: #c9d3df;
}
.frame__lang { padding: .25rem .55rem; border: 1px solid #2f3742; border-radius: 6px; background: #0d1117; }
.frame__swap { color: #7d8b9c; }
.frame__online {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .5rem; border-radius: 5px;
    background: rgba(37, 155, 96, .16); color: #4ac68a; font-weight: 600; font-size: .75rem;
}
.frame__online i { width: 6px; height: 6px; border-radius: 50%; background: #3fbf7f; }

@media (max-width: 940px) {
    .hero { padding: 40px 0 52px; }
    .hero__grid { grid-template-columns: 1fr; gap: 34px; }
}

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

.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; counter-reset: step; max-width: 900px; }
.step { counter-increment: step; }
.step__n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; margin-bottom: .85rem;
    border-radius: 8px; background: var(--brand-tint);
    color: var(--brand); font-weight: 700; font-size: .9375rem;
}
.step__n::before { content: counter(step); }
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-soft); font-size: .9688rem; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

/* ── Comparison table ──────────────────────────────────────────────────── */

.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
    width: 100%; min-width: 620px;
    border-collapse: separate; border-spacing: 0;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    font-size: .9375rem;
}
.cmp th, .cmp td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
    font-size: .8125rem; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em; vertical-align: bottom;
}
.cmp tbody th { font-weight: 600; color: var(--ink); }
.cmp td { text-align: center; width: 20%; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr.is-us { background: var(--brand-tint); }
.cmp tbody tr.is-us th { color: var(--brand-dark); }
/* Narrow screens: let the table shrink and wrap instead of scrolling sideways —
 * a side-scrolling comparison is the one people never scroll. */
@media (max-width: 720px) {
    .cmp { min-width: 0; font-size: .8125rem; }
    .cmp th, .cmp td { padding: .6rem .45rem; }
    .cmp thead th { font-size: .6875rem; letter-spacing: .03em; }
    .cmp td { width: 17%; }
}

.mark { display: inline-flex; }
.mark svg { width: 19px; height: 19px; }
.mark.yes { color: var(--yes); }
.mark.no { color: var(--no); }

/* ── Cards / use cases / features ──────────────────────────────────────── */

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ── Store-listing gallery (phones) ────────────────────────────────────────
 *
 * Replaces the four use-case stills that used to sit in #examples: those had a
 * marketing headline composited into the frame at a per-locale height, so no
 * crop could remove it, and at phone width the app UI inside them was too
 * small to read. These are the store screenshots — drawn for a phone screen,
 * so they stay legible at any size the page gives them, and shown the way both
 * stores show them: a horizontal snap strip.
 *
 * The band itself is phone-only. On a desktop it would be a row of phone
 * screenshots too small to read, next to a page that has the room to explain
 * the same things in words; the media query at the bottom of the file is what
 * turns it on.
 *
 * Slides keep their own aspect ratio off the width/height attributes, so the
 * 9/16 Android set and the 9/19.5 iOS set both sit right with one rule. */
.shots-band { display: none; }
.shots {
    display: flex; gap: 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* No scrollbar: it is swiped, and the half-visible next slide is the hint
     * that there is more. */
    scrollbar-width: none;
}
.shots::-webkit-scrollbar { display: none; }
.shots img {
    flex: none; width: 216px; height: auto;
    border: 1px solid var(--line); border-radius: var(--radius);
    scroll-snap-align: start;
}

.feature__icon { width: 26px; height: 26px; margin-bottom: .8rem; color: var(--brand); }
.feature h3 { margin-bottom: .3rem; }
.feature p { color: var(--ink-soft); font-size: .9375rem; margin: 0; }

/* ── Video facades ─────────────────────────────────────────────────────── */

/* One large demo up front, two supporting ones beneath: three equal thumbnails in a
 * row end up too small to read the subtitles in, which is the whole point. */
.videos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.videos > :first-child { grid-column: 1 / -1; }
@media (max-width: 860px) { .videos { grid-template-columns: 1fr; } }
.video {
    position: relative; display: block;
    aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--radius);
    background: #0d1117; cursor: pointer; padding: 0;
}
.video img { width: 100%; height: 100%; object-fit: cover; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(6, 12, 20, .3);
}
.video__play span {
    display: grid; place-items: center;
    width: 54px; height: 54px; border-radius: 50%;
    background: rgba(255, 255, 255, .94); color: var(--brand);
}
.video:hover .video__play { background: rgba(6, 12, 20, .18); }

/* ── Reviews ───────────────────────────────────────────────────────────── */

.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.review__stars { color: #f0a202; font-size: .875rem; letter-spacing: .1em; margin-bottom: .6rem; }
.review p { font-size: .9688rem; color: var(--ink); margin-bottom: .9rem; }
.review footer { font-size: .875rem; color: var(--muted); }
.review footer b { color: var(--ink); font-weight: 600; }

/* ── Privacy note ──────────────────────────────────────────────────────── */

.note {
    display: grid; grid-template-columns: 26px 1fr; gap: 1rem;
    max-width: 760px;
    padding: 1.5rem 1.7rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.note svg { width: 26px; height: 26px; color: var(--brand); }
.note h2 { font-size: 1.1875rem; margin-bottom: .4rem; }
.note p { color: var(--ink-soft); font-size: .9688rem; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.faq { max-width: 760px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 0; cursor: pointer;
    font-weight: 600; font-size: 1.0313rem;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; flex: none;
    width: 10px; height: 10px; margin-right: 4px;
    border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq details > div { padding: 0 0 1.15rem; color: var(--ink-soft); font-size: .9688rem; max-width: 62ch; }

/* ── Pricing (pricing.html) ────────────────────────────────────────────── */

/* Three subscription tiers, or three minute packs. The featured card grows a
 * heavier border rather than a different background: the tint is already used
 * by the comparison table's "us" row and by .step__n. */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.tier {
    position: relative;
    display: flex; flex-direction: column;
    padding: 1.6rem 1.5rem 1.5rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.tier--featured { border: 2px solid var(--brand); box-shadow: var(--shadow-md); padding-top: 1.9rem; }
.tier__badge {
    position: absolute; top: -12px; left: 1.5rem;
    padding: .18rem .6rem; border-radius: 999px;
    background: var(--brand); color: #fff;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.tier h3 { margin-bottom: .15rem; font-size: 1.25rem; }
.tier__sub { color: var(--muted); font-size: .875rem; margin: 0 0 1rem; }
.tier__price { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .2rem; }
.tier__price b { font-size: 2.15rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.tier__price span { color: var(--muted); font-size: .9375rem; }
.tier__alt { color: var(--ink-soft); font-size: .875rem; margin: 0 0 1.1rem; }
.tier__alt em { font-style: normal; color: var(--muted); }
.tier__list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.tier__list li {
    display: grid; grid-template-columns: 18px 1fr; gap: .55rem;
    padding: .3rem 0;
    color: var(--ink-soft); font-size: .9375rem;
}
.tier__list svg { width: 18px; height: 18px; margin-top: .3rem; color: var(--brand); }
.tier__list b { color: var(--ink); font-weight: 600; }
.tier .btn { margin-top: auto; width: 100%; }

/* Free-tier band: one row of facts, no card chrome — it is not a plan you buy. */
.freebar {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 28px;
    padding: 1.6rem 1.8rem;
    background: var(--brand-tint); border-radius: var(--radius-lg);
}
@media (max-width: 900px) { .freebar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .freebar { grid-template-columns: 1fr; padding: 1.3rem 1.4rem; } }
.freebar div b { display: block; font-size: 1.35rem; letter-spacing: -.02em; color: var(--brand-dark); }
.freebar div span { font-size: .9375rem; color: var(--ink-soft); }

.price-note { max-width: 760px; margin: 28px 0 0; color: var(--muted); font-size: .875rem; }
.price-note--center { margin-inline: auto; text-align: center; }

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

.stores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; max-width: 900px; margin-inline: auto; }
@media (max-width: 860px) { .stores { grid-template-columns: repeat(2, 1fr); } }
.store {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem;
    padding: 1.25rem .9rem;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
/* No uppercase here: it would render the platform names as "MACOS" and "IOS". */
.store span { font-size: .875rem; font-weight: 600; color: var(--ink-soft); }
.store a { display: flex; align-items: center; justify-content: center; min-height: 50px; }
/* Official badges may not be redrawn, and they do not share a trim. The Microsoft and
 * Apple SVGs are full-bleed (161x44, 156x40, 120x40), while Google's PNG is 646x250 with
 * 41px of transparent padding top and bottom — its artwork is only 67% of the file height.
 * So a single CSS height renders Google's badge a third smaller. Scale it by 1/0.672 to
 * make the visible badges optically equal. */
.store img { height: 48px; width: auto; }
.store img[src*="play.google"] { height: 71px; }
@media (max-width: 620px) {
    .store img { height: 44px; }
    .store img[src*="play.google"] { height: 65px; }
}
.tv { max-width: 900px; margin: 18px auto 0; text-align: center; }

/* ── Sticky CTA (phones) ───────────────────────────────────────────────── */

/* Desktop keeps the navbar button in view the whole way down, so the bar is a
 * phone-only thing — see the media query at the bottom of the file, which is
 * also where it starts existing at all. */
.stickycta { display: none; }

/* ── Dialog ────────────────────────────────────────────────────────────── */

dialog {
    width: min(420px, calc(100vw - 32px));
    padding: 1.7rem;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--ink);
}
dialog::backdrop { background: rgba(9, 18, 30, .5); }
dialog h2 { font-size: 1.25rem; }
dialog p { color: var(--ink-soft); font-size: .9688rem; }
dialog input[type="email"] {
    width: 100%; padding: .7rem .8rem; margin-bottom: .9rem;
    border: 1px solid var(--line); border-radius: 9px;
    font: inherit; font-size: 1rem; color: var(--ink);
}
.dialog__row { display: flex; gap: .6rem; justify-content: flex-end; }
.dialog__close { position: absolute; top: .8rem; right: .8rem; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1.25rem; line-height: 1; padding: .2rem .35rem; }

/* ── Footer + SEO links ────────────────────────────────────────────────── */

.links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; font-size: .875rem; }
@media (max-width: 860px) { .links { grid-template-columns: repeat(2, 1fr); } }
.links h3 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .7rem; }
.links a { display: block; color: var(--ink-soft); padding: .17rem 0; }
.links a:hover { color: var(--brand); }

.site-footer { padding: 32px 0 44px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--ink-soft); }

/* ── Phone layout ──────────────────────────────────────────────────────────
 *
 * Everything above is the desktop page reflowing into one column, which reads
 * as a shrunken desktop page rather than a phone one: desktop type sizes and
 * 84px section gaps, and a hero visual drawn as a *desktop window* — a titlebar
 * with three dots — on a device that has no windows.
 *
 * Below 720px the same markup is restyled, almost entirely in CSS, so the 16
 * locale homepages stay identical apart from one wrapped separator:
 *   - type and vertical rhythm step down;
 *   - the hero is reordered so the demo comes before the CTA and the lead;
 *   - .frame becomes a phone — camera cutout instead of window dots, the video
 *     docked under the status bar, the subtitle pair on black below it, and the
 *     device running off the bottom of the hero.
 *
 * Then 620px for the reviews carousel, and 560px for what only breaks at actual
 * phone width — stacked CTAs, the proof list, the comparison table.
 */

@media (max-width: 720px) {
    h1 { font-size: 1.9rem; }
    h2 { font-size: 1.5rem; }
    .section { padding: 56px 0; }
    .section__head { margin-bottom: 26px; }
    .section__head p { font-size: 1rem; }

    .hero { padding: 26px 0 44px; }
    .hero__lead { font-size: 1.0625rem; margin-bottom: 1.5rem; }
    .hero__note { font-size: .875rem; margin-bottom: 1.25rem; }

    /* Show it, then ask for the click, then explain. In source order the lead
     * paragraph sits between the headline and the visual — right on a wide
     * screen, where they are side by side, and wrong on a phone: eight lines of
     * prose pushed the demo off the first screen entirely. display:contents
     * lifts the text column's children into the hero grid so each can be
     * ordered; browsers without it (Safari < 11.1) keep the source order, which
     * is the layout as it was. */
    .hero__grid { display: grid; gap: 0; }
    .hero__grid > div:not(.frame) { display: contents; }
    .hero h1 { order: 1; margin-bottom: 1rem; }
    .frame { order: 2; }
    .hero__cta { order: 3; }
    .hero__note { order: 4; }
    .hero__lead { order: 5; }
    .proof { order: 6; }

    /* — the phone —
     * Below 720px the same markup becomes a phone showing a real screenshot of
     * the app (see the <picture> in the hero): the screenshot brings its own
     * status bar, YouTube chrome and caption band, so nothing here is invented.
     * Earlier passes drew the parts by hand — a fake status bar, a LIVE badge, a
     * language strip, a photo floating on black — and it read as a mockup, which
     * is exactly what it was.
     *
     * The device runs off the bottom of the hero rather than ending: a whole
     * phone would be twice this tall and push the CTA off the first screen. */
    .frame {
        width: min(300px, 78%);
        margin-inline: auto;
        margin-bottom: 1rem;
        border: 7px solid #050709;
        border-bottom: 0;
        border-radius: 40px 40px 0 0;
        background: #000;
        /* Dissolves instead of ending in a hard edge, which read as a black card
         * rather than a device carrying on past the hero. Measured from the
         * bottom rather than in percent, because the frame's height moves with
         * the caption box: what the fade has to land on is the white run under
         * that box (the scene's padding), and that run is a fixed 18px. */
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
    }
    /* The screenshot has a real status bar; a second one drawn above it would be
     * two. Same for the LIVE badge and the language strip — the app draws
     * neither, and inventing them was the whole problem. */
    .frame__bar, .frame__live, .frame__controls { display: none; }

    /* The screenshot is cut just above the caption band it carries and the live
     * caption box takes the rest of the frame, rather than the box being laid
     * over the whole screenshot.
     *
     * Laid over, the box had to be as tall as the baked-in band it was hiding —
     * three lines per language — while the live pair runs one or two. The
     * remainder showed as a band of white between the captions and the video
     * list, and the box's bottom edge cut the list's first row in half.
     *
     * Nothing of the screenshot is kept below the cut. The app's caption box
     * overlaps the first row of the video list and fades out over it, so there
     * is no horizontal line down there to cut on: every candidate takes the top
     * off the row's thumbnail or its title. What follows the box is the white
     * the frame fades out over — the same white the list sits on. */
    .frame__scene {
        aspect-ratio: auto;
        background: #fff;
        /* Runway for the mask to dissolve the two side rails over, and nothing
         * more: white here reads as a gap between the captions and the CTA, so
         * it is kept to what the fade actually needs. */
        padding-bottom: 18px;
    }
    /* The cut: status bar, video and chip row, ending on the last clean white
     * row of the source at y=444 of 849 — 445 is the caption band's antialiased
     * top edge and shows as a pink hairline. The image keeps its natural height
     * and the ratio here does the cropping. */
    .frame__scene picture {
        display: block; overflow: hidden;
        aspect-ratio: 572 / 444;
    }
    .frame__scene img {
        display: block; position: static;
        width: 100%; height: auto;
        aspect-ratio: auto; object-fit: fill;
    }
    /* Nothing to fade into: the screenshot is not a photo needing a scrim. */
    .frame__scene::after { display: none; }

    /* In flow under the cut: the caption box *is* the app's box now, not
     * something floating over it — full-bleed with a rounded bottom, the way the
     * app draws it. */
    .subs {
        position: static;
        width: auto; transform: none;
        display: block; padding: 0;
        border-radius: 0 0 10px 10px; overflow: hidden;
        background: #fff;
    }
    /* Full-bleed black rows, left aligned like the band they replace. The pair
     * is the one thing in the frame that has to be readable, so it is sized as
     * large as two lines allow rather than by the desktop clamp.
     *
     * Two lines tall, always: 2.6em of text plus the .3em padding either side.
     * The phrases run to one line or two depending on the language, and in flow
     * a row that grew mid-typing would move the CTA below the hero while someone
     * was reaching for it. A one-line phrase leaves its second line black, which
     * is what the app's own box does.
     *
     * Two lines is only a safe fixture if the text scales with the frame, which
     * is itself a share of the viewport below ~385px: at a flat 15px the longest
     * phrases (pt, es, de) took a third line on a 360px phone and a fourth on a
     * 320px one. The vw term keeps every phrase in all 16 locales inside two
     * lines from 320px up, and the app's own UI in the screenshot above is
     * scaling with the frame in exactly the same way. */
    .subs div {
        background: #000; padding: .3em 4%;
        /* The desktop rows are separate rounded plates; here they are one box,
         * and the 5px corners left white notches down both edges at the seam.
         * The rounding that is left belongs to .subs, at the bottom only. */
        border-radius: 0;
        height: 3.2em; overflow: hidden;
        text-align: left; line-height: 1.3;
        font-size: clamp(.6875rem, 3.8vw, .9375rem);
    }
    /* No gap: the two rows have to read as one box, not two plates. */
    .subs .trans { margin-top: 0; padding-top: 0; }

    .steps { gap: 22px; }
    .grid { gap: 14px; }
    /* Features are plain text on desktop, where three columns give them shape.
     * Stacked, they need their own edges to stay scannable. */
    .feature {
        padding: 1.15rem 1.2rem;
        background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    }
    .feature__icon { margin-bottom: .55rem; }

    /* Sits directly under the hero, so no top padding of its own — the hero's
     * bottom padding is the gap. */
    .shots-band { display: block; padding: 0 0 48px; }
    .shots-band .section__head { margin-bottom: 18px; }
    /* Full-bleed, with the next slide peeking in. */
    .shots { margin-inline: -24px; padding-inline: 24px; gap: 10px; }
    .shots img { width: 62%; }

    .apps-line { margin-top: 1.4rem; }
    .note { grid-template-columns: 1fr; gap: .7rem; padding: 1.3rem 1.35rem; }
    .videos { gap: 14px; }
    .video__play span { width: 46px; height: 46px; }
    .faq summary { font-size: 1rem; padding: 1rem 0; }
    .stores { gap: 12px; }
    .site-footer { padding: 26px 0 34px; }
    .site-footer .wrap { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

/* The navbar's Try Free button is behind the burger below 860px, so past the
 * hero there is no button on screen for the rest of the page. This one appears
 * when the hero's own button scrolls out of sight (js/landing.js), so the two
 * are never up at the same time. */
@media (max-width: 860px) {
    .stickycta {
        position: fixed; z-index: 60; inset: auto 0 0 0;
        display: flex;
        padding: .55rem 18px;
        /* Clears the iPhone home-indicator strip, which would otherwise sit on
         * top of the button. */
        padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .94);
        border-top: 1px solid var(--line);
        box-shadow: 0 -6px 20px rgba(12, 24, 38, .07);
    }
    @supports (backdrop-filter: blur(8px)) {
        .stickycta { backdrop-filter: blur(8px); }
    }
    /* display:flex above would otherwise beat the hidden attribute. */
    .stickycta[hidden] { display: none; }
    .stickycta .btn { flex: 1; }
    /* Only while the bar is up: reserving the space always would leave a gap
     * under the footer through the whole first screen. */
    body.has-stickycta .site-footer { padding-bottom: 104px; }
}

/* Six stacked review cards add ~1000px of scrolling for content nobody reads in
 * full. As a snap carousel the next card peeks in, which shows there are more. */
@media (max-width: 620px) {
    .reviews {
        display: flex; gap: 12px;
        margin-inline: -24px; padding: 2px 24px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; scrollbar-width: none;
    }
    .reviews::-webkit-scrollbar { display: none; }
    .review { flex: 0 0 82%; scroll-snap-align: center; padding: 1.2rem 1.3rem; }
}

/* Phone-width only: at 600px the hero CTAs still fit side by side, and a
 * 600px-wide button is worse than two honest ones. */
@media (max-width: 560px) {
    /* Two buttons of different widths stacked left look like a mistake; at this
     * width they read as one CTA block. */
    .hero__cta { flex-direction: column; align-items: stretch; gap: .6rem; }
    .hero__cta .btn { width: 100%; }
    /* One fact per line: the long ones ("Under a second of delay") wrap inside a
     * two-column flex row and the list loses its baseline. */
    .proof { flex-direction: column; gap: .5rem; }

    /* The comparison is four columns of prose in 342px. Left to scroll sideways
     * it is never read; so: no uppercase (it cannot hyphenate), fixed layout so
     * the tool names get the room, and the ✓/✗ columns squeezed to a glyph. */
    .cmp { table-layout: fixed; font-size: .75rem; }
    .cmp th, .cmp td { padding: .55rem .3rem; }
    .cmp thead th {
        text-transform: none; font-size: .6875rem; letter-spacing: 0;
        line-height: 1.25; hyphens: auto;
    }
    .cmp tbody th { font-size: .75rem; line-height: 1.3; hyphens: auto; padding-left: .7rem; }
    .cmp td { width: 19%; }
    .mark svg { width: 17px; height: 17px; }
}

@media (max-width: 420px) {
    body { font-size: 16px; }
    h1 { font-size: 1.7rem; }
    .wrap { padding-inline: 18px; }
    .reviews, .shots { margin-inline: -18px; padding-inline: 18px; }
    .links { gap: 18px; font-size: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}