/*
 * SELUNION REVIEW - Premium-lite glamour design system
 * Deep navy / charcoal bases, champagne gold accents, cream surfaces.
 */

:root {
    /* Palette */
    --ink: #161827;
    --navy: #1f2134;
    --navy-2: #26283d;
    --navy-3: #303350;
    --cream: #f8f2e8;
    --cream-2: #efe5d4;
    --ivory: #fffaf2;
    --gold: #c9a86a;
    --gold-light: #e6cf9c;
    --gold-deep: #a8844a;
    --gold-ink: #7a5c28;
    --blush: #e9c9bd;
    --rose: #d7a594;

    --text-on-dark: #f1e8d8;
    --muted-on-dark: #cfc6b8;
    --text-on-light: #1f2134;
    --muted-on-light: #4a4658;

    --grad-gold: linear-gradient(135deg, #b8955a 0%, #e2c891 45%, #d3b47a 62%, #c09c5f 100%);
    --grad-gold-band: linear-gradient(115deg, #5e4520 0%, #7a5c28 48%, #6b5024 100%);

    /* Tone variables (dark default) */
    --fg: var(--text-on-dark);
    --fg-muted: var(--muted-on-dark);
    --heading-color: var(--cream);
    --accent: var(--gold-light);
    --rule: rgba(201, 168, 106, 0.28);
    --dot: #6d6a7c;
    --dot-active: var(--gold);

    /* Type */
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Layout */
    --container: 1200px;
    --gutter: clamp(16px, 5vw, 40px);
    --space-section: clamp(56px, 9vw, 112px);
    --radius: 14px;
    --shadow-soft: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
    --header-bottom: 64px;
}

/* ============================================
   OVERFLOW PREVENTION - Safety Net
   ============================================ */

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

img, video, iframe, embed, object, svg {
    max-width: 100%;
    height: auto;
}

[class*="grid"] > *,
[class*="flex"] > * {
    min-width: 0;
}

pre, code, .code-block, [class*="code"] {
    max-width: 100%;
    overflow-x: auto;
}

pre code,
.code-block code {
    display: block;
    min-width: 0;
}

.table-wrapper,
[class*="table-"] {
    max-width: 100%;
    overflow-x: auto;
}

p, li, td, th {
    overflow-wrap: break-word;
}

details {
    height: fit-content;
}

:where(p, li, blockquote, figcaption, dd, .prose, .seo-text, article)
  a:not([class]) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

input, textarea, select {
    max-width: 100%;
}

section {
    overflow: clip;
}

/* ============================================
   BASE
   ============================================ */

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-bottom) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--ink);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

body.menu-open { overflow: hidden; }

img { display: block; }

h1, h2, h3, h4 {
    margin: 0 0 0.6em;
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--heading-color);
}

h3 { font-size: 1.25rem; font-weight: 600; }

p { margin: 0 0 1em; }

a { color: inherit; }

:where(p, li, td, figcaption, .prose) a:not([class]) {
    color: var(--accent);
    text-decoration-thickness: 1px;
    transition: color 0.2s ease;
}

:where(p, li, td, figcaption, .prose) a:not([class]):hover {
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--gold-light);
    outline-offset: 3px;
}

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

.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 100;
    padding: 10px 16px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 600;
    border-radius: 4px;
    text-decoration: none;
}

.skip-link:focus { top: 12px; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow { max-width: 920px; }

/* ============================================
   SECTIONS & TONES
   ============================================ */

.section {
    position: relative;
    padding-block: var(--space-section);
    color: var(--fg);
}

.section--ink { background: var(--ink); }
.section--navy { background: var(--navy); }

.section--cream,
.tone-light {
    --fg: var(--text-on-light);
    --fg-muted: var(--muted-on-light);
    --heading-color: var(--navy);
    --accent: var(--gold-ink);
    --rule: rgba(122, 92, 40, 0.25);
    --dot: #cdbf a8;
    --dot: #cbbfa8;
    --dot-active: var(--navy);
    background: var(--cream);
    color: var(--fg);
}

.section-head {
    max-width: 46rem;
    margin: 0 auto clamp(28px, 5vw, 48px);
    text-align: center;
}

.section-head .gold-bar { margin-inline: auto; }

.section-head--left {
    margin-inline: 0;
    text-align: left;
}

.section-head--left .gold-bar { margin-inline: 0; }

.section-title {
    font-size: clamp(1.75rem, 4.2vw, 2.6rem);
    margin-bottom: 0.4em;
}

.section-head .lead { margin-inline: auto; }
.section-head--left .lead { margin-inline: 0; }

.lead {
    max-width: 62ch;
    font-size: 1.125rem;
    color: var(--fg-muted);
}

.eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.gold-bar {
    display: block;
    width: 72px;
    height: 4px;
    margin-bottom: 18px;
    border-radius: 2px;
    background: var(--grad-gold);
}

.gold-bar--wide { width: min(220px, 60%); height: 5px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 14px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: var(--navy);
    color: var(--gold-light);
    font-family: var(--font-serif);
    font-size: 0.9375rem;
    font-weight: 600;
}

/* Prose */
.prose { max-width: 70ch; }
.prose > * + * { margin-top: 0; }

.prose ul,
.prose ol {
    margin: 0 0 1.2em;
    padding: 0;
    list-style: none;
}

.prose ul li,
.prose ol li {
    position: relative;
    margin: 0.5em 0;
    padding-left: 1.75em;
}

.prose ul li::before {
    content: "";
    position: absolute;
    left: 0.25em;
    top: 0.62em;
    width: 0.48em;
    height: 0.48em;
    background: var(--gold);
    transform: rotate(45deg);
}

.prose ol { counter-reset: prose-ol; }

.prose ol li { counter-increment: prose-ol; }

.prose ol li::before {
    content: counter(prose-ol);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--accent);
}

/* ============================================
   SEAL MEDALLION
   ============================================ */

.seal {
    display: block;
    color: var(--gold);
    flex: none;
}

.seal--solid .seal__edge { fill: var(--ink); }

/* ============================================
   BUTTONS & LINKS
   ============================================ */

.btn {
    --btn-bg: var(--grad-gold);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 52px;
    padding: 0.85rem 1.75rem;
    border: 0;
    border-radius: 4px;
    background: var(--btn-bg);
    color: var(--ink);
    font: 600 1rem/1.2 var(--font-sans);
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    isolation: isolate;
    box-shadow: 0 12px 26px -14px rgba(201, 168, 106, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.75s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px -14px rgba(201, 168, 106, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.btn:hover::after { transform: translateX(120%); }

.btn__icon {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform 0.25s ease;
}

.btn:hover .btn__icon { transform: translateX(3px); }

.btn--cream {
    --btn-bg: #fbf5ea;
    color: var(--ink);
    box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.55);
}

.btn--cream:hover {
    box-shadow: 0 20px 36px -14px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(251, 245, 234, 0.25);
}

.btn--sm {
    min-height: 44px;
    padding: 0.5rem 1.1rem;
    font-size: 0.9375rem;
}

.btn--lg {
    min-height: 58px;
    padding-inline: 2.25rem;
    font-size: 1.0625rem;
}

.btn--block { width: 100%; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    color: var(--accent);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.text-link:hover { text-decoration-thickness: 2px; }

.disclosure {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
    margin: 0.85rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--fg-muted);
}

.disclosure__icon {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    flex: none;
    color: var(--gold);
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(22, 24, 39, 0.94);
    border-bottom: 1px solid rgba(201, 168, 106, 0.6);
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 64px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-right: auto;
    color: var(--gold-light);
    text-decoration: none;
}

.site-brand__mark {
    width: 30px;
    height: 30px;
    flex: none;
    color: var(--gold);
}

.site-brand__text {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-actions .header-cta { display: none; }

.menu-toggle {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(201, 168, 106, 0.6);
    border-radius: 6px;
    background: transparent;
    color: var(--gold-light);
    cursor: pointer;
}

.menu-toggle__bars {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
}

.menu-toggle__bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}

.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.site-nav {
    position: fixed;
    top: var(--header-bottom);
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 49;
    overflow-y: auto;
    padding: 24px var(--gutter) 40px;
    background: var(--ink);
    border-top: 1px solid rgba(201, 168, 106, 0.3);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease;
}

.site-nav__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav__list a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(201, 168, 106, 0.22);
    color: var(--cream);
    font-family: var(--font-serif);
    font-size: 1.375rem;
    font-weight: 600;
    text-decoration: none;
}

.site-nav__list a[aria-current="page"] { color: var(--gold-light); }

.site-nav__cta { margin-top: 28px; }

@media (min-width: 420px) {
    .header-actions .header-cta { display: inline-flex; }
}

@media (min-width: 768px) {
    .site-header__inner { min-height: 76px; gap: 20px; }

    .site-brand { margin-right: 0; }

    .menu-toggle { display: none; }

    .site-nav {
        position: static;
        margin-left: auto;
        padding: 0;
        overflow: visible;
        background: none;
        border: 0;
        visibility: visible;
        opacity: 1;
        transition: none;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(16px, 2.6vw, 36px);
    }

    .site-nav__list a {
        position: relative;
        min-height: 44px;
        padding: 0;
        border: 0;
        font-family: var(--font-sans);
        font-size: 0.9375rem;
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .site-nav__list a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        height: 2px;
        background: var(--gold);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
    }

    .site-nav__list a:hover::after,
    .site-nav__list a[aria-current="page"]::after { transform: scaleX(1); }

    .site-nav__cta { display: none; }
}

/* ============================================
   HERO
   ============================================ */

.hero {
    position: relative;
    isolation: isolate;
    background: var(--ink);
    color: var(--text-on-dark);
    --fg: var(--text-on-dark);
    --fg-muted: var(--muted-on-dark);
    --heading-color: var(--cream);
    --accent: var(--gold-light);
}

.hero__media {
    position: relative;
    z-index: -1;
    height: clamp(260px, 72vw, 460px);
    background-color: var(--navy);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--hero-pos-mobile, 60% 30%);
    -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 52%, transparent 100%);
}

.hero__seals {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 46%;
    height: clamp(260px, 72vw, 460px);
    pointer-events: none;
}

.hero__seal {
    position: absolute;
    width: var(--s, 70px);
    opacity: 0.3;
    color: var(--gold-light);
    animation: seal-drift 16s ease-in-out infinite;
}

.hero__seal--1 { --s: 58px; top: 6%; right: 8%; animation-delay: -2s; }
.hero__seal--2 { --s: 42px; top: 4%; right: 52%; animation-delay: -6s; }
.hero__seal--3 { --s: 66px; top: 28%; right: 28%; animation-delay: -9s; }
.hero__seal--4 { --s: 50px; top: 46%; right: 2%; animation-delay: -4s; }
.hero__seal--5 { --s: 38px; top: 58%; right: 44%; animation-delay: -12s; }
.hero__seal--6 { --s: 60px; top: 72%; right: 14%; animation-delay: -7s; }
.hero__seal--7 { --s: 44px; top: 18%; right: -4%; animation-delay: -10s; }

@keyframes seal-drift {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(-6px, 16px, 0) rotate(9deg); }
}

.hero__inner {
    position: relative;
    z-index: 1;
    margin-top: clamp(-100px, -14vw, -48px);
    padding-bottom: clamp(64px, 10vw, 104px);
}

.hero__copy { max-width: 36rem; }

.hero h1,
.hero__title {
    font-size: clamp(2.1rem, 7vw, 3.6rem);
    font-weight: 600;
    line-height: 1.12;
    color: var(--cream);
}

.hero h1 em,
.hero__title em {
    font-style: normal;
    font-weight: 700;
    color: var(--gold-light);
}

.hero__lead {
    margin-bottom: 1.6rem;
    font-size: 1.0625rem;
    color: var(--muted-on-dark);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.hero__actions .btn { width: 100%; }

.hero__link { align-self: center; }

@media (min-width: 768px) {
    .hero {
        display: flex;
        align-items: center;
        min-height: clamp(540px, 78vh, 760px);
    }

    .hero::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(22, 24, 39, 0.94) 0%, rgba(22, 24, 39, 0.6) 40%, rgba(22, 24, 39, 0) 62%);
    }

    .hero__media {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 74%;
        height: auto;
        background-position: var(--hero-pos, 65% 40%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 20%, #000 55%);
        mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.3) 20%, #000 55%);
    }

    .hero__seals {
        bottom: 0;
        height: auto;
        width: 30%;
    }

    .hero__seal { width: calc(var(--s) * 1.5); }

    .hero__inner {
        width: 100%;
        margin-top: 0;
        padding-block: clamp(80px, 10vw, 120px);
    }

    .hero__copy { max-width: min(30rem, 54%); }

    .hero__actions { align-items: flex-start; }

    .hero__actions .btn { width: 100%; max-width: 28rem; }

    .hero__link { align-self: flex-start; }
}

@media (min-width: 1024px) {
    .hero__media { width: 62%; }
    .hero__copy { max-width: min(34rem, 46%); }
    .hero__seal { width: calc(var(--s) * 1.8); }
}

/* Seam: double gold hairline, flourish and straddling seal */
.seam {
    position: relative;
    z-index: 4;
    height: 0;
    color: var(--gold);
    pointer-events: none;
}

.seam__lines {
    position: absolute;
    left: 0;
    right: 0;
    top: -3.75px;
    height: 7.5px;
    border-top: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold-deep);
}

.seam__flourish {
    position: absolute;
    top: 0;
    left: 25%;
    width: 240px;
    height: 48px;
    transform: translate(-50%, -50%);
}

.seam__scroll {
    display: block;
    width: 240px;
    height: 48px;
    color: var(--gold);
}

.seam__small {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    transform: translate(-50%, -50%);
}

.seam__seal {
    position: absolute;
    top: 0;
    left: 50%;
    width: clamp(68px, 9vw, 128px);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.seam__seal .seal__edge { stroke-width: 3; }

@media (max-width: 767.98px) {
    .seam__flourish { display: none; }
}

/* ============================================
   TRUST BADGES
   ============================================ */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin: 0 0 1.6rem;
    padding: 0;
    list-style: none;
}

.badges__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--fg);
    font-size: 0.9375rem;
    font-weight: 500;
}

.badges__seal { width: 44px; height: 44px; }

/* ============================================
   CHECKLIST
   ============================================ */

.checklist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule);
}

.checklist__box {
    width: 28px;
    height: 28px;
    flex: none;
    margin-top: 2px;
    stroke: var(--gold);
    stroke-width: 1.8;
}

.checklist__tick {
    stroke-width: 2.4;
    stroke-dasharray: 20;
    stroke-dashoffset: 0;
}

.reveal-ready .checklist__item:not(.is-visible) .checklist__tick { stroke-dashoffset: 20; }

.checklist__item.is-visible .checklist__tick {
    transition: stroke-dashoffset 0.5s ease;
    transition-delay: calc(var(--i, 0) * 110ms + 200ms);
}

.checklist__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.checklist__text strong {
    font-weight: 600;
    color: var(--heading-color);
}

.checklist__text span { color: var(--fg-muted); }

@media (min-width: 768px) {
    .checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================
   ROSETTE
   ============================================ */

.rosette {
    display: block;
    width: clamp(150px, 32vw, 240px);
    color: var(--gold);
}

/* ============================================
   PROS & CONS SPLIT
   ============================================ */

.proscons {
    position: relative;
    background: var(--navy);
    color: var(--text-on-dark);
}

.proscons__head {
    padding-top: var(--space-section);
    padding-bottom: clamp(28px, 4vw, 44px);
    text-align: center;
}

.proscons__head .gold-bar { margin-inline: auto; }
.proscons__head .lead { margin-inline: auto; }

.proscons__split {
    position: relative;
    isolation: isolate;
}

.proscons__panel--pros {
    --fg: var(--text-on-light);
    --fg-muted: var(--muted-on-light);
    --heading-color: var(--navy);
    --accent: var(--gold-ink);
    --rule: rgba(122, 92, 40, 0.22);
    background: var(--cream);
    color: var(--text-on-light);
}

.proscons__panel--cons {
    background: var(--navy);
    color: var(--text-on-dark);
}

.proscons__body {
    max-width: 36rem;
    margin-inline: auto;
    padding: 44px var(--gutter) 52px;
}

.proscons__title {
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 0.8em;
}

.proscons__list {
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.proscons__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
}

.proscons__list li:last-child { border-bottom: 0; }

.pc-icon {
    width: 26px;
    height: 26px;
    flex: none;
    margin-top: 1px;
}

.pc-icon--x { color: #b9a27a; }

.proscons__zigzag {
    height: 16px;
    background: var(--navy);
    line-height: 0;
}

.proscons__zigzag svg {
    display: block;
    width: 100%;
    height: 16px;
}

.proscons__bolt { display: none; }

@media (min-width: 768px) {
    .proscons__split {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: var(--navy);
    }

    .proscons__split::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--cream);
        clip-path: polygon(0 0, 51.6% 0, 47.12% 53.75%, 49.04% 52.5%, 46.8% 100%, 0 100%);
    }

    .proscons__panel--pros,
    .proscons__panel--cons { background: transparent; }

    .proscons__zigzag { display: none; }

    .proscons__bolt {
        display: block;
        position: absolute;
        top: 0;
        left: 42%;
        width: 16%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3));
    }

    .proscons__body { padding-block: clamp(56px, 7vw, 88px); }

    .proscons__panel--pros .proscons__body {
        margin-left: auto;
        margin-right: 0;
        padding-right: clamp(56px, 9vw, 120px);
    }

    .proscons__panel--cons .proscons__body {
        margin-left: 0;
        margin-right: auto;
        padding-left: clamp(56px, 9vw, 120px);
    }
}

/* ============================================
   GOLD TABLES
   ============================================ */

.tscroll-shell {
    --table-bg: #23253a;
    --table-sticky: #23253a;
    --grid-line: rgba(201, 168, 106, 0.45);
    --fg: var(--text-on-dark);
    --fg-muted: var(--muted-on-dark);
    --accent: var(--gold-light);
    position: relative;
}

.tscroll-shell--light {
    --table-bg: var(--ivory);
    --table-sticky: var(--ivory);
    --grid-line: rgba(122, 92, 40, 0.3);
    --fg: var(--text-on-light);
    --fg-muted: var(--muted-on-light);
    --accent: var(--gold-ink);
}

.tscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--gold);
    border-radius: 6px;
    background: var(--table-bg);
    color: var(--fg);
}

.tscroll-shell::after {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    width: 40px;
    pointer-events: none;
    border-radius: 0 6px 6px 0;
    background: linear-gradient(to right, rgba(35, 37, 58, 0), var(--table-bg));
}

.tscroll-shell--light::after {
    background: linear-gradient(to right, rgba(255, 250, 242, 0), var(--table-bg));
}

.gtable {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--fg);
}

.gtable th,
.gtable td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
}

.gtable th:last-child,
.gtable td:last-child { border-right: 0; }

.gtable tbody tr:last-child > * { border-bottom: 0; }

.gtable thead th {
    background: var(--grad-gold);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    vertical-align: bottom;
}

.tscroll-shell--light .gtable thead th {
    background: var(--navy);
    color: var(--cream);
}

.gtable tbody th {
    font-family: var(--font-sans);
    font-weight: 600;
    color: var(--fg);
}

.gtable td { color: var(--fg-muted); }

.gtable tbody tr { transition: background-color 0.2s ease; }

.gtable :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--table-sticky);
    box-shadow: 1px 0 0 var(--grid-line);
}

.gtable thead th:first-child {
    z-index: 2;
    background: var(--grad-gold);
}

.tscroll-shell--light .gtable thead th:first-child { background: var(--navy); }

.gtable--compare td {
    text-align: center;
    vertical-align: middle;
}

.gtable--compare thead th:not(:first-child) { text-align: center; }

.mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--fg);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
}

.mark--no { stroke: #b9a27a; }

.mark-neutral {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

.mark-neutral svg {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: var(--gold);
    stroke-width: 1.8;
}

.mark-text {
    font-size: 0.875rem;
    color: var(--fg-muted);
}

.tnote {
    margin: 14px 0 0;
    font-size: 0.9375rem;
    color: var(--fg-muted);
}

@media (min-width: 1024px) {
    .tscroll-shell::after { display: none; }
    .gtable tbody tr:hover > * { background-color: rgba(201, 168, 106, 0.08); }
    .gtable tbody tr:hover > :first-child { background-color: var(--table-sticky); }
}

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

.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
}

.faq {
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: var(--ivory);
    color: var(--text-on-light);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq:hover { box-shadow: 0 12px 26px -20px rgba(31, 33, 52, 0.45); }

.faq[open] {
    border-color: var(--gold-deep);
    box-shadow: 0 16px 30px -22px rgba(31, 33, 52, 0.5);
}

.faq__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 12px 16px;
    cursor: pointer;
    list-style: none;
}

.faq__summary::-webkit-details-marker { display: none; }
.faq__summary::marker { content: ""; }

.faq__summary:focus-visible {
    outline: 2px solid var(--gold-ink);
    outline-offset: 2px;
}

.faq__plus {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    transition: transform 0.3s ease;
}

.faq__plus svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--gold-ink);
    stroke-width: 2;
    stroke-linecap: round;
}

.faq__plus-v {
    transform-origin: 12px 12px;
    transition: transform 0.3s ease;
}

.faq[open] .faq__plus { transform: rotate(180deg); }
.faq[open] .faq__plus-v { transform: scaleY(0); }

.faq__q {
    flex: 1;
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--navy);
}

.faq__seal {
    width: 32px;
    height: 32px;
    color: var(--gold-deep);
    transition: transform 0.4s ease;
}

.faq:hover .faq__seal { transform: rotate(18deg); }

.faq__a {
    padding: 0 18px 18px 58px;
    color: var(--muted-on-light);
}

.faq__a p { margin: 0; }

.faq__a a {
    color: var(--gold-ink);
    font-weight: 500;
}

.faq[open] .faq__a { animation: faq-in 0.3s ease; }

@keyframes faq-in {
    from { transform: translateY(-4px); }
    to { transform: none; }
}

.faq-section__footer {
    margin: 28px 0 0;
    text-align: center;
    font-weight: 500;
}

@media (max-width: 479.98px) {
    .faq__seal { display: none; }
    .faq__a { padding-left: 18px; }
}

/* ============================================
   NOTE PANEL
   ============================================ */

.note-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: clamp(22px, 4vw, 36px);
    border: 1px solid var(--gold);
    border-radius: 4px;
    box-shadow: inset 0 0 0 5px transparent, inset 0 0 0 6px rgba(201, 168, 106, 0.55);
}

.note-panel--cream {
    --fg: var(--text-on-light);
    --fg-muted: var(--muted-on-light);
    --heading-color: var(--navy);
    --accent: var(--gold-ink);
    background: var(--ivory);
    color: var(--text-on-light);
}

.note-panel--navy {
    --fg: var(--text-on-dark);
    --fg-muted: var(--muted-on-dark);
    --heading-color: var(--cream);
    --accent: var(--gold-light);
    background: var(--navy-2);
    color: var(--text-on-dark);
}

.note-panel__seal {
    width: 52px;
    height: 52px;
    color: var(--gold);
}

.note-panel--cream .note-panel__seal { color: var(--gold-deep); }

.note-panel__body > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .note-panel {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
}

/* ============================================
   CHAMFERED DOUBLE-GOLD FRAME
   ============================================ */

.frame-wrap { filter: drop-shadow(0 18px 22px rgba(31, 33, 52, 0.16)); }

.frame {
    --c: 18px;
    position: relative;
    height: 100%;
    padding: 1.5px;
    background: var(--gold);
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.frame__inner {
    --c: 17.4px;
    position: relative;
    isolation: isolate;
    height: 100%;
    padding: clamp(18px, 3vw, 26px);
    background: var(--ivory);
    color: var(--text-on-light);
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.frame__inner::before,
.frame__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.frame__inner::before {
    --c: 14px;
    inset: 5px;
    background: var(--gold);
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

.frame__inner::after {
    --c: 13.4px;
    inset: 6.5px;
    background: var(--ivory);
    clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}

/* ============================================
   SWIPE TRACK (carousels & card rows)
   ============================================ */

.swipe { position: relative; }

.swipe__track {
    position: relative;
    display: flex;
    gap: var(--slide-gap, 16px);
    margin: 0;
    padding: 8px var(--gutter) 18px;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.swipe__track::-webkit-scrollbar { display: none; }

.swipe__track > * {
    flex: 0 0 var(--slide-w, 78%);
    scroll-snap-align: center;
}

.swipe.is-dragging .swipe__track {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.swipe__dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 8px;
}

.swipe__dot {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.swipe__dot::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dot);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.swipe__dot.is-active::before {
    background: var(--dot-active);
    transform: scale(1.25);
}

/* ============================================
   FINAL CTA BAND
   ============================================ */

.cta-band {
    --fg: #fbf5ea;
    --fg-muted: #fbf5ea;
    --heading-color: #fbf5ea;
    --accent: #fbf5ea;
    position: relative;
    padding-block: clamp(64px, 9vw, 112px);
    color: #fbf5ea;
    text-align: center;
    background:
        radial-gradient(ellipse 45% 70% at 8% 0%, rgba(255, 236, 200, 0.12), transparent 70%),
        radial-gradient(ellipse 40% 60% at 96% 100%, rgba(255, 236, 200, 0.1), transparent 70%),
        linear-gradient(115deg, transparent 0%, transparent 38%, rgba(255, 240, 210, 0.07) 50%, transparent 62%),
        var(--grad-gold-band);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
}

.cta-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 760px;
}

.cta-band__seal {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    color: var(--gold-light);
}

.cta-band__title {
    font-size: clamp(1.9rem, 5vw, 3rem);
    color: #fbf5ea;
    margin-bottom: 0.45em;
}

.cta-band__text {
    max-width: 52ch;
    margin-bottom: 1.8rem;
    font-size: 1.0625rem;
}

.cta-band .btn { width: 100%; max-width: 22rem; }

.cta-band__notes {
    margin-top: 20px;
    font-size: 0.875rem;
    line-height: 1.55;
}

.cta-band__notes p { margin: 0 0 0.3em; }

.cta-band a:not([class]) { color: #fbf5ea; }

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background: var(--ink);
    color: var(--muted-on-dark);
    font-size: 0.9375rem;
}

.site-footer__rule {
    height: 7.5px;
    border-top: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold-deep);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-block: 48px 32px;
}

.site-footer__brand p { margin-top: 12px; max-width: 38ch; }

.site-footer__title {
    margin: 0 0 12px;
    color: var(--gold-light);
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
}

.site-footer__nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--text-on-dark);
    text-decoration: none;
}

.site-footer__nav a:hover {
    color: var(--gold-light);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.site-footer__legal p { margin-bottom: 0.8em; }
.site-footer__legal strong { color: var(--text-on-dark); }

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-block: 20px 32px;
    border-top: 1px solid rgba(201, 168, 106, 0.3);
}

.site-footer__bottom p { margin: 0; }

.age-pill {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 4px 14px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--gold-light);
    font-weight: 600;
}

@media (min-width: 768px) {
    .site-footer__inner {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
        gap: 48px;
        padding-block: 64px 40px;
    }
}

/* ============================================
   SCROLL REVEAL & LINE DRAW
   ============================================ */

.reveal-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal-ready .reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal-ready .draw-path {
    stroke-dasharray: var(--len, 0);
    stroke-dashoffset: var(--len, 0);
    transition: stroke-dashoffset 1.6s ease;
}

.reveal-ready .is-visible .draw-path,
.reveal-ready .draw-path.is-visible {
    stroke-dashoffset: 0;
}

/* Pause continuous animation offscreen or in hidden tabs */
.anim-zone.is-offscreen *,
.doc-hidden .anim-zone * {
    animation-play-state: paused !important;
}

/* ============================================
   HOMEPAGE
   ============================================ */

.hero__meta {
    margin: 18px 0 0;
    font-size: 0.875rem;
    color: var(--fg-muted);
}

/* Verdict */
.verdict__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: center;
}

.verdict__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    text-align: center;
}

.verdict__badge .rosette { margin-bottom: 18px; }

.verdict__caption strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-serif);
    font-size: 1.3rem;
    color: var(--gold-light);
}

.verdict__caption span {
    display: block;
    max-width: 26ch;
    font-size: 0.9375rem;
    color: var(--muted-on-dark);
}

.criteria {
    display: grid;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

.criteria li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}

.criteria strong {
    font-weight: 600;
    color: var(--gold-light);
}

.criteria span { color: var(--muted-on-dark); }

@media (min-width: 768px) {
    .verdict__grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
        gap: 56px;
    }

    .criteria li {
        grid-template-columns: 9rem minmax(0, 1fr);
        gap: 16px;
    }
}

/* How it works */
.steps__route {
    position: relative;
    color: var(--gold);
}

.steps__line {
    position: absolute;
    pointer-events: none;
}

.steps__line--mob {
    top: 0;
    left: 0;
    width: 22px;
    height: 100%;
}

.steps__line--desk {
    display: none;
    inset: 0;
    width: 100%;
    height: 100%;
}

.reveal-ready .route-path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.2s ease 0.2s;
}

.reveal-ready .steps__route.is-visible .route-path { stroke-dashoffset: 0; }

.steps__list {
    position: relative;
    display: grid;
    gap: 24px;
    margin: 0;
    padding: 0 0 0 34px;
    list-style: none;
}

.step {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 18px;
    border: 1.5px solid var(--gold);
    border-radius: 18px;
    background: var(--navy-2);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.step:hover { border-color: var(--gold-light); }

.step__icon { color: var(--gold); }

.step__icon svg,
.step__icon .seal {
    width: 100%;
    height: auto;
}

.step__bar {
    display: block;
    width: 120px;
    max-width: 60%;
    height: 6px;
    margin-bottom: 12px;
    border-radius: 2px;
    background: var(--grad-gold);
}

.step__num {
    margin: 0 0 2px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.step__title { margin-bottom: 0.4em; }

.step__body p:last-child {
    margin: 0;
    color: var(--muted-on-dark);
}

@media (min-width: 768px) {
    .steps__line--mob { display: none; }
    .steps__line--desk { display: block; }

    .steps__list {
        grid-auto-rows: 1fr;
        gap: 40px;
        padding: 0 7%;
    }

    .step {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 26px;
        align-items: center;
        padding: 28px 30px;
    }
}

/* Profile carousel */
.section.profiles {
    padding-top: calc(var(--space-section) + 34px);
    background: linear-gradient(to bottom, var(--ink) 0 34px, var(--cream) 34px);
}

.profiles::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 33px;
    height: 1.5px;
    background: var(--gold);
}

.profiles__seal {
    position: absolute;
    top: 34px;
    left: 50%;
    z-index: 1;
    width: 56px;
    height: 56px;
    color: var(--gold-deep);
    transform: translate(-50%, -50%);
}

.profiles__seal .seal__edge { fill: var(--cream); }

.profiles .pill { margin: 0 0 14px; }

.profiles .swipe {
    --slide-gap: 18px;
    --slide-w: 74%;
    max-width: 1400px;
    margin-inline: auto;
}

.profiles .swipe__track { padding-block: 16px 22px; }

.pcard { display: flex; }

.pcard__wrap {
    width: 100%;
    transition: transform 0.35s ease;
}

.pcard__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 30px 22px 24px;
    text-align: center;
}

.pcard__photo {
    width: 132px;
    aspect-ratio: 1;
    padding: 4px;
    border-radius: 50%;
    background: var(--grad-gold);
}

.pcard__photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 35%;
}

.pcard__bar {
    width: 100%;
    margin: 4px 0 0;
    padding: 8px 14px;
    border-radius: 2px;
    background: var(--navy);
    color: var(--cream);
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
}

.pcard__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pcard__tags li {
    padding: 4px 12px;
    border: 1px solid rgba(122, 92, 40, 0.45);
    border-radius: 999px;
    background: #fff;
    color: var(--gold-ink);
    font-size: 0.8125rem;
    font-weight: 500;
}

.pcard__bio {
    flex: 1;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted-on-light);
}

.pcard__flip {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    padding: 8px 16px;
    border: 1px solid var(--gold-deep);
    border-radius: 4px;
    background: transparent;
    color: var(--navy);
    font: 600 0.875rem/1.2 var(--font-sans);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.pcard__flip svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.pcard__flip:hover { background: var(--cream-2); }

.pcard.is-flipped .pcard__flip {
    border-color: var(--gold);
    color: var(--cream);
}

.pcard.is-flipped .pcard__flip:hover { background: var(--navy-3); }

.pcard__tip {
    position: absolute;
    inset: 10px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 24px 22px 76px;
    background: var(--navy);
    color: var(--cream);
    text-align: left;
}

.pcard__tip[hidden] { display: none; }

.pcard__tip p { margin: 0; }

.pcard__tip-title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--gold-light);
}

.profiles__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
    text-align: center;
}

.profiles__disclosure { justify-content: center; }

@media (min-width: 560px) {
    .profiles .swipe { --slide-w: 46%; }
}

@media (min-width: 1024px) {
    .profiles .swipe { --slide-w: 25%; --slide-gap: 22px; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pcard__wrap:hover {
        transform: perspective(900px) rotateX(2deg) rotateY(-5deg) translateY(-6px);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pcard__tip:not([hidden]) { animation: tip-flip 0.45s ease; }
}

@keyframes tip-flip {
    from { transform: perspective(700px) rotateY(-90deg); }
    to { transform: none; }
}

/* ============================================
   IS SELUNION LEGIT PAGE
   ============================================ */

.hero .badges { margin-bottom: 1.4rem; }

.hero .badges__item { color: var(--cream); }

.legit-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    align-items: start;
}

.legit-split .prose { max-width: 62ch; }

.prose h3 { margin-top: 1.5em; }

.legit-split .note-panel__body h3 { margin-top: 0; }

.privacy__seal {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    color: var(--gold-deep);
}

.privacy__text {
    max-width: none;
    margin-bottom: 28px;
}

.subhead { margin-top: 1.8em; }

.flags {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 36px;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.flags li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
}

.flags svg {
    width: 26px;
    height: 26px;
    flex: none;
    margin-top: 1px;
    color: var(--blush);
}

.flags strong { color: var(--cream); }

.flags__note { margin: 0 0 1rem; }

.tips {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.tips__media { margin: 0; }

.tips__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 60% 40%;
}

.tips__list { max-width: none; }

.tips__list ol { margin-bottom: 0; }

.verdict-close {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 24px;
    margin-top: clamp(36px, 6vw, 56px);
    text-align: center;
}

.verdict-close h3 { color: var(--gold-light); }

.verdict-close p { max-width: 60ch; margin: 0 auto; }

@media (min-width: 768px) {
    .flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .verdict-close {
        grid-template-columns: auto minmax(0, 1fr);
        justify-items: start;
        gap: 48px;
        text-align: left;
    }

    .verdict-close p { margin: 0; }
}

@media (min-width: 1024px) {
    .legit-split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; }
    .tips { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
}

/* ============================================
   PRICING PAGE
   ============================================ */

.quick .note-panel {
    max-width: 860px;
    margin-inline: auto;
}

.quick .note-panel .section-title {
    font-size: clamp(1.6rem, 3.8vw, 2.2rem);
}

/* Billing model cards */
.billing {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

.billing-card {
    padding: 28px 24px;
    border: 1.5px solid var(--gold);
    border-radius: 18px;
    background: var(--navy-2);
    box-shadow: var(--shadow-soft);
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.billing-card:hover { border-color: var(--gold-light); }

.billing-card__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 14px;
    color: var(--gold);
}

.billing-card p:last-child {
    margin: 0;
    color: var(--muted-on-dark);
}

.billing-note {
    margin: 28px 0 0;
    text-align: center;
    font-weight: 500;
    color: var(--gold-light);
}

@media (min-width: 768px) {
    .billing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
    }

    .billing-card { padding: 36px 34px; }
}

/* Budget scenario cards */
.scenarios .swipe {
    --slide-gap: 18px;
    --slide-w: 78%;
    max-width: 1200px;
    margin-inline: auto;
}

.scenarios .swipe__track { padding-block: 16px 22px; }

.scenario { display: flex; }

.scenario .frame-wrap { width: 100%; }

.scenario__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 24px 26px;
}

.scenario__tag {
    margin: 0;
    font-size: 1.2rem;
    color: var(--navy);
}

.scenario__amount {
    margin: 0;
    font-family: var(--font-serif);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--gold-ink);
}

.scenario__amount span {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--muted-on-light);
}

.scenario__label {
    margin: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.875rem;
    color: var(--muted-on-light);
}

.scenario__list {
    display: grid;
    gap: 12px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.scenario__list li {
    position: relative;
    padding-left: 1.5em;
    color: var(--text-on-light);
}

.scenario__list li::before {
    content: "";
    position: absolute;
    left: 0.2em;
    top: 0.6em;
    width: 0.5em;
    height: 0.5em;
    background: var(--gold);
    transform: rotate(45deg);
}

.scenarios__note {
    margin-top: 6px;
    text-align: center;
}

@media (min-width: 560px) {
    .scenarios .swipe { --slide-w: 46%; }
}

@media (min-width: 1024px) {
    .scenarios .swipe { --slide-w: 31%; --slide-gap: 22px; }
    .scenarios .swipe__dots { display: none; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .scenario .frame-wrap { transition: transform 0.35s ease; }
    .scenario .frame-wrap:hover { transform: translateY(-6px); }
}

/* Cancellation timeline */
.timeline-wrap {
    position: relative;
    color: var(--gold);
}

.timeline__line {
    position: absolute;
    top: 30px;
    left: 0;
    width: 60px;
    height: calc(100% - 60px);
    pointer-events: none;
}

.reveal-ready .timeline-wrap.is-visible .route-path { stroke-dashoffset: 0; }

.timeline {
    position: relative;
    display: grid;
    gap: 26px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.timeline__item {
    position: relative;
    min-height: 60px;
    padding: 4px 0 4px 78px;
}

.timeline__seal {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    color: var(--gold);
}

.timeline__item h3 {
    margin-bottom: 0.25em;
    font-size: 1.2rem;
}

.timeline__item p {
    margin: 0;
    color: var(--muted-on-dark);
}

.timeline-wrap + .tnote { margin-top: 28px; }

/* Hidden-fee checklist */
.fees__foot {
    max-width: 62ch;
    margin: 28px 0 0;
    font-weight: 500;
}

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

/* Sticky group jump-nav */
.faq-nav {
    position: sticky;
    top: var(--header-bottom);
    z-index: 40;
    background: var(--ink);
    border-bottom: 1px solid rgba(201, 168, 106, 0.5);
}

.faq-nav__list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 10px var(--gutter);
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.faq-nav__list::-webkit-scrollbar { display: none; }

.faq-nav__list li { flex: none; }
.faq-nav__list li:first-child { margin-left: auto; }
.faq-nav__list li:last-child { margin-right: auto; }

.faq-nav__pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 16px;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: transparent;
    color: var(--gold-light);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.faq-nav__pill:hover {
    background: var(--grad-gold);
    color: var(--ink);
    transform: translateY(-1px);
}

/* Expand-all toolbar */
.faq-toolbar {
    padding-block: 14px;
    background: var(--navy);
    border-bottom: 1px solid rgba(201, 168, 106, 0.3);
    color: var(--text-on-dark);
}

.faq-toolbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
}

.faq-toolbar__text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted-on-dark);
}

.faq-toolbar__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: transparent;
    color: var(--gold-light);
    font: 600 0.9375rem/1.2 var(--font-sans);
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.faq-toolbar__btn svg {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform 0.3s ease;
}

.faq-toolbar__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.faq-toolbar__btn:hover {
    background: var(--gold);
    color: var(--ink);
}

/* Question groups */
.faq-group {
    padding-block: clamp(44px, 7vw, 80px);
    scroll-margin-top: 64px;
}

.faq-group + .faq-group { border-top: 1px solid var(--gold); }

.faq-group__head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
}

.faq-group__icon {
    width: 48px;
    height: 48px;
    margin-top: 4px;
    color: var(--gold-deep);
}

.section--navy .faq-group__icon { color: var(--gold); }

.faq-group__head .gold-bar { margin-bottom: 12px; }

.faq-group__head .section-title {
    margin-bottom: 0.25em;
    font-size: clamp(1.6rem, 4vw, 2.2rem);
}

.faq-group__head p {
    margin: 0;
    color: var(--fg-muted);
}

@media (min-width: 768px) {
    .faq-group__head { gap: 20px; }

    .faq-group__icon {
        width: 64px;
        height: 64px;
    }
}

/* Affiliate disclosure panel */
.disclose .note-panel {
    max-width: 860px;
    margin-inline: auto;
}

.disclose .section-title {
    font-size: clamp(1.5rem, 3.6vw, 2.1rem);
}

@media (prefers-reduced-motion: reduce) {
    .faq-nav__pill:hover { transform: none; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

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

    .reveal-ready .reveal {
        opacity: 1;
        transform: none;
    }

    .reveal-ready .draw-path,
    .reveal-ready .checklist__item .checklist__tick {
        stroke-dashoffset: 0 !important;
    }

    .hero__seal { animation: none; }

    .btn:hover,
    .btn:hover .btn__icon { transform: none; }
}