/**
 * Expressions In - Gift Finder
 * A curated gallery experience for meaningful gifting
 * v1.15.0 - Gallery Collection badge and product placeholders
 */

/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=Outfit:wght@700&display=swap');

/* ============================================
   BRAND COLORS & DESIGN TOKENS
   ============================================ */
:root {
    /* Brand Colors */
    --purple: #4B3E89;
    --purple-light: #7A6FB0;
    --purple-muted: #9890B5;
    --teal: #0E90A5;
    --teal-light: #3AABB9;
    --lime-green: #88B735;

    /* Neutrals - Warm Gallery Tones */
    --warm-white: #FDFCFB;
    --cream: #FAF9F7;
    --warm-gray-100: #F5F4F2;
    --warm-gray-200: #ECEAE7;
    --warm-gray-300: #D8D5D0;
    --warm-gray-400: #6F6A64; /* Darkened for WCAG AA contrast (4.5:1) */
    --warm-gray-500: #5D5852;
    --warm-gray-600: #4D4943;
    --warm-gray-700: #3D3A35;
    --charcoal: #2D2A26;

    /* Typography */
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 40px;
    --space-xl: 64px;
    --space-2xl: 100px;

    /* Transitions */
    --transition-gentle: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--purple);
    color: white;
    padding: 8px 16px;
    z-index: 1000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 8px 0;
    transition: top 0.3s ease;
}

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

/* Screen reader only content */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for keyboard navigation */
*:focus {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}

/* High contrast focus for cards and buttons */
.team-option-card:focus-visible,
.shopping-type-card:focus-visible,
.gift-path-card:focus-visible,
.month-card:focus-visible,
.occasion-card:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(75, 62, 137, 0.2);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--warm-white);
    min-height: 100vh;
    color: var(--warm-gray-600);
    line-height: 1.7;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#app {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
}

.container {
    background: transparent;
    padding: var(--space-xl) var(--space-lg);
    position: relative;
}

/* Screen Transitions */
.screen {
    display: none;
    opacity: 0;
    transform: translateY(20px);
}

.screen.active {
    display: block;
    animation: screenFadeIn var(--transition-smooth) forwards;
}

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

/* ============================================
   TYPOGRAPHY - Editorial Style
   ============================================ */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h1 {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

h1 strong {
    color: var(--purple);
    font-weight: 600;
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--charcoal);
    margin-bottom: var(--space-md);
}

h3 {
    font-size: 1.35rem;
    color: var(--warm-gray-700);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

h4 {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--warm-gray-500);
}

p {
    color: var(--warm-gray-600);
    max-width: 600px;
}

.subtitle {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--teal);
    margin-bottom: var(--space-md);
}

/* ============================================
   BUTTONS - Refined & Minimal
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border: none;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-decoration: none;
}

.btn-primary {
    background: var(--purple);
    color: white;
}

.btn-primary:hover {
    background: var(--purple-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(75, 62, 137, 0.25);
}

.btn-secondary {
    background: transparent;
    color: var(--purple);
    border: 1.5px solid var(--purple);
}

.btn-secondary:hover {
    background: var(--purple);
    color: white;
}

.btn-teal {
    background: var(--teal);
    color: white;
}

.btn-teal:hover {
    background: var(--teal-light);
}

.btn-back {
    background: transparent;
    color: var(--warm-gray-500);
    padding: var(--space-sm);
    font-size: 0.85rem;
    font-weight: 400;
}

.btn-back:hover {
    color: var(--purple);
}

.btn-back::before {
    content: '←';
    margin-right: 8px;
    transition: transform var(--transition-gentle);
}

.btn-back:hover::before {
    transform: translateX(-4px);
}

.btn-small {
    padding: 10px 20px;
    font-size: 0.85rem;
}

.btn-subtext {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    opacity: 0.8;
    margin-top: 4px;
}

/* ============================================
   WELCOME & LANDING SCREENS
   ============================================ */
#welcome-screen .container,
#landing-screen .container {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg);
}

/* Decorative Wave Divider */
.divider-wave {
    width: 120px;
    height: 12px;
    margin: var(--space-md) auto;
    opacity: 0.7;
}

.divider-wave svg {
    width: 100%;
    height: 100%;
}

/* Main Logo */
.main-logo {
    display: block;
    max-width: 100%;
    width: 220px;
    height: auto;
    margin: 0 auto var(--space-lg) auto;
    opacity: 0.95;
}

/* Shopping Type Selection Cards */
.shopping-type-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin: var(--space-xl) auto;
    max-width: 560px;
}

.shopping-type-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    padding: var(--space-xl) var(--space-md);
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.shopping-type-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--purple), var(--teal));
    transform: scaleX(0);
    transition: transform var(--transition-gentle);
}

.shopping-type-card:hover {
    border-color: var(--warm-gray-300);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.shopping-type-card:hover::before {
    transform: scaleX(1);
}

.shopping-type-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-sm);
    opacity: 0.9;
}

.shopping-type-card h3 {
    font-family: var(--font-display);
    color: var(--charcoal);
    font-size: 1.35rem;
    margin-bottom: var(--space-xs);
}

.shopping-type-card p {
    font-size: 0.9rem;
    color: var(--warm-gray-500);
    margin: 0 auto;
    line-height: 1.5;
}

/* ============================================
   TRUST SIGNALS & SOCIAL PROOF
   ============================================ */

/* Trust Bar - Welcome Screen */
.trust-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--warm-gray-200);
    flex-wrap: wrap;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--warm-gray-500);
    font-size: 0.8rem;
}

.trust-icon {
    font-size: 1rem;
    opacity: 0.7;
}

.trust-text {
    font-weight: 400;
}

/* Social Proof Snippet - Landing Screen */
.social-proof-snippet {
    text-align: center;
    color: var(--warm-gray-500);
    font-size: 0.85rem;
    font-style: italic;
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--warm-gray-200);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Form Confidence Builders */
.form-confidence {
    text-align: center;
    margin-top: var(--space-md);
    padding-top: var(--space-sm);
}

.confidence-text {
    color: var(--warm-gray-500);
    font-size: 0.8rem;
    margin: 4px 0;
    font-style: italic;
}

/* Trusted By Section */
.trusted-by {
    text-align: center;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--warm-gray-200);
}

.trusted-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--warm-gray-400);
    margin-bottom: var(--space-xs);
}

.trusted-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.trusted-logo-item {
    font-size: 0.85rem;
    color: var(--warm-gray-600);
    font-weight: 500;
}

.trusted-divider {
    color: var(--warm-gray-300);
}

/* Name Input */
.name-input-container {
    margin-bottom: var(--space-xl);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

.name-input-container label {
    display: block;
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

.name-input-container input {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--warm-gray-300);
    border-radius: 4px;
    font-size: 1.1rem;
    font-family: var(--font-body);
    text-align: center;
    transition: all var(--transition-gentle);
    background: white;
}

.name-input-container input:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(75, 62, 137, 0.1);
}

.name-input-container input::placeholder {
    color: var(--warm-gray-400);
    font-style: italic;
}

/* ============================================
   GIFT PATH CARDS - Gallery Style
   ============================================ */
.gift-paths {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin: var(--space-xl) 0;
}

.gift-path-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    padding: var(--space-md) var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-smooth);
    text-align: center;
    position: relative;
}

.gift-path-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--purple);
    opacity: 0;
    transition: all var(--transition-gentle);
}

.gift-path-card:hover {
    border-color: transparent;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
    transform: translateY(-6px);
}

.gift-path-card:hover::after {
    opacity: 1;
    width: 60px;
}

.card-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--space-xs) auto;
}

.card-icon svg,
.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: all var(--transition-gentle);
}

.gift-path-card:hover .card-icon svg,
.gift-path-card:hover .card-icon img {
    filter: none;
    opacity: 1;
}

/* Flag emoji icon for featured card */
.flag-emoji-icon {
    font-size: 2.5rem;
    line-height: 1;
    display: block;
}

.gift-path-card h3 {
    font-family: var(--font-display);
    color: var(--charcoal);
    font-size: 1rem;
    margin-bottom: 4px;
}

.gift-path-card h3 .theme-name {
    color: var(--purple);
    font-style: italic;
}

.gift-path-card p {
    font-size: 0.8rem;
    color: var(--warm-gray-500);
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   PERSONALITY OPTIONS - Elegant Layout
   ============================================ */
#personality-options-screen .container,
#trait-selector-screen .container {
    text-align: center;
}

#personality-title {
    text-align: center;
}

.ocean-preview {
    padding-top: var(--space-md);
    text-align: center;
}

.ocean-preview h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

.know-trait-prompt {
    font-size: 1rem;
    color: var(--warm-gray-500);
    margin-bottom: var(--space-sm);
    font-style: italic;
}

.know-trait-prompt span {
    font-weight: 500;
    color: var(--teal);
    font-style: normal;
}

.disclaimer {
    font-size: 0.85rem;
    color: var(--warm-gray-400);
    font-style: italic;
    text-align: center;
    margin: var(--space-md) auto;
    max-width: 420px;
}

.or-divider {
    text-align: center;
    color: var(--warm-gray-400);
    font-size: 0.85rem;
    margin: var(--space-md) 0;
    font-weight: 400;
    letter-spacing: 0.1em;
}

/* Trait Pills */
.trait-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-sm);
}

.pill {
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.8rem;
    font-weight: 500;
    color: white;
    transition: all var(--transition-gentle);
}

.trait-pills.clickable .pill {
    cursor: pointer;
}

.trait-pills.clickable .pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.pill.openness { background: var(--purple); }
.pill.conscientiousness { background: var(--teal); }
.pill.extraversion { background: var(--lime-green); }
.pill.agreeableness { background: var(--purple-muted); }
.pill.neuroticism { background: #0E7A8C; }

/* Trait Cards */
.trait-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.trait-card {
    padding: var(--space-md);
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: left;
    background: white;
}

.trait-card:hover {
    border-color: var(--teal);
    box-shadow: 0 8px 24px rgba(14, 144, 165, 0.1);
}

.trait-card.selected {
    border-color: var(--purple);
    background: linear-gradient(135deg, rgba(75, 62, 137, 0.06) 0%, rgba(14, 144, 165, 0.04) 100%);
}

.trait-card h3 {
    font-family: var(--font-display);
    color: var(--purple);
    margin-bottom: 6px;
    font-size: 1.15rem;
}

.trait-card p {
    font-size: 0.85rem;
    color: var(--warm-gray-500);
    line-height: 1.5;
}

/* ============================================
   QUIZ SCREEN - Focused & Clean
   ============================================ */
/* ============================================
   QUIZ INTRO SCREEN
   ============================================ */
.quiz-intro-container {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-md);
}

.quiz-intro-container h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    margin-bottom: var(--space-sm);
}

.quiz-intro-text {
    color: var(--warm-gray-600);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.quiz-intro-details {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.quiz-detail {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--warm-gray-500);
    font-size: 0.9rem;
}

.quiz-detail-icon {
    font-size: 1.2rem;
}

.btn-large {
    padding: 18px 48px;
    font-size: 1.1rem;
}

/* ============================================
   QUIZ SCREEN - Enhanced UX
   ============================================ */
#quiz-screen .container,
#quiz-intro-screen .container {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.quiz-progress-container {
    margin-bottom: var(--space-lg);
}

.quiz-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--warm-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--teal));
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
}

.quiz-progress-text {
    color: var(--warm-gray-500);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Question slide animation */
.question-slide {
    animation: slideIn 0.4s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.question-slide.slide-out {
    animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

#question-text {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
}

.question-context {
    color: var(--warm-gray-400);
    font-style: italic;
    margin-bottom: var(--space-lg);
    font-size: 0.95rem;
}

/* Enhanced Likert Scale */
.likert-scale {
    display: flex;
    gap: 12px;
    margin-bottom: var(--space-lg);
    width: 100%;
    justify-content: center;
}

.likert-btn {
    flex: 1;
    max-width: 120px;
    min-height: 100px;
    padding: 16px 8px;
    border: 2px solid var(--warm-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.likert-icon {
    font-size: 2rem;
    transition: transform 0.3s ease;
}

.likert-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--warm-gray-600);
    text-align: center;
    line-height: 1.2;
}

.likert-btn:hover {
    border-color: var(--purple);
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(75, 62, 137, 0.15);
}

.likert-btn:hover .likert-icon {
    transform: scale(1.2);
}

.likert-btn.selected {
    border-color: var(--purple);
    background: linear-gradient(135deg, var(--purple), var(--teal));
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(75, 62, 137, 0.3);
}

.likert-btn.selected .likert-icon {
    transform: scale(1.3);
}

.likert-btn.selected .likert-label {
    color: white;
}

/* Keep old scale-btn for backwards compatibility */
.progress-bar {
    width: 100%;
    height: 3px;
    background: var(--warm-gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--teal));
    transition: width var(--transition-smooth);
}

.progress-text {
    color: var(--warm-gray-400);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xl);
}

.answer-scale {
    display: flex;
    gap: 8px;
    margin-bottom: var(--space-lg);
    width: 100%;
}

.scale-btn {
    flex: 1;
    padding: 16px 8px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all var(--transition-gentle);
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
    color: white;
    letter-spacing: 0.02em;
}

.scale-btn:nth-child(1) { background: var(--purple-muted); }
.scale-btn:nth-child(2) { background: var(--purple); }
.scale-btn:nth-child(3) { background: var(--warm-gray-500); }
.scale-btn:nth-child(4) { background: var(--teal); }
.scale-btn:nth-child(5) { background: var(--lime-green); }

.scale-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.scale-btn.selected {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    outline: 3px solid white;
    outline-offset: -3px;
}

/* ============================================
   PERSONALITY RESULT CARD
   ============================================ */
.personality-result-card {
    background: linear-gradient(135deg, var(--purple) 0%, var(--teal) 100%);
    border-radius: 16px;
    padding: var(--space-xl);
    text-align: center;
    color: white;
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

.personality-result-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    pointer-events: none;
}

.result-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: var(--space-sm);
    letter-spacing: 0.05em;
}

.result-trait-name {
    font-family: var(--font-display);
    font-size: 2.2rem;
    margin-bottom: var(--space-sm);
    color: white;
}

.result-trait-description {
    font-size: 1.1rem;
    opacity: 0.95;
    max-width: 400px;
    margin: 0 auto var(--space-lg);
    line-height: 1.5;
    color: white;
}

.result-gifting-tip {
    background: rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(4px);
}

.result-gifting-tip h4 {
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
    color: white;
}

.result-gifting-tip p {
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.5;
    color: white;
    max-width: none;
}

.personality-result-card .btn-primary {
    background: white;
    color: var(--purple);
    margin-bottom: var(--space-sm);
}

.personality-result-card .btn-primary:hover {
    background: var(--cream);
    transform: translateY(-2px);
}

.personality-result-card .btn-secondary {
    background: transparent;
    border-color: rgba(255,255,255,0.5);
    color: white;
    font-size: 0.85rem;
}

.personality-result-card .btn-secondary:hover {
    background: rgba(255,255,255,0.1);
    border-color: white;
}

/* ============================================
   RESULTS SCREEN - Gallery Layout
   ============================================ */
#personality-summary {
    background: var(--warm-gray-100);
    padding: var(--space-lg);
    border-radius: 8px;
    margin-bottom: var(--space-lg);
}

#personality-summary h3 {
    font-family: var(--font-display);
    margin-bottom: var(--space-md);
}

.trait-header {
    padding: var(--space-lg);
    border-radius: 8px;
    margin-bottom: var(--space-lg);
    text-align: center;
    color: white;
}

.trait-header h2 {
    color: white;
    margin-bottom: var(--space-xs);
    font-size: 1.6rem;
}

.trait-header p {
    opacity: 0.9;
    margin-bottom: var(--space-sm);
    font-size: 0.95rem;
    color: white;
    max-width: none;
}

.trait-header .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    border-color: white;
    color: white;
    backdrop-filter: blur(4px);
}

.trait-header .btn-secondary:hover {
    background: white;
    color: var(--purple);
}

.trait-header.openness { background: var(--purple); }
.trait-header.conscientiousness { background: var(--teal); }
.trait-header.extraversion { background: var(--lime-green); }
.trait-header.agreeableness { background: var(--purple-muted); }
.trait-header.neuroticism { background: #0E7A8C; }

.trait-bar-container {
    margin-bottom: var(--space-sm);
}

.trait-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.trait-name-link {
    font-weight: 500;
    color: var(--charcoal);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-gentle);
    padding: 4px 10px;
    border-radius: 4px;
    margin-left: -10px;
    font-size: 0.9rem;
}

.trait-name-link:hover {
    background: var(--warm-gray-100);
    color: var(--purple);
}

.trait-name-link.active {
    background: var(--purple);
    color: white;
}

.trait-level {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.trait-level.high { background: rgba(136, 183, 53, 0.15); color: #5a7a1f; }
.trait-level.neutral { background: var(--warm-gray-200); color: var(--warm-gray-600); }
.trait-level.low { background: rgba(75, 62, 137, 0.1); color: var(--purple); }

.trait-bar {
    height: 6px;
    background: var(--warm-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.trait-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width var(--transition-smooth);
}

.trait-bar-fill.openness { background: var(--purple); }
.trait-bar-fill.conscientiousness { background: var(--teal); }
.trait-bar-fill.extraversion { background: var(--lime-green); }
.trait-bar-fill.agreeableness { background: var(--purple-muted); }
.trait-bar-fill.neuroticism { background: #0E7A8C; }

/* Price Filters */
.filters {
    margin-bottom: var(--space-lg);
}

.filters h4 {
    margin-bottom: var(--space-sm);
    color: var(--warm-gray-500);
    font-size: 0.75rem;
}

.price-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-btn {
    padding: 8px 16px;
    border: 1px solid var(--warm-gray-300);
    border-radius: 20px;
    background: white;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--warm-gray-600);
    transition: all var(--transition-gentle);
}

.filter-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.filter-btn.active {
    background: var(--teal);
    color: white;
    border-color: var(--teal);
}

/* ============================================
   PRODUCT CARDS - Gallery Artwork Style
   ============================================ */
#recommendations,
#month-recommendations,
#scripture-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.product-card {
    background: white;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    transition: all var(--transition-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.product-image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--warm-gray-100);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    margin: 0;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-smooth);
}

.product-card:hover .product-image img {
    transform: scale(1.03);
}

/* Scripture Placeholder Cards */
.scripture-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    min-height: 180px;
    position: relative;
}

.scripture-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.4;
    filter: grayscale(30%);
}

.scripture-placeholder-verse {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    padding: 0 var(--space-sm);
    letter-spacing: 0.02em;
}

.scripture-product-card .product-info h3 {
    color: var(--purple);
}

/* Scripture category card icon */
.scripture-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: var(--space-xs);
}

/* Gallery Collection Badge */
.gallery-badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 8px;
    border-radius: 3px;
    z-index: 2;
}

/* Product Placeholder (for gallery collection items) */
.product-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.product-placeholder-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.5);
    text-align: center;
}

.product-info {
    padding: var(--space-md);
}

.product-info h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin-bottom: 6px;
    color: var(--charcoal);
    font-weight: 500;
}

.product-description {
    font-size: 0.85rem;
    color: var(--warm-gray-500);
    margin-bottom: var(--space-xs);
    line-height: 1.5;
}

.product-match {
    font-size: 0.8rem;
    color: var(--teal);
    font-weight: 500;
    margin-bottom: var(--space-xs);
    font-style: italic;
}

.product-price {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--purple);
    margin-bottom: var(--space-sm);
}

.no-results {
    text-align: center;
    color: var(--warm-gray-400);
    padding: var(--space-xl);
    grid-column: 1 / -1;
    font-style: italic;
}

/* ============================================
   MONTH SELECTOR - Calendar Grid
   ============================================ */
#month-selector-screen .container {
    text-align: center;
}

#month-selector-title {
    text-align: center;
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
}

.month-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 6px;
    padding: var(--space-md) var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: center;
}

.month-card:hover {
    border-color: var(--purple);
    box-shadow: 0 8px 24px rgba(75, 62, 137, 0.1);
    transform: translateY(-2px);
}

.month-card.selected {
    border-color: var(--purple);
    background: linear-gradient(135deg, rgba(75, 62, 137, 0.08) 0%, rgba(14, 144, 165, 0.06) 100%);
}

.month-card .month-name {
    display: block;
    font-family: var(--font-display);
    color: var(--charcoal);
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 4px;
}

.month-card .month-flower {
    display: block;
    color: var(--warm-gray-400);
    font-size: 0.75rem;
    font-style: italic;
}

/* Month Thumbnail */
.month-thumb {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 auto var(--space-xs);
    background-size: cover;
    background-position: center;
    border: 2px solid var(--warm-gray-100);
    transition: all var(--transition-gentle);
}

.month-card:hover .month-thumb {
    transform: scale(1.05);
    border-color: var(--purple-light);
}

/* Month Helper Section */
.month-helper {
    background: linear-gradient(135deg, rgba(75, 62, 137, 0.05) 0%, rgba(14, 144, 165, 0.05) 100%);
    border: 1px solid var(--warm-gray-200);
    border-radius: 12px;
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: center;
}

.month-helper .helper-question {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--charcoal);
    margin-bottom: var(--space-xs);
}

.month-helper .helper-text {
    color: var(--warm-gray-500);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.month-helper .btn-small {
    padding: 8px 20px;
    font-size: 0.85rem;
}

/* Season Sections */
.season-section {
    margin-bottom: var(--space-md);
}

.season-label {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
    gap: var(--space-sm);
}

.season-label::before,
.season-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--warm-gray-200);
}

.season-label span {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--warm-gray-400);
    padding: 0 var(--space-sm);
}

.season-grid {
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
}

/* Poetic Intro */
.month-poetic-intro {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, rgba(75, 62, 137, 0.03) 0%, rgba(14, 144, 165, 0.03) 100%);
    border-radius: 12px;
}

.month-poetic-intro h2 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--purple);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

.month-poetic-intro p {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-style: italic;
    color: var(--warm-gray-600);
    max-width: 500px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Month Results Header */
.month-header {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    padding: var(--space-lg);
    margin: var(--space-md) 0;
    text-align: center;
}

.month-name-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--warm-gray-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-xs);
}

.month-header h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--purple);
    margin-bottom: var(--space-md);
    font-style: italic;
}

.flower-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-md);
    text-align: left;
}

.flower-item {
    background: var(--warm-gray-100);
    border-radius: 6px;
    padding: var(--space-md);
    border-left: 3px solid var(--teal);
}

.flower-item h4 {
    font-family: var(--font-display);
    color: var(--charcoal);
    font-size: 1.1rem;
    margin-bottom: 6px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.flower-item p {
    color: var(--warm-gray-500);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ============================================
   SCRIPTURE SELECTOR - Reverent & Clean
   ============================================ */
#scripture-selector-screen .container {
    text-align: center;
}

.section-logo {
    display: block;
    max-width: 240px;
    height: auto;
    margin: 0 auto var(--space-md) auto;
    opacity: 0.9;
}

.section-logo.scripture-logo {
    max-width: 280px;
}

.centered-title {
    text-align: center;
    margin-bottom: var(--space-xs);
}

.centered-subtitle {
    text-align: center;
    color: var(--warm-gray-500);
    font-size: 1rem;
    margin-bottom: var(--space-md);
    font-style: italic;
}

.scripture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.scripture-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.scripture-card:hover {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.scripture-card .scripture-name {
    display: block;
    font-family: var(--font-display);
    color: var(--purple);
    font-weight: 500;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.scripture-card .scripture-desc {
    display: block;
    color: rgba(0, 0, 0, 0.65);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ============================================
   OCCASION SELECTOR (Individual Path)
   ============================================ */

#occasion-screen .container {
    text-align: center;
}

.occasion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    margin: var(--space-lg) 0;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.occasion-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    padding: var(--space-md) var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: center;
}

.occasion-card:hover {
    border-color: var(--purple);
    box-shadow: 0 8px 24px rgba(75, 62, 137, 0.12);
    transform: translateY(-3px);
}

.occasion-card .occasion-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: var(--space-xs);
}

.occasion-card .occasion-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.3;
}

/* Browse by theme section (replaces skip button) */
.browse-themes-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--warm-gray-200);
}

.browse-themes-label {
    color: var(--warm-gray-500);
    font-size: 0.9rem;
    margin-bottom: var(--space-sm);
    text-align: center;
}

.browse-themes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    max-width: 600px;
    margin: 0 auto;
}

.browse-theme-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-sm);
    background: var(--warm-gray-50);
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--transition-gentle);
}

.browse-theme-btn:hover {
    background: white;
    border-color: var(--purple);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 62, 137, 0.1);
}

.browse-theme-icon {
    font-size: 1.5rem;
}

.browse-theme-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--charcoal);
    text-align: center;
    line-height: 1.2;
}

/* Recommendation badge on theme cards */
.recommendation-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--lime-green);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    white-space: nowrap;
    z-index: 5;
}

/* ============================================
   AMERICAN SPIRIT - America 250 Collection
   ============================================ */

/* Featured card on landing page */
.gift-path-card.featured {
    position: relative;
    border: 2px solid #B22234;
    background: linear-gradient(135deg, rgba(178, 34, 52, 0.03) 0%, rgba(60, 59, 110, 0.03) 100%);
}

.gift-path-card.featured:hover {
    border-color: #3C3B6E;
    box-shadow: 0 12px 32px rgba(60, 59, 110, 0.2);
}

.featured-badge {
    position: absolute;
    top: -12px;
    right: 16px;
    background: linear-gradient(135deg, #B22234 0%, #3C3B6E 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* America 250 Header */
.america-250-header {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.america-250-badge {
    display: inline-block;
    background: linear-gradient(135deg, #B22234 0%, #3C3B6E 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 20px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* American Spirit Logo placeholder */
.american-spirit-logo {
    max-height: 80px;
    margin-bottom: var(--space-sm);
}

/* American Spirit Grid - similar to scripture but with patriotic styling */
.american-spirit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.american-spirit-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    padding: var(--space-md);
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.american-spirit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #B22234 0%, white 50%, #3C3B6E 100%);
    opacity: 0;
    transition: opacity var(--transition-gentle);
}

.american-spirit-card:hover {
    border-color: #B22234;
    box-shadow: 0 8px 24px rgba(178, 34, 52, 0.15);
    transform: translateY(-2px);
}

.american-spirit-card:hover::before {
    opacity: 1;
}

.american-spirit-card .category-icon {
    display: block;
    font-size: 2rem;
    margin-bottom: var(--space-xs);
}

.american-spirit-card .category-name {
    display: block;
    font-family: var(--font-display);
    color: #3C3B6E;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 6px;
}

.american-spirit-card .category-desc {
    display: block;
    color: var(--warm-gray-500);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* ============================================
   HOME / START OVER LINK
   ============================================ */
.home-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 12px 20px;
    margin-bottom: var(--space-md);
    background: var(--purple);
    border-radius: 24px;
    border: 2px solid var(--purple);
    transition: all var(--transition-gentle);
    box-shadow: 0 2px 8px rgba(75, 62, 137, 0.25);
}

.home-link:hover {
    background: var(--purple-light);
    border-color: var(--purple-light);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 62, 137, 0.35);
}

/* Position home link at top left of centered containers */
#occasion-screen .container,
#landing-screen .container,
#personality-options-screen .container,
#month-selector-screen .container,
#scripture-selector-screen .container,
#american-spirit-selector-screen .container,
#trait-selector-screen .container,
#quiz-intro-screen .container,
#quiz-screen .container,
#results-screen .container,
#month-results-screen .container,
#scripture-results-screen .container,
#american-spirit-results-screen .container {
    position: relative;
}

#occasion-screen .home-link,
#landing-screen .home-link,
#personality-options-screen .home-link,
#month-selector-screen .home-link,
#scripture-selector-screen .home-link,
#american-spirit-selector-screen .home-link,
#trait-selector-screen .home-link,
#quiz-intro-screen .home-link,
#quiz-screen .home-link,
#results-screen .home-link,
#month-results-screen .home-link,
#scripture-results-screen .home-link,
#american-spirit-results-screen .home-link {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    margin-bottom: 0;
    z-index: 10;
}

/* Team home link - visible on desktop only */
.team-home-link {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 10;
}

/* ============================================
   TEAM QUESTIONS - Professional Flow
   ============================================ */
#team-questions-screen .container {
    text-align: center;
    padding: var(--space-lg) var(--space-md);
    max-width: 720px;
    margin: 0 auto;
}

/* ============================================
   MILESTONE PROGRESS BAR (Desktop)
   ============================================ */
.milestone-progress {
    margin-bottom: var(--space-lg);
    padding: 0 var(--space-sm);
}

.milestone-track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    position: relative;
}

.milestone {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default;
    position: relative;
    min-width: 70px;
}

.milestone.completed {
    cursor: pointer;
}

.milestone-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--warm-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.milestone-dot .checkmark {
    display: none;
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.milestone.completed .milestone-dot {
    background: var(--teal);
}

.milestone.completed .milestone-dot .checkmark {
    display: block;
}

.milestone.completed:hover .milestone-dot {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(14, 144, 165, 0.3);
}

.milestone.current .milestone-dot {
    background: var(--purple);
    box-shadow: 0 0 0 4px rgba(75, 62, 137, 0.2);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(75, 62, 137, 0.2);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(75, 62, 137, 0.1);
    }
}

.milestone.upcoming .milestone-dot {
    background: var(--warm-gray-200);
}

.milestone-label {
    font-size: 0.65rem;
    color: var(--warm-gray-400);
    margin-top: 6px;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.milestone.completed .milestone-label {
    color: var(--teal);
}

.milestone.current .milestone-label {
    color: var(--purple);
    font-weight: 600;
}

.milestone-connector {
    flex: 1;
    height: 2px;
    background: var(--warm-gray-200);
    margin-top: 13px;
    min-width: 20px;
    max-width: 40px;
    transition: background 0.3s ease;
}

.milestone-connector.completed {
    background: var(--teal);
}

.milestone-section-label {
    text-align: center;
    color: var(--warm-gray-500);
    font-size: 0.8rem;
    font-style: italic;
    margin-top: var(--space-md);
}

/* Interstitial Screen */
.team-interstitial {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: fadeIn 0.3s ease;
}

.interstitial-content {
    text-align: center;
    padding: var(--space-xl);
    max-width: 400px;
}

.interstitial-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-md);
}

.interstitial-content h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

.interstitial-content p {
    color: var(--warm-gray-500);
    margin-bottom: var(--space-lg);
}

/* ============================================
   PROGRESS SAVE MODALS & BANNERS
   ============================================ */

/* Modal Overlay */
.progress-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 300;
    animation: fadeIn 0.3s ease;
}

.progress-modal {
    background: white;
    border-radius: 16px;
    padding: var(--space-xl);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
}

.progress-modal h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

.progress-modal p {
    color: var(--warm-gray-500);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.progress-modal-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
}

.progress-modal-buttons .btn {
    flex: 1;
    max-width: 150px;
}

/* Exit Intent Modal */
.progress-modal.exit-intent {
    padding-top: var(--space-2xl);
}

.modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--warm-gray-400);
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: var(--warm-gray-100);
    color: var(--charcoal);
}

#exit-intent-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

#exit-intent-email {
    padding: 14px 16px;
    border: 1px solid var(--warm-gray-300);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.2s ease;
}

#exit-intent-email:focus {
    outline: none;
    border-color: var(--purple);
}

.exit-intent-dismiss {
    margin-bottom: 0;
}

.exit-intent-dismiss a {
    color: var(--warm-gray-400);
    font-size: 0.85rem;
    text-decoration: none;
}

.exit-intent-dismiss a:hover {
    color: var(--warm-gray-600);
}

/* Idle Banner (Mobile) */
.idle-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-light) 100%);
    color: white;
    padding: var(--space-sm) var(--space-md);
    padding-right: 50px;
    z-index: 150;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.idle-banner p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.idle-banner a {
    color: white;
    text-decoration: underline;
}

.idle-banner-close {
    position: absolute;
    top: 50%;
    right: var(--space-sm);
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.idle-banner-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Mobile Compact Progress Indicator */
.mobile-progress-compact {
    display: none; /* Hidden on desktop, shown in mobile media query */
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--space-sm);
    background: var(--warm-gray-100);
    border-radius: 12px;
    margin-bottom: var(--space-md);
    cursor: pointer;
    transition: background 0.2s ease;
}

.mobile-progress-compact:active {
    background: var(--warm-gray-200);
}

.mobile-progress-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mobile-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--warm-gray-300);
    transition: all 0.3s ease;
}

.mobile-dot.completed {
    background: var(--teal);
}

.mobile-dot.current {
    background: var(--purple);
    box-shadow: 0 0 0 3px rgba(75, 62, 137, 0.2);
    animation: pulse-glow-mobile 2s ease-in-out infinite;
}

@keyframes pulse-glow-mobile {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(75, 62, 137, 0.2);
    }
    50% {
        box-shadow: 0 0 0 5px rgba(75, 62, 137, 0.1);
    }
}

.mobile-step-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
}

.mobile-expand-hint {
    font-size: 0.7rem;
    color: var(--warm-gray-400);
}

/* Old progress styles - keep for fallback */
.team-progress {
    margin-bottom: var(--space-lg);
}

.team-progress-bar {
    width: 100%;
    height: 3px;
    background: var(--warm-gray-200);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.team-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--purple), var(--teal));
    transition: width var(--transition-smooth);
}

.team-progress-text {
    color: var(--warm-gray-400);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.team-question-container {
    margin: var(--space-md) 0;
}

.team-question {
    display: none;
    opacity: 0;
}

.team-question.active {
    display: block;
    animation: questionSlideIn var(--transition-smooth) forwards;
}

@keyframes questionSlideIn {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.team-question h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--charcoal);
    margin-bottom: var(--space-xs);
    font-weight: 500;
}

.team-question-subtitle {
    color: var(--warm-gray-400);
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
    font-style: italic;
}

.team-microcopy {
    color: var(--warm-gray-500);
    font-size: 0.8rem;
    font-style: italic;
    margin-bottom: var(--space-md);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.team-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-sm);
    max-width: 520px;
    margin: 0 auto;
}

.team-options-wide {
    max-width: 640px;
}

.team-option-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    padding: var(--space-md) var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-gentle);
    text-align: center;
    position: relative;
}

.team-option-card:hover {
    border-color: var(--purple);
    box-shadow: 0 8px 24px rgba(75, 62, 137, 0.1);
    transform: translateY(-3px);
}

.team-option-card.selected {
    border-color: var(--purple);
    background: linear-gradient(135deg, rgba(75, 62, 137, 0.08) 0%, rgba(14, 144, 165, 0.04) 100%);
}

.team-multi-select .team-option-card.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--lime-green);
    font-weight: bold;
    font-size: 1rem;
}

.team-option-icon {
    font-size: 2rem;
    margin-bottom: 8px;
    opacity: 0.85;
}

.team-option-card h4 {
    font-family: var(--font-body);
    color: var(--charcoal);
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.3;
}

/* DISC Profile Cards */
.team-disc-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
}

.disc-card {
    padding: var(--space-md) var(--space-sm);
    text-align: center;
    position: relative;
    border-width: 2px;
}

.disc-letter {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    transition: transform 0.3s ease;
}

.disc-card h4 {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.disc-desc {
    font-size: 0.7rem;
    color: var(--warm-gray-500);
    line-height: 1.3;
    margin: 0;
}

/* DISC Colors */
.disc-d .disc-letter { color: #C41E3A; }
.disc-i .disc-letter { color: #F4C430; }
.disc-s .disc-letter { color: #228B22; }
.disc-c .disc-letter { color: #4169E1; }

.disc-d.selected { border-color: #C41E3A; background: rgba(196, 30, 58, 0.05); }
.disc-i.selected { border-color: #F4C430; background: rgba(244, 196, 48, 0.05); }
.disc-s.selected { border-color: #228B22; background: rgba(34, 139, 34, 0.05); }
.disc-c.selected { border-color: #4169E1; background: rgba(65, 105, 225, 0.05); }

.disc-card:hover .disc-letter {
    transform: scale(1.2);
}

.btn-continue {
    margin-top: var(--space-lg);
}

.team-multi-buttons {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-top: var(--space-lg);
}

/* Selection count indicator */
.visible-selection-count {
    text-align: center;
    font-size: 0.85rem;
    color: var(--teal);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

/* Team Contact Form */
.team-contact-form {
    max-width: 480px;
    margin: 0 auto;
    text-align: left;
}

.team-contact-form .form-group {
    margin-bottom: var(--space-md);
}

.team-contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

.team-contact-form label {
    display: block;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.team-contact-form input,
.team-contact-form textarea,
.team-contact-form select {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--warm-gray-300);
    border-radius: 4px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all var(--transition-gentle);
    background: white;
}

.team-contact-form select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238A857C' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

.team-contact-form input:focus,
.team-contact-form textarea:focus,
.team-contact-form select:focus {
    outline: none;
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(75, 62, 137, 0.1);
}

.team-contact-form input::placeholder,
.team-contact-form textarea::placeholder {
    color: var(--warm-gray-400);
}

.team-contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

.team-contact-form .btn {
    width: 100%;
    margin-top: var(--space-sm);
    padding: 16px;
}

/* Form Error Message */
.form-error {
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    color: #B91C1C;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: var(--space-sm);
    font-size: 0.9rem;
    text-align: center;
}

/* Submit Button Loading State */
#submit-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#submit-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   CURATED RECOMMENDATIONS
   ============================================ */
.curated-recommendations {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--space-lg) 0;
    text-align: left;
}

.curated-recommendation-card {
    background: white;
    border: 1px solid var(--warm-gray-200);
    border-radius: 12px;
    padding: var(--space-md);
    transition: all var(--transition-gentle);
    position: relative;
}

.curated-recommendation-card:hover {
    border-color: var(--purple-light);
    box-shadow: 0 4px 16px rgba(75, 62, 137, 0.1);
}

.rec-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    background: linear-gradient(135deg, #B22234 0%, #3C3B6E 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rec-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.rec-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rec-icon-fallback {
    font-size: 2rem;
}

.rec-title-area {
    flex: 1;
}

.rec-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 4px 0;
}

.rec-category {
    font-size: 0.85rem;
    color: var(--purple);
    margin: 0;
    font-weight: 500;
}

.rec-explanation {
    color: var(--warm-gray-600);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 var(--space-sm) 0;
}

.rec-learn-more {
    background: none;
    border: none;
    color: var(--teal);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all var(--transition-gentle);
}

.rec-learn-more:hover {
    color: var(--purple);
}

.learn-more-arrow {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.rec-learn-more.expanded .learn-more-arrow {
    transform: rotate(90deg);
}

.rec-details {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--warm-gray-200);
    animation: fadeIn 0.3s ease;
}

.rec-details p {
    color: var(--warm-gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 var(--space-xs) 0;
}

.rec-price-note {
    color: var(--lime-green) !important;
    font-weight: 500;
    font-style: italic;
}

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

/* Curated CTA */
.curated-cta {
    background: linear-gradient(135deg, var(--purple) 0%, var(--teal) 100%);
    border-radius: 12px;
    padding: var(--space-lg);
    text-align: center;
    margin-top: var(--space-md);
}

.curated-cta .cta-text {
    color: white;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0 0 var(--space-md) 0;
}

.curated-cta .btn {
    background: white;
    color: var(--purple);
    border: none;
}

.curated-cta .btn:hover {
    background: var(--cream);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ============================================
   RESPONSIVE DESIGN - Mobile First
   ============================================ */

/* Sticky header - hidden on desktop */
.team-sticky-header {
    display: none;
}

/* Desktop progress bar visible by default */
.team-progress-desktop {
    display: block;
}

.team-logo-desktop {
    display: block;
}

/* Desktop back button */
#team-back-btn {
    display: block;
}

/* Tablet: 768px and below */
@media (max-width: 768px) {
    :root {
        --space-lg: 28px;
        --space-xl: 40px;
    }

    body {
        font-size: 16px; /* Ensure readable without zoom */
    }

    #app {
        padding: var(--space-md) var(--space-sm);
    }

    .container {
        padding: var(--space-lg) var(--space-sm);
    }

    /* Welcome screen - vertical stack */
    .shopping-type-options {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .shopping-type-card {
        min-height: 100px;
        padding: var(--space-md);
    }

    /* Occasion grid - 2x4 on tablets */
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 400px;
    }

    /* Theme selection - 2x2 grid on tablets */
    .gift-paths {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }

    .gift-path-card {
        padding: var(--space-md);
    }

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

    .gift-path-card p {
        font-size: 0.85rem;
    }

    /* Month grid - 3 columns on tablet */
    .month-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    /* Scripture & American Spirit - 2 columns */
    .scripture-grid,
    .american-spirit-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Product recommendations - single column */
    #recommendations,
    #month-recommendations,
    #scripture-recommendations,
    #american-spirit-recommendations {
        grid-template-columns: 1fr;
    }

    /* Quiz answer scale */
    .answer-scale {
        gap: 4px;
    }

    .scale-btn {
        padding: 14px 4px;
        font-size: 0.65rem;
    }

    /* Form layout */
    .team-contact-form .form-row {
        grid-template-columns: 1fr;
    }
}

/* Mobile: 480px and below - Phone optimizations */
@media (max-width: 480px) {
    :root {
        --space-lg: 24px;
        --space-xl: 32px;
        --space-md: 20px;
    }

    body {
        font-size: 16px;
        line-height: 1.6;
    }

    #app {
        padding: var(--space-sm) 12px;
    }

    .container {
        padding: var(--space-md) 12px;
        padding-top: 50px; /* Make room for home link */
    }

    /* Welcome screen doesn't need extra padding */
    #welcome-screen .container {
        padding-top: var(--space-md);
    }

    /* Home link - fixed position on mobile */
    .home-link {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        z-index: 50;
        font-size: 0.8rem;
        padding: 8px 12px;
    }

    /* Occasion grid - 2 columns on mobile */
    .occasion-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 100%;
    }

    .occasion-card {
        padding: var(--space-sm);
    }

    .occasion-card .occasion-icon {
        font-size: 1.5rem;
    }

    .occasion-card .occasion-name {
        font-size: 0.75rem;
    }

    /* Browse themes - 2x2 grid on mobile */
    .browse-themes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .browse-theme-btn {
        padding: var(--space-xs);
    }

    .browse-theme-icon {
        font-size: 1.2rem;
    }

    .browse-theme-name {
        font-size: 0.65rem;
    }

    /* Headings - ensure readability */
    h1 {
        font-size: 1.6rem;
        line-height: 1.3;
    }

    h2 {
        font-size: 1.3rem;
    }

    h3 {
        font-size: 1.1rem;
    }

    /* Main logo sizing */
    .main-logo {
        max-height: 50px;
    }

    .section-logo {
        max-height: 60px;
    }

    /* ===== THEME SELECTION CARDS - Vertical stack on phones ===== */
    .gift-paths {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gift-path-card {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-md);
        text-align: left;
        min-height: 80px;
    }

    .gift-path-card .card-icon {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .gift-path-card .card-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .gift-path-card h3 {
        font-size: 1rem;
        margin-bottom: 4px;
    }

    .gift-path-card p {
        font-size: 0.8rem;
        line-height: 1.4;
        margin: 0;
    }

    /* Featured badge on American Spirit */
    .gift-path-card.featured .featured-badge {
        top: -8px;
        right: 12px;
        font-size: 0.6rem;
        padding: 3px 8px;
    }

    /* ===== TEAM QUESTIONS - Mobile optimized ===== */
    #team-questions-screen .container {
        padding-top: 90px; /* Space for sticky header */
        padding-bottom: var(--space-lg);
    }

    /* Hide desktop elements on mobile */
    .team-progress-desktop,
    .team-logo-desktop,
    .team-home-link,
    #team-back-btn,
    .milestone-progress {
        display: none !important;
    }

    /* Show mobile compact progress indicator */
    .mobile-progress-compact {
        display: flex;
    }

    /* Show sticky header on mobile */
    .team-sticky-header {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: var(--warm-white);
        z-index: 100;
        padding: 12px var(--space-sm);
        border-bottom: 1px solid var(--warm-gray-200);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .team-sticky-content {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        max-width: 720px;
        margin: 0 auto;
    }

    .btn-back-mobile {
        flex-shrink: 0;
        padding: 8px 14px;
        min-height: 36px;
        font-size: 0.8rem;
    }

    .btn-back-mobile::before {
        display: none; /* Hide arrow on mobile compact button */
    }

    .btn-home-mobile {
        flex-shrink: 0;
        padding: 8px 12px;
        min-height: 36px;
        font-size: 1rem;
        background: transparent;
        border: 1px solid var(--warm-gray-300);
        border-radius: 4px;
        cursor: pointer;
    }

    .team-progress-mobile {
        flex: 1;
        margin-bottom: 0;
    }

    .team-progress-mobile .team-progress-bar {
        margin-bottom: 4px;
    }

    .team-progress-mobile .team-progress-text {
        margin-bottom: 0;
        font-size: 0.7rem;
    }

    .team-progress {
        margin-bottom: var(--space-md);
    }

    .team-progress-text {
        font-size: 0.75rem;
    }

    /* Team question cards - SINGLE COLUMN with generous tap targets */
    .team-options {
        grid-template-columns: 1fr !important;
        gap: 10px;
        max-width: 100%;
    }

    .team-options-wide {
        max-width: 100%;
    }

    .team-option-card {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: 16px;
        min-height: 56px; /* Minimum 48px tap target + padding */
        text-align: left;
    }

    .team-option-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        width: 40px;
        text-align: center;
    }

    .team-option-card h4 {
        font-size: 0.9rem;
        flex: 1;
    }

    /* DISC cards on mobile - 2x2 grid */
    .team-disc-options {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }

    .disc-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-sm);
        min-height: auto;
    }

    .disc-letter {
        font-size: 1.6rem;
        margin-bottom: 4px;
    }

    .disc-card h4 {
        font-size: 0.85rem;
    }

    .disc-desc {
        font-size: 0.65rem;
    }

    /* Multi-select checkmark repositioned */
    .team-multi-select .team-option-card.selected::after {
        top: 50%;
        transform: translateY(-50%);
        right: 16px;
    }

    /* Question text */
    .team-question h3 {
        font-size: 1.2rem;
        margin-bottom: var(--space-sm);
    }

    .team-question-subtitle {
        font-size: 0.85rem;
        margin-bottom: var(--space-xs);
    }

    .team-microcopy {
        font-size: 0.75rem;
        margin-bottom: var(--space-sm);
        padding: 0 var(--space-xs);
    }

    /* Multi-select buttons */
    .team-multi-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .team-multi-buttons .btn {
        width: 100%;
        min-height: 48px;
    }

    /* Back button - larger tap target */
    .btn-back {
        min-height: 48px;
        padding: 14px 20px;
        font-size: 0.9rem;
    }

    /* ===== CONTACT FORM - Mobile optimized ===== */
    .team-contact-form {
        padding: 0;
    }

    .team-contact-form .form-group {
        margin-bottom: var(--space-md);
    }

    .team-contact-form label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .team-contact-form input,
    .team-contact-form textarea,
    .team-contact-form select {
        font-size: 16px; /* Prevents iOS zoom on focus */
        padding: 14px;
        min-height: 48px;
    }

    .team-contact-form textarea {
        min-height: 100px;
    }

    .team-contact-form .btn {
        min-height: 52px;
        font-size: 1rem;
    }

    /* ===== CURATED RECOMMENDATIONS - Mobile ===== */
    .curated-recommendations {
        gap: var(--space-sm);
    }

    .curated-recommendation-card {
        padding: var(--space-sm);
    }

    .rec-header {
        gap: 12px;
    }

    .rec-icon {
        width: 40px;
        height: 40px;
    }

    .rec-title {
        font-size: 1rem;
    }

    .rec-category {
        font-size: 0.8rem;
    }

    .rec-explanation {
        font-size: 0.9rem;
    }

    .curated-cta {
        padding: var(--space-md);
    }

    .curated-cta .cta-text {
        font-size: 1.1rem;
    }

    /* ===== MONTH GRID - Mobile ===== */
    .month-helper {
        padding: var(--space-sm);
        margin-bottom: var(--space-md);
    }

    .month-helper .helper-question {
        font-size: 1rem;
    }

    .month-helper .helper-text {
        font-size: 0.8rem;
    }

    .season-section {
        margin-bottom: var(--space-sm);
    }

    .season-label span {
        font-size: 0.65rem;
    }

    .season-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    .month-thumb {
        width: 40px;
        height: 40px;
    }

    .month-card {
        padding: 10px 6px;
        min-height: auto;
    }

    .month-card .month-name {
        font-size: 0.8rem;
    }

    .month-card .month-flower {
        font-size: 0.6rem;
    }

    /* Poetic intro mobile */
    .month-poetic-intro {
        padding: var(--space-md) var(--space-sm);
    }

    .month-poetic-intro h2 {
        font-size: 1.4rem;
    }

    .month-poetic-intro p {
        font-size: 0.95rem;
    }

    /* ===== SCRIPTURE & AMERICAN SPIRIT - Single column ===== */
    .scripture-grid,
    .american-spirit-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .scripture-card,
    .american-spirit-card {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm);
        text-align: left;
        min-height: 60px;
    }

    .scripture-card .scripture-name,
    .american-spirit-card .category-name {
        font-size: 1rem;
    }

    .scripture-card .scripture-desc,
    .american-spirit-card .category-desc {
        font-size: 0.8rem;
    }

    .american-spirit-card .category-icon {
        font-size: 1.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* ===== QUIZ SCREEN ===== */
    #question-text {
        font-size: 1.1rem;
        min-height: 60px;
    }

    .question-context {
        font-size: 0.85rem;
    }

    .answer-scale {
        flex-direction: column;
        gap: 8px;
    }

    .scale-btn {
        flex: none;
        width: 100%;
        padding: 14px 16px;
        font-size: 0.9rem;
        min-height: 48px;
    }

    /* ===== QUIZ INTRO & LIKERT SCALE ===== */
    .quiz-intro-container {
        padding: var(--space-lg) var(--space-sm);
    }

    .quiz-intro-container h2 {
        font-size: 1.4rem;
    }

    .quiz-intro-text {
        font-size: 1rem;
    }

    .quiz-intro-details {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .likert-scale {
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }

    .likert-btn {
        flex: 0 0 calc(50% - 4px);
        max-width: calc(50% - 4px);
        min-height: 80px;
        padding: 12px 8px;
    }

    .likert-btn:nth-child(3) {
        flex: 0 0 60%;
        max-width: 60%;
    }

    .likert-icon {
        font-size: 1.6rem;
    }

    .likert-label {
        font-size: 0.65rem;
    }

    /* Result card mobile */
    .personality-result-card {
        padding: var(--space-lg) var(--space-md);
    }

    .result-trait-name {
        font-size: 1.6rem;
    }

    .result-trait-description {
        font-size: 1rem;
    }

    .result-gifting-tip {
        padding: var(--space-sm);
    }

    /* ===== PRODUCT CARDS ===== */
    .product-card {
        flex-direction: column;
    }

    .product-card .product-image {
        width: 100%;
        height: 200px;
    }

    .product-card .product-info {
        padding: var(--space-sm);
    }

    .product-card h3 {
        font-size: 1rem;
    }

    .product-card .product-description {
        font-size: 0.85rem;
    }

    /* ===== BUTTONS - Ensure tap targets ===== */
    .btn {
        min-height: 48px;
        padding: 14px 24px;
    }

    .btn-small {
        min-height: 44px;
        padding: 12px 20px;
    }

    /* ===== FILTERS ===== */
    .price-filters {
        flex-wrap: wrap;
        gap: 6px;
    }

    .filter-btn {
        flex: 1 1 auto;
        min-width: calc(50% - 6px);
        padding: 10px 12px;
        font-size: 0.8rem;
        min-height: 44px;
    }
}

/* Extra small phones: 360px and below */
@media (max-width: 360px) {
    .gift-path-card {
        padding: 14px;
    }

    .gift-path-card .card-icon {
        width: 40px;
        height: 40px;
    }

    .month-grid {
        gap: 6px;
    }

    .month-card {
        padding: 10px 6px;
    }

    .team-option-card {
        padding: 14px 12px;
    }

    .filter-btn {
        min-width: 100%;
    }
}

.path-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.skip-link {
    margin-top: var(--space-md);
}

.skip-link a {
    color: var(--teal);
    text-decoration: none;
    font-size: 0.9rem;
}

.skip-link a:hover {
    text-decoration: underline;
}

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

.site-footer {
    margin-top: var(--space-2xl);
    padding: var(--space-lg) var(--space-md);
    border-top: 1px solid var(--warm-gray-200);
    background: var(--warm-gray-100);
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

/* About the Artist Toggle */
.about-artist {
    margin-bottom: var(--space-md);
}

.about-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: none;
    border: none;
    color: var(--warm-gray-600);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    transition: all var(--transition-gentle);
}

.about-toggle:hover {
    color: var(--purple);
    background: var(--warm-gray-200);
}

.toggle-icon {
    font-size: 1rem;
    font-weight: 400;
    transition: transform 0.3s ease;
}

.about-toggle.expanded .toggle-icon {
    transform: rotate(45deg);
}

.about-content {
    display: none;
    max-width: 500px;
    margin: var(--space-md) auto 0;
    text-align: left;
    animation: fadeIn 0.3s ease;
}

.about-content.visible {
    display: block;
}

.about-content p {
    color: var(--warm-gray-600);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
}

.about-content p:last-child {
    margin-bottom: 0;
}

/* Footer Links */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8rem;
    color: var(--warm-gray-500);
    flex-wrap: wrap;
}

.footer-copyright {
    color: var(--warm-gray-400);
}

.footer-divider {
    color: var(--warm-gray-300);
}

.footer-link {
    color: var(--warm-gray-500);
    text-decoration: none;
    transition: color var(--transition-gentle);
}

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

/* Mobile Footer Adjustments */
@media (max-width: 480px) {
    .trust-bar {
        flex-direction: column;
        gap: var(--space-sm);
        align-items: center;
    }

    .trust-item {
        font-size: 0.75rem;
    }

    .site-footer {
        padding: var(--space-md);
    }

    .about-content {
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .footer-divider {
        display: none;
    }
}

/* ============================================
   WELCOME FRONT DOOR - photo-first layout
   ============================================ */

#welcome-screen .container {
    text-align: center;
    padding: var(--space-lg) var(--space-sm);
}

.welcome-logo {
    margin-bottom: var(--space-md);
}

.welcome-logo--tagline,
.main-logo.welcome-logo--tagline {
    width: min(460px, 88%);
    max-height: none;
}

.welcome-headline {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    line-height: 1.1;
    color: var(--charcoal);
    margin: 0 0 var(--space-sm);
}

.welcome-sub {
    max-width: 620px;
    margin: 0 auto var(--space-md);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--warm-gray-500);
}

.showcase-head {
    margin-top: var(--space-lg);
}

.showcase-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    color: var(--charcoal);
    margin: 0 0 6px;
}

.showcase-note {
    font-size: 0.92rem;
    color: var(--warm-gray-400);
    text-align: center;
    margin: 0 auto var(--space-md);
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-sm);
    text-align: left;
}

.showcase-tile {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--warm-white);
    border: 1px solid var(--warm-gray-200);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.showcase-tile:hover,
.showcase-tile:focus-visible {
    transform: translateY(-3px);
    border-color: var(--teal);
    box-shadow: 0 10px 24px rgba(45, 42, 38, 0.12);
}

.showcase-image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--warm-gray-100);
    overflow: hidden;
}

.showcase-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.showcase-meta {
    display: block;
    padding: 12px 14px 14px;
}

.showcase-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.25;
    color: var(--charcoal);
}

.showcase-collection {
    display: block;
    margin-top: 4px;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
}

.showcase-price {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    color: var(--warm-gray-400);
}

.showcase-refresh {
    margin: var(--space-md) 0 var(--space-lg);
}

/* Collection chips */

.collection-strip-title {
    margin-top: var(--space-lg) !important;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--charcoal);
    margin: 0 0 var(--space-sm);
}

.collection-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.collection-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-sm) 14px;
    background: var(--warm-white);
    border: 1px solid var(--warm-gray-200);
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.collection-chip:hover,
.collection-chip:focus-visible {
    transform: translateY(-2px);
    border-color: var(--purple);
    box-shadow: 0 8px 18px rgba(45, 42, 38, 0.1);
}

.collection-chip img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.chip-emoji {
    font-size: 2rem;
    line-height: 44px;
}

.chip-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--charcoal);
}

.chip-note {
    font-size: 0.85rem;
    color: var(--warm-gray-400);
    line-height: 1.4;
}

/* Optional guided paths */

.helper-paths {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.helper-path {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    padding: var(--space-sm);
    background: var(--warm-gray-100);
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: var(--font-body);
    transition: border-color 0.18s ease, background 0.18s ease;
}

.helper-path:hover,
.helper-path:focus-visible {
    background: var(--warm-white);
    border-color: var(--teal);
}

.helper-icon {
    font-size: 1.5rem;
    line-height: 1.2;
}

.helper-text strong {
    display: block;
    font-size: 1rem;
    color: var(--charcoal);
    margin-bottom: 2px;
}

.helper-text span {
    display: block;
    font-size: 0.9rem;
    color: var(--warm-gray-400);
    line-height: 1.45;
}

/* Front door fork: personal or business gifting */

.gift-fork-title {
    text-align: center;
    margin: var(--space-sm) 0 10px;
    font-size: 1.25rem;
}

@media (max-width: 560px) {
    .gift-fork-card { padding: 10px 11px; border-width: 1.5px; }
    .gift-fork-name { font-size: 1.02rem; }
    .gift-fork-note { font-size: 0.78rem; line-height: 1.3; }
}

.gift-fork {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: var(--space-sm);
}

.gift-fork-card {
    display: block;
    text-align: left;
    padding: 12px 14px;
    background: var(--warm-white);
    border: 2px solid var(--warm-gray-200);
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-body);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.gift-fork-card--personal:hover,
.gift-fork-card--personal:focus-visible {
    border-color: var(--purple);
    transform: translateY(-2px);
}

.gift-fork-card--business:hover,
.gift-fork-card--business:focus-visible {
    border-color: var(--teal);
    transform: translateY(-2px);
}

.gift-fork-name {
    display: block;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--charcoal);
    line-height: 1.15;
    margin-bottom: 3px;
}

.gift-fork-note {
    display: block;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--warm-gray-400);
}

/* Quick team path */

.quick-team-form {
    text-align: left;
    max-width: 640px;
    margin: 0 auto;
}

.quick-team-alt {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--warm-gray-200);
}

.quick-team-alt p {
    margin-bottom: 12px;
    color: var(--warm-gray-500);
}

.quick-team-long-link {
    margin-top: var(--space-md);
    font-size: 0.88rem;
}

.quick-team-long-link a {
    color: var(--warm-gray-400);
}

.hidden-field {
    position: absolute;
    left: -9999px;
}

@media (max-width: 600px) {
    .showcase-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }

    .showcase-meta {
        padding: 10px 12px 12px;
    }

    .showcase-name {
        font-size: 1rem;
    }
}

/* Gallery handoff - the end of every guided path */

.gallery-cta {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md);
    background: var(--warm-white);
    border: 1px solid var(--warm-gray-200);
    border-radius: 12px;
    text-align: center;
}

.gallery-cta h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: var(--charcoal);
    margin: 0 0 10px;
}

.gallery-cta p {
    color: var(--warm-gray-500);
    line-height: 1.6;
    margin: 0 0 var(--space-md);
}

.gallery-cta-note {
    margin: var(--space-sm) 0 0 !important;
    font-size: 0.82rem;
    color: var(--warm-gray-400);
}

/* The price filters used to narrow an in-app grid. The shop owns filtering
   now, so they no longer have anything to act on. */
.price-filters,
.price-filter,
.budget-filter {
    display: none !important;
}

/* Nine-panel front door: a clean 3 x 3 on desktop and tablet */
.showcase-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    /* Stay 3 x 3 on phones so nine panels never leave an orphan tile */
    .showcase-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .showcase-meta { padding: 8px 8px 10px; }
    .showcase-name { font-size: 0.85rem; }
    .showcase-collection { font-size: 0.6rem; letter-spacing: 0.04em; }
}

/* The site-wide p rule caps width at 600px without centering. On the team
   screens that pinned these lines to the left, so center them explicitly. */
#quick-team-screen .container,
#quick-team-success-screen .container {
    text-align: center;
}

#quick-team-screen .container > p,
#quick-team-screen .quick-team-alt p,
#quick-team-success-screen .container > p {
    margin-left: auto;
    margin-right: auto;
}

.quick-team-form .form-confidence {
    max-width: none;
    text-align: center;
}

/* Collection icons: the line art is used as a mask so each one takes a
   brand color from the logo gradient. Swap a color by editing one line. */
.chip-icon {
    display: block;
    width: 48px;
    height: 48px;
    background-color: var(--charcoal);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.chip-icon--bloom {
    background-color: var(--lime-green);
    -webkit-mask-image: url(images/bloom-icon.png);
            mask-image: url(images/bloom-icon.png);
}

.chip-icon--personality {
    background-color: var(--teal);
    -webkit-mask-image: url(images/personality-icon.png);
            mask-image: url(images/personality-icon.png);
}

.chip-icon--wisdom {
    background-color: var(--purple);
    -webkit-mask-image: url(images/scripture-icon.png);
            mask-image: url(images/scripture-icon.png);
}

.collection-chip .chip-emoji {
    font-size: 2.4rem;
    line-height: 48px;
}

.collection-chip .chip-note {
    max-width: 22ch;
}

@media (max-width: 480px) {
    /* 2 x 2 on phones instead of four stacked cards */
    .collection-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .collection-chip { padding: 14px 10px; }
    .collection-chip .chip-note { font-size: 0.78rem; }
}

/* Always 4 across, or 2 x 2 when narrower. Never 3 + 1. */
.collection-strip {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 720px) {
    .collection-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fine Art Prints: the umbrella for all the photography, so its icon
   carries the full logo gradient rather than a single brand color. */
.chip-icon--fine-art {
    background: linear-gradient(135deg, var(--purple) 0%, var(--teal) 50%, var(--lime-green) 100%);
    -webkit-mask-image: url(images/fine-art-icon.svg);
            mask-image: url(images/fine-art-icon.svg);
}

/* Buttons and links get different default type from the browser. Pin both
   so the Fine Art card (a link) lines up with the other four (buttons). */
.collection-chip {
    font-size: 1rem;
    line-height: normal;
}

a.collection-chip {
    text-decoration: none;
    color: inherit;
}

/* Five cards: one row of five on wide screens; narrower screens wrap
   into centered rows (3 + 2, then 2 + 2 + 1) so no card sits stranded
   on the left. */
.collection-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.collection-strip .collection-chip {
    flex: 0 1 calc((100% - 4 * var(--space-sm)) / 5);
    min-width: 150px;
}

@media (max-width: 860px) {
    .collection-strip .collection-chip {
        flex-basis: calc((100% - 2 * var(--space-sm)) / 3);
    }
}

@media (max-width: 520px) {
    .collection-strip { gap: 10px; }
    .collection-strip .collection-chip {
        flex-basis: calc((100% - 10px) / 2);
        min-width: 0;
    }
}

/* Welcome trust bar: four short lines in a tidy 2 x 2, one column on phones */
#welcome-screen .trust-bar {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: var(--space-xl);
    row-gap: 14px;
}

@media (max-width: 600px) {
    #welcome-screen .trust-bar {
        grid-template-columns: auto;
        row-gap: 12px;
    }
}

#welcome-screen .trust-icon {
    width: 1.25rem;
    text-align: center;
    flex: 0 0 auto;
}

/* ============================================
   PAGE NAVIGATION: Back + Start Over on every screen
   ============================================ */

.screen-nav {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Start Over keeps its purple pill; it just sits in the row now */
.screen-nav .home-link {
    position: static !important;
    margin-bottom: 0;
}

.nav-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--purple);
    background: var(--warm-white);
    border: 2px solid var(--purple);
    border-radius: 24px;
    cursor: pointer;
    transition: all var(--transition-gentle);
}

.nav-back:hover,
.nav-back:focus-visible {
    background: var(--purple);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(75, 62, 137, 0.25);
}

/* Match heights: Start Over's pill uses 12px/20px padding */
.screen-nav .home-link {
    padding: 10px 18px;
}

/* Leave room above each screen's content for the nav row (phones keep
   their existing top padding, sized for the pinned row) */
@media (min-width: 481px) {
    .screen:not(#welcome-screen):not(#quick-team-success-screen) > .container {
        padding-top: calc(var(--space-md) + 64px);
    }
}

@media (max-width: 480px) {
    /* On phones the row is pinned to the top so it's always in reach */
    .screen-nav {
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 50;
        gap: 8px;
    }

    .screen-nav .home-link,
    .nav-back {
        position: static !important;
        font-size: 0.8rem;
        padding: 8px 12px;
    }
}

/* Same height for both pills: the link inherits the body's tall line-height,
   the button doesn't. Pin both. */
.screen-nav .home-link,
.nav-back {
    line-height: 1.2;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    /* Room for the pinned row above each screen's logo */
    .screen:not(#welcome-screen):not(#quick-team-success-screen):not(#team-questions-screen) > .container {
        padding-top: 64px;
    }
}

/* Trust line icons: line art in the brand colors, same masking approach as
   the collection icons.
   Mindful Gifting  = purple (the logo's wordmark color)
   Great gift givers = teal (the "Be a Great Gift Giver" tagline color)
   Every image shot = lime green
   Since 1975 = full logo gradient, like Fine Art Prints: the whole body of work */
#welcome-screen .trust-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    opacity: 1;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.trust-icon--spark {
    background-color: var(--purple);
    -webkit-mask-image: url(images/icon-spark.svg);
            mask-image: url(images/icon-spark.svg);
}

.trust-icon--heart {
    background-color: var(--teal);
    -webkit-mask-image: url(images/icon-heart.svg);
            mask-image: url(images/icon-heart.svg);
}

.trust-icon--camera {
    background-color: var(--lime-green);
    -webkit-mask-image: url(images/icon-camera.svg);
            mask-image: url(images/icon-camera.svg);
}

.trust-icon--lens {
    background: linear-gradient(135deg, var(--purple) 0%, var(--teal) 50%, var(--lime-green) 100%);
    -webkit-mask-image: url(images/icon-lens.svg);
            mask-image: url(images/icon-lens.svg);
}

/* Bloom PEACE story above the month picker */
.peace-intro {
    max-width: 620px;
    margin: 0 auto var(--space-lg);
    text-align: center;
}

.peace-intro .peace-problem {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0 0 var(--space-sm);
}

.peace-intro .peace-body {
    max-width: none;
    margin: 0 auto var(--space-md);
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--warm-gray-500);
}

.peace-intro .peace-cue {
    max-width: none;
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: 1.35rem;
    color: var(--teal);
}

.peace-intro .peace-problem,
.peace-intro .peace-body {
    text-wrap: balance;
}

/* "Not sure of their birth month?" now sits below the months. Center its
   lines (the site-wide p rule left the heading pinned left) and give it
   room above. */
.month-helper {
    margin-top: var(--space-lg);
    text-align: center;
}

.month-helper .helper-question,
.month-helper .helper-text {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Bloom month grid: calendar order, three across, four rows */
.month-grid--calendar {
    grid-template-columns: repeat(3, 1fr);
    margin: 0 0 var(--space-md);
}

.month-card {
    position: relative;
}

/* Cards in the same row share a height, even when a flower name wraps */
.month-grid--calendar {
    align-items: stretch;
}
.month-grid--calendar .month-card {
    height: 100%;
    box-sizing: border-box;
}

/* Month page: each flower card leads with its photo, which links to that
   flower's wall art on the store, with Wall Art and Gifts links below. */
.flower-item {
    display: flex;
    flex-direction: column;
}

.flower-item.has-photo {
    padding: 0 0 var(--space-md);
    overflow: hidden;
    border-left: none;
    border-top: 3px solid var(--teal);
}

.flower-item.has-photo h4,
.flower-item.has-photo p,
.flower-item.has-photo .flower-links {
    padding: 0 var(--space-md);
}

.flower-photo {
    display: block;
    margin-bottom: var(--space-sm);
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--warm-gray-200);
}

.flower-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.flower-photo:hover img,
.flower-photo:focus-visible img {
    transform: scale(1.03);
}

.flower-links {
    display: flex;
    gap: 10px;
    margin-top: auto;
    padding-top: var(--space-sm);
}

.flower-links a {
    flex: 1;
    text-align: center;
    padding: 9px 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--purple);
    border: 2px solid var(--purple);
    border-radius: 24px;
    text-decoration: none;
    transition: all var(--transition-gentle);
}

.flower-links a:hover,
.flower-links a:focus-visible {
    background: var(--purple);
    color: white;
}

@media (max-width: 600px) {
    .flower-details {
        grid-template-columns: 1fr;
    }
}

/* Show each wall art piece whole. The birth-month pieces carry text on the
   image itself, so cropping to a fixed shape cut it off. */
.flower-photo {
    aspect-ratio: auto;
}

.flower-photo img {
    height: auto;
    object-fit: contain;
}


/* Breathing room above the Wall Art / Gifts buttons. The has-photo rule
   above set this padding to zero on the sides-only shorthand. */
.flower-item.has-photo .flower-links {
    padding-top: var(--space-md);
}

/* ============================================
   PERSONALITY: the three assessments
   ============================================ */

.framework-intro {
    max-width: 560px;
    margin: var(--space-lg) auto var(--space-md);
    text-align: center;
}

.framework-intro h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    color: var(--charcoal);
    margin: 0 0 8px;
}

.framework-intro p {
    max-width: none;
    margin: 0 auto;
    color: var(--warm-gray-500);
}

.framework-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    max-width: 860px;
    margin: 0 auto var(--space-lg);
}

.framework-card {
    --accent: var(--purple);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--warm-white);
    border: 1px solid var(--warm-gray-200);
    border-top: 4px solid var(--accent);
    border-radius: 10px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.framework-card--disc { --accent: var(--purple); }
.framework-card--big-five { --accent: var(--teal); }
.framework-card--enneagram { --accent: var(--lime-green); }

.framework-card:hover,
.framework-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(45, 42, 38, 0.12);
    border-color: var(--accent);
}

.framework-name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 1.15;
    color: var(--charcoal);
}

.framework-count {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
    filter: brightness(0.85);
}

.framework-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--warm-gray-500);
}

.framework-go {
    margin-top: auto;
    padding-top: var(--space-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--purple);
}

@media (max-width: 720px) {
    .framework-cards {
        grid-template-columns: 1fr;
        max-width: 460px;
    }
}

/* Quiz button: label on one line, "15 quick questions" beneath it */
#personality-options-screen .path-options .btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 36px;
    white-space: nowrap;
}

#personality-options-screen .path-options .btn-subtext {
    margin: 0;
    font-size: 0.78rem;
    opacity: 0.85;
}

/* Type buttons on each assessment card: one tap to that type's gallery */
.framework-card:hover,
.framework-card:focus-within {
    transform: none;
}

.type-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--space-sm);
}

.type-chip {
    display: inline-block;
    padding: 6px 11px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--charcoal);
    text-decoration: none;
    background: var(--warm-gray-100);
    border: 1.5px solid var(--warm-gray-200);
    border-radius: 999px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.type-chip:hover,
.type-chip:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.framework-go {
    text-decoration: none;
    font-size: 0.82rem;
}

.framework-go:hover,
.framework-go:focus-visible {
    text-decoration: underline;
}

/* ============================================
   GIFT FINDER
   A few questions, then one wall art piece and one gift item
   ============================================ */
.helper-path--finder {
    background: rgba(75, 62, 137, 0.07);
    border-color: rgba(75, 62, 137, 0.25);
}

.gf-container {
    max-width: 640px;
    margin: 0 auto;
}

.gf-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    text-align: center;
    margin: 0 auto var(--space-xs);
}

.gf-progress {
    margin-bottom: var(--space-md);
}

.gf-progress-bar {
    height: 6px;
    background: var(--warm-gray-200);
    border-radius: 999px;
    overflow: hidden;
}

.gf-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--purple), var(--teal), var(--lime-green));
    border-radius: 999px;
    transition: width 0.3s ease;
}

.gf-progress-text {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--warm-gray-400);
    text-align: center;
}

.gf-question {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    font-weight: 500;
    line-height: 1.2;
    color: var(--charcoal);
    text-align: center;
    margin: 0 0 var(--space-xs);
}

.gf-sub {
    text-align: center;
    color: var(--warm-gray-500);
    font-size: 0.95rem;
    margin: 0 0 var(--space-md);
}

.gf-question + .gf-options,
.gf-question + .gf-name-form {
    margin-top: var(--space-md);
}

.gf-options {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
}

.gf-options--months {
    grid-template-columns: repeat(3, 1fr);
}

.gf-options--chips {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.gf-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 52px;
    padding: 12px 16px;
    font-family: var(--font-body);
    text-align: center;
    color: var(--charcoal);
    background: var(--warm-white);
    border: 1.5px solid var(--warm-gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.gf-option:hover,
.gf-option:focus-visible {
    border-color: var(--teal);
    background: #fff;
}

.gf-option:active {
    transform: scale(0.99);
}

.gf-option.is-selected {
    border-color: var(--purple);
    background: rgba(75, 62, 137, 0.07);
}

.gf-option-text {
    font-size: 1rem;
    font-weight: 600;
}

.gf-option-sub {
    font-size: 0.82rem;
    color: var(--warm-gray-500);
}

.gf-month {
    padding: 14px 8px 10px;
}

.gf-month-now {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    padding: 1px 8px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #fff;
    background: var(--lime-green);
    border-radius: 999px;
    white-space: nowrap;
}

.gf-name-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 380px;
    margin: 0 auto;
}

.gf-name-form input {
    padding: 14px 16px;
    font-family: var(--font-body);
    font-size: 1rem;
    border: 1.5px solid var(--warm-gray-300);
    border-radius: 10px;
    background: #fff;
}

.gf-name-form input:focus {
    outline: none;
    border-color: var(--purple);
}

.gf-skip {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--purple);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    padding: 8px;
}

/* Results */
.gf-results-head {
    text-align: center;
    margin-bottom: var(--space-md);
}

.gf-results-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    font-weight: 500;
    color: var(--charcoal);
    margin: 0 0 var(--space-xs);
}

.gf-results-sub {
    color: var(--warm-gray-500);
    max-width: 520px;
    margin: 0 auto;
}

.gf-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: var(--space-md);
    max-width: 860px;
    margin: 0 auto var(--space-lg);
}

.gf-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-sm);
    background: #fff;
    border: 1px solid var(--warm-gray-200);
    border-top: 4px solid var(--purple);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(45, 42, 38, 0.06);
}

.gf-card--bloom { border-top-color: var(--lime-green); }
.gf-card--wisdom { border-top-color: var(--teal); }
.gf-card--personality { border-top-color: var(--purple); }
.gf-card--patriotism { border-top-color: #B22234; }

.gf-card-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--warm-gray-400);
    margin: 0 0 10px;
}

.gf-card-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 5 / 4;
    background: var(--warm-gray-100);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.gf-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gf-card-photo.is-missing {
    display: none;
}

.gf-card-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--charcoal);
    margin: 0 0 6px;
}

.gf-card-why {
    color: var(--warm-gray-600);
    font-size: 0.95rem;
    margin: 0 0 8px;
}

.gf-card-price {
    font-size: 0.88rem;
    color: var(--warm-gray-500);
    margin: 0 0 var(--space-sm);
}

.gf-card-cta {
    margin-top: auto;
    text-align: center;
    text-decoration: none;
}

.gf-card-more {
    display: block;
    margin-top: 12px;
    text-align: center;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--teal);
    text-decoration: none;
}

.gf-card-more:hover {
    text-decoration: underline;
}

.gf-results-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gf-crosslink {
    text-align: center;
    color: var(--warm-gray-500);
    margin: var(--space-md) 0;
}

.gf-crosslink a {
    color: var(--purple);
    font-weight: 600;
}

@media (max-width: 480px) {
    .gf-options--months {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Personality type buttons: compact, one row for DISC and the Big Five,
   letters and numbers in their own column so the names line up */
.gf-types {
    gap: 8px;
}

.gf-types--disc { grid-template-columns: repeat(4, 1fr); }
.gf-types--bigfive { grid-template-columns: repeat(5, 1fr); }
.gf-types--enneagram { grid-template-columns: repeat(3, 1fr); }

.gf-type {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 10px;
}

.gf-types--enneagram .gf-type,
.gf-types--disc .gf-type {
    justify-content: flex-start;
    padding-left: 14px;
}

.gf-type-mark {
    flex: 0 0 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: var(--purple);
    border-radius: 50%;
}

.gf-type-name {
    font-size: 0.88rem;
    font-weight: 600;
    text-align: left;
}

.gf-types--bigfive .gf-type-name {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.2;
}

@media (max-width: 600px) {
    .gf-types--disc { grid-template-columns: repeat(2, 1fr); }
    .gf-types--bigfive { grid-template-columns: repeat(2, 1fr); }
    .gf-types--enneagram { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   WISDOM: Scripture, Recovery, Wonder
   ============================================ */
.wisdom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 960px;
    margin: var(--space-md) auto var(--space-lg);
}

.wisdom-card {
    --accent: var(--purple);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--warm-gray-200);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wisdom-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(45, 42, 38, 0.08);
}

.wisdom-card--scripture { --accent: var(--purple); }
.wisdom-card--recovery { --accent: var(--teal); }
.wisdom-card--wonder { --accent: var(--lime-green); }

.wisdom-photo {
    display: block;
    aspect-ratio: 5 / 4;
    background: var(--warm-gray-100);
    overflow: hidden;
}

.wisdom-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wisdom-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-sm) var(--space-sm) var(--space-md);
    text-align: center;
}

.wisdom-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 500;
    margin: 0 0 6px;
}

.wisdom-name a {
    color: var(--charcoal);
    text-decoration: none;
}

.wisdom-name a:hover {
    color: var(--accent);
}

.wisdom-desc {
    color: var(--warm-gray-600);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

.wisdom-card .flower-links a {
    color: var(--accent);
    border-color: var(--accent);
}

.wisdom-card .flower-links a:hover {
    background: var(--accent);
    color: #fff;
}

@media (max-width: 760px) {
    .wisdom-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

/* Patriotism: two cards, same style as Wisdom */
.wisdom-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 720px;
}

.wisdom-card--american-spirit { --accent: #B22234; }
.wisdom-card--flags { --accent: #3C3B6E; }

@media (max-width: 760px) {
    .wisdom-grid--two {
        grid-template-columns: 1fr;
        max-width: 420px;
    }
}

#american-spirit-selector-screen .container {
    text-align: center;
}

/* About the Artist: collection story parts */
.about-part {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--purple);
    margin: var(--space-sm) 0 4px;
}

.about-soon {
    color: var(--warm-gray-400);
}

/* Front door panels: every panel is identical. Square corners, a 5 x 4
   photo frame that the photo fills, and room for a two-line title so all
   nine are the same height. A piece marked fit: 'contain' in galleries.js
   (the American Spirit map) is shown whole on a matching background. */
.showcase-tile {
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.showcase-image {
    aspect-ratio: 5 / 4;
}

.showcase-image img {
    object-fit: cover;
}

.showcase-image--whole img {
    object-fit: contain;
}

.showcase-meta {
    flex: 1;
}

.showcase-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}

/* Twelve panels, three across: one row per collection. Three across on
   phones too, so each row stays one collection. */
.showcase-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 720px;
}

@media (max-width: 480px) {
    .showcase-grid {
        gap: 8px;
    }
}

/* Keep every collection label on one line at four across */
.showcase-collection {
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Longer labels (framework and type) fit on one line on desktop; on
   phones, where panels are narrow, they wrap rather than run off. */
.showcase-meta {
    padding-left: 12px;
    padding-right: 12px;
}

.showcase-collection {
    letter-spacing: 0.03em;
}

@media (max-width: 600px) {
    .showcase-collection {
        white-space: normal;
        line-height: 1.35;
    }
}

.showcase-note + .showcase-note {
    margin-top: 2px;
}

.showcase-jump {
    color: var(--teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#collections-title {
    scroll-margin-top: 24px;
}

/* Newsletter calls to action on the front door */
.news-link { display: flex; justify-content: center; max-width: none; margin: 28px 0 8px; }
.news-link .btn { display: inline-block; width: auto; max-width: 100%; margin: 0; text-decoration: none; text-align: center; }
.news-band { text-align: center; margin: 28px auto 8px; padding: 22px 16px; background: #F5F3EF; border-radius: 12px; }
.news-band p { margin: 0 0 12px; font-family: var(--font-display); font-size: 1.35rem; color: var(--charcoal); }
.news-signup { max-width: 460px; margin: 40px auto 24px; padding: 28px 20px; text-align: center; border-top: 1px solid #E4E0DA; }
.news-signup h2 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 8px; color: var(--charcoal); }
.news-sub { color: var(--warm-gray-600); font-size: 0.95rem; margin: 0 0 18px; }
.news-form { text-align: left; display: grid; gap: 6px; }
.news-form label { font-size: 0.85rem; font-weight: 600; color: var(--charcoal); margin-top: 8px; }
.news-form input[type="text"], .news-form input[type="email"] { width: 100%; padding: 12px; border: 1px solid #CFCAC2; border-radius: 8px; font-size: 1rem; font-family: inherit; box-sizing: border-box; }
.news-bday { display: flex; align-items: center; gap: 8px; }
.news-bday input { width: 72px !important; text-align: center; }
.news-form .btn { margin-top: 16px; width: 100%; }
.news-hp { position: absolute; left: -5000px; }

/* Front door color: a soft brand wash behind the top of the page, and a
   tinted, color-edged card for each collection. */
body:has(#welcome-screen.active) {
    background-image: linear-gradient(180deg, rgba(75, 62, 137, 0.10) 0%, rgba(14, 144, 165, 0.08) 380px, rgba(136, 183, 53, 0.05) 760px, rgba(253, 252, 251, 0) 1100px);
    background-repeat: no-repeat;
}

.collection-chip { border-top-width: 4px; border-top-style: solid; }
.collection-chip--bloom       { background: #EEF5DF; border-color: #DDEAC0; border-top-color: #88B735; }
.collection-chip--personality { background: #E3F3F6; border-color: #C5E5EB; border-top-color: #0E90A5; }
.collection-chip--wisdom      { background: #ECE9F6; border-color: #D8D3EC; border-top-color: #4B3E89; }
.collection-chip--patriotism  { background: #E8ECF5; border-color: #D0D8EA; border-top-color: #B22234; }
.collection-chip--fine-art    { background: #F4EDE0; border-color: #E6DAC4; border-top-color: #B08D57; }
.collection-chip--bloom:hover, .collection-chip--bloom:focus-visible { border-color: #88B735; border-top-color: #88B735; }
.collection-chip--personality:hover, .collection-chip--personality:focus-visible { border-color: #0E90A5; border-top-color: #0E90A5; }
.collection-chip--wisdom:hover, .collection-chip--wisdom:focus-visible { border-color: #4B3E89; border-top-color: #4B3E89; }
.collection-chip--patriotism:hover, .collection-chip--patriotism:focus-visible { border-color: #B22234; border-top-color: #B22234; }
.collection-chip--fine-art:hover, .collection-chip--fine-art:focus-visible { border-color: #B08D57; border-top-color: #B08D57; }

/* Front door fork: two compact buttons and one shared line */
.gift-fork {
    max-width: 560px;
    margin: 0 auto 10px;
    gap: 10px;
}
.gift-fork-card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 52px;
    padding: 10px 14px;
}
.gift-fork-name {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.15;
}
.gift-fork-line {
    text-align: center;
    max-width: 34em;
    margin: 0 auto var(--space-sm);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--warm-gray-400);
}
@media (max-width: 560px) {
    .gift-fork-card { min-height: 48px; padding: 8px 8px; }
    .gift-fork-name { font-size: 1.02rem; }
    .gift-fork-line { font-size: 0.88rem; padding: 0 8px; }
}

/* Gifting buttons always read as two lines, on every screen size */
.gift-fork-name .gf-line { display: block; white-space: nowrap; }

/* Heading in the logo style: bold geometric type in the brand purple, with the lens icon as the second o */
.showcase-head h2.brand-heading {
    font-family: 'Outfit', 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 7vw, 3.1rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--purple);
    margin: 0 0 8px;
}
.brand-heading .brand-o {
    display: inline-block;
    height: 0.8em;
    width: 0.8em;
    vertical-align: -0.13em;
    margin: 0 0.02em;
}


/* Birth month cards: each leads with a photo of that month's flower */
.month-grid--calendar .month-card {
    padding: 0 0 var(--space-sm);
    overflow: hidden;
}

.month-grid--calendar .month-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    border-radius: 0;
    border: none;
    margin: 0 0 var(--space-xs);
    overflow: hidden;
    background: var(--warm-gray-100);
}

.month-grid--calendar .month-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-gentle);
}

.month-grid--calendar .month-card:hover .month-thumb {
    transform: none;
}

.month-grid--calendar .month-card:hover .month-thumb img {
    transform: scale(1.04);
}

.month-grid--calendar .month-name,
.month-grid--calendar .month-flower {
    padding: 0 var(--space-xs);
}


/* Business button opens an industry list under the fork */
.gift-fork-card--business[aria-expanded="true"] { border-color: var(--teal); }
.industry-menu {
    max-width: 560px;
    margin: 0 auto 12px;
    padding: 14px 16px;
    background: var(--warm-white);
    border: 2px solid var(--teal);
    border-radius: 12px;
    text-align: left;
}
.industry-title {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--charcoal);
}
.industry-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.industry-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 8px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--warm-gray-200);
    border-radius: 8px;
    background: #fff;
    font-size: 0.95rem;
    color: var(--charcoal);
    text-decoration: none;
}
a.industry-item { font-weight: 600; border-color: var(--teal); }
a.industry-item:hover, a.industry-item:focus-visible { background: #E8F4F6; }
.industry-item--soon { color: var(--warm-gray-400); background: transparent; }
.industry-item em { font-style: normal; font-size: 0.78rem; color: var(--warm-gray-400); }
.industry-item--other { grid-column: 1 / -1; font-weight: 500; }
@media (max-width: 560px) {
    .industry-list { grid-template-columns: 1fr; }
}

/* Front door fork: each button has its own column (business list under the left, gift finder under the right) */
.gift-fork { align-items: start; }
.gift-fork-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gift-fork-col .industry-menu { max-width: none; width: 100%; margin: 0; padding: 12px; }
.gift-fork-col .industry-title { font-size: 1rem; }
.gift-fork-col .industry-list { grid-template-columns: 1fr; gap: 6px; }
.gift-fork-col .industry-item { font-size: 0.9rem; padding: 8px 10px; }
.gift-fork-col .industry-item--other { grid-column: auto; }
.helper-path--compact { width: 100%; gap: 10px; padding: 10px 12px; align-items: center; }
.helper-path--compact .helper-icon { font-size: 1.25rem; }
.helper-path--compact .helper-text strong { font-size: 0.92rem; line-height: 1.25; }
.helper-path--compact .helper-text span { font-size: 0.82rem; line-height: 1.3; }


/* Q4 landing: curated gift mockups and the finder lead generator */
.curated { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0 0 var(--space-lg, 32px); }
.curated-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #EFEAF7; text-decoration: none; color: #fff; }
.curated-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.curated-tile:hover img, .curated-tile:focus-visible img { transform: scale(1.04); }
.curated-tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; font-weight: 600; font-size: .92rem; line-height: 1.2; background: linear-gradient(transparent, rgba(30,26,50,.78)); }
.curated-tile:focus-visible { outline: 3px solid var(--teal, #0E90A5); outline-offset: 2px; }
.curated-more { display: flex; align-items: center; justify-content: center; background: #4B3E89; text-align: center; }
.curated-more span { position: static; background: none; padding: 14px; font-size: 1.05rem; }
.curated-more:hover { background: #3b3070; }
@media (max-width: 700px) { .curated { grid-template-columns: repeat(2, 1fr); gap: 8px; } .curated-more { aspect-ratio: auto; min-height: 64px; grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .curated-tile img { transition: none; } }
.finder-lead { max-width: 560px; margin: 0 auto var(--space-lg, 32px); padding: 22px 20px 18px; border: 1.5px solid #D9D3EC; border-radius: 12px; background: #FAF8FD; }
.finder-lead h2 { margin: 0 0 6px; font-size: 1.5rem; text-align: center; color: #4B3E89; }
.finder-lead .news-sub { text-align: center; margin: 0 0 14px; }
.finder-lead .lg-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; }
.finder-lead .lg-form input[type=text], .finder-lead .lg-form input[type=email] { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: 1.5px solid #B9B3AA; border-radius: 4px; background: #fff; min-height: 46px; }
.finder-lead .lg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.finder-lead .lg-btn { width: 100%; font: inherit; font-weight: 600; font-size: 16px; background: #0B7A8C; color: #fff; border: 0; border-radius: 999px; padding: 13px 18px; min-height: 48px; cursor: pointer; }
.finder-lead .lg-btn:hover { background: #086473; }
.finder-lead .lg-note { font-size: 12.5px; color: #5D5852; margin: 10px 0 0; }
.finder-lead-biz { text-align: center; margin: 14px 0 0; font-size: 14px; }
@media (max-width: 480px) { .finder-lead .lg-row { grid-template-columns: 1fr; } }
.finder-lead .lg-form { text-align: left; }
.curated-tile:nth-last-child(2):nth-child(odd) { grid-column: auto; }
@media (max-width: 700px) { .curated-tile:nth-last-child(2) { grid-column: 1 / -1; aspect-ratio: 2 / 1; } }
.showcase-head h2.brand-heading { font-size: clamp(2rem, 5vw, 2.8rem); }