/* 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-surface-alt / --color-border-hover were referenced ~98× across
       41 templates but never defined, so pages without an inline fallback got
       a transparent background / no hover border. Defining them here is purely
       additive — it only supplies a value where one was already expected. */
    --color-surface-alt: #16162a;
    --color-text: #f1f5f9;
    --color-text-muted: #8892a4;
    --color-border: #1e2030;
    --color-border-light: #2a2d42;
    --color-border-hover: #3a3a52;
    --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;
    /* Same animated shimmer as the in-app nav wordmark (.logo-text) so the
       landing brand mark matches every other page's gradient motion. */
    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;
}
.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: 5rem 1.5rem 2.25rem;
    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;
}

/* Landing-scoped readability: slightly stronger muted-text contrast on the
   marketing page only. Overrides the token inside .landing — does NOT touch
   the global token used across the app. */
body.landing { --color-text-muted: #a0aabd; }

/* ── Product Preview Mockup ─────────────────────────── */
.hero-product-preview {
    position: relative; z-index: 2;
    max-width: 1160px; width: 100%;
    /* Tight gap to the CTA so the top of the product shot clears the fold at 1366×768. */
    margin: 1.25rem auto 0;
}
/* Landing hero — the real PromoForge product shot (static asset). Fixed
   aspect-ratio reserves the box so there is no layout shift while it loads. */
.hero-product-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1536 / 1024;
    object-fit: contain;
    border-radius: 16px;
    box-shadow:
        0 24px 70px rgba(0,0,0,0.55),
        0 0 0 1px rgba(255,255,255,0.05),
        0 0 120px rgba(255,107,53,0.08);
}

/* ── Platforms Strip ────────────────────────────────── */
.platforms-strip {
    padding: 2.25rem 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; }
    .platforms-row { gap: 1.5rem; }
    .platform-badge { font-size: 0.8rem; }
}

/* ── Pain Strip ──────────────────────────────────────── */
.pain-strip {
    padding: 3.5rem 0 2.75rem;
    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.12rem;
    color: var(--color-text-muted);
    margin-bottom: 2.5rem;
}

/* ── Timeline / How It Works ─────────────────────────── */
.timeline-section {
    padding: 4.5rem 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: 1.9rem;
    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.18rem; font-weight: 700;
    margin-bottom: 0.35rem;
}
.timeline-content p {
    color: var(--color-text-muted); font-size: 0.98rem;
    line-height: 1.55;
}

/* ── Team Section ────────────────────────────────────── */
.team-section { padding: 4.5rem 0; }
/* 6 role cards in a centred 3×2 grid (see responsive block for 2-col / 1-col). */
.team-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem; max-width: 1000px; margin: 0 auto;
}
.team-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2.25rem 2rem;
    transition: all 0.3s;
    text-align: center;   /* centred stack (badge -> title -> copy), matches engine cards */
}
.team-card:hover {
    border-color: var(--color-border-light);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
/* Premium duotone icon badge — shared by engine + team cards (replaces the
   old flat emoji .team-icon / .engine-icon-lg). Dark surface, subtle neon. */
.pf-ibadge { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; margin:0 auto 1rem;
    background:radial-gradient(circle at 30% 22%, rgba(255,107,53,.20), transparent 62%), var(--color-surface-alt,#16162a);
    border:1px solid var(--color-border-light); box-shadow:0 0 24px rgba(255,45,120,.14), inset 0 1px 0 rgba(255,255,255,.05); }
/* Team + engine cards are BOTH centred vertical stacks (badge -> title ->
   description); the badge keeps the base `margin:0 auto` centring. */
.pf-ico { width:27px; height:27px; fill:none; stroke:url(#pf-ico-grad); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.team-card h3 {
    font-size: 1.1rem; font-weight: 700;
    margin-bottom: 0.55rem;
}
.team-card p {
    color: var(--color-text-muted); font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Comparison Section ──────────────────────────────── */
.comparison-section {
    padding: 4.5rem 0;
    background: var(--gradient-glow);
}
.comparison-grid {
    display: flex; align-items: stretch;
    justify-content: center; gap: 0;
    max-width: 920px; margin: 0 auto;
}
.comparison-card {
    flex: 1; padding: 2.9rem 2.4rem;
    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.18rem; font-weight: 700;
    margin-bottom: 0.75rem;
}
.comparison-price {
    font-size: 2.35rem; font-weight: 800;
    margin-bottom: 1.5rem;
}
.comparison-price span {
    font-size: 0.95rem; font-weight: 400;
    color: var(--color-text-muted);
}
.comparison-card ul { list-style: none; }
.comparison-card li {
    padding: 0.42rem 0; color: var(--color-text-muted);
    font-size: 0.92rem;
}
.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: 4.5rem 0; background: var(--color-bg-warm); }
/* 6 engines in a centred 3×2 grid — fixed 3-up so the last row never sits
   left-aligned (see responsive block for 2-col / 1-col). */
.engines-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1140px;
    margin: 1rem auto 0;
}
.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-card h3 {
    font-size: 1.12rem; 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.92rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

/* ── Bento Grid / Capabilities ───────────────────────── */
.capabilities-section { padding: 4.5rem 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;
}

/* ── Founder narrative — image left, story right ─────── */
.founder-section {
    padding: 3.75rem 0;
    background: var(--color-surface);
}
.founder-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);  /* photo the larger column */
    gap: 3rem;
    align-items: center;  /* centre the story against the taller photo */
    max-width: 1180px;
    margin: 0 auto;
}
.founder-media { min-width: 0; }
.founder-img {
    display: block;
    width: 100%;
    /* Show the whole branded scene — the source is a 4:3 landscape shot (Paul
       flanked by the PromoForge TV lockup on the left and the Create UI on a
       laptop on the right). A tall crop cut both out and left only the dark
       jacket, so the frame matches the source ratio and nothing is lost. */
    height: auto;   /* override the intrinsic height="1086" attr so aspect-ratio applies */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.05);
}
.founder-body .section-eyebrow {
    font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--color-accent); margin-bottom: 0.6rem;
}
.founder-title {
    text-align: left;
    font-size: 2.2rem;
}
.founder-copy {
    margin-top: 1.5rem;
    font-size: 1.05rem; line-height: 1.7;
    color: var(--color-text);
}
.founder-copy p + p { margin-top: 1.1rem; }
.founder-cta { margin-top: 1.75rem; }
.founder-cta .btn-cta { padding: 0.85rem 2rem; }
.founder-micro {
    margin-top: 0.8rem; font-size: 0.85rem;
    color: var(--color-text-muted);
}

/* ── Final CTA ───────────────────────────────────────── */
.final-cta {
    padding: 5.5rem 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; }

/* ═══════════════════════════════════════════════════════════
   Analytics dashboard (rebuild 2026-07-29) — reusable premium
   components. Brand-accurate (orange→pink→purple), NO leftover
   blue --color-primary. Feed on real data with graceful empties.
   ═══════════════════════════════════════════════════════════ */
.pf-ana { max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem; }
.pf-ana-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.pf-ana-head p { color:var(--color-text-muted); margin:.35rem 0 0; font-size:.95rem; }
.pf-ana-actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }

.pf-stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:1rem; margin-bottom:1.4rem; }
.pf-stat { position:relative; overflow:hidden; isolation:isolate;
    background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);
    border:1px solid var(--color-border); border-radius:var(--radius);
    padding:1.15rem 1.25rem; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.pf-stat::after { content:""; position:absolute; top:-40px; right:-40px; width:130px; height:130px; border-radius:50%;
    background:radial-gradient(circle,var(--sa,#ff6b35) 0%,var(--sb,#ff2d78) 50%,transparent 70%); opacity:.08; filter:blur(14px); z-index:0; transition:opacity .28s ease,transform .28s ease; }
.pf-stat:hover { transform:translateY(-3px); border-color:var(--sa,#ff6b35); box-shadow:0 14px 34px rgba(0,0,0,.42); }
.pf-stat:hover::after { opacity:.2; transform:scale(1.15); }
.pf-stat > * { position:relative; z-index:1; }
.pf-stat-top { display:flex; align-items:center; gap:.6rem; margin-bottom:.7rem; }
.pf-stat-ico { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; flex:none;
    background:linear-gradient(135deg,color-mix(in srgb,var(--sa,#ff6b35) 32%,transparent),color-mix(in srgb,var(--sb,#ff2d78) 32%,transparent)); }
.pf-stat-ico svg { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
.pf-stat-label { font-size:.82rem; color:var(--color-text-muted); font-weight:500; }
.pf-stat-value { font-size:2rem; font-weight:800; line-height:1.1; letter-spacing:-.02em; }
.pf-stat-value.awaiting { font-size:.92rem; font-weight:600; color:var(--color-text-muted); line-height:1.35; padding-top:.4rem; }
.pf-stat .pf-delta { margin-top:.5rem; }

/* Freshness indicator — real latest metric sync */
.pf-sync { display:flex; align-items:center; gap:.45rem; font-size:.78rem; color:var(--color-text-muted); margin:-.7rem 0 1.3rem; }
.pf-sync .dot { width:7px; height:7px; border-radius:50%; background:var(--color-success); box-shadow:0 0 7px var(--color-success); flex:none; }
.pf-sync .dot.warn { background:var(--color-warning,#facc15); box-shadow:0 0 7px var(--color-warning,#facc15); }
.pf-stat[data-kind="image"]    { --sa:#ff6b35; --sb:#facc15; }
.pf-stat[data-kind="platform"] { --sa:#3ddad7; --sb:#6c63ff; }
.pf-stat[data-kind="video"]    { --sa:#ff2d78; --sb:#ff6b35; }
.pf-stat[data-kind="warning"]  { --sa:#facc15; --sb:#ef4444; }
.pf-stat[data-kind="success"]  { --sa:#10b981; --sb:#3ddad7; }

.pf-delta { display:inline-flex; align-items:center; gap:.28rem; font-size:.78rem; font-weight:600; }
.pf-delta.up   { color:var(--color-success); }
.pf-delta.down { color:var(--color-error); }
.pf-delta.flat { color:var(--color-text-muted); }
.pf-delta-note { color:var(--color-text-muted); font-weight:400; font-size:.76rem; }

.pf-ana-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:1.25rem; align-items:start; }
.pf-ana-grid .span-2 { grid-column:1 / -1; }

/* ── Rebuilt layout rows (2026-07-29 polish) ──────────────
   Row B: chart (wide) + stacked right column.
   Row C: top posts + recent activity, EQUAL columns, equal height.
   Row D: usage strip, full width. No giant empty column at any size. */
/* Rows share a tighter rhythm (was 1.25rem everywhere → too airy at the
   bottom). Row B stretches so the right column fills to the chart's height,
   killing the dead gap under the donut/platforms stack. */
/* Row 1: full-width chart. Then an INDEPENDENT 2-column flow — each column is
   its own flex-column so cards stack directly under one another and size
   independently (no forced equal heights, no dead gap under a short card). */
.pf-chart-panel { margin-bottom:1rem; }
/* LEFT col = Connected Platforms → Top Posts, RIGHT col = Content Breakdown →
   Recent Activity. align-items:start keeps each column content-driven. */
.pf-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; margin-bottom:1rem; }
.pf-colflow { display:flex; flex-direction:column; gap:1.25rem; min-width:0; }
.pf-panel { position:relative; overflow:hidden;
    background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);
    border:1px solid var(--color-border); border-radius:var(--radius); padding:1.35rem; }
.pf-panel::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gradient-accent); opacity:.5; }
.pf-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.1rem; gap:.75rem; }
.pf-panel-head h3 { font-size:1rem; margin:0; }

/* Explicit, clearer legend — bigger than the old subtle one */
.pf-chart-legend { display:flex; gap:1.35rem; font-size:.86rem; color:var(--color-text-muted); }
.pf-chart-legend b { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; color:var(--color-text); }
.pf-chart-legend .dot { width:11px; height:11px; border-radius:50%; }
/* Shorter chart so the card isn't half-empty — the summary chips fill the foot.
   The SVG draws PLOT ONLY; every axis/peak label is a crisp HTML overlay (see
   .pf-plot below), because preserveAspectRatio=none would distort SVG <text>. */
.pf-chart-svg { width:100%; height:180px; display:block; overflow:visible; }
/* Gridlines — faint but clearly present across the plot */
.pf-grid-line { stroke:var(--color-border-hover,var(--color-border)); stroke-width:1; opacity:.6; }

/* Plot box: 600×200 viewBox maps x→left:(x/6)% and y→top:(y/2)% of this box,
   so HTML labels overlay the SVG pixel-perfectly and stay razor sharp. */
.pf-plot { position:relative; }
.pf-yaxis, .pf-xaxis { position:absolute; inset:0; pointer-events:none; }
.pf-yaxis span { position:absolute; left:2px; transform:translateY(-50%);
    font-size:.66rem; font-weight:600; color:var(--color-text-muted); line-height:1; }
.pf-xaxis span { position:absolute; bottom:0; transform:translateX(-50%);
    font-size:.66rem; font-weight:500; color:var(--color-text-muted); line-height:1; white-space:nowrap; }
.pf-peak-tag { position:absolute; transform:translate(-50%,-165%); pointer-events:none;
    font-size:.6rem; font-weight:700; letter-spacing:.02em; padding:1px 5px; border-radius:5px;
    background:var(--color-surface); border:1px solid var(--color-border); white-space:nowrap; z-index:2; }
.pf-peak-tag.a { color:#ff2d78; }
.pf-peak-tag.b { color:#a855f7; }

/* Summary chips inside the chart card, under the SVG — compact real stats */
.pf-chart-summary { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.pf-chip { display:inline-flex; align-items:baseline; gap:.4rem; padding:.34rem .7rem; border-radius:8px;
    background:var(--color-surface-alt); border:1px solid var(--color-border); font-size:.78rem; }
.pf-chip .k { color:var(--color-text-muted); }
.pf-chip b { font-weight:700; color:var(--color-text); }

/* Chart header tools + segmented period selector */
.pf-chart-tools { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.pf-seg { display:inline-flex; background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:9px; padding:2px; gap:2px; }
.pf-seg button { border:none; background:transparent; color:var(--color-text-muted); font-size:.75rem; font-weight:600; padding:.28rem .6rem; border-radius:7px; cursor:pointer; line-height:1; transition:background .15s ease,color .15s ease; }
.pf-seg button:hover { color:var(--color-text); }
.pf-seg button.on { background:var(--gradient-accent); color:#fff; }

/* Chart box + hover tooltip */
.pf-chart-box { position:relative; }
.pf-hover-line { stroke:var(--color-text-muted); stroke-width:1; stroke-dasharray:3 3; opacity:.6; }
.pf-tip { position:absolute; top:4px; transform:translateX(-50%); pointer-events:none;
    background:var(--color-surface); border:1px solid var(--color-border-hover,var(--color-border)); border-radius:9px;
    padding:.5rem .65rem; font-size:.74rem; box-shadow:0 10px 26px rgba(0,0,0,.42); white-space:nowrap; z-index:3; min-width:118px; }
.pf-tip.flip { transform:translateX(-100%); }
.pf-tip b { display:block; font-size:.72rem; color:var(--color-text-muted); font-weight:600; margin-bottom:.3rem; }
.pf-tip span { display:flex; align-items:center; gap:.4rem; color:var(--color-text); font-weight:500; }
.pf-tip span i { width:8px; height:8px; border-radius:2px; flex:none; }
.pf-tip span em { margin-left:auto; font-style:normal; font-weight:700; }

.pf-donut-wrap { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.pf-donut { position:relative; width:132px; height:132px; flex:none; border-radius:50%; }
.pf-donut-hole { position:absolute; inset:15px; border-radius:50%; background:var(--color-bg); }
/* Number + label are a tight vertical stack, centred on BOTH axes inside the
   ring. flex column + justify/align-center centres the whole stack (a grid with
   two auto rows only top-aligns the tracks — that left the total floating high). */
/* Tight vertical stack, dead-centred on BOTH axes inside the ring:
   "Total created" label above, the big number, "assets" below. flex column +
   justify/align-center keeps the number perfectly centred (a grid only
   top-aligned the tracks, floating the total high). */
.pf-donut-center { position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; gap:.1rem; line-height:1; }
.pf-donut-center b { font-size:1.5rem; font-weight:800; line-height:1; }
.pf-donut-top { font-size:.6rem; color:var(--color-text-muted); line-height:1.1; letter-spacing:.03em; text-transform:uppercase; }
.pf-donut-unit { font-size:.72rem; color:var(--color-text-muted); line-height:1.1; }
.pf-legend { list-style:none; margin:0; padding:0; flex:1; min-width:150px; }
.pf-legend li { display:flex; align-items:center; gap:.55rem; padding:.28rem 0; font-size:.85rem; }
.pf-legend .dot { width:10px; height:10px; border-radius:3px; flex:none; }
.pf-legend .lbl { flex:1; text-transform:capitalize; }
.pf-legend .val { color:var(--color-text-muted); font-weight:600; }

.pf-platforms { display:flex; flex-direction:column; gap:.5rem; }
.pf-plat { display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:10px;
    background:var(--color-surface-alt); border:1px solid var(--color-border); font-size:.82rem; }
.pf-plat .st { width:7px; height:7px; border-radius:50%; background:var(--color-border-hover); flex:none; }
.pf-plat.on .st { background:var(--color-success); box-shadow:0 0 8px var(--color-success); }
.pf-plat.on { border-color:color-mix(in srgb,var(--color-success) 40%,var(--color-border)); }
.pf-plat.warn { border-color:color-mix(in srgb,var(--color-warning,#facc15) 45%,var(--color-border)); }
.pf-plat .muted { color:var(--color-text-muted); }
.pf-plat-body { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.pf-plat-name { font-weight:600; }
.pf-plat-body .muted { font-size:.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px; }
.pf-plat.warn .pf-plat-body .muted { color:var(--color-warning,#facc15); }
/* Header chip variant keeps its inline dot layout */
.pf-ana-actions .pf-plat { gap:.5rem; }

.pf-activity, .pf-top { list-style:none; margin:0; padding:0; }
.pf-activity li { border-bottom:1px solid var(--color-border); }
.pf-activity li:last-child, .pf-top li:last-child { border-bottom:none; }
.pf-act-row { display:flex; align-items:center; gap:.75rem; padding:.6rem .3rem; border-radius:8px;
    text-decoration:none; color:inherit; }
a.pf-act-row:hover { background:var(--color-surface-alt); }
.pf-act-ico { width:34px; height:34px; border-radius:8px; flex:none; display:grid; place-items:center;
    background:var(--color-surface-alt); border:1px solid var(--color-border); }
.pf-act-ico svg { width:16px; height:16px; stroke:var(--color-accent); fill:none; stroke-width:2; }
.pf-act-thumb { width:34px; height:34px; border-radius:8px; object-fit:cover; flex:none;
    background:var(--color-surface-alt); border:1px solid var(--color-border); }
.pf-act-body { flex:1; min-width:0; }
.pf-act-title { font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-act-sub { font-size:.76rem; color:var(--color-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-act-when { font-size:.74rem; color:var(--color-text-muted); white-space:nowrap; flex:none; }

/* Usage — compact full-width strip at the very bottom */
.pf-usage-strip { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
    background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);
    border:1px solid var(--color-border); border-radius:var(--radius); padding:1rem 1.35rem; }
.pf-usage-lead { display:flex; flex-direction:column; gap:.15rem; min-width:200px; }
.pf-usage-num { font-size:1.15rem; font-weight:800; }
.pf-usage-num em { font-style:normal; font-size:.82rem; font-weight:500; color:var(--color-text-muted); }
.pf-usage-sub { font-size:.76rem; color:var(--color-text-muted); }
.pf-usage-bar { flex:1; min-width:180px; height:8px; background:var(--color-surface-alt); border-radius:4px; overflow:hidden; }
.pf-usage-bar > div { height:100%; background:var(--gradient-accent); border-radius:4px; }

.pf-top li { display:flex; align-items:center; gap:.8rem; padding:.6rem 0; border-bottom:1px solid var(--color-border); }
.pf-top-thumb { width:46px; height:46px; border-radius:8px; object-fit:cover; flex:none; background:var(--color-surface-alt); border:1px solid var(--color-border); }
.pf-top-thumb.ph { display:grid; place-items:center; color:var(--color-text-muted); font-size:1.1rem; }
.pf-top-main { flex:1; min-width:0; }
.pf-top-cap { font-size:.85rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pf-top-plat { font-size:.74rem; color:var(--color-text-muted); }
.pf-top-metrics { display:flex; gap:1rem; text-align:right; }
.pf-top-metrics b { color:var(--color-accent-hot); font-weight:700; display:block; font-size:.85rem; }
.pf-top-metrics span { color:var(--color-text-muted); font-size:.66rem; }

.pf-panel-empty { text-align:center; color:var(--color-text-muted); padding:1.1rem .9rem; font-size:.86rem; }

/* ── Responsive reflow (1440 → 1024 → tablet → mobile) ────
   Collapse the 2-column flow to ONE ordered column before either side can
   become a cramped sliver — no horizontal scroll at any width. */
@media (max-width:900px) {
    /* Dissolve the two flex-columns so all four cards share one grid track,
       then reorder to a sensible single-column reading order:
       Platforms → Content Breakdown → Top Posts → Recent Activity. */
    .pf-cols { grid-template-columns:1fr; }
    .pf-colflow { display:contents; }
    .pf-p-platforms { order:1; }
    .pf-p-breakdown { order:2; }
    .pf-p-top       { order:3; }
    .pf-p-recent    { order:4; }
}
@media (max-width:860px) {
    .pf-ana-grid { grid-template-columns:1fr; } .pf-ana-grid .span-2 { grid-column:auto; }
}
@media (max-width:520px) {
    .pf-ana { padding:1.4rem 1rem; }
    .pf-stat-grid { grid-template-columns:1fr 1fr; }
    .pf-usage-strip { flex-direction:column; align-items:stretch; gap:.75rem; }
    .pf-chart-tools { width:100%; justify-content:space-between; }
}

/* ── 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; }
    .comparison-grid { flex-direction: column; }
    .comparison-vs { padding: 1rem 0; }
    .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; }
}

/* ── Landing polish v2 — engines/team/founder reflow ──────────
   engines + team: 3×2 → 2-col (≤1000) → 1-col (≤620).
   founder: side-by-side → stacked (image over text) at ≤820.
   Placed after the 768 block so the narrower breakpoints win at
   equal specificity where they overlap. */
@media (max-width: 1000px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); max-width: 680px; }
    .engines-grid { grid-template-columns: repeat(2, 1fr); max-width: 620px; }
}
@media (max-width: 820px) {
    .founder-inner { grid-template-columns: 1fr; gap: 2rem; }
    .founder-media { max-width: 560px; margin: 0 auto; }
    .founder-title { text-align: center; }
    .founder-body { text-align: center; }
}
@media (max-width: 620px) {
    .team-grid { grid-template-columns: 1fr; max-width: 420px; }
    .engines-grid { grid-template-columns: 1fr; max-width: 420px; }
}

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

/* ── Analytics polish round-2 (2026-07-29) — grouped platforms + status
   lights, bigger donut centre, broken-image-proof activity thumbnails. ── */
.pf-platgroups { display:flex; flex-direction:column; gap:.55rem; }
.pf-platgroup { padding:.55rem .7rem; border-radius:10px; background:var(--color-surface-alt); border:1px solid var(--color-border); }
.pf-platgroup.connected { border-color:color-mix(in srgb,var(--color-success) 32%,var(--color-border)); }
.pf-platgroup.reconnect { border-color:color-mix(in srgb,var(--color-error) 30%,var(--color-border)); }
.pf-platgroup-head { display:flex; align-items:center; gap:.55rem; }
.pf-plat-light { width:10px; height:10px; border-radius:50%; flex:none; }
.pf-plat-light.on  { background:#2ee66e; box-shadow:0 0 9px 2px rgba(46,230,110,.75); }
.pf-plat-light.off { background:#ff4d4d; box-shadow:0 0 9px 2px rgba(255,77,77,.6); }
.pf-plat-name { font-weight:600; font-size:.88rem; }
.pf-plat-warn { margin-left:auto; font-size:.72rem; font-weight:700; color:#ff6b6b; }
.pf-plat-off  { margin-left:auto; font-size:.72rem; color:var(--color-text-muted); }
.pf-plat-accounts { list-style:none; margin:.4rem 0 0; padding:0 0 0 1.95rem; }
.pf-plat-accounts li { font-size:.8rem; color:var(--color-text); padding:.12rem 0; }
.pf-plat-accounts li::before { content:"\2022"; color:#2ee66e; margin-right:.5rem; }
.pf-donut { width:144px; height:144px; }
.pf-donut-hole { inset:17px; }
.pf-donut-center b { font-size:2.5rem; }
.pf-act-thumb-wrap { width:34px; height:34px; flex:none; position:relative; }
.pf-act-fallback { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; background:var(--color-surface-alt); border:1px solid var(--color-border); overflow:hidden; }
.pf-act-fallback .platform-icon { width:34px; height:34px; border-radius:8px; }
.pf-fallback-ico { width:16px; height:16px; stroke:var(--color-accent); fill:none; stroke-width:2; }