/* ============================================================
   landing.css — public marketing surface (home, pricing, about, /vs)
   Scoped under .mkt* / .landing-body so it can never leak into
   the logged-in app pages, which keep using styles.css alone.

   Everything themes off the tokens in styles.css. Dark is the
   default (:root); [data-theme="light"] overrides, same as the app.
   ============================================================ */

:root {
    --mkt-stage: radial-gradient(1100px 700px at 50% -5%, rgba(10, 132, 255, 0.22), transparent 68%),
                 linear-gradient(168deg, #060911 0%, #0a1226 46%, #0e1f4e 100%);
    --mkt-band: #0b0e18;
    --mkt-hairline: rgba(255, 255, 255, 0.08);
    --mkt-ink: #ffffff;
    --mkt-ink-soft: rgba(255, 255, 255, 0.62);
    --mkt-card: rgba(255, 255, 255, 0.045);
    --mkt-card-edge: rgba(255, 255, 255, 0.10);
    --mkt-accent: #4da3ff;
    --mkt-felt: #1f7a4d;
    --mkt-nav-bg: rgba(6, 9, 17, 0.78);
}

[data-theme="light"] {
    --mkt-stage: radial-gradient(1100px 700px at 50% -5%, rgba(0, 122, 255, 0.16), transparent 68%),
                 linear-gradient(168deg, #f7f8fc 0%, #eef2fb 46%, #e6ecfa 100%);
    --mkt-band: #ffffff;
    --mkt-hairline: rgba(0, 0, 0, 0.08);
    --mkt-ink: #06121f;
    --mkt-ink-soft: rgba(0, 0, 0, 0.60);
    --mkt-card: rgba(255, 255, 255, 0.85);
    --mkt-card-edge: rgba(0, 0, 0, 0.09);
    --mkt-accent: #0064d8;
    --mkt-felt: #1a6b43;
    --mkt-nav-bg: rgba(255, 255, 255, 0.82);
}

/* ── Native app: the marketing surface does not exist ──
   index.html doubles as the Capacitor entry point, so on device every
   block tagged .mkt-only is removed and the centred auth-shell layout
   is restored. The auth card itself is never tagged, so it survives. */
html.native .mkt-only { display: none !important; }

html.native body.landing-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    padding-top: max(24px, env(safe-area-inset-top));
}
html.native .auth-slot { width: 100%; display: flex; justify-content: center; }

/* ── Page shell ── */
body.landing-body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.mkt {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

.mkt-wide { max-width: 1180px; }

.mkt-section { padding: 72px 0; }
.mkt-section--tight { padding: 48px 0; }

.mkt-band {
    background: var(--mkt-band);
    border-top: 1px solid var(--mkt-hairline);
    border-bottom: 1px solid var(--mkt-hairline);
}

/* ── Top navigation ── */
.mkt-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--mkt-nav-bg);
    backdrop-filter: saturate(150%) blur(14px);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    border-bottom: 1px solid var(--mkt-hairline);
    padding-top: env(safe-area-inset-top);
}
.mkt-nav-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}
.mkt-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    text-decoration: none;
    margin-right: auto;
}
.mkt-brand img { height: 30px; width: 30px; border-radius: 8px; display: block; }
.mkt-nav-links { display: flex; align-items: center; gap: 6px; }
.mkt-nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 9px;
    transition: background 0.18s ease, color 0.18s ease;
}
.mkt-nav-links a:hover { background: var(--nav-item-hover-bg); color: var(--text-primary); }
.mkt-nav-links a[aria-current="page"] { color: var(--text-primary); background: var(--nav-item-hover-bg); }

/* ── Buttons (anchors, so the mobile full-width button rule never applies) ── */
.mkt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}
.mkt-btn--primary {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 6px 20px rgba(10, 132, 255, 0.32);
}
.mkt-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(10, 132, 255, 0.42); }
.mkt-btn--ghost {
    background: var(--mkt-card);
    border-color: var(--mkt-card-edge);
    color: var(--text-primary);
}
.mkt-btn--ghost:hover { background: var(--nav-item-hover-bg); transform: translateY(-1px); }
.mkt-btn--sm { padding: 9px 15px; font-size: 14px; border-radius: 10px; }

/* ── Store badges ──────────────────────────────────────────────
   Apple's "Download on the App Store" lockup, rebuilt as an anchor
   (glyph + two-line text) instead of an image: it themes with the
   page, stays crisp at any size, and costs no extra request. The
   Apple glyph is the same path as the Sign in with Apple button.

   The surface stays #000 in BOTH themes — that is the badge variant
   Apple ships for use over dark and light backgrounds alike. Only
   the hairline changes: visible on dark so the badge separates from
   the band, invisible on light so it reads as a pure black pill.

   Anchors, not buttons, so the mobile button:not(...) full-width
   rule in styles.css never touches them.
   ────────────────────────────────────────────────────────────── */
.mkt-store-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mkt-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 13px;
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 11px;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="light"] .mkt-store-badge { border-color: rgba(255, 255, 255, 0.04); }

.mkt-store-badge:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .mkt-store-badge:hover {
    border-color: rgba(255, 255, 255, 0.04);
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
.mkt-store-badge:focus-visible { outline: 2px solid var(--mkt-accent); outline-offset: 3px; }
.mkt-store-badge svg { flex: 0 0 auto; display: block; }

.mkt-store-copy { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.mkt-store-pre {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.9);
}
.mkt-store-name { font-size: 19px; font-weight: 500; letter-spacing: -0.3px; }

/* Compact variant for the footer column */
.mkt-store-badge--sm { padding: 7px 13px 7px 11px; border-radius: 9px; gap: 8px; }
.mkt-store-badge--sm svg { width: 13px; height: 16px; }
.mkt-store-badge--sm .mkt-store-pre { font-size: 9px; }
.mkt-store-badge--sm .mkt-store-name { font-size: 16px; }

/* ── Download band ──────────────────────────────────────────────
   Copy left, badge row right; stacks under 760px. A second badge
   (Google Play, once that listing exists) slots into .mkt-store-row
   with no markup changes here.
   ────────────────────────────────────────────────────────────── */
.mkt-download {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 36px;
    flex-wrap: wrap;
    padding: 32px 36px;
    border: 1px solid var(--mkt-card-edge);
    border-radius: 22px;
    background:
        radial-gradient(620px 300px at 92% 45%, rgba(10, 132, 255, 0.18), transparent 70%),
        var(--mkt-card);
}
/* faint suit watermark, same trick as the hero */
.mkt-download::before {
    content: "♠";
    position: absolute;
    right: -14px;
    bottom: -86px;
    font-size: 230px;
    line-height: 1;
    color: var(--mkt-ink);
    opacity: 0.04;
    pointer-events: none;
}
.mkt-download-copy { position: relative; flex: 1 1 340px; min-width: 0; }
.mkt-download-copy h2 {
    font-size: clamp(21px, 3vw, 28px);
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1.18;
    margin: 0 0 8px;
}
.mkt-download-copy p {
    margin: 0;
    max-width: 62ch;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
}
.mkt-download .mkt-store-row { position: relative; flex: 0 0 auto; }

/* Footer "Get the app" column — .mkt-footer a would otherwise repaint
   the badge text and underline it on hover. */
.mkt-footer .mkt-store-badge { color: #fff; text-decoration: none; margin-bottom: 11px; }
.mkt-footer .mkt-store-badge:hover { text-decoration: none; }
.mkt-footer-note { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }

/* ── Hero ── */
.mkt-hero {
    position: relative;
    background: var(--mkt-stage);
    border-bottom: 1px solid var(--mkt-hairline);
    overflow: hidden;
}
/* faint card-suit wash, echoing the App Store frames */
.mkt-hero::before,
.mkt-hero::after {
    content: "♠";
    position: absolute;
    font-size: 420px;
    line-height: 1;
    font-weight: 700;
    color: var(--mkt-ink);
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
}
.mkt-hero::before { top: -110px; left: -70px; transform: rotate(-18deg); }
.mkt-hero::after { content: "♦"; bottom: -130px; right: -60px; transform: rotate(14deg); color: var(--mkt-accent); opacity: 0.06; }

.mkt-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1080px;
    margin: 0 auto;
    padding: 76px 20px 84px;
    text-align: center;
}
.mkt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    color: var(--mkt-ink-soft);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-bottom: 22px;
}
.mkt-hero h1 {
    color: var(--mkt-ink);
    font-size: clamp(32px, 6.2vw, 58px);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -1.4px;
    margin: 0 auto 20px;
    max-width: 15ch;
}
.mkt-hero h1 em { font-style: normal; color: var(--mkt-accent); }
.mkt-lede {
    color: var(--mkt-ink-soft);
    font-size: clamp(16px, 2.1vw, 19px);
    line-height: 1.55;
    max-width: 56ch;
    margin: 0 auto 30px;
}
.mkt-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 16px;
}
/* Store line — a badge with a lead-in label, sitting under a CTA row and
   deliberately subordinate to it. Used in the hero and on /pricing. */
.mkt-store-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 18px;
}
.mkt-store-line > span {
    color: var(--mkt-ink-soft);
    font-size: 13.5px;
    font-weight: 600;
}

.mkt-reassure {
    color: var(--mkt-ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}
.mkt-reassure a { color: var(--mkt-accent); }

/* ── Generic section headings ── */
.mkt-kicker {
    color: var(--mkt-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.mkt-h2 {
    font-size: clamp(24px, 3.6vw, 34px);
    font-weight: 750;
    letter-spacing: -0.9px;
    line-height: 1.15;
    margin: 0 0 12px;
    color: var(--text-primary);
    border: none;
    padding: 0;
}
.mkt-sub {
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.6;
    max-width: 60ch;
    margin: 0 0 32px;
}
.mkt-center { text-align: center; }
.mkt-center .mkt-sub { margin-left: auto; margin-right: auto; }

/* ── Pain list ── */
.mkt-pain {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.mkt-pain li {
    list-style: none;
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    border-left: 3px solid var(--accent-danger);
    border-radius: 12px;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
}
.mkt-pain-after {
    margin-top: 22px;
    padding: 18px 20px;
    border-radius: 12px;
    background: var(--accent-success-muted);
    border: 1px solid rgba(50, 215, 75, 0.25);
    border-left: 3px solid var(--accent-success);
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* ── Role cards ── */
.mkt-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.mkt-role {
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    border-radius: 18px;
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}
.mkt-role-icon { font-size: 30px; line-height: 1; margin-bottom: 12px; }
.mkt-role h3 { font-size: 19px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.3px; }
.mkt-role p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; }
.mkt-role ul { margin: 0 0 18px; padding: 0; list-style: none; }
.mkt-role li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 9px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.mkt-role li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--accent-success);
    font-weight: 700;
}
.mkt-role .mkt-role-foot { margin-top: auto; }
.mkt-role-price {
    font-size: 13px;
    color: var(--text-muted);
    margin: 10px 0 0;
}

/* ── Feature grid ── */
.mkt-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
}
.mkt-feature {
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    border-radius: 18px;
    padding: 24px;
}
.mkt-feature-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: var(--accent-primary-muted);
    margin-bottom: 14px;
}
.mkt-feature h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.2px; }
.mkt-feature p { color: var(--text-muted); font-size: 14.5px; line-height: 1.62; margin: 0; }

/* ── Screenshot strip ── */
.mkt-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 26px;
    align-items: start;
}
.mkt-shot { text-align: center; }
.mkt-shot img {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: 18px;
    display: block;
    margin: 0 auto 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
[data-theme="light"] .mkt-shot img { box-shadow: 0 18px 44px rgba(10, 30, 70, 0.18); }
.mkt-shot h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 5px; }
.mkt-shot p { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0 auto; max-width: 34ch; }

/* ── Proof / trust strip ── */
.mkt-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}
.mkt-proof li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 14px;
}
.mkt-proof li::before { content: "✓"; color: var(--accent-success); font-weight: 700; }

/* ── Testimonials ── */
.mkt-quotes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}
.mkt-quote {
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    border-radius: 18px;
    padding: 24px;
}
.mkt-quote blockquote { margin: 0 0 16px; font-size: 15.5px; line-height: 1.62; color: var(--text-primary); }
.mkt-quote figcaption { display: flex; align-items: center; gap: 11px; }
.mkt-quote-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: var(--text-secondary);
    flex-shrink: 0;
}
.mkt-quote-name { font-size: 14px; font-weight: 650; }
.mkt-quote-role { font-size: 13px; color: var(--text-muted); }

/* ── FAQ ── */
.mkt-faq { max-width: 760px; margin: 0 auto; }
.mkt-faq details {
    border-bottom: 1px solid var(--mkt-hairline);
    padding: 4px 0;
}
.mkt-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 40px 18px 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--text-primary);
    position: relative;
}
.mkt-faq summary::-webkit-details-marker { display: none; }
.mkt-faq summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}
.mkt-faq details[open] summary::after { content: "−"; }
.mkt-faq .mkt-faq-a {
    padding: 0 8px 20px 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.65;
}
.mkt-faq .mkt-faq-a p { margin: 0 0 10px; }
.mkt-faq .mkt-faq-a p:last-child { margin-bottom: 0; }

/* ── "Not for you if" honesty block ── */
.mkt-notfor {
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    border-radius: 18px;
    padding: 26px 24px;
    max-width: 760px;
    margin: 0 auto;
}
.mkt-notfor h3 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
.mkt-notfor ul { margin: 0; padding-left: 20px; }
.mkt-notfor li { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin-bottom: 8px; }

/* ── Comparison table (/vs + pricing) ── */
.mkt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mkt-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 14.5px;
}
.mkt-table th, .mkt-table td {
    padding: 13px 14px;
    text-align: left;
    border-bottom: 1px solid var(--mkt-hairline);
}
.mkt-table th { font-weight: 700; font-size: 13px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--text-muted); }
.mkt-table td:first-child { color: var(--text-secondary); font-weight: 600; }
.mkt-table .yes { color: var(--accent-success); font-weight: 700; }
.mkt-table .no { color: var(--text-muted); }
.mkt-table col.mkt-col-us { background: var(--accent-primary-muted); }

/* ── Pricing cards ── */
.mkt-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 20px;
    align-items: stretch;
}
.mkt-plan {
    background: var(--mkt-card);
    border: 1px solid var(--mkt-card-edge);
    border-radius: 20px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mkt-plan--featured { border-color: var(--accent-primary); box-shadow: 0 0 0 1px var(--accent-primary); }
.mkt-plan-badge {
    position: absolute;
    top: -11px; left: 26px;
    background: var(--accent-primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 999px;
}
.mkt-plan h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.mkt-plan-who { color: var(--text-muted); font-size: 14px; margin: 0 0 18px; }
.mkt-plan-price { font-size: 42px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; }
.mkt-plan-price sup { font-size: 22px; top: -0.6em; }
.mkt-plan-period { color: var(--text-muted); font-size: 14px; margin: 8px 0 20px; }
.mkt-plan ul { list-style: none; padding: 0; margin: 0 0 24px; }
.mkt-plan li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.mkt-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-success); font-weight: 700; }
.mkt-plan .mkt-plan-foot { margin-top: auto; }
.mkt-plan .mkt-btn { width: 100%; }
.mkt-plan-fine { font-size: 12.5px; color: var(--text-muted); margin: 12px 0 0; line-height: 1.5; text-align: center; }

/* ── Auth slot (login card anchor on the landing page) ── */
.auth-slot {
    display: flex;
    justify-content: center;
    padding: 0 16px 72px;
}
.auth-slot .auth-card { margin: 0; }

/* ── Footer ── */
.mkt-footer {
    border-top: 1px solid var(--mkt-hairline);
    background: var(--mkt-band);
    padding: 44px 20px calc(36px + env(safe-area-inset-bottom));
}
.mkt-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 28px;
}
.mkt-footer h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    color: var(--text-muted);
    margin: 0 0 12px;
    font-weight: 700;
}
.mkt-footer ul { list-style: none; padding: 0; margin: 0; }
.mkt-footer li { margin-bottom: 9px; }
.mkt-footer a { color: var(--text-secondary); text-decoration: none; font-size: 14px; }
.mkt-footer a:hover { color: var(--text-primary); text-decoration: underline; }
.mkt-footer-bottom {
    max-width: 1080px;
    margin: 30px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--mkt-hairline);
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ── Entrance motion ──
   Opt-in: the hidden state only applies once JS has confirmed it can
   animate (html.mkt-anim). Without JS, with a failed script, or on an
   old browser the content just renders — it is never left invisible. */
html.mkt-anim .mkt-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
html.mkt-anim .mkt-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    html.mkt-anim .mkt-reveal { opacity: 1; transform: none; transition: none; }
    .mkt-btn, .mkt-nav-links a { transition: none; }
    .mkt-btn--primary:hover, .mkt-btn--ghost:hover { transform: none; }
}

/* ── Mobile ── */
@media (max-width: 760px) {
    .mkt-section { padding: 52px 0; }
    .mkt-hero-inner { padding: 52px 20px 60px; }
    .mkt-hero::before { font-size: 260px; top: -60px; left: -50px; }
    .mkt-hero::after { font-size: 260px; bottom: -80px; right: -40px; }
    .mkt-cta-row .mkt-btn { flex: 1 1 100%; }
    .mkt-footer-inner { grid-template-columns: repeat(2, 1fr); gap: 22px; }

    /* Download band: copy on top, badges below and full-width-ish */
    .mkt-download { padding: 26px 22px; gap: 20px; border-radius: 18px; }
    .mkt-download::before { font-size: 180px; bottom: -66px; right: -10px; }
    .mkt-download-copy { flex: 1 1 100%; }
    .mkt-download .mkt-store-row { flex: 1 1 100%; }

    /* Two-tier nav: brand + signup on row one, links wrap centred below.
       Keeps every link reachable without pushing the document wider than
       the viewport (the CTA is white-space: nowrap). */
    .mkt-nav-inner { flex-wrap: wrap; gap: 8px; padding: 8px 14px; row-gap: 2px; }
    .mkt-nav-links { order: 3; width: 100%; justify-content: center; gap: 0; }
    .mkt-nav-links a { padding: 7px 9px; font-size: 13.5px; }
    .mkt-nav-cta { padding: 9px 13px; font-size: 13.5px; }
    .mkt-brand { font-size: 15px; }
}

@media (max-width: 360px) {
    .mkt-brand span { display: none; }
    .mkt-nav-links a { padding: 7px 7px; font-size: 13px; }
}