/* ===== UTILITY CLASSES ===== */
.text-primary-gold {
    color: var(--primary);
}

/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    height: 100%;
}

:root {
    /* ── Landing-page light-first token overrides ────────────────
       company.css defines the base light-mode variables.
       Landing page always uses gold as primary (brand choice).
       html.dark-mode block below sets dark overrides.
       ─────────────────────────────────────────────────────────── */

    /* Landing-specific extended tokens */
    --primary-dim: color-mix(in srgb, var(--primary) 70%, transparent);

    /* Light-mode aliases for landing-specific vars */
    --bg-dark: var(--bg-body);
    --bg-section-alt: #FDFCFB;
    --text-primary: var(--dark-text);
    --text-muted: var(--muted-text);
    --border-color: var(--border);
    --bg-card: var(--card-bg);
    --bg-card-hover: var(--card-bg-hover);

    /* Glass effects — light mode */
    --glass-bg: rgba(253, 252, 251, 0.7);
    --glass-border: rgba(0, 0, 0, 0.05);
    --glass-border-hover: var(--at-40);
    --glow-strong: var(--at-35);

    /* Landing-specific layout tokens */
    --accent-green: #2d3a2d;
    --radius-lg: 16px;
}

html.dark-mode {
    /* Landing dark-mode overrides */
    --bg-body: #0a120a;
    --bg-section: #0f1a0f;
    --bg-section-alt: #111e11;
    --bg-dark: #0a120a;

    --card-bg: rgba(255, 255, 255, 0.04);
    --card-bg-hover: rgba(255, 255, 255, 0.08);
    --bg-card: rgba(255, 255, 255, 0.04);
    --bg-card-hover: rgba(255, 255, 255, 0.08);

    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.08);
}

body {
    font-family: var(--font-body);
    color: var(--dark-text);
    background: var(--bg-body);
    overflow-x: hidden;
}

/* ===== ICON SYSTEM ===== */
.icon-svg {
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
}

.brand-icon {
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    object-fit: cover;
    object-position: center 45%;
    -webkit-mask-image: radial-gradient(circle at center, black 52%, transparent 70%);
    mask-image: radial-gradient(circle at center, black 52%, transparent 70%);
}

/* ===== NAVIGATION ===== */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 4rem;
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    animation: slideDown 0.6s ease-out;
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

nav.scrolled {
    background: rgba(10, 18, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    padding: 1rem 4rem;
}

nav .logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: opacity 0.3s;
}

nav .logo:hover {
    opacity: 0.85;
}

nav .actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* ── Theme Toggle ── */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--at-08);
    border: 1px solid var(--at-20);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    gap: 0.25rem;
    transition: background 0.2s ease, border-color 0.2s ease;
    color: var(--primary);
    font-family: 'Barlow', sans-serif;
}

.theme-toggle-btn:hover {
    background: var(--at-15);
    border-color: var(--at-50);
}

.theme-toggle-btn:active {
    background: var(--at-20);
    transform: scale(0.98);
}

.theme-icon-sun,
.theme-icon-moon {
    display: none;
}

/* Light mode (default): show moon icon to switch to dark */
html:not(.dark-mode) .theme-icon-moon {
    display: block;
}

/* Dark mode: show sun icon to switch to light */
html.dark-mode .theme-icon-sun {
    display: block;
}

.theme-icon-text,
.theme-icon-text-moon {
    display: none;
    font-size: 12px;
}

html:not(.dark-mode) .theme-icon-text-moon {
    display: inline;
}

html.dark-mode .theme-icon-text {
    display: inline;
}

html:not(.dark-mode) .theme-toggle-btn {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a1a;
}

html:not(.dark-mode) .theme-toggle-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.3);
}

html.dark-mode .theme-toggle-btn {
    background: var(--at-08);
    border-color: var(--at-20);
    color: var(--primary);
}

html.dark-mode .theme-toggle-btn:hover {
    background: var(--at-15);
    border-color: var(--at-50);
}

nav a,
nav button {
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.7rem 1.4rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
    color: var(--text-secondary);
}

nav a:hover {
    color: var(--text-primary);
}

nav .btn-primary {
    background: var(--primary);
    color: var(--bg-body);
    font-weight: 600;
}

nav .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--glow-strong);
}

/* ===== HERO SECTION ===== */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 8rem 2rem 6rem;
    min-height: 100svh;
    position: relative;
    overflow: hidden;
}

/* The hero image is an <img> so it can be preloaded and prioritised. It used
   to be a CSS background with background-attachment: fixed, which iOS ignores
   and which costs a repaint on every scroll frame elsewhere. */
.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 50% 0%, var(--at-08) 0%, transparent 60%),
        linear-gradient(180deg,
            rgba(10, 18, 10, 0.5) 0%,
            rgba(10, 18, 10, 0.55) 30%,
            rgba(10, 18, 10, 0.7) 60%,
            rgba(10, 18, 10, 0.92) 100%);
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.floating-ring {
    position: absolute;
    opacity: 0.25;
    animation: float 8s ease-in-out infinite;
}

.ring-1 {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -150px;
    animation-delay: 0s;
}

.ring-1 circle {
    stroke: var(--at-20) !important;
}

.ring-2 {
    width: 350px;
    height: 350px;
    bottom: -120px;
    left: 5%;
    animation-delay: 2s;
}

.ring-2 circle {
    stroke: var(--at-12) !important;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    33% {
        transform: translateY(20px) rotate(3deg);
    }

    66% {
        transform: translateY(-15px) rotate(-2deg);
    }
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 850px;
    animation: fadeInUp 1s ease-out;
}

.hero-credit {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 2;
    font-size: 0.7rem;
    color: rgba(240, 237, 231, 0.35);
    text-align: right;
}

.hero-credit a {
    color: rgba(240, 237, 231, 0.45);
}

.hero-credit a:hover {
    text-decoration: underline;
    color: var(--primary-dim);
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 1.25rem;
    letter-spacing: -1.5px;
    line-height: 1.1;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.3);
}

.hero .tagline {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.7;
    font-weight: 400;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.hero-ctas {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Deliberately quiet: a returning visitor knows to look for it, a new one
   should not have their attention split between two equal buttons. */
.hero-signin {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
}

.hero-signin a {
    color: var(--accent);
    text-decoration: none;
    padding-block: 0.6rem;
    display: inline-block;
}

.hero-signin a:hover,
.hero-signin a:focus-visible {
    text-decoration: underline;
}

.btn {
    font-family: 'Barlow', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
    letter-spacing: 0.3px;
}

.btn-primary {
    background: var(--primary);
    color: var(--bg-body);
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: 0 12px 35px var(--glow-strong);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid rgba(253, 252, 251, 0.2);
}

.btn-secondary:hover {
    background: rgba(253, 252, 251, 0.08);
    border-color: var(--primary-dim);
    color: var(--primary);
    transform: translateY(-3px);
}

.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* ===== INLINE STYLE REPLACEMENTS ===== */
.invites-cta-btn {
    margin-top: var(--space-xl);
    display: inline-block;
}

.invites-cta-note {
    margin-top: var(--space-sm);
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ===== MESSAGES ===== */
.error {
    color: var(--error);
    margin-top: var(--space-xs);
    font-size: 0.85rem;
    display: block;
}

.error-alert {
    padding: var(--space-md);
    background: rgba(212, 99, 92, 0.1);
    color: var(--error);
    border-radius: 4px;
    margin-bottom: var(--space-lg);
    border-left: 3px solid var(--error);
    animation: slideDown 0.3s ease-out;
}

.success {
    padding: var(--space-md);
    background: rgba(107, 142, 111, 0.1);
    color: var(--success);
    border-radius: 4px;
    margin-bottom: var(--space-lg);
    border-left: 3px solid var(--success);
    animation: slideDown 0.3s ease-out;
}

/* ===== SOCIAL PROOF / EDITORIAL BAND ===== */
.social-proof {
    padding: 5rem 2rem;
    background: var(--bg-section);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.editorial-band {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.editorial-divider {
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--at-20), transparent);
    align-self: stretch;
    margin: 0 3.5rem;
}

.editorial-item {
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.editorial-item.visible {
    opacity: 1;
    transform: none;
}

.editorial-num {
    font-family: 'Playfair Display', serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--primary);
    opacity: 0.55;
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.editorial-claim {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.4rem, 2.2vw, 2rem);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.85rem;
    letter-spacing: -0.4px;
}

.editorial-sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .editorial-band {
        grid-template-columns: 1fr;
    }

    .editorial-divider {
        width: auto;
        height: 1px;
        margin: 2rem 0;
        background: linear-gradient(90deg, transparent, var(--at-20), transparent);
    }
}

/* ===== FEATURES SECTION ===== */
.features {
    padding: 7rem 2rem;
    background: var(--bg-section);
    position: relative;
}

.features::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 30% 20%, var(--at-03) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, var(--at-02) 0%, transparent 50%);
    pointer-events: none;
}

.features-header {
    text-align: center;
    margin-bottom: 4.5rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    position: relative;
    z-index: 1;
}

.features-header.visible {
    opacity: 1;
    transform: none;
}

.features-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.features-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

/* ── Features split layout ─────────────────────────────────────── */
.features-split {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.features-column {
    padding: 2.5rem 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.features-column.visible {
    opacity: 1;
    transform: none;
}

.features-column--pro {
    border-left: 1px solid var(--border);
    background: rgba(253, 252, 251, 0.02);
    transition-delay: 0.1s;
}

.features-column-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-text);
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.features-column--pro .features-column-label {
    color: var(--primary);
    border-bottom-color: var(--at-20);
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
}

.feature-row {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background-color 0.15s ease-out;
}

.feature-row:last-child {
    border-bottom: none;
}

.feature-row-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.8;
}

.feature-row-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.feature-row-body strong {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-text);
    letter-spacing: 0.1px;
}

.feature-row-body span {
    font-size: 0.82rem;
    color: var(--muted-text);
    line-height: 1.5;
}

.features-column--pro .feature-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
}

.features-column--pro .feature-row {
    border-bottom-color: rgba(255, 255, 255, 0.04);
}

/* ===== FEATURE PLAN BADGES ===== */
.feature-plan-badge {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-top: auto;
    align-self: flex-start;
}

.feature-plan-badge.free {
    background: rgba(107, 142, 111, 0.15);
    color: var(--success);
    border: 1px solid rgba(107, 142, 111, 0.25);
}

.feature-plan-badge.pro {
    background: var(--at-12);
    color: var(--primary);
    border: 1px solid var(--at-20);
}

/* ===== PROOF TITLE/SUB TYPOGRAPHY ===== */
.proof-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
    letter-spacing: 0.2px;
}

.proof-sub {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ===== MANAGED INVITES SECTION ===== */
.managed-invites {
    padding: 7rem 2rem;
    background: var(--bg-section-alt);
    position: relative;
    overflow: clip;
    /* clip visual overflow without clipping CSS transforms (reveal animations) */
}

.managed-invites::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--at-04) 0%, transparent 70%);
    pointer-events: none;
}

.invites-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    position: relative;
    z-index: 1;
}

.invites-header.visible {
    opacity: 1;
    transform: none;
}

.invites-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.invites-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 auto;
}

.invites-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* LEFT: RSVP Mockup */
.invites-mockup {
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.invites-mockup.visible {
    opacity: 1;
    transform: none;
}

.rsvp-card {
    background: rgba(253, 252, 251, 0.04);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35), 0 0 50px var(--glow);
    overflow: hidden;
    max-width: 380px;
    margin: 0 auto;
}

.rsvp-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--at-05);
    border-bottom: 1px solid var(--border);
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: var(--text-primary);
}

.rsvp-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rsvp-question {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.rsvp-options {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.rsvp-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: transparent;
    font-size: 0.92rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out;
}

.rsvp-option--selected {
    border-color: var(--at-40);
    background: var(--at-07);
    color: var(--text-primary);
}

.rsvp-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--glass-border);
    flex-shrink: 0;
    transition: background-color 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out;
}

.rsvp-option--selected .rsvp-dot {
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 0 8px var(--glow-strong);
}

.rsvp-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rsvp-field label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.rsvp-select-mock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: rgba(253, 252, 251, 0.03);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.rsvp-counter {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    overflow: hidden;
    width: fit-content;
}

.rsvp-counter-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(253, 252, 251, 0.04);
    color: var(--primary);
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.rsvp-counter-btn:hover {
    background: var(--at-10);
}

.rsvp-counter-val {
    width: 40px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    padding: 0 0.5rem;
    line-height: 36px;
}

.rsvp-submit-mock {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--bg-body);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
    letter-spacing: 0.2px;
}

.rsvp-submit-mock:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--glow-strong);
}

/* Notification bubble */
.invite-notification {
    position: absolute;
    bottom: -1.5rem;
    right: -1.5rem;
    background: rgba(15, 26, 15, 0.95);
    border: 1px solid var(--at-30);
    border-radius: 12px;
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.82rem;
    color: var(--text-primary);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px var(--glow);
    backdrop-filter: blur(10px);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out 0.8s;
}

.invite-notification.visible {
    opacity: 1;
    transform: none;
}

.invite-notification .icon-svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* RIGHT: Feature list */
.invites-features {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out 0.1s;
}

.invites-features.visible {
    opacity: 1;
    transform: none;
}

.invite-feature-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border);
    transition: padding-left 0.3s ease;
}

.invite-feature-row:hover {
    padding-left: 0.5rem;
}

.invite-feature-row:last-of-type {
    border-bottom: none;
}

.invite-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--at-08);
    border: 1px solid var(--at-12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary);
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
}

.invite-feature-row:hover .invite-feature-icon {
    background: var(--at-14);
    border-color: var(--at-25);
}

.invite-feature-row h3,
.invite-feature-row h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.05rem;
    color: var(--text-primary);
    margin: 0 0 0.35rem 0;
}

.invite-feature-row p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ===== HOW IT WORKS SECTION ===== */
.how-it-works {
    padding: 7rem 2rem;
    background: var(--bg-section-alt);
    position: relative;
}

.how-it-works::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 50%, var(--at-03) 0%, transparent 70%);
    pointer-events: none;
}


/* ===== PRICING SECTION ===== */
.pricing {
    padding: 7rem 2rem;
    background: var(--bg-section);
}

.pricing-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
}

.pricing-header.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.pricing-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.pricing-header p {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.pricing-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.pricing-card {
    background: var(--glass-bg);
    padding: 2.5rem;
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* The Pro card carries an Early Bird pill above its price, which pushed its
   price ~170px below the others. Reserving the same height in every card and
   bottom-aligning the numerals puts all three prices on one baseline —
   without subgrid, which fights the auto-fit columns on narrow viewports. */
.pricing-card > .price,
.pricing-card > .price-block {
    min-height: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* The reserved height only aligns the boxes if they also start at the same
       point. .price-block carried margin-top: 24px against .price's 4px, which
       put the Pro price 21px below its neighbours — the reservation above was
       doing its job, the margin was quietly undoing it. */
    margin-top: 0.25rem;
}

/* Must beat the display:flex above, which would otherwise revive the
   inactive billing period that the UA stylesheet hides. */
.pricing-card > .price-block[hidden] {
    display: none;
}

.pricing-card > .price-period {
    min-height: 2.6rem;
}

.pricing-card.visible {
    opacity: 1;
    transform: none;
}

.pricing-card:nth-child(1).visible {
    transition-delay: 0.1s;
}

.pricing-card:nth-child(2).visible {
    transition-delay: 0.2s;
}

.pricing-card:nth-child(3).visible {
    transition-delay: 0.3s;
}

.pricing-card:hover {
    transform: translateY(-4px);
    background: var(--bg-card-hover);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

/* "Most popular" has to read as elevated, not muted. The old grey tint made
   it the least prominent card in light mode, next to two white ones. */
.pricing-card.featured {
    border-color: var(--accent);
    border-width: 2px;
    background: var(--card-bg);
    box-shadow: 0 24px 60px var(--at-15), 0 0 0 1px var(--gt-20);
    transform: scale(1.03);
    z-index: 1;
}

.pricing-card.featured:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 20px 60px var(--at-15);
}

.featured-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--bg-body);
    padding: 0.45rem 1.2rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 15px var(--glow);
}

.pricing-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.3px;
}

/* ── Discount block ── */
.price-block {
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.discount-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--at-12);
    border: 1px solid var(--at-25);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.2px;
    margin-bottom: 0.6rem;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 200ms;
}

.pricing-card.visible .discount-pill {
    opacity: 1;
    transform: translateY(0);
}

.price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.75rem;
}

/* Struck-out original price with clip-path line animation */
.price-was {
    position: relative;
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
    color: var(--text-muted);
    align-self: center;
}

.price-was::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 1.5px;
    background: var(--error);
    transform: translateY(-50%);
    /* Start hidden, animate in after card is visible */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 450ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 500ms;
}

.pricing-card.visible .price-was::after {
    clip-path: inset(0 0% 0 0);
}

.pricing-card .price {
    font-size: 3.2rem;
    font-weight: 900;
    color: var(--primary);
    margin: 0.25rem 0 0;
    font-family: 'Barlow', sans-serif;
    line-height: 1;
}

.pricing-card .price-period {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.pricing-card .price--contact {
    color: var(--primary);
    font-size: 2.2rem;
}

/* Word, not a numeral — the display size made it shout over the real prices. */
.pricing-card .price--words {
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.pricing-card ul {
    list-style: none;
    margin: 2rem 0;
    text-align: left;
    flex: 1;
}

.pricing-card li {
    padding: 0.7rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    border-bottom: 1px solid var(--border);
}

.pricing-card li:last-child {
    border-bottom: none;
}

.pricing-card li::before {
    content: '✓ ';
    color: var(--success);
    font-weight: bold;
    margin-right: 0.5rem;
}

.pricing-cta {
    margin-top: auto;
    padding-top: 2rem;
}

/* The note is the only thing below the CTA, and .pricing-cta is bottomed out
   with margin-top:auto — so a note that wraps to two lines lifts its card's
   button off the baseline the others share. Reserve two lines for all three. */
.pricing-card .note {
    font-size: 0.82rem;
    line-height: 1.45;
    min-height: calc(2 * 1.45em);
    color: var(--text-muted);
    margin-top: 1rem;
}

/* Secondary path out of a pricing card — deliberately a text link, so it does
   not compete with the card's primary button. */
.pricing-secondary-link {
    /* inline-block, not inline-flex: as a flex container the arrow was pushed to
       the end of the line whenever the label wrapped, leaving it stranded at the
       card edge. Inline keeps it attached to the last word. */
    display: inline-block;
    padding-block: 0.7rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--accent);
    text-decoration: none;
    text-wrap: balance;
    transition: color 0.2s ease-out;
}

.pricing-secondary-link__arrow {
    /* Non-breaking space before the arrow so it never starts a line on its own. */
    margin-left: 0.3rem;
    white-space: nowrap;
}

.pricing-secondary-link:hover,
.pricing-secondary-link:focus-visible {
    color: var(--primary);
    text-decoration: underline;
}

/* ── Billing Period Toggle ──
   Two instances, one shown per breakpoint: above the grid while the three cards
   share a baseline, inside the Pro card once they stack. display:none rather
   than opacity, so the hidden one also leaves the tab order. */
.billing-period-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    /* Centring belongs on the base, not on a modifier: the onboarding page has
       its own instance without one, and moving `margin: 0 auto` onto --grid
       parked its toggle against the left edge. Variants set spacing only. */
    margin: 0 auto 2.5rem;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50px;
    padding: 4px;
    width: fit-content;
}

/* The entrance animation belongs to the grid instance alone — it is the only
   one carrying .reveal. Keeping opacity:0 on the shared base meant the in-card
   instance rendered invisible unless a later rule happened to undo it. */
.billing-period-toggle--grid {
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.billing-period-toggle--grid.visible {
    opacity: 1;
    transform: none;
}

/* Sits directly above the price it controls. */
.billing-period-toggle--card {
    display: none;
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .billing-period-toggle--grid {
        display: none;
    }

    .billing-period-toggle--card {
        display: flex;
    }

    /* .price-block reserves 112px so the annual block (pill + struck-through
       price + amount) and the monthly one (amount only) occupy the same height
       while the cards share a row. Stacked, there is no neighbour to line up
       with and the reservation is just a hole between the toggle and the price. */
    .pricing-card .price-block {
        min-height: 0;
        margin-top: 0;
    }
}

.billing-period-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.4rem;
    border-radius: 50px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 180ms cubic-bezier(0.23, 1, 0.32, 1),
        color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 160ms ease-out;
}

.billing-period-btn:active {
    transform: scale(0.97);
}

.billing-period-btn.active {
    background: var(--primary);
    color: var(--bg-body);
    font-weight: 600;
}

html:not(.dark-mode) .billing-period-btn.active {
    color: #fff;
}

.billing-save-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    background: var(--at-12);
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    /*color: var(--text-muted);*/
    letter-spacing: 0.2px;
    transform: scale(0.8);
    transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
    pointer-events: none;
}

.billing-period-btn.active .billing-save-tag {
    transform: scale(1);
}

/* ── Monthly price block ── */
.price-block-monthly {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The markup ships this block with `hidden` (annual is the default anchor), but
   an author `display` beats the UA stylesheet's `[hidden] { display: none }` —
   so both prices rendered until the toggle script ran, and both stayed if it
   never did. This is the "billing toggle flash" from plan/critique_action_plan.md. */
.price-block-monthly[hidden] {
    display: none;
}

/* ===== SAVE THE DATE EDITOR SHOWCASE ===== */
.savethedate-showcase {
    padding: 7rem 2rem;
    background: var(--bg-section-alt);
    position: relative;
    overflow: clip;
}

.savethedate-showcase::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--at-05) 0%, transparent 70%);
    pointer-events: none;
}

.showcase-header {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
    position: relative;
    z-index: 1;
}

.showcase-header.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.showcase-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.showcase-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
}

.showcase-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1300px;
    margin: 0 auto 4rem;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

/* LEFT SIDE: Preview */
.preview-side {
    opacity: 0;
    transform: translateX(-30px);
    display: flex;
    flex-direction: column;
}

.preview-side.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.preview-frame {
    background: rgba(253, 252, 251, 0.03);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4), 0 0 60px var(--glow);
    overflow: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.4s ease;
    min-height: 480px;
}

.preview-frame:hover {
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 80px var(--at-12);
}

.preview-header {
    padding: 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    background: rgba(253, 252, 251, 0.02);
}

.preview-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    letter-spacing: -0.5px;
}

.names-preview {
    display: block;
}

.preview-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 3px;
    text-transform: uppercase;
}

.preview-image-gallery {
    flex: 1;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.preview-image-main {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-image-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-countdown {
    padding: 1.5rem;
    text-align: center;
    border-top: 1px solid var(--border);
    background: rgba(253, 252, 251, 0.02);
}

.countdown-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.countdown-items {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.countdown-item .num {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.countdown-item .label {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preview-footer {
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    background: rgba(253, 252, 251, 0.02);
}

.preview-credit {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--glass-bg);
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

/* RIGHT SIDE: Editor Features */
.editor-side {
    opacity: 0;
    transform: translateX(30px);
}

.editor-side.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out 0.1s;
}

.editor-content {
    padding: 2.5rem;
    background: var(--glass-bg);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.editor-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin-bottom: 2rem;
    letter-spacing: -0.3px;
}

.feature-list {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.feature-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
    flex: 1;
}

.feature-row:hover {
    padding-left: 0.5rem;
}

.feature-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

.feature-text h3,
.feature-text h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--text-primary);
    margin: 0 0 0.4rem 0;
}

.feature-text p {
    margin: 0 0 0.5rem 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.feature-example {
    position: relative;
    margin-top: 0.75rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--glass-border);
}

.feature-example img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 150px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.feature-example:hover img {
    transform: scale(1.05);
}

.example-label {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: var(--primary);
    color: var(--bg-body);
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    font-size: 0.7rem;
    font-weight: 700;
}

.feature-credit {
    margin-top: 0.5rem;
}

/* CTA Section */
.showcase-cta-section {
    text-align: center;
    padding: 3rem;
    background: var(--at-04);
    border-radius: 16px;
    border: 1px solid var(--at-20);
    opacity: 0;
    transform: translateY(30px);
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.showcase-cta-section.visible {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out 0.2s;
}

.cta-badge {
    display: inline-block;
    background: var(--at-10);
    color: var(--primary);
    padding: 0.6rem 1.2rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid var(--at-15);
}

.showcase-cta-section h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: var(--text-primary);
    margin: 1rem 0;
    letter-spacing: -0.3px;
}

.btn-large {
    padding: 1.2rem 3rem !important;
    font-size: 1.05rem;
    margin: 1.5rem auto 0;
}

.cta-subtext {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* No opacity here: --text-muted is already a 0.70-alpha colour, and stacking
   0.6 on top dropped the struck-through price to 2.31:1 — in the conversion
   element. The line-through carries the "old price" meaning on its own. */
.cta-was {
    text-decoration: line-through;
    color: var(--text-muted);
    margin-right: 0.25rem;
}

/* Small text utility */
.small-text {
    font-size: 0.75rem !important;
    line-height: 1.3;
}

.copyright-text {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.copyright-text a {
    color: var(--primary-dim);
    text-decoration: none;
}

.copyright-text a:hover {
    text-decoration: underline;
    color: var(--primary);
}


/* ===== ANIMATIONS ===== */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== SCROLL REVEAL ===== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger siblings for a natural cascade */
.reveal:nth-child(2) {
    transition-delay: 0.08s;
}

.reveal:nth-child(3) {
    transition-delay: 0.16s;
}

.reveal:nth-child(4) {
    transition-delay: 0.24s;
}

/* ===== RESPONSIVE TABLET ===== */
@media (max-width: 1024px) {
    .features-split {
        grid-template-columns: 1fr;
    }

    .features-column--pro {
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .features-column--pro .feature-list {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===== RESPONSIVE MOBILE ===== */
@media (max-width: 768px) {
    nav {
        padding: 1rem 1.5rem;
    }

    nav.scrolled {
        padding: 0.75rem 1.5rem;
    }

    .hero {
        padding: 6rem 1.5rem 3rem;
        min-height: 70vh;
    }

    .hero .tagline {
        font-size: 1.05rem;
    }

    .hero-ctas {
        flex-direction: column;
        gap: 0.75rem;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .proof-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .proof-item:not(:last-child)::after {
        display: none;
    }

    .proof-item {
        padding: 1.5rem;
    }

    .proof-icon-wrapper {
        width: 80px;
        height: 80px;
        margin-bottom: 1rem;
    }

    .proof-icon {
        width: 32px;
        height: 32px;
    }

    .proof-icon-brand {
        width: 36px;
        height: 36px;
    }

    .features {
        padding: 4rem 1.5rem;
    }

    .features-header h2,
    .pricing-header h2,
    .how-header h2,
    .showcase-header h2 {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .pricing-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pricing-card.featured {
        transform: scale(1);
    }

    .pricing-card.featured:hover {
        transform: translateY(-4px) scale(1);
    }

    .steps-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .steps-container::before {
        display: none;
    }

    .how-it-works {
        padding: 4rem 1.5rem;
    }

    .managed-invites {
        padding: 4rem 1.5rem;
    }

    .invites-header h2 {
        font-size: 2rem;
    }

    .invites-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .invites-mockup,
    .invites-features {
        transform: none !important;
    }

    .rsvp-card {
        max-width: 100%;
    }

    .invite-notification {
        right: 0;
        font-size: 0.78rem;
    }

    .savethedate-showcase {
        padding: 4rem 1.5rem;
    }

    .showcase-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .preview-side,
    .editor-side {
        transform: none !important;
    }

    .preview-frame {
        aspect-ratio: 4/5;
        max-width: 350px;
        margin: 0 auto;
    }

    .editor-content {
        padding: 1.5rem;
    }

    .editor-title {
        font-size: 1.4rem;
    }

    .feature-row {
        gap: 1rem;
        padding-bottom: 1.25rem;
    }

    .feature-icon {
        font-size: 1.5rem;
    }

    .feature-text h3,
.feature-text h4 {
        font-size: 1rem;
    }

    .feature-text p {
        font-size: 0.85rem;
    }

    .showcase-cta-section {
        padding: 2rem 1.5rem;
    }

    .showcase-cta-section h3 {
        font-size: 1.4rem;
    }

    .btn-large {
        padding: 1rem 2rem !important;
    }

    /* footer responsive styles now in footer.css */
}

/* ===== MODAL STYLES ===== */
.ea-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.ea-modal-overlay.active {
    display: flex;
}

.ea-modal {
    background-color: var(--card-bg);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    padding: 30px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 1px solid var(--border);
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ea-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.ea-modal__title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--dark-text);
    margin: 0;
    font-weight: 600;
}

.ea-modal__close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.ea-modal__close:hover {
    color: var(--text-primary);
    opacity: 1;
}

.ea-modal__body {
    font-family: var(--font-body);
    color: var(--dark-text);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.ea-modal__actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

.ea-modal__actions .btn {
    padding: 0.75rem 1.5rem;
}

@media (max-width: 768px) {
    .ea-modal {
        padding: 20px;
        margin: 10px;
    }

    .ea-modal__title {
        font-size: 1.25rem;
    }
}

/* Get Quote modal extras */
.get-quote-icon {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1.25rem;
    color: var(--primary);
    opacity: 0.85;
}

.modal-email-link {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    word-break: break-all;
}

.modal-email-link:hover { text-decoration: underline; }

/* ===== ONBOARDING CREATE ===== */
.onboarding-create-section {
    min-height: 100vh;
    min-height: 100dvh;
    /* body ist flex-column: ohne dies staucht das explizite min-height
       die Sektion und der Inhalt läuft in den Footer */
    flex: 1 0 auto;
    display: flex;
    padding: 7rem 1.5rem 5rem;
    background: var(--bg-body);
}

/* margin:auto statt align-items:center — zentriert, schneidet aber
   nichts ab, wenn der Inhalt höher als der Viewport ist */
.onboarding-create-inner {
    width: 100%;
    max-width: 520px;
    margin: auto;
}

.onboarding-create-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.onboarding-create-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--primary);
    margin-bottom: 0.6rem;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.onboarding-create-subtitle {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 1.5rem;
}

.onboarding-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    line-height: 1.3;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
}

.onboarding-plan-badge .icon-svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
}

.onboarding-plan-badge--pro {
    background: var(--at-08);
    border-color: var(--at-20);
    color: var(--primary);
    font-weight: 500;
}

.onboarding-upgrade-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.onboarding-upgrade-link:hover { text-decoration: underline; }

.onboarding-create-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}

html:not(.dark-mode) .onboarding-create-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}

.onboarding-create-submit {
    width: 100%;
    margin-top: 2rem;
    padding: 0.9rem;
    font-size: 1rem;
}

.onboarding-create-back {
    text-align: center;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--glass-border);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.onboarding-create-back a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

.onboarding-create-back a:hover { color: var(--primary); }

/* ===== PARTNER LANDING ===== */
.partner-benefits {
    padding: 5rem 1.5rem;
    background: var(--bg-body);
}

.partner-cta-band {
    padding: 5rem 1.5rem;
    background: var(--primary);
    text-align: center;
}

html.dark-mode .partner-cta-band { background: #111e11; }

.partner-cta-band h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: #fff;
    margin-bottom: 1rem;
}

.partner-cta-band p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* The band paints itself in --primary, but .btn-primary and .btn-secondary are
   built for a light page: primary is navy-on-navy (the button reads as bare
   text, with no shape at all) and secondary is navy text on navy — the one that
   is effectively unreadable. Both need inverting inside this section. */
.partner-cta-band .btn-primary {
    background: #fff;
    color: var(--navy);
    border: 1.5px solid #fff;
}

/* Hovering a white button into gold swaps its hue mid-interaction and reads as
   a different button. Settle onto a warm ivory instead — same button, dimmed. */
.partner-cta-band .btn-primary:hover {
    background: #f1ece3;
    border-color: #f1ece3;
    color: var(--navy);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.28);
}

.partner-cta-band .btn-secondary {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.55);
}

.partner-cta-band .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

.partner-cta-band__actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* The default focus ring is --primary, i.e. the band's own background. */
.partner-cta-band .btn:focus-visible {
    outline-color: #fff !important;
}

/* Dark mode paints the band #111e11; the same inversion holds, but gold reads
   better than white as the primary fill there. */
html.dark-mode .partner-cta-band .btn-primary {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a120a;
}

html.dark-mode .partner-cta-band .btn-primary:hover {
    background: #d4ba78;
    border-color: #d4ba78;
}

/* Feature comparison table */
.comparison-section {
    padding: 5rem 1.5rem;
    background: var(--bg-section-alt);
}

.comparison-section h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--dark-text);
    text-align: center;
    margin-bottom: 2.5rem;
}

.comparison-table-wrap {
    max-width: 800px;
    margin: 0 auto;
    overflow-x: auto;
}

.comparison-table-wrap table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border: 1px solid var(--primary);
    border-radius: 12px;
    overflow: hidden;
    font-size: 0.95rem;
    box-shadow: 0 0 0 1px rgba(196, 168, 96, 0.2), 0 8px 32px rgba(196, 168, 96, 0.1);
}

.comparison-table-wrap thead th {
    background: var(--primary);
    color: #fff;
    padding: 1rem 1.25rem;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 600;
}

html.dark-mode .comparison-table-wrap thead th { background: #1d2e1d; }

.comparison-table-wrap tbody td {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
}

.comparison-table-wrap tbody tr:last-child td { border-bottom: none; }
.comparison-table-wrap tbody tr:hover td { background: var(--card-bg-hover); }

.feature-check { color: #4caf82; font-size: 1.1rem; font-weight: 700; }
.feature-cross { color: #e05555; font-size: 1.1rem; font-weight: 700; }

/* ===== MODAL FORM STYLES ===== */
.modal-form {
    display: inline-block;
    width: 100%;
}

.modal-form .btn {
    width: 100%;
    text-align: center;
}

/* ===== QUOTE FORM (partner get-quote modal) ===== */
.ea-modal--wide {
    max-width: 520px;
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0 0;
}

.quote-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.quote-form-row label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.04em;
}

.quote-form-optional {
    font-weight: 400;
    opacity: 0.65;
}

.quote-form-row input {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--dark-text);
    background: var(--bg-section);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.875rem;
    transition: border-color 0.2s ease;
    width: 100%;
}

.quote-form-row input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--at-08);
}

.quote-form-row input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* ===== PARTNER PRICING CALLOUT ===== */
.partner-pricing-callout {
    padding: 5rem 2rem;
    background: var(--bg-section-alt);
    text-align: center;
}

.partner-pricing-callout__inner {
    max-width: 700px;
    margin: 0 auto;
}

.partner-pricing-callout h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    color: var(--dark-text);
    margin-bottom: 0.75rem;
}

html.dark-mode .partner-pricing-callout h2 {
    color: var(--light-text);
}

.partner-pricing-callout > .partner-pricing-callout__inner > p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 auto 2.5rem;
}

.partner-pricing-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--card-bg);
}

.partner-pricing-range__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.75rem 2rem;
}

.partner-pricing-range__divider {
    width: 1px;
    background: var(--border);
    align-self: stretch;
}

.partner-pricing-range__label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.partner-pricing-range__price {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
}

.partner-pricing-range__note {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.partner-pricing-callout__sub {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

@media (max-width: 480px) {
    .partner-pricing-range {
        flex-direction: column;
    }

    .partner-pricing-range__divider {
        width: auto;
        height: 1px;
        align-self: stretch;
    }
}

@media (max-width: 480px) {
    .steps-container {
        grid-template-columns: 1fr;
    }

    .features-column--pro .feature-list {
        grid-template-columns: 1fr;
    }

    .features-column {
        padding: 1.75rem 1.25rem;
    }
}

/* ===== PHOTO SHOWCASE ===== */
.photo-showcase {
    padding: 7rem 2rem;
    background: var(--bg-section);
    position: relative;
    overflow: clip;
}

.photo-mockup-card {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    max-width: 340px;
}

.photo-mockup-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark-text);
}

.photo-mockup-header .icon-svg {
    width: 18px;
    height: 18px;
    color: var(--primary);
}

.photo-mockup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: var(--space-md);
}

.photo-tile {
    aspect-ratio: 1;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.06);
    /* fallback color — does not override background-image set by --1..--5 */
}

.photo-tile--1 {
    background-image: image-set(
        url("../images/landingpage/Fotogalerie-1536.6369c2abedeb.avif") type('image/avif'),
        url("../images/landingpage/Fotogalerie-1536.1b9051211d11.webp") type('image/webp'),
        url("../images/landingpage/Fotogalerie.6c8481eeaaf2.png") type('image/png'));
    background-size: 300% 200%;
    background-position: 0% 0%;
}

.photo-tile--2 {
    background-image: image-set(
        url("../images/landingpage/Fotogalerie-1536.6369c2abedeb.avif") type('image/avif'),
        url("../images/landingpage/Fotogalerie-1536.1b9051211d11.webp") type('image/webp'),
        url("../images/landingpage/Fotogalerie.6c8481eeaaf2.png") type('image/png'));
    background-size: 300% 200%;
    background-position: 50% 0%;
}

.photo-tile--3 {
    background-image: image-set(
        url("../images/landingpage/Fotogalerie-1536.6369c2abedeb.avif") type('image/avif'),
        url("../images/landingpage/Fotogalerie-1536.1b9051211d11.webp") type('image/webp'),
        url("../images/landingpage/Fotogalerie.6c8481eeaaf2.png") type('image/png'));
    background-size: 300% 200%;
    background-position: 100% 0%;
}

.photo-tile--4 {
    background-image: image-set(
        url("../images/landingpage/Fotogalerie-1536.6369c2abedeb.avif") type('image/avif'),
        url("../images/landingpage/Fotogalerie-1536.1b9051211d11.webp") type('image/webp'),
        url("../images/landingpage/Fotogalerie.6c8481eeaaf2.png") type('image/png'));
    background-size: 300% 200%;
    background-position: 0% 100%;
}

.photo-tile--5 {
    background-image: image-set(
        url("../images/landingpage/Fotogalerie-1536.6369c2abedeb.avif") type('image/avif'),
        url("../images/landingpage/Fotogalerie-1536.1b9051211d11.webp") type('image/webp'),
        url("../images/landingpage/Fotogalerie.6c8481eeaaf2.png") type('image/png'));
    background-size: 300% 200%;
    background-position: 50% 100%;
}

.photo-tile--upload {
    background: rgba(255, 255, 255, 0.06);
    border: 2px dashed var(--at-40);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--at-70);
    font-size: 1.2rem;
    font-weight: 700;
}

.photo-tile--upload .icon-svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.photo-mockup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
    gap: var(--space-md);
}

.photo-qr-block {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.photo-qr-icon {
    width: 40px;
    height: 40px;
    color: var(--dark-text);
    flex-shrink: 0;
}

.photo-qr-label {
    font-size: 0.75rem;
    color: var(--muted-text);
}

.photo-count-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--at-10);
    padding: 4px 10px;
    border-radius: 20px;
}

.photo-count-badge .icon-svg {
    width: 14px;
    height: 14px;
}

/* ===== LARGE SCREENS ===== */
@media (min-width: 1600px) {
    .hero .tagline {
        font-size: 1.4rem;
    }

    .features-grid,
    .pricing-container {
        max-width: 1400px;
    }
}

/* ===== LIGHT MODE =====
   Design tokens (colors) are defined in company.css — no variable
   overrides needed here. Only element-level light-mode rules below. */

/* ── Navbar ── */
html:not(.dark-mode) nav.scrolled {
    background: rgba(248, 249, 250, 0.92);
    border-bottom-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.07);
}

html:not(.dark-mode) nav a {
    color: rgba(26, 26, 26, 0.65);
}

html:not(.dark-mode) nav a:hover {
    color: #1a1a1a;
}

html:not(.dark-mode) .btn-primary,
html:not(.dark-mode) nav .btn-primary {
    color: var(--bg-body);
}

/* `nav a:hover` above is one step more specific than the rule that colours the
   CTA, so on hover the label turned dark navy on a dark navy fill — invisible.
   Dark mode is unaffected: there the nav rules never outrank the button. */
html:not(.dark-mode) nav .btn-primary:hover,
html:not(.dark-mode) .navbar .btn-primary:hover {
    color: var(--bg-body);
}

html:not(.dark-mode) .btn-secondary {
    border-color: rgba(0, 0, 0, 0.2);
    color: #1a1a1a;
}

html:not(.dark-mode) .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--at-50);
    color: var(--at-80);
}

/* The CTA band is a dark navy panel inside an otherwise light page, so the
   light-mode button rules above are exactly wrong there. Same specificity as
   those rules, placed after them — no !important needed. */
html:not(.dark-mode) .partner-cta-band .btn-primary {
    background: #fff;
    border-color: #fff;
    color: var(--navy);
}

html:not(.dark-mode) .partner-cta-band .btn-primary:hover {
    background: #f1ece3;
    border-color: #f1ece3;
    color: var(--navy);
}

html:not(.dark-mode) .partner-cta-band .btn-secondary {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

html:not(.dark-mode) .partner-cta-band .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    color: #fff;
}

/* ── Hero overlay — lightened to suit photos ── */
html:not(.dark-mode) .hero-overlay {
    background:
        radial-gradient(ellipse at 50% 0%, var(--at-10) 0%, transparent 60%),
        linear-gradient(180deg,
            rgba(248, 249, 250, 0.25) 0%,
            rgba(248, 249, 250, 0.35) 30%,
            rgba(248, 249, 250, 0.6) 60%,
            rgba(248, 249, 250, 0.88) 100%);
}

html:not(.dark-mode) .hero-credit {
    color: rgba(26, 26, 26, 0.3);
}

html:not(.dark-mode) .hero-credit a {
    color: rgba(26, 26, 26, 0.4);
}

/* ── Floating rings ── */
html:not(.dark-mode) .ring-1 circle {
    stroke: var(--at-25) !important;
}

html:not(.dark-mode) .ring-2 circle {
    stroke: var(--at-15) !important;
}

/* ── Social proof ── */
html:not(.dark-mode) .proof-item:not(:last-child)::after {
    background: linear-gradient(180deg, transparent, var(--at-30), transparent);
}

html:not(.dark-mode) .proof-icon-wrapper {
    background: radial-gradient(circle at 30% 30%, var(--at-20), var(--at-05));
    border-color: var(--at-35);
    box-shadow: 0 0 30px var(--at-12), inset 0 1px 2px rgba(253, 252, 251, 0.6);
}

html:not(.dark-mode) .proof-item:hover .proof-icon-wrapper {
    border-color: var(--at-55);
    box-shadow: 0 8px 40px var(--at-22), inset 0 1px 2px rgba(253, 252, 251, 0.6);
}

/* ── Features ── */
html:not(.dark-mode) .feature-row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

html:not(.dark-mode) .features-column--pro .features-column-label {
    border-bottom-color: var(--at-25);
}

html:not(.dark-mode) .features-split {
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.07);
}

/* ── How-it-works steps ── */
html:not(.dark-mode) .step {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

html:not(.dark-mode) .step:hover {
    background: var(--bg-section);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

html:not(.dark-mode) .step-icon-wrap {
    background: var(--at-10);
    border-color: var(--at-30);
    box-shadow: 0 0 20px var(--at-15);
}

html:not(.dark-mode) .step:hover .step-icon-wrap {
    background: var(--at-18);
    border-color: #81D8D0;
    box-shadow: 0 0 30px var(--at-30);
}

html:not(.dark-mode) .steps-container::before {
    background: linear-gradient(90deg,
            transparent 0%,
            var(--at-50) 15%,
            var(--at-50) 85%,
            transparent 100%);
}

/* ── Pricing ── */
html:not(.dark-mode) .pricing-card {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

html:not(.dark-mode) .pricing-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

html:not(.dark-mode) .pricing-card.featured {
    /* White and lifted, not tinted — a grey "most popular" card reads as
       disabled next to two white ones. */
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 24px 60px rgba(26, 44, 66, 0.16), 0 0 0 1px var(--gt-20);
}

html:not(.dark-mode) .pricing-card.featured:hover {
    box-shadow: 0 20px 60px var(--at-20);
}

html:not(.dark-mode) .discount-pill {
    background: var(--at-12);
    border-color: var(--at-28);
}

/* ── RSVP mockup card ── */
html:not(.dark-mode) .rsvp-card {
    background: var(--bg-section);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1), 0 0 50px var(--at-08);
}

html:not(.dark-mode) .rsvp-card-header {
    background: var(--at-05);
    border-bottom-color: rgba(0, 0, 0, 0.07);
}

html:not(.dark-mode) .rsvp-select-mock {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

html:not(.dark-mode) .rsvp-counter-btn {
    background: rgba(0, 0, 0, 0.03);
}

html:not(.dark-mode) .rsvp-counter-btn:hover {
    background: var(--at-10);
}

html:not(.dark-mode) .rsvp-option--selected {
    border-color: var(--at-50);
    background: var(--at-07);
}

/* Notification bubble */
html:not(.dark-mode) .invite-notification {
    background: rgba(255, 251, 247, 0.97);
    border-color: var(--at-35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1), 0 0 20px var(--at-08);
    color: #1a1a1a;
}

/* ── Invite feature icons ── */
html:not(.dark-mode) .invite-feature-icon {
    background: var(--at-10);
    border-color: var(--at-20);
}

html:not(.dark-mode) .invite-feature-row:hover .invite-feature-icon {
    background: var(--at-18);
    border-color: var(--at-35);
}

/* ── Save-the-date preview frame ── */
html:not(.dark-mode) .preview-frame {
    background: var(--bg-section);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.1), 0 0 60px var(--at-07);
}

html:not(.dark-mode) .preview-frame:hover {
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.13), 0 0 80px var(--at-10);
}

html:not(.dark-mode) .preview-header,
html:not(.dark-mode) .preview-countdown,
html:not(.dark-mode) .preview-footer {
    background: rgba(0, 0, 0, 0.02);
}

html:not(.dark-mode) .preview-image-gallery {
    background: rgba(0, 0, 0, 0.04);
}

html:not(.dark-mode) .preview-credit {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ── Editor content panel ── */
html:not(.dark-mode) .editor-content {
    background: var(--bg-section);
    border-color: rgba(0, 0, 0, 0.09);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.07);
}

/* ── Showcase CTA ── */
html:not(.dark-mode) .showcase-cta-section {
    background: var(--at-05);
    border-color: var(--at-22);
}

html:not(.dark-mode) .cta-badge {
    background: var(--at-10);
    border-color: var(--at-20);
}

/* ── Photo mockup ── */
html:not(.dark-mode) .photo-mockup-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

html:not(.dark-mode) .photo-tile {
    background-color: transparent;
}

html:not(.dark-mode) .photo-tile--upload {
    background: var(--at-05);
    border-color: var(--at-40);
    color: var(--at-80);
}

html:not(.dark-mode) .photo-count-badge {
    background: var(--at-10);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

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

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

    .discount-pill {
        opacity: 1;
        transform: none;
    }

    .price-was::after {
        clip-path: inset(0 0 0 0);
    }
}

/* ── Stats Band ─────────────────────────────────────────────── */
.stats-band {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
    flex-wrap: wrap;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 120px;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--light-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

@media (max-width: 640px) {
    .stats-band {
        gap: var(--space-lg);
    }

    .stat-number {
        font-size: 1.6rem;
    }
}

/* ── Testimonials ────────────────────────────────────────────── */
.testimonials {
    padding: var(--space-3xl) var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
}

.testimonials-header {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.testimonials-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    margin-bottom: var(--space-sm);
}

.testimonials-header p {
    color: var(--light-text);
    font-size: 1.05rem;
}

.testimonials-layout {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 1.5rem;
    align-items: start;
}

.testimonials-secondary {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.testimonial-featured {
    background: var(--bg-section-alt);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3rem 3rem 2.5rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.testimonial-featured.visible {
    opacity: 1;
    transform: none;
}

.testimonial-quote-mark {
    font-family: 'Playfair Display', serif;
    font-size: 9rem;
    line-height: 0.75;
    color: var(--primary);
    opacity: 0.12;
    position: absolute;
    top: 1.5rem;
    left: 2rem;
    pointer-events: none;
    user-select: none;
}

.testimonial-featured blockquote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    font-style: italic;
    color: var(--dark-text);
    line-height: 1.7;
    margin: 0 0 2rem 0;
    position: relative;
    z-index: 1;
}

html.dark-mode .testimonial-featured blockquote {
    color: var(--light-text);
}

.testimonial-featured .testimonial-author {
    border-top: 1px solid var(--border);
    padding-top: 1.25rem;
}

.testimonial-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    transition: var(--transition-fast);
}

.testimonial-card:hover {
    border-color: var(--primary);
    background: var(--card-bg-hover);
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 12px 32px rgba(196, 168, 96, 0.14);
}

.testimonial-stars {
    display: flex;
    align-items: center;
    gap: 3px;
    color: var(--primary);
}

.testimonial-stars .icon-svg {
    width: 15px;
    height: 15px;
}

.testimonial-card blockquote {
    color: var(--dark-text);
    font-size: 0.95rem;
    line-height: 1.65;
    font-style: italic;
    flex: 1;
    margin: 0;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.testimonial-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--dark-text);
}

.testimonial-meta {
    font-size: 0.8rem;
    color: var(--light-text);
}

@media (max-width: 768px) {
    .testimonials-layout {
        grid-template-columns: 1fr;
    }

    .testimonial-featured {
        padding: 2rem 1.75rem 1.75rem;
    }

    .testimonials {
        padding: var(--space-2xl) var(--space-md);
    }
}

/* ===== WHY EVERAFTER SECTION ===== */
.why-everafter {
    padding: var(--section-padding-v, 5rem) var(--section-padding-h, 2rem);
}

.why-header {
    text-align: center;
    margin-bottom: 3.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.why-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--dark-text);
    margin-bottom: 1rem;
}

html.dark-mode .why-header h2 {
    color: var(--light-text);
}

.why-header p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.6;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.why-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

.why-card:hover {
    border-color: var(--primary);
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 12px 32px rgba(196, 168, 96, 0.18);
}

html.dark-mode .why-card:hover {
    box-shadow: 0 12px 32px rgba(196, 168, 96, 0.22);
}

.why-icon {
    width: 3rem;
    height: 3rem;
    background: rgba(196, 168, 96, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
}

.why-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary);
}

.why-card h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--dark-text);
}

html.dark-mode .why-card h3 {
    color: var(--light-text);
}

.why-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ===== HERO TRUST BADGE ===== */
.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(196, 168, 96, 0.15);
    border: 1px solid rgba(196, 168, 96, 0.3);
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

/* The stars are SVGs (.icon-svg is display:block), so the row needs to be a
   flex line — letter-spacing meant something only while they were characters. */
.hero-stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--primary);
}

.hero-stars .icon-svg {
    width: 14px;
    height: 14px;
}

html.dark-mode .hero-trust-badge {
    background: rgba(196, 168, 96, 0.1);
    border-color: rgba(196, 168, 96, 0.25);
}

/* ===== PRICING TRUST ROW ===== */
.pricing-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem 2.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

.pricing-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.pricing-trust-item .icon-svg {
    width: 1rem;
    height: 1rem;
    color: var(--accent-green);
}

html.dark-mode .pricing-trust-item .icon-svg {
    color: var(--primary);
}

/* ===== FAQ SECTION ===== */
.faq {
    padding: var(--section-padding-v, 5rem) var(--section-padding-h, 2rem);
    max-width: 720px;
    margin: 0 auto;
}

.faq-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.faq-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--dark-text);
}

html.dark-mode .faq-header h2 {
    color: var(--light-text);
}

.faq-item {
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 0;
}

.faq-item summary {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--dark-text);
    transition: color 0.2s ease;
}

.faq-item summary:hover {
    color: var(--primary);
}

html.dark-mode .faq-item summary {
    color: var(--light-text);
}

html.dark-mode .faq-item summary:hover {
    color: var(--primary);
}

.faq-item summary::after {
    content: '+';
    font-size: 1.25rem;
    color: var(--primary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* ===== FINAL CTA SECTION ===== */
.final-cta {
    text-align: center;
    padding: 6rem 2rem;
    background: var(--bg-section-alt);
}

html.dark-mode .final-cta {
    background: rgba(196, 168, 96, 0.05);
}

.final-cta-inner {
    max-width: 600px;
    margin: 0 auto;
}

.final-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--dark-text);
}

html.dark-mode .final-cta h2 {
    color: var(--light-text);
}

.final-cta p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.final-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .pricing-trust-row {
        gap: 1rem 1.5rem;
        padding-top: 1.5rem;
        margin-top: 1.5rem;
    }

    .pricing-trust-item {
        font-size: 0.8rem;
    }

    .why-everafter {
        padding: 3rem 1.5rem;
    }

    .why-header {
        margin-bottom: 2.5rem;
    }

    .why-header h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .why-grid {
        gap: 1.5rem;
    }

    .why-card {
        padding: 1.5rem;
    }

    .why-icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .why-icon svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .why-card h3 {
        font-size: 1.1rem;
    }

    .faq {
        padding: 3rem 1.5rem;
    }

    .faq-header h2 {
        font-size: clamp(1.5rem, 5vw, 2rem);
    }

    .final-cta {
        padding: 4rem 1.5rem;
    }

    .final-cta h2 {
        font-size: clamp(1.5rem, 5vw, 2.5rem);
    }

    .final-cta-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .final-cta-actions a {
        width: 100%;
    }
}


/* ============================================================
   Partner Page Enhancements
   ============================================================ */

/* ── Glassmorphism hero panel ── */
.hero-content--glass {
    background: rgba(10, 18, 10, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(196, 168, 96, 0.18);
    border-radius: 20px;
    padding: 3rem 3.5rem;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.35);
}
html:not(.dark-mode) .hero-content--glass {
    background: rgba(248, 249, 250, 0.35);
    border-color: rgba(196, 168, 96, 0.25);
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.12);
}

/* ── How it works ── */
.how-it-works {
    padding: 6rem 1.5rem;
    background: var(--bg-section-alt);
    text-align: center;
}
.how-it-works h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--dark-text);
    margin-bottom: 0.75rem;
}
.how-it-works .section-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin-bottom: 3.5rem;
}
.how-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 860px;
    margin: 0 auto;
}
.how-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    position: relative;
}
/* connecting line between steps */
.how-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    right: -1px;
    width: calc(100% - 56px);
    left: calc(50% + 28px);
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 168, 96, 0.5), rgba(196, 168, 96, 0.15));
}
.how-step-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(196, 168, 96, 0.12);
    border: 1.5px solid rgba(196, 168, 96, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}
.how-step:hover .how-step-number {
    background: rgba(196, 168, 96, 0.22);
    box-shadow: 0 0 18px rgba(196, 168, 96, 0.25);
}
.how-step h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark-text);
    margin: 0;
}
.how-step p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 640px) {
    .how-steps {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }
    .how-step:not(:last-child)::after { display: none; }
}