/* ============================================================
   ShowCards — site stylesheet  ·  "The Kind Utility" (evolved)
   Your real cards are the art. One blue carries the voice.
   Brand blue #2f73f0 (app icon) · system fonts · light canvas
   with deep-navy drenched moments.
   ============================================================ */

:root {
    /* -- brand blue (one accent) -- */
    --sc-blue: #2f73f0;
    --sc-blue-deep: #1e56c4;
    --sc-blue-bright: #5b93f4;
    --sc-blue-wash: #eaf1fe;
    --sc-blue-wash-2: #dbe8fe;

    /* -- neutrals -- */
    --sc-ink: #0e1729;
    --sc-ink-soft: #4b5565;
    --sc-line: #e5e9f0;
    --sc-canvas: #fbfcfe;
    --sc-surface: #ffffff;
    --sc-surface-alt: #f4f7fc;

    /* -- drenched navy -- */
    --sc-navy: #0b1b3a;
    --sc-navy-soft: #17294f;
    --sc-on-navy: rgba(255, 255, 255, .74);
    --sc-on-navy-strong: #f2f6fd;

    /* -- shape -- */
    --sc-r-sm: 10px;
    --sc-r-md: 14px;
    --sc-r-lg: 20px;
    --sc-r-xl: 28px;
    --sc-r-pill: 999px;
    --sc-radius: var(--sc-r-lg); /* legacy alias */

    /* -- elevation -- */
    --sc-shadow: 0 8px 30px rgba(16, 24, 39, .08);
    --sc-shadow-card: 0 18px 50px -12px rgba(16, 24, 39, .28);
    --sc-shadow-glow: 0 8px 22px rgba(47, 115, 240, .32);

    /* -- rhythm -- */
    --sc-section: clamp(4rem, 8vw, 7rem);

    /* -- motion -- */
    --sc-ease: cubic-bezier(.22, 1, .36, 1);      /* ease-out-quint-ish */
    --sc-ease-soft: cubic-bezier(.4, 0, .2, 1);

    /* -- z-scale -- */
    --z-wall: 0;
    --z-base: 1;
    --z-phone: 2;
    --z-chip: 3;
    --z-header: 50;
    --z-menu: 60;

    --sc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.sc-body {
    margin: 0;
    font-family: var(--sc-font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--sc-ink);
    background: var(--sc-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

img { max-width: 100%; height: auto; }

a { color: var(--sc-blue); text-decoration: none; }
a:hover { color: var(--sc-blue-deep); }

::selection { background: var(--sc-blue-wash-2); color: var(--sc-ink); }

:focus-visible {
    outline: 2px solid var(--sc-blue);
    outline-offset: 2px;
}

h1, h2, h3, h4, h5 {
    margin: 0 0 .5em;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.1;
    text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h5 { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

p { margin: 0 0 1rem; text-wrap: pretty; }

.accent { color: var(--sc-blue); }

.container {
    width: min(1160px, 100% - 2.5rem);
    margin-inline: auto;
}
.container--narrow { width: min(760px, 100% - 2.5rem); }

.section { padding: var(--sc-section) 0; }
.section--alt { background: var(--sc-surface-alt); }

/* Drenched navy band */
.section--navy {
    background: var(--sc-navy);
    color: var(--sc-on-navy);
    background-image:
        radial-gradient(70% 90% at 85% 0%, rgba(91, 147, 244, .18), transparent 60%),
        radial-gradient(60% 80% at 5% 100%, rgba(47, 115, 240, .14), transparent 55%);
}
.section--navy h1,
.section--navy h2,
.section--navy h3 { color: var(--sc-on-navy-strong); }
.section--navy .accent { color: var(--sc-blue-bright); }
.section--navy p { color: var(--sc-on-navy); }

.lede {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    color: var(--sc-ink-soft);
    max-width: 46ch;
}
.section--navy .lede { color: var(--sc-on-navy); }

.sc-visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Kicker ---------- */

.sc-kicker,
.sc-hero__kicker {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: transparent;
    color: var(--sc-ink-soft);
    border: 1px solid var(--sc-line);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .42rem .9rem;
    border-radius: var(--sc-r-pill);
    margin: 0 0 1.2rem;
}
.section--navy .sc-kicker,
.section--navy .sc-hero__kicker {
    background: transparent;
    color: #bcd3fb;
    border-color: rgba(255, 255, 255, .2);
}

/* ---------- Section head ---------- */

.sc-section-head { max-width: 56ch; margin-bottom: 2.8rem; }
.sc-section-head p { color: var(--sc-ink-soft); margin-bottom: 0; }
.sc-section-head--center { margin-inline: auto; text-align: center; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.6rem;
    border-radius: var(--sc-r-pill);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.2;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .18s var(--sc-ease), box-shadow .18s var(--sc-ease),
                background .18s var(--sc-ease), border-color .18s var(--sc-ease),
                color .18s var(--sc-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--sc-blue);
    color: #fff;
    box-shadow: var(--sc-shadow-glow);
}
.btn--primary:hover { background: var(--sc-blue-deep); color: #fff; box-shadow: 0 12px 28px rgba(47, 115, 240, .4); }

.btn--ghost {
    border-color: var(--sc-line);
    color: var(--sc-ink);
    background: var(--sc-surface);
}
.btn--ghost:hover { border-color: var(--sc-blue); color: var(--sc-blue); }

.btn--dark { background: var(--sc-ink); color: #fff; }
.btn--dark:hover { background: var(--sc-navy); color: #fff; }

.btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }

/* On navy: store buttons invert to white */
.section--navy .btn--dark,
.sc-download .btn--dark {
    background: #fff; color: var(--sc-navy);
}
.section--navy .btn--dark:hover,
.sc-download .btn--dark:hover { background: var(--sc-blue-wash); color: var(--sc-navy); }

.btn--ghost-invert {
    background: transparent;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.btn--ghost-invert:hover { border-color: #fff; color: #fff; }

/* ---------- Store badges ---------- */

.ga-badge {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .7rem 1.25rem;
    border-radius: var(--sc-r-md);
    background: var(--sc-ink);
    color: #fff;
    transition: transform .18s var(--sc-ease), box-shadow .18s var(--sc-ease), background .18s var(--sc-ease);
}
.ga-badge:hover { transform: translateY(-2px); background: var(--sc-navy); color: #fff; box-shadow: var(--sc-shadow); }
.ga-badge .bi { font-size: 1.7rem; }
.ga-badge span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.ga-badge small { font-size: .68rem; opacity: .82; letter-spacing: .02em; white-space: nowrap; }
.ga-badge strong { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

.section--navy .ga-badge { background: #fff; color: var(--sc-navy); }
.section--navy .ga-badge:hover { background: var(--sc-blue-wash); }

/* ---------- Skip link ---------- */

.sc-skip {
    position: absolute; left: -999px; top: 0;
    background: var(--sc-blue); color: #fff;
    padding: .6rem 1.1rem; z-index: 200; border-radius: 0 0 var(--sc-r-sm) 0;
}
.sc-skip:focus { left: 0; color: #fff; }

/* ============================================================
   Header / nav / language
   ============================================================ */

.sc-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(251, 252, 254, .85);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s var(--sc-ease-soft), background .2s var(--sc-ease-soft);
}
.sc-header.is-scrolled {
    border-bottom-color: var(--sc-line);
    background: rgba(251, 252, 254, .92);
}

.sc-header__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 70px;
}

.sc-logo {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: -.02em;
    color: var(--sc-ink);
}
.sc-logo img { border-radius: 9px; }
.sc-logo:hover { color: var(--sc-blue); }

.sc-nav { display: flex; align-items: center; gap: 1.5rem; }

.sc-nav__list {
    display: flex; align-items: center; gap: .15rem;
    list-style: none; margin: 0; padding: 0;
}
.sc-nav__link {
    display: inline-block;
    padding: .5rem .85rem;
    border-radius: var(--sc-r-sm);
    color: var(--sc-ink);
    font-weight: 500;
    transition: background .15s var(--sc-ease-soft), color .15s var(--sc-ease-soft);
}
.sc-nav__link:hover { background: var(--sc-surface-alt); color: var(--sc-ink); }
.sc-nav__item.is-active .sc-nav__link { color: var(--sc-blue); font-weight: 600; }

.sc-nav__meta { display: flex; align-items: center; gap: 1rem; }
.sc-nav__cta { padding-block: .6rem; }

.sc-nav__toggle {
    display: none;
    background: none; border: none;
    font-size: 1.7rem; color: var(--sc-ink);
    cursor: pointer; padding: .25rem;
}

/* Nav dropdown (Help menu) */
.sc-nav__dd { position: relative; }
.sc-nav__dd > summary {
    display: inline-flex; align-items: center; gap: .35rem;
    list-style: none; cursor: pointer;
}
.sc-nav__dd > summary::-webkit-details-marker { display: none; }
.sc-nav__dd > summary .bi { font-size: .68rem; transition: transform .15s var(--sc-ease-soft); }
.sc-nav__dd[open] > summary .bi { transform: rotate(180deg); }
.sc-nav__menu {
    position: absolute; top: calc(100% + .5rem); left: -.4rem; z-index: var(--z-menu);
    min-width: 234px; padding: .4rem;
    background: var(--sc-surface); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-md); box-shadow: var(--sc-shadow);
    display: grid; gap: 2px;
}
.sc-nav__menu a {
    display: block; padding: .62rem .75rem; border-radius: var(--sc-r-sm);
    color: var(--sc-ink); font-weight: 500;
    transition: background .12s var(--sc-ease-soft), color .12s var(--sc-ease-soft);
}
.sc-nav__menu a:hover { background: var(--sc-surface-alt); color: var(--sc-ink); }

/* Language switcher */
.sc-lang { position: relative; flex-shrink: 0; }
.sc-lang__summary {
    display: inline-flex; align-items: center; gap: .35rem;
    min-width: 58px; min-height: 42px;
    padding: .45rem .7rem;
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-pill);
    color: var(--sc-ink);
    font-weight: 700; font-size: .86rem; line-height: 1;
    background: var(--sc-surface);
    cursor: pointer; list-style: none;
    transition: border-color .15s var(--sc-ease-soft), background .15s var(--sc-ease-soft), color .15s var(--sc-ease-soft);
}
.sc-lang__summary::-webkit-details-marker { display: none; }
.sc-lang__summary:hover,
.sc-lang[open] .sc-lang__summary {
    border-color: var(--sc-blue); background: var(--sc-blue-wash); color: var(--sc-blue);
}
.sc-lang__summary .bi { font-size: .72rem; transition: transform .15s var(--sc-ease-soft); }
.sc-lang[open] .sc-lang__summary .bi { transform: rotate(180deg); }

.sc-lang__menu {
    position: absolute; top: calc(100% + .5rem); right: 0;
    z-index: var(--z-menu);
    width: min(264px, calc(100vw - 2.5rem));
    max-height: min(440px, calc(100vh - 100px));
    overflow: auto;
    padding: .4rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-md);
    box-shadow: var(--sc-shadow);
}
.sc-lang__option {
    display: grid; grid-template-columns: 1.6rem 1fr; align-items: center; gap: .65rem;
    padding: .58rem .65rem;
    border-radius: var(--sc-r-sm);
    color: var(--sc-ink); font-size: .95rem;
    transition: background .12s var(--sc-ease-soft), color .12s var(--sc-ease-soft);
}
.sc-lang__flag {
    font-size: 1.15rem; line-height: 1;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
.sc-lang__summary .sc-lang__flag { font-size: 1.05rem; }
.sc-lang__option:hover,
.sc-lang__option.is-active { background: var(--sc-blue-wash); color: var(--sc-blue); }

/* ============================================================
   Hero + card-wall (signature)
   ============================================================ */

.ga-hero {
    position: relative;
    padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 6vw, 5.5rem);
    overflow: clip;
}
.ga-hero::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(60% 70% at 78% 8%, rgba(16, 24, 39, .035), transparent 70%);
    pointer-events: none;
}

.ga-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}

.ga-hero__copy h1 { margin-bottom: .5rem; }
.ga-hero__copy .lede { max-width: 40ch; margin-bottom: 1.7rem; }

.ga-hero__actions,
.ga-hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 1.1rem; }

.ga-hero__note { margin: 1rem 0 0; }
.ga-hero__note a {
    display: inline-flex; align-items: center; gap: .4rem; font-weight: 600;
}
.ga-hero__note a .bi { transition: transform .2s var(--sc-ease); }
.ga-hero__note a:hover .bi { transform: translateX(4px); }

/* trust row */
.ga-trust {
    display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
    list-style: none; margin: 1.7rem 0 0; padding: 0;
}
.ga-trust li {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--sc-ink-soft); font-weight: 500; font-size: .95rem;
}
.ga-trust .bi { color: var(--sc-blue); font-size: 1rem; }

/* --- the stage: card-wall behind a real phone --- */
.ga-stage {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
}

.ga-wall {
    position: absolute;
    inset: -8% -6% -10% -4%;
    z-index: var(--z-wall);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(.6rem, 1.2vw, 1rem);
    transform: rotate(-9deg) scale(1.06);
    -webkit-mask-image: radial-gradient(120% 100% at 60% 45%, #000 42%, transparent 78%);
            mask-image: radial-gradient(120% 100% at 60% 45%, #000 42%, transparent 78%);
    pointer-events: none;
}

.sc-tile {
    position: relative;
    /* Every tile is the same card: a strict square, regardless of the
       logo's own shape. */
    aspect-ratio: 1 / 1;
    border-radius: var(--sc-r-md);
    /* the brand's real colour is the card — the logo images carry the same
       background baked in, so tile + image blend into one seamless card */
    background: var(--tile, #1e56c4);
    overflow: hidden;
    box-shadow: var(--sc-shadow-card), inset 0 0 0 1px rgba(16, 24, 39, .06);
    opacity: 0;
    transform: translateY(10px) scale(.96);
    animation: tile-in .7s var(--sc-ease) forwards;
    animation-delay: var(--d, 0s);
}
/* Absolutely-filled image so the logo can never stretch the tile's height —
   the tile owns the 16:10 box; the logo is contained inside its padding. */
.sc-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 12% 15%;
}

@keyframes tile-in {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ga-phone {
    position: relative;
    z-index: var(--z-phone);
    width: clamp(210px, 24vw, 288px);
    filter: drop-shadow(0 30px 55px rgba(11, 27, 58, .32));
    animation: phone-float 6s ease-in-out .8s infinite;
}
.ga-phone img {
    display: block; width: 100%; height: auto;
    border-radius: 30px;
}
@keyframes phone-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* floating chips */
.ga-chip {
    position: absolute; z-index: var(--z-chip);
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-pill);
    font-weight: 600; font-size: .85rem; color: var(--sc-ink);
    box-shadow: var(--sc-shadow);
    animation: chip-float 5s ease-in-out infinite;
}
.ga-chip .bi { color: var(--sc-blue); font-size: 1rem; }
.ga-chip--a { top: 8%; left: -2%; animation-delay: .2s; }
.ga-chip--b { top: 44%; right: -6%; animation-delay: 1.1s; }
.ga-chip--c { bottom: 8%; left: 4%; animation-delay: 1.9s; }
@keyframes chip-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}

/* ============================================================
   Brand marquee (social proof)
   ============================================================ */

.sc-marquee-band {
    padding: clamp(2.2rem, 4vw, 3rem) 0;
    border-block: 1px solid var(--sc-line);
    background: var(--sc-surface);
}
.sc-marquee-band__label {
    text-align: center;
    color: var(--sc-ink-soft);
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 1.6rem;
}
.sc-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sc-marquee__track {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: max-content;
    animation: marquee 55s linear infinite;
}
.sc-marquee:hover .sc-marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.sc-marquee__item {
    flex: 0 0 auto;
    height: 66px;
    width: 118px;
    display: grid;
    place-items: center;
    padding: .55rem .7rem;
    /* brand colour is the card background; logo image sits on its own matching bg */
    background: var(--tile, var(--sc-surface));
    border: 1px solid rgba(16, 24, 39, .08);
    border-radius: var(--sc-r-md);
    box-shadow: 0 2px 6px rgba(16, 24, 39, .06);
}
.sc-marquee__item img {
    max-height: 46px; max-width: 100%; height: auto;
    width: auto; object-fit: contain;
}

/* ============================================================
   Cards / grids / features
   ============================================================ */

.sc-grid { display: grid; gap: 1.3rem; }
.sc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sc-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
    padding: 1.7rem;
    transition: box-shadow .22s var(--sc-ease), transform .22s var(--sc-ease), border-color .22s var(--sc-ease);
}
.sc-card:hover {
    box-shadow: var(--sc-shadow);
    transform: translateY(-3px);
    border-color: var(--sc-blue-wash-2);
}
.sc-card h3 { margin-bottom: .35rem; }
.sc-card p { color: var(--sc-ink-soft); margin-bottom: 0; }
.sc-card .btn { margin-top: 1rem; }

.sc-card__ico {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sc-ink);
    font-size: 1.7rem;
    margin-bottom: .85rem;
}

/* ---------- Steps ---------- */

.sc-step {
    position: relative;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
    padding: 1.7rem;
}
.sc-step h3 { margin-bottom: .35rem; }
.sc-step p { color: var(--sc-ink-soft); margin-bottom: 0; }
.sc-step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--sc-ink);
    color: #fff; font-weight: 800; font-size: 1.05rem;
    margin-bottom: 1.1rem;
}

/* ---------- Showcase phones ---------- */

.sc-showcase__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1rem, 3vw, 2.4rem);
    align-items: end;
    max-width: 860px;
    margin-inline: auto;
}
.sc-showcase__phone { margin: 0; text-align: center; }
.sc-showcase__phone img {
    width: 100%; height: auto;
    border-radius: 26px;
    filter: drop-shadow(0 22px 40px rgba(11, 27, 58, .2));
}
.sc-showcase__phone--lift { transform: translateY(-24px); }
.sc-showcase__phone figcaption {
    margin-top: 1.1rem; font-weight: 600; color: var(--sc-ink);
}

/* ---------- Split (two-column) ---------- */

.sc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: center;
}
.sc-split p { color: var(--sc-ink-soft); }
.section--navy .sc-split p { color: var(--sc-on-navy); }
.sc-split .btn { margin-top: .5rem; }

/* ---------- Checklist ---------- */

.sc-checklist {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .8rem;
}
.sc-checklist li {
    display: flex; align-items: flex-start; gap: .75rem;
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-md);
    padding: 1rem 1.15rem;
    font-weight: 500;
}
.sc-checklist .bi { color: var(--sc-blue); font-size: 1.15rem; margin-top: .1rem; flex-shrink: 0; }

.section--navy .sc-checklist li {
    background: var(--sc-navy-soft);
    border-color: rgba(255, 255, 255, .1);
    color: var(--sc-on-navy-strong);
}
.section--navy .sc-checklist .bi { color: var(--sc-blue-bright); }

/* ============================================================
   Feature rows (features.php)
   ============================================================ */

.sc-feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.sc-feature-row + .sc-feature-row { margin-top: clamp(3.5rem, 7vw, 6rem); }
.sc-feature-row--rev .sc-feature-row__media { order: 2; }
.sc-feature-row__media { text-align: center; }
.sc-feature-row__media img {
    width: min(300px, 80%); height: auto;
    border-radius: 28px;
    filter: drop-shadow(0 24px 48px rgba(11, 27, 58, .22));
}
.sc-feature-row__body h2 { margin-bottom: 1.4rem; }
.sc-feature-row__cards { display: grid; gap: 1rem; }
.sc-feature-row__cards .sc-card { padding: 1.3rem 1.4rem; }
.sc-feature-row__cards h3 { display: flex; align-items: center; gap: .6rem; }

/* ---------- Watch trio + beyond-the-phone (features / index / get-app) ---------- */

.sc-watch-stage {
    position: relative;
    display: flex; justify-content: center; align-items: flex-end;
    gap: 0;
    width: 100%; max-width: 720px; margin-inline: auto;
    padding: clamp(1.8rem, 4.5vw, 3.2rem) clamp(1.2rem, 3vw, 2.4rem);
    background:
        radial-gradient(130% 120% at 50% -10%, rgba(47, 115, 240, .12), rgba(47, 115, 240, 0) 62%),
        var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
}
.sc-watch-stage img {
    width: clamp(152px, 38%, 264px); height: auto; border-radius: 0;
    filter: drop-shadow(0 18px 34px rgba(11, 27, 58, .26));
}
.sc-watch-stage img:nth-child(1) {
    transform: rotate(-8deg) translateY(14px);
    margin-right: clamp(-3.2rem, -7vw, -1.6rem); z-index: 1;
}
.sc-watch-stage img:nth-child(2) {
    width: clamp(192px, 50%, 356px);
    transform: translateY(-14px); z-index: 2;
}
.sc-watch-stage img:nth-child(3) {
    transform: rotate(8deg) translateY(14px);
    margin-left: clamp(-3.2rem, -7vw, -1.6rem); z-index: 1;
}

.sc-beyond {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
}
.sc-beyond__widget { width: min(230px, 62%); }
.sc-beyond__watch { flex: 0 1 640px; margin: 0; text-align: center; }
.sc-beyond__watch figcaption { margin-top: 1.1rem; font-weight: 600; color: var(--sc-ink); }

/* ---------- Highlights (get-app.php) ---------- */

.ga-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.3rem; }
.ga-highlight {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
    padding: 1.7rem;
}
.ga-highlight .bi {
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--sc-ink);
    font-size: 1.7rem; margin-bottom: .85rem;
}
.ga-highlight h3 { margin-bottom: .35rem; }
.ga-highlight p { color: var(--sc-ink-soft); margin-bottom: 0; }

/* ============================================================
   Hero carousel (get-app.php)
   ============================================================ */

.ga-slider { position: relative; display: flex; flex-direction: column; align-items: center; }
.ga-phone[data-ga-track] { animation: none; }
.ga-phone-frame {
    position: relative; z-index: var(--z-phone);
    width: clamp(210px, 24vw, 288px); margin-inline: auto;
    filter: drop-shadow(0 30px 55px rgba(11, 27, 58, .32));
}
.ga-slide {
    position: absolute; inset: 0;
    opacity: 0; transform: translateX(20px);
    transition: opacity .6s var(--sc-ease), transform .6s var(--sc-ease);
    pointer-events: none;
}
.ga-slide.is-active { position: relative; opacity: 1; transform: none; pointer-events: auto; }
.ga-slide img { display: block; width: 100%; border-radius: 30px; }
.ga-caption { margin-top: 1.4rem; text-align: center; max-width: 42ch; margin-inline: auto; }
.ga-caption__title { font-weight: 700; font-size: 1.2rem; margin-bottom: .3rem; }
.ga-caption__text { color: var(--sc-ink-soft); }
.ga-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.3rem; }
.ga-arrow {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1.5px solid var(--sc-line); background: var(--sc-surface);
    color: var(--sc-ink); cursor: pointer;
    transition: border-color .15s var(--sc-ease-soft), color .15s var(--sc-ease-soft), transform .15s var(--sc-ease);
}
.ga-arrow:hover { border-color: var(--sc-blue); color: var(--sc-blue); transform: translateY(-2px); }
.ga-dots { display: flex; gap: .4rem; }
.ga-dot {
    width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0;
    background: var(--sc-line); cursor: pointer;
    transition: background .2s var(--sc-ease-soft), width .2s var(--sc-ease);
}
.ga-dot.is-active { background: var(--sc-blue); width: 24px; border-radius: var(--sc-r-pill); }

/* ============================================================
   Simple page hero (inner pages)
   ============================================================ */

.sc-hero {
    position: relative;
    padding: clamp(3.5rem, 6vw, 5rem) 0 clamp(2.5rem, 4vw, 3.2rem);
    background:
        radial-gradient(50% 70% at 85% 0%, rgba(47, 115, 240, .08), transparent 70%);
}
.sc-hero--page { padding: clamp(3rem, 5vw, 4rem) 0 clamp(2rem, 3vw, 2.6rem); }
.sc-hero__inner { max-width: 60ch; }
.sc-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.sc-backlink {
    display: inline-flex; align-items: center; gap: .45rem;
    font-weight: 600; color: var(--sc-ink-soft); margin-bottom: 1.2rem;
}
.sc-backlink:hover { color: var(--sc-blue); }
.sc-backlink .bi { transition: transform .2s var(--sc-ease); }
.sc-backlink:hover .bi { transform: translateX(-3px); }

/* ============================================================
   Help center
   ============================================================ */

.sc-help-search { position: relative; max-width: 560px; margin-top: 1.8rem; }
.sc-help-search .bi-search {
    position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%);
    color: var(--sc-ink-soft);
}
.sc-help-search input {
    width: 100%;
    padding: 1rem 1.3rem 1rem 3rem;
    font: inherit; color: var(--sc-ink);
    background: var(--sc-surface);
    border: 1.5px solid var(--sc-line);
    border-radius: var(--sc-r-pill);
    outline: none;
    box-shadow: var(--sc-shadow);
    transition: border-color .15s var(--sc-ease-soft), box-shadow .15s var(--sc-ease-soft);
}
.sc-help-search input::placeholder { color: var(--sc-ink-soft); }
.sc-help-search input:focus { border-color: var(--sc-blue); box-shadow: 0 0 0 4px rgba(47, 115, 240, .14); }

.sc-card--link { display: block; color: inherit; }
.sc-card--link:hover { color: inherit; }
.sc-card--link h3 { color: var(--sc-ink); margin-bottom: .3rem; }
.sc-card--link:hover h3 { color: var(--sc-blue); }
.sc-card--link p { color: var(--sc-ink-soft); }

.sc-help-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.3rem; }
.sc-help-cat {
    background: var(--sc-surface); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg); padding: 1.7rem;
}
.sc-help-cat__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.1rem; }
.sc-help-cat__head h3 { margin-bottom: .2rem; }
.sc-help-cat__head p { margin: 0; color: var(--sc-ink-soft); font-size: .95rem; }
.sc-help-cat__head .sc-card__ico { margin-bottom: 0; flex-shrink: 0; }
.sc-help-cat__list { list-style: none; margin: 0; padding: 0; }
.sc-help-cat__list a {
    display: flex; align-items: center; gap: .7rem;
    padding: .7rem .65rem; border-radius: var(--sc-r-sm);
    color: var(--sc-ink); font-weight: 500;
    transition: background .12s var(--sc-ease-soft), color .12s var(--sc-ease-soft);
}
.sc-help-cat__list a:hover { background: var(--sc-blue-wash); color: var(--sc-blue); }
.sc-help-cat__list a .bi-file-text { color: var(--sc-ink-soft); }
.sc-help-cat__list a:hover .bi-file-text { color: var(--sc-blue); }
.sc-help-cat__list a span { flex: 1; }
.sc-help-cat__list a .bi-arrow-right { opacity: 0; transition: opacity .15s var(--sc-ease-soft), transform .15s var(--sc-ease); }
.sc-help-cat__list a:hover .bi-arrow-right { opacity: 1; transform: translateX(2px); }

.sc-help-empty { text-align: center; color: var(--sc-ink-soft); padding: 2rem 0; }
.sc-help-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.3rem; }
.sc-help-contact {
    background: var(--sc-surface-alt);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
    padding: 1.8rem; text-align: center; margin-top: 2.5rem;
}
.sc-help-contact h2 { font-size: 1.4rem; }

/* ============================================================
   FAQ
   ============================================================ */

.sc-faq { display: grid; gap: .8rem; max-width: 760px; }

/* FAQ two-column layout: sticky intro/CTA rail + accordion */
.sc-faq-grid {
    display: grid;
    grid-template-columns: minmax(290px, 360px) 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.sc-faq-grid .sc-faq { max-width: none; }
.sc-faq-aside { position: sticky; top: 92px; }
.sc-faq-aside h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: .55rem; }
.sc-faq-aside .lede { margin-bottom: 1.9rem; }

.sc-faq-cta {
    background: var(--sc-navy);
    color: var(--sc-on-navy);
    border-radius: var(--sc-r-lg);
    padding: 1.7rem;
    background-image: radial-gradient(85% 100% at 100% 0%, rgba(91, 147, 244, .22), transparent 60%);
}
.sc-faq-cta h3 { color: var(--sc-on-navy-strong); margin-bottom: .4rem; }
.sc-faq-cta p { color: var(--sc-on-navy); margin: 0 0 1.3rem; font-size: .98rem; }
.sc-faq-cta .btn { width: 100%; }
.sc-faq-cta__more {
    display: inline-flex; align-items: center; gap: .45rem;
    margin-top: 1.1rem; color: #bcd3fb; font-weight: 600; font-size: .95rem;
}
.sc-faq-cta__more:hover { color: #fff; }
.sc-faq-cta__more .bi { transition: transform .2s var(--sc-ease); }
.sc-faq-cta__more:hover .bi { transform: translateX(3px); }

@media (max-width: 900px) {
    .sc-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
    .sc-faq-aside { position: static; }
}

/* ---- Lead layout: a sticky intro rail + content column (support, contact) ---- */
.sc-lead-grid {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.sc-lead-aside { position: sticky; top: 92px; }
.sc-lead-aside h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); margin-bottom: .55rem; }
.sc-lead-aside .lede { margin-bottom: 1.9rem; }
.sc-lead-grid .sc-form-wrap { max-width: none; }

.sc-lead-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.05rem; }
.sc-lead-points li { display: flex; align-items: flex-start; gap: .8rem; color: var(--sc-ink-soft); }
.sc-lead-points .bi { color: var(--sc-blue); font-size: 1.15rem; margin-top: .15rem; flex-shrink: 0; }
.sc-lead-points a { font-weight: 600; }

/* support option rows */
.sc-support-list { display: grid; gap: 1rem; }
.sc-support-row {
    display: flex; gap: 1.2rem; align-items: flex-start;
    background: var(--sc-surface); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg); padding: 1.5rem 1.6rem; color: inherit;
    transition: box-shadow .22s var(--sc-ease), transform .22s var(--sc-ease), border-color .22s var(--sc-ease);
}
.sc-support-row:hover { box-shadow: var(--sc-shadow); transform: translateY(-2px); border-color: var(--sc-blue-wash-2); }
.sc-support-row__ico {
    display: grid; place-items: center; flex-shrink: 0;
    width: 48px; height: 48px; border-radius: var(--sc-r-md);
    background: var(--sc-surface-alt); color: var(--sc-ink); font-size: 1.45rem;
}
.sc-support-row h3 { margin-bottom: .3rem; }
.sc-support-row p { color: var(--sc-ink-soft); margin: 0 0 .7rem; }
.sc-support-row__link { display: inline-flex; align-items: center; gap: .4rem; color: var(--sc-blue); font-weight: 600; }
.sc-support-row__link .bi { transition: transform .2s var(--sc-ease); }
.sc-support-row:hover .sc-support-row__link .bi { transform: translateX(3px); }

/* centered hero variant (help search) */
.sc-hero__inner--center { max-width: 680px; margin-inline: auto; text-align: center; }
.sc-hero__inner--center .lede { margin-inline: auto; }
.sc-hero__inner--center .sc-help-search { margin-inline: auto; }

/* ---- Decrypt-backup tool (client-side) ---- */
.sc-drop {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .5rem; text-align: center;
    padding: 1.9rem 1.4rem;
    border: 1.5px dashed var(--sc-line);
    border-radius: var(--sc-r-md);
    background: var(--sc-surface-alt);
    color: var(--sc-ink-soft);
    cursor: pointer;
    transition: border-color .15s var(--sc-ease-soft), background .15s var(--sc-ease-soft);
}
.sc-drop:hover, .sc-drop.is-drag { border-color: var(--sc-blue); background: var(--sc-blue-wash); }
.sc-drop input[type="file"] { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.sc-drop .bi { font-size: 1.8rem; color: var(--sc-blue); }
.sc-drop__hint { font-size: .95rem; }
.sc-drop__file { font-weight: 600; color: var(--sc-ink); word-break: break-all; }

.sc-pass { position: relative; }
.sc-pass input { padding-right: 3rem; }
.sc-pass__toggle {
    position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
    display: inline-flex; background: none; border: 0; color: var(--sc-ink-soft);
    cursor: pointer; padding: .5rem; border-radius: var(--sc-r-sm); font-size: 1.15rem;
}
.sc-pass__toggle:hover { color: var(--sc-blue); }

.sc-check { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; color: var(--sc-ink-soft); cursor: pointer; }
.sc-check input { margin-top: .15rem; width: 1.05rem; height: 1.05rem; accent-color: var(--sc-blue); flex-shrink: 0; }

.sc-decrypt-result { display: none; margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--sc-line); }
.sc-decrypt-result.is-shown { display: block; }
.sc-decrypt-result__head { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; color: #1a7f4b; margin-bottom: 1.1rem; }
.sc-decrypt-result__head .bi { font-size: 1.35rem; }
.sc-cardlist { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .5rem; max-height: 320px; overflow: auto; }
.sc-cardlist li { display: flex; align-items: center; gap: .75rem; padding: .5rem .6rem; border: 1px solid var(--sc-line); border-radius: var(--sc-r-md); }
.sc-cardlist__logo {
    width: 36px; height: 36px; border-radius: 7px; flex-shrink: 0;
    overflow: hidden; box-shadow: inset 0 0 0 1px rgba(16, 24, 39, .12);
    display: grid; place-items: center;
}
.sc-cardlist__logo img { max-width: 80%; max-height: 80%; object-fit: contain; display: block; }
.sc-cardlist__initial { font-weight: 800; font-size: 1.05rem; line-height: 1; }
.sc-cardlist__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.sc-cardlist__name { font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-cardlist__label { font-size: .82rem; color: var(--sc-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-cardlist__fmt { font-size: .78rem; color: var(--sc-ink-soft); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; flex-shrink: 0; }

.sc-export-label { font-weight: 600; font-size: .95rem; margin: 0 0 .7rem; }
.sc-export-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.sc-export-actions .btn { flex: 1 1 auto; min-width: 130px; }

.sc-tool-note { display: flex; align-items: flex-start; gap: .55rem; font-size: .85rem; color: var(--sc-ink-soft); margin: 1.2rem 0 0; }
.sc-tool-note .bi { color: var(--sc-blue); margin-top: .1rem; flex-shrink: 0; }

@media (max-width: 900px) {
    .sc-lead-grid { grid-template-columns: 1fr; gap: 2rem; }
    .sc-lead-aside { position: static; }
}
.sc-faq__item {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-md);
    padding: 0 1.35rem;
    transition: border-color .15s var(--sc-ease-soft), box-shadow .15s var(--sc-ease-soft);
}
.sc-faq__item[open] { border-color: var(--sc-blue-wash-2); box-shadow: var(--sc-shadow); }
.sc-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 0; font-weight: 600; cursor: pointer; list-style: none;
}
.sc-faq__item summary::-webkit-details-marker { display: none; }
.sc-faq__item summary .bi { transition: transform .2s var(--sc-ease); color: var(--sc-blue); flex-shrink: 0; }
.sc-faq__item[open] summary .bi { transform: rotate(180deg); }
.sc-faq__item p { margin: 0 0 1.15rem; color: var(--sc-ink-soft); }

/* ============================================================
   Prose (legal, articles)
   ============================================================ */

.sc-prose { max-width: 68ch; }
.sc-prose h2 { font-size: 1.4rem; margin-top: 2.4rem; }
.sc-prose h2:first-child { margin-top: 0; }
.sc-prose p { color: var(--sc-ink-soft); }
.sc-prose ul, .sc-prose ol { color: var(--sc-ink-soft); padding-left: 1.2rem; }
.sc-prose li { margin-bottom: .5rem; }
.sc-prose__meta { font-size: .9rem; margin-top: 2.5rem; color: var(--sc-ink-soft); }

/* ============================================================
   Forms (contact.php)
   ============================================================ */

.sc-form-wrap {
    background: var(--sc-surface);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-xl);
    padding: clamp(1.6rem, 3vw, 2.4rem);
    box-shadow: var(--sc-shadow);
    max-width: 640px;
}
.sc-form { display: grid; gap: 1.2rem; }
.sc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.sc-field { display: grid; gap: .4rem; }
.sc-field__label { font-weight: 600; font-size: .95rem; }
.sc-field__req { color: var(--sc-blue); }
.sc-field input,
.sc-field select,
.sc-field textarea {
    width: 100%; padding: .8rem 1rem; font: inherit; color: var(--sc-ink);
    background: var(--sc-surface);
    border: 1.5px solid var(--sc-line);
    border-radius: var(--sc-r-md);
    outline: none;
    transition: border-color .15s var(--sc-ease-soft), box-shadow .15s var(--sc-ease-soft);
}
.sc-field textarea { min-height: 140px; resize: vertical; }
.sc-field input:focus,
.sc-field select:focus,
.sc-field textarea:focus { border-color: var(--sc-blue); box-shadow: 0 0 0 4px rgba(47, 115, 240, .14); }
.sc-field input::placeholder,
.sc-field textarea::placeholder { color: var(--sc-ink-soft); }
/* topic field-groups are <fieldset>s toggled by [hidden]; reset the fieldset
   chrome and only lay out the visible one (an explicit display would defeat
   the hidden attribute) */
.sc-topic { border: 0; margin: 0; padding: 0; min-width: 0; }
.sc-topic:not([hidden]) { display: grid; gap: 1.2rem; }
.sc-form__actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.sc-form__status { font-weight: 600; }
.sc-form__status.is-ok { color: #1a7f4b; }
.sc-form__status.is-error { color: #c0392b; }
.sc-form__legal { font-size: .85rem; color: var(--sc-ink-soft); }
.sc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Download band + footer (drenched navy)
   ============================================================ */

.sc-download {
    background: var(--sc-navy);
    color: var(--sc-on-navy);
    padding: clamp(3rem, 6vw, 5rem) 0;
    background-image:
        radial-gradient(60% 90% at 85% 0%, rgba(91, 147, 244, .2), transparent 60%),
        radial-gradient(50% 80% at 8% 100%, rgba(47, 115, 240, .16), transparent 55%);
}
.sc-download__inner { text-align: center; max-width: 620px; margin-inline: auto; }
.sc-download__inner img { border-radius: 16px; margin-bottom: 1.2rem; }
.sc-download__inner h2 { color: var(--sc-on-navy-strong); margin-bottom: .5rem; }
.sc-download__inner p { color: var(--sc-on-navy); margin-bottom: 1.6rem; }
.sc-download__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.sc-footer {
    background: var(--sc-navy);
    color: var(--sc-on-navy);
    padding: clamp(3rem, 5vw, 4rem) 0 2rem;
}
.sc-footer__top {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
    gap: 2rem;
    padding-bottom: 2.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.sc-footer__logo {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 800; font-size: 1.15rem; color: var(--sc-on-navy-strong);
}
.sc-footer__logo img { border-radius: 8px; }
.sc-footer__lede { margin-top: .9rem; color: var(--sc-on-navy); font-size: .95rem; max-width: 34ch; }
.sc-footer h5 { color: var(--sc-on-navy-strong); margin-bottom: 1rem; }
.sc-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sc-footer a { color: var(--sc-on-navy); }
.sc-footer a:hover { color: #fff; }
.sc-footer__contact li { display: flex; align-items: center; gap: .55rem; }
.sc-footer__contact .bi { color: var(--sc-blue-bright); }

.sc-footer__bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-top: 1.6rem; color: var(--sc-on-navy); font-size: .9rem;
}
/* compact footer language selector (dropup) */
.sc-lang--up .sc-lang__menu { top: auto; bottom: calc(100% + .5rem); }
.sc-lang--footer .sc-lang__summary {
    min-width: 0;
    background: transparent;
    border-color: rgba(255, 255, 255, .2);
    color: var(--sc-on-navy-strong);
    font-weight: 600;
}
.sc-lang--footer .sc-lang__summary:hover,
.sc-lang--footer[open] .sc-lang__summary {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}
/* the menu is a light popover on the dark footer — keep option labels dark
   (the footer's translucent-white `a` colour would otherwise hide them) */
.sc-footer .sc-lang__option { color: var(--sc-ink); }
.sc-footer .sc-lang__option:hover,
.sc-footer .sc-lang__option.is-active { color: var(--sc-blue); }

/* ============================================================
   Reveal animation
   ============================================================ */

/* Reveal enhances an already-visible default: the hidden state only applies
   when JS is present (html.sc-js), so no-JS clients, crawlers and headless
   renderers always get the content, never a blank section. */
.sc-js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--sc-ease), transform .6s var(--sc-ease);
}
.sc-js [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 960px) {
    .ga-hero__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ga-stage { min-height: 460px; }
    .sc-feature-row { grid-template-columns: 1fr; gap: 2rem; }
    .sc-feature-row--rev .sc-feature-row__media { order: 0; }
    .sc-split { grid-template-columns: 1fr; }
    .sc-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .sc-grid--3, .sc-grid--2 { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .sc-nav {
        position: fixed;
        inset: 70px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--sc-surface);
        border-bottom: 1px solid var(--sc-line);
        box-shadow: var(--sc-shadow);
        padding: .6rem 1.25rem 1.1rem;
        transform: translateY(-120%);
        transition: transform .3s var(--sc-ease);
        max-height: calc(100vh - 70px);
        overflow: auto;
    }
    .sc-header.is-open .sc-nav { transform: translateY(0); }
    .sc-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; }
    .sc-nav__link { display: block; padding: .8rem .6rem; border-radius: var(--sc-r-sm); }
    .sc-nav__meta { flex-direction: column; align-items: stretch; gap: .6rem; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--sc-line); }
    .sc-nav__toggle { display: inline-flex; }
    .sc-nav__cta { flex: 0 0 auto; justify-content: center; }
    .sc-nav__dd > summary { display: flex; justify-content: space-between; padding: .8rem .6rem; border-radius: var(--sc-r-sm); }
    .sc-nav__menu { position: static; min-width: 0; padding: 0 0 .3rem .9rem; background: transparent; border: none; box-shadow: none; }
    /* Language switcher flows inside the mobile panel instead of overlaying the nav. */
    .sc-lang { width: 100%; }
    .sc-lang__summary { width: 100%; border-radius: var(--sc-r-sm); }
    .sc-lang__summary .bi { margin-left: auto; }
    .sc-lang__menu { position: static; width: 100%; max-height: 50vh; margin-top: .4rem; box-shadow: none; }
}

@media (max-width: 720px) {
    .sc-showcase__row { grid-template-columns: 1fr; max-width: 280px; }
    .sc-showcase__phone--lift { transform: none; }
    .sc-footer__top { grid-template-columns: 1fr 1fr; }
    .sc-footer__top > :first-child { grid-column: 1 / -1; }
    .sc-form__row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .sc-footer__top { grid-template-columns: 1fr; }
    .ga-chip--b { right: -2%; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
    .sc-tile { opacity: 1; transform: none; }
    .ga-phone, .ga-chip { animation: none; }
    .sc-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
    .sc-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ==========================================================================
   Site features: desktop QR, language-suggest banner, device-aware badges
   ========================================================================== */

/* Desktop-only install QR (revealed by site.js once platform is known). */
.sc-qr { display: none; }
body[data-sc-platform="desktop"] .sc-qr {
    display: flex; align-items: center; gap: 1rem;
    margin-top: 1.4rem; padding: .9rem 1.1rem;
    max-width: 26rem;
    background: var(--sc-surface); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
}
.sc-qr img {
    width: 96px; height: 96px; flex: 0 0 auto;
    padding: 6px; background: #fff; border-radius: 10px;
}
.sc-qr__hint { font-size: .92rem; color: var(--sc-ink-soft, #4a5568); line-height: 1.35; }

/* De-emphasise the non-matching store badge (matching one is moved first by JS). */
body[data-sc-platform="ios"] [data-sc-badges] [data-store="google"],
body[data-sc-platform="android"] [data-sc-badges] [data-store="apple"] { opacity: .62; }

/* Language-suggestion bar (fixed, bottom, unobtrusive). */
.sc-langsuggest {
    position: fixed; z-index: 60; left: 50%; bottom: 1rem; transform: translateX(-50%);
    display: flex; align-items: center; gap: .85rem; flex-wrap: wrap;
    max-width: calc(100vw - 2rem);
    padding: .7rem .8rem .7rem 1.1rem;
    background: var(--sc-ink, #0b1b3a); color: #fff;
    border-radius: 999px; box-shadow: 0 12px 34px -10px rgba(11, 27, 58, .5);
    font-size: .95rem;
}
.sc-langsuggest[hidden] { display: none; }
.sc-langsuggest__text { opacity: .9; }
.sc-langsuggest__go {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .4rem .85rem; border-radius: 999px;
    background: var(--sc-blue); color: #fff; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.sc-langsuggest__go:hover { filter: brightness(1.06); }
.sc-langsuggest__x {
    appearance: none; background: transparent; border: 0; cursor: pointer;
    color: #fff; opacity: .7; font: inherit; padding: .4rem .6rem;
}
.sc-langsuggest__x:hover { opacity: 1; }
@media (max-width: 30rem) {
    .sc-langsuggest { left: 1rem; right: 1rem; transform: none; max-width: none; justify-content: space-between; }
}

/* Star-rating social proof (renders only when a real rating is configured). */
.sc-rating { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1rem; flex-wrap: wrap; }
.sc-rating__stars { color: #f5a623; font-size: 1.05rem; line-height: 1; display: inline-flex; gap: .1rem; }
.sc-rating__text { color: var(--sc-ink-soft); font-size: .95rem; }
.sc-rating__text strong { color: var(--sc-ink); }
.section--navy .sc-rating__text { color: var(--sc-on-navy); }
.section--navy .sc-rating__text strong { color: #fff; }

/* ==========================================================================
   Brand directory + per-brand pages
   ========================================================================== */
.sc-brandsearch { max-width: 720px; margin: 0 auto 2.5rem; }
.sc-brandsearch__row { display: flex; gap: .8rem; flex-wrap: wrap; }
.sc-brandsearch__field {
    flex: 1 1 16rem; display: flex; align-items: center; gap: .6rem;
    padding: .8rem 1.1rem; background: var(--sc-surface);
    border: 1px solid var(--sc-line); border-radius: var(--sc-r-pill);
}
.sc-brandsearch__field .bi { color: var(--sc-ink-soft); font-size: 1.1rem; }
.sc-brandsearch__field input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--sc-ink); }
.sc-brandsearch__region {
    flex: 0 0 auto; padding: .8rem 1rem; font: inherit; color: var(--sc-ink);
    background: var(--sc-surface); border: 1px solid var(--sc-line); border-radius: var(--sc-r-pill);
}
.sc-brandsearch__count { margin: .8rem .2rem 0; color: var(--sc-ink-soft); font-size: .92rem; min-height: 1.2em; }

/* Four per row, fixed. It used to be auto-fill from 150px, which packed seven narrow tiles into
   a wide window and left barely 70px for the name: that is what produced "BabyO..." and
   "Vertba...", an ellipsis in the middle of a short word, which reads as damage rather than as
   a long name. Four columns give every tile room for its name at any window width. */
.sc-brandgrid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .8rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) { .sc-brandgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px) { .sc-brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .sc-brandgrid { grid-template-columns: 1fr; } }
.sc-brandgrid__item[hidden] { display: none; }
/* The card is the app's wallet tile with a caption under it, not a row with a thumbnail:
   the tile is what someone recognises, so it gets the space and sits dead centre. */
.sc-brandtile {
    display: flex; flex-direction: column; gap: .6rem;
    padding: .7rem; height: 100%; text-align: center;
    background: var(--sc-surface); border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-md); color: var(--sc-ink);
    transition: transform .15s var(--sc-ease), box-shadow .15s var(--sc-ease), border-color .15s var(--sc-ease);
}
.sc-brandtile:hover { transform: translateY(-2px); border-color: var(--sc-blue); box-shadow: var(--sc-shadow); color: var(--sc-ink); }
/* 1.62 and the 8% inset are the app's own numbers (CardTileView / CardTile), so a brand looks
   here the way it will look in the wallet. The rounding is a percentage pair rather than a
   radius in pixels, because a single value on a non-square box gives an oval corner.
   The swatch colour is set inline and matters: the image already carries the same background,
   so its edges disappear into the tile instead of drawing a second rectangle. */
.sc-brandtile__logo {
    /* Niet de volle kaartbreedte: een randje lucht eromheen laat de tegel een tegel zijn in
       plaats van de kaart zelf. De verhouding en de 8% marge blijven die van de app. */
    width: 80%; margin-inline: auto;
    aspect-ratio: 1.62; padding: 8%;
    border-radius: 12% / 19.5%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: var(--sc-surface-alt);
}
.sc-brandtile__logo img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; display: block; margin: auto;
}
.sc-brandtile__logo .bi { color: #fff; font-size: 1.4rem; }
/* Two lines, then an ellipsis at the END of the second, not mid-word. Names run from "Etos"
   to "Du Pareil Au Même", so a single line either truncates half of them or forces every tile
   wide enough for the longest. `margin-top:auto` keeps the caption on the bottom edge, so the
   tiles in a row line up even when one name wraps and its neighbour does not. */
.sc-brandtile__name {
    margin-top: auto; font-size: .92rem; font-weight: 600; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
}
.sc-brands-more { text-align: center; margin-top: 1.6rem; }
.sc-brands-empty { text-align: center; color: var(--sc-ink-soft); margin-top: 2rem; }

/* Per-brand page */
.sc-crumbs { display: flex; align-items: center; gap: .5rem; color: var(--sc-ink-soft); font-size: .9rem; margin-bottom: 1.6rem; }
.sc-crumbs .bi { font-size: .8rem; }
.sc-brandpage__head { display: flex; gap: 1.4rem; align-items: flex-start; flex-wrap: wrap; }
/* Dezelfde tegel als in de catalogus, alleen groter: 1.62 met 8% marge, de maten uit de app.
   Het was een vierkant van 104px, en dan staat een merk op zijn eigen pagina in een andere
   vorm dan in het overzicht ernaast en dan in de portemonnee waar het uiteindelijk om gaat. */
/* De vaste maat staat op de wikkel en niet op de tegel zelf. Procentuele padding rekent
   tegen de breedte van het OMSLUITENDE blok en niet tegen het element: met de 180px op de
   tegel kreeg hij 8% van de hele tekstkolom mee, dus 58px marge in plaats van 14, en het
   logo werd platgedrukt. Zo is de tegel altijd 100% van zijn eigen vak en betekent 8% ook
   werkelijk 8%. */
.sc-brandpage__logowrap { flex: 0 0 auto; width: 180px; }
.sc-brandpage__logo {
    width: 100%; aspect-ratio: 1.62; padding: 8%;
    border-radius: 12% / 19.5%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; background: var(--sc-surface-alt);
}
.sc-brandpage__logo img {
    max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; display: block; margin: auto;
}
.sc-brandpage__logo .bi { color: #fff; font-size: 2rem; }
.sc-brandpage__head > div { flex: 1 1 20rem; }
.sc-brandpage__site {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: .2rem 0 1.1rem; font-weight: 600; font-size: .95rem;
}
.sc-brandpage__site .bi { font-size: .95rem; }
.sc-brandpage__facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 2.5rem; }
.sc-brandpage__back { margin-top: 2.2rem; }

/* ==========================================================================
   Changelog
   ========================================================================== */
.sc-changelog__rss { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }
.sc-changelog__list { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.sc-changelog__entry { padding: 1.6rem 0; border-top: 1px solid var(--sc-line); }
.sc-changelog__entry:first-child { border-top: 0; }
.sc-changelog__meta { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: .8rem; }
.sc-changelog__ver { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .6rem; }
.sc-changelog__badge {
    font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #fff; background: var(--sc-blue); padding: .2rem .55rem; border-radius: 999px;
}
.sc-changelog__meta time { color: var(--sc-ink-soft); font-size: .92rem; }
.sc-changelog__items { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.sc-changelog__items li { color: var(--sc-ink-soft); }
.sc-changelog__cta { margin-top: 3rem; }

/* ==========================================================================
   Press / brand kit
   ========================================================================== */
.sc-press h2 { margin-top: 2.6rem; }
.sc-press__about p { color: var(--sc-ink-soft); }
.sc-press__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.sc-press__facts li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sc-line); }
.sc-press__facts span { color: var(--sc-ink-soft); }
.sc-press__assets { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sc-press__asset { display: flex; align-items: center; gap: .9rem; padding: 1rem; border: 1px solid var(--sc-line); border-radius: var(--sc-r-md); background: var(--sc-surface); color: var(--sc-ink); }
.sc-press__asset:hover { border-color: var(--sc-blue); color: var(--sc-ink); }
.sc-press__asset span:last-child { display: flex; flex-direction: column; }
.sc-press__asset small { color: var(--sc-ink-soft); font-size: .82rem; }
.sc-press__thumb { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; background: var(--sc-surface-alt); border-radius: 12px; overflow: hidden; }
.sc-press__thumb img { width: 100%; height: 100%; object-fit: contain; }
.sc-press__thumb--wide { width: 96px; }
.sc-press__colors { display: flex; gap: 1rem; flex-wrap: wrap; }
.sc-press__swatch { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border: 1px solid var(--sc-line); border-radius: var(--sc-r-md); }
.sc-press__swatch span { width: 26px; height: 26px; border-radius: 7px; display: inline-block; }
.sc-press__swatch code { color: var(--sc-ink-soft); }
.sc-press__shots { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sc-press__shot { text-align: center; color: var(--sc-ink-soft); font-size: .88rem; }
.sc-press__shot img { border-radius: 14px; box-shadow: var(--sc-shadow); margin-bottom: .5rem; }

/* ==========================================================================
   Compare + Guides
   ========================================================================== */
.sc-compare__points { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-top: 2.5rem; }
.sc-compare__migrate { margin-top: 2.6rem; }
.sc-compare__back, .sc-guide__back { margin-top: 2.2rem; }
.sc-compare-hub__grid, .sc-guides-hub__grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2.5rem; }
.sc-compare-hub__card, .sc-guides-hub__card {
    display: block; padding: 1.6rem; border: 1px solid var(--sc-line); border-radius: var(--sc-r-lg);
    background: var(--sc-surface); color: var(--sc-ink);
    transition: transform .15s var(--sc-ease), box-shadow .15s var(--sc-ease), border-color .15s var(--sc-ease);
}
.sc-compare-hub__card:hover, .sc-guides-hub__card:hover { transform: translateY(-3px); border-color: var(--sc-blue); box-shadow: var(--sc-shadow); color: var(--sc-ink); }
.sc-compare-hub__card p, .sc-guides-hub__card p { color: var(--sc-ink-soft); }
.sc-compare-hub__go, .sc-guides-hub__go { display: inline-flex; align-items: center; gap: .4rem; color: var(--sc-blue); font-weight: 600; }
.sc-guide__body { margin-top: 1rem; }
.sc-guide__body h2 { margin-top: 2rem; font-size: 1.3rem; }
.sc-guide__body p { color: var(--sc-ink-soft); }
.sc-guide__body ul { color: var(--sc-ink-soft); padding-left: 1.2rem; }
.sc-guide__cta { margin-top: 2.8rem; }

/* Press: screenshot section headings + zip hint */
.sc-press__shots-title { margin-top: 2rem; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.sc-press__shots-title .bi { color: var(--sc-ink-soft); }
.sc-press__ziphint { display: block; margin-top: .6rem; color: var(--sc-ink-soft); font-size: .9rem; }
.sc-press__shot--watch img { border-radius: 20px; }