/*
 * Mdates - shared design system
 * Light-only, Apple HIG-inspired: warm peach + pale sky atmosphere,
 * frosted glass speech-bubble surfaces, one coral accent.
 */

:root {
    /* Type */
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --fs-body: 1.0625rem;          /* 17px */
    --fs-lead: 1.1875rem;          /* 19px */
    --fs-small: 0.9375rem;         /* 15px */
    --fs-h1: clamp(2rem, 1.35rem + 3vw, 3.25rem);
    --fs-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
    --fs-h3: 1.25rem;

    /* Color */
    --ink: #1D1D1F;
    --ink-2: #3A3A40;
    --muted: #55555D;
    --coral: #EE6E4C;              /* decorative only */
    --coral-strong: #DD5A36;
    --coral-deep: #C44629;
    --coral-ink: #B23F26;          /* text-safe coral */
    --peach: #FCE6DA;
    --peach-soft: #FFF3EC;
    --peach-line: #F2CDB9;
    --sky: #DDEAF8;
    --sky-soft: #EEF4FB;
    --sky-row: #F3F7FC;
    --sky-head: #E3EDF9;
    --sky-ink: #2F5F9E;
    --sky-num: #6A8AB6;
    --hairline: #F1E3DA;
    --white: #FFFFFF;

    /* Surfaces */
    --glass-bg: rgba(255, 255, 255, 0.68);
    --glass-strong: rgba(255, 255, 255, 0.84);
    --glass-border: rgba(255, 255, 255, 0.92);
    --blur: 18px;
    --shadow-soft: 0 12px 32px -14px rgba(176, 98, 70, 0.32), 0 2px 6px rgba(176, 98, 70, 0.06);
    --shadow-lift: 0 22px 48px -18px rgba(176, 98, 70, 0.42);
    --glow-coral: 0 12px 28px -8px rgba(224, 92, 58, 0.6);

    /* Shape */
    --radius-xl: 28px;
    --radius-lg: 24px;
    --radius-md: 22px;
    --radius-sm: 18px;
    --radius-pill: 999px;

    /* Layout */
    --container: 1200px;
    --gutter: clamp(16px, 4.5vw, 32px);
    --section-y: clamp(56px, 9vw, 104px);
    --header-h: 64px;
    --header-bottom: 64px;

    --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}

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

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

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

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

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

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

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

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

details {
    height: fit-content;
}

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

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

section {
    overflow: clip;
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    color: var(--ink);
    background-color: #FAF3EF;
    background-image:
        radial-gradient(60rem 40rem at 0% 0%, rgba(252, 220, 202, 0.95), transparent 62%),
        radial-gradient(52rem 36rem at 100% 10%, rgba(221, 234, 248, 0.95), transparent 62%),
        radial-gradient(56rem 40rem at 0% 42%, rgba(221, 234, 248, 0.9), transparent 62%),
        radial-gradient(56rem 40rem at 100% 60%, rgba(252, 224, 208, 0.9), transparent 62%),
        radial-gradient(60rem 40rem at 8% 90%, rgba(225, 236, 249, 0.9), transparent 62%),
        linear-gradient(160deg, #FCE6DA 0%, #F8EEE9 32%, #E8F0F9 62%, #F9E9E0 100%);
    background-repeat: no-repeat;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.menu-open {
    overflow: hidden;
}

main {
    flex: 1 0 auto;
    display: block;
}

main:focus {
    outline: none;
}

img {
    display: block;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.3; }

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

a {
    color: var(--coral-ink);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--coral-deep);
}

strong { font-weight: 700; }

:focus-visible {
    outline: 3px solid var(--coral-ink);
    outline-offset: 3px;
    border-radius: 10px;
}

::selection {
    background: #FBD3BF;
    color: var(--ink);
}

.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: 300;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--white);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s var(--ease);
}

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

/* ============================================
   LAYOUT PRIMITIVES
   ============================================ */

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

.container--narrow {
    max-width: calc(52rem + 2 * var(--gutter));
}

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

.section--tight {
    padding-block: calc(var(--section-y) * 0.6);
}

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

.section-head p {
    color: var(--ink-2);
    margin-bottom: 0;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
}

.muted-note {
    font-size: var(--fs-small);
    color: var(--muted);
}

.prose {
    max-width: 46rem;
}

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

.prose ul:not([class]),
.prose ol:not([class]) {
    padding-left: 1.3em;
    margin: 0 0 1em;
}

.prose ul:not([class]) li,
.prose ol:not([class]) li {
    margin-bottom: 0.4em;
}

.prose li::marker {
    color: var(--coral-ink);
}

/* ============================================
   ICONS
   ============================================ */

.icon {
    display: inline-block;
    flex: none;
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.icon .i-fill {
    fill: currentColor;
    opacity: 0.16;
    stroke: none;
}

.icon .i-accent {
    stroke: var(--icon-accent, currentColor);
}

/* ============================================
   HEADER
   ============================================ */

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

.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border-bottom: 1px solid rgba(240, 224, 214, 0.9);
    transition: box-shadow 0.3s var(--ease);
}

.site-header.is-scrolled::before {
    box-shadow: 0 8px 26px -14px rgba(140, 90, 70, 0.45);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--header-h);
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: clamp(12px, 4.5vw, 32px);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--coral-strong);
    text-decoration: none;
    flex: none;
}

.site-brand:hover {
    color: var(--coral-deep);
}

.site-brand__text {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.035em;
    line-height: 1;
}

.site-brand__spark {
    width: 18px;
    height: 18px;
    margin: -14px 0 0 1px;
    color: var(--coral);
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    margin-left: auto;
    border: 1.5px solid var(--coral-strong);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.6);
    color: var(--coral-ink);
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    flex: none;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.header-cta:hover {
    background: var(--coral-deep);
    border-color: var(--coral-deep);
    color: var(--white);
    box-shadow: var(--glow-coral);
}

.header-cta:active {
    transform: scale(0.97);
}

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    flex: none;
    border: 1px solid rgba(240, 220, 208, 0.95);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s var(--ease), background-color 0.2s;
}

.menu-toggle__bars {
    position: relative;
}

.menu-toggle__bars::before,
.menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
    background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
}

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

.site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    color: var(--ink-2);
    font-weight: 500;
    text-decoration: none;
}

.site-nav a:hover {
    color: var(--coral-ink);
}

.site-nav a[aria-current="page"] {
    color: var(--coral-ink);
    font-weight: 600;
}

.site-nav__note {
    margin: 20px 0 0;
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    background: var(--peach-soft);
    border: 1px solid var(--peach-line);
    color: var(--ink-2);
    font-size: var(--fs-small);
}

/* Mobile drawer */
@media (max-width: 767.98px) {
    .site-nav {
        position: fixed;
        top: var(--header-bottom);
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        z-index: 99;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom));
        background: #FFF8F4;
        border-top: 1px solid var(--hairline);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-8px);
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0.22s;
    }

    .site-nav.is-open {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0s linear 0s;
    }

    .site-nav__list {
        flex-direction: column;
    }

    .site-nav a {
        font-size: 1.125rem;
        padding: 0 6px;
        border-bottom: 1px solid var(--hairline);
    }
}

@media (max-width: 359.98px) {
    .site-header__inner { gap: 6px; }
    .site-brand__text { font-size: 1.3125rem; }
    .site-brand__spark { width: 14px; height: 14px; }
    .header-cta { padding: 0 12px; font-size: 0.9375rem; }
}

@media (min-width: 768px) {
    :root { --header-h: 72px; }

    .menu-toggle { display: none; }

    .site-nav {
        margin-left: auto;
    }

    .site-nav__list {
        align-items: center;
        gap: 4px;
    }

    .site-nav__item--drawer,
    .site-nav__note {
        display: none;
    }

    .site-nav a {
        min-height: 44px;
        padding: 0 16px;
        border-radius: var(--radius-pill);
        font-size: 1.0625rem;
    }

    .site-nav a:hover {
        background: rgba(255, 255, 255, 0.7);
    }

    .site-header__inner .header-cta {
        margin-left: 8px;
    }

    .site-brand__text { font-size: 1.75rem; }
}

/* ============================================
   BUTTONS & PILLS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease);
}

.btn__icon {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
    transition: transform 0.25s var(--ease);
}

.btn--primary {
    color: var(--white);
    background: linear-gradient(180deg, #E8653F 0%, #D4502F 55%, #C44629 100%);
    box-shadow: var(--glow-coral), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.btn--primary:hover {
    color: var(--white);
    transform: translateY(-2px);
    animation: btn-pulse 1.8s ease-in-out infinite;
}

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

.btn--primary:active {
    transform: scale(0.98);
}

.btn--ghost {
    color: var(--coral-ink);
    background: var(--glass-strong);
    border: 1.5px solid var(--coral-strong);
    box-shadow: var(--shadow-soft);
}

.btn--ghost:hover {
    color: var(--coral-deep);
    transform: translateY(-2px);
}

@keyframes btn-pulse {
    0%, 100% { box-shadow: 0 12px 28px -8px rgba(224, 92, 58, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
    50% { box-shadow: 0 16px 40px -6px rgba(224, 92, 58, 0.8), 0 0 0 6px rgba(238, 110, 76, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
}

.glass-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 14px -6px rgba(150, 100, 80, 0.35);
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* ============================================
   GLASS & SPEECH-BUBBLE SURFACES
   ============================================ */

.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
    backdrop-filter: blur(var(--blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
}

.bubble {
    --bubble-bg: rgba(255, 255, 255, 0.76);
    --tail: rgba(255, 255, 255, 0.9);
    position: relative;
    margin-bottom: 16px;
    border-radius: var(--radius-lg);
    background: var(--bubble-bg);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.4);
    backdrop-filter: blur(var(--blur)) saturate(1.4);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
}

.bubble::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -16px;
    width: 26px;
    height: 17px;
    background: var(--tail);
    clip-path: path("M0 0 H26 C18 3 10 9 3 17 C5 10 5 5 0 0 Z");
    pointer-events: none;
}

.bubble--peach {
    --bubble-bg: linear-gradient(160deg, rgba(255, 247, 241, 0.94), rgba(253, 229, 216, 0.86));
    --tail: #FCE5D8;
}

.bubble--blue {
    --bubble-bg: linear-gradient(160deg, rgba(248, 251, 255, 0.94), rgba(222, 234, 248, 0.88));
    --tail: #DFEAF7;
}

.bubble--white {
    --bubble-bg: rgba(255, 255, 255, 0.84);
    --tail: rgba(255, 255, 255, 0.92);
}

/* Icon card */
.icon-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px 20px;
}

.icon-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 20px 22px;
    border-radius: var(--radius-md);
}

.icon-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px #F6D9CA;
    color: var(--coral-ink);
}

.icon-card__icon .icon {
    width: 26px;
    height: 26px;
}

.icon-card__title {
    margin: 0 0 4px;
    font-size: 1.125rem;
    line-height: 1.3;
}

.icon-card__text {
    margin: 0;
    color: var(--ink-2);
}

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

/* ============================================
   DISCLOSURE BAR & CALLOUT
   ============================================ */

.disclosure-bar {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, #FDEDE3 0%, #FCE3D5 100%);
    border: 1px solid var(--peach-line);
    box-shadow: 0 8px 22px -16px rgba(176, 98, 70, 0.5);
    color: var(--ink);
}

.disclosure-bar strong {
    color: #8F3420;
}

.disclosure-bar__icon {
    margin-top: 1px;
    color: var(--coral-ink);
}

@media (min-width: 768px) {
    .disclosure-bar {
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-pill);
        padding: 14px 28px;
        text-align: center;
    }
}

.callout {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, #FFF2EA 0%, #FCE3D6 100%);
    border: 1px solid var(--peach-line);
    box-shadow: var(--shadow-soft);
}

.callout > .icon {
    width: 30px;
    height: 30px;
    color: var(--coral-ink);
}

.callout h3 {
    margin-top: 0;
}

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

/* Check list */
.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.check-list li {
    position: relative;
    padding-left: 36px;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15em;
    width: 24px;
    height: 24px;
    border: 2px solid var(--coral-ink);
    border-radius: 50%;
}

.check-list li::after {
    content: "";
    position: absolute;
    left: 9px;
    top: calc(0.15em + 5px);
    width: 6px;
    height: 11px;
    border: solid var(--coral-ink);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

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

.glass-tablecard {
    position: relative;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(var(--blur)) saturate(1.3);
    backdrop-filter: blur(var(--blur)) saturate(1.3);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    overflow: clip;
}

.table-wrapper {
    -webkit-overflow-scrolling: touch;
}

.table-wrapper:focus-visible {
    outline-offset: -3px;
}

.dtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-body);
    line-height: 1.45;
}

.dtable caption {
    padding: 14px 16px 0;
    text-align: left;
    color: var(--muted);
    font-size: var(--fs-small);
}

.dtable th,
.dtable td {
    padding: 14px 16px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(240, 224, 214, 0.75);
}

.dtable thead th {
    background: var(--sky-head);
    color: var(--ink);
    font-weight: 700;
    font-size: 1rem;
}

.dtable tbody tr:nth-child(odd) > * {
    background: rgba(255, 255, 255, 0.92);
}

.dtable tbody tr:nth-child(even) > * {
    background: var(--sky-row);
}

.dtable tbody th {
    font-weight: 600;
}

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

.dtable tfoot td,
.dtable tfoot th {
    background: #FDE9DE;
    border-bottom: 0;
    border-top: 1px solid var(--peach-line);
}

/* Key / value table (label column + value column) */
.dtable.is-keyvalue tbody th[scope="row"] {
    width: 40%;
    background: #E8F0FA;
}

.dtable.is-keyvalue tbody td {
    background: rgba(255, 255, 255, 0.94);
}

/* Stacked rows on mobile (cells need data-label) */
@media (max-width: 767.98px) {
    .dtable.is-stacked thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .dtable.is-stacked,
    .dtable.is-stacked tbody,
    .dtable.is-stacked tr,
    .dtable.is-stacked th,
    .dtable.is-stacked td {
        display: block;
        width: 100%;
    }

    .dtable.is-stacked tbody {
        padding: 12px;
    }

    .dtable.is-stacked tr {
        margin-bottom: 12px;
        border-radius: var(--radius-sm);
        overflow: hidden;
        border: 1px solid #E6EEF8;
    }

    .dtable.is-stacked tr:last-child {
        margin-bottom: 0;
    }

    .dtable.is-stacked tbody tr > * {
        background: rgba(255, 255, 255, 0.95);
        border-bottom: 1px solid #EEF2F8;
    }

    .dtable.is-stacked tbody tr > :first-child {
        background: var(--sky-head);
    }

    .dtable.is-stacked td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--muted);
    }
}

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

.faq-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    max-width: 52rem;
    margin-inline: auto;
}

.faq-item {
    align-self: start;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition: box-shadow 0.25s var(--ease);
}

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

.faq-item__q {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 10px 10px 16px;
    border-radius: var(--radius-md);
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

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

.faq-item__q::marker {
    content: "";
}

.faq-item__q:focus-visible {
    outline: 3px solid var(--coral-ink);
    outline-offset: 2px;
}

.faq-item__icon {
    display: inline-flex;
    flex: none;
    color: var(--coral-ink);
}

.faq-item__heading {
    flex: 1;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0;
}

.faq-item__chevron {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--peach-soft);
    color: var(--coral-ink);
    transition: transform 0.3s var(--ease), background-color 0.2s;
}

.faq-item__q:hover .faq-item__chevron {
    background: #FDE3D5;
}

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

.faq-item__a {
    padding: 0 18px 20px;
    color: var(--ink-2);
}

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

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

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

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

@media (min-width: 768px) {
    .faq-item__a {
        padding-left: 52px;
    }
}

@media (min-width: 1024px) {
    .faq-list--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: none;
    }
}

/* ============================================
   CTA CARD
   ============================================ */

.cta-card {
    position: relative;
    text-align: center;
    padding: clamp(32px, 6vw, 56px) clamp(20px, 5vw, 56px);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.8), transparent 60%),
        linear-gradient(160deg, #FFEDE3 0%, #FCDAC8 100%);
    border: 1px solid var(--glass-border);
    box-shadow: inset 0 0 70px rgba(238, 110, 76, 0.2), var(--shadow-lift);
}

.cta-card__title {
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
    margin-bottom: 0.4em;
}

.cta-card__text {
    max-width: 36rem;
    margin: 0 auto 26px;
    color: var(--ink-2);
    font-size: var(--fs-lead);
}

.cta-card__note {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: var(--fs-small);
}

.cta-card--compact {
    padding: clamp(26px, 5vw, 40px) clamp(20px, 4vw, 40px);
}

.cta-card--compact .cta-card__title {
    font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
}

.cta-card--compact .cta-card__text {
    font-size: var(--fs-body);
    margin-bottom: 22px;
}

@media (max-width: 479.98px) {
    .cta-card .btn {
        width: 100%;
    }
}

/* ============================================
   ORNAMENT & LIGHT RIBBON
   ============================================ */

.ornament {
    position: absolute;
    z-index: 1;
    width: var(--orn-size, 120px);
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 16px 24px rgba(110, 140, 190, 0.28));
    animation: orn-float 6s ease-in-out infinite;
}

.ornament--coral {
    filter: hue-rotate(165deg) saturate(1.35) drop-shadow(0 16px 24px rgba(224, 110, 80, 0.3));
}

.ornament--static {
    animation: none;
}

@keyframes orn-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

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

.light-ribbon__shine {
    stroke-dashoffset: 1000;
    animation: ribbon-shine 9s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

.light-ribbon__dot {
    transform-box: fill-box;
    transform-origin: center;
    animation: ribbon-twinkle 3.6s ease-in-out infinite;
    animation-delay: var(--dot-delay, 0s);
}

@keyframes ribbon-shine {
    to { stroke-dashoffset: 0; }
}

@keyframes ribbon-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.7); }
}

/* ============================================
   INNER PAGE HERO
   ============================================ */

.page-hero {
    position: relative;
    isolation: isolate;
    padding: clamp(24px, 4vw, 48px) 0 clamp(56px, 8vw, 96px);
}

.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(40rem 26rem at 12% 20%, rgba(252, 212, 190, 0.9), transparent 65%),
        radial-gradient(40rem 28rem at 88% 78%, rgba(206, 224, 247, 0.95), transparent 65%),
        linear-gradient(135deg, #FCE6DA 0%, #F6EEEC 50%, #DDEAF8 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.page-hero--calm::before {
    filter: saturate(0.72);
}

.page-hero .light-ribbon {
    z-index: -1;
}

.page-hero__inner {
    position: relative;
}

.page-hero__intro {
    max-width: 40rem;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-2);
}

/* Breadcrumbs */
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: var(--fs-small);
    color: var(--muted);
}

.breadcrumbs__list li {
    display: inline-flex;
    align-items: center;
}

.breadcrumbs__list li + li::before {
    content: "/";
    margin: 0 8px 0 4px;
    color: var(--muted);
}

.breadcrumbs__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--coral-ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

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

.site-footer {
    flex-shrink: 0;
    margin-top: clamp(24px, 4vw, 48px);
    padding: 28px 0 calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(240, 222, 210, 0.95);
    background: rgba(255, 255, 255, 0.5);
}

.site-footer__inner {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    width: fit-content;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.375rem;
    letter-spacing: -0.03em;
    color: var(--coral-strong);
    text-decoration: none;
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin: 0 0 0 -10px;
    padding: 0;
    list-style: none;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--muted);
    font-size: var(--fs-small);
    text-decoration: none;
}

.site-footer__links a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.site-footer__copy,
.site-footer__note {
    margin: 0;
    color: var(--muted);
    font-size: var(--fs-small);
}

.site-footer__note {
    max-width: 44rem;
}

@media (min-width: 1024px) {
    .site-footer__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 32px;
    }

    .site-footer__links {
        margin-left: 0;
    }

    .site-footer__note {
        grid-column: 1 / -1;
    }
}

/* ============================================
   SCROLL REVEAL (only active when JS adds .js-reveal)
   ============================================ */

.js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

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

/* ============================================
   HOMEPAGE - HERO
   ============================================ */

.hero {
    position: relative;
    isolation: isolate;
    padding: 12px 0 clamp(40px, 7vw, 88px);
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(34rem 26rem at 18% 55%, rgba(252, 208, 184, 0.75), transparent 65%),
        radial-gradient(36rem 30rem at 80% 35%, rgba(204, 223, 247, 0.85), transparent 65%),
        linear-gradient(135deg, #FCE6DA 0%, #F7EEEA 50%, #DDEAF8 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
}

.hero .light-ribbon {
    z-index: -1;
}

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

.hero__media {
    order: -1;
}

.hero__title {
    margin-bottom: 14px;
}

.hero__lead {
    max-width: 34rem;
    margin-bottom: 20px;
    color: var(--ink-2);
}

.hero__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: var(--muted);
    font-size: var(--fs-small);
}

.hero__note .icon {
    width: 20px;
    height: 20px;
    color: var(--coral-ink);
}

@media (max-width: 479.98px) {
    .hero__cta {
        width: 100%;
    }
}

/* Photo cluster */
.hero-cluster {
    position: relative;
    width: min(100%, 300px);
    margin-inline: auto;
    aspect-ratio: 6 / 5;
}

.hero-photo {
    position: absolute;
    margin: 0;
    padding: 5px;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(253, 229, 216, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 40px -16px rgba(224, 92, 58, 0.45), 0 0 0 1px rgba(242, 205, 185, 0.55);
}

.hero-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 25%;
    border-radius: 15px;
}

.hero-photo::after {
    content: "";
    position: absolute;
    left: 20px;
    bottom: -12px;
    width: 22px;
    height: 13px;
    background: #FCE5D8;
    clip-path: path("M0 0 H22 C15 3 8 7 3 13 C4 8 4 4 0 0 Z");
}

.hero-photo--2::after {
    left: auto;
    right: 20px;
    transform: scaleX(-1);
}

.hero-photo--1 { left: 4%; top: 3%; width: 40%; z-index: 1; }
.hero-photo--2 { right: 3%; top: 20%; width: 35%; z-index: 2; }
.hero-photo--3 { left: 31%; top: 36%; width: 37%; z-index: 3; }

.hero-photo__caption {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    max-width: calc(100% - 12px);
    min-height: 0;
    padding: 3px 8px;
    font-size: 0.6875rem;
    white-space: normal;
    text-align: center;
    color: var(--ink);
}

.hero-tag {
    display: none;
    position: absolute;
    z-index: 4;
}

.hero-tag--1 { left: 0; top: 67%; }
.hero-tag--2 { right: 0; top: 76%; }
.hero-tag--3 { left: 70%; top: 89%; }

.hero-cluster .hero-orn {
    z-index: 5;
}

.hero-cluster .hero-orn--top { left: 40%; top: -7%; width: 17%; }
.hero-cluster .hero-orn--right { right: -3%; top: 3%; width: 15%; animation-delay: -2s; }
.hero-cluster .hero-orn--left { left: 10%; bottom: 0; width: 14%; animation-delay: -4s; }

@media (min-width: 480px) {
    .hero-cluster { width: min(100%, 380px); }
}

@media (min-width: 768px) {
    .hero__lead { font-size: var(--fs-lead); }
    .hero-cluster { width: min(100%, 480px); }
    .hero-tag { display: inline-flex; }
    .hero-photo__caption { font-size: 0.8125rem; padding: 4px 12px; white-space: nowrap; }
}

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

    .hero__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        gap: 40px;
    }

    .hero__media {
        order: 0;
    }

    .hero-cluster {
        width: 100%;
        max-width: 580px;
    }

    .hero-photo {
        padding: 8px;
        border-radius: 28px;
    }

    .hero-photo img {
        border-radius: 21px;
    }

    .hero-photo::after {
        left: 30px;
        bottom: -16px;
        width: 28px;
        height: 17px;
        clip-path: path("M0 0 H28 C19 3 10 9 3 17 C5 10 5 5 0 0 Z");
    }

    .hero-photo--2::after {
        right: 30px;
    }
}

/* ============================================
   HOMEPAGE - FLOW RIBBON & PAIRS
   ============================================ */

.page-flow {
    position: relative;
    isolation: isolate;
}

.page-flow__ribbon {
    z-index: -1;
    opacity: 0.6;
}

.pair {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--section-y) * 0.9);
}

.pair > * {
    min-width: 0;
}

.pair__col {
    overflow: visible;
}

.col-head {
    max-width: 36rem;
    margin: 0 auto 26px;
    text-align: center;
}

.col-head p {
    margin: 0;
    color: var(--ink-2);
}

.pair .pair__orn {
    display: none;
}

@media (min-width: 1024px) {
    .pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px;
        align-items: start;
    }

    .pair--faq {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .pair .pair__orn {
        display: block;
        left: calc(50% - 55px);
        top: -36px;
        width: 110px;
        z-index: 2;
    }
}

/* ============================================
   HOMEPAGE - HOW IT WORKS
   ============================================ */

.steps {
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    max-width: 980px;
    margin: 0 auto 36px;
    padding: 0;
}

.step {
    padding: 30px 22px 26px;
    text-align: center;
}

.step__num {
    position: absolute;
    top: 10px;
    left: 20px;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--sky-num);
}

.step__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: inset 0 0 0 1px rgba(214, 228, 246, 0.9);
    color: var(--sky-ink);
    --icon-accent: var(--coral-strong);
}

.step__icon .icon {
    width: 36px;
    height: 36px;
}

.step__title {
    margin-bottom: 6px;
}

.step__text {
    margin: 0;
    color: var(--ink-2);
}

.step__arrow {
    position: absolute;
    left: 50%;
    bottom: -44px;
    width: 30px;
    margin-left: -15px;
    color: var(--coral);
    transform: rotate(90deg);
}

.how__disclosure {
    max-width: 980px;
    margin-inline: auto;
}

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

    .step__arrow {
        left: auto;
        right: -41px;
        top: 50%;
        bottom: auto;
        margin: -8px 0 0;
        transform: none;
    }
}

/* ============================================
   HOMEPAGE - COIN TABLE
   ============================================ */

.th-inner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.coin-art {
    width: 32px;
    height: 32px;
    flex: none;
}

.coin-stack {
    width: 48px;
    height: 40px;
    flex: none;
}

.dtable.coin-table thead th {
    vertical-align: middle;
}

.dtable.coin-table thead th:last-child {
    background: #FCE6DA;
}

.dtable.coin-table tbody tr > td:last-child {
    background: #FEF1E9;
}

.dtable.coin-table tfoot td {
    padding: 16px 18px;
    background: #FDE6D9;
    color: var(--ink);
    line-height: 1.5;
}

.dtable.coin-table tfoot strong {
    color: #8F3420;
}

@media (max-width: 767.98px) {
    .dtable.is-stacked tfoot,
    .dtable.is-stacked tfoot tr,
    .dtable.is-stacked tfoot td {
        display: block;
        width: 100%;
    }
}

/* ============================================
   HOMEPAGE - PROFILE CAROUSEL
   ============================================ */

.pcarousel {
    position: relative;
}

.pcarousel__track {
    position: relative;
    display: flex;
    gap: 14px;
    margin: 0 calc(-1 * var(--gutter));
    padding: 22px calc(50% + var(--gutter) - 115px) 28px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

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

.pcarousel__track:focus-visible {
    outline-offset: -3px;
}

.pcard {
    display: flex;
    flex-direction: column;
    flex: 0 0 230px;
    padding: 10px 10px 14px;
    scroll-snap-align: center;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-soft);
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.pcarousel.is-ready .pcard {
    transform: scale(0.94);
}

.pcarousel.is-ready .pcard.is-active {
    transform: scale(1.06);
    box-shadow: 0 22px 42px -16px rgba(224, 92, 58, 0.5), 0 0 0 1px rgba(242, 180, 150, 0.7);
}

.pcard__media {
    position: relative;
}

.pcard__media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: 50% 25%;
    border-radius: var(--radius-sm);
}

.pcard__pill {
    position: absolute;
    left: 8px;
    bottom: 8px;
    min-height: 0;
    font-size: 0.8125rem;
    color: var(--ink);
}

.pcard__media .pcard__orn {
    top: -16px;
    right: -14px;
    width: 52px;
    z-index: 2;
}

.pcard__starter {
    flex: 1;
    margin: 12px 4px;
    line-height: 1.45;
    color: var(--ink);
}

.pcard__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1.5px solid var(--coral-strong);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--coral-ink);
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.pcard__btn:hover {
    background: var(--coral-deep);
    border-color: var(--coral-deep);
    color: var(--white);
}

.pcarousel__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pcarousel__controls[hidden] {
    display: none;
}

.pcarousel__nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft);
    color: var(--coral-ink);
    cursor: pointer;
    transition: transform 0.2s var(--ease);
}

.pcarousel__nav:hover:not(:disabled) {
    transform: scale(1.06);
}

.pcarousel__nav:disabled {
    color: #8E8E96;
    cursor: default;
}

.pcarousel__nav--prev .icon { transform: rotate(90deg); }
.pcarousel__nav--next .icon { transform: rotate(-90deg); }

.pcarousel__dots {
    display: flex;
}

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

.pcarousel__dot span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-pill);
    background: #E3BFAE;
    transition: width 0.3s var(--ease), background-color 0.3s var(--ease);
}

.pcarousel__dot[aria-current="true"] span {
    width: 26px;
    background: var(--coral-strong);
}

@media (min-width: 1024px) {
    .pcarousel__track {
        margin-inline: 0;
        padding-inline: calc(50% - 115px);
    }
}

/* ============================================
   HOMEPAGE - TRUST & REVIEW THEMES
   ============================================ */

.icon-card-grid > div {
    display: flex;
}

.icon-card-grid > div > .icon-card {
    flex: 1;
}

.trust__operator {
    margin: 26px 0 0;
    text-align: center;
}

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

.theme {
    display: flex;
    flex-direction: column;
}

.theme__bubble {
    flex: 1;
    margin: 0 0 26px;
    padding: 18px 20px 20px;
    font-weight: 600;
    color: var(--ink);
}

.theme__quote {
    display: block;
    width: 30px;
    height: 30px;
    margin-bottom: 6px;
    color: #F2A88F;
}

.theme__answer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding-left: 12px;
    color: var(--ink-2);
}

.theme__avatar {
    width: 32px;
    height: 32px;
}

@media (min-width: 768px) and (max-width: 1023.98px) {
    .themes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

/* ============================================
   HOMEPAGE - COMPARISON TABLE
   ============================================ */

.ctable {
    min-width: 540px;
}

.ctable .icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    vertical-align: -4px;
}

.dtable.ctable thead th {
    vertical-align: bottom;
}

.dtable.ctable thead th.is-mdates {
    background: #FCE3D5;
    border-radius: 18px 18px 0 0;
    color: var(--ink);
}

.dtable.ctable thead th.is-mdates .icon {
    color: var(--coral-ink);
    width: 22px;
    height: 22px;
}

.dtable.ctable .is-main {
    color: var(--muted);
}

.dtable.ctable thead th.is-main {
    font-weight: 600;
}

.dtable.ctable tbody tr > .is-mdates {
    background: #FEEFE6;
    font-weight: 600;
}

.dtable.ctable .is-mdates {
    border-left: 1px solid var(--peach-line);
    border-right: 1px solid var(--peach-line);
    box-shadow: 8px 0 18px -14px rgba(176, 98, 70, 0.5), -8px 0 18px -14px rgba(176, 98, 70, 0.5);
}

.dtable.ctable tbody tr:last-child > .is-mdates {
    border-radius: 0 0 18px 18px;
    border-bottom: 1px solid var(--peach-line);
}

.dtable.ctable tbody .is-mdates .icon {
    color: var(--coral-ink);
}

.dtable.ctable tbody .is-main .icon {
    color: #8E8E96;
}

.dtable.ctable thead th:first-child,
.dtable.ctable tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
}

.dtable.ctable thead th:first-child {
    background: var(--sky-head);
}

.dtable.ctable tbody tr:nth-child(odd) > th {
    background: #FFFFFF;
}

.dtable.ctable tbody tr:nth-child(even) > th {
    background: var(--sky-row);
}

.compare-takeaway {
    margin: 20px 0 0;
    color: var(--ink-2);
}

@media (min-width: 1024px) {
    .ctable {
        min-width: 0;
    }

    .dtable.ctable thead th:first-child,
    .dtable.ctable tbody th {
        position: static;
    }
}

/* ============================================
   HOMEPAGE - CLOSING
   ============================================ */

.closing {
    padding-top: calc(var(--section-y) * 0.5);
}

/* ============================================
   CONTACT PAGE
   ============================================ */

.contact-hero .light-ribbon--band {
    top: auto;
    bottom: 0;
    height: 60%;
}

.contact-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 40rem;
    margin: 28px 0 22px;
    padding: 22px 24px 24px;
}

.contact-panel .contact-panel__orn {
    top: -40px;
    right: -4px;
}

.contact-panel__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: var(--white);
    box-shadow: inset 0 0 0 1px #F6D9CA;
    color: var(--coral-ink);
}

.contact-panel__icon .icon {
    width: 30px;
    height: 30px;
}

.contact-panel__body {
    min-width: 0;
}

.contact-panel__label {
    margin: 0 0 2px;
    color: var(--muted);
    font-size: var(--fs-small);
    font-weight: 600;
}

.contact-panel__email {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1.6vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--coral-ink);
    text-decoration: underline;
    text-underline-offset: 0.18em;
    overflow-wrap: anywhere;
}

.contact-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 40rem;
    margin: 0;
    color: var(--ink-2);
    font-size: var(--fs-small);
}

.contact-note .icon {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    color: var(--coral-ink);
}

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

.contact-split > section {
    overflow: visible;
}

.contact-split h2 {
    margin-bottom: 0.6em;
}

.contact-card {
    padding: 22px 22px 24px;
}

.contact-safety {
    margin: 14px 0 0;
}

.contact-center {
    text-align: center;
}

.contact-split .glass-tablecard .dtable.is-keyvalue tbody th[scope="row"] {
    width: 42%;
}

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

@media (prefers-reduced-motion: reduce) {
    .pcarousel.is-ready .pcard,
    .pcarousel.is-ready .pcard.is-active {
        transform: none;
    }

    .pcarousel__nav:hover:not(:disabled) {
        transform: none;
    }
}

/* ============================================
   COOKIE PAGE
   ============================================ */

.cookie-hero__copy {
    position: relative;
    max-width: 44rem;
}

.cookie-hero__copy h1 {
    padding-right: 0;
}

.cookie-hero__pill {
    margin: 4px 0 0;
    min-height: 36px;
    font-size: 0.9375rem;
}

.cookie-hero .cookie-hero__orn {
    display: none;
    top: -12px;
    right: 0;
}

@media (min-width: 640px) {
    .cookie-hero .cookie-hero__orn {
        display: block;
    }
}

.cookie-table-card {
    margin-top: 22px;
}

.dtable.cookie-table tbody th[scope="row"] {
    font-weight: 700;
    color: var(--ink);
}

.cookie-note {
    margin: 18px 0 0;
    padding: 14px 18px;
    border-radius: var(--radius-sm);
    background: var(--peach-soft);
    border: 1px solid var(--peach-line);
    color: var(--ink);
}

.cookie-note strong {
    color: #8F3420;
}

.check-list + .cookie-note,
.browser-grid + p {
    margin-top: 18px;
}

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

.browser-tile {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    min-height: 44px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
    color: var(--ink-2);
}

.browser-tile .icon {
    width: 30px;
    height: 30px;
    margin-top: 1px;
    color: var(--coral-ink);
}

.browser-tile strong {
    color: var(--ink);
}

.cookie-callout {
    margin-top: 22px;
}

.cookie-callout > .icon {
    flex: none;
}

.cookie-callout p {
    color: var(--ink-2);
}

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

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

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

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

    .ornament,
    .light-ribbon__dot,
    .btn--primary:hover {
        animation: none !important;
    }

    .light-ribbon__shine {
        display: none;
    }

    .btn:hover,
    .btn--primary:hover {
        transform: none;
    }

    .js-reveal [data-reveal] {
        opacity: 1;
        transform: none;
    }
}