/* ===== DESIGN TOKENS ===== */
:root {
    /* Dot Deed Brand Colors */
    --deep-maroon: #6B0B22;
    --deep-maroon-dark: #4F0819;
    --bright-scarlet: #D62828;
    --bright-scarlet-light: #E84848;
    
    /* Light Mode — neutral near-white (clean, not warm/yellowed) */
    --bg-primary: #FAFAFA;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #EFEFEF;
    --bg-card: #FFFFFF;
    --bg-header: rgba(250, 250, 250, 0.72);

    /* Ambient page wash — a vertical gradient so faint it reads as a flat fill.
       Nothing here should ever look like "a gradient": it is atmosphere only. */
    --bg-canvas: linear-gradient(180deg, #FFFFFF 0%, #FBFBFA 42%, #F7F5F2 100%);

    /* Layered section surfaces (alternating depth, Apple-style) */
    --surface-white: linear-gradient(180deg, #FFFFFF 0%, #FCFCFB 100%);
    --surface-grey: linear-gradient(180deg, #F7F7F7 0%, #F2F2F3 100%);
    --band-footer: linear-gradient(180deg, #FAFAFA 0%, #F3F3F3 100%);
    --hairline: rgba(0, 0, 0, 0.055);
    --sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 20px 44px -30px rgba(0, 0, 0, 0.22);

    /* Hero-only ambient brand glow (maroon + gold, very low opacity, heavily blurred) */
    --glow-maroon: rgba(107, 11, 34, 0.085);
    --glow-gold: rgba(191, 149, 48, 0.075);

    /* Typography */
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --text-tertiary: #a1a1a6;
    --text-on-dark: #ffffff;
    
    /* Borders */
    --border-light: #d2d2d7;
    --border-subtle: #e5e5ea;
    
    /* Radius & Shadows */
    --radius-premium: 12px;
    --radius-pill: 999px;
    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.04);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.12);
    
    /* Fonts */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", sans-serif;
    --font-serif: "Garamond", "Georgia", "Times New Roman", serif;
    
    /* Transitions */
    --transition-base: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-fast: 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* SVG Logo Colors */
    --logo-scroll: #6B0B22;
    --logo-check: #D62828;
    --logo-dot: #D62828;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
    /* Match native UI (scrollbars, inputs, form controls) to the dark theme */
    color-scheme: dark;

    /* Surfaces — soft charcoal instead of pure black (kinder on the eyes) */
    --bg-primary: #101014;
    --bg-secondary: #1a1a1f;
    --bg-tertiary: #24242b;
    --bg-card: #1b1b21;
    --bg-header: rgba(16, 16, 20, 0.82);

    /* Layered surfaces — dark equivalents, same structure as light mode */
    --bg-canvas: linear-gradient(180deg, #14141a 0%, #101014 45%, #0e0e12 100%);
    --surface-white: linear-gradient(180deg, #1e1e25 0%, #1a1a20 100%);
    --surface-grey: linear-gradient(180deg, #191920 0%, #151519 100%);
    --band-footer: linear-gradient(180deg, #1a1a1f 0%, #141418 100%);
    --hairline: rgba(255, 255, 255, 0.07);
    --sheet-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 44px -30px rgba(0, 0, 0, 0.7);
    --glow-maroon: rgba(201, 54, 74, 0.16);
    --glow-gold: rgba(212, 160, 23, 0.1);

    /* Text — softened off-whites with a clear hierarchy */
    --text-primary: #e9e9ee;
    --text-secondary: #9d9da6;
    --text-tertiary: #72727b;
    --text-on-dark: #ffffff;

    /* Borders — subtle, no glow */
    --border-light: #3b3b42;
    --border-subtle: #292930;

    --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-elevated: 0 16px 48px rgba(0, 0, 0, 0.45);

    /* Brand accents — muted rose/crimson instead of neon red */
    --deep-maroon: #8a1f35;
    --bright-scarlet: #c9364a;
    --bright-scarlet-light: #e0707a;

    /* Dark mode logo colors — softened to match */
    --logo-scroll: #c94052;
    --logo-check: #e0707a;
    --logo-dot: #e0707a;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    /* Soft ambient wash instead of a flat fill — barely perceptible by design */
    background-image: var(--bg-canvas);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--transition-smooth), color var(--transition-smooth);
}

/* ===== HEADER & NAVIGATION ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-header);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-subtle);
    transition: all var(--transition-smooth);
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    text-decoration: none;
    flex-shrink: 0;
}

.logo:hover {
    opacity: 0.85;
}

.logo-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.1), rgba(214, 40, 40, 0.06));
    transition: all var(--transition-smooth);
    position: relative;
    box-shadow: 0 2px 12px rgba(107, 11, 34, 0.08);
}

.logo:hover .logo-icon-wrapper {
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.18), rgba(214, 40, 40, 0.1));
    box-shadow: 0 4px 24px rgba(107, 11, 34, 0.2);
    transform: scale(1.04);
}

[data-theme="dark"] .logo-icon-wrapper {
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.2), rgba(255, 59, 59, 0.1));
    box-shadow: 0 2px 12px rgba(255, 59, 59, 0.1);
}

[data-theme="dark"] .logo:hover .logo-icon-wrapper {
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.3), rgba(255, 59, 59, 0.15));
    box-shadow: 0 4px 30px rgba(255, 59, 59, 0.25);
}

.logo-svg {
    width: 38px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 6px;
    color: var(--deep-maroon);
    transition: color var(--transition-smooth);
    line-height: 1.1;
}

[data-theme="dark"] .logo-text {
    color: var(--bright-scarlet-light);
}

.logo-tagline {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-link {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color var(--transition-fast);
    padding: 4px 0;
    letter-spacing: 0.3px;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--deep-maroon);
    border-radius: 1px;
    transition: width var(--transition-fast);
}

[data-theme="dark"] .nav-link::after {
    background-color: var(--bright-scarlet);
}

.nav-link:hover,
.nav-link.active {
    color: var(--text-primary);
}

.nav-link.active::after {
    width: 100%;
}

/* ===== HEADER ACTIONS & DARK MODE TOGGLE ===== */
.header-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.dark-mode-toggle {
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-pill);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    position: relative;
}

.dark-mode-toggle:hover {
    background: var(--border-subtle);
    color: var(--text-primary);
}

.dark-mode-toggle svg {
    width: 18px;
    height: 18px;
    position: absolute;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.dark-mode-toggle .sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.dark-mode-toggle .moon-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0);
}

[data-theme="dark"] .dark-mode-toggle .sun-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0);
}

[data-theme="dark"] .dark-mode-toggle .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="dark"] .dark-mode-toggle {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .dark-mode-toggle:hover {
    background: var(--border-light);
}

/* ===== MAIN CONTAINER ===== */
.main-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 104px 24px 40px;
    min-height: 100vh;
}

.panel {
    display: none;
}

.panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== BRAND WATERMARK (removed from the site) ===== */
.brand-watermark,
.watermark-logo,
.watermark-text { display: none; }

/* ===== BRAND HIGHLIGHT ===== */
.brand-highlight {
    color: var(--deep-maroon);
    position: relative;
    display: inline-block;
}

[data-theme="dark"] .brand-highlight {
    color: var(--bright-scarlet-light);
}

.brand-highlight::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--deep-maroon), var(--bright-scarlet));
    border-radius: 2px;
    opacity: 0.3;
}

[data-theme="dark"] .brand-highlight::after {
    background: linear-gradient(90deg, var(--bright-scarlet), var(--bright-scarlet-light));
}

/* ===== BRAND STAMP ===== */
.brand-stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 0.85rem;
    border: 2px solid var(--deep-maroon);
    border-radius: 50%;
    background: var(--bg-primary);
    box-shadow: 0 0 30px rgba(107, 11, 34, 0.08);
    transition: all var(--transition-smooth);
}

.brand-stamp:hover {
    opacity: 0.8;
    box-shadow: 0 0 40px rgba(107, 11, 34, 0.15);
    transform: scale(1.05);
}

[data-theme="dark"] .brand-stamp {
    border-color: var(--bright-scarlet);
    box-shadow: 0 0 30px rgba(255, 59, 59, 0.1);
}

[data-theme="dark"] .brand-stamp:hover {
    box-shadow: 0 0 40px rgba(255, 59, 59, 0.2);
}

.stamp-img {
    width: 52px;
    height: auto;
    display: block;
}

/* ===== ABOUT PANEL ===== */
.about-panel {
    padding-top: 2rem;
}

.brand-stamp {
    cursor: pointer;
}

.about-header {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
    text-align: center;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.about-title {
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.about-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 400;
    line-height: 1.5;
}

.about-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 3rem;
}

.about-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: var(--shadow-card);
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.about-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--deep-maroon);
}

[data-theme="dark"] .about-card:hover {
    border-color: var(--bright-scarlet);
}

.about-card-accent {
    border-color: rgba(214, 40, 40, 0.2);
    background: linear-gradient(135deg, rgba(214, 40, 40, 0.03), rgba(107, 11, 34, 0.03));
}

[data-theme="dark"] .about-card-accent {
    border-color: rgba(255, 59, 59, 0.2);
    background: linear-gradient(135deg, rgba(255, 59, 59, 0.04), rgba(184, 12, 48, 0.04));
}

.about-card-dark {
    border-color: var(--deep-maroon);
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.05), rgba(107, 11, 34, 0.02));
}

[data-theme="dark"] .about-card-dark {
    border-color: var(--bright-scarlet);
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.08), rgba(184, 12, 48, 0.04));
}

.about-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.08), rgba(214, 40, 40, 0.05));
    color: var(--deep-maroon);
    flex-shrink: 0;
}

.about-card-icon svg {
    width: 24px;
    height: 24px;
}

[data-theme="dark"] .about-card-icon {
    color: var(--bright-scarlet-light);
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.15), rgba(255, 59, 59, 0.08));
}

.about-card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.about-card-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.about-card-text a {
    color: var(--deep-maroon);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

[data-theme="dark"] .about-card-text a {
    color: var(--bright-scarlet-light);
}

.about-card-text a:hover {
    color: var(--bright-scarlet);
}

/* CTA Section */
.about-cta {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.04), rgba(214, 40, 40, 0.02));
    border-radius: 24px;
    border: 1px solid var(--border-subtle);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

[data-theme="dark"] .about-cta {
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.06), rgba(255, 59, 59, 0.03));
}

.about-cta-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

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

.about-cta-btn {
    padding: 0.85rem 2rem;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.about-cta-btn.primary {
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(107, 11, 34, 0.25);
}

.about-cta-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 11, 34, 0.35);
}

[data-theme="dark"] .about-cta-btn.primary {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

.about-cta-btn.secondary {
    background: var(--bg-primary);
    color: var(--deep-maroon);
    border: 2px solid var(--deep-maroon);
}

.about-cta-btn.secondary:hover {
    background: var(--deep-maroon);
    color: #ffffff;
    transform: translateY(-2px);
}

[data-theme="dark"] .about-cta-btn.secondary {
    color: var(--bright-scarlet-light);
    border-color: var(--bright-scarlet);
}

[data-theme="dark"] .about-cta-btn.secondary:hover {
    background: var(--bright-scarlet);
    color: #ffffff;
}

@media (max-width: 768px) {
    .about-title {
        font-size: 2rem;
    }
    .about-subtitle {
        font-size: 1rem;
    }
    .about-content {
        grid-template-columns: 1fr;
    }
    .about-cta {
        padding: 2rem 1.5rem;
    }
    .about-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .about-cta-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* ===== STUDIO BRAND ===== */
.studio-title-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.studio-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--deep-maroon);
    background: var(--bg-secondary);
    padding: 4px 12px 4px 8px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    transition: color var(--transition-smooth), background var(--transition-smooth);
}

[data-theme="dark"] .studio-brand {
    color: var(--bright-scarlet-light);
    background: var(--bg-tertiary);
}

.studio-brand-logo {
    width: 18px;
    height: auto;
    display: block;
}

/* ===== STOREFRONT PANEL ===== */
.storefront-panel,
.shopper-panel,
.studio-panel,
.vault-panel,
.about-panel,
.tier-panel {
    position: relative;
    overflow: hidden;
}

/* ===== S-HERO ===== */
.s-hero {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding: 2rem 0 4rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.s-hero-content {
    flex: 1;
    min-width: 0;
}

.s-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bright-scarlet);
    background: rgba(214, 40, 40, 0.08);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 1.25rem;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

[data-theme="dark"] .s-hero-badge {
    background: rgba(214, 40, 40, 0.15);
    color: var(--bright-scarlet-light);
}

.s-hero-title {
    font-size: 3.5rem;
    font-weight: 750;
    color: var(--text-primary);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin-bottom: 1.25rem;
}

.s-hero-highlight {
    color: var(--deep-maroon);
    position: relative;
    display: inline;
}

[data-theme="dark"] .s-hero-highlight {
    color: var(--bright-scarlet-light);
}

.s-hero-sub {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 520px;
    margin-bottom: 2rem;
}

.s-hero-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.s-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

.s-btn-primary {
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(107, 11, 34, 0.25);
}

.s-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(107, 11, 34, 0.35);
}

[data-theme="dark"] .s-btn-primary {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

.s-btn-secondary {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1.5px solid var(--border-light);
}

.s-btn-secondary:hover {
    border-color: var(--deep-maroon);
    color: var(--deep-maroon);
    background: var(--bg-secondary);
}

[data-theme="dark"] .s-btn-secondary:hover {
    border-color: var(--bright-scarlet);
    color: var(--bright-scarlet-light);
}

.s-btn-outline {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.s-btn-outline:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.s-hero-meta {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 1rem;
}

.s-hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.s-hero-image-frame {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-hero-main-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: var(--shadow-elevated);
}

/* ===== BRAND STRIP ===== */
.s-brand-strip {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 5rem;
    position: relative;
    z-index: 1;
    /* The Google promo's phone deliberately breaks out of its card, so the band
       clips: that keeps the breakout from ever producing a horizontal scrollbar. */
    overflow: hidden;
}

.s-brand-strip-inner {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

/* ===== GOOGLE WORKSPACE PROMO =====
   Occupies the band where the social-proof counter used to sit. The counter
   markup was removed from index-new.html; GET /api/stats and
   src/services/stats.js are untouched, so restoring it just means re-adding the
   markup. Both images are transparent PNGs trimmed to their subject, which is
   what lets the phone break out of the card cleanly on either theme. */
.g-card {
    position: relative;
    --g-breakout: clamp(20px, 4vw, 56px);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    box-shadow: var(--shadow-card);
    padding: clamp(1.85rem, 4vw, 3.25rem);
    text-align: left;
}

/* Reserve room on the right for the phone to break out into, so the band's clip
   never cuts it off at intermediate widths. */
@media (min-width: 901px) {
    .g-card {
        max-width: min(100%, 1120px);
        margin-left: auto;
        margin-right: clamp(48px, 5vw, 72px);
    }
}

.g-lockup {
    display: block;
    width: clamp(170px, 17vw, 240px);
    height: auto;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

/* Copy is capped so it can never run underneath the phone. */
.g-copy { max-width: min(620px, 62%); }

.g-title {
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.6px;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}

.g-sub {
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 1.2rem;
    max-width: 40ch;
}

.g-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.g-chips li {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
}

.g-actions {
    display: flex;
    align-items: center;
    gap: 1rem 1.15rem;
    flex-wrap: wrap;
}

.g-cta { flex-shrink: 0; }

.g-note {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-tertiary);
    max-width: 22ch;
}

/* The phone. Absolutely positioned so the copy column keeps its own line length,
   and tilted slightly so it reads as a deliberate object rather than a pasted
   screenshot. The band above it clips, so the breakout can never scroll the page. */
.g-visual {
    position: absolute;
    top: 50%;
    right: calc(var(--g-breakout) * -1);
    width: clamp(200px, 23vw, 350px);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Soft brand glow sitting under the phone, painted before it in the same
   stacking context (so no negative z-index needed). */
.g-visual::before {
    content: '';
    position: absolute;
    inset: 6% -8% 2% -8%;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--glow-maroon), transparent 74%);
    pointer-events: none;
}

.g-visual img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(-2deg);
    filter: drop-shadow(0 26px 44px rgba(17, 17, 24, 0.22));
}

@media (max-width: 900px) {
    .g-copy { max-width: none; }
    .g-visual {
        position: static;
        transform: none;
        width: min(220px, 58%);
        margin: 1.75rem auto 0;
    }
    .g-note { max-width: none; }
}

/* --- Entrance ---
   .g-anim is added by an inline script, and only when JS is available and the
   visitor has not asked for reduced motion. Without it the card is simply
   visible, so nothing here can hide the offer from a no-JS visitor. */
.g-anim .g-card {
    opacity: 0;
    transform: translateY(24px) scale(0.99);
}

.g-anim .g-card,
.g-anim .g-lockup,
.g-anim .g-title,
.g-anim .g-sub,
.g-anim .g-chips,
.g-anim .g-actions,
.g-anim .g-visual img {
    transition: opacity 0.65s var(--transition-smooth), transform 0.65s var(--transition-smooth);
}

.g-anim .g-lockup,
.g-anim .g-title,
.g-anim .g-sub,
.g-anim .g-chips,
.g-anim .g-actions {
    opacity: 0;
    transform: translateY(16px);
}

.g-anim .g-visual img {
    opacity: 0;
    transform: translateY(38px) rotate(-7deg);
}

.g-anim .g-card.g-in { opacity: 1; transform: none; }

.g-anim .g-card.g-in .g-lockup,
.g-anim .g-card.g-in .g-title,
.g-anim .g-card.g-in .g-sub,
.g-anim .g-card.g-in .g-chips,
.g-anim .g-card.g-in .g-actions {
    opacity: 1;
    transform: none;
}

.g-anim .g-card.g-in .g-lockup { transition-delay: 0.06s; }
.g-anim .g-card.g-in .g-title { transition-delay: 0.14s; }
.g-anim .g-card.g-in .g-sub { transition-delay: 0.22s; }
.g-anim .g-card.g-in .g-chips { transition-delay: 0.3s; }
.g-anim .g-card.g-in .g-actions { transition-delay: 0.38s; }

/* The phone settles, then breathes. The animation only starts once the entrance
   has finished, so the two never fight over `transform`. */
.g-anim .g-card.g-in .g-visual img {
    opacity: 1;
    transform: rotate(-2deg);
    transition-delay: 0.16s;
    animation: g-float 7s ease-in-out 1.1s infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .g-anim .g-card,
    .g-anim .g-lockup,
    .g-anim .g-title,
    .g-anim .g-sub,
    .g-anim .g-chips,
    .g-anim .g-actions {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .g-anim .g-visual img {
        opacity: 1;
        transform: rotate(-2deg);
        transition: none;
        animation: none;
    }
}

/* ===== SECTIONS ===== */
.s-section {
    max-width: 1200px;
    margin: 0 auto 5rem;
    position: relative;
    z-index: 1;
}

.s-section-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3rem;
}

.s-section-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--bright-scarlet);
    background: rgba(214, 40, 40, 0.08);
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 0.75rem;
    transition: background var(--transition-smooth), color var(--transition-smooth);
}

[data-theme="dark"] .s-section-badge {
    background: rgba(214, 40, 40, 0.15);
    color: var(--bright-scarlet-light);
}

.s-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 0.75rem;
}

.s-section-sub {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ===== FEATURES GRID ===== */
.s-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

.s-feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    padding: 1.75rem;
    cursor: pointer;
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.s-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--deep-maroon);
}

[data-theme="dark"] .s-feature-card:hover {
    border-color: var(--bright-scarlet);
}

.s-feature-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.08), rgba(214, 40, 40, 0.05));
    color: var(--deep-maroon);
    flex-shrink: 0;
}

.s-feature-icon svg {
    width: 22px;
    height: 22px;
}

[data-theme="dark"] .s-feature-icon {
    color: var(--bright-scarlet-light);
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.15), rgba(255, 59, 59, 0.08));
}

.s-feature-title {
    font-size: 1.1rem;
    font-weight: 650;
    color: var(--text-primary);
}

.s-feature-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
    flex-grow: 1;
}

.s-feature-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--deep-maroon);
    transition: transform var(--transition-fast);
    display: inline-block;
}

[data-theme="dark"] .s-feature-link {
    color: var(--bright-scarlet-light);
}

.s-feature-card:hover .s-feature-link {
    transform: translateX(4px);
}

/* ===== VISION SECTION ===== */
.s-vision-section {
    max-width: 1200px;
    margin: 0 auto 5rem;
    position: relative;
    z-index: 1;
}

.s-vision-grid {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.s-vision-content {
    flex: 1;
}

.s-vision-text {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.s-vision-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.s-vision-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.s-vision-list li svg {
    flex-shrink: 0;
    color: var(--deep-maroon);
}

[data-theme="dark"] .s-vision-list li svg {
    color: var(--bright-scarlet-light);
}

.s-vision-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
}

.s-vision-img {
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: var(--shadow-elevated);
    aspect-ratio: 4 / 3;
}

/* Static product photo in the Vision section (framed certificate trio) */
.vision-photo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.vision-photo {
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* ===== STEPS ===== */
.s-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1rem;
    position: relative;
}

.s-step {
    flex: 1;
    max-width: 280px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.s-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.s-step-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--deep-maroon);
}

.s-step-icon svg {
    width: 28px;
    height: 28px;
}

[data-theme="dark"] .s-step-icon {
    color: var(--bright-scarlet-light);
}

.s-step-title {
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text-primary);
}

.s-step-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.s-step-arrow {
    flex-shrink: 0;
    color: var(--text-tertiary);
    margin-top: 3.5rem;
    width: 28px;
}

.s-step-arrow svg {
    width: 28px;
    height: 28px;
}

/* ===== PRODUCTS / CERTIFICATE CARDS ===== */
.s-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.s-product-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
}

.s-product-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--deep-maroon);
}

[data-theme="dark"] .s-product-card:hover {
    border-color: var(--bright-scarlet);
}

.s-product-featured {
    border: 2px solid var(--deep-maroon);
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.03), transparent);
}

[data-theme="dark"] .s-product-featured {
    border-color: var(--bright-scarlet);
    background: linear-gradient(135deg, rgba(214, 40, 40, 0.06), transparent);
}

.s-product-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(107, 11, 34, 0.3);
    z-index: 2;
}

[data-theme="dark"] .s-product-badge {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

.s-product-preview {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    transition: background var(--transition-smooth);
}

.s-diploma-mini {
    width: 140px;
    height: 95px;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 4px;
    padding: 12px;
    text-align: center;
    font-family: var(--font-serif);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: background var(--transition-smooth), border-color var(--transition-smooth);
}

.s-diploma-premium::before,
.s-diploma-elite::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px double var(--deep-maroon);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.5;
}

.s-diploma-hd {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--deep-maroon);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: color var(--transition-smooth);
}

[data-theme="dark"] .s-diploma-hd {
    color: var(--bright-scarlet);
}

.s-diploma-bd {
    font-size: 0.55rem;
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.4;
}

.s-diploma-accent {
    width: 30px;
    height: 1.5px;
    background: var(--deep-maroon);
    margin-top: 4px;
    opacity: 0.6;
    transition: background var(--transition-smooth);
}

[data-theme="dark"] .s-diploma-accent {
    background: var(--bright-scarlet);
}

.s-diploma-accent-premium {
    background: linear-gradient(90deg, transparent, var(--deep-maroon), transparent);
}

[data-theme="dark"] .s-diploma-accent-premium {
    background: linear-gradient(90deg, transparent, var(--bright-scarlet), transparent);
}

.s-diploma-accent-elite {
    width: 35px;
    background: linear-gradient(90deg, var(--deep-maroon), var(--bright-scarlet), var(--deep-maroon));
}

[data-theme="dark"] .s-diploma-accent-elite {
    background: linear-gradient(90deg, var(--bright-scarlet), var(--bright-scarlet-light), var(--bright-scarlet));
}

.s-product-body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.s-product-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.s-product-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}

.s-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.s-product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--deep-maroon);
    transition: color var(--transition-smooth);
}

[data-theme="dark"] .s-product-price {
    color: var(--bright-scarlet-light);
}

.s-product-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--deep-maroon);
    transition: transform var(--transition-fast), color var(--transition-smooth);
}

[data-theme="dark"] .s-product-cta {
    color: var(--bright-scarlet-light);
}

.s-product-card:hover .s-product-cta {
    transform: translateX(4px);
}

/* ===== CTA BANNER ===== */
.s-cta-banner {
    max-width: 1200px;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a0a0e 0%, #2c0a14 30%, #4a0f20 60%, #6B0B22 100%);
    padding: 4rem 3rem;
}

[data-theme="dark"] .s-cta-banner {
    background: linear-gradient(135deg, #0a0000 0%, #1a0508 30%, #2a0a15 60%, #3a0a18 100%);
}

.s-cta-banner-bg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.06;
    pointer-events: none;
}

.s-cta-logo-bg {
    width: 80%;
    height: auto;
    max-width: 600px;
    transform: rotate(-3deg);
    opacity: 0.8;
}

.s-cta-banner-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.s-cta-banner-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 0.75rem;
}

.s-cta-banner-sub {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 2rem;
}

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

/* ===== TIER SELECT PANEL ===== */
.tier-panel {
    position: relative;
    overflow: hidden;
}

.tier-header {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
    padding-top: 1rem;
}

.tier-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.8px;
    line-height: 1.1;
}

.tier-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.tier-domain-info {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.06), rgba(214, 40, 40, 0.04));
    border: 1px solid rgba(107, 11, 34, 0.15);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
}

[data-theme="dark"] .tier-domain-info {
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.1), rgba(255, 59, 59, 0.06));
    border-color: rgba(255, 59, 59, 0.2);
}

.tier-domain-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.tier-domain-name {
    color: var(--deep-maroon);
    font-weight: 700;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
}

[data-theme="dark"] .tier-domain-name {
    color: var(--bright-scarlet-light);
}

.tier-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 4rem;
    position: relative;
    z-index: 1;
}

.tier-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    transition: all var(--transition-smooth);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    position: relative;
}

.tier-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--deep-maroon);
}

[data-theme="dark"] .tier-card:hover {
    border-color: var(--bright-scarlet);
}

.tier-card-featured {
    border: 2px solid var(--deep-maroon);
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.03), transparent);
    transform: scale(1.02);
}

.tier-card-featured:hover {
    transform: scale(1.02) translateY(-6px);
}

[data-theme="dark"] .tier-card-featured {
    border-color: var(--bright-scarlet);
    background: linear-gradient(135deg, rgba(214, 40, 40, 0.06), transparent);
}

.tier-card-badge-float {
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(107, 11, 34, 0.3);
    z-index: 2;
}

[data-theme="dark"] .tier-card-badge-float {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

.tier-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tier-card-num {
    font-size: 1.4rem;
    font-weight: 750;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.tier-card-badge {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bright-scarlet);
    background: rgba(214, 40, 40, 0.08);
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}

[data-theme="dark"] .tier-card-badge {
    color: var(--bright-scarlet-light);
    background: rgba(214, 40, 40, 0.15);
}

.tier-card-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0;
}

.tier-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 280px;
}

.tier-card-features {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: center;
    width: 100%;
}

.tier-feature {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.tier-select-btn {
    margin-top: auto;
    padding: 0.75rem 2rem;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    transition: all var(--transition-fast);
    width: 100%;
    max-width: 260px;
}

.tier-select-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 11, 34, 0.3);
}

[data-theme="dark"] .tier-select-btn {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

@media (max-width: 768px) {
    .tier-title {
        font-size: 2rem;
    }
    .tier-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    .tier-card-featured {
        transform: none;
    }
    .tier-card-featured:hover {
        transform: translateY(-6px);
    }
}

@media (max-width: 480px) {
    .tier-title {
        font-size: 1.6rem;
    }
    .tier-domain-info {
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
    }
}

/* ===== NAMECHEAP-STYLE DOMAIN SHOPPER ===== */
.nc-hero{background:var(--bg-card);padding:3rem 2rem 4rem;text-align:center;position:relative;overflow:hidden}
.nc-hero-content{max-width:720px;margin:0 auto;position:relative;z-index:1}
.nc-hero-badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--text-secondary);background:var(--bg-secondary);padding:.4rem 1rem;border-radius:var(--radius-pill);margin-bottom:1rem}
.nc-hero-title{font-size:2.5rem;font-weight:800;color:var(--text-primary);margin:0 0 .5rem;line-height:1.2}
.nc-hero .brand-highlight{color:var(--text-primary)}
.nc-hero .brand-highlight::after{display:none}
.nc-hero-sub{font-size:1rem;color:var(--text-secondary);margin:0 0 2rem}
.nc-search-box{background:#fff;border-radius:12px;padding:4px;box-shadow:0 8px 32px rgba(0,0,0,0.2);max-width:640px;margin:0 auto}
.nc-search-inner{display:flex;align-items:center}
.nc-search-icon{width:20px;height:20px;color:#a1a1a6;flex-shrink:0;margin:0 12px}
.nc-search-input{flex:1;border:none;padding:.9rem 0;font-size:1.05rem;font-family:inherit;color:#1d1d1f;outline:none;background:transparent}
.nc-search-input::placeholder{color:#a1a1a6}
.nc-search-btn{flex-shrink:0;display:flex;align-items:center;gap:.4rem;padding:.75rem 1.5rem;border:none;border-radius:8px;background:linear-gradient(135deg,#6B0B22,#D62828);color:#fff;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;margin:4px;transition:all .2s}
.nc-search-btn:hover{transform:scale(1.02);box-shadow:0 4px 12px rgba(214,40,40,0.3)}
.nc-search-btn svg{width:16px;height:16px}
.nc-popular-tlds{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1rem;flex-wrap:wrap}
.nc-popular-tlds span{font-size:.78rem;color:var(--text-tertiary);font-weight:500;margin-right:4px}
.nc-popular-tlds .tld-filter{padding:4px 12px;border:1px solid var(--border-light);border-radius:var(--radius-pill);background:var(--bg-primary);color:var(--text-secondary);font-size:.75rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s}
.nc-popular-tlds .tld-filter:hover{background:var(--bg-secondary);color:var(--text-primary)}
.nc-popular-tlds .tld-filter.active{background:var(--deep-maroon);border-color:var(--deep-maroon);color:#fff}

/* ===== FLYING FRAMED CERTIFICATES ===== */
.cert-swoosh {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: clamp(150px, 16vw, 220px);
    height: auto;
    pointer-events: none;
    opacity: 0;
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));
    animation: certSwooshIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
}
.cert-swoosh-left {
    left: clamp(12px, 3vw, 48px);
    animation-delay: 0.1s;
}
.cert-swoosh-right {
    right: clamp(12px, 3vw, 48px);
    animation-delay: 0.25s;
}
@keyframes certSwooshIn {
    0%   { opacity: 0; transform: translateY(-190%) rotate(-7deg); }
    55%  { opacity: 1; transform: translateY(-57%) rotate(3deg); }
    75%  { opacity: 1; transform: translateY(-47%) rotate(-1deg); }
    100% { opacity: 1; transform: translateY(-50%) rotate(0deg); }
}
@media (max-width: 1249px) {
    .cert-swoosh { display: none; }
}

/* ===== HOW IT WORKS: NEXT STEPS ===== */
.nc-steps {
    max-width: 960px;
    margin: 3rem auto 4rem;
    padding: 0 1.5rem;
    text-align: center;
}
.nc-steps-header {
    margin-bottom: 2.25rem;
}
.nc-steps-title {
    margin: 0.75rem 0 0;
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary);
}
.nc-steps-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}
@media (min-width: 860px) {
    .nc-steps-row {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }
}
.nc-step {
    position: relative;
    flex: 1;
    max-width: 280px;
    width: 100%;
    padding: 1.75rem 1.5rem 1.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    cursor: default;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast), padding var(--transition-fast);
}
.nc-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    border-color: var(--deep-maroon);
}
.nc-step-more {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
    transition: max-height 0.45s ease, opacity 0.35s ease 0.05s, margin-top 0.45s ease;
}
.nc-step:hover .nc-step-more {
    max-height: 220px;
    opacity: 1;
    margin-top: 0.85rem;
}
.nc-step-num {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(107, 11, 34, 0.3);
}
.nc-step-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.75rem;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(214, 40, 40, 0.08);
    color: var(--deep-maroon);
}
.nc-step-icon svg {
    width: 26px;
    height: 26px;
}
.nc-step-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--deep-maroon);
}
.nc-step-desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.nc-step-arrow {
    display: none;
    align-items: center;
    color: var(--bright-scarlet);
    font-size: 1.6rem;
    font-weight: 300;
    flex-shrink: 0;
}
@media (min-width: 860px) {
    .nc-step-arrow {
        display: flex;
    }
}
[data-theme="dark"] .nc-step-title {
    color: var(--bright-scarlet-light);
}
[data-theme="dark"] .nc-step-icon {
    background: rgba(214, 40, 40, 0.15);
    color: var(--bright-scarlet-light);
}
[data-theme="dark"] .nc-step:hover {
    border-color: var(--bright-scarlet);
}
.nc-results-section{max-width:900px;margin:0 auto;padding:1.5rem 2rem 3rem}
.nc-results-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border-subtle)}
.nc-results-stats{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.nc-result-count{font-size:1.2rem;font-weight:800;color:var(--deep-maroon)}
[data-theme="dark"] .nc-result-count{color:var(--bright-scarlet-light)}
.nc-result-label{font-size:.9rem;color:var(--text-secondary)}
.nc-search-query{font-size:.85rem;color:var(--text-tertiary);font-style:italic;margin-left:.5rem}
.nc-search-query::before{content:"Results for \""}
.nc-search-query::after{content:"\""}
.nc-results-controls{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.nc-control-group{display:flex;align-items:center;gap:.4rem}
.nc-control-group>label{font-size:.7rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.nc-price-filters{display:flex;gap:3px}
.nc-price-btn{padding:4px 10px;border:1px solid var(--border-light);border-radius:var(--radius-pill);background:var(--bg-primary);color:var(--text-secondary);font-size:.72rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.nc-price-btn:hover{border-color:var(--deep-maroon);color:var(--deep-maroon)}
[data-theme="dark"] .nc-price-btn:hover{border-color:var(--bright-scarlet);color:var(--bright-scarlet-light)}
.nc-price-btn.active{background:var(--deep-maroon);border-color:var(--deep-maroon);color:#fff}
[data-theme="dark"] .nc-price-btn.active{background:var(--bright-scarlet);border-color:var(--bright-scarlet)}
.nc-sort-select{padding:5px 10px;border:1px solid var(--border-light);border-radius:var(--radius-pill);background:var(--bg-primary);color:var(--text-primary);font-size:.78rem;font-family:inherit;cursor:pointer;outline:none}
.nc-avail-check{display:flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--text-secondary);cursor:pointer;white-space:nowrap}
.nc-avail-check input{accent-color:var(--deep-maroon)}
.nc-results-grid{display:flex;flex-direction:column;gap:6px}
.nc-result-row{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:10px;transition:all .2s}
.nc-result-row:hover{border-color:var(--border-light);box-shadow:var(--shadow-light)}
.nc-result-row.available{border-left:3px solid #22c55e}
.nc-result-row.taken{border-left:3px solid #dc2626;opacity:.6}
.nc-result-domain{flex:1;min-width:0;display:flex;align-items:baseline;gap:.25rem}
.nc-domain-name{font-size:1.05rem;font-weight:700;color:var(--text-primary)}
.nc-domain-tld{font-size:.85rem;color:var(--text-tertiary);font-weight:500}
.nc-result-meta{display:flex;align-items:center;gap:.4rem;flex-shrink:0}
.nc-badge{font-size:.62rem;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.3px}
.nc-badge-premium{background:linear-gradient(135deg,#bf9530,#fcf6ba,#b38728);color:#3d2a00}
.nc-badge-value{background:#22c55e;color:#fff}
.nc-avail-tag{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:var(--radius-pill)}
.nc-avail-tag.avail{background:rgba(34,197,94,0.12);color:#16a34a}
[data-theme="dark"] .nc-avail-tag.avail{background:rgba(34,197,94,0.15);color:#4ade80}
.nc-avail-tag.taken{background:rgba(239,68,68,0.1);color:#dc2626}
.nc-result-price{text-align:right;flex-shrink:0;min-width:80px}
.nc-price{font-size:1.05rem;font-weight:700;color:var(--deep-maroon)}
[data-theme="dark"] .nc-price{color:var(--bright-scarlet-light)}
.nc-price-period{font-size:.65rem;font-weight:400;color:var(--text-tertiary)}
.nc-result-action{flex-shrink:0}
.nc-select-btn{padding:.55rem 1.2rem;border:none;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--deep-maroon),var(--bright-scarlet));color:#fff;font-weight:600;font-size:.8rem;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}
.nc-select-btn:hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(214,40,40,0.3)}
.nc-empty-state{text-align:center;padding:3rem 2rem;color:var(--text-secondary)}
.nc-empty-state h3{font-size:1.2rem;color:var(--text-primary);margin-bottom:.5rem}
.nc-empty-state a{color:var(--deep-maroon);text-decoration:underline;cursor:pointer}
[data-theme="dark"] .nc-empty-state a{color:var(--bright-scarlet-light)}

/* ===== DOMAIN SHOPPER LOADING SCREEN ===== */
.nc-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;padding:4rem 2rem;text-align:center}
.nc-loader-ring{position:relative;width:80px;height:80px;margin-bottom:1rem}
.nc-loader-ring::before{content:'';position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--deep-maroon);border-right-color:var(--bright-scarlet);animation:spin .9s linear infinite}
.nc-loader-ring::after{content:'';position:absolute;inset:7px;border-radius:50%;border:2px solid transparent;border-bottom-color:var(--deep-maroon);opacity:.45;animation:spin 1.5s linear infinite reverse}
.nc-loader-core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--deep-maroon);animation:loaderPulse 1.6s ease-in-out infinite}
.nc-loader-title{font-size:1.15rem;font-weight:600;color:var(--text-primary)}
.nc-loader-title strong{color:var(--deep-maroon)}
[data-theme="dark"] .nc-loader-title strong{color:var(--bright-scarlet-light)}
.nc-loader-sub{font-size:.85rem;color:var(--text-secondary)}
.nc-loader-dots{display:flex;gap:6px;margin-top:.75rem}
.nc-loader-dots i{width:8px;height:8px;border-radius:50%;background:var(--deep-maroon);opacity:.25;animation:dotPulse 1.1s ease-in-out infinite}
[data-theme="dark"] .nc-loader-dots i{background:var(--bright-scarlet)}
.nc-loader-dots i:nth-child(2){animation-delay:.15s}
.nc-loader-dots i:nth-child(3){animation-delay:.3s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes dotPulse{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@keyframes loaderPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ===== JOURNEY PROGRESS (sales process) ===== */
.journey-progress {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    font-family: var(--font-sans);
}
.journey-progress.visible {
    opacity: 1;
    visibility: visible;
}
.jp-rail {
    position: relative;
    height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.jp-line {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: var(--border-light);
    border-radius: 2px;
}
.jp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-light);
    position: relative;
    z-index: 1;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.jp-dot.done {
    background: var(--deep-maroon);
    border-color: var(--deep-maroon);
}
.jp-dot.active {
    background: var(--bright-scarlet);
    border-color: var(--bright-scarlet);
    transform: scale(1.15);
    animation: jpPop 0.45s ease, jpPulse 1.8s ease-in-out 0.45s infinite;
}
@keyframes jpPop {
    0% { transform: scale(0.4); }
    60% { transform: scale(1.35); }
    100% { transform: scale(1.15); }
}
@keyframes jpPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.12); }
    50% { box-shadow: 0 0 0 7px rgba(214, 40, 40, 0.22); }
}
.jp-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text-primary);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 5px 12px;
    box-shadow: var(--shadow-light);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.jp-label.show {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 768px) {
    .journey-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .jp-dot.active { animation: none; }
}

/* ===== DOMAIN SHOPPER: MOBILE ===== */
@media (max-width: 768px) {
    .nc-hero {
        padding: 2rem 1.25rem 2.5rem;
    }
    .nc-hero-title {
        font-size: 1.9rem;
    }
    .nc-hero-sub {
        font-size: 0.9rem;
    }
    .nc-search-box {
        max-width: 100%;
    }
    .nc-results-section {
        padding: 1.25rem 1rem 2.5rem;
    }
    .nc-results-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .nc-results-controls {
        width: 100%;
        gap: 0.75rem;
    }
    .nc-price-filters {
        flex-wrap: wrap;
    }
}
@media (max-width: 640px) {
    .nc-result-row {
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        padding: 0.75rem;
    }
    .nc-result-domain {
        flex: 1 1 100%;
    }
    .nc-result-price {
        min-width: 0;
        text-align: left;
    }
    .nc-result-action {
        margin-left: auto;
    }
}
@media (max-width: 480px) {
    .nc-hero-title {
        font-size: 1.6rem;
    }
    .nc-search-box {
        padding: 3px;
    }
    .nc-search-btn {
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
        margin: 3px;
    }
    .nc-search-icon {
        margin: 0 8px;
    }
}

/* ===== STUDIO PANEL ===== */
.studio-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-button {
    background: none;
    border: none;
    font-size: 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 500;
    transition: color var(--transition-fast);
    padding: 8px 0;
    font-family: inherit;
}

.back-button:hover {
    color: var(--text-primary);
}

.studio-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.studio-container {
    display: grid;
    /* minmax(0, …) rather than 1fr: the certificate canvas is sized in px by JS
       (fitCertificateCanvas sets --preview-w from the column width), and a plain
       1fr track takes that as its auto minimum. Resizing down to mobile then
       pinned the column at the old desktop width and the form was clipped, with
       the re-fit reading the wide column back — a feedback loop. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    min-height: calc(100vh - 240px);
    align-items: start;
}

@media (max-width: 1200px), (max-height: 800px) {
    .studio-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
        min-height: auto;
    }
    /* On mobile / smaller aspect ratios the preview moves to the bottom of the
       page (below the form). It can grow with the certificate (instead of being
       squeezed by a viewport-limited sticky column) and is capped + centred so
       it keeps the same comfortable format as the desktop preview. */
    .studio-preview-section {
        position: static;
        top: auto;
        max-height: none;
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        align-self: center;
    }
}

/* LEFT PANEL: FORM */
.studio-form-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Grid items default to min-width:auto, which lets overflowing content set
       the track width. Required alongside minmax(0, 1fr) on .studio-container. */
    min-width: 0;
}

/* Studio Tier Selector */
.studio-tier-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.studio-tier-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 0.25rem;
}

.studio-tier-pill {
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.studio-tier-pill:hover {
    border-color: var(--deep-maroon);
    color: var(--deep-maroon);
}

[data-theme="dark"] .studio-tier-pill:hover {
    border-color: var(--bright-scarlet);
    color: var(--bright-scarlet-light);
}

.studio-tier-pill.active {
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(107, 11, 34, 0.2);
}

[data-theme="dark"] .studio-tier-pill.active {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

.tier-pill-price {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    background: rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
}

.studio-tier-pill:not(.active) .tier-pill-price {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
}

.frame-price-tag {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--deep-maroon);
    margin-left: 4px;
}

[data-theme="dark"] .frame-price-tag {
    color: var(--bright-scarlet-light);
}

/* Framed upgrade offer — shown only on the unframed tier. The price difference
   is stated on the button and the body says what the extra money actually buys. */
.frame-upsell {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.7rem 0.8rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    border: 1.5px solid var(--deep-maroon);
    border-radius: 8px;
    background: rgba(107, 11, 34, 0.06);
    color: var(--deep-maroon);
    transition: background 0.15s ease;
}

.frame-upsell:hover {
    background: rgba(107, 11, 34, 0.11);
}

/* Email add-on on the customize screen. Shares the frame upsell's treatment so
   the two paid extras read as the same kind of thing, but is deliberately a
   compact three-line card: this screen is about building the certificate, so
   the add-on has to stay an aside the customer can skim past. */
.email-upsell-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.35rem;
    padding: 0.7rem 0.8rem;
    border: 1.5px solid var(--deep-maroon);
    border-radius: 8px;
    background: rgba(107, 11, 34, 0.06);
    color: var(--text-primary);
}
.email-upsell-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}
.email-upsell-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--deep-maroon);
}
.email-upsell-price {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--deep-maroon);
    white-space: nowrap;
}
/* One line, not a feature list — the button and the billing note share the row
   beneath it, so the whole card stays three lines tall. */
.email-upsell-next {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.email-upsell-next strong {
    color: var(--text-primary);
    font-weight: 600;
}
.email-upsell-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
/* Child selector so this beats .btn-print's flex:1 and 12px 24px padding, which
   are declared later in this file — same approach as .sig-actions > .btn-print. */
.email-upsell-actions > .btn-print {
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 0.82rem;
}
.email-upsell-actions > .form-hint {
    font-size: 0.7rem;
    margin-top: 0;
}
[data-theme="dark"] .email-upsell-card {
    background: rgba(214, 40, 40, 0.08);
    border-color: var(--bright-scarlet);
}
[data-theme="dark"] .email-upsell-name,
[data-theme="dark"] .email-upsell-price { color: var(--bright-scarlet-light); }

.frame-upsell-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.frame-upsell-title {
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

.frame-upsell-price {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--deep-maroon);
    color: #fff;
}

.frame-upsell-body {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: normal;
}

/* Gift / Self Toggle */
.studio-gift-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gift-toggle-group {
    display: flex;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.gift-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.gift-toggle-btn svg {
    width: 16px;
    height: 16px;
}

.gift-toggle-btn:hover {
    color: var(--text-primary);
}

.gift-toggle-btn.active {
    background: var(--deep-maroon);
    color: #ffffff;
}

[data-theme="dark"] .gift-toggle-btn.active {
    background: var(--bright-scarlet);
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

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

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.checkbox-row input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--deep-maroon);
}

[data-theme="dark"] .checkbox-row input {
    accent-color: var(--bright-scarlet);
}

.estimate-card {
    margin-top: 0.5rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-secondary);
}

.customization-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-secondary);
}

.customization-options .full-width {
    grid-column: 1 / -1;
}

.customization-options label {
    font-size: 0.9rem;
    font-weight: 600;
}

.customization-options select,
.customization-options input[type="color"],
.customization-options input[type="text"] {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
}

.customization-options .checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.customization-options .checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--deep-maroon);
    cursor: pointer;
}

.estimate-row {
    display: flex;
    justify-content: space-between;
    color: var(--text-primary);
    font-weight: 600;
}

.hidden {
    display: none !important;
}

.form-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.form-input {
    background-color: var(--bg-primary);
    border: none;
    border-bottom: 1px solid var(--border-light);
    padding: 12px 0;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input::placeholder {
    color: var(--text-tertiary);
}

.form-input:focus {
    outline: none;
    border-bottom-color: var(--deep-maroon);
    box-shadow: 0 2px 0 var(--deep-maroon);
}

[data-theme="dark"] .form-input:focus {
    border-bottom-color: var(--bright-scarlet);
    box-shadow: 0 2px 0 var(--bright-scarlet);
}

.form-hint {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* Signature controls — a design action, so it sits with the design fields
   rather than in the print row at the foot of the panel. Deliberately NOT
   full-width: signing is a secondary action, unlike Print Certificate. */
.sig-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.sig-actions > .btn-print {
    flex: 0 0 auto;
    padding: 9px 18px;
    font-size: 0.85rem;
}

.btn-export,
.btn-print {
    padding: 12px 24px;
    border-radius: var(--radius-premium);
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
    letter-spacing: 0.3px;
}

.btn-export {
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: white;
    flex: 1;
}

.btn-export:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
}

.btn-print {
    background-color: transparent;
    color: var(--deep-maroon);
    border: 2px solid var(--deep-maroon);
    flex: 1;
}

[data-theme="dark"] .btn-print {
    color: var(--bright-scarlet-light);
    border-color: var(--bright-scarlet-light);
}

.btn-print:hover {
    background-color: var(--bg-secondary);
}

/* DEV-ONLY: test print button on the studio page */
.btn-test-print {
    border-style: dashed;
    border-color: #d4a017;
    color: #d4a017;
    background: rgba(212, 160, 23, 0.08);
}

.btn-test-print:hover {
    background-color: rgba(212, 160, 23, 0.18);
}

[data-theme="dark"] .btn-test-print {
    color: #d4a017;
    border-color: #d4a017;
}

.test-print-note {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.7rem;
    color: #d4a017;
    opacity: 0.85;
}

/* RIGHT PANEL: PREVIEW */
.studio-preview-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;
    top: 2rem;
    align-self: start;
    max-height: calc(100vh - 4rem);
    min-width: 0;
}

.preview-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* ===== Preview mode toggle (Customize / On the wall) ===== */
.preview-label-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-bottom: 0.6rem;
}
.preview-label-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}
.preview-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-card);
}
.preview-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}
.preview-mode-btn:hover { color: var(--text-primary); }
.preview-mode-btn.active {
    background: var(--deep-maroon);
    color: #ffffff;
}
[data-theme="dark"] .preview-mode-btn.active { background: var(--bright-scarlet); }

.preview-frame-color {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.preview-frame-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.frame-swatch-row { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.frame-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    padding: 0;
    border: 2px solid transparent;
    cursor: pointer;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.frame-swatch:hover { transform: translateY(-1px); }
.frame-swatch.active { border-color: var(--deep-maroon); }
[data-theme="dark"] .frame-swatch.active { border-color: var(--bright-scarlet); }

.wall-preview-hint {
    width: 100%;
    flex-basis: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
}

/* Wall preview canvas — shown in place of the flat certificate in wall mode */
.wall-preview-wrap {
    display: none;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}
.wall-preview-canvas {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: var(--shadow-medium);
    background: #ffffff;
}
/* Background (room) selector shown above the wall preview canvas */
.wall-bg-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 0.6rem;
}
.wall-bg-row-label {
    font-size: 0.72rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
}
.wall-bg-thumbs { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
/* Background chooser: name-only pills, in the same family as the studio's
   .de-chip buttons and the Customize / On the wall toggle above them. The room
   photos themselves show in the preview, so cropping them into 56x44 told the
   customer less than the room's name. */
.wall-bg-thumb {
    padding: 0.34rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--border-light);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.wall-bg-thumb:hover {
    border-color: var(--deep-maroon);
    color: var(--deep-maroon);
    transform: translateY(-1px);
}
.wall-bg-thumb.active {
    background: var(--deep-maroon);
    border-color: var(--deep-maroon);
    color: #ffffff;
}
.wall-bg-thumb.active:hover { color: #ffffff; }
[data-theme="dark"] .wall-bg-thumb.active {
    background: var(--bright-scarlet);
    border-color: var(--bright-scarlet);
}

/* ---- Click-to-zoom lightbox for studio previews ---- */
.zoom-host { position: relative; }
.zoomable { cursor: zoom-in; }
.zoom-chip {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(20, 14, 10, 0.55);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.zoom-host:hover .zoom-chip { opacity: 1; transform: translateY(0); }

.zoom-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(12, 8, 5, 0);
    opacity: 0;
    transition: opacity 0.28s ease, background 0.28s ease;
}
.zoom-lightbox.open { opacity: 1; background: rgba(12, 8, 5, 0.78); }
.zoom-viewport {
    position: relative;
    overflow: hidden;
    width: 94vw;
    height: 88vh;
    max-width: 1560px;
    max-height: 1080px;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    transform: scale(0.95);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
    touch-action: none;
    cursor: default;
}
.zoom-lightbox.open .zoom-viewport { transform: scale(1); }
.zoom-img {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    cursor: grab;
    background: #ffffff;
}
.zoom-img.dragging { cursor: grabbing; }
.zoom-lightbox .zoom-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 14, 10, 0.55);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}
.zoom-lightbox .zoom-close:hover { background: rgba(20, 14, 10, 0.85); transform: scale(1.07); }
.zoom-controls {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(20, 14, 10, 0.62);
    color: #ffffff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.zoom-lightbox.open .zoom-controls { opacity: 1; }
.zoom-btn {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease, transform 0.15s ease;
}
.zoom-btn:hover { background: rgba(255, 255, 255, 0.32); transform: scale(1.06); }
.zoom-btn:active { transform: scale(0.94); }
.zoom-pct {
    min-width: 54px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #ffffff;
}
/* Simple fitted lightbox (no pan/zoom) used for the Customize certificate */
.zoom-simple .zoom-controls { display: none; }
.zoom-simple .zoom-viewport {
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zoom-simple .zoom-img {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    max-width: 94vw;
    max-height: 88vh;
    transform: none;
    border-radius: 14px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    background: #ffffff;
    cursor: zoom-out;
}
@media (prefers-reduced-motion: reduce) {
    .zoom-lightbox,
    .zoom-viewport,
    .zoom-controls,
    .zoom-img { transition: none !important; }
}
#legacyPreviewSection.wall-mode .certificate-canvas { display: none; }
#legacyPreviewSection.wall-mode .wall-preview-wrap { display: flex; }

/* Elite studio: swap the interactive editor for the wall view */
.preview-mode-toggle-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-bottom: 0.6rem;
}
#deStudioSection.wall-mode #deEditor,
#deStudioSection.wall-mode .de-actions,
#deStudioSection.wall-mode .de-format-panel,
#deStudioSection.wall-mode #frameOptionsSection { display: none !important; }
#deStudioSection.wall-mode .wall-preview-wrap { display: flex; }

/* Read-only while viewing “On the wall” — the certificate design can't be
   changed (theme presets stay locked). The frame-colour swatches stay live so
   the user can preview the different NB frame colours on the wall. */
#studio.wall-lock .theme-card,
#studio.wall-lock .theme-grid div { pointer-events: none; }

/* The Live Preview box — keeps the certificate dead-center horizontally & vertically.
   Its exact size is set by fitCertificateCanvas() (studio.js) so the certificate
   fills the whole preview at its true 4:5 (portrait) ratio.
   The rules below are the pre-JS fallback and the print sizing. */
.certificate-canvas {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-medium);
    font-family: var(--font-serif);
    color: #1d1d1f;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Prevents scrollbars if the frame gets slightly too large */
    width: var(--preview-w, 100%);
    max-width: 100%;
    height: var(--preview-h, auto);
    margin: 0 auto;           /* center the box in the column */
    box-sizing: border-box;
    aspect-ratio: 4 / 5;      /* portrait — matches the 8×10 certificate */
    padding: 0;               /* full-bleed — certificate extends to the whole box */
}

[data-theme="dark"] .certificate-canvas {
    background-color: #ffffff;
    border-color: var(--border-light);
    box-shadow: var(--shadow-elevated);
}

/* ===== HARVARD-STYLE DIPLOMA CERTIFICATE ===== */
.certificate-wrapper {
    width: 100%;
    height: 100%;
    max-width: 100%; /* Scale up to fit the container */
    max-height: 100%; /* Never overflow the container */
    padding: 36px 40px;
    background-color: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers certificate content vertically (no-frame fix) */
    align-items: center;
    text-align: center;
    overflow: hidden;
    color: #1d1d1f;
    margin: 0 auto;
    box-sizing: border-box;
    transition: max-width 0.3s ease;
}

/* Ornate triple border */
.certificate-wrapper::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid #6B0B22;
    pointer-events: none;
    opacity: 0.5;
}

.certificate-wrapper::after {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px double #6B0B22;
    pointer-events: none;
    opacity: 0.4;
}

/* Certificate watermark logo */
.cert-watermark-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(55%, 280px);
    height: auto;
    opacity: 0.035;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.cert-border-double::before {
    border: 2px solid #6B0B22;
    inset: 5px;
}

.cert-border-double::after {
    border: 1px solid #6B0B22;
    inset: 11px;
    border-style: double;
}

.cert-border-ornate::before {
    border: 1px solid #6B0B22;
    inset: 4px;
}

.cert-border-ornate::after {
    border: 2px solid #6B0B22;
    inset: 9px;
    border-style: groove;
}

[data-theme="dark"] .certificate-wrapper {
    background-color: #ffffff;
    color: #1d1d1f;
}

[data-theme="dark"] .certificate-wrapper::before,
[data-theme="dark"] .certificate-wrapper::after {
    border-color: #6B0B22;
}

/* Corner decorations */
.corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border: 2px solid #6B0B22;
    z-index: 5;
    opacity: 0.5;
}

[data-theme="dark"] .corner {
    border-color: #6B0B22;
}

.corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
.corner-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
.corner-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
.corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; }

.certificate-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

/* Latin Motto */
.cert-motto {
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: #a1a1a6;
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 0.2rem;
}

[data-theme="dark"] .cert-motto {
    color: #a1a1a6;
}

/* Decorative Dividers */
.cert-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 70%;
    margin: 0.25rem auto;
}

.divider-line {
    flex: 1;
    height: 1px;
    background: #6B0B22;
    opacity: 0.3;
}

.divider-ornament {
    font-size: 1.1rem;
    color: #6B0B22;
    opacity: 0.5;
    line-height: 1;
}

/* Large Seal */
.cert-seal-large {
    margin: 0.5rem 0 0.3rem;
}

.seal-svg {
    width: 80px;
    height: 80px;
}

/* Institution Name */
.cert-top {
    margin-bottom: 0;
}

.cert-institution {
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: 8px;
    text-transform: uppercase;
    color: #6B0B22;
}

.cert-department {
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 400;
    margin-top: 0.2rem;
    opacity: 0.8;
    color: #D62828;
}

.cert-body {
    margin: 0.3rem 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.cert-preface {
    font-size: 0.85rem;
    color: #86868b;
    font-style: italic;
    line-height: 1.5;
    max-width: 480px;
}

[data-theme="dark"] .cert-preface {
    color: #86868b;
}

.cert-recipient {
    font-size: 2rem;
    font-weight: 700;
    color: #1d1d1f;
    padding: 0.5rem 1.5rem;
    min-height: 40px;
    letter-spacing: 1px;
    border-bottom: none;
    position: relative;
}

[data-theme="dark"] .cert-recipient {
    color: #1d1d1f;
}

.cert-recipient::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 15%;
    right: 15%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #6B0B22, transparent);
}

[data-theme="dark"] .cert-recipient::after {
    background: linear-gradient(90deg, transparent, #6B0B22, transparent);
}

.cert-degree {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 0.4rem 0;
    border-top: 1px solid #D62828;
    border-bottom: 1px solid #D62828;
    display: inline-block;
    color: #6B0B22;
}

[data-theme="dark"] .cert-degree {
    color: #6B0B22;
    border-color: #D62828;
}

.cert-domain-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.2rem 0;
    flex-wrap: wrap;
}

.cert-domain-label {
    font-size: 0.75rem;
    color: #a1a1a6;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: italic;
}

[data-theme="dark"] .cert-domain-label {
    color: #a1a1a6;
}

.cert-domain {
    color: #ffffff;
    padding: 6px 16px;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    border-radius: 2px;
    display: inline-block;
    background-color: #6B0B22;
}

[data-theme="dark"] .cert-domain {
    background-color: #6B0B22;
}

.cert-notes {
    font-size: 0.8rem;
    color: #a1a1a6;
    max-width: 400px;
    line-height: 1.4;
}

[data-theme="dark"] .cert-notes {
    color: #a1a1a6;
}

/* Signatures */
.cert-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    width: 100%;
}

.signature-block {
    width: 120px;
    text-align: center;
}

.signature-line {
    height: 2px;
    margin-bottom: 6px;
    opacity: 0.6;
    transition: background var(--transition-smooth);
}

.signature-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6B0B22;
}

[data-theme="dark"] .signature-label {
    color: #6B0B22;
}

.signature-title {
    font-size: 0.6rem;
    color: #a1a1a6;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-style: italic;
}

[data-theme="dark"] .signature-title {
    color: #a1a1a6;
}

.signature-seal {
    opacity: 0.5;
}

/* Bottom */
.cert-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    margin-top: 0.3rem;
    width: 100%;
}

.cert-date {
    font-size: 0.7rem;
    color: #86868b;
    letter-spacing: 1px;
    font-style: italic;
}

[data-theme="dark"] .cert-date {
    color: #86868b;
}

.cert-id {
    font-size: 0.6rem;
    color: #a1a1a6;
    letter-spacing: 0.5px;
    font-family: var(--font-sans);
}

[data-theme="dark"] .cert-id {
    color: #a1a1a6;
}

/* ===== PAPER TEXTURES ===== */
.certificate-wrapper.paper-parchment {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(210,190,160,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(210,190,160,0.06) 0%, transparent 50%),
        linear-gradient(135deg, #f5f0e8, #ede4d4, #f0e8d8);
}

.certificate-wrapper.paper-linen {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px, transparent 2px,
            rgba(180,170,160,0.04) 2px, rgba(180,170,160,0.04) 3px,
            transparent 3px, transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px, transparent 2px,
            rgba(180,170,160,0.03) 2px, rgba(180,170,160,0.03) 3px,
            transparent 3px, transparent 6px
        ),
        linear-gradient(135deg, #faf8f5, #f5f2ec);
}

.certificate-wrapper.paper-vellum {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(200,180,150,0.1) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(200,180,150,0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(190,170,140,0.06) 0%, transparent 40%),
        linear-gradient(180deg, #f2ecdc, #ece4d0, #f0e8d6);
    box-shadow: inset 0 0 40px rgba(160,140,110,0.05);
}

[data-theme="dark"] .certificate-wrapper.paper-parchment {
    background:
        radial-gradient(ellipse at 20% 50%, rgba(210,190,160,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(210,190,160,0.04) 0%, transparent 50%),
        linear-gradient(135deg, #f5f0e8, #ede4d4, #f0e8d8);
}

[data-theme="dark"] .certificate-wrapper.paper-linen {
    background:
        repeating-linear-gradient(
            0deg, transparent 0px, transparent 2px,
            rgba(180,170,160,0.03) 2px, rgba(180,170,160,0.03) 3px,
            transparent 3px, transparent 6px
        ),
        repeating-linear-gradient(
            90deg, transparent 0px, transparent 2px,
            rgba(180,170,160,0.02) 2px, rgba(180,170,160,0.02) 3px,
            transparent 3px, transparent 6px
        ),
        linear-gradient(135deg, #faf8f5, #f5f2ec);
}

[data-theme="dark"] .certificate-wrapper.paper-vellum {
    background:
        radial-gradient(ellipse at 30% 40%, rgba(200,180,150,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(200,180,150,0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(190,170,140,0.04) 0%, transparent 40%),
        linear-gradient(180deg, #f2ecdc, #ece4d0, #f0e8d6);
}

/* ===== GOLD FOIL EFFECT ===== */
.gold-foil {
    position: relative;
}

.gold-foil.cert-institution,
.gold-foil.cert-recipient,
.gold-foil.cert-degree,
.gold-foil.cert-domain,
.gold-foil.signature-label,
.gold-foil.cert-motto,
.gold-foil.divider-ornament {
    color: #b8860b !important;
    text-shadow:
        0 0 4px rgba(255,215,0,0.15),
        0 0 12px rgba(255,200,50,0.08);
    background-image: linear-gradient(135deg, #bf9530, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gold-shimmer 4s ease-in-out infinite;
}

.gold-foil.cert-domain {
    border-radius: 2px;
    padding: 6px 16px;
}

.gold-foil.seal-svg,
.gold-foil.signature-seal svg {
    filter: drop-shadow(0 0 3px rgba(255,215,0,0.2));
}

.gold-foil.seal-svg circle,
.gold-foil.seal-svg path,
.gold-foil.seal-svg rect,
.gold-foil.signature-seal circle {
    stroke: #b8860b !important;
}

.gold-foil.seal-svg text,
.gold-foil.signature-seal text {
    fill: #b8860b !important;
}

@keyframes gold-shimmer {
    0%, 100% { background-position: 0% 0%; }
    50% { background-position: 100% 100%; }
}

/* ===== CORNER ORNAMENT STYLES ===== */
.corner-ornament {
    position: absolute;
    z-index: 5;
    pointer-events: none;
    font-size: 1.8rem;
    opacity: 0.35;
    line-height: 1;
}

.corner-ornament-tl { top: 10px; left: 14px; }
.corner-ornament-tr { top: 10px; right: 14px; transform: scaleX(-1); }
.corner-ornament-bl { bottom: 10px; left: 14px; transform: scaleY(-1); }
.corner-ornament-br { bottom: 10px; right: 14px; transform: scale(-1, -1); }

.corner-flourish {
    display: inline-block;
    font-size: 1.6rem;
}

/* Corner override: no corners */
.corner-none .corner,
.corner-none .corner-ornament {
    display: none !important;
}

/* ===== FILIGREE PATTERNS ===== */
.cert-filigree {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.2;
}

.filigree-border-top,
.filigree-border-bottom {
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    letter-spacing: 6px;
}

.filigree-border-top {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
}

.filigree-border-bottom {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
}

.cert-filigree-subtle .filigree-border-top,
.cert-filigree-subtle .filigree-border-bottom {
    gap: 0;
    font-size: 0.5rem;
    letter-spacing: 8px;
    opacity: 0.5;
}

.cert-filigree-subtle .filigree-border-top {
    top: 12px;
}
.cert-filigree-subtle .filigree-border-bottom {
    bottom: 12px;
}

.cert-filigree-ornate .filigree-border-top,
.cert-filigree-ornate .filigree-border-bottom {
    font-size: 0.75rem;
    letter-spacing: 8px;
    gap: 4px;
    opacity: 0.25;
}

.cert-filigree-ornate .filigree-border-top {
    top: 12px;
}
.cert-filigree-ornate .filigree-border-bottom {
    bottom: 12px;
}

.cert-filigree-geometric .filigree-border-top,
.cert-filigree-geometric .filigree-border-bottom {
    font-size: 0.7rem;
    letter-spacing: 6px;
    gap: 2px;
    opacity: 0.2;
}

.cert-filigree-geometric .filigree-border-top {
    top: 14px;
}
.cert-filigree-geometric .filigree-border-bottom {
    bottom: 14px;
}

/* ===== PICTURE FRAME (separate overlay — keeps the certificate full-size and
   excludes the frame from the print capture) ===== */
.frame-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border: 14px solid #4a2c11; /* default walnut */
    border-radius: 2px;
    box-shadow:
        inset 0 0 0 6px #f7f5f0,       /* cream mat */
        inset 0 0 0 7px #d8d2c4,       /* mat inner edge */
        inset 0 0 0 8px rgba(0, 0, 0, 0.05);
}

.frame-overlay[data-wood="black"]      { border-color: #2b1808; }
.frame-overlay[data-wood="white"]      { border-color: #e8e2d8; }
.frame-overlay[data-wood="brown"]      { border-color: #8e6a3d; }
.frame-overlay[data-wood="silver"]     { border-color: #b0b0b8; }
.frame-overlay[data-wood="light grey"] { border-color: #d0d0d0; }
.frame-overlay[data-wood="dark grey"]  { border-color: #404048; }

/* Preview container split */
.preview-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
}

.certificate-canvas-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.certificate-canvas-inner > * {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The certificate is an inline-styled block that fills the preview box, so it must
   center its own content vertically (fixes the no-frame "aligned to top" issue).
   .frame-outer is excluded — it is centered by the flexbox chain instead. */
#certCanvasInner > * {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ===== SPEC-RENDERED CERTIFICATE THEMES (Classic & Gold, Art Deco) =====
   The certificate is painted by Fabric at its native 1600x2000 (4:5) print
   resolution and CSS-scaled down, so what you see is exactly what prints. */
.cert-render-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cert-render-canvas {
    display: block;
    /* Absolute positioning (not flex sizing): a <canvas> carries a 1600x2000
       intrinsic size, and as a flex item its automatic minimum size would stop
       it shrinking into the preview box. inset:0 fits it to the wrapper.
       The !important flags are required because Fabric writes the canvas's
       native pixel size into an inline style attribute. */
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff;
}

/* ===== AUTH SYSTEM ===== */
.auth-btn {
    padding: 6px 16px;
    border: 1px solid var(--deep-maroon);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--deep-maroon);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.auth-btn:hover {
    background: var(--deep-maroon);
    color: #ffffff;
}

[data-theme="dark"] .auth-btn {
    border-color: var(--bright-scarlet);
    color: var(--bright-scarlet-light);
}

[data-theme="dark"] .auth-btn:hover {
    background: var(--bright-scarlet);
    color: #ffffff;
}

.admin-panel-btn {
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: all var(--transition-fast);
    margin-right: 8px;
}

.admin-panel-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
}

/* Auth Overlay */
.auth-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

.auth-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 2rem;
    width: 400px;
    max-width: 90vw;
    position: relative;
    box-shadow: var(--shadow-elevated);
    border: 1px solid var(--border-subtle);
    animation: slideInUp 0.3s ease;
}

.auth-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-tertiary);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color var(--transition-fast);
}

.auth-close:hover {
    color: var(--text-primary);
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--deep-maroon);
    margin-bottom: 1.25rem;
}

[data-theme="dark"] .auth-brand {
    color: var(--bright-scarlet);
}

.auth-brand-logo {
    width: 32px;
    height: auto;
    display: block;
}

.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.25rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.auth-tab {
    flex: 1;
    padding: 0.6rem 1rem;
    border: none;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.auth-tab.active {
    background: var(--deep-maroon);
    color: #ffffff;
}

[data-theme="dark"] .auth-tab.active {
    background: var(--bright-scarlet);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.auth-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.auth-form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.auth-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.auth-input:focus {
    outline: none;
    border-color: var(--deep-maroon);
    box-shadow: 0 0 0 2px rgba(107, 11, 34, 0.1);
}

[data-theme="dark"] .auth-input:focus {
    border-color: var(--bright-scarlet);
    box-shadow: 0 0 0 2px rgba(214, 40, 40, 0.15);
}

.auth-error {
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 500;
}

.auth-submit {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
    margin-top: 0.25rem;
}

.auth-submit:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(214, 40, 40, 0.3);
}

.guest-btn {
    background: var(--bg-secondary) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-light) !important;
    margin-top: 0;
    font-weight: 600;
}

.guest-btn:hover {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    transform: scale(1.02);
    box-shadow: none !important;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0;
    color: var(--text-tertiary);
    font-size: 0.8rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-light);
}

.google-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.google-btn-wrapper iframe {
    border-radius: 8px !important;
}

.auth-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #16a34a;
    font-weight: 500;
}

[data-theme="dark"] .auth-benefits {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

/* ===== BILLING / CHECKOUT PANEL ===== */
.billing-panel {
    background: linear-gradient(135deg, #0f0f13 0%, #1a1a24 100%);
    color: #e8e8e8;
    min-height: 100vh;
}

.billing-panel.active.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

[data-theme="light"] .billing-panel {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: #1d1d1f;
}

.billing-header {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 2rem 0;
    width: 100%;
    box-sizing: border-box;
}

.billing-header .back-button {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #a1a1a6;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-family: inherit;
    transition: all 0.2s;
}

[data-theme="light"] .billing-header .back-button {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.billing-header .back-button:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.billing-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
}

.billing-brand {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #8b8b9e;
    text-transform: uppercase;
    background: rgba(255,255,255,0.06);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
}

[data-theme="light"] .billing-brand {
    background: rgba(0,0,0,0.05);
    color: var(--text-tertiary);
}

.billing-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

[data-theme="light"] .billing-title {
    color: var(--text-primary);
}

.billing-layout {
    max-width: 1000px;
    margin: 1.5rem auto;
    padding: 0 2rem 2rem;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

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

.billing-section-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1.5rem;
}

[data-theme="light"] .billing-section-card {
    background: #ffffff;
    border-color: var(--border-light);
    box-shadow: var(--shadow-light);
}

.billing-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.25rem;
}

[data-theme="light"] .billing-section-title {
    color: var(--text-primary);
}

.billing-section-sub {
    font-size: 0.8rem;
    color: #8b8b9e;
    margin: 0 0 1.25rem;
}

[data-theme="light"] .billing-section-sub {
    color: var(--text-tertiary);
}

.billing-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.85rem;
    flex: 1;
}

.billing-field label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #b0b0c0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

[data-theme="light"] .billing-field label {
    color: var(--text-secondary);
}

.billing-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.billing-input:focus {
    border-color: #4f8cff;
}

[data-theme="light"] .billing-input {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-primary);
}

.billing-input::placeholder {
    color: #6b6b7a;
}

[data-theme="light"] .billing-input::placeholder {
    color: var(--text-tertiary);
}

.billing-input option {
    background: #1a1a24;
    color: #fff;
}

.billing-row {
    display: flex;
    gap: 0.85rem;
}

/* Order Summary */
.billing-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.billing-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

[data-theme="light"] .billing-item {
    border-bottom-color: var(--border-subtle);
}

.billing-item:last-child {
    border-bottom: none;
}

.billing-item-left {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.billing-item-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e8e8e8;
}

[data-theme="light"] .billing-item-name {
    color: var(--text-primary);
}

.billing-item-desc {
    font-size: 0.72rem;
    color: #8b8b9e;
}

[data-theme="light"] .billing-item-desc {
    color: var(--text-tertiary);
}

.billing-item-price {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

[data-theme="light"] .billing-item-price {
    color: var(--deep-maroon);
}

.billing-totals {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[data-theme="light"] .billing-totals {
    border-top-color: var(--border-light);
}

.billing-total-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #b0b0c0;
}

[data-theme="light"] .billing-total-row {
    color: var(--text-secondary);
}

.billing-total-row-final {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin-top: 0.25rem;
}

[data-theme="light"] .billing-total-row-final {
    color: var(--deep-maroon);
    border-top-color: var(--border-light);
}

.billing-place-order {
    width: 100%;
    padding: 0.85rem;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #3a8c3c, #2d7a2f);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    margin-top: 1rem;
}

.billing-place-order:hover {
    background: linear-gradient(135deg, #45a049, #358438);
    transform: scale(1.01);
}

.billing-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    color: #6b6b7a;
    margin-top: 0.75rem;
    text-align: center;
}

[data-theme="light"] .billing-secure-note {
    color: var(--text-tertiary);
}

.billing-secure-note svg {
    opacity: 0.5;
    flex-shrink: 0;
}

/* Shipping Method Options */
.billing-shipping-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.shipping-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255,255,255,0.03);
}

[data-theme="light"] .shipping-option {
    border-color: var(--border-light);
    background: rgba(0,0,0,0.02);
}

.shipping-option:hover {
    border-color: rgba(107,11,34,0.3);
    background: rgba(107,11,34,0.05);
}

.shipping-option-selected {
    border-color: var(--deep-maroon) !important;
    background: rgba(107,11,34,0.08) !important;
}

.shipping-option input[type="radio"] {
    accent-color: var(--deep-maroon);
    flex-shrink: 0;
}

.shipping-option-info {
    flex: 1;
    min-width: 0;
}

.shipping-option-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.shipping-option-time {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.shipping-option-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Stripe Card Element */
.billing-card-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

[data-theme="light"] .billing-card-section {
    border-top-color: var(--border-light);
}

.billing-card-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #b0b0c0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}

[data-theme="light"] .billing-card-label {
    color: var(--text-secondary);
}

.billing-card-element {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    transition: border-color 0.2s;
}

.billing-card-element:focus-within {
    border-color: #4f8cff;
}

[data-theme="light"] .billing-card-element {
    background: var(--bg-secondary);
    border-color: var(--border-light);
}

.billing-card-error {
    font-size: 0.8rem;
    color: #ef4444;
    margin-top: 0.4rem;
}

.billing-place-order:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* TEMPORARY dev-only test-order button */
.billing-test-order {
    width: 100%;
    padding: 0.7rem;
    margin-top: 0.6rem;
    border: 1px dashed #d4a017;
    border-radius: 8px;
    background: rgba(212, 160, 23, 0.08);
    color: #d4a017;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.billing-test-order:hover {
    background: rgba(212, 160, 23, 0.18);
}

.billing-test-order:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.billing-test-note {
    margin-top: 0.4rem;
    text-align: center;
    font-size: 0.68rem;
    color: #d4a017;
    opacity: 0.85;
}

.auth-hint-link {
    color: var(--deep-maroon);
    text-decoration: underline;
    cursor: pointer;
}

[data-theme="dark"] .auth-hint-link {
    color: var(--bright-scarlet-light);
}

/* ===== VAULT PANEL ===== */
.vault-header {
    margin-bottom: 3rem;
    text-align: center;
}

.vault-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    margin-bottom: 0.5rem;
}

.vault-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
}

.vault-content {
    background-color: var(--bg-secondary);
    border-radius: 18px;
    padding: 60px 40px;
    text-align: center;
    transition: background-color var(--transition-smooth);
}

.vault-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.vault-empty-icon {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary);
    opacity: 0.5;
}

.vault-empty {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

/* ===== FOOTER ===== */
.site-footer {
    border-top: 1px solid var(--border-subtle);
    background-color: var(--bg-secondary);
    padding: 40px 24px 24px;
    margin-top: 4rem;
    transition: background-color var(--transition-smooth), border-color var(--transition-smooth);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.08), rgba(214, 40, 40, 0.05));
    transition: all var(--transition-smooth);
}

[data-theme="dark"] .footer-logo-wrapper {
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.15), rgba(255, 59, 59, 0.08));
}

.site-footer:hover .footer-logo-wrapper {
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.14), rgba(214, 40, 40, 0.08));
    box-shadow: 0 0 20px rgba(107, 11, 34, 0.12);
}

[data-theme="dark"] .site-footer:hover .footer-logo-wrapper {
    box-shadow: 0 0 20px rgba(255, 59, 59, 0.15);
}

.footer-logo-svg {
    width: 34px;
    height: auto;
    object-fit: contain;
    display: block;
}

.footer-brand-text-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-brand-text {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--deep-maroon);
    transition: color var(--transition-smooth);
}

[data-theme="dark"] .footer-brand-text {
    color: var(--bright-scarlet-light);
}

.footer-brand-tagline {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 1px;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.footer-links {
    display: flex;
    gap: 2rem;
}

.footer-link {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover {
    color: var(--deep-maroon);
}

[data-theme="dark"] .footer-link:hover {
    color: var(--bright-scarlet-light);
}

.footer-copyright {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
}

/* ===== PRINT STYLES ===== */
@media print {
    body {
        background: white;
        padding: 0;
    }

    .header,
    .studio-header,
    .studio-form-section,
    .preview-label,
    .back-button,
    .site-footer {
        display: none !important;
    }

    .main-container {
        padding: 0;
        margin: 0;
    }

    .studio-container {
        display: block;
        gap: 0;
        min-height: auto;
        grid-template-columns: none;
    }

    .studio-preview-section {
        width: 100%;
    }

    .certificate-canvas {
        width: 100%;
        height: auto;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        min-height: auto;
        border-radius: 0;
        background-color: white;
    }

    .certificate-wrapper {
        padding: 30px 36px;
    }

    @page {
        size: letter;
        margin: 0.5in;
    }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .main-container {
        padding: 88px 16px 32px;
    }

    .s-hero {
        flex-direction: column-reverse;
        gap: 2rem;
        padding: 0 0 2rem;
        text-align: center;
    }

    .s-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .s-hero-title {
        font-size: 2.3rem;
        letter-spacing: -0.8px;
    }

    .s-hero-sub {
        max-width: 100%;
    }

    .s-hero-actions {
        justify-content: center;
    }

    .s-hero-image-frame {
        max-width: 300px;
    }

    .s-vision-grid {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .s-steps {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .s-step {
        max-width: 320px;
    }

    .s-step-arrow {
        transform: rotate(90deg);
        margin-top: 0;
    }

    .s-section-title {
        font-size: 1.8rem;
    }

    .s-products-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .s-cta-banner {
        padding: 3rem 1.5rem;
    }

    .s-cta-banner-title {
        font-size: 1.6rem;
    }

    .studio-title {
        font-size: 1.5rem;
    }

    .studio-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        min-height: auto;
    }

    .nav-links {
        gap: 0.75rem;
    }

    .nav-link {
        font-size: 0.75rem;
    }

    .certificate-canvas {
        min-height: 400px;
        padding: 20px;
    }

    /* Thinner frame overlay on small screens */
    .frame-overlay {
        border-width: 10px;
    }

    .cert-title {
        font-size: 1.2rem;
    }

    .cert-recipient {
        font-size: 1.2rem;
    }

    .cert-domain {
        font-size: 0.9rem;
        max-width: 90%;
    }

    .footer-links {
        gap: 1.25rem;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .header-container {
        padding: 0 12px;
    }

    .logo-icon-wrapper {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .logo-svg {
        width: 24px;
        height: auto;
    }

    .logo-text {
        font-size: 0.9rem;
        letter-spacing: 3px;
    }

    .logo-tagline {
        display: none;
    }

    .nav-links {
        gap: 0.4rem;
    }

    .nav-link {
        font-size: 0.65rem;
    }

    .dark-mode-toggle {
        width: 32px;
        height: 32px;
    }

    .dark-mode-toggle svg {
        width: 16px;
        height: 16px;
    }

    .main-container {
        padding: 72px 12px 24px;
    }

    .s-hero-title {
        font-size: 1.8rem;
    }

    .s-hero-image-frame {
        max-width: 220px;
    }

    .s-section-title {
        font-size: 1.5rem;
    }

    .s-products-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    .sig-actions {
        flex-direction: column;
    }

    .btn-export,
    .btn-print {
        width: 100%;
    }

    .footer-container {
        gap: 1rem;
    }

    .footer-links {
        gap: 1rem;
    }
}

/* ===== MOBILE NAVIGATION MENU ===== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast);
}

.hamburger:hover {
    background: var(--bg-tertiary);
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-light);
    padding: 0.5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-link {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    letter-spacing: 0.3px;
}

.mobile-link::after {
    display: none;
}

.mobile-link.active,
.mobile-link:hover {
    background: var(--bg-tertiary);
    color: var(--deep-maroon);
}

[data-theme="dark"] .mobile-link.active,
[data-theme="dark"] .mobile-link:hover {
    color: var(--bright-scarlet-light);
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .mobile-menu {
        display: block;
    }
}

/* ===== COOKIE CONSENT BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--bg-card, #15151d);
    border-top: 1px solid var(--border, rgba(255,255,255,0.06));
    padding: 0.8rem 1.2rem;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

[data-theme="light"] .cookie-banner {
    background: #fff;
    border-top-color: #e0e0e0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

.cookie-banner-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 240px;
}

.cookie-banner-text strong {
    font-size: 0.85rem;
    color: var(--text-primary);
}

.cookie-banner-text p {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0.2rem 0 0;
    line-height: 1.4;
}

.cookie-accept-btn {
    flex-shrink: 0;
    padding: 0.55rem 1.4rem;
    border-radius: 6px;
    border: none;
    background: var(--deep-maroon, #6B0B22);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.cookie-accept-btn:hover {
    opacity: 0.9;
}

/* ===== INTERACTIVE FABRIC STUDIO (DED) ===== */
.de-studio-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    /* Don't cap the editor's height: the format panel sits BELOW the canvas,
       so its expansion must never squeeze/shrink (and clip) the certificate
       or its picture frame. */
    max-height: none !important;
}

.de-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.de-tool-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-sans);
}
.de-tool-btn:hover { border-color: var(--deep-maroon); color: var(--deep-maroon); }
.de-tool-btn.active { border-color: var(--deep-maroon); background: rgba(107,11,34,0.06); color: var(--deep-maroon); }
.de-remove-btn { border-color: rgba(214,40,40,0.4); color: var(--bright-scarlet); }
.de-remove-btn:hover { border-color: var(--bright-scarlet); background: rgba(214,40,40,0.08); color: var(--bright-scarlet); }
[data-theme="dark"] .de-remove-btn { color: var(--bright-scarlet-light); }
[data-theme="dark"] .de-remove-btn:hover { background: rgba(224,112,122,0.12); color: var(--bright-scarlet-light); }

/* Elite editor: background colour wheel */
.de-bg-row { display: flex; align-items: center; gap: 10px; }
.de-bg-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.15);
    transition: transform .15s, border-color .15s;
}
.de-bg-swatch:hover { transform: scale(1.08); border-color: var(--deep-maroon); }
[data-theme="dark"] .de-bg-swatch:hover { border-color: var(--bright-scarlet); }

.de-color-popover {
    position: fixed;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-elevated);
    width: 210px;
}
.de-color-popover.hidden { display: none; }
.de-color-wheel {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    cursor: crosshair;
    touch-action: none;
}
.de-color-controls { display: flex; align-items: center; gap: 8px; width: 100%; }
.de-color-value {
    flex: 1 1 auto;
    -webkit-appearance: none;
    appearance: none;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, #000, #fff);
    outline: none;
    cursor: pointer;
}
.de-color-value::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
}
.de-color-value::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 2px solid var(--border-light);
    cursor: pointer;
}
.de-color-hex {
    width: 72px;
    padding: 5px 6px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-family: var(--font-sans);
    text-transform: lowercase;
}

/* Studio: "Don't have a domain? Get one here" upsell */
.studio-domain-upsell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 14px;
    border: 1.5px dashed rgba(214, 40, 40, 0.55);
    border-radius: 999px;
    background: rgba(214, 40, 40, 0.06);
    color: var(--deep-maroon);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    /* soft expanding "radar ping" glow */
    animation: dee-upsell-ping 2.4s ease-out infinite;
}
.studio-domain-upsell:hover {
    transform: translateY(-1px);
    background: rgba(214, 40, 40, 0.12);
    border-style: solid;
    border-color: var(--bright-scarlet);
    box-shadow: 0 6px 18px rgba(214, 40, 40, 0.25);
}
[data-theme="dark"] .studio-domain-upsell {
    color: var(--bright-scarlet-light);
    background: rgba(224, 112, 122, 0.08);
    border-color: rgba(224, 112, 122, 0.5);
}
[data-theme="dark"] .studio-domain-upsell:hover {
    background: rgba(224, 112, 122, 0.16);
    border-color: var(--bright-scarlet-light);
    box-shadow: 0 6px 18px rgba(224, 112, 122, 0.25);
}

/* shimmering accent text */
.studio-domain-upsell-accent {
    color: var(--deep-maroon); /* fallback if clip-text is unsupported */
    background: linear-gradient(90deg, var(--deep-maroon), var(--bright-scarlet), var(--deep-maroon));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    animation: dee-upsell-shimmer 2.6s linear infinite;
}
[data-theme="dark"] .studio-domain-upsell-accent {
    color: var(--bright-scarlet-light);
    background: linear-gradient(90deg, var(--bright-scarlet-light), #ffb3b8, var(--bright-scarlet-light));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* nudging down-arrow */
.studio-domain-upsell-arrow {
    flex-shrink: 0;
    color: var(--bright-scarlet);
    animation: dee-upsell-nudge 1.6s ease-in-out infinite;
}
[data-theme="dark"] .studio-domain-upsell-arrow { color: var(--bright-scarlet-light); }

@keyframes dee-upsell-shimmer {
    to { background-position: 200% center; }
}
@keyframes dee-upsell-nudge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}
@keyframes dee-upsell-ping {
    0% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0.35); }
    70% { box-shadow: 0 0 0 9px rgba(214, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 40, 40, 0); }
}

.de-canvas-wrap {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    border-radius: var(--radius-premium);
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    overflow: hidden;
}
.de-canvas-wrap canvas {
    border-radius: 4px;
    box-shadow: var(--shadow-elevated);
    max-width: 100%;
    max-height: 100%;
}

/* Gray checkerboard box labelled "QR", pinned to the top-left corner of the
   editor canvas at the exact spot AND real physical size of the claim QR code
   (~11% of canvas width). Editor-only overlay — never rendered into the
   certificate. On hover it morphs (expands) into a card explaining why the QR
   is on the certificate. */
.de-canvas-wrap .canvas-container { position: relative; }

.de-qr-hint {
    position: absolute;
    top: 6%;
    left: 6%;
    width: 11%;
    aspect-ratio: 1 / 1;
    z-index: 5;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: width 0.35s ease, aspect-ratio 0.35s ease, border-radius 0.35s ease;
    background-color: #ededed;
    background-image:
        linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%),
        linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%);
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
}
.de-qr-hint-label {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.62);
    white-space: nowrap;
    transition: height 0.35s ease, flex-basis 0.35s ease;
}
.de-qr-hint-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.74rem;
    line-height: 1.5;
    color: #1d1d1f;
    padding: 0 14px;
    transition: max-height 0.35s ease, opacity 0.35s ease 0.12s, padding 0.35s ease;
}
.de-qr-hint:hover {
    width: min(340px, calc(100% - 28px));
    aspect-ratio: auto;
    border-radius: 10px;
}
.de-qr-hint:hover .de-qr-hint-label {
    flex: 0 0 34px;
    height: 34px;
}
.de-qr-hint:hover .de-qr-hint-body {
    max-height: 340px;
    opacity: 1;
    padding: 10px 14px 12px;
}
.de-qr-hint-body strong {
    display: block;
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}
.de-qr-hint-body p {
    margin: 0 0 6px;
}

/* Legacy (Essential/Premium) QR preview — the same checkered "QR" box as the
   Elite editor, morphing into an explanation card on hover. Preview-only: the
   real scannable QR replaces it at checkout, so this never reaches the print. */
.cert-qr-hint {
    position: absolute;
    z-index: 6;
    width: 44px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: width 0.35s ease, aspect-ratio 0.35s ease, border-radius 0.35s ease;
    background-color: #ededed;
    background-image:
        linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%),
        linear-gradient(45deg, #c8c8c8 25%, transparent 25%, transparent 75%, #c8c8c8 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
}
.cert-qr-hint--lg { width: 48px; }
.cert-qr-hint-label {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.62);
    white-space: nowrap;
    transition: height 0.35s ease, flex-basis 0.35s ease;
}
.cert-qr-hint-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background: #ffffff;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    line-height: 1.45;
    color: #1d1d1f;
    padding: 0 10px;
    transition: max-height 0.35s ease, opacity 0.35s ease 0.12s, padding 0.35s ease;
}
.cert-qr-hint:hover {
    width: 220px;
    aspect-ratio: auto;
    border-radius: 8px;
}
.cert-qr-hint:hover .cert-qr-hint-label {
    flex: 0 0 30px;
    height: 30px;
}
.cert-qr-hint:hover .cert-qr-hint-body {
    max-height: 320px;
    opacity: 1;
    padding: 8px 10px 10px;
}
.cert-qr-hint-body strong {
    display: block;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.cert-qr-hint-body p {
    margin: 0 0 5px;
}

.de-format-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-premium);
    background: var(--bg-card);
}
.de-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.de-text-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.de-select, .de-num {
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: var(--font-sans);
}
.de-num { width: 70px; }
.de-text-controls input[type="color"] {
    width: 40px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}
.de-text-controls input[type="range"] { flex: 1 1 120px; min-width: 90px; }
.de-format-btn { width: 36px; height: 34px; padding: 0; }
.de-size-stepper { display: inline-flex; align-items: center; gap: 4px; }
.de-size-btn { width: 30px; height: 34px; padding: 0; font-weight: 700; }
.de-size-stepper .de-select { width: 62px; }
.de-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.de-chip {
    padding: 6px 12px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all .15s;
    font-family: var(--font-sans);
}
.de-chip:hover { border-color: var(--deep-maroon); color: var(--deep-maroon); }
.de-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* "Add text" dropdown (Elite editor) */
.de-text-add { position: relative; }
.de-text-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding: 6px;
    gap: 2px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-premium);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.de-text-menu button {
    text-align: left;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.8rem;
    font-family: var(--font-sans);
    cursor: pointer;
    border-radius: 8px;
}
.de-text-menu button:hover { background: rgba(107,11,34,0.08); color: var(--deep-maroon); }
[data-theme="dark"] .de-text-menu button:hover { background: rgba(224,112,122,0.12); color: var(--bright-scarlet-light); }

/* Signature pad (Elite editor) */
.de-signature-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(10, 8, 12, 0.5);
    backdrop-filter: blur(2px);
}
.de-signature-modal.hidden { display: none; }
.de-signature-box {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-premium);
    box-shadow: var(--shadow-elevated);
}
.de-signature-header { display: flex; align-items: center; justify-content: space-between; }
.de-signature-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); font-family: var(--font-sans); }
.de-signature-close {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
.de-signature-close:hover { color: var(--deep-maroon); }
.de-signature-hint { margin: 0; font-size: 0.78rem; color: var(--text-secondary); font-family: var(--font-sans); }
.de-signature-pad {
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    overflow: hidden;
    background:
        /* clear dashed baseline where the user writes (CSS-only, never exported) */
        repeating-linear-gradient(90deg, rgba(90, 100, 135, 0.55) 0 10px, transparent 10px 20px) center bottom 34px / 88% 2px no-repeat,
        /* faint vertical grid */
        repeating-linear-gradient(90deg, rgba(120, 130, 160, 0.07) 0 1px, transparent 1px 40px),
        #fff;
}
.de-signature-pad canvas {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
    cursor: crosshair;
}
.de-signature-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* "Remove signature" — subtle destructive link-style button for classic tiers */
.de-sig-remove {
    background: transparent;
    color: var(--bright-scarlet);
    border-color: rgba(214, 40, 40, 0.4);
    font-weight: 500;
}
.de-sig-remove:hover { border-color: var(--bright-scarlet); background: rgba(214, 40, 40, 0.08); color: var(--bright-scarlet); }
[data-theme="dark"] .de-sig-remove { color: var(--bright-scarlet-light); }
[data-theme="dark"] .de-sig-remove:hover { background: rgba(224, 112, 122, 0.12); color: var(--bright-scarlet-light); }

/* Frame colour picker — sits under the editor's Restore Last button (Elite). */
.de-frame-options {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-premium);
    background: var(--bg-card);
}
.de-frame-options .de-label {
    margin: 0;
    white-space: nowrap;
}
.de-frame-options select {
    flex: 1;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-family: var(--font-sans);
}

/* ============================================
   CLAIM PAGE / DOMAIN RECEIVED SCREEN
   ============================================ */
.claim-container {
    max-width: 560px;
    margin: 1.5rem auto 2rem;
    padding: 2rem 1.75rem 2.25rem;
    text-align: center;
    position: relative;
    border-radius: 20px;
    border: 1px solid rgba(107, 11, 34, 0.14);
    background: linear-gradient(180deg, rgba(107, 11, 34, 0.05), rgba(107, 11, 34, 0.015));
    box-shadow: 0 24px 60px -28px rgba(107, 11, 34, 0.35);
    backdrop-filter: blur(4px);
}

.claim-back {
    display: inline-block;
    margin-top: 1.5rem;
    color: var(--deep-maroon);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.claim-back:hover { opacity: 1; }

/* Claim entry form — matches the celebration screen's polished look */
.claim-form-card {
    animation: claimPop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.claim-received-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 0.4rem;
}
.claim-received-icon svg {
    width: 52px;
    height: 52px;
    padding: 10px;
    border-radius: 50%;
    background: rgba(107, 11, 34, 0.08);
    box-shadow: 0 10px 30px -12px rgba(107, 11, 34, 0.5);
}
.claim-received-title {
    margin: 0.25rem 0 0.6rem;
    font-size: 1.65rem;
    letter-spacing: -0.01em;
}
.claim-domain-pill {
    display: inline-block;
    margin: 0 0 1rem;
    padding: 0.3em 1em;
    border-radius: 30px;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, #6b0b22, #a4233f);
    box-shadow: 0 6px 22px -8px rgba(107, 11, 34, 0.55);
}
.claim-form-intro {
    color: var(--text-secondary);
    margin: 0 0 1.25rem;
    line-height: 1.5;
    font-size: 0.95rem;
}
.claim-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font-size: 0.95rem;
    margin-bottom: 0.65rem;
    box-sizing: border-box;
    font-family: var(--font-sans);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.claim-input:focus {
    outline: none;
    border-color: var(--deep-maroon);
    box-shadow: 0 0 0 3px rgba(107, 11, 34, 0.15);
}
#claimRegistry { text-transform: uppercase; }
.claim-submit-btn {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: none;
    background: var(--deep-maroon);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.2rem;
    font-family: var(--font-sans);
    transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 10px 26px -12px rgba(107, 11, 34, 0.6);
}
.claim-submit-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.claim-submit-btn:active { transform: translateY(0); }
.claim-error-msg {
    color: var(--danger);
    font-size: 0.85rem;
    margin-top: 0.65rem;
}
.claim-field-hint {
    margin: -0.3rem 0 0.9rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: left;
}
/* The second hint line under the preferred-email field: shown only when the
   filter removed characters, so the field never silently swallows input. */
.claim-field-hint.claim-field-warn {
    margin: 0 0 0.9rem;
    color: var(--danger);
}
.claim-section-label {
    margin: 0.9rem 0 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-align: left;
}
.claim-optional {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-tertiary, #8b8b9e);
    font-size: 0.7rem;
}
.claim-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.claim-field-row .claim-input { margin-bottom: 0.65rem; }

/* Big celebratory card shown after a successful claim */
.claim-success {
    position: relative;
    animation: claimPop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes claimPop {
    from { opacity: 0; transform: scale(0.9) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animated gradient ring around the domain name */
.claim-domain {
    display: inline-block;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.25rem 0 0.5rem;
    padding: 0.1em 0.5em;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6b0b22, #a4233f, #d4a017, #6b0b22);
    background-size: 300% 300%;
    animation: claimGradient 6s ease infinite, claimGlow 3s ease-in-out infinite;
    box-shadow: 0 8px 30px -10px rgba(107, 11, 34, 0.6);
}
@keyframes claimGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes claimGlow {
    0%, 100% { box-shadow: 0 8px 30px -10px rgba(107, 11, 34, 0.6); }
    50%      { box-shadow: 0 8px 42px -8px rgba(212, 160, 23, 0.55); }
}

.claim-eyebrow {
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.claim-subtitle {
    color: var(--text-secondary);
    font-size: 0.98rem;
    margin: 0.4rem 0 1.2rem;
    line-height: 1.5;
}

/* Animated checkmark */
.claim-check {
    width: 92px;
    height: 92px;
    margin: 0.25rem auto 0.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.claim-check .check-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: var(--deep-maroon);
    border-right-color: #d4a017;
    animation: claimSpin 1.1s linear infinite;
}
@keyframes claimSpin { to { transform: rotate(360deg); } }
.claim-check .check-svg {
    width: 64px;
    height: 64px;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 6px 16px rgba(107, 11, 34, 0.35));
}
.claim-check .check-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: claimStroke 0.7s 0.25s ease forwards;
}
.claim-check .check-mark {
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: claimStroke 0.45s 0.75s ease forwards;
}
@keyframes claimStroke { to { stroke-dashoffset: 0; } }

/* ResellerClub "your new account" card */
.claim-account-card {
    margin: 1.1rem 0 0;
    padding: 1.15rem 1.25rem;
    border-radius: 14px;
    text-align: left;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(212, 160, 23, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: claimSlideUp 0.6s 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes claimSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.claim-account-card h4 {
    margin: 0 0 0.85rem;
    font-size: 0.9rem;
    letter-spacing: 0.4px;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #d4a017;
}
.claim-cred-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.42rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.claim-cred-row:last-child { border-bottom: none; }
.claim-cred-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
    min-width: 78px;
    text-align: left;
}
.claim-cred-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.82rem;
    word-break: break-all;
    color: var(--text-primary);
    flex: 1;
    text-align: right;
}
.claim-copy-btn {
    flex-shrink: 0;
    background: rgba(212, 160, 23, 0.14);
    color: #d4a017;
    border: 1px solid rgba(212, 160, 23, 0.4);
    border-radius: 6px;
    padding: 0.22rem 0.6rem;
    font-size: 0.72rem;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease;
}
.claim-copy-btn:hover { background: rgba(212, 160, 23, 0.28); transform: translateY(-1px); }
.claim-copy-btn.copied { color: #3ecf8e; border-color: rgba(62, 207, 142, 0.5); background: rgba(62, 207, 142, 0.12); }

/* Step-by-step handoff instructions */
.claim-steps {
    margin: 1.15rem 0 0;
    text-align: left;
    padding: 0.35rem 0 0;
}
.claim-steps .step {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.5rem 0;
    opacity: 0;
    animation: claimFadeStep 0.5s ease forwards;
}
.claim-steps .step:nth-child(1) { animation-delay: 0.9s; }
.claim-steps .step:nth-child(2) { animation-delay: 1.05s; }
.claim-steps .step:nth-child(3) { animation-delay: 1.2s; }
@keyframes claimFadeStep {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
.claim-steps .step-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--deep-maroon);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.claim-steps .step p { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-primary); }
.claim-steps .step small { color: var(--text-secondary); font-size: 0.78rem; line-height: 1.4; display: block; }

/* Test-mode note */
.claim-test-note {
    margin: 1.1rem 0 0;
    padding: 0.7rem 0.9rem;
    border-radius: 10px;
    text-align: left;
    font-size: 0.8rem;
    background: rgba(214, 40, 40, 0.08);
    border: 1px solid rgba(214, 40, 40, 0.28);
    color: var(--danger);
    animation: claimSlideUp 0.6s 0.6s both;
}

/* Registrant verification notice — shown on the claim form and again on the
   success card, because the transfer does not complete without it. Gold-tinted
   so it reads as an instruction rather than an error. */
.claim-verify-note {
    text-align: left;
    margin: 0 0 1.15rem;
    padding: 0.9rem 1.05rem;
    border-radius: 12px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
    background: rgba(212, 160, 23, 0.1);
    border: 1px solid rgba(212, 160, 23, 0.38);
}
.claim-verify-note > strong {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.86rem;
    color: #8a6a12;
}
[data-theme="dark"] .claim-verify-note > strong { color: #e0b64a; }
.claim-verify-note ol {
    margin: 0.45rem 0 0;
    padding-left: 1.15rem;
}
.claim-verify-note li { margin: 0.3rem 0; }
.claim-verify-note p { margin: 0.45rem 0 0; }

/* Confetti */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 9999;
}
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 10px;
    height: 14px;
    border-radius: 2px;
    opacity: 0;
    animation: confettiFall linear forwards;
}
@keyframes confettiFall {
    0%   { opacity: 1; transform: translate3d(0, -20px, 0) rotate(0deg); }
    100% { opacity: 0.9; transform: translate3d(var(--drift, 0px), 110vh, 0) rotate(var(--spin, 720deg)); }
}

/* ============================================
   DOMAIN EMAIL SETUP (on the claim success screen)
   ============================================ */
.email-setup-mount {
    margin-top: 1.5rem;
    animation: claimSlideUp 0.6s 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.email-setup {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(107, 11, 34, 0.16);
    border-radius: 14px;
    padding: 1.15rem 1.25rem;
}
.email-setup-header {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.email-setup-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(107, 11, 34, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.email-setup-title h4 {
    margin: 0 0 0.2rem;
    font-size: 1.02rem;
}
.email-setup-title p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.email-providers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
}
.email-provider-card {
    position: relative;
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
    font-family: var(--font-sans);
}
.email-provider-card:hover {
    transform: translateY(-2px);
    border-color: rgba(107, 11, 34, 0.5);
}
.email-provider-card.selected {
    border-color: var(--deep-maroon);
    background: rgba(107, 11, 34, 0.1);
    box-shadow: 0 0 0 1px var(--deep-maroon);
}
.email-provider-name {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
}
.email-provider-tagline {
    display: block;
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
    line-height: 1.35;
}
.email-provider-badge {
    position: absolute;
    top: -8px;
    right: 8px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0.14rem 0.45rem;
    border-radius: 20px;
    color: #fff;
}
.email-provider-badge.rec { background: var(--deep-maroon); }
.email-provider-badge.free { background: #2a7d4f; }
/* The plan the buyer already bought for this domain — gold, like the other
   "this is paid for" accents on the claim/account cards. */
.email-provider-badge.paid { background: #d4a017; color: #241a02; }

/* Replaces the price line for a provider that has already been paid for, so the
   recipient is never shown a price for something their gift included. */
.email-paid-note {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin: 0.7rem 0 0;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: rgba(42, 125, 79, 0.12);
    border: 1px solid rgba(42, 125, 79, 0.35);
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.email-paid-note strong { color: #2a7d4f; }
.email-paid-icon { display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
[data-theme="dark"] .email-paid-note strong { color: #6fc492; }

.email-provider-detail { margin-top: 1.1rem; }
.email-provider-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}
.email-provider-head h5 { margin: 0 0 0.15rem; font-size: 1rem; }
.email-tagline { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
.email-open-link {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--deep-maroon);
    text-decoration: none;
    white-space: nowrap;
}
.email-open-link:hover { text-decoration: underline; }
.email-price-note {
    margin: 0.5rem 0 0;
    font-size: 0.74rem;
    color: var(--text-secondary);
}
.email-auto-btn {
    margin: 0.85rem 0 0.2rem;
    padding: 0.55rem 0.9rem;
    width: 100%;
    border-radius: 8px;
    border: 1px solid rgba(107, 11, 34, 0.45);
    background: var(--deep-maroon);
    color: #fff;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.email-auto-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.email-auto-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.email-auto-sub {
    display: block;
    font-size: 0.68rem;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 0.15rem;
}
.email-section-label {
    margin: 1rem 0 0.5rem;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.email-records {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}
.email-record-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}
.email-record-row:last-child { border-bottom: none; }
.email-record-type {
    flex-shrink: 0;
    min-width: 44px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #d4a017;
}
.email-record-host {
    flex-shrink: 0;
    font-size: 0.76rem;
    color: var(--text-secondary);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-record-value {
    flex: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.74rem;
    word-break: break-all;
    color: var(--text-primary);
    text-align: right;
}
.email-record-dynamic {
    flex-shrink: 0;
    font-size: 0.66rem;
    color: #d4a017;
    font-style: italic;
}
.email-record-note {
    margin: 0;
    padding: 0.15rem 0.75rem 0.5rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.email-where {
    margin: 0.6rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}
.email-loading { color: var(--text-secondary); font-size: 0.85rem; }
.email-error {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--danger);
    background: rgba(214, 40, 40, 0.08);
    border: 1px solid rgba(214, 40, 40, 0.25);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
}
.email-success {
    margin: 0.6rem 0 0;
    font-size: 0.82rem;
    color: #3ecf8e;
    background: rgba(62, 207, 142, 0.08);
    border: 1px solid rgba(62, 207, 142, 0.3);
    border-radius: 8px;
    padding: 0.55rem 0.7rem;
}

/* ============================================
   EMAIL PLANS ADD-ON (checkout / billing)
   ============================================ */
.billing-optional-badge {
    display: inline-block;
    margin-left: 0.4rem;
    vertical-align: middle;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #d4a017;
    background: rgba(212, 160, 23, 0.12);
    border: 1px solid rgba(212, 160, 23, 0.35);
    border-radius: 20px;
    padding: 0.12rem 0.5rem;
}
.email-plans-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.email-plan-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
}
.email-plan-info { min-width: 0; }
.email-plan-name {
    font-weight: 700;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.email-plan-boxes {
    font-size: 0.68rem;
    font-weight: 600;
    color: #d4a017;
    background: rgba(212, 160, 23, 0.12);
    border-radius: 20px;
    padding: 0.1rem 0.45rem;
}
.email-plan-blurb {
    font-size: 0.72rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
    line-height: 1.35;
}
.email-plan-buy {
    flex-shrink: 0;
    text-align: right;
}
.email-plan-price {
    font-size: 1rem;
    font-weight: 800;
    color: var(--deep-maroon);
}
.email-plan-price span {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
}
/* The yearly total sits with the monthly headline it derives from: plans are
   billed in one yearly charge, so the two must never be shown apart. */
.email-plan-billed {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.email-plan-btn {
    margin-top: 0.35rem;
    padding: 0.4rem 0.85rem;
    border: none;
    border-radius: 7px;
    background: var(--deep-maroon);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.15s ease;
}
.email-plan-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.email-plan-btn:active { transform: translateY(0); }

.email-plans-simulated {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.email-sim-btn {
    width: 100%;
    padding: 0.55rem 0.9rem;
    border: 1px dashed #d4a017;
    border-radius: 8px;
    background: rgba(212, 160, 23, 0.08);
    color: #d4a017;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}
.email-sim-btn:hover { background: rgba(212, 160, 23, 0.18); transform: translateY(-1px); }
.email-sim-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.email-sim-note { margin: 0.5rem 0 0; }

/* ============================================
   CERTIFICATE PRESET PICKER
   ============================================ */
.btn-preset-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0.1rem 0 0.4rem;
    padding: 0.42rem 0.8rem;
    border: 1.5px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--deep-maroon);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.btn-preset-picker:hover { border-color: var(--deep-maroon); background: rgba(107, 11, 34, 0.06); transform: translateY(-1px); }

.preset-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.preset-modal[hidden] { display: none; }
.preset-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(12, 8, 5, 0.62);
    animation: presetBackdropIn 0.25s ease;
}
@keyframes presetBackdropIn { from { opacity: 0; } to { opacity: 1; } }
.preset-modal-card {
    position: relative;
    z-index: 1;
    width: min(94vw, 700px);
    max-height: 88vh;
    overflow: auto;
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: presetCardIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes presetCardIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.preset-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: rgba(20, 14, 10, 0.08);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.preset-modal-close:hover { background: rgba(20, 14, 10, 0.18); }
.preset-modal-card h3 { margin: 0 0 4px; font-family: var(--font-serif); }
.preset-modal-sub { margin: 0 0 16px; font-size: 0.85rem; color: var(--text-secondary); }
.preset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 14px;
}
.preset-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px;
    border: 2px solid var(--border-light);
    border-radius: 12px;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
.preset-card.active { border-color: var(--deep-maroon); }
.preset-card:not(.example):hover { transform: translateY(-2px); border-color: var(--deep-maroon); }
.preset-card.example { opacity: 0.8; cursor: default; }
.preset-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(120, 110, 100, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.preset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.preset-name { font-weight: 700; font-size: 0.85rem; line-height: 1.3; }
.preset-badge {
    display: inline-block;
    font-style: normal;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(107, 11, 34, 0.12);
    color: var(--deep-maroon);
    border-radius: 999px;
    padding: 2px 6px;
    margin-left: 4px;
    vertical-align: middle;
}
.preset-badge.example { background: rgba(20, 14, 10, 0.1); color: var(--text-secondary); }
.preset-desc { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; }
.preset-note { margin: 16px 0 0; font-size: 0.72rem; color: var(--text-secondary); }

/* ============================================
   MODAL COHESION
   The preset picker, the auth dialog and the signature pad each grew their own
   chrome — three radii, three backdrop colours, two close buttons, and a
   heading in the system sans. They now share one card treatment, and the tokens
   below are what the in-site alert/confirm dialogs (public/ui-dialog.js) read,
   so every popup on the site is the same object.
   ============================================ */
:root {
    --overlay-backdrop: rgba(24, 10, 15, 0.55);
    --modal-radius: 16px;
    --modal-pad: 22px;
    --modal-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    --modal-hairline: 1px solid var(--border-subtle);
}

.preset-modal-backdrop,
.auth-overlay,
.de-signature-modal {
    background: var(--overlay-backdrop);
    backdrop-filter: blur(3px);
}

.preset-modal-card,
.auth-modal,
.de-signature-box {
    background: var(--bg-primary);
    border: var(--modal-hairline);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    animation: modalCardIn 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}

@keyframes modalCardIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}

/* Headings in the site's own serif, not the system sans. */
.preset-modal-card h3,
.auth-modal h2,
.de-signature-title {
    font-family: var(--font-serif);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--deep-maroon);
}

.de-signature-title { font-size: 1.06rem; }

/* One close button, top right, in every popup. */
.preset-modal-close,
.auth-close,
.de-signature-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.preset-modal-close:hover,
.auth-close:hover,
.de-signature-close:hover {
    background: rgba(107, 11, 34, 0.07);
    color: var(--deep-maroon);
}

@media (prefers-reduced-motion: reduce) {
    .preset-modal-card,
    .auth-modal,
    .de-signature-box { animation: none; }
}

/* ===== PREMIUM BACKGROUND SYSTEM =============================================
   Visual polish pass (light mode first): a neutral near-white base, barely
   visible gradients replacing flat fills, alternating white / light-grey
   section surfaces for depth, and ONE low-opacity brand glow behind the hero
   certificate. Content, layout structure and the light-mode default are
   unchanged — colours, gradients and breathing room only.
   Placed last so it deliberately wins over the earlier flat-fill rules.
   ========================================================================== */

/* --- Sections become generously padded, softly filled surfaces ------------- */
.s-section {
    padding: clamp(2.75rem, 5.5vw, 5rem) clamp(1.25rem, 3.5vw, 3.75rem);
    border-radius: clamp(20px, 2.2vw, 30px);
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.s-section-header {
    margin-bottom: clamp(2.25rem, 4vw, 3.25rem);
}

/* Alternating section backgrounds: white → light grey → white → light grey,
   which breaks up long stretches of a single flat colour. */
.s-surface-white {
    background-color: var(--bg-card);
    background-image: var(--surface-white);
    border: 1px solid var(--hairline);
    box-shadow: var(--sheet-shadow);
}

.s-surface-grey {
    background-color: var(--bg-secondary);
    background-image: var(--surface-grey);
    border: 1px solid var(--hairline);
}

/* --- Hero: more air, plus the single brand glow (hero certificate only) ---- */
.s-hero {
    padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(3rem, 6vw, 5rem);
    gap: clamp(2.5rem, 5vw, 5rem);
}

/* Soft ambient maroon + gold light sitting behind the certificate. Heavy blur +
   very low opacity so it never reads as a coloured wash. */
.s-hero-visual::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(560px, 118%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-image:
        radial-gradient(circle at 34% 32%, var(--glow-maroon) 0%, transparent 62%),
        radial-gradient(circle at 68% 70%, var(--glow-gold) 0%, transparent 60%);
    filter: blur(48px);
    pointer-events: none;
    z-index: 0;
}

.s-hero-image-frame {
    position: relative;
    z-index: 1;
}

/* Softer, more diffuse drop shadow so the maroon-and-gold certificate pops
   against the neutral surround. */
.s-hero-main-img {
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* --- Testimonial / social-proof band ------------------------------------- */
.s-brand-strip {
    padding: clamp(2.75rem, 5vw, 4.25rem) 0;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    background-image: var(--surface-grey);
    margin-bottom: clamp(3rem, 6vw, 5rem);
}

/* --- Cards: soft gradients replace the flat fills ------------------------- */
.s-feature-card,
.s-product-card,
.about-card,
.tier-card,
.nc-step {
    background-image: var(--surface-white);
}

/* Featured cards keep their maroon tint, softened into a gradient */
.s-product-card.s-product-featured,
.tier-card.tier-card-featured {
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FBF7F8 100%);
}

[data-theme="dark"] .s-product-card.s-product-featured,
[data-theme="dark"] .tier-card.tier-card-featured {
    background-image: linear-gradient(180deg, #232229 0%, #1c1b21 100%);
}

.s-product-preview,
.vault-content {
    background-image: var(--surface-grey);
}

/* --- CTA banner + footer breathing room ---------------------------------- */
.s-cta-banner {
    padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
    margin-bottom: clamp(3rem, 6vw, 4.5rem);
    border-radius: clamp(20px, 2.2vw, 30px);
}

.site-footer {
    border-top: 1px solid var(--hairline);
    background-image: var(--band-footer);
    padding: clamp(3rem, 5vw, 4.5rem) 24px 2.25rem;
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* Domain shopper sits in the same page flow — same soft surface treatment */
.nc-hero {
    background-image: var(--surface-white);
}

/* ===== MOBILE SPACING =======================================================
   Phone pass. The responsive values above were tuned per-selector and left a few
   phone-specific problems: the page gutter ended up narrower than the inset
   inside the cards it framed, the studio stacked ~32px between every field group
   (~300px of pure gap down one column), and the paired checkout fields squeezed
   the Country select until its text was cut off. Gutters and group spacing only —
   no sizes, colours or structure change.
   Placed after the background system on purpose: that block sets .s-section,
   .s-section-header and .site-footer padding unconditionally, so a media query
   earlier in the file would lose the cascade to it.
   ========================================================================== */
@media (max-width: 768px) {
    /* The studio is a single long column on a phone. Trimmed, not removed — the
       field groups still read as separate. */
    .studio-form-section {
        gap: 1.25rem;
    }

    .studio-header {
        margin-bottom: 1.25rem;
    }

    .studio-container {
        gap: 20px;
    }

    .s-section-header {
        margin-bottom: 1.75rem;
    }

    .footer-container {
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    /* Page gutter up (12 → 16px) while the card inset comes down (20 → 16px):
       the content column keeps its width but sits in a balanced frame instead of
       edge-tight cards with a roomy interior. */
    .main-container {
        padding: 80px 16px 28px;
    }

    .s-section {
        padding: 2.25rem 1rem;
    }

    .site-footer {
        padding: 2.25rem 16px 1.75rem;
    }

    /* Two columns truncated the Country select ("Select count…") — stack them and
       let each field's own margin supply the spacing. */
    .billing-row {
        flex-direction: column;
        gap: 0;
    }

    .billing-section-card {
        padding: 1.15rem;
    }

    .nc-hero {
        padding: 1.75rem 1rem 2.25rem;
    }

    .nc-steps {
        padding: 0 1rem;
    }
}

/* ===== TERMS OF SERVICE PANEL =====
   The T&Cs live on the main site as a panel (same mechanism as Home / About /
   Vault). The legal wording is NOT duplicated here: studio.js fetches
   /terms.html and injects its .container, so public/terms.html stays the single
   source of truth. These rules just re-skin that document in site tokens. */
.terms-panel {
    padding-top: 1rem;
}

.terms-toolbar {
    max-width: 820px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.terms-standalone {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.terms-standalone:hover {
    color: var(--deep-maroon);
    border-bottom-color: currentColor;
}

[data-theme="dark"] .terms-standalone:hover {
    color: var(--bright-scarlet-light);
}

.terms-doc {
    max-width: 820px;
    margin: 0 auto 3rem;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 2.5rem 2.75rem;
}

/* The injected document carries its own page-level wrapper from terms.html. */
.terms-doc .container {
    max-width: none;
    margin: 0;
    padding: 0;
}

.terms-doc h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}

.terms-doc .subtitle {
    color: var(--text-tertiary);
    font-size: 0.85rem;
    margin-bottom: 1.75rem;
}

.terms-doc h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--deep-maroon);
    line-height: 1.3;
    margin: 2.25rem 0 0.6rem;
    /* Clear the fixed header when a TOC link jumps to a clause. */
    scroll-margin-top: 120px;
}

[data-theme="dark"] .terms-doc h2 {
    color: var(--bright-scarlet-light);
}

.terms-doc h3 {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 1.75rem 0 0.5rem;
}

.terms-doc p,
.terms-doc li {
    color: var(--text-secondary);
    line-height: 1.7;
}

.terms-doc p {
    margin-bottom: 0.7rem;
}

.terms-doc ul,
.terms-doc ol {
    padding-left: 1.35rem;
    margin: 0.5rem 0 0.9rem;
}

.terms-doc li {
    margin-bottom: 0.3rem;
}

.terms-doc strong {
    color: var(--text-primary);
    font-weight: 600;
}

.terms-doc a {
    color: var(--deep-maroon);
}

[data-theme="dark"] .terms-doc a {
    color: var(--bright-scarlet-light);
}

.terms-doc .lede {
    color: var(--text-primary);
    font-size: 1rem;
}

.terms-doc hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 2.5rem 0;
}

/* Fine print: the caveats that sit under each clause. */
.terms-doc .fine {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-tertiary);
}

.terms-doc .fine strong {
    color: var(--text-secondary);
}

.terms-doc code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    white-space: nowrap;
}

.terms-doc .callout {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--deep-maroon);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

[data-theme="dark"] .terms-doc .callout {
    border-left-color: var(--bright-scarlet);
}

.terms-doc .callout p {
    margin-bottom: 0.4rem;
}

.terms-doc .callout p:last-child {
    margin-bottom: 0;
}

.terms-doc .callout ul {
    margin: 0.35rem 0 0;
}

.terms-doc .callout li {
    font-size: 0.9rem;
}

.terms-doc .toc {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 1rem 1.25rem 1.15rem;
    margin: 1.5rem 0 2rem;
}

.terms-doc .toc-title {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep-maroon);
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .terms-doc .toc-title {
    color: var(--bright-scarlet-light);
}

.terms-doc .toc ol {
    padding-left: 1.35rem;
    margin: 0;
}

.terms-doc .toc li {
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
}

/* The panel supplies its own "Back to Home" control. */
.terms-doc .back {
    display: none;
}

.terms-loading,
.terms-error {
    color: var(--text-tertiary);
    font-size: 0.95rem;
    text-align: center;
    padding: 2rem 0;
    margin: 0;
}

/* ===== END-OF-HOMEPAGE LEGAL STRIP ===== */
.s-legal-strip {
    max-width: 1200px;
    margin: 0 auto 3rem;
    position: relative;
    z-index: 1;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 2rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.s-legal-copy {
    max-width: 620px;
}

.s-legal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 0.35rem;
}

.s-legal-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.s-legal-fine {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.6;
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
    .terms-doc {
        padding: 1.75rem 1.25rem;
    }

    .terms-doc h1 {
        font-size: 1.6rem;
    }

    .terms-doc h2 {
        font-size: 1.1rem;
    }

    .s-legal-strip {
        padding: 1.5rem 1.25rem;
    }
}

/* ===== ABOUT SECTION (refreshed) =====
   #certificates-info also uses .about-panel / .about-header / .about-card*, so
   this refresh is built from new .about-stack / .about-lead / .about-tile /
   .about-legal classes rather than by rewriting those shared card styles. */
.about-stack {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-lead {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 2rem;
}

.about-lead-body {
    min-width: 0;
}

.about-lead-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 0.5rem;
}

.about-lead-text {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
}

.about-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.about-tile {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform var(--transition-smooth),
                box-shadow var(--transition-smooth),
                border-color var(--transition-smooth);
}

.about-tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
    border-color: var(--deep-maroon);
}

[data-theme="dark"] .about-tile:hover {
    border-color: var(--bright-scarlet);
}

/* Legal & policies — the in-site home for the Terms of Service. */
.about-legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(107, 11, 34, 0.05), rgba(214, 40, 40, 0.02));
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--deep-maroon);
    border-radius: 18px;
    padding: 2rem;
}

[data-theme="dark"] .about-legal {
    background: linear-gradient(135deg, rgba(184, 12, 48, 0.08), rgba(255, 59, 59, 0.03));
    border-left-color: var(--bright-scarlet);
}

.about-legal-copy {
    flex: 1 1 480px;
    min-width: 0;
}

.about-legal-eyebrow {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--deep-maroon);
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .about-legal-eyebrow {
    color: var(--bright-scarlet-light);
}

.about-legal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 0.5rem;
}

.about-legal-text {
    font-size: 0.98rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.about-legal-fine {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    line-height: 1.6;
    margin: 0;
}

.about-legal-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    flex: 0 0 auto;
    min-width: 240px;
}

.about-legal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.85rem 1.6rem;
    border: none;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #ffffff;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(107, 11, 34, 0.25);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.about-legal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(107, 11, 34, 0.35);
}

[data-theme="dark"] .about-legal-btn {
    background: linear-gradient(135deg, var(--bright-scarlet), #a02020);
}

.about-legal-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.about-legal-secondary {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.3rem;
    transition: color var(--transition-fast);
}

.about-legal-secondary:hover {
    color: var(--deep-maroon);
}

[data-theme="dark"] .about-legal-secondary:hover {
    color: var(--bright-scarlet-light);
}

@media (max-width: 640px) {
    .about-lead {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }

    .about-legal {
        padding: 1.5rem;
    }

    .about-legal-actions {
        min-width: 0;
        width: 100%;
    }
}