/* PromoForge — Base Styles */

/* Alpine.js cloak — hide elements until Alpine initialises */
[x-cloak] { display: none !important; }

:root {
    --color-primary: #2563eb;
    --color-primary-dark: #1d4ed8;
    --color-accent: #ff6b35;
    --color-accent-hot: #ff2d78;
    --color-bg: #0a0a0f;
    --color-bg-warm: #0d1117;
    --color-surface: #151520;
    --color-surface-hover: #1e1e2e;
    --color-text: #f1f5f9;
    --color-text-muted: #8892a4;
    --color-border: #1e2030;
    --color-border-light: #2a2d42;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 1px 3px rgba(0,0,0,0.3);
    --gradient-accent: linear-gradient(135deg, #ff6b35, #ff2d78);
    --gradient-glow: radial-gradient(ellipse at 50% 0%, rgba(255,107,53,0.15) 0%, transparent 60%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ══════════════════════════════════════════════════════
   LANDING PAGE — Agency-Grade Presentation
   ══════════════════════════════════════════════════════ */

/* ── Landing Nav ─────────────────────────────────────── */
.landing .nav-main { display: none; }

.landing-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
}
.landing-nav-inner {
    display: flex; align-items: center;
    padding: 1.25rem 2rem;
    transition: all 0.3s ease;
}
.landing-nav-inner.scrolled {
    padding: 0.75rem 2rem;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--color-border);
}
.landing-logo {
    display: flex; align-items: center; gap: 0.6rem;
    text-decoration: none; color: var(--color-text);
}
.logo-mark {
    background: var(--gradient-accent);
    color: white; font-weight: 800; font-size: 0.8rem;
    padding: 0.3rem 0.55rem; border-radius: 6px;
    letter-spacing: 0.5px;
}
.landing-logo-img {
    height: 56px; width: auto;
}
.logo-word {
    font-weight: 800; font-size: 1.5rem; letter-spacing: -0.3px;
    background: linear-gradient(135deg, #fff 40%, #ff6b35 70%, #ff2d78 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-nav-links {
    display: flex; gap: 2rem; margin-left: auto; margin-right: 2rem;
}
.landing-nav-links a {
    color: var(--color-text-muted); text-decoration: none;
    font-size: 0.875rem; font-weight: 500;
    transition: color 0.2s;
}
.landing-nav-links a:hover { color: var(--color-text); }
.nav-signin { color: var(--color-text) !important; }

/* ── CTA Buttons ─────────────────────────────────────── */
.btn-cta {
    background: var(--gradient-accent);
    color: white; font-weight: 600;
    padding: 0.7rem 1.75rem; border-radius: var(--radius-sm);
    font-size: 0.9rem; text-decoration: none; display: inline-block;
    transition: all 0.2s; border: none; cursor: pointer;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}
.btn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 30px rgba(255, 107, 53, 0.45);
}
.btn-nav-cta { padding: 0.55rem 1.25rem; font-size: 0.8rem; }
.btn-ghost {
    background: transparent; color: var(--color-text);
    border: 1px solid var(--color-border-light);
    padding: 0.7rem 1.75rem; border-radius: var(--radius-sm);
    font-size: 0.9rem; font-weight: 500;
    text-decoration: none; display: inline-block;
    transition: all 0.2s; cursor: pointer;
}
.btn-ghost:hover {
    border-color: var(--color-text-muted);
    background: rgba(255,255,255,0.03);
}
.btn-hero { padding: 0.9rem 2.5rem; font-size: 1.05rem; }

/* ── Hero Section ────────────────────────────────────── */
.landing-hero {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    padding: 7rem 1.5rem 3rem;
    overflow: hidden;
}
.hero-glow {
    position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
    width: 120%; height: 70%;
    background: radial-gradient(ellipse at 50% 30%, rgba(255,107,53,0.12) 0%, rgba(255,45,120,0.06) 40%, transparent 70%);
    pointer-events: none;
}
.hero-inner { position: relative; max-width: 800px; z-index: 2; }

/* ── Hero Logo Display ──────────────────────────────── */
.hero-logo-display {
    margin-bottom: 1.5rem;
}
.hero-logo-icon {
    height: 100px; width: auto;
    filter: drop-shadow(0 0 40px rgba(255,107,53,0.3)) drop-shadow(0 0 80px rgba(255,45,120,0.15));
    animation: heroLogoFloat 6s ease-in-out infinite;
}
@keyframes heroLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-eyebrow {
    text-transform: uppercase; letter-spacing: 4px;
    font-size: 0.8rem; font-weight: 600;
    color: var(--color-accent);
    margin-bottom: 1.5rem;
}
.hero-headline {
    font-size: 4.5rem; font-weight: 800;
    line-height: 1.08; letter-spacing: -2px;
    margin-bottom: 1.5rem;
}
.hero-accent {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.landing-hero .hero-sub {
    font-size: 1.2rem; color: var(--color-text-muted);
    line-height: 1.7; margin-bottom: 2.5rem;
    max-width: 620px; margin-left: auto; margin-right: auto;
}
.hero-actions {
    display: flex; gap: 1rem; justify-content: center;
    margin-bottom: 1.5rem;
}
.hero-micro {
    font-size: 0.8rem; color: var(--color-text-muted);
    letter-spacing: 0.3px;
}

/* ── Product Preview Mockup ─────────────────────────── */
.hero-product-preview {
    position: relative; z-index: 2;
    max-width: 900px; width: 100%;
    margin: 3rem auto 0;
    perspective: 1200px;
}
.product-window {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 100px rgba(255,107,53,0.08);
    transform: rotateX(2deg);
    transition: transform 0.4s ease;
}
.product-window:hover {
    transform: rotateX(0deg);
}
.product-window-bar {
    display: flex; align-items: center; gap: 6px;
    padding: 0.65rem 1rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--color-border);
}
.window-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
}
.window-title {
    margin-left: auto; margin-right: auto;
    font-size: 0.75rem; color: var(--color-text-muted);
    font-weight: 500;
}
.product-window-body {
    display: flex; min-height: 320px;
}

/* Mock sidebar */
.mock-sidebar {
    width: 180px; padding: 1rem 0;
    border-right: 1px solid var(--color-border);
    flex-shrink: 0;
}
.mock-nav-item {
    padding: 0.5rem 1.25rem; font-size: 0.8rem;
    color: var(--color-text-muted); cursor: default;
    display: flex; align-items: center; gap: 0.5rem;
}
.mock-nav-item.mock-active {
    color: var(--color-text);
    background: rgba(255,107,53,0.08);
    border-right: 2px solid var(--color-accent);
}
.mock-icon { font-size: 0.65rem; }

/* Mock main content */
.mock-main {
    flex: 1; padding: 1.5rem 2rem;
}
.mock-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem;
}
.mock-header h4 {
    font-size: 1.1rem; font-weight: 700;
}
.mock-badge {
    background: rgba(255,107,53,0.15);
    color: var(--color-accent);
    padding: 0.2rem 0.6rem; border-radius: 12px;
    font-size: 0.7rem; font-weight: 600;
}

/* Mock scene cards */
.mock-scenes {
    display: flex; gap: 0.75rem; margin-bottom: 1.5rem;
}
.mock-scene {
    flex: 1; text-align: center;
}
.mock-scene-visual {
    aspect-ratio: 9/16; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.4rem;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}
.mock-scene-visual:hover {
    opacity: 1; transform: scale(1.03);
}
.mock-play {
    color: white; font-size: 1.2rem;
    opacity: 0.7;
}
.mock-scene-label {
    font-size: 0.65rem; color: var(--color-text-muted);
    font-weight: 500;
}

/* Mock action buttons */
.mock-actions {
    display: flex; gap: 0.75rem; justify-content: flex-end;
}
.mock-btn {
    padding: 0.45rem 1rem; border-radius: 6px;
    font-size: 0.75rem; font-weight: 600;
    cursor: default;
}
.mock-btn-gen {
    background: var(--gradient-accent); color: white;
    box-shadow: 0 2px 10px rgba(255,107,53,0.3);
}
.mock-btn-pub {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
}

/* ── Platforms Strip ────────────────────────────────── */
.platforms-strip {
    padding: 3rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.platforms-label {
    text-align: center; font-size: 0.8rem;
    color: var(--color-text-muted); text-transform: uppercase;
    letter-spacing: 2px; font-weight: 600;
    margin-bottom: 1.25rem;
}
.platforms-row {
    display: flex; justify-content: center;
    gap: 2.5rem; flex-wrap: wrap;
}
.platform-badge {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.95rem; font-weight: 600;
    color: var(--color-text-muted);
}
.platform-icon { font-size: 1.2rem; }

/* ── Mobile responsive ──────────────────────────────── */
@media (max-width: 768px) {
    .hero-headline { font-size: 2.5rem; letter-spacing: -1px; }
    .hero-logo-icon { height: 72px; }
    .mock-sidebar { display: none; }
    .product-window { transform: none; }
    .mock-scenes { gap: 0.4rem; }
    .mock-header h4 { font-size: 0.9rem; }
    .platforms-row { gap: 1.5rem; }
    .platform-badge { font-size: 0.8rem; }
}

/* ── Pain Strip ──────────────────────────────────────── */
.pain-strip {
    padding: 5rem 0 4rem;
    border-top: 1px solid var(--color-border);
}
.pain-grid {
    display: flex; align-items: center; justify-content: center;
    gap: 3rem; margin-bottom: 2rem;
}
.pain-item { text-align: center; }
.pain-number {
    display: block; font-size: 3rem; font-weight: 800;
    letter-spacing: -1px;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.pain-label {
    display: block; font-size: 0.9rem;
    color: var(--color-text-muted); margin-top: 0.25rem;
}
.pain-divider {
    width: 1px; height: 60px;
    background: var(--color-border-light);
}
.pain-punchline {
    text-align: center; font-size: 1.1rem;
    color: var(--color-text-muted); font-style: italic;
}

/* ── Section Titles ──────────────────────────────────── */
.section-title {
    font-size: 2.5rem; font-weight: 800;
    letter-spacing: -1px; text-align: center;
    margin-bottom: 0.75rem;
}
.section-sub {
    text-align: center; font-size: 1.1rem;
    color: var(--color-text-muted);
    margin-bottom: 3.5rem;
}

/* ── Timeline / How It Works ─────────────────────────── */
.timeline-section {
    padding: 6rem 0;
    background: var(--gradient-glow);
}
.timeline { max-width: 700px; margin: 0 auto; position: relative; }
.timeline::before {
    content: ''; position: absolute;
    left: 52px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-hot), transparent);
}
.timeline-item {
    display: flex; gap: 2rem;
    padding-bottom: 3rem;
    position: relative;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker {
    flex-shrink: 0; width: 105px; text-align: right;
    padding-top: 0.15rem;
}
.timeline-day {
    background: var(--color-surface);
    border: 1px solid var(--color-border-light);
    padding: 0.3rem 0.75rem; border-radius: 20px;
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--color-accent);
}
.timeline-content h3 {
    font-size: 1.15rem; font-weight: 700;
    margin-bottom: 0.4rem;
}
.timeline-content p {
    color: var(--color-text-muted); font-size: 0.9rem;
    line-height: 1.6;
}

/* ── Team Section ────────────────────────────────────── */
.team-section { padding: 6rem 0; }
.team-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.team-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem 1.75rem;
    transition: all 0.3s;
}
.team-card:hover {
    border-color: var(--color-border-light);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.team-icon {
    font-size: 2rem; margin-bottom: 1rem;
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,107,53,0.1);
    border-radius: 12px;
}
.team-card h3 {
    font-size: 1rem; font-weight: 700;
    margin-bottom: 0.6rem;
}
.team-card p {
    color: var(--color-text-muted); font-size: 0.85rem;
    line-height: 1.6;
}

/* ── Comparison Section ──────────────────────────────── */
.comparison-section {
    padding: 6rem 0;
    background: var(--gradient-glow);
}
.comparison-grid {
    display: flex; align-items: stretch;
    justify-content: center; gap: 0;
    max-width: 850px; margin: 0 auto;
}
.comparison-card {
    flex: 1; padding: 2.5rem 2rem;
    border-radius: var(--radius);
    position: relative;
}
.comparison-agency {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    opacity: 0.7;
}
.comparison-pf {
    background: var(--color-surface);
    border: 2px solid var(--color-accent);
    box-shadow: 0 0 60px rgba(255,107,53,0.15);
}
.comparison-badge {
    position: absolute; top: -12px; left: 24px;
    background: var(--gradient-accent);
    color: white; font-weight: 700; font-size: 0.7rem;
    padding: 0.3rem 0.8rem; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 1px;
}
.comparison-vs {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: 800;
    color: var(--color-text-muted);
    padding: 0 1.5rem;
}
.comparison-card h3 {
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 0.75rem;
}
.comparison-price {
    font-size: 2rem; font-weight: 800;
    margin-bottom: 1.5rem;
}
.comparison-price span {
    font-size: 0.9rem; font-weight: 400;
    color: var(--color-text-muted);
}
.comparison-card ul { list-style: none; }
.comparison-card li {
    padding: 0.4rem 0; color: var(--color-text-muted);
    font-size: 0.85rem;
}
.comparison-agency li::before { content: "— "; color: var(--color-text-muted); }
.comparison-pf li::before { content: "✓ "; color: var(--color-success); }

/* ── Creative Engines Section ──────────────────────────── */
.engines-section { padding: 6rem 0; background: var(--color-bg-warm); }
.engines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}
.engine-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: all 0.3s;
}
.engine-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(255, 107, 53, 0.1);
}
.engine-icon-lg {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    display: block;
}
.engine-card h3 {
    font-size: 1.05rem; font-weight: 700;
    margin-bottom: 0.5rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.engine-card p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── Bento Grid / Capabilities ───────────────────────── */
.capabilities-section { padding: 6rem 0; }
.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.bento-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    transition: all 0.3s;
}
.bento-card:hover {
    border-color: var(--color-border-light);
}
.bento-wide { grid-column: span 2; }
.bento-card h3 {
    font-size: 1.15rem; font-weight: 700;
    margin-bottom: 0.6rem;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bento-card p {
    color: var(--color-text-muted); font-size: 0.9rem;
    line-height: 1.7;
}

/* ── Pricing / Retainer ──────────────────────────────── */
.pricing-section {
    padding: 6rem 0;
    background: var(--gradient-glow);
}
.retainer-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; margin-bottom: 2rem;
}
.retainer-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    display: flex; flex-direction: column;
    position: relative;
}
.retainer-featured {
    border-color: var(--color-accent);
    box-shadow: 0 0 60px rgba(255,107,53,0.1);
    transform: scale(1.03);
}
.retainer-popular {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--gradient-accent);
    color: white; font-weight: 700; font-size: 0.7rem;
    padding: 0.3rem 1rem; border-radius: 20px;
    text-transform: uppercase; letter-spacing: 1px;
    white-space: nowrap;
}
.retainer-card h3 {
    font-size: 1.3rem; font-weight: 800;
    margin-bottom: 0.15rem;
}
.retainer-tagline {
    font-size: 0.85rem; color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}
.retainer-price {
    font-size: 2.5rem; font-weight: 800;
    margin-bottom: 1.5rem;
}
.retainer-price span {
    font-size: 0.95rem; font-weight: 400;
    color: var(--color-text-muted);
}
.retainer-card ul {
    list-style: none; margin-bottom: 2rem;
    flex-grow: 1;
}
.retainer-card li {
    padding: 0.35rem 0; color: var(--color-text-muted);
    font-size: 0.85rem;
}
.retainer-card li::before { content: "✓ "; color: var(--color-success); }
.btn-retainer {
    display: block; text-align: center;
    background: transparent;
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    padding: 0.7rem 1.5rem; border-radius: var(--radius-sm);
    text-decoration: none; font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s;
}
.btn-retainer:hover {
    border-color: var(--color-text-muted);
    background: rgba(255,255,255,0.03);
}
.btn-retainer-cta {
    display: block; text-align: center;
    background: var(--gradient-accent);
    color: white; border: none;
    padding: 0.8rem 1.5rem; border-radius: var(--radius-sm);
    text-decoration: none; font-weight: 600; font-size: 0.9rem;
    transition: all 0.2s;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.3);
}
.btn-retainer-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 30px rgba(255, 107, 53, 0.45);
}

/* Agency tier (separate row) */
.retainer-agency {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem 2.5rem;
}
.retainer-agency-inner {
    display: flex; align-items: center;
    justify-content: space-between; gap: 2rem;
}
.retainer-agency h3 {
    font-size: 1.2rem; font-weight: 800;
    margin-bottom: 0.3rem;
}
.retainer-agency p {
    color: var(--color-text-muted); font-size: 0.9rem;
}
.retainer-agency-price {
    display: flex; align-items: center; gap: 1.5rem;
    flex-shrink: 0;
}
.retainer-agency-price .retainer-price {
    margin-bottom: 0; font-size: 2rem;
}

/* ── Final CTA ───────────────────────────────────────── */
.final-cta {
    padding: 8rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.final-cta::before {
    content: ''; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 150%; height: 100%;
    background: radial-gradient(ellipse at 50% 50%, rgba(255,107,53,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.final-cta h2 {
    font-size: 2.75rem; font-weight: 800;
    letter-spacing: -1px; line-height: 1.2;
    margin-bottom: 1rem; position: relative;
}
.final-cta p {
    color: var(--color-text-muted); font-size: 1.1rem;
    margin-bottom: 2rem; position: relative;
}
.final-cta .btn-cta { position: relative; }

/* ── Landing Footer ──────────────────────────────────── */
.landing-footer {
    padding: 4rem 0 2rem;
    border-top: 1px solid var(--color-border);
}
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem; margin-bottom: 3rem;
}
.footer-brand {
    display: flex; flex-direction: column; gap: 0.5rem;
}
.footer-brand .logo-mark { align-self: flex-start; }
.footer-brand p {
    color: var(--color-text-muted); font-size: 0.85rem;
    margin-top: 0.25rem;
}
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links h4 {
    font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
.footer-links a {
    color: var(--color-text-muted); text-decoration: none;
    font-size: 0.85rem; transition: color 0.2s;
}
.footer-links a:hover { color: var(--color-text); }
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--color-border);
}
.footer-bottom p {
    color: var(--color-text-muted); font-size: 0.8rem;
    text-align: center;
}

/* ══════════════════════════════════════════════════════
   APP STYLES — Dashboard, Studio, etc.
   (Preserved from original, not affected by landing)
   ══════════════════════════════════════════════════════ */

/* ── App Nav ─────────────────────────────────────────── */
.nav-main {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}
.nav-brand a {
    display: flex; align-items: center; gap: 0.5rem;
    text-decoration: none; color: var(--color-text);
}
.logo {
    background: var(--gradient-accent);
    color: white; font-weight: 700; font-size: 0.875rem;
    padding: 0.25rem 0.5rem; border-radius: 4px;
}
.nav-logo {
    height: 38px; width: auto;
}
/* ─────────────────────────────────────────────────────────────
   Unified PromoForge gradient — one palette, five stops, used on
   every title element across the app so page titles, hero text,
   eyebrow labels and the nav wordmark all share the same visual
   language. The wordmark uses a slightly different stop map so
   its orange moment lingers a touch longer (warmer brand feel).
   ───────────────────────────────────────────────────────────── */
@keyframes pf-title-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Unified shimmer — orange -> pink -> magenta -> purple flowing left-to-right.
   Gradient repeats twice in the background (size 200%) and animates from
   right to left so every title shows an identical continuous flow.
   Every title surface uses the same palette and the same 6s duration
   so they stay perfectly in sync when loaded on the same page. */
@keyframes pf-title-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.pf-title-gradient,
.pf-shimmer-text,
.logo-text {
    background: linear-gradient(90deg,
        #ff6b35 0%,
        #ff2d78 25%,
        #a855f7 50%,
        #6c63ff 75%,
        #ff6b35 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pf-title-shimmer 6s linear infinite;
}
.pf-title-gradient {
    font-weight: 800;
    letter-spacing: -0.02em;
}
.logo-text {
    font-weight: 700;
    font-size: 1.2rem;
}

/* ─────────────────────────────────────────────────────────────
   Global card hover motion — gentle lift on any .pf-card / .card
   ───────────────────────────────────────────────────────────── */
.pf-card, .card, .pf-hoverable {
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pf-card:hover, .card:hover, .pf-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(108,99,255,0.14);
}

/* ─────────────────────────────────────────────────────────────
   PromoForge Tile system — used for content previews (Recent
   Activity, Creative Studio output grid, etc). Tiles answer:
   "what is this + what can I do with it?" — no blank placeholders.
   ───────────────────────────────────────────────────────────── */
.pf-tile {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: 160px;
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease;
}
.pf-tile:hover { transform: translateY(-4px); }

.pf-tile-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a14;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.35);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.pf-tile:hover .pf-tile-thumb {
    border-color: rgba(108,99,255,0.55);
    box-shadow: 0 14px 34px rgba(108,99,255,0.28), 0 0 0 1px rgba(255,45,120,0.18) inset;
}
.pf-tile-thumb > img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .35s ease;
}
.pf-tile:hover .pf-tile-thumb > img { transform: scale(1.04); }

/* Gradient accent strip on top — subtle brand-tie */
.pf-tile-thumb::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg,#6c63ff 0%,#ff2d78 100%);
    opacity: 0.35;
    transition: opacity .18s ease;
    z-index: 2;
}
.pf-tile:hover .pf-tile-thumb::before { opacity: 1; }

/* Per-type accent tint (very subtle) */
.pf-tile[data-type="audio"] .pf-tile-thumb::before {
    background: linear-gradient(90deg,#6c63ff 0%,#9c6bff 100%);
}
.pf-tile[data-type="video"] .pf-tile-thumb::before {
    background: linear-gradient(90deg,#ff2d78 0%,#ff6b35 100%);
}
.pf-tile[data-type="image"] .pf-tile-thumb::before {
    background: linear-gradient(90deg,#3ddad7 0%,#6c63ff 100%);
}

/* ── Audio fallback: animated waveform ───────────────────────── */
.pf-tile-audio-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 30% 30%, rgba(108,99,255,0.35) 0%, transparent 55%),
        radial-gradient(ellipse at 70% 75%, rgba(255,45,120,0.25) 0%, transparent 55%),
        linear-gradient(135deg,#0a0a14 0%,#14142e 50%,#1f1030 100%);
    display: flex; align-items: center; justify-content: center;
}
.pf-waveform {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 55%;
    width: 70%;
    justify-content: center;
}
.pf-waveform span {
    display: inline-block;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg,#ff6b9d 0%,#6c63ff 100%);
    animation: pf-wave 1.3s ease-in-out infinite;
    transform-origin: center;
    box-shadow: 0 0 8px rgba(108,99,255,0.4);
}
.pf-waveform span:nth-child(1) { height: 22%; animation-delay: 0.00s; }
.pf-waveform span:nth-child(2) { height: 45%; animation-delay: 0.09s; }
.pf-waveform span:nth-child(3) { height: 65%; animation-delay: 0.18s; }
.pf-waveform span:nth-child(4) { height: 80%; animation-delay: 0.27s; }
.pf-waveform span:nth-child(5) { height: 95%; animation-delay: 0.36s; }
.pf-waveform span:nth-child(6) { height: 75%; animation-delay: 0.45s; }
.pf-waveform span:nth-child(7) { height: 55%; animation-delay: 0.54s; }
.pf-waveform span:nth-child(8) { height: 35%; animation-delay: 0.63s; }
.pf-waveform span:nth-child(9) { height: 25%; animation-delay: 0.72s; }
@keyframes pf-wave {
    0%, 100% { transform: scaleY(0.35); opacity: 0.7; }
    50%      { transform: scaleY(1);    opacity: 1; }
}

/* ── Video fallback: textured gradient with play glyph ───────── */
.pf-tile-video-bg {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 65% 35%, rgba(255,107,53,0.28) 0%, transparent 55%),
        radial-gradient(ellipse at 25% 80%, rgba(108,99,255,0.25) 0%, transparent 55%),
        linear-gradient(135deg,#14081c 0%,#2a1240 50%,#3d1a3d 100%);
}
.pf-tile-video-bg::after {
    content: "";
    position: absolute; inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 3px);
    pointer-events: none;
}

/* ── Centered play-button overlay — appears on hover ─────────── */
.pf-tile-play {
    position: absolute; top: 50%; left: 50%;
    width: 46px; height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: linear-gradient(135deg,#6c63ff 0%,#ff2d78 100%);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.1rem;
    box-shadow: 0 6px 22px rgba(108,99,255,0.55);
    opacity: 0; transform: scale(0.72);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
    z-index: 3;
}
.pf-tile:hover .pf-tile-play {
    opacity: 1;
    transform: scale(1);
}
.pf-tile-play svg { width: 18px; height: 18px; margin-left: 2px; }

/* ── Type badge (bottom-left) ────────────────────────────────── */
.pf-tile-type {
    position: absolute; bottom: 6px; left: 6px;
    font-size: 0.55rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: rgba(10,10,20,0.85);
    color: #fff;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}
.pf-tile[data-type="audio"] .pf-tile-type { background: rgba(108,99,255,0.9); }
.pf-tile[data-type="video"] .pf-tile-type { background: rgba(255,45,120,0.9); }
.pf-tile[data-type="image"] .pf-tile-type { background: rgba(61,218,215,0.9); color:#0a0a14; }

/* ── Duration chip (bottom-right) ────────────────────────────── */
.pf-tile-duration {
    position: absolute; bottom: 6px; right: 6px;
    font-size: 0.65rem; font-weight: 700;
    background: rgba(10,10,20,0.85);
    color: #fff;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    z-index: 2;
}

/* ── Brand badge (top-right) ─────────────────────────────────── */
.pf-tile-brand {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px;
    border-radius: 6px;
    background: rgba(10,10,20,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 2;
}
.pf-tile-brand img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.pf-tile-brand-dot {
    position: absolute; top: 8px; right: 8px;
    width: 12px; height: 12px; border-radius: 50%;
    border: 2px solid rgba(10,10,20,0.85);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 2;
}

/* ── Meta row under the tile ─────────────────────────────────── */
.pf-tile-meta {
    margin-top: 0.45rem;
    padding: 0 2px;
}
.pf-tile-title {
    font-size: 0.8rem; font-weight: 600;
    color: var(--color-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .15s ease;
}
.pf-tile:hover .pf-tile-title { color: #fff; }
.pf-tile-sub {
    margin-top: 2px;
    font-size: 0.68rem;
    color: var(--color-text-muted);
    display: flex; align-items: center; gap: 0.4rem;
}
.pf-tile-sub-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--color-text-muted);
    opacity: 0.5;
}

/* ── Horizontal scroll row with scroll-snap + fade edges ─────── */
.pf-tile-row {
    position: relative;
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.5rem 0.25rem 1rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,99,255,0.4) transparent;
    /* Fade edges via mask */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 97%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 2%, #000 97%, transparent 100%);
}
.pf-tile-row::-webkit-scrollbar { height: 6px; }
.pf-tile-row::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg,#6c63ff,#ff2d78);
    border-radius: 3px;
}
.pf-tile-row .pf-tile { scroll-snap-align: start; }

.nav-links { display: flex; gap: 1.5rem; margin-left: 3rem; align-items: center; }
.nav-links a {
    color: var(--color-text-muted); text-decoration: none;
    font-size: 0.9rem; padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}
.nav-links a.active, .nav-links a:hover {
    color: var(--color-text); border-bottom-color: var(--color-accent);
}

/* ── Phase F · F4.1 — Primary vs Secondary nav hierarchy ──
   The primary path (Create → Projects → Analytics) stays at
   full weight + larger type; secondary surfaces (Brands, Library,
   Distribute, Strategy) sit behind a subtle divider at reduced
   weight + size so they don't compete for attention. Semantic-level
   data attributes (data-nav-group) let tests lock the hierarchy
   independent of styling. */
.nav-links .nav-primary-link {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text);
}
.nav-links .nav-primary-link:hover,
.nav-links .nav-primary-link.active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}
.nav-links .nav-secondary-link {
    font-size: 0.82rem;
    opacity: 0.7;
    font-weight: 400;
}
.nav-links .nav-secondary-link:hover,
.nav-links .nav-secondary-link.active {
    opacity: 1;
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}
.nav-links .nav-divider {
    width: 1px;
    height: 16px;
    background: var(--color-border);
    display: inline-block;
    margin: 0 0.4rem;
}
.nav-mobile .nav-primary-link {
    font-weight: 700;
    font-size: 1.05rem;
}
.nav-mobile .nav-secondary-link {
    font-size: 0.88rem;
    opacity: 0.75;
}
.nav-mobile-divider {
    display: block;
    height: 1px;
    background: var(--color-border);
    margin: 0.5rem 0;
}

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.nav-right a { color: var(--color-text-muted); text-decoration: none; font-size: 0.875rem; }
.plan-badge {
    background: var(--gradient-accent); color: white;
    padding: 0.15rem 0.6rem; border-radius: 12px;
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
}

/* ── Buttons ──────────────────────────────────────────── */
.btn {
    display: inline-block; padding: 0.5rem 1.25rem;
    border-radius: var(--radius-sm); font-weight: 500;
    text-decoration: none; border: none; cursor: pointer;
    font-size: 0.9rem; transition: all 0.15s;
}
.btn-primary {
    background: var(--gradient-accent);
    color: white;
    box-shadow: 0 2px 10px rgba(108,99,255,0.25);
    position: relative;
}
.btn-primary:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255,45,120,0.35), 0 2px 8px rgba(108,99,255,0.25);
    filter: brightness(1.08) saturate(1.1);
}
.btn-primary:active { transform: translateY(0); }
.btn-outline {
    border: 1px solid var(--color-border-light);
    color: var(--color-text);
    background: transparent;
    position: relative;
}
.btn-outline:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
    border-color: var(--color-accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(108,99,255,0.18);
}
.btn-outline:active { transform: translateY(0); }
.btn-lg { padding: 0.75rem 2rem; font-size: 1rem; }
.btn-sm { padding: 0.25rem 0.75rem; font-size: 0.8rem; }

/* ── Cards ────────────────────────────────────────────── */
/* Rich card treatment — applies to EVERY .card globally. Each card
   can override its accent palette via inline `style="--accent-a:...;
   --accent-b:...;"` or via `data-kind="..."` attributes. */
.card {
    --accent-a: #6c63ff;
    --accent-b: #ff2d78;
    position: relative;
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* Top accent strip — subtle at rest, pops on hover */
.card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-a) 0%, var(--accent-b) 100%);
    opacity: 0.35;
    transition: opacity .2s ease, height .2s ease;
    z-index: 2;
    pointer-events: none;
}
/* Corner orb — bleeds accent color into the tile */
.card::after {
    content: "";
    position: absolute; top: -40px; right: -40px;
    width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-a) 0%, var(--accent-b) 50%, transparent 70%);
    opacity: 0.05; filter: blur(14px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
    z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-a);
    box-shadow:
        0 14px 36px rgba(0,0,0,0.45),
        0 0 0 1px color-mix(in srgb, var(--accent-a) 30%, transparent) inset;
}
.card:hover::before { opacity: 1; height: 3px; }
.card:hover::after  { opacity: 0.22; transform: scale(1.15); }

/* Cards that are <a> tags — kill underline/inherit color so the
   decoration doesn't fight the new chrome */
a.card { text-decoration: none; color: inherit; display: block; }

/* data-kind theme map (shared with Create tiles) — so any card in
   any template can opt into a themed palette just by setting
   data-kind="video|image|carousel|thumbnail|voice|background|
   templates|flows|outcomes|assets|campaign". */
.card[data-kind="video"]      { --accent-a:#ff2d78; --accent-b:#ff6b35; }
.card[data-kind="image"]      { --accent-a:#ff6b35; --accent-b:#facc15; }
.card[data-kind="carousel"]   { --accent-a:#3ddad7; --accent-b:#6c63ff; }
.card[data-kind="thumbnail"]  { --accent-a:#facc15; --accent-b:#ff6b35; }
.card[data-kind="voice"]      { --accent-a:#6c63ff; --accent-b:#a855f7; }
.card[data-kind="background"] { --accent-a:#10b981; --accent-b:#3ddad7; }
.card[data-kind="templates"]  { --accent-a:#ff6b35; --accent-b:#ff2d78; }
.card[data-kind="flows"]      { --accent-a:#facc15; --accent-b:#a855f7; }
.card[data-kind="outcomes"]   { --accent-a:#10b981; --accent-b:#6c63ff; }
.card[data-kind="assets"]     { --accent-a:#3ddad7; --accent-b:#6c63ff; }
.card[data-kind="campaign"]   { --accent-a:#ff6b35; --accent-b:#a855f7; }
.card[data-kind="brand"]      { --accent-a:#6c63ff; --accent-b:#ff2d78; }
.card[data-kind="platform"]   { --accent-a:#3ddad7; --accent-b:#6c63ff; }
.card[data-kind="metric"]     { --accent-a:#a855f7; --accent-b:#6c63ff; }
.card[data-kind="warning"]    { --accent-a:#facc15; --accent-b:#ef4444; }
.card[data-kind="success"]    { --accent-a:#10b981; --accent-b:#3ddad7; }

/* Brand cards use pure inline styles in the template — no class,
   no pseudo-elements. Keeps them bulletproof against any global
   CSS bleed or rendering quirks. */

/* ─────────────────────────────────────────────────────────────
   Multi-select highlight — used on both Library asset cards and
   Studio output cards when the user enters select mode. Paired
   with Alpine.js `pfSelection` data component in page templates.
   ───────────────────────────────────────────────────────────── */
.pf-selected {
    outline: 3px solid transparent;
    outline-offset: 2px;
    border-image: linear-gradient(135deg, #6c63ff, #ff2d78) 1;
    box-shadow: 0 0 0 3px rgba(108,99,255,0.55), 0 12px 32px rgba(255,45,120,0.35) !important;
    transform: translateY(-2px);
}
.pf-select-mode .asset-card,
.pf-select-mode .output-card {
    cursor: pointer;
}

/* Also apply the rich treatment to analytics metric cards + brand
   items that don't happen to use .card directly. */
.metric-card, .analytics-card {
    --accent-a: #a855f7;
    --accent-b: #6c63ff;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.metric-card::before, .analytics-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-a) 0%, var(--accent-b) 100%);
    opacity: 0.4;
    transition: opacity .2s ease, height .2s ease;
    z-index: 2;
    pointer-events: none;
}
.metric-card::after, .analytics-card::after {
    content: "";
    position: absolute; top: -40px; right: -40px;
    width: 140px; height: 140px; border-radius: 50%;
    background: radial-gradient(circle, var(--accent-a) 0%, var(--accent-b) 50%, transparent 70%);
    opacity: 0.06; filter: blur(14px);
    transition: opacity .28s ease, transform .28s ease;
    pointer-events: none;
    z-index: 0;
}
.metric-card > *, .analytics-card > * { position: relative; z-index: 1; }
.metric-card:hover, .analytics-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-a);
    box-shadow:
        0 12px 32px rgba(0,0,0,0.4),
        0 0 0 1px color-mix(in srgb, var(--accent-a) 28%, transparent) inset;
}
.metric-card:hover::before, .analytics-card:hover::before { opacity: 1; height: 3px; }
.metric-card:hover::after,  .analytics-card:hover::after  { opacity: 0.22; transform: scale(1.15); }
.card h3 { margin-bottom: 1rem; font-size: 1rem; color: var(--color-text-muted); }
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.card-wide { grid-column: span 2; }

/* ── Dashboard ────────────────────────────────────────── */
.dashboard { padding: 2rem 1.5rem; max-width: 1200px; margin: 0 auto; }
.dashboard-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.dashboard-header h1 { font-size: 1.5rem; }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

/* ── Tables ───────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 0.5rem; color: var(--color-text-muted); font-size: 0.8rem; border-bottom: 1px solid var(--color-border); }
.table td { padding: 0.5rem; font-size: 0.9rem; border-bottom: 1px solid var(--color-border); }
.table a { color: var(--color-accent); text-decoration: none; }

/* ── Status badges ────────────────────────────────────── */
[class*="status-"] {
    padding: 0.15rem 0.5rem; border-radius: 4px;
    font-size: 0.75rem; font-weight: 500;
}
.status-draft { background: var(--color-surface-hover); }
.status-storyboarded { background: #1e3a5f; color: #60a5fa; }
.status-previewed { background: #312e81; color: #a78bfa; }
.status-approved { background: #14532d; color: #4ade80; }
.status-rendering { background: #78350f; color: #fbbf24; }
.status-rendered { background: #14532d; color: #4ade80; }
.status-posted { background: #14532d; color: #4ade80; }
.status-failed { background: #450a0a; color: #f87171; }
.status-stale { background: #78350f; color: #fbbf24; }

/* ── Forms ─────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; color: var(--color-text-muted); }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 0.6rem 0.8rem; border-radius: var(--radius-sm);
    border: 1px solid var(--color-border); background: var(--color-bg);
    color: var(--color-text); font-size: 0.9rem;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--color-accent);
}

/* Checkbox + radio reset — the generic .form-group input rule above
   stretches every input to 100% width, which makes checkboxes render
   as invisible full-width boxes with the label floating far to the
   right. Restore native sizing + accent colour here. High specificity
   (attribute selector + class) so inline overrides still work, but
   no template needs to opt in — every checkbox on every page picks
   this up automatically. */
.form-group input[type="checkbox"],
.form-group input[type="radio"] {
    width: auto;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    /* Slightly larger than browser default for better visual
       presence at our typography scale. */
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Any label that wraps a checkbox + text (our standard pattern in
   the wizard + brand edit) reads cleanly as "☑ label" when the
   label uses display:flex. Override the block-level .form-group
   label rule so labels containing a checkbox lay out horizontally
   with a sensible gap — the inline style="display:flex" some
   templates already use wins anyway, but this makes the pattern
   work even on plain <label><input><span></span></label> markup. */
.form-group label.checkbox-label,
.form-group label:has(> input[type="checkbox"]),
.form-group label:has(> input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    cursor: pointer;
    line-height: 1.45;
}
.form-group label.checkbox-label > span,
.form-group label:has(> input[type="checkbox"]) > span,
.form-group label:has(> input[type="radio"]) > span {
    margin-bottom: 0;
    flex: 1;
}

/* ── Messages ─────────────────────────────────────────── */
.messages { max-width: 1200px; margin: 0.5rem auto; padding: 0 1.5rem; }
.message { padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.5rem; font-size: 0.9rem; }
.message-success { background: #14532d; color: #4ade80; }
.message-error { background: #450a0a; color: #f87171; }
.message-warning { background: #78350f; color: #fbbf24; }

/* ── Onboarding ───────────────────────────────────────── */
.onboarding-prompt {
    text-align: center; padding: 4rem 2rem;
    background: var(--color-surface); border-radius: var(--radius);
    border: 2px dashed var(--color-border);
}
.onboarding-prompt h2 { margin-bottom: 0.75rem; }
.onboarding-prompt p { color: var(--color-text-muted); margin-bottom: 1.5rem; }

/* ── Auth Pages ───────────────────────────────────────── */
.auth-page .nav-main { display: none; }
.auth-container {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 2rem;
}
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.auth-header { text-align: center; margin-bottom: 2rem; }
.auth-header h1 { font-size: 1.5rem; margin: 1rem 0 0.25rem; }
.auth-header p { color: var(--color-text-muted); font-size: 0.9rem; }
.auth-footer { text-align: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }
.auth-footer p { font-size: 0.85rem; color: var(--color-text-muted); }
.auth-footer a { color: var(--color-accent); text-decoration: none; }
.btn-full { width: 100%; text-align: center; }
.form-row-inline { display: flex; justify-content: space-between; align-items: center; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--color-text-muted); cursor: pointer; }
.checkbox-label input { width: auto; }
.forgot-link { font-size: 0.8rem; color: var(--color-accent); text-decoration: none; }
.alert-error { background: #450a0a; color: #f87171; padding: 0.75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: 0.85rem; }

/* ── Footer ───────────────────────────────────────────── */
footer { padding: 2rem 0; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; border-top: 1px solid var(--color-border); margin-top: 4rem; }

/* ── AI Disclosure Badges ─────────────────────────────── */
.ai-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: linear-gradient(135deg, #312e81, #1e3a5f);
    color: #a78bfa; padding: 0.15rem 0.5rem;
    border-radius: 4px; font-size: 0.7rem; font-weight: 600;
    border: 1px solid #4338ca;
}
.ai-badge::before { content: "\2728"; font-size: 0.6rem; }
.ai-badge-compact { padding: 0.1rem 0.35rem; font-size: 0.65rem; }
.ai-badge-compact::before { display: none; }
.ai-disclosure-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; background: var(--color-surface);
    border: 1px solid #4338ca33; border-radius: var(--radius-sm);
    font-size: 0.8rem; color: var(--color-text-muted);
    margin-top: 0.75rem;
}
.ai-disclosure-bar .ai-badge { flex-shrink: 0; }

/* ── Mobile Nav ───────────────────────────────────────── */
.nav-toggle {
    display: none; background: none; border: none;
    color: var(--color-text); font-size: 1.5rem; cursor: pointer;
    padding: 0.25rem; line-height: 1;
}
.nav-mobile {
    display: none; background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem 1.5rem 1rem;
}
.nav-mobile a {
    display: block; padding: 0.5rem 0;
    color: var(--color-text-muted); text-decoration: none; font-size: 0.9rem;
}
.nav-mobile a.active { color: var(--color-text); }
.nav-mobile a:hover { color: var(--color-text); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    /* App responsive */
    .dashboard-grid { grid-template-columns: 1fr; }
    .card-wide { grid-column: span 1; }
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .nav-mobile[data-open="true"] { display: block; }

    /* Landing responsive */
    .hero-headline { font-size: 2.4rem; }
    .landing-hero .hero-sub { font-size: 1rem; }
    .landing-nav-links { display: none; }
    .btn-nav-cta { font-size: 0.75rem; padding: 0.5rem 1rem; }
    .pain-grid { flex-direction: column; gap: 1.5rem; }
    .pain-divider { width: 60px; height: 1px; }
    .team-grid { grid-template-columns: 1fr; }
    .comparison-grid { flex-direction: column; }
    .comparison-vs { padding: 1rem 0; }
    .engines-grid { grid-template-columns: repeat(2, 1fr); }
    .bento-grid { grid-template-columns: 1fr; }
    .bento-wide { grid-column: span 1; }
    .retainer-grid { grid-template-columns: 1fr; }
    .retainer-featured { transform: none; }
    .retainer-agency-inner { flex-direction: column; text-align: center; }
    .retainer-agency-price { flex-direction: column; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .section-title { font-size: 1.8rem; }
    .final-cta h2 { font-size: 1.8rem; }
    .hero-actions { flex-direction: column; align-items: center; }
}

/* ── Legal Pages ─────────────────────────────────── */

.legal-page main { padding-top: 2rem; }

.legal-container {
    max-width: 780px;
    margin: 0 auto;
    padding: 3rem 1.5rem 5rem;
}

.legal-page .landing-nav { position: relative; }

.legal-container h1 {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, var(--color-text), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legal-updated {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-container section {
    margin-bottom: 2rem;
}

.legal-container h2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.75rem;
}

.legal-container h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 1rem 0 0.5rem;
}

.legal-container p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.legal-container ul {
    color: var(--color-text-muted);
    line-height: 1.7;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.legal-container li {
    margin-bottom: 0.35rem;
}

.legal-container a {
    color: var(--color-accent);
    text-decoration: none;
}

.legal-container a:hover {
    text-decoration: underline;
}

.deletion-options {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.deletion-option {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
}

.deletion-option h3 {
    color: var(--color-text);
    margin-top: 0;
}

@media (max-width: 640px) {
    .legal-container { padding: 2rem 1rem 3rem; }
    .legal-container h1 { font-size: 1.6rem; }
}

/* ══════════════════════════════════════════════════════
   AI Suggest Buttons
   ══════════════════════════════════════════════════════ */
.ai-suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    margin-top: 0.25rem;
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.ai-suggest-btn:hover {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
}
.ai-suggest-btn:disabled {
    opacity: 0.5;
    cursor: wait;
}
.ai-suggest-btn.loading {
    pointer-events: none;
    opacity: 0.6;
}