/*
 * Dialogmia Review - design system
 * Light-only warm cream theme with navy, steel blue and terracotta ribbons.
 */

:root {
    --cream: #FBF3EA;
    --cream-2: #F7ECDF;
    --peach: #F6E6D6;
    --peach-2: #F0D9C3;
    --navy: #23455F;
    --navy-deep: #1B344A;
    --steel: #4E7FA0;
    --steel-ink: #356585;
    --steel-light: #8DB3C9;
    --pale-blue: #C9DCE7;
    --terracotta: #D9703F;
    --terracotta-ink: #B5532A;
    --coral-btn: #BC5529;
    --coral-btn-hover: #A3471F;
    --teal: #2B6680;
    --text: #33475A;
    --muted: #56626E;
    --slate: #6B7A88;
    --line: #D8CCBF;
    --white: #FFFFFF;
    --green: #2E9E5B;
    --on-navy: #F4EDE4;
    --on-navy-muted: #D2E2EC;

    --font-head: "Signika", "Trebuchet MS", "Segoe UI", sans-serif;
    --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-brand: "Alegreya", Georgia, "Times New Roman", serif;

    --radius-card: 18px;
    --radius-panel: 22px;
    --radius-pill: 999px;
    --shadow-card: 0 18px 34px -14px rgba(118, 62, 28, 0.38), 0 4px 12px rgba(35, 69, 95, 0.10);
    --shadow-soft: 0 10px 26px -12px rgba(35, 69, 95, 0.28);

    --container: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --section-y: clamp(56px, 8vw, 104px);
    --wave-h: clamp(32px, 5vw, 80px);
    --header-bottom: 64px;

    interpolate-size: allow-keywords;
}

/* ============================================
   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 & typography
   ============================================ */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-bottom) + 12px);
}

body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    color: var(--navy);
    line-height: 1.18;
    margin: 0 0 0.6em;
    font-weight: 600;
    letter-spacing: -0.005em;
}

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.35rem); }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem); font-weight: 500; }

p { margin: 0 0 1em; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

a {
    color: var(--steel-ink);
    text-decoration-thickness: 1.5px;
}

a:hover { color: var(--navy); }

strong { color: var(--navy); font-weight: 700; }

:focus-visible {
    outline: 3px solid var(--steel);
    outline-offset: 3px;
    border-radius: 6px;
}

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

.section {
    position: relative;
    padding-block: var(--section-y);
}

.section-head {
    max-width: 720px;
    margin: 0 auto clamp(28px, 4vw, 44px);
    text-align: center;
}

.section-head p {
    color: var(--muted);
}

.lead {
    font-size: 1.125rem;
    color: var(--text);
}

.updated {
    font-size: 0.9375rem;
    color: var(--muted);
}

.visually-hidden {
    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: 200;
    background: var(--navy);
    color: var(--white);
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
}

.skip-link:focus { top: 12px; color: var(--white); }

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 12px 26px;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.btn--coral {
    background: var(--coral-btn);
    color: var(--white);
    box-shadow: 0 10px 22px -10px rgba(188, 85, 41, 0.75);
}

.btn--coral:hover {
    background: var(--coral-btn-hover);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -10px rgba(163, 71, 31, 0.8);
}

.btn--coral:active { transform: translateY(0); }

.btn--navy {
    background: var(--navy);
    color: var(--white);
}

.btn--navy:hover { background: var(--navy-deep); transform: translateY(-2px); }

.btn--outline {
    background: transparent;
    color: var(--navy);
    box-shadow: inset 0 0 0 2px var(--navy);
}

.btn--outline:hover { background: var(--navy); color: var(--white); }

.btn--sm {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 1rem;
}

.btn--lg {
    min-height: 56px;
    padding: 15px 30px;
    font-size: 1.125rem;
}

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

.btn__icon {
    width: 1.15em;
    height: 1.15em;
    transition: transform 0.2s ease;
}

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

.btn--pulse.is-visible,
.is-visible .btn--pulse {
    animation: btn-pulse 1.4s ease-out 0.4s 1;
}

@keyframes btn-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 112, 63, 0.55); }
    100% { box-shadow: 0 0 0 18px rgba(217, 112, 63, 0); }
}

/* ============================================
   Icons
   ============================================ */
.icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: middle;
}

.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.icon-circle .icon { width: 24px; height: 24px; }

.icon-circle--peach { background: var(--peach); color: var(--navy); box-shadow: inset 0 0 0 1px var(--peach-2); }
.icon-circle--terracotta { background: var(--peach); color: var(--terracotta-ink); }
.icon-circle--slate { background: transparent; color: var(--slate); }
.icon-circle--slate .icon { width: 34px; height: 34px; }
.icon-circle--steel { background: var(--peach); color: var(--steel-ink); }

.icon-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.icon-item__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 4px 0 4px;
}

.icon-item__body p {
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
}

/* ============================================
   Header & navigation
   ============================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--cream);
    border-bottom: 1px solid rgba(35, 69, 95, 0.08);
    transition: box-shadow 0.25s ease;
}

.site-header.is-scrolled {
    box-shadow: 0 6px 20px -12px rgba(35, 69, 95, 0.35);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    min-height: 44px;
    flex: 0 0 auto;
}

.site-brand__text {
    font-family: var(--font-brand);
    font-weight: 700;
    font-size: clamp(1.55rem, 1.3rem + 1vw, 2.05rem);
    line-height: 1;
    color: var(--steel);
    letter-spacing: -0.01em;
}

.site-brand__accent { color: #CF6634; }

.site-brand--light .site-brand__text { color: var(--steel-light); }
.site-brand--light .site-brand__accent { color: #EE9466; }

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

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

.menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--peach);
    cursor: pointer;
}

.menu-toggle__bar {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--navy);
    transition: transform 0.25s ease, opacity 0.2s ease;
}

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

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

.site-nav__link {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-family: var(--font-head);
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--navy);
    text-decoration: none;
    position: relative;
}

.site-nav__link.is-active { font-weight: 600; }

.site-nav__micro {
    margin: 10px 0 0;
    font-size: 0.875rem;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 767.98px) {
    .site-nav {
        position: fixed;
        top: var(--header-bottom);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        z-index: 99;
        background: var(--cream);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px var(--gutter) 32px;
        border-top: 1px solid var(--line);
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition: clip-path 0.35s ease, visibility 0s linear 0.35s;
    }

    .site-nav.is-open {
        visibility: visible;
        clip-path: inset(0 0 0 0);
        transition: clip-path 0.35s ease, visibility 0s;
    }

    .site-nav__list li { border-bottom: 1px solid var(--line); }

    .site-nav__link { padding: 6px 4px; }

    .site-nav__link.is-active { color: var(--terracotta-ink); }

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

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

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

    .menu-toggle { display: none; }

    .site-nav {
        display: flex;
        flex: 1 1 auto;
        justify-content: center;
    }

    .site-nav__list {
        display: flex;
        align-items: center;
        gap: clamp(8px, 2vw, 28px);
    }

    .site-nav__link {
        padding: 6px 4px;
        font-size: 1.0625rem;
        white-space: nowrap;
    }

    .site-nav__link::after {
        content: "";
        position: absolute;
        left: 4px;
        right: 4px;
        bottom: 6px;
        height: 4px;
        border-radius: 4px;
        background: var(--navy);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
    }

    .site-nav__link:hover::after,
    .site-nav__link.is-active::after { transform: scaleX(1); }

    .site-nav__link:hover { color: var(--navy); }

    .site-nav__cta { display: none; }

    .site-header .header-actions .header-cta { min-width: 130px; }
}

@media (min-width: 1024px) {
    .site-header .header-actions .header-cta {
        min-height: 52px;
        min-width: 150px;
        font-size: 1.0625rem;
    }
}

/* ============================================
   Hero + ribbon + profile cards
   ============================================ */
.hero {
    position: relative;
    isolation: isolate;
    padding-top: clamp(32px, 6vw, 56px);
    padding-bottom: clamp(24px, 6vw, 48px);
}

.hero-ribbon {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 46%;
    max-width: none;
    z-index: -1;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    display: grid;
    gap: 28px;
}

.hero__copy {
    max-width: 600px;
}

.hero__eyebrow { margin-bottom: 16px; }

.hero__title { margin-bottom: 0.45em; }

.hero__lead {
    font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
    color: var(--text);
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 8px;
}

.hero__micro {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.hero__note {
    margin: 18px 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.hero__after { margin-top: 20px; }

.pill-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    background: var(--peach);
    color: var(--navy);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 0 0 1.5px var(--peach-2);
}

a.pill-tag:hover { background: var(--peach-2); color: var(--navy); }

.chip-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: thin;
}

.chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    background: var(--peach);
    color: var(--navy);
    border: 1.5px solid var(--navy);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chip:hover,
.chip:focus-visible {
    background: var(--coral-btn);
    border-color: var(--coral-btn);
    color: var(--white);
}

/* Card deck - mobile: horizontal scroll-snap swipe row */
.hero__media { position: relative; }

.card-deck {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 14px var(--gutter) 34px;
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.card-deck::-webkit-scrollbar { display: none; }

.profile-card {
    position: relative;
    flex: 0 0 auto;
    width: min(68vw, 250px);
    padding: 10px 10px 14px;
    border-radius: var(--radius-card);
    background: var(--white);
    box-shadow: var(--shadow-card);
    scroll-snap-align: center;
    transition: scale 0.3s ease, box-shadow 0.3s ease;
}

.profile-card__photo {
    position: relative;
    aspect-ratio: 4 / 4.3;
    border-radius: 12px;
    overflow: hidden;
    background: var(--peach);
}

.profile-card__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

.profile-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--navy);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.3;
    box-shadow: 0 4px 10px rgba(35, 69, 95, 0.15);
}

.profile-card__badge .icon { width: 16px; height: 16px; color: var(--steel-ink); }

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.6);
    animation: dot-pulse 2s ease-out infinite;
}

@keyframes dot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(46, 158, 91, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0); }
}

.profile-card__body { padding: 12px 4px 0; }

.profile-card__age {
    margin: 0 0 2px;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy);
    font-size: 1.0625rem;
}

.profile-card__tags {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .hero { padding-top: 56px; }

    .hero-ribbon { height: 52%; }

    .hero__actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 18px;
    }

    .profile-card { width: 240px; }
}

@media (min-width: 1024px) {
    .hero {
        padding-top: 0;
        padding-bottom: 0;
    }

    .hero-ribbon {
        top: 0;
        height: 100%;
    }

    .hero__inner {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        align-items: center;
        gap: 24px;
        min-height: 640px;
    }

    .hero__copy {
        padding-block: 72px 190px;
    }

    .hero__media {
        align-self: stretch;
        margin-right: calc(-1 * var(--gutter) - 40px);
    }

    .card-deck {
        display: block;
        position: relative;
        height: 100%;
        min-height: 640px;
        overflow: visible;
        padding: 0;
        margin: 0;
    }

    .card-deck:focus-visible { outline-offset: -6px; }

    .profile-card {
        position: absolute;
        width: clamp(190px, 16vw, 232px);
        rotate: var(--tilt, 0deg);
        animation: card-float 6s ease-in-out infinite;
        animation-delay: calc(var(--i, 0) * -1.3s);
    }

    .profile-card:hover,
    .profile-card:focus-within {
        scale: 1.05;
        z-index: 5;
        box-shadow: 0 26px 44px -16px rgba(118, 62, 28, 0.45), 0 6px 14px rgba(35, 69, 95, 0.14);
    }

    /* 5-card homepage collage */
    .card-deck--5 .profile-card:nth-child(1) { left: 0; top: 7%; }
    .card-deck--5 .profile-card:nth-child(2) { left: 38%; top: -4%; }
    .card-deck--5 .profile-card:nth-child(3) { left: 74%; top: 4%; }
    .card-deck--5 .profile-card:nth-child(4) { left: 30%; top: 40%; }
    .card-deck--5 .profile-card:nth-child(5) { left: 66%; top: 50%; }

    /* 3-card collage */
    .card-deck--3 .profile-card:nth-child(1) { left: 4%; top: 12%; }
    .card-deck--3 .profile-card:nth-child(2) { left: 37%; top: 30%; }
    .card-deck--3 .profile-card:nth-child(3) { left: 68%; top: 6%; }

    /* 2-card collage */
    .card-deck--2 .profile-card:nth-child(1) { left: 16%; top: 12%; }
    .card-deck--2 .profile-card:nth-child(2) { left: 50%; top: 28%; }

    .hero--cards-3 .hero__inner,
    .hero--cards-3 .card-deck { min-height: 600px; }

    .hero--cards-2 .hero__inner,
    .hero--cards-2 .card-deck { min-height: 560px; }

    .hero--narrow .hero-ribbon { transform: scaleY(0.9); transform-origin: 50% 100%; }
    .hero--compact .hero-ribbon { transform: scale(0.92, 0.8); transform-origin: 100% 100%; }
}

@media (min-width: 1280px) {
    .profile-card { width: 236px; }
}

@keyframes card-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

/* ============================================
   Lists, callouts and answer boxes
   ============================================ */
.dot-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.dot-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
}

.dot-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--steel);
}

.dot-list--coral li::before { background: var(--terracotta); }

.check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1em;
}

.check-list li {
    position: relative;
    padding-left: 32px;
    margin-bottom: 10px;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--steel);
}

.check-list li::after {
    content: "";
    position: absolute;
    left: 7px;
    top: calc(0.2em + 3px);
    width: 8px;
    height: 13px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.callout {
    position: relative;
    padding: clamp(20px, 3vw, 32px);
    border-radius: var(--radius-panel);
    background: var(--peach);
    border: 1.5px solid var(--navy);
}

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

.answer-box {
    padding: clamp(18px, 3vw, 28px);
    border-radius: 16px;
    background: var(--cream-2);
    border-left: 5px solid var(--navy);
    box-shadow: var(--shadow-soft);
}

.answer-box > :last-child { margin-bottom: 0; }

.answer-box p:first-of-type { font-weight: 700; color: var(--navy); }

.card {
    padding: clamp(20px, 3vw, 28px);
    border-radius: var(--radius-panel);
    background: var(--cream-2);
    border: 1px solid var(--line);
}

/* ============================================
   Pros / cons with S-curve divider
   ============================================ */
.pros-cons {
    display: grid;
    gap: 18px;
    max-width: 860px;
    margin-inline: auto;
}

.pros-cons__title {
    font-size: 1.375rem;
    font-weight: 500;
    margin-bottom: 14px;
}

.pros-cons__divider {
    display: flex;
    justify-content: center;
}

.pros-cons__curve {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.pros-cons__curve path {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease;
}

.pros-cons__curve path:nth-child(2) { transition-delay: 0.6s; }

html.js .draw:not(.is-visible) .pros-cons__curve path { stroke-dashoffset: 1; }

.pros-cons__curve--v { display: none; width: 40px; height: 160px; }
.pros-cons__curve--h { width: 180px; height: 28px; }

@media (min-width: 768px) {
    .pros-cons {
        grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
        gap: 24px;
        align-items: center;
    }

    .pros-cons__curve--v { display: block; }
    .pros-cons__curve--h { display: none; }
}

/* ============================================
   Ribbons, blobs, waves, bands
   ============================================ */
.stripe-ribbon {
    position: absolute;
    pointer-events: none;
    max-width: none;
}

.blob-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 0;
    pointer-events: none;
}

.wave {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--wave-h);
    max-width: none;
    z-index: 1;
    pointer-events: none;
    display: block;
}

.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; }
.wave--cream { color: var(--cream); }
.wave--navy-deep { color: var(--navy-deep); }
.wave--teal { color: var(--teal); }

.band-navy {
    position: relative;
    isolation: isolate;
    background: var(--navy-deep);
    color: var(--on-navy-muted);
    padding-block: calc(var(--section-y) + var(--wave-h) * 0.6);
}

.band-navy > .container { position: relative; z-index: 2; }

.band-navy h2,
.band-navy h3,
.band-navy strong { color: var(--on-navy); }

.band-navy a:not(.btn):not(.chip) { color: #F5C3A6; }
.band-navy a:not(.btn):not(.chip):hover { color: var(--white); }

.band-navy .faq-item { background: var(--cream); }

.band-navy .faq-item .faq-item__q-text { color: var(--navy); }

.table-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    z-index: 0;
    pointer-events: none;
}

.hand-arrow {
    width: 96px;
    height: 64px;
    pointer-events: none;
}

/* ============================================
   Node trio (steps / budgets)
   ============================================ */
.node-trio { position: relative; }

.node-trio__art { display: none; }

.node-trio__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0 0 0 96px;
}

.node-trio__list::before {
    content: "";
    position: absolute;
    left: 8px;
    top: -12px;
    bottom: -12px;
    width: 60px;
    border-radius: 30px;
    background: linear-gradient(90deg,
        var(--steel) 0 7px, var(--cream) 7px 10px,
        var(--terracotta) 10px 16px, var(--cream) 16px 19px,
        var(--steel-light) 19px 25px, var(--cream) 25px 28px,
        var(--navy) 28px 32px, var(--cream) 32px 35px,
        var(--steel-light) 35px 41px, var(--cream) 41px 44px,
        var(--terracotta) 44px 50px, var(--cream) 50px 53px,
        var(--steel) 53px 60px);
}

.node-trio__item {
    position: relative;
    min-height: 96px;
    margin-bottom: 32px;
}

.node-trio__item:last-child { margin-bottom: 0; }

.node-trio__node {
    position: absolute;
    left: -96px;
    top: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    box-shadow: 0 0 0 5px var(--cream);
}

.node-trio__item--2 .node-trio__node { background: var(--terracotta-ink); }
.node-trio__item--3 .node-trio__node { background: #4C7C9C; }

.node-trio__label {
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.1;
    text-align: center;
    padding: 0 6px;
}

.node-trio__pin {
    position: absolute;
    top: -10px;
    right: -6px;
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--navy);
    border: 2px solid var(--cream);
    color: var(--white);
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.node-trio__item--2 .node-trio__pin { background: var(--terracotta-ink); }
.node-trio__item--3 .node-trio__pin { background: #4C7C9C; }

.node-trio__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 4px 0 6px;
}

.node-trio__item p {
    margin: 0;
    color: var(--muted);
}

.node-trio__svg-label {
    fill: var(--cream);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 26px;
}

.node-trio__svg-pin {
    fill: var(--white);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 24px;
}

@media (min-width: 1024px) {
    .node-trio__art {
        display: block;
        width: 140%;
        max-width: none;
        height: auto;
        margin-left: -20%;
        margin-bottom: 8px;
    }

    .node-trio__list {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
        padding: 0 5%;
        text-align: center;
    }

    .node-trio__list::before,
    .node-trio__node { display: none; }

    .node-trio__item {
        min-height: 0;
        margin: 0;
    }
}

/* ============================================
   Tables
   ============================================ */
.table-block {
    position: relative;
    isolation: isolate;
}

.table-scroll {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
}

.data-table {
    width: 100%;
    min-width: 640px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
}

.data-table caption {
    text-align: left;
    font-size: 0.9375rem;
    color: var(--muted);
    padding-bottom: 10px;
}

.data-table th,
.data-table td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
}

.data-table thead th {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy);
    font-size: 1.0625rem;
    border-bottom: 2px solid var(--navy);
    white-space: nowrap;
}

.data-table tbody td,
.data-table tbody th {
    border-bottom: 1px solid #C9C2BA;
}

.data-table tbody th {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy);
}

.data-table th:first-child,
.data-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--cream);
}

.data-table--zebra tbody tr:nth-child(even) th,
.data-table--zebra tbody tr:nth-child(even) td { background: var(--peach); }

.mark-yes,
.mark-no {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

.mark-yes { color: var(--steel-ink); }
.mark-no { color: var(--terracotta-ink); }

.mark-yes .icon,
.mark-no .icon { width: 22px; height: 22px; stroke-width: 2.4; }

@media (max-width: 767.98px) {
    .data-table--stack { min-width: 0; }

    .data-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .data-table--stack tbody tr {
        display: block;
        margin-bottom: 14px;
        padding: 6px 4px;
        border-radius: 16px;
        background: var(--cream-2);
        border: 1px solid var(--line);
    }

    .data-table--stack tbody th,
    .data-table--stack tbody td {
        display: grid;
        grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
        gap: 12px;
        position: static;
        background: transparent;
        border-bottom: 1px solid var(--line);
        padding: 10px 14px;
    }

    .data-table--stack tbody tr > :last-child { border-bottom: 0; }

    .data-table--stack tbody th::before,
    .data-table--stack tbody td::before {
        content: attr(data-label);
        font-family: var(--font-head);
        font-weight: 600;
        color: var(--navy);
    }
}

/* ============================================
   FAQ accordions (native details)
   ============================================ */
.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    max-width: 780px;
    margin-inline: auto;
}

.faq-item {
    background: var(--peach);
    border: 1.5px solid var(--navy);
    border-radius: 28px;
    transition: box-shadow 0.25s ease;
}

.faq-item[open] { box-shadow: var(--shadow-soft); }

.faq-item__q {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 54px;
    padding: 12px 18px 12px 24px;
    cursor: pointer;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.0625rem;
    color: var(--navy);
    border-radius: 28px;
}

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

.faq-item__q-text {
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: 1.35;
}

.faq-item__chev {
    width: 22px;
    height: 22px;
    color: var(--navy);
    transition: transform 0.3s ease;
}

.faq-item[open] .faq-item__chev { transform: rotate(180deg); }

.faq-item__a {
    padding: 0 24px 18px;
    color: var(--text);
}

.faq-item__a p { margin: 0; }

@supports selector(::details-content) {
    .faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 0.35s ease, content-visibility 0.35s allow-discrete;
    }

    .faq-item[open]::details-content { block-size: auto; }
}

/* ============================================
   Final CTA + footer
   ============================================ */
.final-cta {
    position: relative;
    isolation: isolate;
    background: var(--teal);
    color: #E3EEF4;
    text-align: center;
    padding-block: calc(var(--section-y) + var(--wave-h)) calc(var(--section-y) + var(--wave-h));
}

.final-cta__ribbon {
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.final-cta__inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.final-cta__title { color: var(--white); }

.final-cta__text {
    font-size: 1.125rem;
    color: #E3EEF4;
    margin-bottom: 24px;
}

.final-cta__micro,
.final-cta__note {
    margin: 14px 0 0;
    font-size: 0.9375rem;
    color: #DDEAF1;
}

.final-cta__note a { color: var(--white); }

.site-footer {
    position: relative;
    isolation: isolate;
    background: var(--navy-deep);
    color: var(--on-navy-muted);
    padding: 48px 0 32px;
    overflow: clip;
}

.site-footer__ribbon {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(80%, 900px);
    height: 100%;
    max-width: none;
    z-index: 0;
    pointer-events: none;
}

.site-footer__inner,
.site-footer__legal {
    position: relative;
    z-index: 1;
}

.site-footer__inner {
    display: grid;
    gap: 28px;
}

.site-footer__brand p {
    margin: 12px 0 0;
    max-width: 360px;
    font-size: 1rem;
}

.footer-col__title {
    margin: 0 0 8px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--on-navy);
}

.footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-col a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--on-navy-muted);
    text-decoration: none;
}

.footer-col a:hover {
    color: var(--white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-footer__legal {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(210, 226, 236, 0.25);
    font-size: 0.9375rem;
}

.site-footer__disclosure {
    max-width: 760px;
    background: var(--navy-deep);
}

.site-footer__disclosure strong { color: var(--on-navy); }

.site-footer__copy { margin: 0; }

@media (min-width: 768px) {
    .site-footer { padding: 64px 0 40px; }

    .site-footer__inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* ============================================
   Homepage: verdict
   ============================================ */
.verdict__inner { max-width: 900px; }

.verdict .section-head { margin-bottom: 24px; }

.verdict .updated { margin-bottom: 14px; }

.score-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
}

.score-row__label {
    font-weight: 700;
    color: var(--navy);
}

.stars {
    display: inline-flex;
    gap: 2px;
}

.stars .icon {
    width: 28px;
    height: 28px;
    color: var(--terracotta);
}

.stars .star--off { color: #CFC7BF; }

.verdict__answer {
    max-width: 760px;
    margin: 0 auto clamp(32px, 5vw, 48px);
}

/* ============================================
   Homepage: swipe preview
   ============================================ */
.swipe-section .section-head p { color: var(--on-navy-muted); }

.swipe-demo {
    display: grid;
    grid-template-areas: "phone" "left" "right";
    justify-items: center;
    gap: 32px;
}

.phone { grid-area: phone; }
.swipe-callout--left { grid-area: left; }
.swipe-callout--right { grid-area: right; }

.swipe-callout {
    position: relative;
    max-width: 360px;
    text-align: center;
    color: var(--on-navy-muted);
}

.swipe-callout h3 {
    color: var(--on-navy);
    font-size: 1.25rem;
    font-weight: 600;
}

.swipe-callout p { margin: 0; }

.swipe-callout__arrow { display: none; }

.phone {
    position: relative;
    width: min(276px, 82vw);
    padding: 11px;
    border-radius: 44px;
    background: #121417;
    box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.7), inset 0 0 0 2px #2C3036;
}

.phone__screen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 30px 14px 8px;
    border-radius: 34px;
    background: var(--cream);
    overflow: hidden;
}

.phone__notch {
    position: absolute;
    top: 0;
    left: 50%;
    width: 96px;
    height: 22px;
    translate: -50% 0;
    border-radius: 0 0 14px 14px;
    background: #121417;
}

.phone__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.phone__label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--navy);
}

.phone__menu {
    width: 16px;
    height: 10px;
    border-top: 2px solid var(--slate);
    border-bottom: 2px solid var(--slate);
    position: relative;
}

.phone__menu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 2px;
    background: var(--slate);
}

.phone__live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    line-height: 1.3;
}

.swipe-stack {
    position: relative;
    aspect-ratio: 3 / 4;
    margin: 6px 4px 8px;
}

.swipe-stack::before,
.swipe-stack::after {
    content: "";
    position: absolute;
    inset: 6px 8px -6px;
    border-radius: 16px;
    background: var(--white);
    z-index: 0;
}

.swipe-stack::before {
    border: 3px solid var(--steel);
    rotate: -5deg;
}

.swipe-stack::after {
    border: 3px solid var(--terracotta);
    rotate: 4deg;
}

.swipe-card {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    background: var(--white);
    box-shadow: 0 12px 24px -12px rgba(35, 69, 95, 0.5);
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.swipe-card.is-dragging {
    cursor: grabbing;
    transition: none;
}

.swipe-card img {
    display: block;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    object-fit: cover;
    object-position: 50% 28%;
    pointer-events: none;
    -webkit-user-drag: none;
}

.swipe-card__body { padding: 8px 12px 10px; }

.swipe-card__age {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--navy);
}

.swipe-card__tags {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--muted);
    line-height: 1.35;
}

.swipe-end {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 14px;
    border-radius: 16px;
    background: var(--peach);
    border: 1.5px solid var(--navy);
    text-align: center;
    visibility: hidden;
}

.swipe-stack.is-done .swipe-end { visibility: visible; }

.swipe-end__title {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.25;
    color: var(--navy);
}

.swipe-end__text {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

.swipe-end .btn { font-size: 0.9375rem; padding-inline: 14px; }

.phone__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.swipe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 14px -6px rgba(35, 69, 95, 0.45);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.swipe-btn .icon { width: 22px; height: 22px; }

.swipe-btn--pass {
    background: var(--white);
    color: var(--terracotta-ink);
    box-shadow: inset 0 0 0 1.5px var(--line), 0 6px 14px -6px rgba(35, 69, 95, 0.45);
}

.swipe-btn--pass .icon { stroke-width: 2.6; }

.swipe-btn--star {
    width: 54px;
    height: 54px;
    background: var(--coral-btn);
    color: var(--white);
}

.swipe-btn--like {
    background: var(--steel-ink);
    color: var(--white);
}

.swipe-btn:hover:not(:disabled) { transform: scale(1.08); }

.swipe-btn:disabled {
    cursor: default;
    background: #E4DCD3;
    color: var(--slate);
    box-shadow: none;
}

.phone__tabs {
    display: flex;
    justify-content: space-around;
    padding: 8px 4px 4px;
    border-top: 1px solid var(--line);
    color: var(--slate);
}

.phone__tabs .icon { width: 20px; height: 20px; }
.phone__tabs .icon:first-child { color: var(--terracotta-ink); }

@media (min-width: 1024px) {
    .swipe-demo {
        grid-template-areas: "left phone right";
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 56px;
    }

    .swipe-callout { text-align: left; }

    .swipe-callout--left {
        align-self: end;
        justify-self: end;
        margin-bottom: 70px;
    }

    .swipe-callout--right {
        align-self: start;
        justify-self: start;
        margin-top: 90px;
    }

    .swipe-callout__arrow {
        display: block;
        position: absolute;
    }

    .swipe-callout--left .swipe-callout__arrow { top: -78px; right: -24px; }
    .swipe-callout--right .swipe-callout__arrow { top: -70px; left: -44px; }
}

/* ============================================
   Homepage: activity + trust with flowing ribbon
   ============================================ */
.activity__ribbon,
.mid-cta__ribbon { display: none; }

.activity__ribbon path,
.mid-cta__ribbon path,
.flow-divider path { vector-effect: non-scaling-stroke; }

.activity__ribbon {
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.activity .container {
    position: relative;
    z-index: 1;
}

.activity__grid {
    display: grid;
    gap: 28px;
}

.activity__col-title {
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
    font-weight: 500;
}

.activity__intro { color: var(--muted); }

.icon-list {
    display: grid;
    gap: 22px;
    margin-top: 22px;
}

.icon-list h4.icon-item__title { margin: 4px 0; }

.flow-divider {
    position: relative;
    display: block;
    width: 100%;
    height: 56px;
}

.join__cta {
    margin-top: clamp(32px, 5vw, 48px);
    text-align: center;
}

@media (min-width: 1024px) {
    .activity { padding-block: 180px 290px; }

    .activity__ribbon { display: block; }

    .activity__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 240px;
    }

    .flow-divider { display: none; }

    .join { padding-top: 16px; }
}

/* ============================================
   Homepage: mid CTA band
   ============================================ */
.mid-cta { text-align: center; }

.mid-cta__inner { max-width: 660px; }

.mid-cta p {
    margin-bottom: 24px;
    font-size: 1.125rem;
    color: var(--on-navy-muted);
}

.mid-cta__ribbon {
    left: 0;
    top: 0;
    width: 220px;
    height: 100%;
    z-index: 0;
}

@media (min-width: 1024px) {
    .mid-cta__ribbon { display: block; }
}

/* ============================================
   Homepage: features table
   ============================================ */
.features { isolation: isolate; }

.features > .container {
    position: relative;
    z-index: 1;
    max-width: 1040px;
}

.features__note {
    margin: 20px auto 0;
    max-width: 720px;
    text-align: center;
    color: var(--muted);
}

.mini-faq { padding-top: 0; }

/* ============================================
   Legitimacy page
   ============================================ */
.verdict-card {
    display: grid;
    gap: 16px;
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(20px, 4vw, 36px);
    background: var(--cream-2);
    border: 2px solid var(--navy);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-soft);
}

.verdict-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
}

.verdict-card__icon .icon { width: 30px; height: 30px; }

.verdict-card h2 {
    position: relative;
    margin-bottom: 0.4em;
    padding-bottom: 14px;
}

.verdict-card h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 84px;
    height: 5px;
    border-radius: 4px;
    background: var(--terracotta);
}

.verdict-card__body > :last-child { margin-bottom: 0; }

@media (min-width: 768px) {
    .verdict-card { grid-template-columns: 56px minmax(0, 1fr); gap: 24px; }
}

.verdict-section { padding-bottom: clamp(24px, 4vw, 40px); }

.disclosure { padding-top: 0; }

.disclosure-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
    margin-inline: auto;
    padding: clamp(22px, 4vw, 36px);
    background: var(--peach);
    border: 1.5px solid var(--navy);
    border-radius: var(--radius-panel);
}

.disclosure-panel .icon-circle { background: var(--white); color: var(--navy); }
.disclosure-panel h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); }
.disclosure-panel p:last-child { margin-bottom: 0; }

@media (min-width: 640px) {
    .disclosure-panel { flex-direction: row; gap: 22px; }
}

/* Evaluation steps (five nodes) */
.eval-art { display: none; }

.eval-art__label {
    fill: var(--cream);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 22px;
}

.eval-steps .node-trio__item--4 .node-trio__node,
.eval-steps .node-trio__item--4 .node-trio__pin { background: var(--navy); }

.eval-steps .node-trio__item--5 .node-trio__node,
.eval-steps .node-trio__item--5 .node-trio__pin { background: var(--terracotta-ink); }

.eval__note {
    margin: 28px auto 0;
    max-width: 640px;
    text-align: center;
    color: var(--muted);
}

@media (min-width: 1024px) {
    .eval-art {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        margin-bottom: 8px;
    }

    .eval-steps .node-trio__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 16px;
        padding: 0;
    }

    .eval-steps .node-trio__title { font-size: 1.125rem; }
    .eval-steps .node-trio__item p { font-size: 0.9375rem; }
}

/* Profile authenticity cards */
.signs-grid {
    display: grid;
    gap: 20px;
    max-width: 1000px;
    margin-inline: auto;
}

.signs-grid .card h3 { margin-bottom: 14px; }

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

/* Red flags on navy */
.band-navy .section-head p { color: var(--on-navy-muted); }

.flag-list {
    list-style: none;
    display: grid;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

.flag {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--cream);
    color: var(--text);
}

.flag__icon { background: #F7D3BF; color: var(--terracotta-ink); }

.band-navy .flag__title {
    margin: 2px 0 4px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--navy);
}

.band-navy .flag p { margin: 0; color: var(--text); }
.band-navy .flag strong { color: var(--terracotta-ink); }

/* Privacy columns */
.privacy-grid {
    display: grid;
    gap: 28px;
    max-width: 1000px;
    margin-inline: auto;
}

.privacy-col .icon-circle { color: var(--slate); }
.privacy-col .icon-circle .icon { width: 26px; height: 26px; }
.privacy-col h3 { margin-top: 14px; }
.privacy-col p { margin: 0; color: var(--muted); }

.privacy__tip {
    max-width: 720px;
    margin: 32px auto 0;
    text-align: center;
    font-weight: 700;
    color: var(--navy);
}

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

/* Reader concerns (social proof without invented quotes) */
.concern-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px var(--gutter) 18px;
    margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.concern {
    position: relative;
    flex: 0 0 min(82vw, 320px);
    scroll-snap-align: center;
    padding: 34px 22px 22px;
    border-radius: var(--radius-card);
    background: var(--peach);
    box-shadow: inset 0 0 0 1.5px var(--peach-2);
    color: var(--navy);
    overflow: hidden;
}

.concern::before {
    content: "\201C";
    position: absolute;
    top: -6px;
    left: 14px;
    font-family: var(--font-brand);
    font-size: 6rem;
    line-height: 1;
    color: #EBCDB3;
    pointer-events: none;
}

.concern > * { position: relative; }
.concern h3 { margin: 12px 0 10px; font-size: 1.25rem; font-weight: 600; }
.concern p { margin: 0; color: var(--navy); }

.center-cta {
    margin-top: clamp(28px, 4vw, 44px);
    text-align: center;
}

.center-cta__micro {
    margin: 12px 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 768px) {
    .concern-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
        max-width: 960px;
        margin-inline: auto;
        padding: 0;
        overflow: visible;
    }

    .concern { flex: none; }
}

/* Safety tips table with media */
.tips { isolation: isolate; }

.tips > .container {
    position: relative;
    z-index: 1;
    max-width: 1100px;
}

.tips__split {
    display: grid;
    gap: 24px;
}

.tips__media {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.tips__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 72% 50%;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.tips__media figcaption {
    margin-top: 10px;
    font-size: 0.9375rem;
    color: var(--muted);
}

@media (min-width: 1024px) {
    .tips__split {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .tips .data-table { min-width: 0; }

    .tips__media img {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 340px;
        object-position: 75% 50%;
    }
}

/* ============================================
   Reveal on scroll (content visible without JS)
   ============================================ */
html.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--d, 0) * 0.12s);
}

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

/* ============================================
   Pricing page
   ============================================ */
.quick-answer { padding-bottom: clamp(24px, 4vw, 40px); }

.quick-answer__inner { max-width: 820px; }

.quick-answer .section-head { margin-bottom: 20px; }

.answer-box__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--coral-btn-hover);
}

.answer-box__tag .icon { width: 22px; height: 22px; }

.free-paid .pros-cons__title { font-size: 1.5rem; }

.cost-table { isolation: isolate; }

.cost-table > .container {
    position: relative;
    z-index: 1;
    max-width: 1040px;
}

.budget .node-trio__title { margin-top: 6px; }

/* Cancellation steps */
.step-rows {
    list-style: none;
    display: grid;
    gap: 14px;
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 20px;
    border-radius: 16px;
    background: var(--cream);
    color: var(--text);
}

.step-row p { margin: 0; }

.band-navy .step-row strong { color: var(--navy); }

.step-row__pin {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--terracotta-ink);
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 600;
}

.step-row__pin span { transform: rotate(45deg); }

/* Hidden-fee checklist */
.fee-check__panel {
    max-width: 720px;
    margin-inline: auto;
}

.fee-check__list {
    list-style: none;
    display: grid;
    gap: 10px;
    margin: 0 0 22px;
    padding: 0;
}

.fee-check__item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 10px 20px;
    border-radius: var(--radius-pill);
    background: var(--peach);
    border: 1.5px solid var(--navy);
    color: var(--navy);
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fee-check__item:hover { background: var(--peach-2); }

.fee-check__item:has(input:focus-visible) {
    outline: 3px solid var(--steel);
    outline-offset: 3px;
}

.fee-check__item input {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    border: 2px solid var(--navy);
    background: var(--white);
    cursor: pointer;
    transition: background-size 0.25s ease, background-color 0.2s ease;
}

.fee-check__item input:checked {
    background-color: var(--steel-ink);
    border-color: var(--steel-ink);
}

.fee-check__item { position: relative; }

.fee-check__item input:checked + span::before {
    content: "";
    position: absolute;
    left: 32px;
    top: calc(50% - 8px);
    width: 8px;
    height: 14px;
    border: solid var(--white);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    pointer-events: none;
}

.fee-check__item input:checked + span { text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 0.2em; }

.fee-check__bar {
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--peach-2);
    overflow: hidden;
}

.fee-check__fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--terracotta);
    transition: width 0.35s ease;
}

.fee-check__count {
    margin: 10px 0 0;
    text-align: center;
    font-weight: 700;
    color: var(--navy);
}

/* Value + comparison */
.value__inner { max-width: 960px; }

.value .callout { margin-bottom: clamp(32px, 5vw, 48px); }

.value__sub { text-align: center; margin-bottom: 18px; }

.caution {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
}

.caution .icon {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--terracotta-ink);
}

/* Trust panel */
.trust-block { padding-top: 0; }

.trust-panel {
    max-width: 900px;
    margin-inline: auto;
    padding: clamp(22px, 4vw, 40px);
    border-radius: var(--radius-panel);
    background: var(--peach);
    border: 1.5px solid var(--navy);
    text-align: center;
}

.trust-panel__icons {
    display: grid;
    gap: 18px;
    margin: 22px 0;
}

.trust-panel__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.trust-panel__item p { margin: 0; color: var(--navy); font-weight: 700; }

.trust-panel__link { margin: 0; }

@media (min-width: 768px) {
    .trust-panel__icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}

/* ============================================
   How Dialogmia works page
   ============================================ */
.section--tint { background: var(--cream-2); }

.overview__answer {
    max-width: 780px;
    margin: 0 auto;
}

.flow-strip-wrap { margin-top: clamp(32px, 5vw, 48px); }

.flow-strip {
    position: relative;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 12px;
    max-width: 920px;
    margin: 0 auto;
    padding: 0;
}

.flow-strip__ribbon { display: none; }

.flow-strip__item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--navy);
}

.flow-strip__item .icon-circle {
    width: 68px;
    height: 68px;
    margin-bottom: 4px;
    box-shadow: 0 0 0 6px var(--cream), inset 0 0 0 1px var(--peach-2);
}

.flow-strip__item .icon-circle .icon { width: 32px; height: 32px; }

.flow-strip__sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.9375rem;
    color: var(--muted);
}

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

    .flow-strip__ribbon {
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        height: 68px;
        z-index: 0;
    }

    .flow-strip__ribbon path { vector-effect: non-scaling-stroke; }
}

.before-start {
    max-width: 760px;
    margin: clamp(32px, 5vw, 48px) auto 0;
}

.before-start h3 { margin-bottom: 14px; }

/* Photo + bio split */
.split {
    display: grid;
    gap: 28px;
}

.split__media {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.split__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 30% 50%;
    border-radius: 20px;
    box-shadow: var(--shadow-card);
}

.split__media figcaption {
    margin-top: 10px;
    font-size: 0.9375rem;
    color: var(--muted);
}

.split__tips { position: relative; }

.split__tips h3 { margin-bottom: 12px; }
.split__tips h3:not(:first-of-type) { margin-top: 24px; }

.split__arrow { display: none; }

.tips-section__note {
    max-width: 680px;
    margin: clamp(28px, 4vw, 40px) auto 0;
    text-align: center;
    font-weight: 700;
    color: var(--navy);
}

@media (min-width: 1024px) {
    .split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 80px;
        align-items: stretch;
    }

    .split__media img {
        flex: 1 1 auto;
        aspect-ratio: auto;
        min-height: 440px;
        object-position: 28% 50%;
    }

    .split__arrow {
        display: block;
        position: absolute;
        left: -76px;
        top: 6px;
        width: 72px;
        height: auto;
    }
}

/* Messaging + video band */
.mv__grid {
    display: grid;
    gap: 32px;
    align-items: center;
}

.mv__text h3 { margin-bottom: 8px; }
.mv__text h3:not(:first-child) { margin-top: 24px; }
.mv__text .dot-list li { color: var(--on-navy-muted); }

.mv__media {
    position: relative;
    margin: 0;
}

.mv__media img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: 72% 50%;
    border-radius: 20px;
    box-shadow: 0 24px 40px -20px rgba(0, 0, 0, 0.6);
}

.mv__chat {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.bubble {
    margin: 0;
    max-width: 88%;
    padding: 10px 16px;
    border-radius: 18px;
    font-size: 0.9375rem;
    line-height: 1.4;
}

.bubble--in {
    justify-self: start;
    background: var(--cream);
    color: var(--navy);
    border-bottom-left-radius: 4px;
}

.bubble--out {
    justify-self: end;
    background: var(--terracotta-ink);
    color: var(--white);
    border-bottom-right-radius: 4px;
}

.video-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--steel-ink);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 700;
}

@keyframes bubble-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

@media (min-width: 768px) {
    .mv__chat {
        position: absolute;
        left: 4%;
        top: 7%;
        width: 46%;
        margin: 0;
    }

    .bubble { max-width: 100%; font-size: 0.875rem; padding: 8px 12px; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.45); }

    .bubble--in { animation: bubble-float 5s ease-in-out infinite; }
    .bubble--out { animation: bubble-float 5s ease-in-out -2s infinite; }
    .video-pill { animation: bubble-float 5s ease-in-out -3.5s infinite; }
}

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

/* Search demo (light variant) */
.swipe-demo--light .swipe-callout { color: var(--muted); }
.swipe-demo--light .swipe-callout h3 { color: var(--navy); }

.swipe-card--static {
    cursor: default;
    touch-action: auto;
}

.swipe-card__ph {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: linear-gradient(160deg, #F3C9A6 0%, #E58A5C 45%, #8DB3C9 100%);
}

.swipe-card__ph svg {
    width: 72%;
    height: auto;
    max-height: 100%;
}

.search__list {
    max-width: 640px;
    margin: clamp(32px, 5vw, 48px) auto 0;
}

/* Conversation starters */
.opener-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    list-style: none;
    margin: 0 calc(-1 * var(--gutter));
    padding: 6px var(--gutter) 18px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.opener {
    flex: 0 0 min(80vw, 300px);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 14px;
    border: 1.5px solid var(--navy);
    border-radius: 22px 22px 22px 6px;
    background: var(--cream);
}

.opener:nth-child(even) {
    background: var(--peach);
    border-radius: 22px 22px 6px 22px;
}

.opener__topic {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--coral-btn-hover);
}

.opener__text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--navy);
    font-weight: 600;
}

.copy-btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border: 1.5px solid var(--navy);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--navy);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.copy-btn:hover { background: var(--navy); color: var(--white); }

.starters__rules { margin-top: clamp(32px, 5vw, 56px); }

@media (min-width: 768px) {
    .opener-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        max-width: 960px;
        margin-inline: auto;
        padding: 0;
        overflow: visible;
    }

    .opener { flex: none; }
}

@media (min-width: 1200px) {
    .opener-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 1100px;
    }
}

/* First-week timeline */
.timeline {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding-left: 92px;
}

.timeline__ribbon {
    left: 6px;
    top: -8px;
    width: 56px;
    height: calc(100% + 16px);
}

.timeline__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline__item {
    position: relative;
    margin-bottom: 34px;
}

.timeline__item:last-child { margin-bottom: 0; }

.timeline__item h3 { margin: 0 0 6px; }
.timeline__item p { margin: 0; color: var(--muted); }

.timeline__pin {
    position: absolute;
    left: -78px;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    border: 2px solid var(--cream);
    color: var(--white);
    font-family: var(--font-head);
    font-weight: 600;
}

.timeline__pin span { transform: rotate(45deg); }

.timeline__item--2 .timeline__pin { background: var(--terracotta-ink); }
.timeline__item--3 .timeline__pin { background: var(--steel-ink); }

.week__note {
    max-width: 760px;
    margin: clamp(32px, 5vw, 48px) auto 0;
}

/* ============================================
   FAQ page
   ============================================ */
.hero__after .updated { margin: 0 0 10px; }

.faq-chips { padding-bottom: 6px; }

@media (min-width: 768px) {
    .faq-chips {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.faq-group__inner {
    display: grid;
    gap: 24px;
}

.faq-group__head h2 { margin-bottom: 0.4em; }

.faq-group__icon {
    margin-bottom: 14px;
    background: var(--peach);
    box-shadow: inset 0 0 0 1px var(--peach-2);
}

.faq-group__icon--slate { color: var(--slate); }
.faq-group__icon--terracotta { color: var(--terracotta-ink); }
.faq-group__icon--steel { color: var(--steel-ink); }

.faq-group__intro {
    margin: 0;
    color: var(--muted);
}

.faq-group .faq-list {
    width: 100%;
    max-width: none;
    margin: 0;
}

.band-navy .faq-group__intro { color: var(--on-navy-muted); }

.band-navy .faq-item__a a:not(.btn):not(.chip) { color: var(--steel-ink); }

.band-navy .faq-item__a a:not(.btn):not(.chip):hover { color: var(--navy); }

.disclosure-panel__body {
    flex: 1 1 auto;
    min-width: 0;
}

.disclosure-panel .faq-group__intro { margin-bottom: 18px; }

.disclosure-panel .faq-item { background: var(--cream); }

@media (min-width: 1024px) {
    .faq-group__inner {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 64px;
        align-items: start;
    }

    .faq-group__head {
        position: sticky;
        top: calc(var(--header-bottom) + 24px);
    }

    .faq-group--flip .faq-group__inner {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .faq-group--flip .faq-group__head { order: 2; }
}

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

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }

    html.js .reveal {
        opacity: 1;
        transform: none;
    }

    html.js .draw:not(.is-visible) .pros-cons__curve path { stroke-dashoffset: 0; }

    .profile-card { animation: none !important; }

    .status-dot { animation: none !important; }
}