/* ═══════════════════════════════════════════════
   TesterPilot Landing — design system
   Tokens mirrored from testerpilot.com (home-v2)
   ═══════════════════════════════════════════════ */

:root {
    --ink:      #0A1017;
    --slate:    #55616D;
    --faint:    #8A94A0;
    --paper:    #FFFFFF;
    --mist:     #F5F7F8;
    --line:     #E6EAEE;
    --go:       #2563EB;
    --go-deep:  #1D4ED8;
    --go-tint:  #EFF6FF;
    --star:     #F0A50A;

    --font-display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

    --nav-h: 64px;
    --radius: 14px;
    --container: 1140px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.v2-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.v2-mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.v2-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--go);
    margin-bottom: 14px;
}
.v2-h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.2vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 14px;
}
.v2-lead { color: var(--slate); font-size: 17px; max-width: 640px; margin: 0 auto; }
.v2-link { color: var(--go); font-weight: 600; }
.v2-link:hover { color: var(--go-deep); text-decoration: underline; }
.v2-tagline { color: var(--faint); font-size: 11px; margin-top: 12px; }

/* ── Buttons ── */
.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--radius);
    padding: 11px 20px;
    border: 1.5px solid transparent;
    transition: all .18s ease;
    white-space: nowrap;
}
.v2-btn--sm { padding: 8px 14px; font-size: 13.5px; border-radius: 10px; }
.v2-btn--lg { padding: 14px 26px; font-size: 16px; }
.v2-btn--block { width: 100%; }
.v2-btn--primary { background: var(--go); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 14px rgba(37,99,235,.25); }
.v2-btn--primary:hover { background: var(--go-deep); transform: translateY(-1px); }
.v2-btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line); }
.v2-btn--ghost:hover { border-color: var(--ink); }

/* ── Stars ── */
.v2-stars { color: var(--star); letter-spacing: 2px; font-size: 15px; }
.v2-stars--sm { font-size: 12px; letter-spacing: 1px; }

/* ═══════════ NAV (floating pill) ═══════════ */
.nav {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    background: transparent;
}
.nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: var(--container);
    height: var(--nav-h);
    padding: 0 8px 0 24px;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 8px 24px -12px rgba(10,16,23,.14);
}
.nav__logo { display: flex; align-items: center; gap: 10px; flex: none; }
.nav__logo-mark {
    width: 34px; height: 34px;
    background: transparent;
    object-fit: contain;
    border-radius: 9px;
}
/* The official wordmark is ~5.9:1, so it gets its own wide slot instead of being
   squeezed into the square mark slot. */
.nav__logo-wordmark { height: 22px; width: auto; object-fit: contain; }
.nav__links { display: flex; gap: 22px; flex: none; }
.nav__links a { font-size: 14px; font-weight: 500; color: var(--slate); white-space: nowrap; }
.nav__links a:hover { color: var(--ink); }
.nav__actions { display: flex; gap: 10px; align-items: center; flex: none; }
.nav__burger { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: 6px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; }
.nav__mobile {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    width: min(992px, 100%);
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 16px 24px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px -12px rgba(10,16,23,.14);
}
.nav__mobile.open { display: flex; }
.nav__mobile a { padding: 10px 0; font-weight: 500; border-bottom: 1px solid var(--line); }
.nav__mobile-cta { display: flex; gap: 10px; margin-top: 12px; }
.nav__mobile-cta .v2-btn { flex: 1; }

/* ═══════════ HERO ═══════════ */
.v2-hero { position: relative; overflow: hidden; padding: 128px 0 64px; }
.v2-hero__wash {
    position: absolute; inset: 0;
    background:
        radial-gradient(600px 300px at 85% -10%, rgba(37,99,235,.08), transparent 60%),
        radial-gradient(500px 260px at -5% 30%, rgba(37,99,235,.05), transparent 55%);
    pointer-events: none;
}
.v2-hero__grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.v2-hero__title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5.4vw, 58px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 18px;
}
.v2-hero__title-go { color: var(--go); position: relative; white-space: nowrap; }
.v2-hero__sub { color: var(--slate); font-size: 17px; max-width: 540px; margin-bottom: 26px; }
.v2-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.v2-hero__fine { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.v2-hero__trust { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--slate); flex-wrap: wrap; }
.v2-hero__trust-item strong { color: var(--ink); }
.v2-hero__trust-sep { color: var(--line); font-weight: 700; }

/* Closed-testing dashboard card — homepage hero illustration.
   Every internal metric is em-based off .v2-dash's font-size, so the whole
   composition scales as one unit and never needs per-breakpoint re-layout. */
.v2-dash { position: relative; width: 100%; max-width: 640px; margin-left: auto; font-size: clamp(10.2px, 1.15vw - 1.6px, 12px); }
.v2-dash__glow {
    position: absolute; left: -8em; top: -.5em; width: 22em; height: 22em; border-radius: 50%;
    background: radial-gradient(circle at 44% 44%, rgba(56,132,255,.20), rgba(56,132,255,0) 66%);
    pointer-events: none;
}
.v2-dash__card {
    position: relative; z-index: 2;
    padding: 1.6em 1.7em 1.55em;
    background: #fff;
    border: 1px solid rgba(10,16,23,.07);
    border-radius: 1.6em;
    box-shadow: 0 2.4em 4.2em -1.8em rgba(11,38,84,.34), 0 .2em .5em -.2em rgba(10,16,23,.06);
}
.v2-dash__verified {
    position: absolute; z-index: 4; right: -1.3em; top: 24%;
    display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 1.1em;
    background: linear-gradient(150deg, #4C8DF6, #2563EB); color: #fff;
    box-shadow: 0 1em 1.8em -.6em rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.v2-dash__verified svg { width: 1.6em; height: 1.6em; }
.v2-dash__head { display: flex; align-items: flex-start; gap: 1em; }
.v2-dash__app {
    flex: none; display: grid; place-items: center; width: 3.4em; height: 3.4em; border-radius: 1em;
    background: linear-gradient(150deg, #F4F9FF, #DCEAFF); color: #2563EB;
    box-shadow: inset 0 0 0 1px rgba(37,99,235,.14);
}
.v2-dash__app svg { width: 1.5em; height: 1.5em; }
.v2-dash__id { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.v2-dash__name { font-family: var(--font-display); font-size: 1.32em; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--ink); }
.v2-dash__pkg { font-size: .78em; color: var(--faint); }
.v2-dash__chip {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .4em;
    padding: .38em .7em; border-radius: 999px;
    background: var(--go-tint); color: #1D4ED8;
    font-size: .72em; font-weight: 600; white-space: nowrap;
}
.v2-dash__chip svg { width: 1.05em; height: 1.05em; }
.v2-dash__meta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: .55em; }
.v2-dash__status {
    display: inline-flex; align-items: center; gap: .45em;
    padding: .45em .8em; border-radius: 999px;
    background: #DCFCE7; color: #15803D;
    font-size: .72em; font-weight: 700; white-space: nowrap;
}
.v2-dash__status i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: #22C55E; }
.v2-dash__ver { padding: .45em .6em; border-radius: .5em; background: #F1F5F9; color: #475569; font-size: .72em; white-space: nowrap; }
/* The third panel carries the progress ring as well as its text, so it gets extra width. */
.v2-dash__panels { display: grid; grid-template-columns: 1fr 1fr 1.18fr; gap: .75em; margin-top: 1.25em; }
.v2-dash__panel {
    display: flex; align-items: center; gap: .7em; min-width: 0;
    padding: .9em .95em; border-radius: 1.05em;
    background: #F7FAFF; border: 1px solid rgba(37,99,235,.10);
}
.v2-dash__panel-ic { flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: .78em; background: #E1EDFF; color: #2563EB; }
.v2-dash__panel-ic svg { width: 1.3em; height: 1.3em; }
.v2-dash__panel-ic--violet { background: #EDE9FE; color: #7C3AED; }
.v2-dash__panel-txt { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
.v2-dash__panel-label { font-size: .72em; font-weight: 600; color: #64748B; line-height: 1.3; }
.v2-dash__panel-val { font-family: var(--font-display); font-size: 1.18em; font-weight: 800; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.v2-dash__panel-val small { font-family: var(--font-body); font-size: .58em; font-weight: 600; color: var(--slate); }
.v2-dash__panel-val--sm { font-size: .86em; font-weight: 700; }
.v2-dash__ring { position: relative; flex: none; width: 2.7em; height: 2.7em; }
.v2-dash__ring svg { display: block; width: 100%; height: 100%; }
.v2-dash__ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: .68em; font-weight: 800; color: #2563EB; }
.v2-dash__time { margin-top: 1.25em; }
.v2-dash__bar-row { display: flex; align-items: center; gap: .8em; }
.v2-dash__bar { flex: 1 1 auto; height: .6em; border-radius: 999px; background: #E9EFF8; overflow: hidden; }
.v2-dash__bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #60A5FA, #2563EB); }
.v2-dash__bar-txt { flex: none; font-size: .72em; font-weight: 700; color: #2563EB; }
.v2-dash__days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: .3em; margin: .95em 0 0; padding: 0; list-style: none; }
.v2-dash__day { display: flex; flex-direction: column; align-items: center; gap: .35em; }
.v2-dash__dot {
    display: grid; place-items: center; width: 100%; max-width: 1.65em; aspect-ratio: 1 / 1;
    border-radius: 50%; background: #EEF2F7; color: #A3AEBC;
}
.v2-dash__dot svg { width: 62%; height: 62%; }
.v2-dash__day.is-done .v2-dash__dot { background: #2563EB; color: #fff; }
.v2-dash__day.is-today .v2-dash__dot { background: #fff; color: #2563EB; box-shadow: inset 0 0 0 .18em #2563EB; }
.v2-dash__day-txt { font-size: .6em; font-weight: 600; color: #A3AEBC; white-space: nowrap; }
.v2-dash__day.is-done .v2-dash__day-txt { color: #64748B; }
.v2-dash__day.is-today .v2-dash__day-txt { color: #2563EB; font-weight: 700; }
.v2-dash__notice {
    display: flex; align-items: flex-start; gap: .85em; margin-top: 1.25em;
    padding: 1em 1.15em; border-radius: 1.05em;
    background: #F2FDF5; border: 1px solid rgba(22,163,74,.16);
}
.v2-dash__notice-ic { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50%; background: #DCFCE7; color: #16A34A; }
.v2-dash__notice-ic svg { width: 1.25em; height: 1.25em; }
.v2-dash__notice-txt { display: flex; flex-direction: column; gap: .3em; }
.v2-dash__notice-txt strong { font-family: var(--font-display); font-size: .96em; font-weight: 800; letter-spacing: -.01em; color: #14532D; }
.v2-dash__notice-sub { font-size: .78em; line-height: 1.6; color: #3F6B4F; }
/* Floating tester-activity card: overlaps the main card's lower-right corner */
.v2-dash__activity {
    position: absolute; z-index: 3; right: .6em; bottom: 2.1em; width: 15.8em;
    padding: 1em 1.1em 1.1em;
    background: #fff; border: 1px solid rgba(10,16,23,.07); border-radius: 1.3em;
    box-shadow: 0 1.7em 3em -1.2em rgba(11,38,84,.36), 0 .2em .5em -.2em rgba(10,16,23,.06);
}
.v2-dash__activity-head { display: flex; align-items: center; gap: .6em; }
.v2-dash__activity-title { display: inline-flex; align-items: center; gap: .45em; font-family: var(--font-display); font-size: .82em; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.v2-dash__activity-title svg { flex: none; color: #2563EB; }
.v2-dash__activity-pick {
    margin-left: auto; display: inline-flex; align-items: center; gap: .3em;
    padding: .38em .6em; border-radius: 999px;
    background: #F1F5F9; color: #475569;
    font-size: .66em; font-weight: 600; white-space: nowrap;
}
.v2-dash__chart { display: flex; gap: .5em; margin-top: 1em; }
.v2-dash__chart-y {
    flex: none; width: 1.4em; display: flex; flex-direction: column; justify-content: space-between;
    align-items: flex-end; padding: .4em 0; font-size: .62em; color: #A3AEBC;
}
.v2-dash__chart-box { position: relative; flex: 1 1 auto; min-width: 0; }
.v2-dash__chart-svg { display: block; width: 100%; height: auto; }
.v2-dash__grid { stroke: #EEF2F7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.v2-dash__area { fill: url(#v2DashArea); }
.v2-dash__line { fill: none; stroke: #2563EB; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.v2-dash__pt { fill: #2563EB; }
.v2-dash__pt-last { fill: #2563EB; stroke: #fff; stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.v2-dash__tip {
    position: absolute; right: 0; top: -.9em; padding: .45em .7em; border-radius: .55em;
    background: #2563EB; color: #fff;
    font-size: .68em; font-weight: 700; white-space: nowrap;
    box-shadow: 0 .6em 1.2em -.4em rgba(37,99,235,.55);
}
.v2-dash__tip::after {
    content: ''; position: absolute; left: 50%; bottom: -.28em; width: .7em; height: .7em;
    border-radius: .12em; background: #2563EB; transform: translateX(-50%) rotate(45deg);
}
.v2-dash__chart-x { display: flex; justify-content: space-between; margin-top: .5em; padding-left: 1.9em; font-size: .6em; color: #A3AEBC; }
.v2-dash__note {
    margin: 1.2em 0 0; text-align: right;
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--slate);
}

/* ═══════════ HOMEPAGE HERO (scoped: .v2-hero--home) ═══════════
   The .v2-hero block above is shared with /blog and /reviews, so every
   homepage hero change lives under .v2-hero--home and cannot leak. */
.v2-hero--home { padding: 128px 0 72px; }
.v2-hero--home .v2-hero__wash {
    background:
        radial-gradient(760px 420px at 94% -14%, rgba(37,99,235,.16), transparent 62%),
        radial-gradient(640px 380px at 106% 64%, rgba(96,165,250,.15), transparent 66%),
        radial-gradient(520px 300px at -6% 36%, rgba(37,99,235,.05), transparent 58%);
}
.v2-hero--home .v2-hero__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: clamp(36px, 4.2vw, 68px);
}
.v2-hero--home .v2-hero__copy { max-width: 640px; }
.v2-hero--home .v2-eyebrow::before {
    content: ''; display: inline-block; width: 24px; height: 1px;
    background: #93C5FD; vertical-align: middle; margin-right: 10px;
}
.v2-hero--home .v2-hero__title {
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px;
}
/* The accent phrase is longer now, so it must be allowed to wrap on small screens
   (the shared rule keeps it on one line, which would clip it on phones). */
.v2-hero--home .v2-hero__title-go { white-space: normal; }
.v2-hero--home .v2-hero__sub {
    font-size: 17px; line-height: 1.7; max-width: 560px; margin-bottom: 28px;
}
.v2-hero--home .v2-hero__cta { gap: 14px; margin-bottom: 16px; }
.v2-hero--home .v2-hero__fine { font-size: 13.5px; margin-bottom: 20px; }
/* Trust row: same configured figures, tidied into one aligned line. */
.v2-hero--home .v2-hero__trust { gap: 14px; font-size: 13.5px; row-gap: 8px; }
.v2-hero--home .v2-hero__trust .v2-stars { font-size: 15px; }
.v2-hero--home .v2-hero__trust-sep {
    width: 1px; height: 18px; overflow: hidden;
    color: transparent; background: rgba(10,16,23,.12);
}

/* Illustration: the dashboard card sits inside the hero's blue wash.
   The card itself is styled by the .v2-dash block above (homepage-only). */
.v2-hero--home .v2-hero__visual { position: relative; }

@media (max-width: 1180px) {
    .v2-hero--home .v2-hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: 44px; }
    .v2-hero--home .v2-hero__title { font-size: clamp(30px, 3.1vw, 42px); }
    .v2-hero--home .v2-hero__sub { font-size: 16.5px; }
}
@media (max-width: 980px) {
    .v2-hero--home { padding: 120px 0 56px; }
    /* Re-declare the stacking: this scoped rule would otherwise out-rank the
       shared .v2-hero__grid rule above and keep two columns on mobile. */
    .v2-hero--home .v2-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .v2-hero--home .v2-hero__copy { max-width: none; }
    .v2-hero--home .v2-hero__visual { width: 100%; max-width: 560px; margin: 0 auto; }
    /* Stacked layout: the card gets the full column, so it can use a larger type scale. */
    .v2-dash { max-width: 620px; margin: 0 auto; font-size: 13px; }
}
@media (max-width: 560px) {
    .v2-hero--home { padding: 108px 0 48px; }
    .v2-hero--home .v2-hero__title { font-size: clamp(27px, 7.4vw, 37px); }
    .v2-hero--home .v2-hero__sub { font-size: 16px; margin-bottom: 24px; }
    .v2-hero--home .v2-hero__trust { column-gap: 10px; }
    /* The dashboard collapses to one column and the activity card drops below it. */
    .v2-dash { font-size: 11.4px; }
    .v2-dash__head { flex-wrap: wrap; gap: .8em; }
    .v2-dash__meta { width: 100%; margin-left: 0; flex-direction: row; align-items: center; gap: .5em; }
    .v2-dash__panels { grid-template-columns: 1fr; gap: .6em; }
    .v2-dash__day-txt { display: none; }
    .v2-dash__activity { position: static; width: 100%; max-width: 320px; margin: 1.2em 0 0 auto; }
    .v2-dash__verified { display: none; }
    .v2-dash__note { margin-top: 1.6em; }
}

/* ═══════════ SECTIONS ═══════════ */
.v2-section { padding: 80px 0; }
.v2-section--mist { background: var(--mist); }
.v2-section__head { text-align: center; margin-bottom: 48px; }

/* Closed testing journey — three steps with real Console screenshots */
.jt-section { padding: 84px 0; background: linear-gradient(180deg, #FFFFFF 0%, #F6FAFF 60%, #F1F6FE 100%); }
.jt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.jt-card {
    position: relative;
    display: flex; flex-direction: column; gap: 14px;
    padding: 16px 16px 18px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 16px 40px rgba(10, 16, 23, .05);
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}
.jt-card--blue { --jt: #2563EB; --jt-soft: #EFF6FF; --jt-line: #C7D9F8; }
.jt-card--violet { --jt: #7C3AED; --jt-soft: #F5F3FF; --jt-line: #DDD0FA; }
.jt-card--green { --jt: #059669; --jt-soft: #ECFDF5; --jt-line: #BCE8D6; }
.jt-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    background: var(--jt);
    opacity: .9;
}
.jt-card:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(10, 16, 23, .1); border-color: var(--jt-line); }
.jt-card:not(:last-child)::after {
    content: "";
    position: absolute; top: 50%; right: -24px;
    width: 9px; height: 9px;
    border-top: 2px solid #C3D0E4;
    border-right: 2px solid #C3D0E4;
    transform: translateY(-50%) rotate(45deg);
    animation: jtArrow 2.4s ease-in-out infinite;
}
@keyframes jtArrow {
    0%, 100% { transform: translateY(-50%) rotate(45deg) translateX(0); opacity: .75; }
    50% { transform: translateY(-50%) rotate(45deg) translateX(3px); opacity: 1; }
}
.jt-card__head { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.jt-step {
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    color: var(--jt); background: var(--jt-soft);
    padding: 4px 9px; border-radius: 7px;
}
.jt-badge {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600;
    color: var(--jt); background: var(--jt-soft);
    padding: 4px 10px; border-radius: 999px;
    white-space: nowrap;
}
.jt-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: jtPulse 2.4s ease-in-out infinite; }
@keyframes jtPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.jt-shot {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, #FCFDFF, #F1F5FB);
    overflow: hidden;
    cursor: zoom-in;
}
.jt-shot img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.jt-shot:hover img { transform: scale(1.03); }
.jt-shot:focus-visible { outline: 2px solid var(--jt); outline-offset: 2px; }
.jt-shot__zoom {
    position: absolute; right: 8px; bottom: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600; color: #334155;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--line);
    padding: 3px 8px; border-radius: 999px;
    opacity: 0; transition: opacity .25s ease;
}
.jt-shot:hover .jt-shot__zoom, .jt-shot:focus-visible .jt-shot__zoom { opacity: 1; }
.jt-card__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.jt-list { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.jt-list li { display: flex; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--slate); }
.jt-list svg { flex: none; margin-top: 2px; color: var(--jt); }
.jt-disclosure { max-width: 760px; margin: 22px auto 0; font-size: 12px; line-height: 1.6; color: var(--faint); text-align: center; }

/* One-shot reveal for the journey cards. */
.jt-grid.is-armed:not(.is-revealed) .jt-card { opacity: 0; }
.jt-grid.is-revealed .jt-card { animation: jtIn .62s cubic-bezier(.16, .84, .44, 1) backwards; }
.jt-grid.is-revealed .jt-card:nth-child(2) { animation-delay: .12s; }
.jt-grid.is-revealed .jt-card:nth-child(3) { animation-delay: .24s; }
@keyframes jtIn {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

/* Lightbox */
.jt-lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; }
.jt-lightbox[hidden] { display: none; }
.jt-lightbox__backdrop { position: absolute; inset: 0; background: rgba(6, 12, 20, .74); backdrop-filter: blur(3px); }
.jt-lightbox__panel {
    position: relative;
    display: flex; flex-direction: column; gap: 11px;
    max-width: min(1180px, 96vw); max-height: 92vh;
    margin: 0; padding: 13px;
    background: var(--paper);
    border-radius: 16px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, .38);
    animation: jtPop .26s ease backwards;
}
@keyframes jtPop { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.jt-lightbox__img { display: block; max-width: 100%; max-height: calc(92vh - 92px); width: auto; height: auto; margin: 0 auto; border-radius: 8px; background: #F3F6FB; }
.jt-lightbox__cap { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--slate); }
.jt-lightbox__close {
    position: absolute; top: -13px; right: -13px;
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--paper); color: var(--ink);
    font-size: 20px; line-height: 1; cursor: pointer;
}

@media (max-width: 999px) {
    .jt-grid { grid-template-columns: 1fr; gap: 30px; }
    .jt-card:not(:last-child)::after {
        top: auto; bottom: -21px; right: 50%;
        transform: translateX(50%) rotate(135deg);
        animation: none;
    }
}
@media (max-width: 560px) {
    .jt-section { padding: 64px 0; }
    .jt-card { padding: 14px 14px 16px; }
    .jt-lightbox { padding: 10px; }
    .jt-lightbox__close { top: -10px; right: -10px; width: 30px; height: 30px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .jt-grid.is-armed:not(.is-revealed) .jt-card { opacity: 1; }
    .jt-grid.is-revealed .jt-card { animation: none; }
    .jt-card, .jt-shot img { transition: none; }
    .jt-card:hover { transform: none; }
    .jt-shot:hover img { transform: none; }
    .jt-card:not(:last-child)::after, .jt-badge i { animation: none; }
    .jt-lightbox__panel { animation: none; }
}

/* Stats strip now sits in its own section, directly under the journey band. */
.v2-section--stats { padding: 40px 0 76px; }
.v2-section--stats .v2-stats { margin-top: 0; }

/* Stats */
.v2-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; text-align: center; }
.v2-stat__num { font-family: var(--font-display); font-size: clamp(30px, 4vw, 44px); font-weight: 800; display: block; letter-spacing: -0.02em; }
.v2-stat__label { color: var(--faint); font-size: 13.5px; }
/* Statistics reveal: one-shot entrance + count-up (numbers stay in the DOM,
   so the section is fully readable without JS). */
.v2-stat { will-change: opacity, transform; }
.v2-stats.is-armed .v2-stat { opacity: 0; }
.v2-stats.is-revealed .v2-stat { animation: v2StatIn .6s cubic-bezier(.22, .61, .36, 1) both; }
.v2-stats.is-revealed .v2-stat:nth-child(2) { animation-delay: .08s; }
.v2-stats.is-revealed .v2-stat:nth-child(3) { animation-delay: .16s; }
.v2-stats.is-revealed .v2-stat:nth-child(4) { animation-delay: .24s; }
.v2-stat__num { font-variant-numeric: tabular-nums; }
@keyframes v2StatIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .v2-stats.is-armed .v2-stat { opacity: 1; }
    .v2-stats.is-revealed .v2-stat { animation: none; }
}

/* Video */
.video-card__frame {
    position: relative;
    background: var(--ink);
    border-radius: 18px;
    height: 380px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
}
.video-card__frame::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 40px 40px;
}
.video-card__play {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--go);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff; padding-left: 5px;
    box-shadow: 0 0 0 14px rgba(37,99,235,.2);
    transition: transform .2s;
    z-index: 2;
}
.video-card__play:hover { transform: scale(1.06); }
.video-card__iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; z-index: 2;
    background: #000;
}
.video-card__label { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: 13px; font-family: var(--font-mono); z-index: 2; }
.video-card { max-width: 760px; margin: 0 auto; }
.video-card .v2-tagline { text-align: center; }
.video-card__links { display: flex; justify-content: center; gap: 28px; margin-top: 18px; flex-wrap: wrap; }

/* Pricing */
.v2-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.price-card {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px 24px;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.price-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(10,16,23,.09); }
.price-card--popular { border: 2px solid var(--go); box-shadow: 0 16px 44px rgba(37,99,235,.14); }
.price-card__badge {
    position: absolute; top: -11px; left: 20px;
    background: var(--star); color: #fff;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    padding: 4px 12px; border-radius: 999px;
    letter-spacing: .08em;
}
.price-card__badge--hot { background: var(--go); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.price-card__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; color: var(--faint); margin-bottom: 4px; }
.price-card__testers { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.price-card__price { font-family: var(--font-display); font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 6px; }
.price-card__price s { color: var(--faint); font-size: 22px; font-weight: 600; margin-right: 6px; }
.price-card__cur { font-size: 24px; vertical-align: super; font-weight: 700; }
.price-card__note { font-size: 12.5px; color: var(--faint); margin-bottom: 8px; }
.price-card__save { font-size: 12.5px; color: var(--go); font-weight: 600; margin-bottom: 16px; }
.price-card__list { list-style: none; margin-bottom: 22px; flex-grow: 1; }
.price-card__list li { padding: 7px 0 7px 26px; position: relative; font-size: 14px; color: var(--slate); }
.price-card__list li::before { content: '✓'; position: absolute; left: 0; color: var(--go); font-weight: 700; }
.price-card__details { text-align: center; font-size: 13px; color: var(--go); font-weight: 600; margin-top: 12px; }

/* Guarantee */
/* Money-back guarantee card */
.v2-guarantee {
    max-width: 760px;
    margin: 44px auto 0;
    padding: 34px 32px 30px;
    text-align: center;
    background: linear-gradient(180deg, #F7FDFA 0%, #EFFBF4 100%);
    border: 1px solid #C6EDD8;
    border-radius: 20px;
    box-shadow: 0 18px 44px -30px rgba(5, 150, 105, .45);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.v2-guarantee:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -28px rgba(5, 150, 105, .55); border-color: #A9E4C3; }
.v2-guarantee__ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px; margin-bottom: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 1px solid #C6EDD8;
    color: #059669;
    box-shadow: 0 10px 22px -14px rgba(5, 150, 105, .55);
}
.v2-guarantee__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.v2-guarantee__sub { margin-top: 6px; font-size: 14.5px; color: var(--slate); }
.v2-guarantee__desc { max-width: 560px; margin: 14px auto 0; font-size: 14px; line-height: 1.6; color: var(--slate); }
.v2-guarantee__wa {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 20px;
    font-size: 14px; font-weight: 600;
    color: #047857;
    transition: color .2s ease;
}
.v2-guarantee__arrow { display: inline-block; transition: transform .25s cubic-bezier(.22, .61, .36, 1); }
.v2-guarantee__wa:hover { color: #065F46; }
.v2-guarantee__wa:hover .v2-guarantee__arrow,
.v2-guarantee__wa:focus-visible .v2-guarantee__arrow { transform: translateX(4px); }
.v2-guarantee__fine { margin-top: 14px; font-size: 12px; color: var(--faint); }
.v2-guarantee__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; transition: color .2s ease; }
.v2-guarantee__link:hover { color: #047857; }
@media (max-width: 560px) {
    .v2-guarantee { margin-top: 32px; padding: 26px 20px 24px; border-radius: 16px; }
    .v2-guarantee__title { font-size: 19px; }
    .v2-guarantee__ic { width: 50px; height: 50px; margin-bottom: 14px; }
    .v2-guarantee__wa { font-size: 13.5px; }
}

/* Payment methods */
.pay-methods-wrap { display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; }
.pay-methods__label { font-size:11px; color:var(--faint); font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.pay-methods { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.pay-chip { display:inline-flex; align-items:center; justify-content:center; height:36px; padding:0 12px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.pay-chip img { height:20px; width:auto; max-width:100px; object-fit:contain; display:block; }
/* The NowPayments lockup is a long wordmark, so at the shared 20px height it reads
   much heavier than the square marks next to it. Scale that one image down ~16%
   and keep it centred inside the unchanged 36px badge. */
.pay-chip--nowpayments img { height:18px; max-width:84px; object-fit:contain; object-position:center; }
.v2-pay-foot { text-align:center; }

/* ── How it works: 4-step timeline ── */
.how-flow {
    --how-gap: 22px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--how-gap);
    list-style: none;
}
.how-step { position: relative; display: flex; flex-direction: column; }
/* Connector runs chip-centre to chip-centre, so the opaque chips mask it and
   it always ends on step 04 instead of overshooting the grid. */
.how-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 21px;
    left: 22px;
    width: calc(100% + var(--how-gap));
    height: 2px;
    border-radius: 2px;
    background: var(--go);
    opacity: .3;
    z-index: 0;
}
.how-step:nth-child(1):not(:last-child)::after { opacity: .55; }
.how-step:nth-child(2):not(:last-child)::after { opacity: .42; }
.how-step__num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    background: var(--go-tint);
    border: 1px solid rgba(37,99,235,.22);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    color: var(--go-deep);
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.how-step__card {
    flex: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 1px 2px rgba(10,16,23,.03);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.how-step__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.how-step__text { color: var(--slate); font-size: 14.5px; }
.how-step:hover .how-step__card {
    transform: translateY(-3px);
    border-color: #D5DEE7;
    box-shadow: 0 18px 44px rgba(10,16,23,.09);
}
.how-step:hover .how-step__num {
    background: var(--go);
    border-color: var(--go);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(37,99,235,.6);
}
.how-flow-cta { text-align: center; margin-top: 44px; }
.how-flow-cta .v2-hero__fine { margin-top: 12px; }
.how-flow-cta .v2-btn { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .how-step__card, .how-step__num { transition: none; }
    .how-step:hover .how-step__card { transform: none; }
}

/* Report */
.report-card {
    max-width: 720px; margin: 0 auto;
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 16px 40px rgba(10,16,23,.07);
}
.report-card__top {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--ink); color: #fff; padding: 14px 20px;
    font-size: 12px;
}
.report-card__open { color: #60A5FA; font-weight: 600; }
.report-card__table { padding: 8px 20px 18px; }
.report-card__row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.report-card__row:last-child { border-bottom: none; }
.report-card__row--head { font-size: 10px; letter-spacing: .12em; color: var(--faint); }
.sev { font-weight: 600; font-size: 12px; }
.sev--high { color: #dc2626; }
.sev--med { color: #d97706; }
.sev--low { color: #2563eb; }
.sev--ok { color: var(--go); }
.st { font-size: 11px; font-family: var(--font-mono); }
.st--open { color: #d97706; }
.st--done { color: var(--go); }
.v2-report-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.v2-feat { text-align: center; }
.v2-feat strong { display: block; font-size: 15px; margin-bottom: 4px; }
.v2-feat span { color: var(--slate); font-size: 13.5px; }
.v2-report-depth { text-align: center; margin-top: 44px; }
.v2-depth-row { display: flex; justify-content: center; gap: 10px 34px; flex-wrap: wrap; margin-top: 14px; }
.v2-depth-row span:nth-child(odd) { font-family: var(--font-mono); font-size: 11px; color: var(--faint); letter-spacing: .1em; }
.v2-depth-row span:nth-child(even) { font-size: 13.5px; font-weight: 600; }
.v2-depth-note { color: var(--faint); font-size: 10px; margin-top: 14px; }

/* Compare */
.v2-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cmp-card { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; }
.cmp-card--rec { border: 2px solid var(--go); box-shadow: 0 16px 44px rgba(37,99,235,.12); }
.cmp-card__flag {
    align-self: flex-start;
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    background: var(--mist); border: 1px solid var(--line);
    color: var(--slate); padding: 4px 12px; border-radius: 999px;
    margin-bottom: 14px;
}
.cmp-card--rec .cmp-card__flag { background: var(--go); border-color: var(--go); color: #fff; }
.cmp-card h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin-bottom: 8px; }
.cmp-card > p { color: var(--slate); font-size: 14px; margin-bottom: 14px; }
.cmp-card__list { list-style: none; margin-bottom: 18px; flex-grow: 1; }
.cmp-card__list li { padding: 6px 0 6px 22px; position: relative; font-size: 13.5px; color: var(--slate); }
.cmp-card__list li::before { content: '✕'; position: absolute; left: 0; color: #f87171; font-weight: 700; font-size: 12px; }
.cmp-card--rec .cmp-card__list li::before { content: '✓'; color: var(--go); }
.cmp-card__list li b { color: var(--ink); }

/* Reviews */
.v2-rating { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 22px; }
.v2-rating__num { font-family: var(--font-display); font-size: 40px; font-weight: 800; }
.v2-rating__sub { color: var(--slate); font-size: 14px; }
.v2-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rev-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; }
.rev-card__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.rev-card__country { font-size: 10px; color: var(--faint); }
.rev-card__body { font-size: 14px; color: var(--slate); flex-grow: 1; }
.rev-card__who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rev-card__av {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--go-tint); color: var(--go-deep);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px;
}
.rev-card__name { font-size: 13.5px; font-weight: 600; }
.v2-reviews-more { text-align: center; margin-top: 32px; }
.v2-trustpilot { text-align: center; margin-top: 40px; }

/* Blog */
.v2-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 26px;
    transition: transform .2s, box-shadow .2s;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(10,16,23,.09); }
.blog-card__tags { font-size: 10px; color: var(--faint); display: block; margin-bottom: 12px; }
.blog-card__tags span { color: var(--go); font-weight: 600; }
.blog-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.blog-card p { color: var(--slate); font-size: 14px; margin-bottom: 14px; }
.blog-card__more { color: var(--go); font-weight: 600; font-size: 14px; }
.blog-card__cover { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; margin-bottom:16px; display:block; }
.v2-blog-more { text-align: center; margin-top: 32px; }

/* Closed testing 101 */
.ch { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; display: grid; grid-template-columns: 300px 1fr; }
.ch__tabs { border-right: 1px solid var(--line); background: var(--mist); padding: 14px; display: flex; flex-direction: column; gap: 2px; max-height: 480px; overflow-y: auto; }
.ch-tab {
    text-align: left;
    background: none; border: none;
    font-family: var(--font-mono); font-size: 11.5px;
    color: var(--slate);
    padding: 10px 12px; border-radius: 9px;
    letter-spacing: .02em;
}
.ch-tab:hover { background: var(--line); }
.ch-tab.is-active { background: var(--ink); color: #fff; }
.ch__panels { padding: 34px; }
.ch-panel { display: none; }
.ch-panel.is-active { display: block; }
.ch-panel h3 { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 14px; }
.ch-panel p { color: var(--slate); font-size: 15px; margin-bottom: 14px; }
.ch-panel blockquote {
    border-left: 3px solid var(--go);
    background: var(--go-tint);
    padding: 16px 20px;
    border-radius: 0 12px 12px 0;
    font-size: 14.5px;
    color: var(--ink);
}

/* FAQ */
.v2-faq { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: 14px; margin-bottom: 12px; background: var(--paper); overflow: hidden; }
.faq-item__q {
    width: 100%; text-align: left;
    background: none; border: none;
    font-family: var(--font-body); font-size: 15.5px; font-weight: 600;
    padding: 18px 20px;
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item__chev { color: var(--go); font-size: 20px; font-weight: 500; transition: transform .2s; }
.faq-item.open .faq-item__chev { transform: rotate(45deg); }
.faq-item__a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-item__a { max-height: 400px; }
.faq-item__a p { padding: 0 20px 18px; color: var(--slate); font-size: 14.5px; }

/* Contact */
.v2-contact { text-align: center; max-width: 560px; }
.v2-contact__avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--ink); color: #fff;
    font-family: var(--font-display); font-weight: 800; font-size: 24px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    overflow: hidden;
}
.v2-contact__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-contact__name { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 6px; }
.v2-contact__sub { color: var(--slate); margin-bottom: 16px; }
.v2-contact__links { display: flex; justify-content: center; gap: 10px; margin-bottom: 22px; font-size: 14.5px; }
.v2-contact__links span { color: var(--line); }

/* Final CTA */
.v2-section--cta { background: var(--ink); color: #fff; }
.v2-section--cta .v2-h2 { color: #fff; }
.v2-final { text-align: center; }
.v2-final__cta { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.v2-section--cta .v2-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.v2-section--cta .v2-btn--ghost:hover { border-color: #fff; }

/* ═══════════ FOOTER ═══════════ */
.footer { background: var(--paper); border-top: 1px solid var(--line); padding: 52px 0 36px; }
.footer__trust {
    display: flex; gap: 26px; flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px; margin-bottom: 32px;
    font-size: 13.5px; color: var(--slate);
}
.footer__pay { margin-left: auto; font-size: 11px; color: var(--faint); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
.footer__brand p { color: var(--slate); font-size: 13.5px; margin-top: 12px; }
.footer__brand .v2-mono { color: var(--faint); font-size: 11.5px; }
.footer__col h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--faint); margin-bottom: 14px; }
.footer__col a { display: block; font-size: 13.5px; color: var(--slate); padding: 4px 0; }
.footer__col a:hover { color: var(--ink); }
.footer__bottom {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    border-top: 1px solid var(--line); padding-top: 22px;
    font-size: 12.5px; color: var(--faint);
}
.footer__lang { display: flex; gap: 12px; flex-wrap: wrap; }
.footer__lang a { color: var(--faint); font-size: 10.5px; }
.footer__lang a:hover { color: var(--ink); }
.footer__social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.footer__social a {
    width: 32px; height: 32px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.footer__social a:hover {
    border-color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -8px rgba(10,16,23,.25);
}
.footer__social img { width: 18px; height: 18px; display: block; }

/* ═══════════ BLOG INDEX + ARTICLE ═══════════ */
/* Hero is a text-only masthead: tighter bottom padding keeps the listing close
   instead of leaving a dead band between the copy and the first card. */
.blog-hero { padding-top: 136px; padding-bottom: 34px; }
.blog-hero .v2-hero__grid { grid-template-columns: 1fr; max-width: 880px; gap: 0; }
.blog-hero .v2-hero__title { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 16px; }
.blog-hero .v2-hero__sub { font-size: 17.5px; line-height: 1.55; max-width: 620px; margin-bottom: 0; }

.post-article { padding-top: 150px; padding-bottom: 80px; }
.post-article__inner { max-width: 780px; }
.post-article__back { display: inline-block; margin-bottom: 22px; font-size: 14px; }
.post-article__head .v2-eyebrow { margin-bottom: 14px; }
.post-article__head h1 {
    font-family: var(--font-display);
    font-size: clamp(30px, 4.5vw, 46px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}
.post-article__meta { color: var(--faint); font-size: 11px; letter-spacing: .1em; margin-bottom: 26px; }
.post-article__cover { width: 100%; border-radius: 16px; border: 1px solid var(--line); margin-bottom: 34px; display: block; }
/* ── Blog content system ────────────────────────────────────────────────────
   One stylesheet drives both the published article page and any local preview
   built from the same wrapper, so a generated article renders the same in both
   places. The wrapper carries both `post-article__body` and `blog-content`;
   every rule below is written against both so neither hook can drift.

   Nothing here depends on inline styles. That matters because a body which has
   been through a rich-text editor can lose its `style` attributes, and these
   rules are what keep tables, figures and captions readable when it happens. */
:is(.post-article__body, .blog-content) { font-size: 17px; line-height: 1.75; color: var(--ink); }
:is(.post-article__body, .blog-content) p { margin-bottom: 20px; }
:is(.post-article__body, .blog-content) h2 {
    font-family: var(--font-display);
    font-size: 26px; font-weight: 700; letter-spacing: -0.01em;
    margin: 38px 0 14px;
}
:is(.post-article__body, .blog-content) h3 {
    font-family: var(--font-display);
    font-size: 21px; font-weight: 700; letter-spacing: -0.01em;
    margin: 30px 0 12px;
}
:is(.post-article__body, .blog-content) h4 {
    font-family: var(--font-display);
    font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em;
    margin: 26px 0 10px;
}
:is(.post-article__body, .blog-content) a { color: var(--go); font-weight: 600; text-decoration: underline; }
:is(.post-article__body, .blog-content) ul,
:is(.post-article__body, .blog-content) ol { margin: 0 0 20px; padding-left: 24px; }
:is(.post-article__body, .blog-content) li { margin-bottom: 8px; }
:is(.post-article__body, .blog-content) blockquote {
    border-left: 3px solid var(--go);
    margin: 24px 0; padding: 4px 0 4px 20px;
    color: var(--slate); font-style: italic;
}
:is(.post-article__body, .blog-content) code {
    background: var(--mist); border: 1px solid var(--line);
    border-radius: 6px; padding: 2px 6px; font-family: var(--font-mono); font-size: 14px;
}
:is(.post-article__body, .blog-content) pre {
    background: #0f172a; color: #e2e8f0;
    border-radius: 12px; padding: 18px; overflow-x: auto; margin: 24px 0;
    font-size: 14px; line-height: 1.65;
}
:is(.post-article__body, .blog-content) pre code {
    background: transparent; border: none; padding: 0; color: inherit; font-size: inherit;
}
/* A broken image still shows a bordered pane with legible, styled alt text
   instead of a torn icon and an unstyled line of raw text. */
:is(.post-article__body, .blog-content) img {
    max-width: 100%; height: auto;
    border-radius: 12px; border: 1px solid var(--line); margin: 24px 0;
    background: #fff; color: var(--slate); font-size: 13.5px; line-height: 1.5;
}

/* ── Formats the rich-text editor encodes as classes ──────────────────────
   Quill writes alignment and code blocks as class names rather than inline
   styles, and its own stylesheet is not loaded on the public blog, so these
   rules are what keep the author's intent visible. */
:is(.post-article__body, .blog-content) .ql-align-center { text-align: center; }
:is(.post-article__body, .blog-content) .ql-align-right { text-align: right; }
:is(.post-article__body, .blog-content) .ql-align-justify { text-align: justify; }
:is(.post-article__body, .blog-content) .ql-code-block-container,
:is(.post-article__body, .blog-content) .ql-code-block {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 12px;
    padding: 16px 18px;
    margin: 24px 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
}
:is(.post-article__body, .blog-content) .ql-code-block-container .ql-code-block {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* ── Tables ────────────────────────────────────────────────────────────────
   The wrapper is added at render time (see App\Support\BlogContent), so even a
   body with no inline styles gets a framed, responsive table whose horizontal
   scroll is confined to the wrapper rather than the whole page. */
:is(.post-article__body, .blog-content) .blog-table-wrapper {
    margin: 24px 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}
:is(.post-article__body, .blog-content) .blog-table-wrapper > table { margin: 0; }
:is(.post-article__body, .blog-content) table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 24px 0;
    font-size: 15px;
    line-height: 1.55;
}
:is(.post-article__body, .blog-content) th,
:is(.post-article__body, .blog-content) td {
    padding: 10px 12px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
:is(.post-article__body, .blog-content) thead th,
:is(.post-article__body, .blog-content) .blog-table__merged-header {
    background: var(--mist);
    color: var(--ink);
    font-weight: 700;
    vertical-align: middle;
}
/* A header row whose column boundaries a rich-text editor flattened beyond
   recovery: it spans the table and reads as an intentional header band. */
:is(.post-article__body, .blog-content) .blog-table__merged-header { font-size: 13.5px; line-height: 1.5; }
:is(.post-article__body, .blog-content) table strong { color: var(--ink); }

/* ── Figures and captions ──────────────────────────────────────────────── */
:is(.post-article__body, .blog-content) figure { margin: 28px 0; }
:is(.post-article__body, .blog-content) figure img { margin: 0; }
:is(.post-article__body, .blog-content) figcaption {
    margin-top: 10px;
    font-size: 13.5px; line-height: 1.6;
    color: var(--faint); text-align: center;
}
/* Diagram captions, tagged at render time so they keep their styling even when
   a rich-text save has stripped the inline styles they were authored with and
   unwrapped the figure element. */
:is(.post-article__body, .blog-content) .blog-figure-caption {
    display: block;
    margin: 10px 0 24px;
    font-size: 13.5px; line-height: 1.6;
    color: var(--faint); text-align: center;
}

/* ── Callouts and checklists ───────────────────────────────────────────────
   Optional hooks for generated articles; inline-styled callouts continue to
   work exactly as before. */
:is(.post-article__body, .blog-content) .blog-callout {
    margin: 26px 0; padding: 18px 22px;
    background: var(--mist); border: 1px solid var(--line);
    border-left: 4px solid var(--go); border-radius: 12px;
}
:is(.post-article__body, .blog-content) .blog-callout--info {
    background: var(--go-tint); border-color: #BFDBFE; border-left-color: var(--go);
}
:is(.post-article__body, .blog-content) .blog-callout--warn {
    background: #FFFBEB; border-color: #FDE68A; border-left-color: #F0A50A;
}
:is(.post-article__body, .blog-content) .blog-callout > :last-child { margin-bottom: 0; }
:is(.post-article__body, .blog-content) .blog-checklist { list-style: none; padding-left: 4px; }

/* Phones: keep multi-column tables readable inside their scroll wrapper
   instead of crushing them to one word per line. The floor scales with the
   column count — data-cols is emitted at render time by App\Support\BlogContent
   — so a two-column table still shrinks to fit while an eight-column tracker
   gets enough room per cell. Scroll stays inside the wrapper; the page never
   moves sideways. */
@media (max-width: 760px) {
    :is(.post-article__body, .blog-content) { font-size: 16.5px; }
    :is(.post-article__body, .blog-content) table { font-size: 14px; }
    :is(.post-article__body, .blog-content) .blog-table--wide { min-width: 540px; }
    :is(.post-article__body, .blog-content) .blog-table[data-cols="5"] { min-width: 600px; }
    :is(.post-article__body, .blog-content) .blog-table[data-cols="6"],
    :is(.post-article__body, .blog-content) .blog-table[data-cols="7"] { min-width: 680px; }
    :is(.post-article__body, .blog-content) .blog-table[data-cols="8"],
    :is(.post-article__body, .blog-content) .blog-table[data-cols="9"] { min-width: 780px; }
    :is(.post-article__body, .blog-content) th,
    :is(.post-article__body, .blog-content) td { padding: 9px 10px; }
    :is(.post-article__body, .blog-content) pre { font-size: 13px; padding: 14px; }
}
.post-article__cta {
    margin-top: 56px; padding: 34px;
    background: var(--mist); border: 1px solid var(--line); border-radius: 18px;
    text-align: center;
}
.post-article__cta h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.post-article__cta p { color: var(--slate); font-size: 14px; margin-bottom: 20px; }
.post-article__cta .v2-final__cta { justify-content: center; }


/* ═══════════ RESPONSIVE ═══════════ */
/* The one-line desktop nav needs the full container width; below this we
   fall back to the burger + mobile menu so nothing ever wraps or overflows. */
@media (max-width: 1080px) {
    .nav__links, .nav__actions { display: none; }
    .nav__burger { display: flex; }
}
@media (max-width: 1180px) {
    .how-flow { --how-gap: 16px; }
    .how-step__card { padding: 20px 18px; }
    .how-step__title { font-size: 18px; }
}
@media (max-width: 980px) {
    .v2-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .v2-pricing, .v2-compare, .v2-blog, .v2-reviews, .v2-report-feats { grid-template-columns: 1fr; }
    .v2-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
    .ch { grid-template-columns: 1fr; }
    .ch__tabs { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); max-height: none; }
    .ch-tab { white-space: nowrap; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .video-card__frame { height: 240px; }
}
@media (max-width: 1080px) {
    /* Four across is too narrow for the timeline cards — stack them and
       drop the connector, which no longer describes a horizontal flow.
       Matches the breakpoint where the desktop nav collapses to a burger. */
    .how-flow { grid-template-columns: 1fr; gap: 14px; }
    .how-step:not(:last-child)::after { display: none; }
    .how-step__card { padding: 22px; }
}
@media (max-width: 560px) {
    .v2-section { padding: 56px 0; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__trust { flex-direction: column; gap: 10px; }
    .footer__pay { margin-left: 0; }
    .v2-hero__cta .v2-btn { width: 100%; }
    .how-flow-cta { margin-top: 32px; }
    .how-flow-cta .v2-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════
   REVIEWS PAGE (/reviews)
   A hub of links to our real, external profiles — the page prints no review
   count and no rating of its own. Same tokens and card language as the landing
   page: hairline borders, mono micro-labels, blue as the only accent colour.
   Responsive rules for the block live at the end of the block, so the page can
   be read in one place.
   ═══════════════════════════════════════════════ */

.nav__links a.is-active { color: var(--ink); font-weight: 600; }
.nav__mobile a.is-active { color: var(--go); }

/* ── Hero ──
   One centred column: there is no statistic panel up here by design. */
.rv-hero { padding: 150px 0 56px; }
.rv-hero__inner { max-width: 780px; margin: 0 auto; text-align: center; }
.rv-hero__inner .v2-hero__sub { max-width: 680px; margin: 0 auto 28px; }
.rv-hero__inner .v2-hero__cta { justify-content: center; }
.rv-hero__inner .v2-hero__fine { margin: 16px 0 0; }

/* ── Platform hub ──
   Cards in a fixed order. A card is a link only when we have a real profile
   URL for it; the rest are dashed and inert, marked "Coming soon". */
.rv-platforms-section { padding-top: 70px; }
.rv-platforms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
    gap: 16px;
}
.rv-platform {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 22px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rv-platform--ready:hover {
    transform: translateY(-3px);
    border-color: #C9D6E4;
    box-shadow: 0 18px 44px rgba(10,16,23,.09);
}
.rv-platform--soon { border-style: dashed; background: transparent; }
.rv-platform__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rv-platform__mark {
    flex: none;
    width: 44px; height: 44px;
    border-radius: 13px;
    background: var(--go-tint);
    border: 1px solid rgba(37,99,235,.18);
    color: var(--go-deep);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.rv-platform__mark--logo { background: #fff; border-color: var(--line); }
.rv-platform__mark img { width: 24px; height: 24px; object-fit: contain; display: block; }
.rv-platform__soon-tag {
    flex: none;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--slate);
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px;
    white-space: nowrap;
}
.rv-platform__name { font-family: var(--font-display); font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.rv-platform__kind {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--faint);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-top: 5px;
}
.rv-platform__stats { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13px; color: var(--slate); }
.rv-platform__stats .v2-stars { font-size: 12px; letter-spacing: 1px; }
.rv-platform__cta {
    margin-top: auto;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    color: var(--go);
    font-size: 13.5px;
    font-weight: 600;
}
/* The whole card is the tap target; the link text stays the label. */
.rv-platform--ready .rv-platform__cta::after { content: ''; position: absolute; inset: 0; border-radius: 18px; }
.rv-platform--ready:hover .rv-platform__cta { color: var(--go-deep); }
.rv-platform--soon .rv-platform__cta { border-top-color: transparent; color: var(--faint); font-weight: 500; }

/* ── Trust ── */
.rv-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rv-trust__item {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
}
.rv-trust__num { display: block; font-size: 12px; font-weight: 700; color: var(--go); letter-spacing: .16em; margin-bottom: 12px; }
.rv-trust__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.rv-trust__text { color: var(--slate); font-size: 14px; }

/* ── Live platform widget strip ── */
.rv-live {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 28px;
    align-items: center;
    margin-top: 40px;
    /* Lives inside the mist platform section, so it reads as a raised panel. */
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 18px 44px rgba(10,16,23,.06);
}
.rv-live__title { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.rv-live__text { color: var(--slate); font-size: 14.5px; margin-bottom: 14px; }
.rv-live__widget {
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
    text-align: center;
}

/* ── Final CTA ── */
.rv-cta__note { color: rgba(255,255,255,.72); font-size: 15px; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    .rv-platform { transition: none; }
    .rv-platform--ready:hover { transform: none; }
}

/* ── Reviews page: responsive ──
   The platform grid is fluid (auto-fit), so only the hero, the trust grid and
   the live strip need a breakpoint of their own. */
@media (max-width: 1080px) {
    .rv-trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
    .rv-live { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
}
@media (max-width: 760px) {
    .rv-hero { padding-top: 138px; }
    .rv-platforms-section { padding-top: 56px; }
    .rv-platform { padding: 20px; }
}
@media (max-width: 560px) {
    .rv-trust { grid-template-columns: 1fr; }
    .rv-hero { padding: 128px 0 48px; }
}


/* ═══════════════════════════════════════════════
   BLOG INDEX (/blog)
   Listing-page refinements only. Everything below is scoped to .blog-listing or
   to the blog hero, because .v2-blog / .blog-card are shared with the landing
   page (home.blade.php) and must not shift there. Same tokens and card language
   as the rest of the site: hairline borders, mono micro-labels, blue accent.
   ═══════════════════════════════════════════════ */

/* ── Header row: section heading on the left, search on the right ── */
.blog-listing { padding-top: 26px; }

/* The `hidden` attribute must win inside this block. Author `display` rules
   outrank the UA stylesheet's `[hidden] { display: none }`, so without these two
   lines the search box would stay visible when JavaScript never runs, and a card
   switched to hidden by the filter would keep occupying its slot in the grid.
   The second selector is deliberately as specific as `.blog-listing .blog-card`,
   which is the rule it has to beat. */
.blog-listing [hidden] { display: none; }
.blog-listing .blog-card[hidden] { display: none; }
.blog-listing__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px 28px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.blog-listing__heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.blog-listing__title {
    font-family: var(--font-display);
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
/* Micro-labels on this page use --slate rather than --faint: at 10–11px the
   faint grey only reaches ~3.1:1 on white, which fails WCAG AA for body text. */
.blog-listing__status { color: var(--slate); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

/* ── Search ── */
.blog-search { display: flex; flex-direction: column; gap: 7px; }
.blog-search__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--slate);
}
.blog-search__field {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 268px;
    padding: 9px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .18s, box-shadow .18s;
}
.blog-search__field:focus-within { border-color: var(--go); box-shadow: 0 0 0 4px var(--go-tint); }
.blog-search__icon { width: 15px; height: 15px; flex: none; color: var(--slate); }
.blog-search__input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14.5px;
    color: var(--ink);
}
.blog-search__input::placeholder { color: var(--slate); }

/* ── Featured guide ── */
.blog-feature { margin-bottom: 26px; }
.blog-feature__link {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.blog-feature__link:hover { transform: translateY(-2px); border-color: #D8DEE6; box-shadow: 0 22px 48px -26px rgba(10,16,23,.32); }
.blog-feature__link:focus-visible { outline: 3px solid var(--go); outline-offset: 3px; }
.blog-feature__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--mist); }
.blog-feature__cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-feature__body { display: flex; flex-direction: column; align-items: flex-start; padding: 30px 32px; }
.blog-feature__eyebrow { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; }
.blog-feature__eyebrow span { color: var(--go); font-weight: 600; }
.blog-feature__title {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.4vw, 29px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.16;
    margin-bottom: 12px;
}
.blog-feature__excerpt { color: var(--slate); font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.blog-feature__more { margin-top: auto; color: var(--go); font-weight: 600; font-size: 14px; }
.blog-feature__link:hover .blog-feature__more { color: var(--go-deep); }

/* ── Cards ── */
.blog-listing .v2-blog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.blog-listing .blog-card {
    display: flex;
    flex-direction: column;
    padding: 16px 16px 20px;
    border-radius: 16px;
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.blog-listing .blog-card:hover { transform: translateY(-3px); border-color: #D8DEE6; box-shadow: 0 18px 40px -24px rgba(10,16,23,.34); }
.blog-listing .blog-card:focus-visible { outline: 3px solid var(--go); outline-offset: 3px; }
/* Fixed 16:9 frame so every cover crops the same way and nothing stretches. */
.blog-listing .blog-card__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 11px;
    background: var(--mist);
    margin-bottom: 16px;
}
.blog-listing .blog-card__cover {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    aspect-ratio: auto;
    object-fit: cover;
    transition: transform .3s ease;
}
.blog-listing .blog-card:hover .blog-card__cover { transform: scale(1.02); }
.blog-listing .blog-card__tags { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-bottom: 10px; }
.blog-listing .blog-card__tags span { color: var(--go); font-weight: 600; }
.blog-listing .blog-card__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-listing .blog-card__excerpt {
    color: var(--slate);
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Pushed to the bottom of the equal-height card so every "Read the post" lines up. */
.blog-listing .blog-card__more { margin-top: auto; color: var(--go); font-weight: 600; font-size: 13.5px; }
.blog-listing .blog-card:hover .blog-card__more { color: var(--go-deep); }

.blog-listing__empty { color: var(--slate); font-size: 15px; padding: 8px 0 4px; }
.blog-listing__empty p { margin-bottom: 12px; }
.blog-listing__reset {
    display: inline-flex;
    align-items: center;
    padding: 9px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--go-deep);
    transition: border-color .18s, background .18s;
}
.blog-listing__reset:hover { border-color: var(--go); background: var(--go-tint); }
.blog-listing__reset:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }

/* Shown only when scripting is unavailable: the guides are all listed and each
   card names its own category, so nothing is unreachable without JavaScript. */
.blog-listing__noscript {
    margin: 0 0 22px;
    padding: 13px 16px;
    background: var(--mist);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--slate);
    font-size: 14px;
    line-height: 1.55;
}

/* ── Category filters ──
   Counts are rendered from the posts themselves (and refreshed against the
   current search), so a chip never advertises articles that are not there. */
.blog-filters { margin-bottom: 26px; }
.blog-filters__label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 10px;
}
.blog-filters__row { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    transition: border-color .18s, background .18s, color .18s;
}
.blog-chip:hover { border-color: var(--go); color: var(--go-deep); }
.blog-chip:focus-visible { outline: 3px solid var(--go); outline-offset: 2px; }
.blog-chip__count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--slate); }
.blog-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.blog-chip.is-active .blog-chip__count { color: rgba(255,255,255,.75); }
/* A category with no match for the current search: still listed (it exists), but
   visibly muted so it does not look like a dead end. */
.blog-chip.is-empty:not(.is-active) { background: var(--mist); color: var(--slate); }
.blog-chip.is-empty:not(.is-active) .blog-chip__count { color: var(--slate); }

/* ── Blog index: responsive ──
   3 columns on desktop, 2 on tablet, 1 on phones. The 1080px step matches the
   breakpoint where the desktop nav collapses, so the grid and the header change
   shape together. */
@media (max-width: 1080px) {
    .blog-listing .v2-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-feature__body { padding: 26px 28px; }
}
@media (max-width: 860px) {
    .blog-feature__link { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .blog-hero { padding-top: 118px; }
}
@media (max-width: 700px) {
    .blog-listing .v2-blog { grid-template-columns: 1fr; }
    .blog-listing__head { align-items: stretch; }
    .blog-search, .blog-search__field { width: 100%; }
    .blog-search__field { min-width: 0; }
    /* Chips scroll sideways inside their own row rather than wrapping into a
       tall block — the scroll stays in the container, so the page never moves. */
    .blog-filters__row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .blog-filters__row .blog-chip { flex: 0 0 auto; }
}
@media (max-width: 560px) {
    .blog-listing { padding-top: 22px; }
    .blog-feature__body { padding: 22px 20px; }
    .blog-listing .blog-card { padding: 14px 14px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-feature__link,
    .blog-listing .blog-card,
    .blog-listing .blog-card__cover { transition: none; }
    .blog-feature__link:hover,
    .blog-listing .blog-card:hover { transform: none; }
    .blog-listing .blog-card:hover .blog-card__cover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Homepage motion & interaction polish
   Reveal classes are armed by JS only for elements still below the
   fold, so nothing that is already painted can flash, and all
   content stays visible when JS is unavailable.
   ══════════════════════════════════════════════════════════════════ */

/* Reveal uses a keyframe animation (not a transition) because most cards declare
   their own `transition` for hover, which would silently override a transition
   based reveal. `backwards` fill keeps the start state during the stagger delay
   and hands transform back to the element afterwards so hover still works. */
.rv { opacity: 0; }
.rv.rv-in {
    opacity: 1;
    animation: rvIn .7s cubic-bezier(.16, .84, .44, 1) backwards;
}
@keyframes rvIn {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to { opacity: 1; transform: none; }
}

/* Hero intro — pure CSS, staggered, runs once on load */
.v2-hero--home .v2-hero__copy > * { animation: v2Rise .7s cubic-bezier(.22, .61, .36, 1) both; }
.v2-hero--home .v2-hero__copy > *:nth-child(1) { animation-delay: .04s; }
.v2-hero--home .v2-hero__copy > *:nth-child(2) { animation-delay: .12s; }
.v2-hero--home .v2-hero__copy > *:nth-child(3) { animation-delay: .20s; }
.v2-hero--home .v2-hero__copy > *:nth-child(4) { animation-delay: .28s; }
.v2-hero--home .v2-hero__copy > *:nth-child(5) { animation-delay: .36s; }
.v2-hero--home .v2-hero__copy > *:nth-child(6) { animation-delay: .44s; }
.v2-hero--home .v2-hero__visual { animation: v2Rise .85s cubic-bezier(.22, .61, .36, 1) .16s both; }
@keyframes v2Rise {
    from { opacity: 0; transform: translate3d(0, 18px, 0); }
    to { opacity: 1; transform: none; }
}

/* Navigation */
.nav__links a { position: relative; transition: color .18s ease; }
.nav__links a::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -6px;
    height: 2px; border-radius: 2px;
    background: currentColor; opacity: .45;
    transform: scaleX(0);
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.nav__links a:hover::after,
.nav__links a.is-active::after { transform: scaleX(1); }
.nav__burger { transition: opacity .18s ease, transform .18s ease; }
.nav__burger:hover { opacity: .68; }
.nav__burger:active { opacity: .5; transform: scale(.95); }
.nav__mobile.open { animation: navDrop .22s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes navDrop {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.nav__mobile a { transition: color .16s ease, padding-left .18s ease; }
.nav__mobile a:hover { color: var(--go-deep); padding-left: 5px; }

/* Buttons */
.v2-btn {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease,
                transform .16s ease, box-shadow .25s ease;
}
.v2-btn--primary:hover { box-shadow: 0 14px 30px -14px rgba(37, 99, 235, .65); }
.v2-btn--ghost:hover { box-shadow: 0 12px 26px -16px rgba(10, 16, 23, .4); }
.v2-btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.v2-btn--primary:active { background: var(--go-deep); }

/* Keyboard focus */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .55);
    outline-offset: 3px;
    border-radius: 6px;
}
.v2-section--cta a:focus-visible,
.v2-section--cta button:focus-visible { outline-color: rgba(255, 255, 255, .8); }

/* Cards: consistent elevation on hover */
.rev-card { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease; }
.rev-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(10, 16, 23, .09); border-color: #D8DFE7; }
.cmp-card { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease; }
.cmp-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(10, 16, 23, .1); }
.cmp-card--rec:hover { box-shadow: 0 24px 54px rgba(37, 99, 235, .2); }
.report-card { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; }
.report-card:hover { transform: translateY(-2px); box-shadow: 0 24px 54px rgba(10, 16, 23, .12); }
.video-card { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease; }
.video-card:hover { transform: translateY(-2px); }
.blog-card { transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s ease, border-color .3s ease; }
.blog-card__cover { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.blog-card:hover .blog-card__cover { transform: scale(1.03); }
.faq-item { transition: box-shadow .28s ease, border-color .28s ease; }
.faq-item:hover { border-color: #D8DFE7; box-shadow: 0 12px 30px -22px rgba(10, 16, 23, .5); }

/* Soft decorative motion */
.v2-hero--home .v2-hero__wash { animation: v2Wash 26s ease-in-out infinite alternate; }
@keyframes v2Wash {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-1.5%, 1.2%, 0) scale(1.035); }
}
.v2-dash__activity { animation: v2Float 8s ease-in-out infinite; }
@keyframes v2Float {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .rv { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
    .v2-hero--home .v2-hero__copy > *,
    .v2-hero--home .v2-hero__visual,
    .v2-hero--home .v2-hero__wash,
    .v2-dash__activity,
    .nav__mobile.open { animation: none !important; }
    .nav__links a::after { transition: none; }
    .rev-card:hover, .cmp-card:hover, .report-card:hover, .video-card:hover, .v2-guarantee:hover { transform: none; }
    .blog-card:hover .blog-card__cover { transform: none; }
    .v2-btn:active, .nav__burger:active { transform: none; }
    .v2-guarantee__arrow { transition: none; }
    .v2-guarantee__wa:hover .v2-guarantee__arrow { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
   Floating starter CTA bar
   Sits just below the fixed navigation (never over it), slides in on the
   first scroll and can be dismissed for the rest of the session.
   ══════════════════════════════════════════════════════════════════ */
.cta-bar {
    position: fixed;
    bottom: calc(12px + env(safe-area-inset-bottom));
    top: auto;
    left: 12px;
    right: 12px;
    margin: 0 auto;
    max-width: 760px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 14px;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 -16px 36px -26px rgba(10, 16, 23, .55), 0 10px 26px -20px rgba(10, 16, 23, .35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .28s ease, transform .28s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}
.cta-bar.is-in { opacity: 1; transform: translateY(0); pointer-events: auto; }
.cta-bar[hidden] { display: none !important; }

/* Reserve room under the page so the bar never covers the footer, and lift the
   WhatsApp bubble above it so the two never collide. */
body.has-cta-bar { padding-bottom: var(--cta-bar-space, 0px); }
body.has-cta-bar .wa-widget { bottom: calc(var(--cta-bar-h, 64px) + 28px + env(safe-area-inset-bottom)); }
.cta-bar__ic {
    flex: none;
    display: grid; place-items: center;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--go-tint);
    color: var(--go-deep);
}
.cta-bar__copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; margin-right: auto; }
.cta-bar__title { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-bar__sub { font-size: 11.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-bar__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.cta-bar__chat {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    color: var(--slate);
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.cta-bar__chat:hover { color: var(--ink); background: var(--mist); border-color: #D5DEE7; }
.cta-bar__chat:active { background: #EDF1F5; }
.cta-bar__cta {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    color: #fff;
    background: var(--go);
    padding: 9px 16px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 10px 22px -12px rgba(37, 99, 235, .8);
    transition: background-color .2s ease, transform .16s ease, box-shadow .2s ease;
}
.cta-bar__cta:hover { background: var(--go-deep); transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(37, 99, 235, .85); }
.cta-bar__cta:active { transform: translateY(0) scale(.985); }
.cta-bar__close {
    flex: none;
    display: grid; place-items: center;
    width: 28px; height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--faint);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease;
}
.cta-bar__close:hover { color: var(--ink); background: var(--mist); }
.cta-bar__close:active { background: #EDF1F5; }

@media (max-width: 700px) {
    .cta-bar {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "ic copy close" "actions actions actions";
        gap: 8px 10px;
        padding: 10px 12px;
        border-radius: 18px;
    }
    .cta-bar__ic { grid-area: ic; }
    .cta-bar__copy { grid-area: copy; margin-right: 0; }
    .cta-bar__close { grid-area: close; align-self: start; }
    .cta-bar__actions { grid-area: actions; }
    .cta-bar__title { font-size: 12.5px; white-space: normal; }
    .cta-bar__sub { font-size: 11px; white-space: normal; }
    .cta-bar__chat, .cta-bar__cta { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .cta-bar { transition: none; transform: none; }
    .cta-bar__cta:hover, .cta-bar__cta:active { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
   Final CTA + premium navy footer
   ══════════════════════════════════════════════════════════════════ */
.v2-section--cta {
    position: relative;
    overflow: hidden;
    padding: 92px 0 96px;
    background:
        radial-gradient(760px 380px at 50% -30%, rgba(37, 99, 235, .42), transparent 72%),
        linear-gradient(180deg, #0B2144 0%, #0A1B33 100%);
    color: #fff;
}
.v2-cta__glow {
    position: absolute;
    left: 50%;
    top: -160px;
    width: 700px;
    height: 360px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(96, 165, 250, .28), transparent 76%);
    pointer-events: none;
}
.v2-section--cta .v2-container { position: relative; }
.v2-section--cta .v2-h2 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.022em; }
.v2-cta__sub {
    max-width: 620px;
    margin: 18px auto 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .74);
}
.v2-final__cta { margin-top: 34px; gap: 14px; }
.v2-section--cta .v2-btn--lg { padding: 15px 26px; gap: 10px; }
.v2-section--cta .v2-btn svg { flex: none; }
.v2-section--cta .v2-btn--primary { box-shadow: 0 18px 40px -18px rgba(37, 99, 235, .95); }
.v2-section--cta .v2-btn--primary:hover { background: #1D4ED8; transform: translateY(-2px); box-shadow: 0 24px 48px -18px rgba(37, 99, 235, 1); }
.v2-section--cta .v2-btn--ghost { border-color: rgba(255, 255, 255, .28); }
.v2-section--cta .v2-btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: #fff; transform: translateY(-2px); }

/* Footer */
.footer--navy {
    background: #081829;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding: 64px 0 30px;
}
.footer--navy .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.footer--navy .footer__brand { display: flex; flex-direction: column; align-items: flex-start; }
.footer--navy .footer__logo { display: inline-flex; align-items: center; }
.footer--navy .footer__logo-img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    /* The official lockup is dark navy ink; a white rendering is the only way it
       reads on navy without a background plate. Geometry is untouched. */
    filter: brightness(0) invert(1);
    transition: opacity .18s ease;
}
.footer--navy .footer__logo:hover .footer__logo-img { opacity: .85; }
.footer--navy .footer__desc {
    margin-top: 18px;
    max-width: 36ch;
    font-size: 14.5px;
    line-height: 1.62;
    color: rgba(255, 255, 255, .66);
}
.footer--navy .footer__meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
    transition: color .18s ease;
}
.footer--navy .footer__meta svg { flex: none; color: rgba(255, 255, 255, .5); }
.footer--navy .footer__meta img { width: 18px; height: 18px; display: block; }
.footer--navy .footer__meta:hover { color: #fff; }
.footer--navy .footer__social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.footer--navy .footer__social a {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.footer--navy .footer__social a:hover {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-2px);
}
.footer--navy .footer__social img { width: 18px; height: 18px; display: block; }
.footer--navy .footer__col h4 {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 16px;
}
.footer--navy .footer__col a {
    display: block;
    padding: 6px 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .8);
    transition: color .18s ease, padding-left .18s ease;
}
.footer--navy .footer__col a:hover { color: #fff; padding-left: 3px; }

/* Payment + trust bar */
.footer--navy .footer__pay-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.footer--navy .footer__pay { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer--navy .footer__pay-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}
.footer--navy .pay-methods-wrap { gap: 10px; }
.footer--navy .pay-chip { height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; border-color: #fff; }
.footer--navy .footer__trust { display: flex; align-items: center; gap: 0; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.footer--navy .footer__trust li {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 22px;
    border-left: 1px solid rgba(255, 255, 255, .1);
    font-size: 13.5px;
    color: rgba(255, 255, 255, .74);
    white-space: nowrap;
}
.footer--navy .footer__trust li:first-child { padding-left: 0; border-left: 0; }
.footer--navy .footer__trust svg { flex: none; color: #4C8DF6; }

/* Bottom bar */
.footer--navy .footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 22px;
}
.footer--navy .footer__copy { font-size: 13px; color: rgba(255, 255, 255, .55); }
.footer--navy .footer__legal { display: flex; gap: 26px; flex-wrap: wrap; }
.footer--navy .footer__legal a { font-size: 13px; color: rgba(255, 255, 255, .66); transition: color .18s ease; }
.footer--navy .footer__legal a:hover { color: #fff; }

@media (max-width: 1080px) {
    .footer--navy .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
    .footer--navy .footer__brand { grid-column: 1 / -1; }
    .footer--navy .footer__desc { max-width: none; }
    .footer--navy .footer__trust li { padding: 0 16px; }
}
@media (max-width: 640px) {
    .v2-section--cta { padding: 68px 0 72px; }
    .v2-section--cta .v2-btn--lg { width: 100%; }
    .footer--navy { padding: 48px 0 26px; }
    .footer--navy .footer__grid { grid-template-columns: 1fr; gap: 28px; }
    .footer--navy .footer__logo-img { height: 30px; }
    .footer--navy .footer__trust { gap: 12px; }
    .footer--navy .footer__trust li { padding: 0; border-left: 0; }
    .footer--navy .footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .footer--navy .footer__col a:hover { padding-left: 0; }
    .footer--navy .footer__social a:hover { transform: none; }
    .v2-section--cta .v2-btn--primary:hover,
    .v2-section--cta .v2-btn--ghost:hover { transform: none; }
}