/* ==========================================================================
   MatureSearch Review - Design System
   Deep burgundy bands, terracotta-coral accents, cream parchment surfaces,
   serif display type, nautical compass-rose ornamentation, frosted glass.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
    --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --burgundy-950: #2c0a16;
    --burgundy-900: #3d0f1f;
    --burgundy-800: #4c1526;
    --burgundy-700: #5f1d33;
    --burgundy-600: #72264a;

    --coral-300: #f2a184;
    --coral-400: #e98a68;
    --coral-500: #dd7250;
    --coral-600: #c65a3c;

    --cream-50: #fdf8ef;
    --cream-100: #f8efdf;
    --cream-200: #f0e2c9;
    --cream-300: #e4cfa9;

    --gold-300: #ffd98a;
    --gold-400: #f6bf5e;
    --gold-500: #eda83f;
    --gold-600: #d18f2b;

    --slate-900: #1d2026;
    --slate-800: #282c34;
    --slate-700: #333844;

    --ink-900: #33141f;
    --ink-700: #4c3a41;
    --ink-500: #6f5b62;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    --shadow-card: 0 10px 30px -14px rgba(44, 10, 22, .35);
    --shadow-warm: 0 22px 48px -20px rgba(44, 10, 22, .45);

    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --header-h: 72px;

    --grain: none;
}

/* ============================================
   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-"],
.compare__scroll {
    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;
}

[hidden] {
    display: none !important;
}

/* ============================================
   Base
   ============================================ */

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--ink-700);
    background: var(--cream-50);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 700;
    line-height: 1.16;
    color: var(--ink-900);
    margin: 0 0 .6em;
}

p {
    margin: 0 0 1em;
}

::selection {
    background: rgba(221, 114, 80, .35);
}

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -80px;
    z-index: 300;
    background: var(--burgundy-800);
    color: var(--cream-50);
    padding: .75rem 1.2rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    transition: top .2s var(--ease-out);
}

.skip-link:focus {
    top: 0;
}

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

.container--narrow {
    width: min(860px, 100% - 2.5rem);
}

.ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.12em;
}

/* ============================================
   Shared surfaces & bands
   ============================================ */

.band {
    position: relative;
    padding: 4.25rem 0;
}

@media (min-width: 1024px) {
    .band {
        padding: 5.5rem 0;
    }
}

.parchment {
    background-color: var(--cream-100);
    background-image:
        radial-gradient(1100px 480px at 15% 0%, rgba(233, 138, 104, .10), transparent 60%),
        radial-gradient(900px 420px at 92% 100%, rgba(246, 191, 94, .12), transparent 55%);
}

.band--burgundy {
    background:
        radial-gradient(1000px 520px at 85% -10%, rgba(221, 114, 80, .16), transparent 60%),
        linear-gradient(160deg, var(--burgundy-950), var(--burgundy-800) 60%, var(--burgundy-700));
    color: var(--cream-100);
}

.band--burgundy h1,
.band--burgundy h2,
.band--burgundy h3 {
    color: var(--cream-50);
}

.band--coral {
    background:
        radial-gradient(900px 420px at 10% 0%, rgba(255, 217, 138, .28), transparent 55%),
        linear-gradient(150deg, var(--coral-300), var(--coral-500) 55%, var(--coral-600));
    color: var(--burgundy-950);
}

.section-head {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 2.5rem;
}

.section-head h2 {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem);
    margin-bottom: .55rem;
}

.section-head p {
    margin: 0;
    font-size: 1.02rem;
}

/* ============================================
   Scroll reveal (armed by JS only - no-JS safe)
   ============================================ */

.reveal {
    transition: opacity .65s var(--ease-out), transform .65s var(--ease-out);
}

.reveal--armed {
    opacity: 0;
    transform: translateY(26px);
}

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

/* ============================================
   Header
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 90;
}

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(44, 10, 22, .86);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(233, 138, 104, .28);
}

.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: var(--header-h);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    min-height: 48px;
}

.site-brand__mark {
    width: 34px;
    height: 34px;
    color: var(--coral-400);
    flex: 0 0 auto;
}

.site-brand__text {
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.22rem;
    letter-spacing: .01em;
    color: var(--coral-300);
    white-space: nowrap;
}

.site-header__rose {
    width: 42px;
    height: 42px;
    color: var(--coral-400);
    flex: 0 0 auto;
    margin-left: .4rem;
}

.site-header__toggle {
    display: none;
    margin-left: auto;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(233, 138, 104, .4);
    border-radius: var(--radius-sm);
    background: rgba(221, 114, 80, .12);
    color: var(--cream-100);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.site-header__toggle svg {
    width: 24px;
    height: 24px;
}

.site-header__close {
    display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__burger {
    display: none;
}

.site-header__toggle[aria-expanded="true"] .site-header__close {
    display: block;
}

.site-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .15rem;
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: .4rem .8rem;
    border-radius: 10px;
    color: var(--cream-100);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}

.site-nav__link:hover {
    color: var(--coral-300);
    background: rgba(221, 114, 80, .12);
}

.site-nav__foot {
    display: none;
}

/* Mobile drawer */
@media (max-width: 767.98px) {
    .site-header__toggle {
        display: inline-flex;
    }

    .site-header__rose {
        display: none;
    }

    .site-nav {
        position: fixed;
        top: var(--header-bottom, 72px);
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .25rem;
        padding: 1.25rem 1.25rem 2rem;
        background:
            radial-gradient(600px 300px at 90% 0%, rgba(221, 114, 80, .14), transparent 60%),
            var(--burgundy-950);
        border-top: 1px solid rgba(233, 138, 104, .28);
        overflow-y: auto;
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .32s var(--ease-out), visibility 0s linear .32s;
    }

    .site-nav.is-open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .32s var(--ease-out);
    }

    .site-nav__link {
        min-height: 52px;
        font-size: 1.06rem;
        padding: .6rem 1rem;
        border-bottom: 1px solid rgba(233, 138, 104, .14);
        border-radius: 8px;
    }

    .site-nav__foot {
        display: block;
        margin-top: auto;
        padding-top: 1.4rem;
        text-align: center;
        font-size: .82rem;
        color: rgba(248, 239, 223, .55);
    }
}

@media (min-width: 768px) {
    .site-nav {
        transform: none !important;
        visibility: visible !important;
    }
}

/* ============================================
   Footer
   ============================================ */

.site-footer {
    position: relative;
    overflow: clip;
    background: var(--slate-900);
    color: #c9ced8;
    padding: 4rem 0 3rem;
}

.site-footer__compass {
    position: absolute;
    left: -130px;
    bottom: -130px;
    width: 480px;
    height: 480px;
    color: rgba(233, 138, 104, .08);
    pointer-events: none;
}

.site-footer__grid {
    position: relative;
    display: grid;
    gap: 2.2rem;
}

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

@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: 1.4fr .9fr 1.1fr .9fr;
        gap: 2.8rem;
    }
}

.site-footer__heading {
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--coral-300);
    margin: 0 0 1rem;
}

.site-footer p {
    font-size: .9rem;
    line-height: 1.7;
    color: rgba(201, 206, 216, .85);
    margin: 0 0 .8rem;
}

.site-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .15rem;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #e6e9ef;
    text-decoration: none;
    font-size: .95rem;
    border-bottom: 1px solid transparent;
    transition: color .2s var(--ease-out);
}

.site-footer__links a:hover {
    color: var(--coral-300);
}

.age-badge {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cream-100);
    color: var(--burgundy-800);
    font: 800 1.15rem var(--font-serif);
    border: 2px solid var(--coral-400);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    margin-bottom: .9rem;
}

.site-footer__note {
    font-size: .82rem !important;
}

.site-footer__copy {
    font-size: .82rem !important;
    color: rgba(201, 206, 216, .6) !important;
}

/* ============================================
   Compass ornament
   ============================================ */

.compass {
    display: block;
    color: var(--coral-500);
}

/* ============================================
   Star rating
   ============================================ */

.stars {
    position: relative;
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
}

.stars__row {
    display: inline-flex;
    gap: 2px;
    white-space: nowrap;
}

.stars__row svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.stars__row--base svg {
    fill: rgba(61, 15, 31, .18);
}

.stars__row--fill {
    position: absolute;
    inset: 0 auto 0 0;
    overflow: hidden;
}

.stars__row--fill svg {
    fill: var(--gold-500);
}

.stars--lg .stars__row svg {
    width: 23px;
    height: 23px;
}

.stars--sm .stars__row svg {
    width: 15px;
    height: 15px;
}

.stars--on-dark .stars__row--base svg,
.band--burgundy .stars__row--base svg {
    fill: rgba(253, 248, 239, .24);
}

/* ============================================
   Protected CTA button (gold, pulsing glow)
   ============================================ */

.cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .95rem;
    min-height: 58px;
    padding: .5rem 2.1rem .5rem .55rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 70%, var(--gold-600));
    color: var(--burgundy-900);
    font-family: var(--font-serif);
    font-weight: 800;
    font-size: 1.12rem;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 12px 30px -10px rgba(209, 143, 43, .55);
    animation: cta-pulse 2.8s var(--ease-out) infinite;
    transition: transform .2s var(--ease-out), filter .2s var(--ease-out);
}

.cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.cta:active {
    transform: translateY(0) scale(.98);
}

.cta__icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--burgundy-800);
    color: var(--gold-300);
}

.cta__icon .ic {
    width: 20px;
    height: 20px;
}

.cta__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.cta__sublabel {
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .78;
    margin-top: .15rem;
}

.cta--coral {
    background: linear-gradient(180deg, var(--coral-400), var(--coral-600));
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(198, 90, 60, .6);
}

.cta--coral .cta__icon {
    background: rgba(44, 10, 22, .55);
    color: var(--cream-100);
}

.cta--sm {
    min-height: 48px;
    font-size: 1rem;
    padding-right: 1.6rem;
}

.cta--sm .cta__icon {
    width: 38px;
    height: 38px;
}

@keyframes cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(246, 191, 94, .5), 0 12px 30px -10px rgba(209, 143, 43, .55); }
    70%  { box-shadow: 0 0 0 18px rgba(246, 191, 94, 0), 0 12px 30px -10px rgba(209, 143, 43, .55); }
    100% { box-shadow: 0 0 0 0 rgba(246, 191, 94, 0), 0 12px 30px -10px rgba(209, 143, 43, .55); }
}

/* Small coral chip CTA (feature card feet) */
.chip-cta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .45rem 1.25rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(233, 138, 104, .55);
    background: rgba(221, 114, 80, .14);
    color: var(--coral-300);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}

.chip-cta:hover {
    background: var(--coral-500);
    color: #fff;
    transform: translateY(-1px);
}

.chip-cta:active {
    transform: scale(.97);
}

.chip-cta__chev {
    transform: rotate(-90deg);
    width: 14px;
    height: 14px;
}

/* ============================================
   Pros & Cons
   ============================================ */

.procon-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .9rem;
    align-items: start;
}

.procon {
    display: flex;
    gap: .95rem;
    align-items: flex-start;
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    box-shadow: var(--shadow-card);
}

.procon--pro {
    background: linear-gradient(160deg, var(--slate-800), var(--slate-700));
    color: var(--cream-100);
    border: 1px solid rgba(233, 138, 104, .18);
}

.procon--con {
    background: linear-gradient(160deg, var(--coral-400), var(--coral-600));
    color: #fff;
    border: 1px solid rgba(44, 10, 22, .15);
}

.procon__mark {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1.6px solid currentColor;
    color: var(--coral-300);
}

.procon--con .procon__mark {
    color: #fff;
}

.procon__mark .ic {
    width: 20px;
    height: 20px;
}

.procon__text {
    margin: 0;
    font-size: .95rem;
    line-height: 1.55;
    align-self: center;
}

/* ============================================
   Review cards
   ============================================ */

.review-card {
    position: relative;
    margin: 0;
    background: rgba(253, 248, 239, .78);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(221, 114, 80, .32);
    border-radius: var(--radius-md);
    padding: 1.6rem 1.4rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: transform .28s var(--ease-out), box-shadow .28s var(--ease-out);
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 42px -18px rgba(44, 10, 22, .4);
}

.review-card__portrait {
    width: 110px;
    height: 110px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    padding: 4px;
    border: 2px solid var(--coral-500);
    outline: 1px solid rgba(221, 114, 80, .45);
    outline-offset: 4px;
    box-shadow: inset 0 4px 10px rgba(44, 10, 22, .28);
    overflow: hidden;
}

.review-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.review-card__age {
    display: block;
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.12rem;
    color: var(--burgundy-800);
    margin-bottom: .35rem;
}

.review-card__quote {
    margin: .7rem 0 .9rem;
    font-size: .95rem;
    line-height: 1.6;
    color: var(--ink-700);
}

.review-card__tag {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--coral-600);
    background: rgba(221, 114, 80, .12);
    border-radius: var(--radius-pill);
    padding: .3rem .8rem;
}

/* ============================================
   Feature cards
   ============================================ */

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(40, 44, 52, .74);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(233, 138, 104, .24);
    border-top: 3px solid var(--coral-500);
    border-radius: var(--radius-md);
    padding: 2rem 1.6rem 1.7rem;
    color: var(--cream-100);
    box-shadow: inset 0 0 42px rgba(221, 114, 80, .06), var(--shadow-card);
    transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: inset 0 0 42px rgba(221, 114, 80, .09), 0 24px 44px -18px rgba(0, 0, 0, .5);
}

.feature-card__icon {
    width: 96px;
    height: 96px;
    margin-bottom: 1.15rem;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .4));
    transition: filter .3s var(--ease-out);
}

.feature-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.feature-card:hover .feature-card__icon {
    filter: drop-shadow(0 0 20px rgba(233, 138, 104, .55));
}

.feature-card__title {
    font-size: 1.3rem;
    color: var(--cream-50);
    margin: 0 0 1rem;
}

.feature-card__list {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: grid;
    gap: .6rem;
    text-align: left;
}

.feature-card__list li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .94rem;
    line-height: 1.5;
    color: rgba(253, 248, 239, .88);
}

.feature-card__tick {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: .15em;
    color: var(--coral-400);
}

.feature-card__foot {
    margin-top: auto;
}

/* ============================================
   Comparison table
   ============================================ */

.compare {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-warm);
}

.compare__scroll {
    border-radius: var(--radius-md);
}

.compare table {
    width: 100%;
    min-width: 560px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cream-50);
}

.compare th,
.compare td {
    padding: .85rem 1.1rem;
    text-align: left;
    font-size: .95rem;
    line-height: 1.45;
}

.compare thead th {
    background: var(--burgundy-800);
    color: var(--cream-100);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.04rem;
    border-bottom: 2px solid var(--coral-500);
}

.compare thead th:first-child {
    border-top-left-radius: var(--radius-md);
}

.compare thead th:last-child {
    border-top-right-radius: var(--radius-md);
}

.compare tbody tr:nth-child(odd) {
    background: var(--cream-100);
}

.compare tbody tr:nth-child(even) {
    background: var(--cream-50);
}

.compare tbody tr:hover {
    background: rgba(233, 138, 104, .16);
}

.compare tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--radius-md);
}

.compare tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--radius-md);
}

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

.compare .cat-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--coral-500);
    margin-right: .55rem;
}

.glyph {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
}

.glyph .ic {
    width: 20px;
    height: 20px;
}

.glyph--tick {
    color: var(--coral-500);
}

.glyph--cross {
    color: rgba(76, 21, 38, .5);
}

/* ============================================
   FAQ accordion (native details)
   ============================================ */

.faq-list {
    display: grid;
    gap: .8rem;
    align-items: start;
}

.faq-item {
    background: linear-gradient(160deg, var(--burgundy-800), var(--burgundy-700));
    border: 1px solid rgba(233, 138, 104, .3);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
}

.faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: .95rem 1.25rem;
    cursor: pointer;
    list-style: none;
    color: var(--cream-100);
    font-weight: 600;
    font-size: 1rem;
    border-radius: var(--radius-sm);
    transition: background-color .2s var(--ease-out);
}

.faq-item__summary::-webkit-details-marker {
    display: none;
}

.faq-item__summary:hover {
    background: rgba(221, 114, 80, .12);
}

.faq-item__chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--coral-300);
    transition: transform .28s var(--ease-out);
}

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

.faq-item__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .32s var(--ease-out);
}

.faq-item[open] .faq-item__body {
    grid-template-rows: 1fr;
}

.faq-item__clip {
    overflow: hidden;
    min-height: 0;
}

.faq-item__panel {
    margin: 0 .7rem .7rem;
    background: var(--cream-100);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    color: var(--ink-700);
    font-size: .95rem;
    line-height: 1.65;
}

.faq-item__panel p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Trust signals
   ============================================ */

.trust-grid {
    display: grid;
    gap: 1.4rem;
}

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

.trust-signal {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
}

.trust-signal__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    background: rgba(221, 114, 80, .14);
    border: 1px solid rgba(221, 114, 80, .4);
    color: var(--coral-500);
}

.trust-signal__icon .ic {
    width: 24px;
    height: 24px;
}

.trust-signal__title {
    font-family: var(--font-sans);
    font-size: .98rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 .2rem;
}

.trust-signal__text {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
}

/* ============================================
   Sticky mobile CTA bar
   ============================================ */

.sticky-cta {
    display: none;
}

@media (max-width: 767.98px) {
    .sticky-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 80;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        padding: .6rem .9rem calc(.6rem + env(safe-area-inset-bottom, 0px));
        background: rgba(44, 10, 22, .95);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-top: 1px solid rgba(233, 138, 104, .35);
        transform: translateY(115%);
        transition: transform .35s var(--ease-out);
    }

    .sticky-cta.is-shown {
        transform: translateY(0);
    }

    body.cookie-open .sticky-cta {
        transform: translateY(115%);
    }

    .sticky-cta__meta {
        min-width: 0;
        display: flex;
        flex-direction: column;
        line-height: 1.25;
    }

    .sticky-cta__brand {
        font-family: var(--font-serif);
        font-weight: 800;
        font-size: 1rem;
        color: var(--cream-50);
        white-space: nowrap;
    }

    .sticky-cta__note {
        font-size: .74rem;
        color: var(--coral-300);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sticky-cta__btn {
        flex: 0 0 auto;
        min-height: 48px;
        padding: .5rem 1.3rem;
        border: none;
        border-radius: var(--radius-pill);
        background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
        color: var(--burgundy-900);
        font-family: var(--font-serif);
        font-weight: 800;
        font-size: .98rem;
        cursor: pointer;
        box-shadow: 0 8px 22px -8px rgba(209, 143, 43, .6);
    }

    .sticky-cta__btn:active {
        transform: scale(.97);
    }
}

/* ============================================
   Cookie consent banner + preferences
   ============================================ */

.cookie-banner {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: 120;
    width: min(1080px, calc(100% - 1.5rem));
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: rgba(248, 239, 223, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(221, 114, 80, .4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm);
    padding: 1rem 1.25rem;
}

.cookie-banner__text {
    flex: 1 1 auto;
    min-width: 0;
}

.cookie-banner__title {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    color: var(--ink-900);
    margin-bottom: .15rem;
}

.cookie-banner__text p {
    margin: 0;
    font-size: .86rem;
    line-height: 1.55;
    color: var(--ink-700);
}

.cookie-banner__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.cookie-btn {
    min-height: 46px;
    padding: .55rem 1.3rem;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: .92rem;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .2s var(--ease-out);
}

.cookie-btn:active {
    transform: scale(.97);
}

.cookie-btn--accept {
    border: none;
    background: linear-gradient(180deg, var(--coral-400), var(--coral-600));
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(198, 90, 60, .6);
}

.cookie-btn--accept:hover {
    filter: brightness(1.06);
}

.cookie-btn--manage {
    background: transparent;
    border: 1.5px solid var(--burgundy-700);
    color: var(--burgundy-800);
}

.cookie-btn--manage:hover {
    background: rgba(76, 21, 38, .08);
}

.cookie-banner__close {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-500);
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.cookie-banner__close:hover {
    background: rgba(76, 21, 38, .08);
    color: var(--ink-900);
}

.cookie-banner__close svg {
    width: 20px;
    height: 20px;
}

.cookie-prefs {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1rem;
    z-index: 130;
    width: min(520px, calc(100% - 1.5rem));
    background: var(--cream-50);
    border: 1px solid rgba(221, 114, 80, .4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-warm);
    padding: 1.5rem 1.5rem 1.3rem;
}

.cookie-prefs__title {
    font-size: 1.25rem;
    margin-bottom: .35rem;
}

.cookie-prefs__intro {
    font-size: .88rem;
    color: var(--ink-500);
    margin-bottom: 1.1rem;
}

.cookie-prefs__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    border-top: 1px solid rgba(76, 21, 38, .12);
}

.cookie-prefs__info strong {
    display: block;
    font-size: .95rem;
    color: var(--ink-900);
}

.cookie-prefs__info p {
    margin: .1rem 0 0;
    font-size: .8rem;
    color: var(--ink-500);
}

.cookie-prefs__row input[type="checkbox"] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    accent-color: var(--coral-500);
    cursor: pointer;
}

.cookie-prefs__row input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.cookie-prefs__actions {
    display: flex;
    gap: .6rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

@media (max-width: 767.98px) {
    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
    }

    .cookie-banner__actions {
        flex-wrap: wrap;
    }

    .cookie-banner__actions .cookie-btn {
        flex: 1 1 auto;
    }
}

/* ============================================
   Legal pages (shared parchment reading layout)
   ============================================ */

.legal-hero {
    position: relative;
    overflow: clip;
    background:
        radial-gradient(700px 340px at 12% 0%, rgba(221, 114, 80, .18), transparent 60%),
        linear-gradient(150deg, var(--burgundy-950), var(--burgundy-800));
    color: var(--cream-100);
    padding: 4.25rem 0 3.75rem;
}

.legal-hero__compass {
    position: absolute;
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    height: 340px;
    color: rgba(233, 138, 104, .14);
    pointer-events: none;
}

.legal-hero__inner {
    position: relative;
}

.legal-hero__eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--coral-300);
    margin: 0 0 .7rem;
}

.legal-hero__title {
    color: var(--cream-50);
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    margin: 0 0 .7rem;
    max-width: 20ch;
}

.legal-hero__lede {
    max-width: 60ch;
    font-size: 1.02rem;
    color: rgba(248, 239, 223, .85);
    margin: 0 0 .9rem;
}

.legal-hero__updated {
    margin: 0;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--gold-300);
}

.legal-body {
    padding: 3.5rem 0 4.5rem;
}

@media (min-width: 1024px) {
    .legal-layout {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        gap: 3rem;
        align-items: start;
    }
}

.legal-toc {
    display: none;
}

@media (min-width: 1024px) {
    .legal-toc {
        display: block;
        position: sticky;
        top: calc(var(--header-bottom, 72px) + 14px);
        background: rgba(253, 248, 239, .72);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(221, 114, 80, .3);
        border-radius: var(--radius-md);
        padding: 1.2rem 1.3rem;
    }
}

.legal-toc__title {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--coral-600);
    margin: 0 0 .7rem;
}

.legal-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .2rem;
}

.legal-toc a {
    display: block;
    padding: .45rem .55rem;
    border-radius: 8px;
    color: var(--ink-700);
    text-decoration: none;
    font-size: .93rem;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.legal-toc a:hover {
    background: rgba(221, 114, 80, .12);
    color: var(--burgundy-800);
}

/* Long-form legal prose */
.prose {
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--ink-700);
}

.prose h2 {
    font-size: 1.55rem;
    margin: 2.3rem 0 .85rem;
    scroll-margin-top: calc(var(--header-bottom, 72px) + 14px);
}

.prose h2:first-child {
    margin-top: 0;
}

.prose h3 {
    font-size: 1.18rem;
    margin: 1.7rem 0 .55rem;
}

.prose ul,
.prose ol {
    padding-left: 1.3rem;
    margin: 0 0 1.1rem;
}

.prose li {
    margin-bottom: .45rem;
}

/* Coral-ruled subsection with square marker */
.prose .ruled {
    position: relative;
    border-left: 3px solid rgba(221, 114, 80, .55);
    padding-left: 1.15rem;
    margin: 1.4rem 0;
}

.prose .ruled::before {
    content: "";
    position: absolute;
    left: -6.5px;
    top: .5em;
    width: 10px;
    height: 10px;
    background: var(--coral-500);
}

/* Highlighted callout (affiliate disclosure etc.) */
.callout {
    background: rgba(253, 248, 239, .82);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(221, 114, 80, .35);
    border-left: 4px solid var(--coral-500);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.6rem;
    box-shadow: var(--shadow-card);
    margin: 1.6rem 0;
}

/* ============================================
   Legal heading icon (inline SVG beside h2)
   ============================================ */

.legal-heading-icon {
    width: 1.1em;
    height: 1.1em;
    vertical-align: -0.18em;
    margin-right: 0.35em;
    color: var(--coral-500);
    flex: 0 0 auto;
}

/* ============================================
   Legal article - coral numbered section markers
   ============================================ */

.legal-article {
    counter-reset: legal-section;
}

.legal-article h2 {
    counter-increment: legal-section;
    position: relative;
    padding-left: 2.1rem;
}

.legal-article h2::before {
    content: counter(legal-section) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-serif);
    font-weight: 800;
    color: var(--coral-600);
}

.legal-cta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    margin-top: .5rem;
    padding: .65rem 1.5rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(180deg, var(--coral-400), var(--coral-600));
    color: #fff;
    font-weight: 700;
    font-size: .96rem;
    text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(198, 90, 60, .55);
    transition: transform .2s var(--ease-out), filter .2s var(--ease-out);
}

.legal-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.legal-cta .ic {
    width: 18px;
    height: 18px;
    transform: rotate(-90deg);
}

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

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .reveal--armed {
        opacity: 1 !important;
        transform: none !important;
    }

    .cta {
        animation: none;
    }
}