/* ===== 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: var(--header-h, 88px);
    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;
}

/* The wordmark carries the brand on its own now that the "Registry of Digital
   Estates" tagline that sat under it is gone (see the header markup in
   index-new.html), so it is set larger. */
.logo-text {
    font-size: 1.8rem;
    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);
}

.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: none;
    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 {
    /* One timing for the whole hero: the deck's pictures and the headline's
       word are both driven from these, so they can never drift apart. */
    --hero-move-duration: 0.85s;
    --hero-move-ease: cubic-bezier(0.22, 0.9, 0.24, 1);
    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: none;
    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);
}

/* The headline's third line: one word per carousel picture, swiped right to
   left on the deck's own timing. The words are stacked on one line and driven
   purely by data-w, so the markup already reads correctly before JS runs. */
.s-hero-line {
    display: block;
}

.s-hero-words {
    position: relative;
    display: block;
    /* The line box, plus a little room below it so a descender (the g in
       "gifting") never reaches the edge of the mask box. */
    height: 1.2em;
    margin-bottom: -0.12em;
    /* A gutter is deliberately left to the left of the column, and the word
       that has just left swipes out through it and dissolves there instead of
       wandering across the page margin. The negative margin puts that gutter
       outside the text block, so the words themselves stay flush with the two
       lines above them. */
    --hero-word-gutter: 2.5rem;
    margin-left: calc(-1 * var(--hero-word-gutter));
    width: calc(100% + var(--hero-word-gutter));
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 var(--hero-word-gutter));
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 var(--hero-word-gutter));
}

.s-hero-word {
    position: absolute;
    left: var(--hero-word-gutter);
    top: 0;
    white-space: nowrap;
    will-change: transform, opacity;
}

/* Parked off to the right and invisible. No transition at all, so a word that
   has finished leaving can be reset there without being seen to travel back. */
.s-hero-word[data-w="waiting"] {
    opacity: 0;
    transform: translate3d(55%, 0, 0);
    transition: none;
}

/* On its way out: swipes left and fades as it goes, a touch ahead of the
   picture that is leaving beside it. */
.s-hero-word[data-w="leaving"] {
    opacity: 0;
    transform: translate3d(-55%, 0, 0);
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                opacity 0.45s ease;
}

/* The word that answers the picture now in front, swiping in from the right.
   It holds back just long enough that the two are never read as one smudged
   word while they cross. */
.s-hero-word[data-w="showing"] {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                opacity 0.6s ease 0.18s;
}

.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);
}

/* ===== HERO CAROUSEL (coverflow deck) =====
   Four pictures ride a deck of four slots: 0 front, 1 right, 2 behind, 3 left.
   hero-carousel.js only writes data-pos; the transforms live here, so the deck
   is already arranged in the first paint and every move is a CSS transition.

   The flanking pictures deliberately overhang their column. The deck clips
   them and its two outer edges fade, which is what lets a picture stand half
   behind the front one without ever reaching the headline. Sizes are set so
   the pair just fits: a deck half of (offset 0.5 + scale 0.84 / 2) = 0.92 of
   the front card, so the stage takes at most 54% of the column. */
.s-hero-visual {
    flex: 1.15;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-width: 0;
}

.s-hero-carousel {
    position: relative;
    width: 100%;
    /* Top pad is small, bottom pad clears the front card's shadow. */
    padding: 0.5rem 0 2.5rem;
    overflow: hidden;
    /* Two depths of veil: an even dim, plus a deeper wash used on the edge of a
       flanking card that faces the front one. */
    --hero-veil: rgba(26, 12, 18, 0.18);
    --hero-veil-deep: rgba(26, 12, 18, 0.62);
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 8%, #000 92%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 8%, #000 92%, rgba(0, 0, 0, 0) 100%);
}

[data-theme="dark"] .s-hero-carousel {
    --hero-veil: rgba(0, 0, 0, 0.34);
    --hero-veil-deep: rgba(0, 0, 0, 0.74);
}

.s-hero-stage {
    position: relative;
    z-index: 1;
    width: min(54%, 340px);
    margin: 0 auto;
    aspect-ratio: 843 / 1264;
    perspective: 1500px;
    perspective-origin: 50% 38%;
}

.s-hero-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    will-change: transform;
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                opacity 0.55s ease,
                visibility 0s linear 0s;
}

.s-hero-card {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg-card);
    /* Below centre, so arriving out of the deck reads as a lift, not a zoom. */
    transform-origin: 50% 62%;
    box-shadow: 0 18px 38px -26px rgba(0, 0, 0, 0.32);
    transition: box-shadow 0.85s ease;
}

.s-hero-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    user-select: none;
    -webkit-user-drag: none;
}

/* Slot 0, the picture in front: squared up, deepest shadow, no veil.
   The paint order only turns over a fifth of a second into a move, while both
   cards are already travelling and the pair have swapped paint half a dozen
   times by then, so the change is never read as a jump. */
.s-hero-slide[data-pos="0"] {
    z-index: 3;
    transform: translate3d(0, 0, 0) scale(1);
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                z-index 0s linear 0.22s,
                visibility 0s linear 0s;
}

.s-hero-slide[data-pos="0"] .s-hero-card {
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Slots 1 and 3, the pair either side: turned inward, dropped and pushed back.
   They overlap the front card by only a quarter of its width, which keeps the
   overlap that swaps paint order thin and mostly hidden behind the veil. */
.s-hero-slide[data-pos="1"] {
    z-index: 2;
    cursor: pointer;
    transform: translate3d(62%, 4%, 0) scale(0.76) rotateY(17deg);
    /* Fades up late, so a picture sliding out from behind the deck is never
       seen crossing the one arriving at the front. */
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                opacity 0.35s ease 0.45s,
                z-index 0s linear 0.22s,
                visibility 0s linear 0s;
}

.s-hero-slide[data-pos="3"] {
    z-index: 2;
    cursor: pointer;
    transform: translate3d(-62%, 4%, 0) scale(0.76) rotateY(-17deg);
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                opacity 0.35s ease,
                z-index 0s linear 0.22s,
                visibility 0s linear 0s;
}

.s-hero-slide[data-pos="1"] .s-hero-card,
.s-hero-slide[data-pos="3"] .s-hero-card {
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.3);
}

.s-hero-slide[data-pos="1"] .s-hero-card::after,
.s-hero-slide[data-pos="3"] .s-hero-card::after {
    opacity: 1;
    transition: opacity 0.5s ease 0.1s;
}

/* A pointer over a flanking picture leans it in towards the front one, so the
   deck invites a click without moving. */
@media (hover: hover) {
    .s-hero-slide[data-pos="1"]:hover {
        transform: translate3d(59%, 3%, 0) scale(0.79) rotateY(13deg);
    }

    .s-hero-slide[data-pos="3"]:hover {
        transform: translate3d(-59%, 3%, 0) scale(0.79) rotateY(-13deg);
    }
}

/* Slot 2, the picture waiting its turn: squared up directly behind the front
   one, invisible, so it can be pulled out from the deck on the next move. */
.s-hero-slide[data-pos="2"] {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 6%, 0) scale(0.7);
    /* Hide only once the card has finished sliding behind the front one. */
    transition: transform var(--hero-move-duration) var(--hero-move-ease),
                opacity 0.4s ease,
                visibility 0s linear 0.5s;
}

/* The veil: one translucent sheet over the whole card, plus a deeper wash on
   the edge that faces the front card. That inner wash is what lets the two
   overlap without a hard seam, and it reads as the deck receding into depth. */
.s-hero-card::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s ease;
}

.s-hero-slide[data-pos="1"] .s-hero-card::after {
    background-image:
        linear-gradient(to left, rgba(26, 12, 18, 0) 34%, var(--hero-veil-deep) 100%),
        linear-gradient(var(--hero-veil), var(--hero-veil));
}

.s-hero-slide[data-pos="3"] .s-hero-card::after {
    background-image:
        linear-gradient(to right, rgba(26, 12, 18, 0) 34%, var(--hero-veil-deep) 100%),
        linear-gradient(var(--hero-veil), var(--hero-veil));
}

/* The arrival. The picture that has just taken the front slot leans forward out
   of the deck, overshoots by a hair, then settles back to size. */
@keyframes sHeroForward {
    0% { transform: scale(0.9) translateY(2%); }
    55% { transform: scale(1.035) translateY(-0.8%); }
    100% { transform: scale(1) translateY(0); }
}

.s-hero-slide.is-front .s-hero-card {
    animation: sHeroForward var(--hero-move-duration) var(--hero-move-ease) both;
}

/* Which picture is showing. */
.s-hero-dots {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.5rem;
}

.s-hero-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--border-light);
    opacity: 0.8;
    cursor: pointer;
    transition: width 0.45s cubic-bezier(0.22, 0.9, 0.24, 1),
                background-color var(--transition-fast),
                opacity var(--transition-fast);
}

.s-hero-dot:hover {
    opacity: 1;
    background: var(--text-tertiary);
}

.s-hero-dot:focus-visible {
    outline: 2px solid var(--bright-scarlet);
    outline-offset: 3px;
}

.s-hero-dot.is-active {
    width: 26px;
    opacity: 1;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
}

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

/* Reduced motion: the deck still moves when asked, it just arrives at once.
   Every slot rule above declares its own transition, so each one has to be
   named here or the slot selector would outrank this reset. */
@media (prefers-reduced-motion: reduce) {
    .s-hero-slide,
    .s-hero-slide[data-pos="0"],
    .s-hero-slide[data-pos="1"],
    .s-hero-slide[data-pos="2"],
    .s-hero-slide[data-pos="3"],
    .s-hero-card,
    .s-hero-card::after,
    .s-hero-slide[data-pos="1"] .s-hero-card::after,
    .s-hero-slide[data-pos="3"] .s-hero-card::after,
    .s-hero-word,
    .s-hero-word[data-w="waiting"],
    .s-hero-word[data-w="leaving"],
    .s-hero-word[data-w="showing"],
    .s-hero-dot {
        transition: none;
    }

    .s-hero-slide.is-front .s-hero-card {
        animation: none;
    }
}

/* ===== 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);
}

/* The little certificate mock on the tier and product cards.
   Portrait 4:5, the shape of the real 8x10 print — it used to be 140x95, a
   landscape box, so the preview read as a card rather than as a deed. The text
   inside is untouched: only the box's proportions changed. */
.s-diploma-mini {
    height: 140px;
    aspect-ratio: 4 / 5;
    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);
}

/* Premium and Elite arrive framed — their tier copy says "framed, matted and
   ready to hang" — so their preview wears the frame too, while Essential keeps a
   plain edge because that is how it ships (a rolled print in a tube).
   The brown is the frame option we actually sell: the same #8e6a3d as
   .frame-overlay[data-wood="brown"] further down this file (and FRAME_COLORS in
   studio.js). Square corners, like the moulding, not the rounded card edge. */
.s-diploma-premium,
.s-diploma-elite {
    border: 6px solid #8e6a3d;
    border-radius: 0;
}

/* Elite: the preview wears the editor. A dashed selection marquee with corner
   handles is drawn over the artwork, so "you can grab and move anything" reads
   at a glance next to Premium's fixed design, instead of living only in the
   feature list. One span, all CSS — the four handles are 4px background squares,
   one in each corner of the marquee, nudged 2px out of it like a real editor.
   Sized for the mini (112x140, ~100x128 inside the frame), so it stays a marquee
   and not a toolbar: no icons, no clutter. */
.s-diploma-elite .s-diploma-sel {
    --sel-ink: var(--deep-maroon);
    position: absolute;
    inset: 7px 7px 15px;
    border: 1px dashed var(--sel-ink);
    opacity: 0.75;
    background-image:
        linear-gradient(var(--sel-ink), var(--sel-ink)),
        linear-gradient(var(--sel-ink), var(--sel-ink)),
        linear-gradient(var(--sel-ink), var(--sel-ink)),
        linear-gradient(var(--sel-ink), var(--sel-ink));
    background-size: 4px 4px;
    background-repeat: no-repeat;
    background-position:
        -2px -2px,
        calc(100% + 2px) -2px,
        -2px calc(100% + 2px),
        calc(100% + 2px) calc(100% + 2px);
    pointer-events: none;
}

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

/* Premium keeps the decorative inner rule; on Elite the marquee sits where it
   would be, and the two would be only 3px apart. */
.s-diploma-premium::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 {
    /* Wider than the 1200px column the rest of the page uses — the photograph is
       the point of this strip — but the extra HEIGHT is what actually reveals more
       of it: `object-fit: cover` crops top and bottom in proportion to how wide the
       box gets, so widening alone would show less. The min-height keeps the two
       moving together, and the copy is centred in whatever height that produces. */
    width: calc(100% - 3rem);
    max-width: 1320px;
    min-height: clamp(300px, 33vw, 480px);
    display: flex;
    align-items: center;
    justify-content: center;
    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%);
}

/* The photograph is held back so the maroon gradient stays the banner's colour and
   the image reads through it, the way the old watermark did — pull the opacity up
   for a bolder picture, down for more red. The scrim above only adds a little
   shade where the centred copy sits; the gradient underneath does the rest. */
.s-cta-banner-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Slightly above centre: the frames sit high in the photograph. */
    object-position: center 42%;
    opacity: 0.45;
    pointer-events: none;
}

.s-cta-banner-scrim {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 58% 100% at 50% 50%, rgba(20, 6, 12, 0.42) 0%, rgba(20, 6, 12, 0.30) 60%, rgba(20, 6, 12, 0.08) 100%);
    pointer-events: none;
}

[data-theme="dark"] .s-cta-banner-scrim {
    background: radial-gradient(ellipse 58% 100% at 50% 50%, rgba(6, 0, 2, 0.52) 0%, rgba(6, 0, 2, 0.38) 60%, rgba(6, 0, 2, 0.12) 100%);
}

.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:none;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 ===== */
/* The parked state is the DEFAULT state: invisible, held above the fold. The
   swoosh is what brings them into place, so they can never be seen sitting at
   their final position before the animation runs. `swoosh-in` is added by
   armCertSwoosh() in studio.js once the shopper hero is actually on screen —
   applying the animation the moment the panel was merely activated made the
   1.2s swoosh play out during the smooth scroll to the top, so the certificates
   were already parked at rest by the time the hero scrolled into view, and the
   animation was never seen.

   (Earlier this was the reverse — resting state in the base rule plus
   fill-mode `both` scoped to `.panel.active` — which also meant the arrival of
   the panel and the start of the animation were pinned together, with no way to
   wait for either the scroll to settle or the artwork to decode.) */
.cert-swoosh {
    position: absolute;
    top: 50%;
    z-index: 0;
    width: clamp(150px, 16vw, 220px);
    height: auto;
    pointer-events: none;
    /* The delay has to be a custom property: an `animation-delay` longhand set on
       .cert-swoosh-left would be reset by the `animation` shorthand below, which
       wins on specificity and sets every animation-* property. That is why the
       stagger never used to happen. */
    --swoosh-delay: 0s;
    opacity: 0;
    transform: translateY(-190%) rotate(-7deg);
    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.22));
    will-change: transform, opacity;
}
/* Swipe down from above the fold and lock on the hero's centre line. Scoped to
   `swoosh-in` so the declaration is re-applied on every re-open (which is what
   makes the swoosh replay). */
.cert-swoosh.swoosh-in {
    animation: certSwooshIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--swoosh-delay) both;
}
.cert-swoosh-left {
    left: clamp(12px, 3vw, 48px);
    --swoosh-delay: 0.1s;
}
.cert-swoosh-right {
    right: clamp(12px, 3vw, 48px);
    --swoosh-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); }
}
/* Asked-for calm: the certificates are simply in place. The swoosh is decoration,
   not the thing that makes them visible. */
@media (prefers-reduced-motion: reduce) {
    .cert-swoosh {
        animation: none !important;
        opacity: 1;
        transform: translateY(-50%);
    }
}
/* Hidden only where they would collide with the hero content (max-width 720px,
   centred): under ~1150px there is not enough margin on either side. */
@media (max-width: 1149px) {
    .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;
}

/* The small-screen studio layouts live further down the file, grouped with the
   preview panel itself: they have to come after the base .studio-preview-section
   rule to win the cascade. See "RESPONSIVE STUDIO LAYOUT". */

/* 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 Bar — above BOTH columns, directly under the studio header (see
   the markup note in index-new.html). The tier decides what the form asks for
   and what the preview shows, so it is chosen before either of them. It used to
   be the opening field of the form column, which is here rather than there on
   every screen size; only the alignment changes (a bar reads across, a field
   reads down). */
.studio-tier-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 2rem;
}

.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.15rem;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.45rem 0.65rem;
    text-align: left;
    cursor: pointer;
    font: inherit;
    border: 1px 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.25rem;
    margin-top: 0.25rem;
    padding: 0.45rem 0.65rem;
    border: 1px 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.84rem;
    color: var(--deep-maroon);
}
.email-upsell-price {
    font-weight: 700;
    font-size: 0.82rem;
    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.74rem;
    line-height: 1.35;
    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;
    width: auto;
    padding: 4px 12px;
    font-size: 0.76rem;
}
.email-upsell-actions > .form-hint {
    font-size: 0.68rem;
    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.82rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
}

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

.frame-upsell-body {
    font-size: 0.72rem;
    line-height: 1.35;
    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;
}

/* ===== RESPONSIVE STUDIO LAYOUT =============================================
   Desktop (>1200px): form left, preview right (base rules above).
   Small desktop / tablet / landscape (769–1200px, any height): STILL two
   columns, preview pinned to the right. The side-by-side pairing is what tells
   the user the left column drives the right one, so it is kept all the way
   down to the phone breakpoint — the columns simply get tighter instead of the
   preview being stacked under the form. The viewport-height cap is lifted
   because .studio-panel clips its overflow (overflow: hidden), so a short
   window would otherwise cut the bottom off the preview; the JS fit still keeps
   the certificate at its true 4:5 ratio within the column width.
   Phone (≤768px): one column, preview moved to the top — see the 768px block
   at the foot of the file. That block has to stay after these rules.
   ========================================================================== */
@media (max-width: 1200px) and (min-width: 769px) {
    .studio-container {
        gap: 28px;
    }
    .studio-preview-section {
        max-height: none;
    }
}

/* The interactive-studio hint is a full sentence on a wide column. On the
   narrower two-column band and on phones it is cut down to the few words that
   still carry the point: the certificate itself is draggable. */
.preview-label-compact {
    display: none;
}
@media (max-width: 1024px) {
    .preview-label-full {
        display: none;
    }
    .preview-label-compact {
        display: inline;
    }
}

/* ===== 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 {
    z-index: 3;   /* above the viewport, which covers the whole phone screen */
    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 {
    z-index: 3;
    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;
    /* The same caps as .zoom-viewport (94vw x 88vh, at most 1560 x 1080). Without
       them, a window taller than 1227px or wider than 1660px let the picture
       outgrow its viewport, and the viewport clipped its edges. */
    max-width: min(94vw, 1560px);
    max-height: min(88vh, 1080px);
    transform: none;
    border-radius: 14px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.55);
    background: #ffffff;
    cursor: zoom-out;
}
/* VAULT ONLY. The enlarged view of a vault certificate shows the certificate
   alone on the dark backdrop: no white panel around it and no zoom toolbar.
   `zoom-vault` is put on the lightbox by vault.js, for the duration of one open
   (see markLightbox there). The studio's own previews share this lightbox and
   keep the panel and the controls, so nothing here may be keyed off the
   lightbox classes alone.

   This only ever REMOVES paint. Do NOT add a shadow, blur or filter to
   .zoom-img from here: this lightbox sizes the image to its NATIVE pixels
   (3200x4000, and up to 6400x8000 elsewhere in the app) and studio.js promotes
   it with `will-change: transform`, so a blur grows the painted area to
   (w+2*blur) x (h+2*blur) — about 53 million pixels in a single layer — and the
   renderer stops responding. It was tried once and had to be reverted. */
.zoom-lightbox.zoom-vault .zoom-viewport {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
.zoom-lightbox.zoom-vault .zoom-controls { display: none; }
/* Tilt of the enlarged view (vault-tilt.js). Tracking must be short or the print
   lags the cursor; clearing the inline transform hands back to the slower open
   transition above, which is the release. Transform only: no filter or shadow. */
.zoom-lightbox.zoom-vault .zoom-viewport.is-tilting,
.zoom-lightbox.zoom-simple .zoom-viewport.is-tilting {
    transition: transform var(--tilt-tracking, 90ms) linear;
    will-change: transform;
}
/* The highlight, sized to the print by the script and clipped by the viewport. */
.zoom-lightbox.zoom-vault .zoom-glare,
.zoom-lightbox.zoom-simple .zoom-glare {
    position: absolute;
    pointer-events: none;
    background: radial-gradient(circle at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
                rgba(255, 255, 255, 0.3) 0%,
                rgba(255, 255, 255, 0.09) 34%,
                rgba(255, 255, 255, 0) 62%);
}
/* The Customize image has rounded corners; keep the highlight inside them. */
.zoom-lightbox.zoom-simple .zoom-glare { border-radius: 14px; }

/* Drawn picture frame around the fitted Customize image (zoom-frame.js). The
   print gives up room so frame + mat fit; the frame sits behind it, inside the
   viewport, so it tilts with it. Plain gradients and small shadows only: no
   blur on the big image (see the warning above). */
.zoom-lightbox.zoom-framed .zoom-img {
    max-width: calc(min(94vw, 1560px) - 2 * var(--zf-gap, 0px));
    max-height: calc(min(88vh, 1080px) - 2 * var(--zf-gap, 0px));
    border-radius: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);   /* where print meets mat */
}
.zoom-lightbox.zoom-framed .zoom-frame {
    position: absolute;
    z-index: -1;
    box-sizing: border-box;
    border-style: solid;
    border-width: var(--zf-moulding, 20px);
    /* Four shades: the browser mitres the corners, which reads as a bevel. */
    border-color: var(--zf-top) var(--zf-right) var(--zf-bottom) var(--zf-left);
    background: #f6f3ec;                          /* the mat board */
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.28),      /* rebate where frame meets mat */
        inset 2px 3px 6px rgba(0, 0, 0, 0.22),    /* mat sits below the frame lip */
        0 18px 34px -10px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}
/* PHONES: the lightbox gives the picture the whole screen. At desktop padding
   and 94vw a 390px phone showed a 350px viewport, and with a frame a print
   smaller than the inline preview it was meant to enlarge. */
@media (max-width: 600px) {
    .zoom-lightbox { padding: 6px; }
    .zoom-viewport {
        width: calc(100vw - 12px);
        height: calc(100vh - 12px);
        height: calc(100dvh - 12px);
        border-radius: 12px;
    }
    .zoom-simple .zoom-img {
        max-width: calc(100vw - 12px);
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
    }
    .zoom-lightbox.zoom-framed .zoom-img {
        max-width: calc(100vw - 12px - 2 * var(--zf-gap, 0px));
        max-height: calc(100vh - 12px - 2 * var(--zf-gap, 0px));
        max-height: calc(100dvh - 12px - 2 * var(--zf-gap, 0px));
    }
    /* The fitted view has no pan or zoom of its own, so leave the browser's
       pinch-zoom free to get a closer look at the print. */
    .zoom-simple .zoom-viewport { touch-action: pinch-zoom; }  /* one finger tilts, two pinch */
}
@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 WIDTH is set by fitCertificateCanvas() (studio.js) so the certificate
   fills the column at its true 4:5 (portrait) ratio; the height is derived from
   that width by aspect-ratio below.
   The rules here are also 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 is DERIVED, never set independently. The fit in studio.js runs a
       layout pass behind the box (a scrollbar appearing, a column resizing), so
       an explicit height could disagree with the clamped width — and the inner
       wrapper, sized 100%x100% of the box, then stretched the certificate
       (measured 0.656 instead of 4:5 at 390px wide). With the ratio in charge,
       the box is always 4:5 and the artwork can never be squashed. */
    height: 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 */
    /* The preview column is a flex column: without this, flexbox computes the
       box's hypothetical height from the ratio and then SHRINKS it to fit the
       label and gap, squashing the certificate (measured 0.809 instead of 0.8
       at 1400×900). The fit in studio.js already keeps the box inside the
       viewport, so it must not be shrunk a second time. */
    flex: 0 0 auto;
}

[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;
}

.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;
}

/* ===== 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;
    /* No mat. This used to carry `inset 0 0 0 6px #f7f5f0` (a cream mat band),
       `inset 0 0 0 7px #d8d2c4` (its inner edge) and a hairline — about 8px of
       white between the moulding and the certificate. The moulding now meets the
       certificate directly. Note the certificate's own artwork keeps a 3.56%
       paper margin (57px of 1600), so the moulding meets that paper, not the
       ornament; widen `border` if the join should sit on the ornament instead. */
}

.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;
    /* 16px, not smaller: iOS Safari zooms the page in on focus below that. */
    font-size: 1rem;
    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);
}

.auth-view-title {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: var(--text-primary);
}

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

.auth-success {
    padding: 0.6rem 0.75rem;
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.45;
}

[data-theme="dark"] .auth-success { color: #4ade80; }

/* A quiet text link-button ("Forgot your password?", "Back to sign in") */
.auth-link-btn {
    align-self: flex-start;
    margin: 0;
    padding: 0.4rem 0;
    border: none;
    background: none;
    color: var(--deep-maroon);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

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

.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: none;
    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: 1rem; /* 16px: below this iOS Safari zooms the page on focus */
    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;
}
/* ===== COUPON (checkout) =====
   Sits between the totals and the card field. The server validates the code and
   refuses the order if it cannot be honoured, so this is deliberately quiet
   about "maybe": it is either applied, or it says why not. */
.billing-coupon {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-subtle);
}

.billing-coupon-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.billing-coupon-row .billing-input {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
}

.billing-coupon-btn {
    flex-shrink: 0;
    padding: 0 18px;
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.billing-coupon-btn:hover:not(:disabled) {
    background: var(--deep-maroon);
    border-color: var(--deep-maroon);
    color: #fff;
}

.billing-coupon-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.billing-coupon-msg {
    margin: 8px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    min-height: 1.2em;
    color: var(--text-tertiary);
}

.billing-coupon-msg.is-error {
    color: var(--crimson);
}

.billing-coupon-msg.is-ok {
    color: var(--deep-maroon);
}

[data-theme="dark"] .billing-coupon-msg.is-ok {
    color: var(--bright-scarlet-light);
}


[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;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 2rem;
    max-width: 100%;
}

.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,
    /* The tier bar sits above the columns (outside the form section), and the
       two offer cards live in the form — except in the small band, where
       relocateStudioOffers() moves them under the certificate. Hide all three
       by class so a print can never pick them up from either column. */
    .studio-tier-selector,
    .studio-offer-block,
    .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;
    }

    /* Stacked layout: the deck owns the full width, so it can afford a wider
       front card and a narrower fade at the edges. The explicit width matters,
       because .s-hero aligns its children to the centre in this direction and
       the deck's percentages would otherwise resolve against nothing. */
    .s-hero-visual {
        width: 100%;
    }

    .s-hero-stage {
        width: min(62%, 330px);
    }

    .s-hero-carousel {
        padding-bottom: 1.75rem;
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 5%, #000 95%, rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 5%, #000 95%, rgba(0, 0, 0, 0) 100%);
    }

    .s-hero-dots {
        margin-top: 1rem;
    }

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

    /* The three steps stay in a row on a phone (a tall column made the page long):
       tighter text and small arrows between them. */
    .s-steps {
        gap: 0.4rem;
    }

    .s-step {
        max-width: none;
        min-width: 0;
        gap: 0.5rem;
    }

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

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

    .s-step-title {
        font-size: 0.9rem;
        line-height: 1.25;
    }

    .s-step-desc {
        font-size: 0.75rem;
        line-height: 1.45;
    }

    .s-step-arrow {
        width: 16px;
        margin-top: 2.75rem;
    }

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

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

    .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;
    }

    /* Phone: one column with the PREVIEW FIRST — the certificate the form is
       filling in is the first thing on the page, above the fields. It cannot
       grow with the viewport the way the desktop column does (there is no
       second column to keep pace with), so the height cap is dropped and the
       box is centred at the same comfortable width it has on desktop.
       order: -1 lifts it above .studio-form-section, which comes first in the
       markup. */
    .studio-preview-section {
        order: -1;
        position: static;
        top: auto;
        max-height: none;
        width: 100%;
        max-width: 760px;
        margin: 0 auto;
        align-self: center;
    }

    .nav-links {
        gap: 0.75rem;
    }

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

    /* No min-height / padding overrides here on purpose. Both fought the 4:5
       fit: min-height held the box open taller than the width asked for (so the
       certificate stretched, and the QR preview with it), and padding inset the
       artwork from a box whose size is computed from the column, not from the
       box's content. The fit in studio.js is the single sizing authority. */
    .certificate-canvas {
        min-height: auto;
        padding: 0;
    }

    /* 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: 1.05rem;
        letter-spacing: 3px;
    }

    .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-stage {
        width: min(66%, 240px);
    }

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

    .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: var(--header-h, 88px);
    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;
    }
}

/* PHONE HEADER. Logo + sign-in + theme toggle + menu button have to share
   ~300-390px. At the desktop sizes they overflowed: at 320px the menu button was
   pushed off the right edge, and for an admin (a longer "Admin Panel" button as
   well) it was off-screen at 390px, so the owner could not open the menu. */
@media (max-width: 480px) {
    .header-container { gap: 0.5rem; }
    .logo { gap: 0.5rem; min-width: 0; }
    .logo-text { font-size: 0.95rem; letter-spacing: 2px; }
    .header-actions { min-width: 0; gap: 0; }
    .auth-btn { padding: 6px 12px; }
    .admin-panel-btn { padding: 6px 12px; margin-right: 6px; }
    .admin-btn-long { display: none; }
    .dark-mode-toggle, .auth-btn, .admin-panel-btn { flex-shrink: 0; }
    /* The owner has one more button to fit: the wordmark gives way to the icon. */
    .header-container:has(#adminPanelBtn[style*="inline-flex"]) .logo-text { display: none; }
}
@media (max-width: 360px) {
    .logo-icon-wrapper { width: 32px; height: 32px; }
    .logo-text { font-size: 0.85rem; letter-spacing: 1.5px; }
    .auth-btn { padding: 6px 10px; font-size: 0.75rem; }
    .dark-mode-toggle { width: 30px; height: 30px; }
}

/* ===== 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", marking the exact spot AND printed size
   of the claim QR code. The size comes from the active theme's spec (see
   studio.js / studio-editor.js), so these are only the fallback values: the
   classic spec's QR, 15% of the canvas width, top-left at 8% / 13%. Pinned by
   its top-left, so the offset is half the size. 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;
    /* Same rule as the classic chip: the editor sets these custom properties
       from the active frame's QR spot, and they must not be inline left/top/
       width or the :hover expansion below could never win (which squeezed the
       explainer into a column of letters). */
    top: var(--qr-top, 13%);
    left: var(--qr-left, 8%);
    width: var(--qr-size, 15%);
    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.is-open {
    width: min(340px, calc(100% - 28px));
    /* Capped to the canvas for the same reason as the classic chip: a card
       taller or wider than the certificate it sits on gets clipped by the
       editor's overflow:hidden and reads as a ribbon of cut-off text. */
    max-height: calc(100% - 20px);
    aspect-ratio: auto;
    border-radius: 10px;
}
.de-qr-hint.is-open .de-qr-hint-label {
    flex: 0 0 34px;
    height: 34px;
}
.de-qr-hint.is-open .de-qr-hint-body {
    max-height: 340px;
    opacity: 1;
    overflow-y: auto;
    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. Its position and
   width come from the active theme's spec (studio.js), as a percentage of the
   certificate, so it is the same share of the certificate at every preview
   size; these are the classic spec's values as a fallback. Preview-only: the
   real scannable QR replaces it at checkout, so this never reaches the print. */
.cert-qr-hint {
    position: absolute;
    z-index: 6;
    /* Placement comes from the theme spec, as CUSTOM PROPERTIES set by the
       renderer (certificate-engine.js) / studio.js. Deliberately not plain
       left/top/width: an inline `width` outranks the :hover rule below, which
       left the explainer text crammed into the QR-sized box — one letter per
       line, i.e. "a long string of text". */
    left: var(--qr-left, 8%);
    top: var(--qr-top, 13%);
    width: var(--qr-size, 15%);
    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-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;
}
/* The expanded card is capped to the certificate it sits on, not to a fixed
   220px: on a small preview a fixed width ran off the certificate, where the
   preview box's overflow:hidden turned the explanation into a clipped ribbon of
   text. Both axes are capped, and the body scrolls if the card is still taller
   than the certificate. */
.cert-qr-hint.is-open {
    width: min(220px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    aspect-ratio: auto;
    border-radius: 8px;
}
.cert-qr-hint.is-open .cert-qr-hint-label {
    flex: 0 0 30px;
    height: 30px;
}
.cert-qr-hint.is-open .cert-qr-hint-body {
    max-height: 320px;
    opacity: 1;
    overflow-y: auto;
    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;
    /* 16px, not smaller: iOS Safari zooms the page in on focus below that. */
    font-size: 1rem;
    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); }
/* On a phone the picker is the first thing in the form and a full-width, easy-to-hit
   button, in the same maroon on a light tint. The same colours and type as before. */
@media (max-width: 768px) {
    .btn-preset-picker {
        display: flex;
        width: 100%;
        justify-content: center;
        gap: 10px;
        margin: 0.25rem 0 0.5rem;
        padding: 0.95rem 1rem;
        border: 2px solid var(--deep-maroon);
        border-radius: 12px;
        background: rgba(107, 11, 34, 0.07);
        font-size: 1rem;
    }
    .btn-preset-picker svg { width: 20px; height: 20px; }
}

.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;
}

/* The deck sits on top of the glow; its own slot shadows are set with the slot
   transforms further up this file, so the softer front shadow lives there too. */
.s-hero-carousel {
    position: relative;
    z-index: 1;
}

/* --- 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;
    }

    /* Tighter than the desktop 2rem, to match the header above it: two stacked
       bars (header, tier row) with a full 2rem under each wasted the first
       screenful before the certificate. The pills keep their own spacing. */
    .studio-tier-selector {
        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;
    }
}

/* ===== LEGAL DOCUMENTS: TERMS PANEL + PRIVACY IN ABOUT =====
   Neither document is duplicated here. studio.js fetches /terms.html into the
   #terms panel and /privacy.html into the About panel (loadTermsDoc /
   loadPrivacyDoc), so those files stay the single source of truth for the legal
   wording. These rules just re-skin the fetched document in site tokens —
   `.legal-doc` is shared by both, so they cannot drift apart in design either. */
.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);
}

.legal-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;
}

/* Inside About the privacy policy and How it works are cards in the stack, so
   they span the stack rather than sitting in the narrower reading column the
   terms panel uses. */
.about-privacy .legal-doc,
.about-doc .legal-doc {
    max-width: none;
    margin: 0;
}

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

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

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

.legal-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"] .legal-doc h2 {
    color: var(--bright-scarlet-light);
}

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

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

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

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

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

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

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

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

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

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

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

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

.legal-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;
}

.legal-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"] .legal-doc .callout {
    border-left-color: var(--bright-scarlet);
}

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

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

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

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

.legal-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;
}

.legal-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"] .legal-doc .toc-title {
    color: var(--bright-scarlet-light);
}

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

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

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

/* ===== HOW IT WORKS (a document read inside the About panel) =====
   /how-it-works.html is injected whole, so it brings the content classes from
   content.css — the SEO pages' stylesheet, which this page does not load. They
   are restated here, scoped to this section, in the site's own tokens so the
   document matches the theme it is read in. The standalone page is untouched:
   content.css still styles it there. */
.about-doc .legal-doc .eyebrow {
    color: var(--deep-maroon);
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}

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

.about-doc .legal-doc .meta {
    color: var(--text-tertiary);
    font-size: 0.8rem;
    margin-bottom: 1.4rem;
}

.about-doc .legal-doc .lead {
    color: var(--text-primary);
    font-size: 1.05rem;
}

.about-doc .legal-doc .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    margin: 1.4rem 0;
}

.about-doc .legal-doc .card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 1.1rem;
}

.about-doc .legal-doc .card h3 {
    margin: 0 0 0.35rem;
}

.about-doc .legal-doc .card p {
    font-size: 0.92rem;
    margin: 0;
}

/* Same shape as .legal-doc .callout, so a caveat reads the same wherever it is
   met in the panel. */
.about-doc .legal-doc .note {
    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.4rem 0;
}

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

.about-doc .legal-doc .note p {
    font-size: 0.93rem;
    margin: 0;
}

/* Numbered steps. Scoped rather than shared, so the plain <ol> styling in the
   legal documents is untouched. */
.about-doc .legal-doc .steps {
    list-style: none;
    counter-reset: how-step;
    margin: 1.4rem 0;
    padding: 0;
}

.about-doc .legal-doc .steps li {
    position: relative;
    counter-increment: how-step;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin: 0 0 1rem;
    padding: 1rem 1.1rem 1rem 4rem;
}

.about-doc .legal-doc .steps li::before {
    content: counter(how-step);
    position: absolute;
    left: 1.1rem;
    top: 1rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--deep-maroon);
    color: #fff;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-doc .legal-doc .steps li strong {
    display: block;
    color: var(--text-primary);
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.15rem;
}

.about-doc .legal-doc .steps li span {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* The document's own call to action. It keeps the page's deep maroon in either
   theme — like the footer, it is a self-contained dark block. */
.about-doc .legal-doc .cta {
    text-align: center;
    margin: 2.5rem auto 1.5rem;
    padding: 2rem 1.25rem;
    background: linear-gradient(135deg, #2a0d16, var(--deep-maroon));
    border-radius: 16px;
}

.about-doc .legal-doc .cta h2 {
    color: #fff;
    margin: 0 0 0.5rem;
}

.about-doc .legal-doc .cta p {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0.75rem;
}

.about-doc .legal-doc .cta .btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--bright-scarlet), #8a1a30);
    color: #fff;
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}

.about-doc .legal-doc .cta .btn:hover {
    transform: translateY(-1px);
}

.about-doc .legal-doc .related {
    margin: 2rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

.about-doc .legal-doc .related h3 {
    margin: 0 0 0.6rem;
}

.about-doc .legal-doc .related a {
    display: inline-block;
    margin: 0 0.8rem 0.5rem 0;
}

.legal-loading,
.legal-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) {
    .legal-doc {
        padding: 1.75rem 1.25rem;
    }

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

    .legal-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%;
    }
}

/* ============================================================================
   HOME: DOMAIN PROMO BAND — FRAMED CERTIFICATES RISING BESIDE THE PANEL
   The Domain Shopper's swoosh in reverse: instead of dropping in from above the
   fold, the two frames rise from below the panel once it scrolls into view,
   staggered, and come to rest poking just above its top edge. The reveal itself
   is a class added by promo-band.js (.is-revealed); everything else is here.

   Deliberate: the resting position is ALSO the default state of .s-promo-cert,
   and the animation is scoped to .s-promo.is-revealed. Declaring the animation
   on a rule that also applies before it runs is what left the Domain Shopper's
   frames permanently invisible (fill-mode: both held the 0% frame, and the
   animation never started because the panel was display: none). Written this
   way, a missing observer or a blocked script leaves the frames simply sitting
   in place.
   ========================================================================== */
/* One source of truth for the band's headline size. The email line under the box
   is deliberately 0.8 of it, so that relationship survives every breakpoint
   instead of being re-guessed at each width. Declared on the section because the
   small print sits outside .s-promo (see .s-promo-note) and so cannot inherit
   anything from it. */
.s-promo-section {
    --promo-title-size: clamp(1.55rem, 3.1vw, 2.3rem);
}

.s-promo {
    position: relative;
    max-width: 1080px;
    margin: 0 auto clamp(2.5rem, 4.5vw, 3.5rem);
}

/* The panel is the only in-flow child, so .s-promo's height IS the panel's —
   that is what lets the frames bottom-align to the panel and overshoot it by a
   fixed share of its height at every size. Padding is modest because the panel
   now carries the email block too: it sets both the panel's height and, through
   it, the frames' scale, so adding a line here makes the certificates grow. */
/* Same card treatment as the gifting section's grey surface (.s-surface-grey):
   a light grey fill with a hairline edge, rather than a dark brand panel. */
.s-promo-panel {
    position: relative;
    z-index: 2;                     /* the frames overlap in front of it */
    max-width: 640px;
    margin: 0 auto;
    padding: clamp(2rem, 3.4vw, 2.75rem) clamp(1.75rem, 3.5vw, 3rem);
    border-radius: clamp(20px, 2.2vw, 28px);
    background-color: var(--bg-secondary);
    background-image: var(--surface-grey);
    border: 1px solid var(--hairline);
    box-shadow: var(--sheet-shadow);
    text-align: center;
}

.s-promo-title {
    font-size: var(--promo-title-size);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.6px;
    color: var(--text-primary);
}

/* The headline is static — it reads like an address, but nothing rolls. The TLD
   carries the brand accent, and with no substitute ever coming, it needs no
   reserved width and no swap animation. */
.s-promo-tld {
    color: var(--deep-maroon);
}

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

/* The email block. It lives inside the panel now, so this is spacing between the
   panel's own lines rather than a block under the box. */
.s-promo-note {
    margin: clamp(1.1rem, 2.2vw, 1.6rem) auto 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    text-align: center;
}

/* The first line is the statement: 0.8 of the headline in the box above, with
   only the line under it left as small print. "people" carries
   .brand-highlight, the same maroon-plus-underline treatment the gifting
   headline gives "real Gmail". */
.s-promo-note-lead {
    font-size: calc(var(--promo-title-size) * 0.8);
    line-height: 1.25;
}

/* The email reel: a two-line window onto a vertical strip of addresses. Two lines
   rather than one so the neighbouring addresses show through and the movement
   reads as a strip travelling past, not a text swap. The window is masked top
   and bottom so they slide out of view instead of clipping at a hard edge.
   Same size as the headline above; the vw ceiling only bites on narrow phones,
   where the longest address could not otherwise stay on one line. */
.s-promo-reel {
    font-size: min(var(--promo-title-size), 5.4vw);
    font-weight: 600;
    line-height: 1.15;
    height: 2.3em;                  /* two lines: the centred one plus a peek */
    margin: clamp(0.85rem, 1.7vw, 1.25rem) auto 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 100%);
}

.s-promo-reel-track {
    will-change: transform;
}

/* One address per line. 1.15em must match the window's line-height: it is the
   unit the strip is translated in. */
.s-promo-reel-item {
    height: 1.15em;
    line-height: 1.15;
    white-space: nowrap;
    color: var(--text-primary);
}

/* Mirrors the headline's treatment of its TLD: the domain half carries the brand
   accent, the local half stays plain. */
.s-promo-email-domain {
    color: var(--deep-maroon);
}

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

.s-promo-cert {
    position: absolute;
    bottom: 0;
    z-index: 3;                     /* over the panel, not tucked behind it */
    width: auto;
    height: 112%;                   /* pokes ~12% above the panel's top edge */
    pointer-events: none;
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.2));
    opacity: 1;
    transform: translateY(0);
}

.s-promo-cert-left { left: 0; }
.s-promo-cert-right { right: 0; }

.s-promo.is-revealed .s-promo-cert {
    animation: promoCertRise 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Staggered: the left frame is away first, the right one follows it up. */
.s-promo.is-revealed .s-promo-cert-left { animation-delay: 0.05s; }
.s-promo.is-revealed .s-promo-cert-right { animation-delay: 0.26s; }

@keyframes promoCertRise {
    0%   { opacity: 0; transform: translateY(58%); }
    62%  { opacity: 1; transform: translateY(-2.2%); }
    82%  { transform: translateY(1.1%); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Not enough room beside the panel to keep the frames from crowding the copy:
   below this width they are dropped entirely (the Domain Shopper's breakpoint).
   Mobile is the case that matters here. */
@media (max-width: 1149px) {
    .s-promo-cert { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .s-promo.is-revealed .s-promo-cert { animation: none; }
}

/* ============================================================================
   CERTIFICATE VAULT — the certificate cards vault.js fills in
   ========================================================================== */

/* The `hidden` attribute loses to any display rule, and both of these set one —
   without this the empty state sits under the cards forever. */
.vault-grid[hidden],
.vault-empty-state[hidden] {
    display: none;
}

/* Once there are cards the grey panel is just a box around them, so it steps
   out of the way and the cards sit on the page surface. */
.vault-content.has-items {
    background-color: transparent;
    background-image: none;
    padding: 0;
    text-align: left;
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: 20px;
    text-align: left;
}

.vault-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--hairline);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--sheet-shadow);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.vault-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-medium);
}

/* Portrait, matching the 4:5 the certificates are printed at. */
.vault-card-thumb {
    position: relative;
    aspect-ratio: 4 / 5;
    background: var(--bg-tertiary);
    display: block;
}

.vault-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A framed order: moulding (four shades, mitred by the browser), mat, and the
   print inside. Colours come from zoom-frame.js as --zf-* on the element. */
.vault-card-thumb--framed {
    box-sizing: border-box;
    padding: 9px;
    border: 7px solid;
    border-color: var(--zf-top) var(--zf-right) var(--zf-bottom) var(--zf-left);
    background: #f6f3ec;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.28), inset 1px 2px 4px rgba(0, 0, 0, 0.2);
}
.vault-card-thumb--framed img { object-fit: contain; }

.vault-card-thumb-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-tertiary);
}

.vault-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Solid, not blurred: a backdrop-filter per badge is the kind of thing that
   makes a page of cards expensive to paint. */
.vault-badge {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
}

.vault-badge-test {
    background: var(--bright-scarlet);
}

.vault-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 1rem 1.1rem 1.15rem;
}

.vault-card-domain {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    word-break: break-word;
}

.vault-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.vault-card-registry {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.vault-card-registry strong {
    color: var(--text-primary);
    font-weight: 600;
}

.vault-card-status {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.vault-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.vault-card-actions a {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--deep-maroon);
    text-decoration: none;
}

.vault-card-actions a:hover {
    text-decoration: underline;
}

[data-theme="dark"] .vault-card-actions a,
[data-theme="dark"] .vault-retry {
    color: var(--bright-scarlet-light);
}

.vault-retry {
    font-weight: 600;
    color: var(--deep-maroon);
    text-decoration: underline;
}

/* --- OPTIONAL: pointer-tracked 3D tilt on the vault cards -----------------
   Driven entirely by public/vault-tilt.js, which puts `.vault-grid--tilt` on
   #vaultGrid. Delete the vault-tilt.js <script> line in index-new.html and
   every rule below goes inert — no other file needs touching. The tuning
   numbers (tilt angle, lift, timings) all live in that file's TILT config.

   Nothing here sets `perspective` on the grid: the tilt uses perspective()
   inside each card's own transform, so every card pivots around its own centre.
   ------------------------------------------------------------------------- */

.vault-grid--tilt {
    /* A lifted card's shadow reaches outside its own box, so give the grid a
       little room and take it back with a negative margin. */
    padding: 12px;
    margin: -12px;
    /* The lifted shadow. Kept here rather than on the card so the dark override
       below only has to beat one declaration. NB: writing this as
       `:not([data-theme="dark"])` instead looks tidier but breaks dark mode —
       it ties on specificity with the override and comes later, so it wins. */
    --tilt-shadow: 0 28px 50px -20px rgba(0, 0, 0, 0.34);
}

[data-theme="dark"] .vault-grid--tilt {
    --tilt-shadow: 0 30px 54px -20px rgba(0, 0, 0, 0.82);
}

.vault-grid--tilt .vault-card {
    /* Promoted up front rather than on the first mousemove, which would show as
       a hitch right when the pointer arrives. A vault holds a handful of cards,
       so the extra layers are not a real cost; if it ever holds hundreds, drop
       this line and add it to .is-tilting instead. */
    will-change: transform;
    transition: transform var(--tilt-release, 520ms) cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow var(--tilt-release, 520ms) cubic-bezier(0.22, 1, 0.36, 1);
}

/* The stylesheet's own hover already lifts the card 3px and the script writes an
   inline transform, which would win and then snap. Stand the old hover down so
   there is exactly one owner of `transform`. */
.vault-grid--tilt .vault-card:hover {
    transform: none;
}

/* Tracking. A long ease on every pointermove reads as the card lagging behind
   the cursor, so this is deliberately much shorter than the release. */
.vault-grid--tilt .vault-card.is-tilting {
    transition: transform var(--tilt-tracking, 90ms) linear,
                box-shadow 240ms ease-out;
    box-shadow: var(--tilt-shadow);
    z-index: 2;
}

/* The highlight that follows the pointer across the certificate. --tilt-gx/gy
   are written by the script; the fallback keeps it centred if they are missing.
   Painted on the thumbnail, which is already clipped to the card's radius. */
.vault-grid--tilt.has-glare .vault-card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms ease-out;
    background: radial-gradient(circle at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
                rgba(255, 255, 255, 0.38) 0%,
                rgba(255, 255, 255, 0.11) 34%,
                rgba(255, 255, 255, 0) 62%);
}

.vault-grid--tilt.has-glare .vault-card.is-tilting .vault-card-thumb::after {
    opacity: 1;
}

/* --- Claim page: "how do I find my Registry ID" disclosure ---------------
   Sits directly under the Registry ID field. The certificate no longer prints
   the code, so a recipient who arrives from the printed QR has nothing to type:
   this is the obvious next step for them. */
.claim-help-toggle {
    display: inline-block;
    margin: 0.1rem 0 0.9rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--deep-maroon);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 600;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.claim-help-toggle:hover {
    opacity: 0.82;
}

.claim-help-toggle:focus-visible {
    outline: 2px solid var(--deep-maroon);
    outline-offset: 3px;
    border-radius: 4px;
}

.claim-help {
    margin: 0 0 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-secondary);
    text-align: left;
}

/* `hidden` loses to any display rule, so state it explicitly. */
.claim-help[hidden] {
    display: none;
}

.claim-help-title {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.claim-help-steps {
    margin: 0;
    padding-left: 1.4rem;
}

.claim-help-steps li {
    margin: 0.35rem 0;
}

.claim-help-steps strong,
.claim-help-steps em {
    color: var(--text-primary);
}

/* --- Preview loading state -------------------------------------------------
   "Getting your image": shown while a preview is being produced from scratch —
   the spec render loading its artwork, the Elite capture, or the wall composite
   waiting on the lifestyle photo. studio.js holds it for a minimum time and a
   short quiet period so a fast render cannot flash it.

   One overlay per preview column (both preview modes are children of the same
   column), positioned against it: `.studio-preview-section` is position: sticky,
   which is enough of a containing block for an absolute child. */
.preview-loading {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 1.5rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    text-align: center;
}

/* `hidden` loses to any display rule, so state it explicitly. */
.preview-loading[hidden] {
    display: none;
}

.preview-loading-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(107, 11, 34, 0.18);
    border-top-color: var(--deep-maroon);
    animation: previewLoadingSpin 0.8s linear infinite;
}

@keyframes previewLoadingSpin {
    to { transform: rotate(360deg); }
}

.preview-loading-text {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}
[data-theme="dark"] .preview-loading {
    background: rgba(22, 22, 24, 0.86);
}

[data-theme="dark"] .preview-loading-spinner {
    border-color: rgba(255, 255, 255, 0.18);
    border-top-color: #e7d08a;
}

@media (prefers-reduced-motion: reduce) {
    /* Slower, rather than none: the spinner is the only sign of progress. */
    .preview-loading-spinner { animation-duration: 2.4s; }
}

/* --- Claim page: "email address on your domain" ---------------------------
   Sits directly under the "You've received a domain!" heading and only appears
   when the certificate already includes a paid mailbox plan (Google Workspace
   or Zoho Mail), because that is the only case where naming the address is
   already paid for. Which plan that is comes from the Registry ID. */
.claim-email-section {
    margin: 0 0 1.15rem;
    padding: 0.95rem 1.05rem;
    border-radius: 12px;
    background: rgba(107, 11, 34, 0.14);
    border: 1px solid rgba(212, 160, 23, 0.32);
}

/* `hidden` loses to any display rule, so state it explicitly. */
.claim-email-section[hidden] {
    display: none;
}

.claim-email-section .claim-section-label {
    margin-top: 0;
}

.claim-email-section > :last-child {
    margin-bottom: 0;
}

/* --- Elite editor: "Save progress" ----------------------------------------
   Deliberately more solid than the outline buttons beside it. The autosave is
   invisible by design, so this is the only save the customer can see happen —
   and the only one Restore Last returns to. */
.btn-save-progress {
    background-color: var(--deep-maroon);
    color: #fff;
    border: 2px solid var(--deep-maroon);
}

.btn-save-progress:hover {
    opacity: 0.9;
}

/* Confirmation, held for ~1.8s by saveEditorProgress() — the toast is easy to
   miss when you are watching the certificate rather than the corner of the
   screen. */
.btn-save-progress.is-saved {
    background-color: #1f7a4d;
    border-color: #1f7a4d;
    color: #fff;
}

[data-theme="dark"] .btn-save-progress.is-saved {
    background-color: #2a9d63;
    border-color: #2a9d63;
}

/* iOS Safari zooms the page in when a field below 16px gets focus. These two
   selects are the last ones that were smaller (the sort menu on the domain shop,
   and the Elite editor's frame colour). */
@media (max-width: 768px) {
    #sortSelect,
    #frameWoodType { font-size: 16px; }
}

/* ===== ELITE EDITOR ON A PHONE / TABLET (see studio-editor-touch.js) =====
   Same query as TOUCH_QUERY in studio-editor.js / studio-editor-touch.js. */
.de-selbar { display: none; }
@media (max-width: 768px), (pointer: coarse) {
    /* The toolbar: fixed to the bottom of the screen while something on the
       certificate is selected, so the controls are always next to what they
       change. studio-editor-touch.js lifts it above the on-screen keyboard. */
    .de-selbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9000;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
        background: var(--bg-card, #ffffff);
        border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.12));
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
    }
    .de-selbar[hidden], .de-selbar [hidden] { display: none !important; }
    .de-selbar-row {
        flex: 0 0 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .de-selbar-row::-webkit-scrollbar { display: none; }
    .de-selbar-end { flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
    .de-selbar-end .de-sb-font { flex: 1 1 auto; min-width: 0; max-width: none; }

    .de-sb-btn {
        flex: 0 0 auto;
        min-width: 44px;
        min-height: 44px;
        padding: 0 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border: 1px solid var(--border-subtle, rgba(0,0,0,0.15));
        border-radius: 12px;
        background: var(--bg-secondary, #f4f1ee);
        color: var(--text-primary, #1c1c1e);
        font: inherit;
        font-size: 0.95rem;
        font-weight: 600;
        cursor: pointer;
        touch-action: manipulation;
    }
    .de-sb-btn.active { border-color: var(--deep-maroon); background: rgba(107, 11, 34, 0.1); color: var(--deep-maroon); }
    .de-sb-edit { background: var(--deep-maroon); border-color: var(--deep-maroon); color: #fff; }
    .de-sb-done { background: var(--deep-maroon); border-color: var(--deep-maroon); color: #fff; padding: 0 16px; }
    .de-sb-remove { color: #b3261e; }
    .de-sb-wide { padding: 0 14px; white-space: nowrap; }
    .de-sb-size { flex: 0 0 auto; min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
    .de-sb-note { font-size: 0.85rem; color: var(--text-secondary, #666); white-space: nowrap; }
    /* A round swatch of the current colour; the real colour input sits invisibly over it. */
    .de-sb-colour { position: relative; padding: 0; width: 44px; overflow: hidden; }
    .de-sb-colour::before {
        content: '';
        width: 24px; height: 24px;
        border-radius: 50%;
        background: var(--sb-colour, #000);
        box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.35);
    }
    .de-sb-colour input[type="color"] {
        position: absolute; inset: 0; width: 100%; height: 100%; min-height: 44px;
        padding: 0; border: 0; opacity: 0; cursor: pointer;
    }
    .de-sb-font {
        flex: 0 0 auto;
        min-height: 44px;
        max-width: 150px;
        padding: 0 8px;
        border: 1px solid var(--border-subtle, rgba(0,0,0,0.15));
        border-radius: 12px;
        background: var(--bg-secondary, #f4f1ee);
        color: var(--text-primary, #1c1c1e);
        font-size: 16px;   /* 16px so iOS does not zoom in on focus */
    }

    /* Room at the bottom of the page so the toolbar never hides the form. */
    body.de-selbar-open { padding-bottom: 130px; }

    /* The text controls now live in the toolbar; the inline copy under the
       certificate would only be a second, far-away set. Border style, background
       colour and image choices stay in the panel. */
    #deTextLabel, #deTextControls, #deRemoveBtn { display: none !important; }

    /* "Add text" opens as a sheet from the bottom of the screen: the old dropdown
       fell below the fold and covered the Save and Restore buttons. */
    .de-text-menu {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9100;
        min-width: 0;
        gap: 4px;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.28);
    }
    .de-text-menu button {
        min-height: 48px;
        padding: 0 14px;
        font-size: 1rem;
        border-radius: 12px;
        background: var(--bg-secondary, #f4f1ee);
    }
    .de-text-menu::before {
        content: 'Add text';
        display: block;
        padding: 2px 4px 8px;
        font-size: 0.8rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        color: var(--text-secondary, #666);
    }

    /* The editor's own buttons: bigger targets. */
    .de-actions .btn-print { min-height: 46px; }
}
@media (prefers-reduced-motion: no-preference) {
    @media (max-width: 768px), (pointer: coarse) {
        .de-selbar { animation: de-selbar-in 0.18s ease-out; }
    }
}
@keyframes de-selbar-in { from { transform: translateY(100%); } to { transform: none; } }

/* Hover only where a real hover exists; on touch the chip opens and closes on tap (.is-open). */
@media (hover: hover) {
.de-qr-hint:hover {
    width: min(340px, calc(100% - 28px));
    /* Capped to the canvas for the same reason as the classic chip: a card
       taller or wider than the certificate it sits on gets clipped by the
       editor's overflow:hidden and reads as a ribbon of cut-off text. */
    max-height: calc(100% - 20px);
    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;
    overflow-y: auto;
    padding: 10px 14px 12px;
}
.cert-qr-hint:hover {
    width: min(220px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    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;
    overflow-y: auto;
    padding: 8px 10px 10px;
}
}

/* Header logo: the full Dotdeed lockup (icon + wordmark) at the height of the
   header, replacing the small icon-in-a-box plus separate wordmark. The 0.8 is
   what makes it 20% smaller than the height-fitting size; change that one number
   to re-size it. */
:root { --header-h: 88px; }
.logo .logo-lockup { height: calc((var(--header-h) - 12px) * 0.8); width: auto; max-width: none; }
@media (max-width: 600px) {
    :root { --header-h: 68px; }
}

/* Let a sideways finger drag reach hero-carousel.js as a swipe while a vertical
   one still scrolls the page. Without this the browser claims every touch for
   scrolling and cancels the pointer, so the swipe never arrived. */
.s-hero-carousel { touch-action: pan-y; }

/* The signed-in account's support ID, under the Vault subtitle. */
.vault-account-id { margin: 0.35rem 0 0; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-tertiary, #8a8a8a); font-variant-numeric: tabular-nums; }
.vault-account-id[hidden] { display: none; }

/* The bargain bin: a small, quiet button beside the TLD filters, so the main
   search stays the front door. */
.bargain-bin-btn { margin-left: auto; padding: 4px 10px; font-size: 0.72rem; font-weight: 600; color: var(--deep-maroon); background: transparent; border: 1px dashed currentColor; border-radius: 999px; cursor: pointer; opacity: 0.85; }
.bargain-bin-btn:hover { opacity: 1; background: rgba(107, 11, 34, 0.06); }
[data-theme="dark"] .bargain-bin-btn { color: var(--bright-scarlet-light); }
.bargain-bin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 2px 12px; }
.bargain-bin-head strong { display: block; font-size: 1rem; }
.bargain-bin-head span { font-size: 0.8rem; color: var(--text-secondary); }
.bargain-bin-back { font-size: 0.8rem; background: none; border: none; color: var(--deep-maroon); cursor: pointer; padding: 6px 4px; }
[data-theme="dark"] .bargain-bin-back { color: var(--bright-scarlet-light); }

/* The "Results for ..." label gets its words from CSS, so with nothing inside it
   must not show at all (it used to read Results for "" before any search). */
.nc-search-query:empty { display: none !important; }

/* Show more domains, under the list. */
.nc-more-wrap { display: flex; justify-content: center; padding: 18px 0 6px; }
.nc-more-btn { padding: 10px 22px; font-size: 0.9rem; font-weight: 600; color: var(--deep-maroon); background: transparent; border: 1.5px solid currentColor; border-radius: 999px; cursor: pointer; }
.nc-more-btn:hover:not(:disabled) { background: rgba(107, 11, 34, 0.06); }
.nc-more-btn:disabled { opacity: 0.6; cursor: default; }
[data-theme="dark"] .nc-more-btn { color: var(--bright-scarlet-light); }

/* Shown above the list when the typed ending (tompearl.you) is one we do not sell. */
.nc-ending-note { margin: 0 0 12px; padding: 10px 14px; font-size: 0.85rem; color: var(--text-secondary); background: rgba(107, 11, 34, 0.06); border-left: 3px solid var(--deep-maroon); border-radius: 6px; }
[data-theme="dark"] .nc-ending-note { background: rgba(255, 255, 255, 0.05); border-left-color: var(--bright-scarlet-light); }

/* No domain chosen: there is nothing for a QR to claim, so the QR preview chip is
   hidden on every certificate and the note beside the order button explains why. */
.no-domain-selected .cert-qr-hint,
.no-domain-selected .de-qr-hint { display: none !important; }
.qr-disclaimer { margin: 0.6rem 0 0; font-size: 0.8rem; line-height: 1.4; color: var(--text-secondary, #8b8b9e); }

/* --- Vault: a gift nobody has claimed yet (copy the link / email it again) --- */
.vault-card-claim {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light, rgba(0,0,0,0.1));
}
.vault-card-claim-title {
    margin: 0 0 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.vault-card-claim-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vault-btn {
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--deep-maroon);
    border-radius: 6px;
    background: transparent;
    color: var(--deep-maroon);
    cursor: pointer;
}
.vault-btn:hover:not(:disabled) { background: var(--deep-maroon); color: #fff; }
.vault-btn:disabled { opacity: 0.55; cursor: default; }
[data-theme="dark"] .vault-btn { border-color: var(--bright-scarlet-light); color: var(--bright-scarlet-light); }
[data-theme="dark"] .vault-btn:hover:not(:disabled) { background: var(--bright-scarlet-light); color: #1a1a24; }
.vault-card-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    word-break: break-all;
}
.vault-card-note:empty { display: none; }
.vault-card-note.is-error { color: var(--danger, #b3261e); }

/* --- Checkout form: messages next to the field to fix, and "remember me" --- */
.billing-field-error {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    line-height: 1.35;
    color: #D62828;
}
.billing-field-error[hidden] { display: none; }
.billing-input.is-invalid {
    border-color: #D62828;
    box-shadow: 0 0 0 1px rgba(214, 40, 40, 0.25);
}
.billing-form-error {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: #D62828;
}
.billing-form-error.is-hint { color: var(--text-secondary); }
.billing-form-error[hidden] { display: none; }
.billing-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.billing-remember input { width: 1rem; height: 1rem; accent-color: var(--deep-maroon); }


/* ===== Domain box: locked to the picked domain, display name editable ===== */
/* Exactly the normal field, just greyed: the same underline, padding and size. */
#domainName.is-locked {
    color: var(--text-secondary);
    cursor: pointer;
}
.domain-display-reset {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--deep-maroon);
    text-decoration: underline;
    cursor: pointer;
}
.domain-lock-card { width: min(94vw, 460px); }
.domain-lock-text { margin: 8px 0 18px; font-size: 0.92rem; line-height: 1.5; color: var(--text-secondary); }
.domain-lock-text strong { color: var(--text-primary); }
.domain-lock-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.domain-lock-btn {
    flex: 1 1 auto;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--border-light);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.domain-lock-btn:hover { background: rgba(120, 110, 100, 0.1); }
.domain-lock-btn-primary { background: var(--deep-maroon); border-color: var(--deep-maroon); color: #fff; }
.domain-lock-btn-primary:hover { background: var(--deep-maroon); filter: brightness(1.12); }


/* ===== Address suggestions (Google Places) in the delivery form ===== */
.address-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    margin: 2px 0 0;
    padding: 4px 0;
    list-style: none;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    max-height: 320px;
    overflow: auto;
}
.address-suggest[hidden] { display: none; }
.address-suggest-item {
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--text-primary);
    cursor: pointer;
}
.address-suggest-item span { color: var(--text-secondary); }
.address-suggest-item.is-active { background: rgba(107, 11, 34, 0.08); }
.address-suggest-credit {
    padding: 0.35rem 0.9rem 0.25rem;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-align: right;
    color: var(--text-tertiary);
}

/* Custom alterations: one button with a chevron that opens an animated panel */
.alterations-state { display: none; }
.alterations-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 0.7rem 0.9rem; font: inherit; font-weight: 500; cursor: pointer;
  color: var(--text-primary, inherit); background: var(--bg-secondary, transparent);
  border: 1px solid var(--border, rgba(128,128,128,0.35)); border-radius: 8px;
}
.alterations-toggle:hover { border-color: var(--accent, currentColor); }
.alterations-chevron { transition: transform 0.3s ease; }
.alterations-toggle[aria-expanded="true"] .alterations-chevron { transform: rotate(180deg); }
.alterations-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows 0.35s ease, opacity 0.3s ease;
}
.alterations-panel.open { grid-template-rows: 1fr; opacity: 1; }
.alterations-panel-inner { overflow: hidden; min-height: 0; }
.alterations-panel:not(.open) .alterations-panel-inner { visibility: hidden; transition: visibility 0s 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .alterations-panel, .alterations-chevron { transition: none; }
}

/* A typed domain that is not a domain */
#domainName.is-invalid { border-color: var(--danger, #b3261e); }
#domainNameHint.is-error { color: var(--danger, #b3261e); }

/* ===== MY DOMAINS (the owner's dashboard) ===== */
.my-domains-content { max-width: 1040px; margin: 0 auto; padding: 0 1rem 3rem; position: relative; }
.md-domain { margin-bottom: 3rem; }
.md-domain-head { text-align: center; margin-bottom: 1.6rem; }
.md-eyebrow { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.md-domain-name { font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); margin: 0.3rem 0 0.8rem; word-break: break-all; }
.md-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.md-chip { font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 999px; border: 1px solid var(--hairline); background: var(--bg-card); color: var(--text-secondary); }
.md-chip-good { color: #1f7a45; border-color: rgba(31, 122, 69, 0.35); }
.md-chip-wait { color: #9a6a00; border-color: rgba(154, 106, 0, 0.4); }
.md-notice { background: var(--bg-card); border: 1px solid rgba(212, 160, 23, 0.55); border-radius: 14px; padding: 1rem 1.2rem; margin: 0 0 1.4rem; text-align: left; box-shadow: var(--sheet-shadow); }
.md-notice .md-btn { margin-top: 0.8rem; padding: 0.5rem 0.95rem; font-size: 0.9rem; }
.md-notice p { margin: 0.3rem 0 0; color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; text-align: left; }
.md-card { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 16px; padding: 1.4rem 1.5rem; box-shadow: var(--sheet-shadow); transition: transform var(--transition-base), box-shadow var(--transition-base); }
.md-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); }
.md-card-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.md-card-sub { margin: 0.25rem 0 1rem; color: var(--text-secondary); font-size: 0.92rem; }
.md-muted { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin: 0.8rem 0 0; }
.md-warn { color: #9a6a00; font-size: 0.92rem; font-weight: 600; margin: 0 0 0.8rem; }
.md-error { color: var(--danger, #b3261e); font-size: 0.88rem; margin: 0.6rem 0 0; }
.md-name-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.md-input { flex: 0 1 11rem; min-width: 0; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid var(--hairline); background: var(--bg-secondary); color: inherit; font: inherit; font-size: 1rem; }
.md-input:focus { outline: none; border-color: var(--deep-maroon); box-shadow: 0 0 0 3px rgba(107, 11, 34, 0.15); }
.md-at { color: var(--text-secondary); word-break: break-all; font-size: 0.95rem; }
.md-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.md-plan { border: 1px solid var(--hairline); border-radius: 12px; padding: 1rem; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 0.35rem; }
.md-plan-name { font-weight: 700; color: var(--text-primary); }
.md-plan-price { font-size: 1.25rem; font-weight: 700; color: var(--deep-maroon); }
.md-plan-blurb { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; flex: 1; }
.md-inbox-line { margin: 0 0 0.4rem; word-break: break-all; }
.md-details { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; font-size: 0.92rem; }
.md-details dt { color: var(--text-secondary); }
.md-details dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.md-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.md-actions-center { justify-content: center; }
.md-btn { font: inherit; font-weight: 700; font-size: 0.95rem; padding: 0.7rem 1.1rem; border-radius: 10px; cursor: pointer; text-decoration: none; text-align: center; display: inline-block; transition: filter 0.2s ease, transform 0.15s ease, background 0.2s ease, color 0.2s ease; }
.md-btn:disabled { opacity: 0.6; cursor: default; }
.md-btn-primary { background: var(--deep-maroon); color: #fff; border: none; box-shadow: 0 10px 26px -12px rgba(107, 11, 34, 0.6); }
.md-btn-primary:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
.md-btn-ghost { background: transparent; color: var(--deep-maroon); border: 1px solid var(--deep-maroon); }
.md-btn-ghost:hover:not(:disabled) { background: var(--deep-maroon); color: #fff; }
[data-theme="dark"] .md-btn-ghost { color: var(--bright-scarlet-light); border-color: var(--bright-scarlet-light); }
[data-theme="dark"] .md-btn-ghost:hover:not(:disabled) { background: var(--bright-scarlet-light); color: #1a1a24; }
[data-theme="dark"] .md-plan-price { color: var(--bright-scarlet-light); }
.md-empty { background: var(--bg-secondary); border-radius: 18px; padding: 3rem 1.5rem; text-align: center; }
.md-empty-text { color: var(--text-secondary); margin: 0 0 1.2rem; }
@media (max-width: 560px) {
  .md-name-row { flex-wrap: wrap; }
  .md-input { flex: 1 1 100%; }
  .md-actions .md-btn { width: 100%; }
}
.md-card .md-actions { margin-top: 0.9rem; }

/* My Domains: collapsible how-tos in the Advanced card */
.md-howto { border: 1px solid var(--hairline); border-radius: 12px; background: var(--bg-secondary); margin-bottom: 0.6rem; padding: 0 1rem; }
.md-howto summary { cursor: pointer; font-weight: 600; padding: 0.8rem 0; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.md-howto summary::-webkit-details-marker { display: none; }
.md-howto summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; flex: none; margin-top: -3px; }
.md-howto[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.md-steps { margin: 0 0 0.4rem; padding-left: 1.2rem; color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
.md-steps li { margin-bottom: 0.35rem; }
.md-howto .md-muted { margin: 0 0 0.9rem; }

/* ===== MY DOMAINS: tab strip and the Advanced panes (registrar-panel layout) ===== */
.md-tabs { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: var(--bg-card); box-shadow: var(--sheet-shadow); margin: 0 0 1.4rem; }
.md-tab { flex: 1 1 0; min-width: 8.5rem; font: inherit; font-weight: 600; font-size: 0.95rem; padding: 0.95rem 0.8rem; border: 0; border-right: 1px solid var(--hairline); background: transparent; color: var(--text-secondary); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.md-tab:last-child { border-right: 0; }
.md-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
.md-tab.active { background: var(--deep-maroon); color: #fff; }
[data-theme="dark"] .md-tab.active { background: var(--bright-scarlet-light); color: #1a1a24; }
.md-stage { text-align: left; }
.md-pane-body { background: var(--bg-card); border: 1px solid var(--hairline); border-radius: 16px; padding: 0.4rem 1.5rem 1.4rem; box-shadow: var(--sheet-shadow); }
.md-sec { display: grid; grid-template-columns: 11rem 1fr; gap: 1rem 1.4rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hairline); }
.md-sec:last-of-type { border-bottom: 0; }
.md-sec-tag { display: flex; align-items: flex-start; gap: 0.5rem; }
.md-sec-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); background: var(--bg-secondary); padding: 0.3rem 0.6rem; border-radius: 4px; }
.md-sec-help { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--text-secondary); color: var(--bg-card); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; flex: none; }
.md-sec-body { min-width: 0; }
.md-inline { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.md-select { flex: 0 1 17rem; appearance: auto; }
.md-select-sm { flex: 0 0 auto; padding: 0.5rem 0.7rem; font-size: 0.9rem; }
.md-search { flex: 1 1 10rem; max-width: 18rem; padding: 0.5rem 0.8rem; font-size: 0.9rem; }
.md-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.md-btn-sm { padding: 0.5rem 0.9rem; font-size: 0.88rem; }
.md-add-btn { margin-top: 0.9rem; }
.md-check { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; color: var(--text-secondary); margin-top: 0.7rem; }
.md-table-wrap { overflow-x: auto; border-top: 2px solid var(--deep-maroon); }
.md-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.md-table th { text-align: left; font-weight: 600; color: var(--text-primary); padding: 0.7rem 0.6rem; border-bottom: 2px solid var(--hairline); white-space: nowrap; }
.md-table td { padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--hairline); color: var(--text-primary); vertical-align: middle; }
.md-t-type { color: var(--deep-maroon); white-space: nowrap; }
[data-theme="dark"] .md-t-type { color: var(--bright-scarlet-light); }
.md-t-value { word-break: break-all; max-width: 22rem; }
.md-t-actions { white-space: nowrap; text-align: right; }
.md-icon-btn { border: 0; background: transparent; color: var(--text-secondary); padding: 0.35rem; border-radius: 6px; cursor: pointer; line-height: 0; }
.md-icon-btn:hover { background: var(--bg-secondary); color: var(--deep-maroon); }
.md-edit-row td { background: var(--bg-secondary); }
.md-form { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.4rem 0; }
.md-form-row { align-items: stretch; }
.md-form .md-input { flex: 1 1 8rem; }
.md-form .md-f-small { flex: 0 1 6rem; }
.md-form .md-f-ttl { flex: 0 1 8rem; }
.md-form .md-f-value { flex: 2 1 14rem; }
.md-form input[hidden], .md-form select[hidden] { display: none; }
.md-banner { margin: 0.9rem 0 0; padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.9rem; line-height: 1.45; }
.md-banner[hidden] { display: none; }
.md-banner-good { background: rgba(31, 122, 69, 0.1); color: #1f7a45; border: 1px solid rgba(31, 122, 69, 0.3); }
.md-banner-bad { background: rgba(179, 38, 30, 0.08); color: var(--danger, #b3261e); border: 1px solid rgba(179, 38, 30, 0.3); }
.md-radios { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.6rem 0 0.9rem; }
.md-radio { display: flex; gap: 0.7rem; align-items: flex-start; cursor: pointer; }
.md-radio input { margin-top: 0.3rem; }
.md-radio strong { display: block; color: var(--text-primary); }
.md-radio small { display: block; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.4; }
.md-ns-list { display: flex; flex-direction: column; gap: 0.5rem; max-width: 26rem; margin-bottom: 0.9rem; }
.md-ns-list .md-btn { align-self: flex-start; }
.md-code { flex: 1 1 14rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
@media (max-width: 720px) {
  .md-sec { grid-template-columns: 1fr; gap: 0.6rem; padding: 1rem 0; }
  .md-tab { min-width: 50%; border-bottom: 1px solid var(--hairline); }
  .md-pane-body { padding: 0.2rem 1rem 1rem; }
}
.md-check[hidden], .md-ns-list[hidden] { display: none; }

/* My Domains: choosing between several domains */
.md-switch-label { margin: 0 0 0.6rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; text-align: center; }
.md-switcher { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin: 0 0 2rem; }
.md-switch { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.7rem 1.1rem; min-width: 11rem; max-width: 100%; border-radius: 12px; border: 1px solid var(--hairline); background: var(--bg-card); color: var(--text-primary); cursor: pointer; box-shadow: var(--sheet-shadow); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.md-switch:hover { transform: translateY(-2px); border-color: var(--deep-maroon); }
.md-switch.active { border-color: var(--deep-maroon); box-shadow: 0 0 0 2px rgba(107, 11, 34, 0.25), var(--sheet-shadow); }
[data-theme="dark"] .md-switch:hover, [data-theme="dark"] .md-switch.active { border-color: var(--bright-scarlet-light); }
.md-switch-name { font-weight: 700; word-break: break-all; }
.md-switch-note { font-size: 0.8rem; color: var(--text-secondary); }
@media (max-width: 560px) { .md-switch { flex: 1 1 100%; } }

/* Checkout: the registrant email must be one the buyer can open */
.billing-email-note { margin: 0.45rem 0 0; padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.84rem; line-height: 1.45; color: var(--text-secondary); background: var(--bg-secondary); border-left: 3px solid #d4a017; }
.billing-email-note strong { color: var(--text-primary); }
.billing-email-suggest { margin: 0.4rem 0 0; font-size: 0.88rem; color: var(--text-secondary); }
.billing-email-fix { font: inherit; font-weight: 700; padding: 0; border: 0; background: none; color: var(--deep-maroon); text-decoration: underline; cursor: pointer; }
[data-theme="dark"] .billing-email-fix { color: var(--bright-scarlet-light); }
.billing-email-note[hidden], .billing-email-suggest[hidden] { display: none; }

/* What is a domain name? — the About explainer the home page's Learn More opens. */
.about-explainer {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 18px;
    box-shadow: var(--shadow-card);
    padding: 2.25rem 2rem;
    scroll-margin-top: 90px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

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

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

.about-explainer-title {
    font-size: clamp(1.7rem, 4vw, 2.3rem);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: -0.5rem 0 0;
}

.about-explainer-lead {
    font-size: 1.12rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
    max-width: 760px;
}

.about-explainer-lead strong {
    color: var(--text-primary);
}

.about-explainer-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.about-explainer-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 1.1rem;
    border: 1px dashed var(--deep-maroon);
    border-radius: 12px;
    background: rgba(107, 11, 34, 0.04);
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.05rem;
}

.about-explainer-chip small {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

[data-theme="dark"] .about-explainer-chip {
    border-color: var(--bright-scarlet-light);
    background: rgba(255, 59, 59, 0.06);
}

.about-explainer-gift {
    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-left: 3px solid var(--deep-maroon);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
}

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

.about-explainer-gift-copy {
    flex: 1 1 460px;
    min-width: 0;
}

.about-explainer-gift-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin: 0.35rem 0 0.6rem;
}

.about-explainer-gift-copy p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 0.6rem;
}

.about-explainer-gift-copy .about-explainer-note {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin: 0;
}

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

@media (max-width: 600px) {
    .about-explainer { padding: 1.5rem 1.15rem; }
    .about-explainer-tiles { grid-template-columns: 1fr; }
    .about-explainer-gift { padding: 1.25rem 1.1rem; }
}

/* Zoho setup steps in the My Domains inbox card */
.md-zoho-steps { margin: 0.6rem 0 1rem; padding-left: 1.2rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; }
.md-zoho-steps li { margin-bottom: 0.35rem; }
.md-zoho-steps a { color: var(--deep-maroon); font-weight: 600; }
[data-theme="dark"] .md-zoho-steps a { color: var(--bright-scarlet-light); }
.md-link { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--deep-maroon); text-decoration: underline; cursor: pointer; }
.md-link:disabled { opacity: 0.6; cursor: default; }
[data-theme="dark"] .md-link { color: var(--bright-scarlet-light); }

/* My Domains: Gmail is the featured inbox option, and an inbox's renewal sits with the domain's */
.md-plan-featured { position: relative; border-color: var(--deep-maroon); background: rgba(107, 11, 34, 0.04); box-shadow: 0 8px 24px -16px rgba(107, 11, 34, 0.5); }
[data-theme="dark"] .md-plan-featured { border-color: var(--bright-scarlet-light); background: rgba(255, 59, 59, 0.06); }
.md-plan-tag { align-self: flex-start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet)); border-radius: 999px; padding: 0.15rem 0.6rem; }
.md-renew-mail { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--hairline); }
.md-renew-mail-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.3rem; color: var(--text-primary); }

/* My Domains: renew with Dotdeed */
.md-renew-panel[hidden] { display: none; }
.md-card .md-muted a { color: var(--deep-maroon); font-weight: 600; }
[data-theme="dark"] .md-card .md-muted a { color: var(--bright-scarlet-light); }
.md-renew-panel { margin-top: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 14px; background: var(--bg-secondary); display: flex; flex-direction: column; gap: 0.75rem; }
.md-renew-line { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.md-renew-line input { width: 1.1rem; height: 1.1rem; accent-color: var(--deep-maroon); flex: 0 0 auto; }
.md-renew-text { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; color: var(--text-primary); }
.md-renew-text small { color: var(--text-secondary); font-size: 0.82rem; }
.md-renew-price { font-weight: 700; color: var(--deep-maroon); }
[data-theme="dark"] .md-renew-price { color: var(--bright-scarlet-light); }
.md-renew-off { opacity: 0.6; cursor: default; }
.md-renew-total { margin: 0; font-weight: 700; color: var(--text-primary); }

/* ===== HOME: gift-first hero, prices, "what is a domain" actions ===== */
.s-hero-occasions {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.6rem;
    padding: 0;
}

.s-hero-occasions li {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    padding: 0.28rem 0.7rem;
}

.s-hero-price {
    margin: 1.1rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.5;
}

.s-hero-price[hidden] { display: none; }

.s-product-price[hidden] { display: none; }

.s-product-price small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

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

@media (max-width: 900px) {
    .s-hero-occasions { justify-content: center; }
    .s-hero-price { text-align: center; }
    .s-vision-actions { justify-content: flex-start; }
}

/* A tier pill with no price yet (the server has not answered) shows just its name. */
.tier-pill-price:empty { display: none; }

/* "Give them a real physical gift": the words on the left, the photo on the right. */
.s-vision-section .s-vision-grid {
    gap: clamp(2rem, 5vw, 4.5rem);
}

.s-vision-section .s-vision-content {
    flex: 1.15;
    min-width: 0;
}

.s-vision-section .s-vision-visual {
    flex: 1;
    min-width: 0;
}

.s-vision-section .vision-photo {
    max-width: 460px;
}

.s-vision-section .s-section-title {
    text-align: left;
}

.s-vision-section .s-vision-text {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 1.75rem;
}

.s-occasions {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.s-occasions li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.8rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--hairline);
    border-radius: 14px;
}

.s-occasions strong {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.1px;
    color: var(--text-primary);
}

.s-occasions span {
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

@media (max-width: 900px) {
    .s-vision-section .s-vision-grid {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .s-occasions {
        grid-template-columns: 1fr;
    }
}

/* ===== ABOUT: tabs ===== */
.about-tabs {
    position: sticky;
    top: 92px;
    z-index: 5;
    display: flex;
    max-width: 1100px;
    margin: 0 auto 1.5rem;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: var(--bg-card);
    box-shadow: var(--sheet-shadow);
    overflow-x: auto;
    scrollbar-width: none;
}

.about-tabs::-webkit-scrollbar { display: none; }

.about-tab {
    flex: 1 1 0;
    min-width: max-content;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.9rem 1.1rem;
    border: 0;
    border-right: 1px solid var(--hairline);
    background: transparent;
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.about-tab:last-child { border-right: 0; }
.about-tab:hover { color: var(--text-primary); background: var(--bg-secondary); }
.about-tab:focus-visible { outline: 2px solid var(--deep-maroon); outline-offset: -3px; }
.about-tab.active { background: var(--deep-maroon); color: #fff; }
[data-theme="dark"] .about-tab.active { background: var(--bright-scarlet-light); color: #1a1a24; }
[data-theme="dark"] .about-tab:focus-visible { outline-color: var(--bright-scarlet-light); }

.about-pane {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-pane[hidden] { display: none; }

/* Jump targets sit clear of the header and the sticky tab bar. */
.about-pane [id],
.about-doc .legal-doc [id] {
    scroll-margin-top: 150px;
}

/* ===== ABOUT: the My Domains guide ===== */
.about-guide-block {
    padding-top: 1.5rem;
    border-top: 1px solid var(--hairline);
}

.about-guide-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
    margin: 0 0 0.6rem;
}

.about-guide-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.about-guide-text {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 0.9rem;
    max-width: 760px;
}

.about-glossary {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1rem;
    max-width: 760px;
}

.about-glossary > div {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.25rem 1rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-secondary);
}

.about-glossary dt {
    font-weight: 700;
    color: var(--deep-maroon);
}

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

.about-glossary dd {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.about-callout {
    margin: 0;
    max-width: 760px;
    padding: 0.8rem 1rem;
    border: 1px solid #F3D3D7;
    border-left: 4px solid var(--bright-scarlet);
    border-radius: 12px;
    background: #FDF3F4;
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}

[data-theme="dark"] .about-callout {
    background: rgba(214, 40, 40, 0.1);
    border-color: rgba(214, 40, 40, 0.35);
    border-left-color: var(--bright-scarlet);
}

.about-steps-list {
    counter-reset: aboutstep;
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    max-width: 760px;
    display: grid;
    gap: 0.6rem;
}

.about-steps-list li {
    counter-increment: aboutstep;
    position: relative;
    padding: 0.7rem 0.9rem 0.7rem 3rem;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-secondary);
    line-height: 1.6;
}

.about-steps-list li strong { color: var(--text-primary); }

.about-steps-list li::before {
    content: counter(aboutstep);
    position: absolute;
    left: 0.8rem;
    top: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--deep-maroon), var(--bright-scarlet));
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-bullets {
    margin: 0;
    padding-left: 1.2rem;
    max-width: 760px;
    color: var(--text-secondary);
    line-height: 1.65;
    display: grid;
    gap: 0.5rem;
}

.about-bullets strong { color: var(--text-primary); }

.about-guide-actions { margin-top: 0.5rem; }

/* My Domains: a quiet link to the guide under the page heading */
.md-guide-link-row { margin: 0.4rem 0 0; font-size: 0.9rem; }
.md-guide-link { color: var(--deep-maroon); font-weight: 600; }
[data-theme="dark"] .md-guide-link { color: var(--bright-scarlet-light); }

@media (max-width: 700px) {
    .about-tabs { top: 76px; border-radius: 12px; }
    .about-tab { flex: 0 0 auto; padding: 0.8rem 0.95rem; font-size: 0.9rem; }
    .about-glossary > div { grid-template-columns: 1fr; }
}

/* The About panel clips its decoration without becoming a scroll container, so the tab bar can stick. */
#about.about-panel { overflow: clip; }

/* ===== HOME: two framed certificates hang over the sides of "Three steps." ===== */
/* The storefront panel used to clip anything outside it; it now lets the certificates overhang,
   and the page container stops a sideways scrollbar appearing instead. */
.storefront-panel {
    overflow: visible;
}

.main-container {
    overflow-x: clip;
}

.s-steps-cert {
    /* --hang: how far a certificate reaches past the box. It never goes further than the gap
       between the box and the edge of the page, so nothing is cut off or scrolls sideways. */
    --w: clamp(120px, 15vw, 200px);
    --gutter: min(100px, max(24px, calc((100vw - 1200px) / 2)));
    --hang: max(0px, min(calc(var(--w) * 0.3), calc(var(--gutter) - 16px)));
    position: absolute;
    z-index: 2;
    width: var(--w);
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 22px 22px rgba(29, 29, 31, 0.2)) drop-shadow(0 3px 6px rgba(29, 29, 31, 0.1));
}

.s-steps-cert-left {
    left: calc(var(--hang) * -1);
    top: -2.75rem;
    transform: rotate(-6deg);
}

.s-steps-cert-right {
    --w: clamp(130px, 16vw, 215px);
    right: calc(var(--hang) * -1);
    top: -2.25rem;
    transform: rotate(5deg);
}

[data-theme="dark"] .s-steps-cert {
    filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

@media (max-width: 900px) {
    /* On a phone there is no room beside the heading, so they peek over the top corners instead. */
    .s-steps-section {
        padding-top: clamp(7.75rem, 31vw, 10rem);
    }

    .s-steps-cert-left,
    .s-steps-cert-right {
        --w: clamp(84px, 24vw, 120px);
        top: calc(var(--w) * -0.2);
    }

    .s-steps-cert-left { left: 0.6rem; }
    .s-steps-cert-right { right: 0.6rem; }
}

/* ===== HOME: design showcase (three certificates in grey boxes) ===== */
.s-designs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 1.75rem);
    padding-top: 0.75rem;
}

.s-design {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The lifted certificate must sit above its neighbours, not under them. */
.s-design:hover,
.s-design:focus-visible {
    z-index: 3;
    outline: none;
}

.s-design-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1.04;
    min-height: 0; /* the picture must not stretch its box: all three stay the same size */
    flex: none;
    margin-bottom: 0.8rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--hairline);
    border-radius: 18px;
    transition: box-shadow 0.3s ease;
}

.s-design-stage img {
    height: 80%;
    width: auto;
    max-width: 84%;
    object-fit: contain;
    filter: drop-shadow(0 10px 14px rgba(29, 29, 31, 0.16));
    transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.24, 1), filter 0.35s ease;
}

/* On hover the certificate pops out of its box and hovers above the top edge. */
.s-design:hover .s-design-stage img,
.s-design:focus-visible .s-design-stage img {
    transform: translateY(-18%) scale(1.12) rotate(-2deg);
    filter: drop-shadow(0 30px 26px rgba(29, 29, 31, 0.28)) drop-shadow(0 4px 8px rgba(29, 29, 31, 0.12));
}

.s-design:focus-visible .s-design-stage {
    box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.35);
}

[data-theme="dark"] .s-design-stage img {
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .s-design:hover .s-design-stage img,
[data-theme="dark"] .s-design:focus-visible .s-design-stage img {
    filter: drop-shadow(0 30px 26px rgba(0, 0, 0, 0.65)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.s-design-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-primary);
}

.s-design-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.s-design-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.6rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--deep-maroon);
}

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

.s-design-link svg {
    transition: transform 0.25s ease;
}

.s-design:hover .s-design-link svg,
.s-design:focus-visible .s-design-link svg {
    transform: translateX(4px);
}

@media (hover: none) {
    .s-design:active .s-design-stage img {
        transform: translateY(-6%) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .s-design-stage img,
    .s-design-link svg {
        transition: none;
    }
}

@media (max-width: 700px) {
    /* Stay three across on a phone (stacking them made the page very long):
       a smaller picture, the name and the link, centred under each box. The
       longer description is dropped; the next step explains the design. */
    .s-designs {
        gap: 0.6rem;
    }

    .s-design {
        align-items: center;
        text-align: center;
        gap: 0.2rem;
    }

    .s-design-stage {
        align-self: stretch;
        margin-bottom: 0.4rem;
        border-radius: 14px;
    }

    .s-design-name {
        font-size: 0.95rem;
    }

    .s-design-desc {
        display: none;
    }

    .s-design-link {
        padding-top: 0.2rem;
        gap: 0.2rem;
        font-size: 0.75rem;
        line-height: 1.3;
        justify-content: center;
    }

    .s-design-link svg {
        width: 12px;
        height: 12px;
        flex: none;
    }
}

/* ===== HOME: the three tiers show real pictures ===== */
.s-product-preview {
    height: clamp(250px, 26vw, 300px);
}

.s-product-preview img {
    height: 86%;
    width: auto;
    max-width: 84%;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(29, 29, 31, 0.14));
    transition: transform 0.35s cubic-bezier(0.22, 0.9, 0.24, 1), filter 0.35s ease;
}

/* A gentler version of the design showcase's lift: a small rise and a hint of growth,
   kept inside the grey box (the card clips anything outside it). */
.s-product-card:hover .s-product-preview img,
.s-product-card:focus-visible .s-product-preview img {
    transform: translateY(-3%) scale(1.04);
    filter: drop-shadow(0 14px 14px rgba(29, 29, 31, 0.2));
}

[data-theme="dark"] .s-product-preview img {
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.5));
}

[data-theme="dark"] .s-product-card:hover .s-product-preview img {
    filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.6));
}

@media (prefers-reduced-motion: reduce) {
    .s-product-preview img { transition: none; }
}

/* On a phone the three tiers stay side by side instead of stacking into a very
   long column: a shorter picture, then name, "From $X" and "Choose →" centred
   underneath. The description is dropped here; the next step explains the tier. */
@media (max-width: 700px) {
    .s-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .s-product-card {
        border-radius: 14px;
    }

    .s-product-card:hover {
        transform: none;
    }

    .s-product-badge {
        top: 6px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        padding: 3px 8px;
        font-size: 0.5rem;
        letter-spacing: 0.3px;
        white-space: nowrap;
    }

    .s-product-preview {
        height: 150px;
    }

    .s-product-featured .s-product-preview {
        padding-top: 14px;
    }

    .s-product-preview img {
        height: 82%;
        max-width: 80%;
    }

    .s-product-body {
        padding: 0.7rem 0.4rem 0.8rem;
        text-align: center;
    }

    .s-product-name {
        font-size: 0.95rem;
        margin-bottom: 0.5rem;
    }

    .s-product-desc {
        display: none;
    }

    .s-product-footer {
        flex-direction: column;
        gap: 0.35rem;
        padding-top: 0.6rem;
    }

    .s-product-price {
        font-size: 1.15rem;
        line-height: 1.15;
    }

    .s-product-price small {
        display: block;
        font-size: 0.65rem;
    }

    .s-product-cta {
        font-size: 0.75rem;
    }

    .s-product-card:hover .s-product-cta {
        transform: none;
    }
}

/* On a phone the three feature cards stay side by side instead of stacking: the
   icon, the title and the link, centred. The longer description is dropped at
   this width; the page you land on explains each step. */
@media (max-width: 700px) {
    .s-features-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.6rem;
    }

    .s-feature-card {
        padding: 1rem 0.5rem;
        gap: 0.5rem;
        align-items: center;
        text-align: center;
        border-radius: 14px;
    }

    .s-feature-card:hover {
        transform: none;
    }

    .s-feature-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

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

    .s-feature-title {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .s-feature-desc {
        display: none;
    }

    .s-feature-link {
        margin-top: auto;
        font-size: 0.75rem;
        line-height: 1.3;
        text-wrap: balance;
    }

    .s-feature-card:hover .s-feature-link {
        transform: none;
    }
}