/* ==========================================================================
   Flowzco — Redesign visual theme
   Purely cosmetic reskin, scoped under body.redesign-theme so it only ever
   applies on pages that opt in (every website page except the desktop app,
   which is a separate codebase). No selector here touches markup structure,
   IDs, or inline <script> logic those pages rely on for real data/auth/
   checkout — only how existing elements look. Any page without the
   .redesign-theme body class is completely unaffected.

   Most of pages.css already reads color/spacing through CSS custom
   properties (var(--border), var(--brand-solid), var(--r-lg), etc.), so the
   variable overrides in the first block below cascade into the workforce
   dashboard, create.html builder, flowspace chat, auth pages, account,
   and admin panel automatically. The component blocks further down only
   handle the handful of spots that use hardcoded colors instead of a
   variable (mostly leftover purple accents, swapped to green for the
   redesign's monochrome+green language).
   ========================================================================== */

body.redesign-theme {
  --green: #10b981;
  --green-light: #34d399;
  --green-dim: #059669;
  --purple: #10b981;
  --purple-light: #34d399;
  --purple-dim: #059669;

  --bg: #000000;
  --bg-alt: #09090a;
  --bg-elevated: #0d0d0f;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f4f5;
  --text-dim: rgba(244, 244, 245, 0.62);
  --text-dimmer: rgba(244, 244, 245, 0.4);

  /* "light" sections/cards get redefined to the same dark canvas, so the
     alternating light/dark rhythm collapses into the redesign's single
     monochrome-black look without needing to override every consumer. */
  --light-bg: #000000;
  --light-bg-alt: #09090a;
  --light-text: #f4f4f5;
  --light-text-dim: rgba(244, 244, 245, 0.62);
  --light-border: rgba(255, 255, 255, 0.08);
  --light-surface: rgba(255, 255, 255, 0.04);

  --brand-solid: var(--green);
  --brand-tint: rgba(16, 185, 129, 0.12);
  --surface-2: rgba(255, 255, 255, 0.06);
  --brand-light: var(--green-light);

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;

  --font-heading: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  background: var(--bg);
  color: var(--text);
}

body.redesign-theme ::selection { background: var(--green-dim); color: #fff; }

/* ---------- Hardcoded whites the variable swap above can't reach ---------- */
body.redesign-theme .section-light .card,
body.redesign-theme .section-light .empty-state-card,
body.redesign-theme .section-light .glass { background: var(--surface); box-shadow: none; }
body.redesign-theme .section-light .card:hover { box-shadow: var(--shadow-card); border-color: var(--border-strong); }

/* ==========================================================================
   Layout basics
   ========================================================================== */

body.redesign-theme .section { padding: 128px 0; }
body.redesign-theme .section--tight { padding: 92px 0; }
body.redesign-theme h1,
body.redesign-theme h2,
body.redesign-theme h3,
body.redesign-theme h4 { letter-spacing: -0.025em; }
body.redesign-theme h2 { font-size: clamp(32px, 4.2vw, 50px); }
body.redesign-theme .lede { font-size: 18px; line-height: 1.65; }

/* ==========================================================================
   Eyebrow labels — reuses the site's existing .eyebrow component, just
   recolored to the redesign's pill treatment (dot + uppercase caption).
   ========================================================================== */

body.redesign-theme .eyebrow {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--green);
  border-radius: var(--r-xl);
  letter-spacing: 0.07em;
}
body.redesign-theme .eyebrow .dot,
body.redesign-theme .eyebrow-dot {
  background: var(--green);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

/* ==========================================================================
   Navbar
   ========================================================================== */

body.redesign-theme .navbar { background: transparent; border-bottom: 1px solid transparent; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); box-shadow: none; }
body.redesign-theme .navbar.is-scrolled { background: rgba(0,0,0,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: var(--border); }
body.redesign-theme .navbar .brand { font-family: var(--font-heading); font-weight: 700; }
body.redesign-theme .nav-links a { border-radius: var(--r-xl); color: var(--text-dim); }
body.redesign-theme .nav-links a:hover,
body.redesign-theme .nav-links a.active { color: var(--text); background: var(--surface); }
body.redesign-theme .nav-dropdown-menu,
body.redesign-theme .nav-dropdown-card { background: var(--bg-elevated); border-color: var(--border); }
body.redesign-theme .dropdown-item:hover { background: var(--surface); }

/* Log in stays a quiet ghost link; Sign up is the one solid CTA — mirrors
   the redesign's nav (one ghost action, one primary), while leaving the
   real auth-aware show/hide behavior in js/layout.js untouched. */
body.redesign-theme #loginLink {
  background: transparent; border: none; color: var(--text-dim); padding: 9px 14px;
}
body.redesign-theme #loginLink:hover { color: var(--text); }
body.redesign-theme #signupLink {
  background: var(--green); border-color: var(--green); color: #06110c; font-weight: 700;
}
body.redesign-theme #signupLink:hover { background: var(--green-dim); border-color: var(--green-dim); }

body.redesign-theme .mobile-menu { background: var(--bg); border-color: var(--border); }
body.redesign-theme .profile-panel,
body.redesign-theme .notif-panel { background: var(--bg-elevated); border-color: var(--border); }

/* ==========================================================================
   Buttons
   ========================================================================== */

body.redesign-theme .btn { border-radius: var(--r-xl); font-weight: 600; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease); }
body.redesign-theme .btn-primary { background: var(--green); color: #06110c; font-weight: 700; box-shadow: 0 8px 26px rgba(52, 211, 153, 0.22); }
body.redesign-theme .btn-primary:hover { background: var(--green-dim); box-shadow: 0 12px 34px rgba(52, 211, 153, 0.3); transform: translateY(-1px); }
body.redesign-theme .btn-secondary { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); }
body.redesign-theme .btn-secondary:hover { background: var(--surface-hover); border-color: rgba(255,255,255,0.3); }
body.redesign-theme [data-magnet] { will-change: transform; }

/* ==========================================================================
   Hero (index.html)
   ========================================================================== */

body.redesign-theme .hero { padding-top: calc(var(--nav-h) + 70px); }
body.redesign-theme .hero-bg-blob-1,
body.redesign-theme .hero-bg-blob-2 { display: none; }
body.redesign-theme .hero-grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 20%, black 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 20%, black 10%, transparent 75%);
}
body.redesign-theme .hero h1 { font-size: clamp(44px, 7.2vw, 88px); letter-spacing: -0.035em; }
body.redesign-theme .hero h1 em { font-style: normal; color: var(--green); }
body.redesign-theme .hero .lede { color: var(--text-dim); }
body.redesign-theme .hero-actions .btn { border-radius: var(--r-xl); }

/* ==========================================================================
   Ghost-writer — the mascot slides in, traces the headline letter by
   letter, holds, then slides off. One-shot, driven by js/redesign.js.
   ========================================================================== */

body.redesign-theme .hero-ghost-writer {
  position: absolute; z-index: 3; width: 110px;
  opacity: 0; will-change: transform, opacity; pointer-events: none;
}
body.redesign-theme .hero-ghost-writer.is-visible { opacity: 1; }
body.redesign-theme .ghost-visual { width: 100%; }
body.redesign-theme .ghost-visual img { width: 100%; height: auto; display: block; }
body.redesign-theme .ghost-visual.is-writing { animation: fzGhostWiggle 0.16s ease-in-out infinite; }
@keyframes fzGhostWiggle { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
body.redesign-theme .hero h1 .word { display: inline-block; white-space: nowrap; }
body.redesign-theme .hero h1 .char { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
body.redesign-theme .hero h1 .char.is-written { opacity: 1; transform: translateY(0); }

body.redesign-theme .hero-bg-icon {
  position: absolute; z-index: 0; pointer-events: none;
  top: 60px; right: -40px;
  width: 620px; max-width: 55vw;
  opacity: 0.5;
}
body.redesign-theme .hero-bg-icon svg { width: 100%; height: auto; display: block; overflow: visible; }
body.redesign-theme .bg-icon-line { stroke: rgba(244,244,245,0.5); stroke-width: 1.1; fill: none; }
body.redesign-theme .bg-icon-node { fill: var(--green); }
@media (max-width: 1100px) { body.redesign-theme .hero-bg-icon { display: none; } }

/* ==========================================================================
   Marquee — new decorative strip injected just below the hero on index.html
   ========================================================================== */

/* Fade-masked edges so the loop never reads as "starting" or "stopping" —
   it just dissolves into the background on both sides, which is what
   actually sells an infinite scroll (a hard-clipped edge makes even a
   perfectly looping animation look like it has a beginning and an end). */
body.redesign-theme .marquee-section {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 28px 0; overflow: hidden; background: var(--bg-alt);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
body.redesign-theme .marquee-track { display: flex; width: max-content; animation: fzMarqueeScroll 38s linear infinite; }
body.redesign-theme .marquee-section:hover .marquee-track { animation-play-state: paused; }
body.redesign-theme .marquee-group { display: flex; align-items: center; gap: 16px; padding-right: 16px; }
@keyframes fzMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body.redesign-theme .marquee-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 12px; border-radius: var(--r-xl);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 14.5px; font-weight: 600; color: var(--text);
  white-space: nowrap; transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
body.redesign-theme .marquee-pill:hover { border-color: var(--border-strong); background: var(--surface-hover); }
body.redesign-theme .marquee-pill .marquee-icon {
  width: 30px; height: 30px; border-radius: var(--r-md); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16,185,129,0.12); color: var(--green);
}
body.redesign-theme .marquee-pill .marquee-icon svg { width: 15px; height: 15px; }

/* ==========================================================================
   Pillars / cards / glass panels
   ========================================================================== */

body.redesign-theme .glass,
body.redesign-theme .card { background: var(--surface); border-color: var(--border); border-radius: var(--r-lg); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
body.redesign-theme .glass:hover,
body.redesign-theme .card:hover { transform: translateY(-4px); border-color: var(--border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 60px rgba(0,0,0,0.5); }
body.redesign-theme .pillar,
body.redesign-theme .faq-item,
body.redesign-theme .empty-state-card { background: var(--surface); border: 1px solid var(--border); }
body.redesign-theme .card-icon { background: rgba(16,185,129,0.1); border-color: var(--border); color: var(--green); }

/* ==========================================================================
   Category grid
   ========================================================================== */

body.redesign-theme .category-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
body.redesign-theme .category-tile:hover { border-color: var(--green-dim); transform: translateY(-3px); background: var(--surface-hover); }
body.redesign-theme .category-tile .cat-icon { background: rgba(16,185,129,0.1); color: var(--green); }
body.redesign-theme .category-tile .cat-name { font-family: var(--font-heading); font-weight: 700; }

/* ==========================================================================
   Workforce showcase (index.html) — two-column checklist + live task panel,
   replaces the old single centered SVG illustration.
   ========================================================================== */

body.redesign-theme .workforce-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
body.redesign-theme .workforce-layout .check-list { margin-top: 26px; }
body.redesign-theme .workforce-layout .check-list .check { background: rgba(16,185,129,0.14); border: 1px solid rgba(16,185,129,0.35); color: var(--green); font-size: 11px; font-weight: 800; }
body.redesign-theme .workforce-panel { padding: 28px; }
body.redesign-theme .hwf-row-head { display: flex; align-items: center; margin-bottom: 22px; }
body.redesign-theme .hwf-avatar { width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--bg-elevated); margin-left: -9px; }
body.redesign-theme .hwf-avatar:first-child { margin-left: 0; }
body.redesign-theme .hwf-avatar-a, body.redesign-theme .hwf-avatar-c { background: var(--border-strong); }
body.redesign-theme .hwf-avatar-b { background: var(--green); }
body.redesign-theme .hwf-plus { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-hover); border: 1px solid var(--border-strong); color: var(--text-dimmer); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-left: -9px; }
body.redesign-theme .hwf-task { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
body.redesign-theme .hwf-check { width: 21px; height: 21px; border-radius: 6px; background: var(--green); color: #06170f; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
body.redesign-theme .hwf-check-live { background: transparent; border: 1.5px solid var(--green); position: relative; }
body.redesign-theme .hwf-check-live::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: fzPulseDot 1.4s ease-in-out infinite; }
@keyframes fzPulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
body.redesign-theme .hwf-track { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,0.07); overflow: hidden; }
body.redesign-theme .hwf-track-fill { display: block; height: 100%; width: 0; border-radius: 5px; background: var(--green); animation: fzTrackFill 1.4s var(--ease) 0.3s both; }
body.redesign-theme .hwf-track-fill[style*="--w:100%"] { width: 100%; }
body.redesign-theme .hwf-track-fill[style*="--w:64%"] { width: 64%; }
@keyframes fzTrackFill { from { width: 0; } }
body.redesign-theme .hwf-track-fill-anim { animation: fzShimmerWidth 3.2s ease-in-out infinite alternate; }
@keyframes fzShimmerWidth { from { width: 40%; } to { width: 68%; } }
body.redesign-theme .hwf-bars { display: flex; align-items: flex-end; gap: 9px; height: 64px; margin-top: 22px; }
body.redesign-theme .hwf-bars span { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: var(--green); opacity: 0.65; }
body.redesign-theme .hwf-bars span:nth-child(3n+2) { background: var(--border-strong); }
@media (max-width: 900px) {
  body.redesign-theme .workforce-layout { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Workforce illustration panel — kept for any page still using the SVG
   version (currently unused on index.html, harmless if reintroduced).
   ========================================================================== */

body.redesign-theme .workforce-illustration svg rect:first-child { fill: var(--bg-elevated); stroke: var(--border); }

/* ==========================================================================
   Hero proof stats (index.html) — three live-ish counters under the CTAs
   ========================================================================== */

body.redesign-theme .hero-proof { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; margin-top: 8px; margin-bottom: 8px; }
body.redesign-theme .proof-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
body.redesign-theme .proof-num { font-family: var(--font-heading); font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--green); }
body.redesign-theme .proof-label { font-size: 12.5px; color: var(--text-dimmer); text-transform: uppercase; letter-spacing: 0.05em; }
body.redesign-theme .proof-divider { width: 1px; height: 34px; background: var(--border); }

/* ==========================================================================
   Hero showcase mockup (index.html) — floating browser-chrome panel
   ========================================================================== */

body.redesign-theme .hero-showcase { position: relative; margin: 56px auto 0; width: 100%; max-width: 620px; padding: 0 24px; }
body.redesign-theme .showcase-frame { padding: 0; overflow: hidden; animation: fzShowcaseFloat 7s ease-in-out infinite; }
@keyframes fzShowcaseFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
body.redesign-theme .showcase-chrome { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
body.redesign-theme .chrome-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.16); display: inline-block; }
body.redesign-theme .chrome-url { margin-left: 14px; font-size: 12px; color: var(--text-dimmer); font-family: var(--font-body); }
body.redesign-theme .showcase-body { padding: 24px 24px 28px; text-align: left; }
body.redesign-theme .showcase-avatars { display: flex; align-items: center; margin-bottom: 20px; }
body.redesign-theme .avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #061109; border: 3px solid var(--bg-elevated); margin-left: -10px; }
body.redesign-theme .avatar:first-child { margin-left: 0; }
body.redesign-theme .avatar-a, body.redesign-theme .avatar-c { background: var(--border-strong); color: var(--text); }
body.redesign-theme .avatar-b { background: var(--green); }
body.redesign-theme .avatar-more { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-dim); }
body.redesign-theme .showcase-row { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
body.redesign-theme .row-check { width: 19px; height: 19px; border-radius: 6px; background: var(--green); color: #06170f; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: none; }
body.redesign-theme .row-check-pending { background: transparent; border: 1.5px solid var(--border-strong); }
body.redesign-theme .row-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); }
body.redesign-theme .row-bar-lg { width: 82%; }
body.redesign-theme .row-bar-md { width: 60%; }
body.redesign-theme .row-bar-sm { width: 42%; }
body.redesign-theme .showcase-graph { margin-top: 22px; height: 80px; }
body.redesign-theme .showcase-graph svg { width: 100%; height: 100%; }

/* ==========================================================================
   Ecosystem bento grid (index.html) — replaces the flat 4-up pillar row
   ========================================================================== */

body.redesign-theme .bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 18px; margin-top: 46px; }
body.redesign-theme .bento-card { padding: 28px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
body.redesign-theme .bento-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
body.redesign-theme .bento-lg { grid-row: span 2; display: flex; flex-direction: column; }
body.redesign-theme .bento-wide { grid-column: span 2; }
body.redesign-theme .bento-wide-inner { display: flex; align-items: flex-start; gap: 20px; }
body.redesign-theme .bento-wide-inner h3 { margin-bottom: 6px; }
body.redesign-theme .card-icon-lg { width: 56px; height: 56px; }
body.redesign-theme .card-icon-lg svg { width: 26px; height: 26px; }
body.redesign-theme .bento-mini-graph { display: flex; align-items: flex-end; gap: 7px; height: 60px; margin-top: auto; padding-top: 22px; }
body.redesign-theme .mini-bar { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--green); opacity: 0.7; transition: opacity 0.3s; }
body.redesign-theme .mini-bar:nth-child(3n+2) { background: var(--border-strong); }
body.redesign-theme .bento-card:hover .mini-bar { opacity: 1; }
@media (max-width: 900px) {
  body.redesign-theme .bento { grid-template-columns: 1fr; }
  body.redesign-theme .bento-lg { grid-row: span 1; }
  body.redesign-theme .bento-wide { grid-column: span 1; }
}

/* ==========================================================================
   Sub-page hero (marketplace.html / pricing.html)
   ========================================================================== */

body.redesign-theme .page-header { padding-top: calc(var(--nav-h) + 84px); padding-bottom: 60px; }
body.redesign-theme .page-header h1 { font-size: clamp(38px, 5.6vw, 60px); letter-spacing: -0.03em; }
body.redesign-theme .page-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 10%, black 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 50% at 50% 10%, black 10%, transparent 75%);
}
body.redesign-theme .page-header { position: relative; }

/* ==========================================================================
   Marketplace
   ========================================================================== */

body.redesign-theme .search-bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); }
body.redesign-theme .pill { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); color: var(--text-dim); }
body.redesign-theme .pill:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text); }
body.redesign-theme .pill.active { background: var(--green); border-color: var(--green); color: #06110c; }
body.redesign-theme .pill.active .pill-count { background: rgba(6,17,12,0.25); color: #06110c; }
body.redesign-theme .sort-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); color: var(--text-dim); }

body.redesign-theme .assistant-card { border-radius: var(--r-lg); }
body.redesign-theme .assistant-card .a-icon { background: rgba(16,185,129,0.1); color: var(--green); border-radius: var(--r-md); }
body.redesign-theme .official-badge { color: var(--green); }

/* ==========================================================================
   Pricing
   ========================================================================== */

body.redesign-theme .billing-toggle { background: var(--surface); border: 1px solid var(--border); }
body.redesign-theme .billing-toggle button.active { background: var(--green); color: #06110c; }
body.redesign-theme .billing-toggle .save-badge { color: var(--green); }

body.redesign-theme .price-card { border-radius: var(--r-lg); }
body.redesign-theme .price-card.highlight { border-color: var(--green-dim); box-shadow: 0 0 0 1px var(--green-dim); }
body.redesign-theme .price-card .badge.most-popular { background: var(--green); color: #06110c; }
body.redesign-theme .price-card .plan-features .check { background: rgba(16,185,129,0.16); color: var(--green-light); }

body.redesign-theme .compare-table { background: var(--bg-elevated); }
body.redesign-theme .compare-table th, body.redesign-theme .compare-table td { border-color: var(--border); }
body.redesign-theme .compare-table th.col-highlight { color: var(--green); }
body.redesign-theme .compare-table .cell-check { background: rgba(16,185,129,0.14); color: var(--green-light); }

body.redesign-theme .cta-band { border-radius: var(--r-lg); }

/* ==========================================================================
   Footer
   ========================================================================== */

body.redesign-theme .footer { background: #030304; border-top: 1px solid var(--border); }
body.redesign-theme .footer-col a:hover { color: var(--green); }
body.redesign-theme .legal-links a:hover { color: var(--text); }

/* ==========================================================================
   Reveal-on-scroll timing (slightly snappier, matches the concept)
   ========================================================================== */

body.redesign-theme .reveal { transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }

/* ==========================================================================
   Auth pages (login / signup / verify-email / auth-callback)
   ========================================================================== */

body.redesign-theme .auth-card { border-radius: var(--r-xl); }
body.redesign-theme .auth-divider { color: var(--text-dimmer); }
body.redesign-theme .redirect-mark { border-radius: var(--r-lg); }

/* ==========================================================================
   Legal / static content pages (about, privacy, terms, docs, status, etc.)
   ========================================================================== */

body.redesign-theme .legal-doc h2 { font-family: var(--font-heading); }
body.redesign-theme .legal-doc a { color: var(--green); }
body.redesign-theme .split-panel.for-individuals { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.22); }
body.redesign-theme .split-panel.for-business { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.3); }
body.redesign-theme .for-business .panel-icon { background: rgba(16,185,129,0.18); color: var(--green-light); }
body.redesign-theme .for-business .check { background: rgba(16,185,129,0.22); color: var(--green-light); }
body.redesign-theme .download-card:hover { border-color: var(--green-dim); }

/* ==========================================================================
   Workforce dashboard (workforce.html)
   ========================================================================== */

body.redesign-theme .wf-sidebar,
body.redesign-theme .fs-sidebar { background: var(--bg-elevated); border-radius: 0 0 var(--r-lg) 0; }
body.redesign-theme .wf-sidebar-item.active,
body.redesign-theme .fs-history-item.active { border-color: var(--border-strong); }
body.redesign-theme .wf-icon.purple { background: rgba(16,185,129,0.14); color: var(--green-light); }
body.redesign-theme .status-pill.paused { background: rgba(16,185,129,0.1); color: var(--green-light); }
body.redesign-theme .status-pill.paused .dot { background: var(--green-light); }
body.redesign-theme .wf-task-modal-pill,
body.redesign-theme .wf-task-modal-step-num { background: rgba(16,185,129,0.14); color: var(--green-light); }
body.redesign-theme .stat-card,
body.redesign-theme .dash-stats-card { border-radius: var(--r-lg); }

/* ==========================================================================
   Create — assistant builder (create.html)
   ========================================================================== */

body.redesign-theme .step-item.active { border-radius: var(--r-md); }
body.redesign-theme .option-card.selected { border-color: var(--green); background: rgba(16,185,129,0.08); }
body.redesign-theme .knowledge-drop.dragover { border-color: var(--green); background: rgba(16,185,129,0.06); }
body.redesign-theme .builder-panel { border-radius: var(--r-xl); }

/* ==========================================================================
   Flowspace (flowspace.html) + floating assistant chat widget
   ========================================================================== */

body.redesign-theme .fs-composer { border-radius: 26px; }
body.redesign-theme .fs-bubble { border-radius: 18px; }
body.redesign-theme .fs-msg.user .fs-bubble { background: #228b22; }
body.redesign-theme .awc-window { background: rgba(9, 9, 10, 0.98); border-radius: var(--r-lg); }
body.redesign-theme .awc-fab { box-shadow: 0 10px 30px rgba(0,0,0,0.5); }

/* ==========================================================================
   Account settings + Admin panel
   ========================================================================== */

body.redesign-theme .adm-badge.ok { background: rgba(16,185,129,.14); color: var(--green-light); }
body.redesign-theme .adm-btn.good { color: var(--green-light); border-color: rgba(16,185,129,.3); }
body.redesign-theme .adm-btn.good:hover { background: rgba(16,185,129,.1); }
body.redesign-theme .switch.on { background: var(--green); }
body.redesign-theme .wf-signin-prompt .btn { border-radius: var(--r-xl); }

@media (max-width: 640px) {
  body.redesign-theme .section { padding: 90px 0; }
}