/* ============================================================
   Social Studio — premium light SaaS design system
   ============================================================ */
:root {
  /* Cool, chosen neutrals (moved off the warm-cream "AI look"): a faint slate
     bias reads as designed and lets the terracotta brand accent feel deliberate
     rather than the generic cream+terracotta template. */
  --bg: #f4f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --surface-3: #e5e9ee;          /* subtle hover / inset surfaces */
  --overlay: #ffffff;            /* popovers, menus, modals */
  --input-bg: #ffffff;
  --border: #e2e6eb;
  --border-2: #edf0f3;           /* softer hairline */
  --border-hover: #cfd5dd;       /* neutral hover border on cards */
  --glass: rgba(255,255,255,.72);/* frosted topbar / sticky nav */
  --text: #15181d;
  --text-2: #454b55;             /* nav links, secondary body */
  --text-3: #6b7280;             /* section labels, muted icons (was #98a0ab:
                                    2.4:1 on white — failed WCAG AA, audit) */
  --muted: #616873;
  --primary: #b8560f;
  --primary-600: #94420a;
  --primary-50: #fbeee0;
  /* 2026-08-10 audit: ~40 call-sites used tokens that were never defined
     (--primary-100/200/300, --brand, --good, --success-200/700), so they fell
     to per-site fallbacks or broke. Define the full scale + aliases here (and
     in dark below) so every existing usage resolves. */
  --primary-100: #f6ddc4;
  --primary-200: #eec59e;
  --primary-300: #e2a469;
  --brand: var(--primary);
  --accent: #c96a1f;
  --cyan: #dd8a2e;
  --success: #16a34a;
  --success-50: #ecfdf3;
  --success-100: #d4efde;
  --success-200: #b5e2c8;
  --success-700: #15803d;
  --good: var(--success);
  --warning: #d97706;
  --warning-50: #fffbeb;
  --warning-100: #fdecc8;
  --danger: #dc2626;
  --danger-50: #fef2f2;
  --danger-100: #f6d3d3;
  --info: #0ea5e9;
  --radius: 14px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 18px;
  /* type */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', 'Inter', Georgia, 'Times New Roman', serif;
  /* motion */
  --ease-out: cubic-bezier(.2,.6,.3,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --t-fast: .12s; --t: .16s; --t-slow: .24s;
  /* reusable gradients (replace 12+ hardcoded copies) */
  --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
  --gradient-brand: linear-gradient(135deg, #b8560f, #c96a1f 55%, #dd8a2e);
  --gradient-tint: linear-gradient(135deg, rgba(180,83,14,.13), rgba(180,83,14,.12) 55%, rgba(217,138,43,.12));
  /* premium layered shadows — softer + multi-stop for real depth */
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow: 0 2px 4px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.07);
  --shadow-lg: 0 4px 8px rgba(16,24,40,.04), 0 18px 48px rgba(16,24,40,.12);
  --shadow-pop: 0 8px 16px rgba(16,24,40,.06), 0 28px 64px rgba(16,24,40,.16);
  --shadow-primary: 0 6px 16px rgba(180,83,14,.28);
  /* focus rings (a11y) */
  --ring: 0 0 0 3px var(--primary-50);
  --ring-strong: 0 0 0 3px rgba(180,83,14,.35);
  --sidebar-w: 256px;
  color-scheme: light;
}

/* ============================================================
   Dark theme — html[data-theme="dark"] (pre-paint script in
   base.html sets it from localStorage, falls back to system pref).
   Only tokens flip here; every component inherits automatically.
   Accent text/icons lighten for AA on dark; button *fills* stay
   vivid so white label text keeps contrast.
   ============================================================ */
html[data-theme="dark"] {
  --bg: #0f1215;
  --surface: #171b20;
  --surface-2: #1e232a;
  --surface-3: #262c34;
  --overlay: #1c2128;
  --input-bg: #1c2128;
  --border: #2c333c;
  --border-2: #222830;
  --border-hover: #3a434e;
  --glass: rgba(15,18,25,.72);
  --text: #eef1f4;
  --text-2: #b3bcc7;
  --text-3: #838d99;
  --muted: #909aa6;
  --primary: #e6944a;
  --primary-600: #f0a862;
  --primary-50: rgba(230,148,74,.16);
  --primary-100: rgba(230,148,74,.24);
  --primary-200: rgba(230,148,74,.34);
  --primary-300: rgba(230,148,74,.48);
  --brand: var(--primary);
  --accent: #e6a860;
  --success: #34d27b; --success-50: rgba(52,210,123,.13); --success-100: rgba(52,210,123,.22);
  --success-200: rgba(52,210,123,.32);
  --success-700: #62dd97;
  --good: var(--success);
  --warning: #f0a93b; --warning-50: rgba(240,169,59,.13); --warning-100: rgba(240,169,59,.22);
  --danger: #f26d6d;  --danger-50: rgba(242,109,109,.13);  --danger-100: rgba(242,109,109,.24);
  --info: #48b9ee;
  --gradient-primary: linear-gradient(135deg, #c9691f, #e6944a);
  --gradient-tint: linear-gradient(135deg, rgba(230,148,74,.18), rgba(180,83,14,.16) 55%, rgba(217,138,43,.12));
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
  --shadow: 0 2px 4px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.46);
  --shadow-lg: 0 4px 8px rgba(0,0,0,.36), 0 18px 48px rgba(0,0,0,.56);
  --shadow-pop: 0 8px 16px rgba(0,0,0,.42), 0 28px 64px rgba(0,0,0,.62);
  --shadow-primary: 0 6px 18px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(230,148,74,.30);
  --ring-strong: 0 0 0 3px rgba(230,148,74,.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
  line-height: 1.55;
}
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }
h1,h2,h3,h4,h5 { font-weight: 700; letter-spacing: -0.02em; color: var(--text); }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 11px; padding: 22px 20px 14px;
  font-weight: 800; font-size: 1.18rem; letter-spacing: -0.03em;
}
.sidebar .brand .logo {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gradient-brand); color: #fff; font-size: 1.05rem;
  box-shadow: var(--shadow-primary);
}
.nav-links { padding: 6px 14px 12px; flex: 1; overflow-y: auto; }
.nav-links a {
  position: relative;
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px;
  color: var(--text-2); font-weight: 500; font-size: .92rem; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-links a i { font-size: 1.05rem; width: 20px; text-align: center; color: var(--text-3); transition: color .15s; }
.nav-links a:hover { background: var(--surface-3); color: var(--text); }
.nav-links a:hover i { color: var(--text-2); }
.nav-links a.active { background: var(--primary-50); color: var(--primary-600); font-weight: 600; }
.nav-links a.active i { color: var(--primary); }
/* accent bar on the active item */
.nav-links a.active::before {
  content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--gradient-primary);
}
/* section labels (moved out of base.html inline style) */
.nav-sec {
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); margin: 18px 0 6px 12px;
}

/* viewing-as segmented control (owner only) */
.view-as { padding: 2px 16px 18px; }
.va-lbl { font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: var(--text-3); margin: 0 0 9px 2px; }
.va-seg { display: flex; gap: 5px; background: var(--surface-3); border: 1px solid var(--border-2); border-radius: 12px; padding: 5px; }
.va {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 8px; border-radius: 9px; font-weight: 600; font-size: .85rem; color: var(--muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.va i { font-size: 1rem; }
.va:hover { color: var(--text-2); }
.va.on { background: var(--surface); color: var(--primary-600); box-shadow: var(--shadow-sm); }
.va.on i { color: var(--primary); }

.sidebar .side-foot { padding: 12px; border-top: 1px solid var(--border); }
.user-chip { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.side-foot .uwrap {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  padding: 7px 8px; border-radius: 10px; transition: background .15s;
}
.side-foot .uwrap:hover { background: var(--surface-3); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; color: #fff;
  background: var(--gradient-brand); display: grid; place-items: center; font-weight: 700;
  box-shadow: var(--shadow-primary);
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--glass);
  backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
  position: sticky; top: 0; z-index: 20;
}
.topbar .page-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.topbar-action { display: flex; align-items: center; gap: 10px; }
.content { padding: 30px 32px 48px; max-width: 1280px; width: 100%; margin: 0 auto; }
/* Reclaim wasted gutters on large monitors — content breathes wider, text stays readable */
@media (min-width: 1700px) { .content { max-width: 1480px; } }
@media (min-width: 2200px) { .content { max-width: 1640px; } }
/* full-bleed pages (dense grids/tables) can opt out of the reading cap */
.content.content-wide { max-width: none; }

/* ---------- Public (marketing) nav ---------- */
.pubnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 32px; max-width: 1120px; margin: 0 auto;
}
.pubnav .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.2rem; }
.pubnav .brand .logo { width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background: var(--gradient-primary); color:#fff; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px; }
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
/* clickable / interactive cards lift on hover */
.card-hover { transition: transform .16s, box-shadow .16s, border-color .16s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-hover); }

/* ---------- Reusable icon tile (premium duotone) ---------- */
.icon-tile {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  font-size: 1.2rem; background: var(--gradient-tint); border: 1px solid rgba(180,83,14,.2);
  box-shadow: 0 6px 14px rgba(180,83,14,.12), inset 0 1px 0 rgba(255,255,255,.65);
}
.icon-tile i {
  background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.icon-tile-sm { width: 34px; height: 34px; border-radius: 10px; font-size: 1rem; }
.icon-tile-lg { width: 52px; height: 52px; border-radius: 14px; font-size: 1.5rem; }
/* solid variant (filled gradient + white glyph) */
.icon-tile.solid { background: var(--gradient-primary); border-color: transparent; box-shadow: var(--shadow-primary); }
.icon-tile.solid i { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }

/* ---------- Stat cards ---------- */
.stat { padding: 20px 22px; }
.stat .num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
.stat .lbl { color: var(--muted); font-size: .85rem; }
.stat .ico { width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background: var(--gradient-tint); border:1px solid rgba(180,83,14,.18); color: var(--primary);
  font-size:1.1rem; margin-bottom:12px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  text-decoration: none; line-height: 1.2; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-strong); }
.btn-primary { background: var(--gradient-primary); color:#fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { color:#fff; box-shadow: var(--shadow-primary); }
.btn-light { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.btn-light:hover { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); transform: none; }
.btn-danger { background: var(--surface); border-color: var(--danger-100); color: var(--danger); }
.btn-danger:hover { background: var(--danger-50); }
.btn-success { background: var(--success); color:#fff; box-shadow: var(--shadow-sm); }
.btn-success:hover { color:#fff; box-shadow: var(--shadow); }
.btn-linkedin { background:#0a66c2; color:#fff; box-shadow: var(--shadow-sm); }
.btn-linkedin:hover { color:#fff; box-shadow: var(--shadow); }
.btn-lg { padding: 12px 22px; font-size: 1rem; border-radius: 12px; }
.btn-sm { padding: 6px 12px; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- Forms ---------- */
label, .form-label { font-weight: 600; font-size: .88rem; margin-bottom: 6px; display: block; }
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
textarea, select {
  width: 100%; padding: 10px 13px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--input-bg); font: inherit; color: var(--text); transition: border .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--primary); box-shadow: var(--ring);
}
a:focus-visible, .nav-links a:focus-visible, .va:focus-visible, summary:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: 8px;
}
/* Native file inputs: give the "Choose File" button the same look as a light button */
input[type=file] { padding: 7px 10px; cursor: pointer; color: var(--muted); font-size: .9rem; }
input[type=file]::file-selector-button {
  font: inherit; font-weight: 600; cursor: pointer; margin-right: 12px;
  padding: 7px 14px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
  transition: border .15s, background .15s;
}
input[type=file]::file-selector-button:hover { border-color: var(--primary); color: var(--primary-600); background: var(--primary-50); }
/* Native date/time pickers: keep the calendar indicator on-brand */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; }
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=datetime-local]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form-text, .help { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.field { margin-bottom: 18px; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items:center; gap:5px; padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; text-transform: capitalize;
}
.pill-draft { background:var(--surface-3); color:var(--text-2); }
.pill-scheduled { background: var(--primary-50); color: var(--primary-600); }
.pill-approved { background: var(--warning-50); color: var(--warning); }
.pill-pending_approval { background: var(--warning-50); color: var(--warning); }
.pill-posted { background: var(--success-50); color: var(--success); }
.pill-failed { background: var(--danger-50); color: var(--danger); }
.pill-archived { background: var(--surface-3); color: var(--muted); }
.pill-ai { background: linear-gradient(135deg,var(--primary-50),#f3e8ff); color: var(--primary-600); }

/* ---------- Alerts (messages) ---------- */
.flash { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; font-size:.92rem;
  border:1px solid var(--border); background:var(--surface); box-shadow: var(--shadow-sm); }
.flash-success { border-left: 4px solid var(--success); }
.flash-error, .flash-danger { border-left: 4px solid var(--danger); }
.flash-warning { border-left: 4px solid var(--warning); }
.flash-info { border-left: 4px solid var(--info); }

/* ---------- Empty states ---------- */
.empty { text-align:center; padding: 48px 24px; color: var(--muted); }
.empty .big { font-size: 2.4rem; margin-bottom: 8px; }

/* ---------- Lists / tables ---------- */
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { text-align:left; padding: 10px 12px; border-bottom:1px solid var(--border); font-size:.9rem; }
.table th { color: var(--muted); font-weight:600; }
/* Horizontally scrollable table shell. On a phone a 5-column comparison table
   squeezes to one word per line and the last columns sit outside the scroll box
   with nothing telling you they're there. Give the table a readable floor, let
   the shell scroll, and fade the right edge so the swipe is discoverable. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) {
  .table-wrap .table { min-width: 560px; }
  .table-wrap .table th, .table-wrap .table td { padding: 10px; font-size: .86rem; }
  .table-wrap {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 90%, transparent 100%);
  }
  .table-wrap::-webkit-scrollbar { height: 4px; }
  .table-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
}
.muted { color: var(--muted); }

/* ---------- Onboarding steps ---------- */
.steps { display:grid; gap:12px; }
.step { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid var(--border);
  border-radius:12px; background:var(--surface); }
.step.done { background: var(--success-50); border-color: var(--success-100); }
.step .n { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:var(--primary-50); color:var(--primary-600); font-weight:700; font-size:.85rem; }
.step.done .n { background:var(--success); color:#fff; }

/* ---------- Landing ---------- */
.hero { text-align:center; padding: 72px 20px 40px; max-width: 800px; margin: 0 auto; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height:1.08; margin-bottom: 18px; }
/* Flat brand color, not a gradient-clipped word (the most dated AI-landing tell). */
.hero .grad { color: var(--primary); }
.hero p { font-size: 1.15rem; color: var(--muted); margin-bottom: 28px; }
.eyebrow { display:inline-block; padding:5px 12px; border-radius:999px; background:var(--primary-50);
  color:var(--primary-600); font-weight:600; font-size:.8rem; margin-bottom:18px; }
.feature { padding: 24px; height:100%; transition: transform .16s, box-shadow .16s, border-color .16s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color:var(--border-hover); }
.feature .fico { width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;
  background: var(--gradient-tint); border:1px solid rgba(180,83,14,.18); color:var(--primary); margin-bottom:14px;
  box-shadow: 0 6px 14px rgba(180,83,14,.12), inset 0 1px 0 rgba(255,255,255,.6); }
.feature:hover .fico i { transform: scale(1.04); }
.section { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* ---------- Public nav (sticky) ---------- */
.pubnav { position: sticky; top: 0; z-index: 40; background: var(--glass);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); max-width: none; }
.pubnav > .brand, .pubnav > .pubnav-links, .pubnav > .flex { }
.pubnav { padding-left: max(32px, calc((100% - 1120px)/2)); padding-right: max(32px, calc((100% - 1120px)/2)); }
.pubnav-links { display: flex; gap: 26px; }
.pubnav-links a { color: var(--text-2); font-weight: 600; font-size: .92rem; }
.pubnav-links a:hover { color: var(--primary); }
@media (max-width: 820px) { .pubnav-links { display: none; } }

/* ---------- Auth split-screen (login / signup) ---------- */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 69px); }
.auth-aside { position: relative; overflow: hidden; color: #fff; padding: 56px 52px;
  background: linear-gradient(150deg, #b8560f 0%, #c96a1f 55%, #dd8a2e 140%); display: flex; flex-direction: column; }
.auth-aside::before { content:""; position:absolute; width:460px; height:460px; right:-140px; top:-120px;
  background: radial-gradient(circle, rgba(255,255,255,.25), transparent 65%); border-radius:50%; }
.auth-aside::after { content:""; position:absolute; width:360px; height:360px; left:-120px; bottom:-130px;
  background: radial-gradient(circle, rgba(217,138,43,.4), transparent 65%); border-radius:50%; }
.auth-aside .brand { display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.25rem; color:#fff; position:relative; z-index:1; }
.auth-aside .brand .logo { width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background: rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); }
.auth-aside h2 { color:#fff; font-size: 2rem; line-height:1.12; margin: 26px 0 14px; position:relative; z-index:1; max-width: 460px; }

/* auth panel visual (frosted product preview + channel chips) */
.auth-art { position:relative; z-index:1; margin: 30px 0 auto; }
.aa-card { background: rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:16px;
  padding:18px; backdrop-filter: blur(8px); box-shadow: 0 18px 44px rgba(0,0,0,.20); max-width:360px }
.aa-pill { display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700;
  background: rgba(255,255,255,.2); padding:5px 11px; border-radius:999px; margin-bottom:13px }
.aa-line { height:9px; border-radius:6px; background: rgba(255,255,255,.34); margin:9px 0 }
.aa-line.lg { height:13px; width:86%; background: rgba(255,255,255,.6) }
.aa-line.short { width:54% }
.aa-foot { display:flex; gap:16px; margin-top:14px; font-size:.74rem; color: rgba(255,255,255,.88) }
.aa-chips { display:flex; gap:11px; margin-top:18px }
.aa-chip { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; font-size:1.25rem; color:#fff;
  background: rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); backdrop-filter: blur(6px);
  animation: drift 7s ease-in-out infinite }
.aa-chips .aa-chip:nth-child(2){animation-delay:.6s} .aa-chips .aa-chip:nth-child(3){animation-delay:1.2s}
.aa-chips .aa-chip:nth-child(4){animation-delay:1.8s} .aa-chips .aa-chip:nth-child(5){animation-delay:2.4s}
.auth-aside .pts { position:relative; z-index:1; display:grid; gap:14px; margin-bottom: 8px; }
.auth-aside .pts div { display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color: rgba(255,255,255,.92); }
.auth-aside .pts i { margin-top:2px; }
.auth-main { display:flex; align-items:center; justify-content:center; padding: 40px 24px; background: var(--bg); }
.auth-card { width:100%; max-width: 400px; }
.auth-card h3 { font-size: 1.5rem; margin: 0 0 4px; }
.auth-card.text-c .field { text-align: left; }
.auth-ico { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin:0 auto 16px;
  font-size:1.6rem; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.auth-ico-ok { color:#12855b; background: color-mix(in srgb, #12855b 12%, transparent); border-color: color-mix(in srgb, #12855b 24%, transparent); }
.auth-ico-warn { color:#b45309; background: color-mix(in srgb, #b45309 12%, transparent); border-color: color-mix(in srgb, #b45309 24%, transparent); }
@media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth-aside { display:none; } }

/* ---------- Spinner ---------- */
.spin { width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;
  border-radius:50%; display:inline-block; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Utilities ---------- */
.row-gap > * { margin-bottom: 16px; }
.flex { display:flex; } .between { justify-content:space-between; } .center { align-items:center; }
.gap { gap: 10px; } .gap-lg { gap: 18px; } .wrap { flex-wrap: wrap; }
.grid { display:grid; gap:16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.mt { margin-top:16px; } .mb { margin-bottom:16px; } .mb-lg { margin-bottom:28px; }
.text-c { text-align:center; margin-top:30px; }
.no-margin, .m-0 { margin: 0 !important; }
.content-narrow { max-width: 880px; margin-left: auto; margin-right: auto; }

/* ---------- Mobile ---------- */
.menu-btn { display:none; background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text); }
@media (max-width: 860px) {
  .sidebar { position: fixed; left: -100%; z-index: 50; transition: left .25s; box-shadow: var(--shadow-lg); }
  .sidebar.open { left: 0; }
  .menu-btn { display:block; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .content { padding: 18px; }
}
@media (max-width: 520px) {
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Marketing pages (landing + features/pricing/use-cases/about…)
   ============================================================ */
.lp{overflow:hidden}
.grad{color:var(--primary)}
.lp-hero{position:relative;max-width:1180px;margin:0 auto;padding:56px 24px 28px}
.lp-hero::before{content:"";position:absolute;inset:-40% 0 auto 0;height:560px;z-index:-1;
  background:radial-gradient(45% 55% at 25% 5%,rgba(180,83,14,.15),transparent 70%),
             radial-gradient(40% 50% at 92% 8%,rgba(217,138,43,.12),transparent 70%)}
/* asymmetric two-column hero */
.lp-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.lp-hero-copy{text-align:left}
.lp-hero h1{font-size:clamp(2.1rem,4.4vw,3.35rem);line-height:1.06;margin:16px 0 16px}
.lp-hero .sub{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);margin:0 0 22px;max-width:560px}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.lp-trust{margin-top:14px;font-size:.88rem;color:var(--muted)}.lp-trust b{color:var(--text)}
.lp-try{margin:0}
.lp-try-row{display:flex;gap:8px;flex-wrap:wrap}
.lp-try-input{flex:1;min-width:220px;padding:13px 15px;border:1px solid var(--border);border-radius:12px;
  font:inherit;background:var(--surface);color:var(--text)}
.lp-try-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring)}
.lp-hero-visual{position:relative}
@media(max-width:900px){
  .lp-hero{text-align:center;padding-top:40px}
  .lp-hero-grid{grid-template-columns:1fr;gap:32px}
  .lp-hero-copy{text-align:center}
  .lp-hero .sub{margin-left:auto;margin-right:auto}
  .lp-cta{justify-content:center}
  .lp-hero-visual{order:2}
}

/* page hero for sub-pages */
.lp-phero{position:relative;text-align:center;padding:56px 24px 8px;max-width:780px;margin:0 auto}
.lp-phero .kicker{color:var(--primary-600);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.lp-phero h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:10px 0 14px}
.lp-phero p{color:var(--muted);font-size:1.12rem}

/* hero product mock */
.lp-mock{max-width:880px;margin:44px auto 0;border-radius:18px;border:1px solid var(--border);
  background:var(--surface);box-shadow:0 30px 80px rgba(16,24,40,.18);overflow:hidden}
.lp-hero-visual .lp-mock{margin:0;max-width:none;box-shadow:0 24px 70px rgba(16,24,40,.16)}
@media(max-width:900px){.lp-hero-visual .lp-mock{max-width:560px;margin:0 auto}}
/* brandmark (SVG logo glyph inside the gradient tile) */
.logo .brandmark{width:66%;height:66%;display:block}
.lp-mock .bar{display:flex;gap:7px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2)}
.lp-mock .bar span{width:11px;height:11px;border-radius:50%;background:var(--border)}
.lp-mock .bar .url{margin-left:12px;font-size:.78rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 12px}
.lp-mockbody{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;padding:20px;text-align:left}
.lp-postcard{border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface)}
.lp-postcard p{margin:6px 0;font-size:.92rem}
.lp-postcard .by{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:.82rem;color:var(--muted)}
.lp-graphic{border-radius:14px;padding:22px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,#1a1206,#5c2e0a);min-height:200px}
.lp-graphic .eb{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:#e8c9a0;font-weight:700}
.lp-graphic h4{color:#fff;font-size:1.35rem;line-height:1.1;margin:10px 0}
.lp-graphic h4 span{background:linear-gradient(120deg,#e6a860,#f0c088);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-graphic .gh{font-size:.78rem;color:#e8c9a0;font-weight:700}

/* sections */
.lp-sec{max-width:1120px;margin:0 auto;padding:64px 24px}
.lp-band{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.lp-head{text-align:center;max-width:680px;margin:0 auto 40px}
.lp-head .kicker{color:var(--primary-600);font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}
.lp-head h2{font-size:clamp(1.7rem,3.6vw,2.4rem);margin:8px 0 12px}
.lp-head p{color:var(--muted);font-size:1.05rem}

.lp-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-feat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;transition:.18s}
.lp-feat:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.lp-feat .ic{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:1.6rem;color:#fff;
  background:var(--gradient-primary);margin-bottom:15px;box-shadow:0 8px 20px rgba(180,83,14,.32)}
.lp-feat h4{font-size:1.1rem;margin:0 0 6px}.lp-feat p{color:var(--muted);font-size:.93rem;margin:0}

.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-step{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px;position:relative}
.lp-step .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:var(--primary-50);color:var(--primary-600);margin-bottom:14px}
.lp-step h4{margin:0 0 6px;font-size:1.12rem}.lp-step p{color:var(--muted);font-size:.93rem;margin:0}

.lp-spot{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 0;border-top:1px solid var(--border)}
.lp-spot:nth-child(even) .lp-spot-media{order:-1}
.lp-spot .tag{color:var(--primary-600);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.lp-spot h3{font-size:1.6rem;margin:8px 0 12px}.lp-spot p{color:var(--muted);font-size:1rem}
.lp-spot ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:9px}
.lp-spot li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem}.lp-spot li i{color:var(--success);margin-top:3px}
.lp-spot-media{border-radius:16px;min-height:240px;border:1px solid var(--border);
  background:var(--gradient-tint);display:grid;place-items:center;color:var(--primary);font-size:3.4rem}

/* use-case cards */
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.uc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:26px}
.uc-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem;color:#fff;
  background:var(--gradient-primary);margin-bottom:14px}
.uc-card h3{font-size:1.2rem;margin:0 0 6px}.uc-card p{color:var(--muted);margin:0 0 12px;font-size:.95rem}
.uc-card ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.uc-card li{display:flex;gap:9px;font-size:.92rem}.uc-card li i{color:var(--success);margin-top:2px}

/* pricing */
.lp-prices{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:20px;justify-content:center}
.price{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px}
.price.pop{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-50);position:relative}
.price.pop .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:999px}
.price h4{font-size:1.15rem;margin:0}.price .amt{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;margin:10px 0 2px}
.price .amt small{font-size:.95rem;font-weight:500;color:var(--muted)}
.price ul{list-style:none;padding:0;margin:18px 0;display:grid;gap:10px}
.price li{display:flex;gap:10px;font-size:.93rem}.price li i{color:var(--success)}

/* faq */
.lp-faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.lp-faq details{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px 18px}
.lp-faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";font-size:1.3rem;color:var(--muted)}
.lp-faq details[open] summary::after{content:"\2013"}
.lp-faq p{color:var(--muted);margin:0 0 16px;font-size:.95rem}

/* prose (about / legal) */
.lp-prose{max-width:760px;margin:0 auto;padding:8px 24px 24px}
.lp-prose h2{font-size:1.3rem;margin:28px 0 10px}.lp-prose h3{font-size:1.05rem;margin:20px 0 8px}
.lp-prose p,.lp-prose li{color:var(--text-2);font-size:.98rem;line-height:1.7}
.lp-prose ul{margin:8px 0 8px 18px}.lp-prose .muted{color:var(--muted)}

/* final cta */
.lp-final{max-width:1000px;margin:40px auto;border-radius:22px;padding:54px 28px;text-align:center;color:#fff;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e 150%);position:relative;overflow:hidden}
.lp-final h2{color:#fff;font-size:clamp(1.8rem,4vw,2.5rem);margin:0 0 10px}
.lp-final p{color:rgba(255,255,255,.9);max-width:540px;margin:0 auto 24px;font-size:1.08rem}
.btn-white{background:#fff;color:var(--primary-600)}.btn-white:hover{color:var(--primary-600);filter:brightness(.97)}

/* footer */
.lp-foot{border-top:1px solid var(--border);background:var(--surface)}
.lp-foot-in{max-width:1120px;margin:0 auto;padding:48px 24px 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.lp-foot .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem}
.lp-foot .brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;background:var(--gradient-primary)}
.lp-foot p{color:var(--muted);font-size:.9rem;margin:12px 0 0;max-width:280px}
.lp-foot h6{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px}
.lp-foot a{display:block;color:var(--text-2);font-size:.92rem;margin-bottom:9px}.lp-foot a:hover{color:var(--primary)}
.lp-copy{border-top:1px solid var(--border);text-align:center;padding:18px;color:var(--muted);font-size:.85rem}

@media(max-width:860px){
  .lp-mockbody{grid-template-columns:1fr}
  .lp-feats,.lp-steps{grid-template-columns:1fr}
  /* minmax(0,1fr), not 1fr: a grid item's default min-width:auto lets its
     min-content size push the track wider than the container, and the spotlight
     rows inside .lp-spot-media were doing exactly that — the whole column
     overflowed the viewport and the body's overflow clip cut the text off. */
  .lp-spot{grid-template-columns:minmax(0,1fr);gap:20px}
  .lp-spot>*{min-width:0}
  .lp-spot:nth-child(even) .lp-spot-media{order:0}
  .lp-prices,.uc-grid{grid-template-columns:1fr}
  .lp-foot-in{grid-template-columns:1fr 1fr}
}

/* ============================================================
   Mega-menu nav · hero animation · scroll reveals · suite/footer
   ============================================================ */
/* mega-menu */
.pubnav-links{display:flex;gap:6px;align-items:center}
.nav-item{position:relative}
.nav-item>a,.nav-item>span{display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:9px;
  color:var(--text-2);font-weight:600;font-size:.92rem;cursor:pointer;white-space:nowrap}
.nav-item>a:hover,.nav-item:hover>span{color:var(--primary);background:var(--primary-50)}
.nav-item .caret{font-size:.7rem;transition:transform .15s}
.nav-item:hover .caret{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 8px);left:0;background:var(--overlay);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:14px;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:.16s;z-index:60}
.nav-item:hover .mega,.nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
/* The triggers were non-focusable <span>s (keyboard users could never open the
   menus - 2026-08-10 audit P1); now real buttons, styled like the old spans. */
.nav-trigger{border:0;background:none;font:inherit;color:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;padding:9px 12px;border-radius:9px}
.nav-trigger:hover,.nav-item.open .nav-trigger{color:var(--primary);background:var(--primary-50)}
.nav-trigger:focus-visible{outline:none;box-shadow:var(--ring)}
.nav-item.open .caret{transform:rotate(180deg)}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}  /* hover bridge */
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:4px}
.mega-grid.one{grid-template-columns:minmax(220px,1fr)}
.mega-link{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:11px;color:var(--text)}
.mega-link:hover{background:var(--surface-2);color:var(--text)}
.mega-link i{font-size:1.05rem;width:36px;height:36px;flex:0 0 auto;display:grid;place-items:center;border-radius:10px;
  color:#b8560f;background:linear-gradient(160deg,#fdf4ea,#f7e2cb);border:1px solid #f0d7bb;box-shadow:0 4px 14px rgba(180,83,14,.10)}
:root[data-theme="dark"] .mega-link i{color:#f0a862;background:linear-gradient(160deg,#241a10,#3a2814);border-color:#4a3418;box-shadow:none}
.mega-link b{font-size:.9rem;display:block;line-height:1.2}
.mega-link small{color:var(--muted);font-size:.8rem;line-height:1.3}
@media(max-width:980px){.pubnav-links{display:none}}
/* Mobile drawer + hamburger: below 980px the link row is hidden, and before
   2026-08-10 there was NO alternative - phones had no marketing nav at all. */
.pubnav-burger{display:none;border:1px solid var(--border);background:var(--surface);
  border-radius:9px;width:40px;height:38px;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pubnav-burger span{display:block;width:18px;height:2px;background:var(--text);
  border-radius:2px;transition:transform var(--t) var(--ease-out),opacity var(--t)}
.pubnav-burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pubnav-burger.open span:nth-child(2){opacity:0}
.pubnav-burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.pubnav-burger:focus-visible{outline:none;box-shadow:var(--ring)}
.pubnav-drawer{display:none}
@media(max-width:980px){
  .pubnav-burger{display:flex}
  .pubnav-drawer{display:block;position:fixed;top:64px;left:0;right:0;bottom:0;
    z-index:60;background:var(--bg);overflow-y:auto;padding:14px 18px 28px;
    border-top:1px solid var(--border)}
  .pubnav-drawer[hidden]{display:none}
  .pubnav-drawer a{display:block;padding:12px 10px;border-radius:9px;
    color:var(--text);font-weight:600;font-size:1rem}
  .pubnav-drawer a:hover{background:var(--surface-2);color:var(--primary)}
  .pubnav-drawer .pd-group{font-size:.7rem;font-weight:700;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted);padding:16px 10px 6px}
  .pubnav-drawer .pd-cta{display:flex;gap:10px;padding:18px 10px 0}
  .pubnav-drawer .pd-cta .btn{flex:1;text-align:center}
}

/* hero: animated brand aura + circular frosted channel chips ("one core → every channel") */
.lp-orbit{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lp-aura{position:absolute;left:50%;top:-180px;width:720px;height:720px;transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(180,83,14,.18),rgba(180,83,14,.16),rgba(217,138,43,.14),rgba(180,83,14,.18));
  filter:blur(64px);border-radius:50%;animation:aura 22s linear infinite}
@keyframes aura{to{transform:translateX(-50%) rotate(360deg)}}
.orbit-ico{position:absolute;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:1.35rem;
  background:rgba(255,255,255,.72);backdrop-filter:blur(7px);border:1px solid rgba(180,83,14,.18);
  box-shadow:0 8px 22px rgba(180,83,14,.14);animation:drift 7s ease-in-out infinite}
.orbit-ico.lg{width:58px;height:58px;font-size:1.55rem}
.orbit-ico.sm{width:40px;height:40px;font-size:1.05rem}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(4px,-16px)}}
.ic-li{color:#0a66c2}.ic-x{color:#0f1419}.ic-ig{color:#e1306c}.ic-fb{color:#1877f2}.ic-yt{color:#ff0000}
.ic-tt{color:#0f1419}.ic-pin{color:#e60023}.ic-th{color:#0f1419}.ic-bs{color:#1185fe}.ic-rd{color:#ff4500}
@media(max-width:900px){.lp-orbit{display:none}}

/* Turelis signature: autonomous content pipeline (unique hero motif) */
.lp-pipe{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin:32px auto 0;max-width:780px}
.lp-pipe .step{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:var(--surface);
  border:1px solid var(--border);font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm);
  animation:pipe 5s ease-in-out infinite}
.lp-pipe .step i{color:var(--primary)}
.lp-pipe .pipe-arrow{color:#e2cfae;font-size:1rem;margin:0 2px}
.lp-pipe .pipe-you{margin-left:10px;font-size:.82rem;font-weight:700;color:var(--primary-600);
  background:var(--primary-50);border-radius:999px;padding:7px 14px}
@keyframes pipe{0%,100%{box-shadow:var(--shadow-sm);border-color:var(--border);transform:translateY(0)}
  8%,17%{box-shadow:0 8px 22px rgba(180,83,14,.22);border-color:var(--primary);transform:translateY(-3px)}}
@media(max-width:560px){.lp-pipe .pipe-arrow{transform:rotate(90deg)}.lp-pipe{flex-direction:column}.lp-pipe .pipe-you{margin:6px 0 0}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.orbit-ico{animation:none}}

/* product suite grid */
.suite-cat{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:28px 0 12px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px;color:inherit;transition:.16s}
.prod-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover);color:inherit}
.prod-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;color:#fff;
  background:var(--gradient-primary);margin-bottom:12px}
.prod-card h4{margin:0 0 5px;font-size:1.04rem;display:flex;align-items:center;gap:8px}
.prod-card p{margin:0;color:var(--muted);font-size:.9rem}

/* channels grid */
.chan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.chan{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:.9rem;font-weight:600}
.chan i{font-size:1.25rem}
.chan .tag{margin-left:auto;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px}
.chan .live{background:var(--success-50);color:var(--success)}
.chan .soon{background:var(--surface-3);color:var(--muted)}

/* rich footer columns */
.foot-rich{display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:26px}
@media(max-width:960px){.prod-grid{grid-template-columns:1fr 1fr}.foot-rich{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.prod-grid{grid-template-columns:1fr}.foot-rich{grid-template-columns:1fr 1fr}}

/* Google auth button + email divider */
.btn-google{background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600}
.btn-google:hover{background:var(--surface-2);color:var(--text)}
.btn-google i{color:#ea4335}
.auth-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin:4px 0 14px}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border)}

/* Premium duotone icon chips (override flat purple squares) */
.lp-feat .ic, .prod-card .ic, .uc-card .ic{
  background:linear-gradient(135deg,rgba(180,83,14,.13),rgba(180,83,14,.12) 55%,rgba(217,138,43,.12));
  border:1px solid rgba(180,83,14,.20);
  box-shadow:0 8px 18px rgba(180,83,14,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.lp-feat .ic i, .prod-card .ic i, .uc-card .ic i{
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lp-feat:hover .ic, .prod-card:hover .ic{transform:translateY(-1px)}

/* Contact page */
.ct-card{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;padding:16px 18px;margin-bottom:12px}
.ct-card .ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(135deg,rgba(180,83,14,.13),rgba(217,138,43,.12));border:1px solid rgba(180,83,14,.2)}
.ct-card .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f,#dd8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.ct-card b{display:block;font-size:.95rem}
.ct-card .muted{font-size:.88rem}
@media(max-width:760px){.ct-cols{grid-template-columns:1fr!important}}

/* ============================================================
   Theme toggle (topbar + marketing nav) + marketing display face
   ============================================================ */
.theme-toggle{display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);
  cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t),box-shadow var(--t)}
.theme-toggle:hover{background:var(--surface-3);color:var(--text)}
.theme-toggle:focus-visible{outline:none;box-shadow:var(--ring)}
.theme-toggle svg{width:17px;height:17px;display:block}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}

/* Refined editorial display face for marketing headlines only (UI stays Inter) */
.lp-hero h1, .lp-phero h1, .lp-head h2, .lp-final h2, .hero h1{
  font-family:var(--font-display);font-optical-sizing:auto;font-weight:600;letter-spacing:-.02em;
}

/* ============================================================
   Spotlight product frames — real UI in place of a lone icon.
   Each spotlight shows the actual feature (a draft, a slide, the
   autopilot queue, a video, the CLI) so the page reads as a real
   product, not a template.
   ============================================================ */
.lp-spot-media{min-height:0;border:0;background:none;display:block;padding:0;font-size:initial;color:inherit;
  min-width:0;max-width:100%}
/* max-width pins the mock to its column. Its rows carry a wide min-content
   (a nowrap title plus a fixed-width status pill), which was letting the frame
   grow past the spotlight column on a phone and bleed off both screen edges. */
.ss{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;
  box-shadow:0 22px 55px rgba(16,24,40,.13);position:relative;max-width:100%}
.ss-top{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--border);
  background:var(--surface-2)}
.ss-top .d{width:9px;height:9px;border-radius:50%;background:var(--border);flex:0 0 auto}
.ss-tt{margin-left:8px;font-size:.78rem;font-weight:600;color:var(--muted)}
.ss-tag{margin-left:auto;font-size:.66rem;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px}
.ss-tag.ok{background:var(--success-50);color:var(--success)}
.ss-tag.sch{background:var(--primary-50);color:var(--primary-600)}
.ss-body{padding:16px}
.ss-h{font-weight:700;font-size:.98rem;margin:0 0 6px;line-height:1.3}
.ss-p{color:var(--muted);font-size:.86rem;margin:0;line-height:1.5}
.ss-p b{color:var(--text)}
.ss-p sup{color:var(--primary-600);font-weight:700;font-size:.62rem;margin-left:1px}
.ss-srcs{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.ss-srcs span{font-size:.7rem;font-weight:600;color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:6px;padding:3px 8px}
/* voice-match meter + integrity checks */
.ss-meter{display:flex;align-items:center;gap:10px;margin:16px 0 12px;font-size:.78rem;color:var(--muted);font-weight:600}
.ss-bar{flex:1;height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.ss-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--primary),#dd8a2e)}
.ss-meter b{color:var(--text)}
.ss-chks{display:flex;flex-wrap:wrap;gap:6px}
.ss-chk{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;font-weight:600;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 10px}
.ss-chk i{color:var(--success)}
/* design studio: slide + themes + chat */
.ss-slide{border-radius:12px;padding:20px;color:#fff;min-height:132px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,#1a1206,#5c2e0a)}
.ss-slide .eb{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#e8c9a0;font-weight:700}
.ss-slide h4{color:#fff;font-size:1.2rem;line-height:1.12;margin:8px 0}
.ss-slide h4 span{background:linear-gradient(120deg,#e6a860,#f0c088);-webkit-background-clip:text;background-clip:text;color:transparent}
.ss-dots{display:flex;gap:5px}.ss-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35)}
.ss-dots i.on{background:#fff;width:16px;border-radius:3px}
.ss-themes{display:flex;align-items:center;gap:6px;margin:12px 0 10px}
.ss-themes span{width:22px;height:22px;border-radius:6px;border:1px solid var(--border)}
.ss-themes span:nth-child(1){background:linear-gradient(135deg,#1a1206,#5c2e0a)}
.ss-themes span:nth-child(2){background:linear-gradient(135deg,#b8560f,#dd8a2e)}
.ss-themes span:nth-child(3){background:linear-gradient(135deg,#f97316,#ec4899)}
.ss-themes span:nth-child(4){background:linear-gradient(135deg,#0ea5e9,#14b8a6)}
.ss-themes span:nth-child(5){background:#f4f4f5}
.ss-themes span:nth-child(6){background:linear-gradient(135deg,#111827,#374151)}
.ss-themes small{margin-left:auto;font-size:.72rem;color:var(--muted)}
.ss-chat{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text-2);
  background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px}
.ss-chat i{color:var(--primary)}
/* autopilot queue */
/* minmax(0,1fr): the rows carry a wide min-content (a nowrap title), and an
   `auto` implicit track lets that push the whole queue past its frame instead
   of letting the title ellipsize. Pinning the track is what makes the status
   pill on the right stay on screen at phone widths. */
.ss-queue{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.ss-row{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:11px;padding:10px 12px;background:var(--surface);min-width:0}
.ss-row>i{font-size:1.15rem;flex:0 0 auto}
.ss-rt{min-width:0;flex:1 1 auto}.ss-rt b{display:block;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-rt small{color:var(--muted);font-size:.74rem}
.ss-row .ss-tag{margin-left:auto}
.ss-btn{margin-left:auto;font-size:.72rem;font-weight:700;color:#fff;background:var(--gradient-primary);
  border-radius:8px;padding:6px 12px;flex:0 0 auto}
/* video */
.ss-video{position:relative;border-radius:12px;min-height:130px;
  background:linear-gradient(135deg,#2a1a08,#160f06 70%),radial-gradient(60% 80% at 30% 20%,rgba(180,83,14,.5),transparent);
  display:grid;place-items:center}
.ss-play{width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;
  color:#5c2e0a;font-size:1.3rem;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.ss-dur{position:absolute;right:10px;bottom:9px;font-size:.7rem;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:2px 7px}
.ss-scenes{display:flex;gap:5px;margin:10px 0}
.ss-scenes i{flex:1;height:26px;border-radius:5px;background:var(--surface-3);border:1px solid var(--border)}
.ss-scenes i.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-50)}
/* API terminal */
.ss-term .ss-top.dark{background:#0d1224;border-bottom-color:#1f2740}
.ss-term .ss-top.dark .d{background:#39415f}
.ss-term .ss-top.dark .ss-tt{color:#8b93b5}
.ss-code{background:#0b0f1e;color:#cdd6f4;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.8rem;line-height:1.75;padding:16px 16px;white-space:pre-wrap;word-break:break-word}
.ss-code .c-cmt{color:#6b7394;display:block}
.ss-code .c-l{display:block}.ss-code .c-p{color:#e6944a}.ss-code .c-a{color:#f9a03f}
.ss-code .c-o{color:#8ee6a9;display:block}
@media(max-width:860px){.ss-slide h4{font-size:1.05rem}}

/* ============================================================
   Product suite grid + vision/mission (platform positioning)
   ============================================================ */
.suite{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.suite-card{position:relative;display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;padding:22px;color:inherit;transition:.18s;overflow:hidden}
.suite-card::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--gradient-primary);opacity:0;transition:.18s}
.suite-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--border-hover);color:inherit}
.suite-card:hover::after{opacity:1}
.suite-card .ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;margin-bottom:14px;
  background:linear-gradient(135deg,rgba(180,83,14,.13),rgba(180,83,14,.12) 55%,rgba(217,138,43,.12));
  border:1px solid rgba(180,83,14,.20);box-shadow:0 8px 18px rgba(180,83,14,.14),inset 0 1px 0 rgba(255,255,255,.6)}
.suite-card .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.suite-tag{position:absolute;top:20px;right:20px;font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;background:var(--surface-2);border:1px solid var(--border);color:var(--muted)}
.suite-card h4{font-size:1.12rem;margin:0 0 7px}
.suite-card p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.5}
.suite-glue{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.glue-item{display:flex;align-items:center;gap:11px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:14px;padding:16px 18px;font-size:.95rem;color:var(--text-2)}
.glue-item b{color:var(--text)}
.glue-item i{font-size:1.3rem;flex:0 0 auto;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:860px){.suite{grid-template-columns:1fr}.suite-glue{grid-template-columns:1fr}}

/* vision & mission */
.vm{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:920px;margin:0 auto}
.vm-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px}
.vm-label{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--primary-600);margin-bottom:12px}
.vm-card p{font-size:1.12rem;line-height:1.5;color:var(--text);margin:0;font-family:var(--font-display);font-weight:500}
.vm-principles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:26px auto 0}
.vp{text-align:left}
.vp i{font-size:1.5rem;display:block;margin-bottom:10px;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);-webkit-background-clip:text;background-clip:text;color:transparent}
.vp b{display:block;font-size:.98rem;margin-bottom:4px}
.vp span{color:var(--muted);font-size:.88rem;line-height:1.45}
@media(max-width:860px){.vm{grid-template-columns:1fr}.vm-principles{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.vm-principles{grid-template-columns:1fr}}

/* ============================================================
   Editorial icon treatment — drop the pastel "AI chip" (tinted
   rounded square + gradient glyph) for a clean solid brand icon.
   This is the single biggest "AI-generated" tell on card grids.
   ============================================================ */
/* Unified icon tile site-wide: soft amber tint + amber glyph, consistent with
   the .pico duotone product icons. One treatment everywhere (no flat-orange
   chips, no bare glyphs) so the icon language reads as one system. */
.lp-feat .ic, .prod-card .ic, .uc-card .ic{
  width:54px;height:54px;padding:0;margin:0 0 15px;display:grid;place-items:center;border-radius:15px;
  font-size:1.5rem;line-height:1;color:#b8560f;
  background:linear-gradient(160deg,#fdf4ea,#f7e2cb) !important;border:1px solid #f0d7bb !important;
  box-shadow:0 4px 14px rgba(180,83,14,.10) !important;
}
.lp-feat .ic i, .prod-card .ic i, .uc-card .ic i{
  background:none !important;-webkit-text-fill-color:#b8560f;color:#b8560f;font-size:1.5rem;
}
.vp i, .glue-item i{ background:none !important; -webkit-text-fill-color:var(--primary); color:var(--primary); }
:root[data-theme="dark"] .lp-feat .ic, :root[data-theme="dark"] .prod-card .ic, :root[data-theme="dark"] .uc-card .ic{
  background:linear-gradient(160deg,#241a10,#3a2814) !important;border-color:#4a3418 !important;box-shadow:none !important}
:root[data-theme="dark"] .lp-feat .ic i, :root[data-theme="dark"] .prod-card .ic i, :root[data-theme="dark"] .uc-card .ic i{
  color:#f0a862;-webkit-text-fill-color:#f0a862}
.lp-feat:hover .ic, .prod-card:hover .ic{ transform:translateY(-1px); }
.suite-card .suite-tag{ top:22px; }

/* ── Homepage 2026 refresh: real-screenshot slots, honest proof, vs-stack,
      condensed engine, founder note ─────────────────────────────────────── */

/* Real screenshot: drops in over the illustrative mock when the PNG exists. */
.lp-shot{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--border);
  box-shadow:0 24px 70px rgba(16,24,40,.16)}
.lp-hero-visual .lp-shot{border-radius:18px}

/* Honest trust strip under the hero (facts, not fabricated social proof). */
/* Frosted rather than solid: it floats directly over the hero aurora, so the
   ambient light reads through it instead of being punched out by a flat panel. */
.lp-proofstrip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;
  max-width:960px;margin:30px auto 0;padding:16px 20px;
  background:var(--fx-glass);backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--border);border-radius:14px}
.lp-proofstrip span{display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:var(--muted)}
.lp-proofstrip i{color:var(--success);font-size:1rem}

/* Why-not-just-X comparison. */
.lp-vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:900px;margin-inline:auto}
.vs-col{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px}
.vs-col .vs-h{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1.05rem;margin-bottom:14px}
.vs-col .vs-h .logo{width:24px;height:24px;display:inline-grid;place-items:center;border-radius:7px;background:var(--gradient-primary)}
.vs-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.vs-col li{display:flex;align-items:flex-start;gap:10px;font-size:.94rem;line-height:1.45;color:var(--text)}
.vs-diy{opacity:.92}
.vs-diy .vs-h{color:var(--muted)}
.vs-diy li{color:var(--muted)}
.vs-diy li i{color:#c0392b;margin-top:2px;font-size:.85rem}
.vs-tur{border-color:var(--primary-600);box-shadow:0 10px 40px rgba(148,66,10,.10)}
.vs-tur li i{color:var(--success);margin-top:2px}

/* Condensed shared-engine row (replaces the old 8-card feature grid). */
.eng{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.eng-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;transition:.18s}
.eng-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.eng-item .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.3rem;
  margin-bottom:12px;background:var(--surface-2)}
.eng-item .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eng-item h4{font-size:1.02rem;margin:0 0 6px}
.eng-item p{color:var(--muted);font-size:.9rem;margin:0;line-height:1.5}

/* Founder note. */
.lp-founder{display:flex;gap:22px;align-items:flex-start;max-width:820px;margin-inline:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px 30px}
.lp-founder-mark{flex:0 0 auto;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border)}
.lp-founder-mark svg{width:28px;height:28px}
.lp-founder-body p{margin:0 0 12px;font-size:1.05rem;line-height:1.6;color:var(--text)}
.lp-founder-sign{font-size:.92rem !important;color:var(--muted) !important;font-weight:600}
.lp-founder-sign a{color:var(--primary-600);text-decoration:none}
.lp-founder-sign a:hover{text-decoration:underline}

/* Founder photo (falls back to the brandmark when no photo is set). */
.lp-founder-photo{flex:0 0 auto}
.lp-founder-photo img{width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:1px solid var(--border);display:block}
.lp-founder-photo .lp-founder-mark{width:52px;height:52px}

/* Early-access section (honest early-stage proof, replaces testimonials until real ones exist). */
.lp-early{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;
  max-width:1000px;margin-inline:auto;background:var(--surface);border:1px solid var(--border);
  border-radius:20px;padding:34px 36px}
.lp-early .early-copy h3{font-size:1.35rem;margin:0 0 10px}
.lp-early .early-copy p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0 0 20px}
.lp-early .lp-cta{margin:0}
.early-perks{display:flex;flex-direction:column;gap:16px}
.early-perk{display:flex;gap:13px;align-items:flex-start}
.early-perk .ic{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  font-size:1.15rem;background:var(--surface-2)}
.early-perk .ic i{background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.early-perk b{display:block;font-size:.98rem;margin-bottom:2px}
.early-perk span{color:var(--muted);font-size:.9rem;line-height:1.5}

@media(max-width:820px){
  .lp-vs{grid-template-columns:1fr}
  .eng{grid-template-columns:1fr 1fr}
  .lp-early{grid-template-columns:1fr;gap:24px;padding:28px 24px}
  .lp-founder{flex-direction:column;gap:14px;padding:24px 22px}
}
@media(max-width:520px){ .eng{grid-template-columns:1fr} }

/* ── Premium motion layer (futuristic hero) ──────────────────────────────
   All animation is transform/opacity/background-position/filter only, so it
   stays on the GPU. Everything here is disabled under prefers-reduced-motion. */

/* Living aurora: the existing rotating orb + two slow-drifting colour blooms. */
.lp-aura::before,.lp-aura::after{content:"";position:absolute;border-radius:50%;filter:blur(72px)}
.lp-aura::before{width:62%;height:62%;left:-8%;top:6%;
  background:radial-gradient(circle,rgba(230,148,74,.55),transparent 68%);animation:bloomA 19s ease-in-out infinite}
.lp-aura::after{width:56%;height:56%;right:-6%;bottom:0;
  background:radial-gradient(circle,rgba(201,106,31,.5),transparent 68%);animation:bloomB 25s ease-in-out infinite}
@keyframes bloomA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,8%) scale(1.12)}}
@keyframes bloomB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,-6%) scale(1.08)}}

/* Futuristic dot-grid, masked to fade out, slowly panning. */
.lp-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:26px 26px;
  color:rgba(180,83,14,.11);
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 24%,#000 28%,transparent 74%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 24%,#000 28%,transparent 74%);
  animation:gridpan 34s linear infinite}
:root[data-theme="dark"] .lp-hero::after{color:rgba(240,168,98,.10)}
@keyframes gridpan{to{background-position:0 52px}}

/* Shimmering gradient headline word. */
.lp-hero h1 .grad{
  background:linear-gradient(100deg,var(--primary) 0%,#e6a860 28%,var(--primary) 52%,#e6a860 80%,var(--primary) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 6.5s linear infinite}
@keyframes shimmer{to{background-position:220% center}}

/* "How it works" per-step mini visuals. */
.step-viz{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.sv-chip{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:.8rem;font-weight:600;
  background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:5px 10px}
.sv-chip i{color:var(--primary)}
.sv-tags{display:flex;gap:6px;flex-wrap:wrap}
.sv-tags span{font-size:.72rem;font-weight:600;color:var(--muted);background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 8px}
.sv-line{height:8px;border-radius:5px;background:var(--surface-3)}
.sv-badge{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:600;
  color:var(--success);background:var(--success-50);border-radius:999px;padding:4px 10px;margin-top:3px}
.sv-approve{flex-direction:row;align-items:center;justify-content:space-between}
.sv-approve b{font-size:.82rem;display:block}.sv-approve small{color:var(--muted);font-size:.72rem}
.sv-ok{font-size:.76rem;font-weight:700;color:#fff;background:var(--gradient-primary);border-radius:8px;
  padding:6px 12px;display:inline-flex;align-items:center;gap:6px}

/* Premium duotone product icon tile (custom SVG, theme-adaptive). */
.pico{flex:0 0 auto;display:grid;place-items:center;border-radius:12px;
  --ico-fill:#f4cf9f;--ico-stroke:#a8480a;
  background:linear-gradient(160deg,#fdf4ea,#f7e2cb);border:1px solid #f0d7bb;
  box-shadow:0 4px 14px rgba(180,83,14,.10);transition:transform .18s ease}
.pico svg{width:62%;height:62%;display:block}
:root[data-theme="dark"] .pico{--ico-fill:#5c3410;--ico-stroke:#f0a862;
  background:linear-gradient(160deg,#241a10,#3a2814);border-color:#4a3418;box-shadow:none}
.mega-link .pico{width:36px;height:36px;border-radius:10px}
.suite-card .pico{width:48px;height:48px;border-radius:14px;margin-bottom:14px}
.suite-card:hover .pico{transform:translateY(-2px)}

/* Designed visual tile for spotlight media that has no screenshot (replaces
   a lone icon floating in an empty box). Premium gradient panel + dot grid. */
.feat-viz{display:grid;place-items:center;min-height:280px;border-radius:18px;position:relative;
  overflow:hidden;border:1px solid var(--border);
  background:
    radial-gradient(55% 50% at 28% 18%, rgba(224,164,88,.30), transparent 70%),
    radial-gradient(50% 50% at 82% 92%, rgba(201,106,31,.20), transparent 70%),
    var(--surface)}
.feat-viz::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:34px 34px;opacity:.3;
  -webkit-mask-image:radial-gradient(circle at 50% 46%, #000, transparent 68%);
          mask-image:radial-gradient(circle at 50% 46%, #000, transparent 68%)}
.feat-viz .fv-ic{position:relative;z-index:1;width:92px;height:92px;border-radius:26px;display:grid;place-items:center;
  background:linear-gradient(160deg,#fdf4ea,#f7e2cb);border:1px solid #f0d7bb;
  box-shadow:0 18px 44px rgba(180,83,14,.20), 0 0 0 7px rgba(255,255,255,.55)}
:root[data-theme="dark"] .feat-viz .fv-ic{background:linear-gradient(160deg,#241a10,#3a2814);border-color:#4a3418;
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 0 0 7px rgba(255,255,255,.04)}
.feat-viz .fv-ic i{font-size:2.6rem;-webkit-text-fill-color:transparent;
  background:linear-gradient(135deg,#b8560f,#c96a1f 55%,#dd8a2e);-webkit-background-clip:text;background-clip:text}
:root[data-theme="dark"] .feat-viz .fv-ic i{background:linear-gradient(135deg,#e6944a,#f0a862);-webkit-background-clip:text;background-clip:text}

/* Interactive particle constellation behind the hero. */
.lp-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.lp-hero-grid{position:relative;z-index:1}

/* Centered hero CTAs: .lp-phero is centered, so its buttons + trust line must be too. */
.lp-phero .lp-cta{justify-content:center}
.lp-phero .lp-trust{text-align:center}

/* Wide centered screenshot band (how-it-works, course hero). */
.hiw-shot, .shot-band{max-width:960px;margin:34px auto 0}
.hiw-shot img, .shot-band img{width:100%;display:block}

/* Screenshots: pop-zoom on hover, click to open full-size + readable. */
.lp-shot{cursor:zoom-in;transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;position:relative;z-index:1}
.lp-shot:hover{transform:scale(1.28);box-shadow:0 40px 95px rgba(16,24,40,.38);z-index:60}
/* On a two-column spotlight, grow toward the outer edge so the zoom doesn't cover the copy. */
.lp-spot:nth-child(odd) .lp-spot-media .lp-shot{transform-origin:center right}
.lp-spot:nth-child(even) .lp-spot-media .lp-shot{transform-origin:center left}
@media(max-width:820px){.lp-shot:hover{transform:scale(1.12)}}

/* "How it works": screenshot left, numbered steps right. */
.lp-hiw{display:grid;grid-template-columns:1.28fr .72fr;gap:46px;align-items:center;max-width:1120px;margin-inline:auto}
.lp-hiw-media .lp-shot{transform-origin:center left}
.lp-hiw-media img{width:100%}
.lp-hiw-steps{display:flex;flex-direction:column;gap:24px}
.hiw-step{display:flex;gap:16px;align-items:flex-start}
.hiw-step .n{width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;font-weight:700;
  background:var(--primary-50);color:var(--primary-600)}
.hiw-step h4{margin:0 0 5px;font-size:1.14rem}
.hiw-step p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55}
@media(max-width:820px){.lp-hiw{grid-template-columns:1fr;gap:28px}}
.imgzoom{position:fixed;inset:0;z-index:9999;background:rgba(15,18,21,.85);display:grid;place-items:center;
  padding:20px;cursor:zoom-out;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.imgzoom[hidden]{display:none}
.imgzoom img{max-width:96vw;max-height:94vh;border-radius:12px;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.imgzoom .zc{position:absolute;top:16px;right:22px;color:#fff;font-size:2rem;line-height:1;opacity:.85;cursor:pointer}

/* Secondary spotlight placeholder tiles removed — copy goes clean & full-width. */
.lp-spot:has(> .lp-spot-media.feat-viz){grid-template-columns:1fr;max-width:820px;margin-inline:auto}
.lp-spot > .lp-spot-media.feat-viz{display:none}
/* A spotlight with no media goes clean full-width. */
.lp-spot.solo{grid-template-columns:1fr;max-width:820px;margin-inline:auto}

/* Hero glow + floating 3D product collage. */
.lp-hero-visual{perspective:1300px}
.lp-hero-visual::before{content:"";position:absolute;inset:-10% -8%;z-index:-1;border-radius:28px;
  background:radial-gradient(58% 58% at 60% 42%,rgba(224,164,88,.42),transparent 72%);
  filter:blur(36px);animation:glowpulse 5.5s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.45}50%{opacity:.9}}

.lp-collage{position:relative;width:100%;aspect-ratio:5/4;transform-style:preserve-3d;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);will-change:transform}
.lp-collage .cc{position:absolute;display:block;text-decoration:none;transform:var(--rest);
  animation:ccenter 1s cubic-bezier(.2,.85,.25,1) var(--d,.1s) both;transition:filter .25s ease}
.lp-collage .card{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--surface);box-shadow:0 20px 48px rgba(16,24,40,.22);
  animation:ccfloat var(--fd,8s) ease-in-out var(--d,.1s) infinite}
.lp-collage .card img{display:block;width:100%;height:auto}
@keyframes ccenter{from{opacity:0;transform:var(--rest) translateY(70px)}to{opacity:1;transform:var(--rest)}}
@keyframes ccfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* placement + depth (front → back by translateZ) */
.cc1{--rest:rotateY(-7deg) translateZ(70px);width:74%;left:5%;top:15%;--fd:8s;--d:.15s;z-index:4}
.cc2{--rest:rotateY(-13deg) translateZ(15px);width:45%;left:55%;top:-3%;--fd:9.5s;--d:.35s;z-index:2}
.cc3{--rest:rotateY(12deg) translateZ(-15px);width:42%;left:-4%;top:52%;--fd:10.5s;--d:.5s;z-index:1}
.cc4{--rest:rotateY(-9deg) translateZ(45px);width:47%;left:49%;top:55%;--fd:7.5s;--d:.65s;z-index:3}
.lp-collage .cc:hover{filter:brightness(1.03)}
.lp-collage .cc:hover .card{box-shadow:0 28px 64px rgba(180,83,14,.32);border-color:var(--primary)}

@media(max-width:900px){
  .lp-hero-visual{perspective:none}
  .lp-collage{aspect-ratio:auto;transform:none!important}
  .lp-collage .cc2,.lp-collage .cc3,.lp-collage .cc4{display:none}
  .lp-collage .cc1{position:relative;width:100%;left:0;top:0;--rest:none;
    animation:ccfadein .8s ease both}
  .lp-collage .cc1 .card{animation:none}
  .lp-particles{display:none}
}
@keyframes ccfadein{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Sheen sweep across the primary hero CTA. */
.lp-try .btn-primary{position:relative;overflow:hidden}
.lp-try .btn-primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-20deg);animation:sheen 5s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,55%{left:-70%}100%{left:130%}}

/* Respect reduced-motion: kill every motion-layer + base animation. */
@media(prefers-reduced-motion:reduce){
  .lp-pipe .step,.lp-aura,.lp-aura::before,.lp-aura::after,.lp-hero::after,
  .lp-hero h1 .grad,.lp-hero-visual::before,.lp-try .btn-primary::after,
  .lp-collage,.lp-collage .cc,.lp-collage .card,.orbit-ico{animation:none !important}
  /* Keep the full layered collage, just frozen (no entrance/float/parallax),
     so reduced-motion users still get the premium composition, not a blank. */
  .lp-collage .cc{opacity:1 !important}
  .lp-particles{display:none}
  .lp-hero h1 .grad{-webkit-text-fill-color:var(--primary);color:var(--primary)}
  .reveal{opacity:1 !important;transform:none !important}
}

/* ============================================================
   Motion layer — reusable entrance + interaction primitives.
   Markup-driven, so any template can opt in without new CSS:
     <div data-reveal>                 fade + rise (default)
     <div data-reveal="left|right">    slide in from the side
     <div data-reveal="scale|pop">     settle in (pop overshoots)
     <div data-reveal="blur|fade">     defocus / plain fade
     <div data-reveal-group>           stagger every child that reveals
   The engine in base.html adds .in when the element enters the
   viewport and assigns --i for the stagger. Transform + opacity
   only, so every transition stays on the compositor.
   ============================================================ */
:root{
  --m-dur:.62s;
  --m-ease:cubic-bezier(.22,.68,.28,1);    /* soft decelerate */
  --m-spring:cubic-bezier(.34,1.34,.5,1);  /* gentle overshoot */
  --m-dist:22px;
  --m-stagger:65ms;
}

[data-reveal]{
  opacity:0;
  transform:translate3d(0,var(--m-dist),0);
  transition:opacity var(--m-dur) var(--m-ease),
             transform var(--m-dur) var(--m-ease),
             filter var(--m-dur) var(--m-ease);
  transition-delay:calc(var(--i,0) * var(--m-stagger));
  will-change:opacity,transform;
}
[data-reveal="left"] {transform:translate3d(calc(-1 * var(--m-dist)),0,0)}
[data-reveal="right"]{transform:translate3d(var(--m-dist),0,0)}
[data-reveal="down"] {transform:translate3d(0,calc(-1 * var(--m-dist)),0)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="pop"]  {transform:scale(.9);transition-timing-function:var(--m-spring)}
[data-reveal="blur"] {transform:none;filter:blur(10px)}
[data-reveal="fade"] {transform:none}
[data-reveal].in{opacity:1;transform:none;filter:none;will-change:auto}

/* Hover/press micro-motion for anything clickable. */
.m-lift{transition:transform var(--t) var(--m-ease),box-shadow var(--t) var(--m-ease),
                   border-color var(--t) var(--m-ease)}
.m-lift:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--border-hover)}
.m-press{transition:transform var(--t-fast) var(--m-ease)}
.m-press:active{transform:scale(.97)}

/* Icon tiles that tilt as their card is hovered. */
.m-lift .jico,.m-lift .ic{transition:transform var(--t-slow) var(--m-spring)}
.m-lift:hover .jico,.m-lift:hover .ic{transform:scale(1.08) rotate(-4deg)}

/* Numbers that count up (engine animates [data-count]); the tabular
   figures stop the tile resizing on every frame. */
.m-count{font-variant-numeric:tabular-nums}

/* Skeleton shimmer for content still loading. */
.m-skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%;animation:mskel 1.4s ease-in-out infinite;border-radius:var(--radius-sm);
  color:transparent!important}
@keyframes mskel{to{background-position:-135% 0}}

@media(prefers-reduced-motion:reduce){
  /* Show everything in its settled state, with no movement at all. */
  [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .m-lift,.m-press,.m-lift .jico,.m-lift .ic{transition:none!important}
  .m-lift:hover{transform:none}
  .m-press:active{transform:none}
  .m-lift:hover .jico,.m-lift:hover .ic{transform:none}
  .m-skel{animation:none}
}

/* ============================================================
   Futuristic layer (fx-*) — ambient depth + light, tuned to the
   brand rather than neon: terracotta warmth against a cool slate
   counterpoint, everything low-opacity so copy stays legible in
   both themes. Continuous animations are transform/opacity/filter
   only and all of it stops under prefers-reduced-motion.
   ============================================================ */
:root{
  --fx-warm:rgba(200,106,31,.20);
  --fx-cool:rgba(70,110,160,.16);
  --fx-line:rgba(21,24,29,.055);       /* grid hairline */
  --fx-glass:rgba(255,255,255,.62);
  --fx-glow:rgba(200,106,31,.34);
}
html[data-theme="dark"]{
  --fx-warm:rgba(230,148,74,.20);
  --fx-cool:rgba(96,140,200,.16);
  --fx-line:rgba(255,255,255,.05);
  --fx-glass:rgba(23,27,32,.62);
  --fx-glow:rgba(230,148,74,.42);
}

/* --- Ambient aurora field. Sits behind everything, never interactive. --- */
.fx-field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.fx-field::before,.fx-field::after{content:"";position:absolute;border-radius:50%;filter:blur(90px)}
.fx-field::before{width:58vw;height:58vw;left:-14vw;top:-18vw;
  background:radial-gradient(circle,var(--fx-warm),transparent 66%);animation:fxdriftA 32s ease-in-out infinite}
.fx-field::after{width:52vw;height:52vw;right:-16vw;bottom:-20vw;
  background:radial-gradient(circle,var(--fx-cool),transparent 66%);animation:fxdriftB 41s ease-in-out infinite}
@keyframes fxdriftA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(7vw,5vh,0) scale(1.14)}}
@keyframes fxdriftB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-6vw,-6vh,0) scale(1.1)}}

/* Fine engineering grid, drifting slowly. Masked so it fades out downward. */
.fx-field .fx-grid{position:absolute;inset:-60px 0 0;
  background-image:linear-gradient(var(--fx-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--fx-line) 1px,transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 46%,transparent 88%);
          mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 46%,transparent 88%);
  animation:fxgrid 26s linear infinite}
@keyframes fxgrid{to{background-position:0 58px,58px 0}}

/* --- Scroll progress beam across the top of the viewport. --- */
.fx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:100;pointer-events:none;
  transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--cyan));
  box-shadow:0 0 12px var(--fx-glow);opacity:.92}

/* --- Glass panel: frosted surface with a light hairline. --- */
.fx-glass{background:var(--fx-glass);backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid var(--border);box-shadow:var(--shadow)}

/* --- Luminous border: a conic sweep that lights up on hover. Uses a mask
       so only the 1px rim is painted, never the card's interior. --- */
.fx-edge{position:relative;isolation:isolate}
.fx-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:conic-gradient(from var(--a,0deg),transparent 0turn,var(--fx-glow) .12turn,transparent .3turn,
             transparent .5turn,var(--fx-glow) .62turn,transparent .8turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .28s var(--m-ease);pointer-events:none;z-index:1}
.fx-edge:hover::before,.fx-edge:focus-within::before{opacity:1;animation:fxspin 4s linear infinite}
@property --a{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes fxspin{to{--a:360deg}}

/* --- Cursor spotlight. The engine feeds --mx/--my as percentages. --- */
/* The wash sits at z-index:-1, which paints it ABOVE the card's own background
   but BELOW every child. That keeps the children untouched. The previous
   approach lifted them with `.fx-spot>*{position:relative}`, and since the fx
   layer is the last thing in this file it silently beat any earlier
   `position:absolute` on a child at equal specificity — which is what dropped
   the `.suite-tag` badges out of their corner and onto the card headings.
   `isolation:isolate` above keeps the negative layer inside the card. */
.fx-spot{position:relative;isolation:isolate}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),var(--fx-glow),transparent 70%);
  opacity:0;transition:opacity .3s var(--m-ease);mix-blend-mode:soft-light}
.fx-spot:hover::after{opacity:.9}

/* --- Pointer tilt (engine sets --rx/--ry). --- */
.fx-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;transition:transform .32s var(--m-ease)}

/* --- Magnetic control: drifts toward the cursor (engine sets --tx/--ty). --- */
.fx-magnet{transform:translate3d(var(--tx,0),var(--ty,0),0);transition:transform .22s var(--m-ease)}

/* --- Headline sweep: a slow specular pass over display type. --- */
.fx-shine{background:linear-gradient(100deg,var(--text) 20%,var(--primary) 42%,var(--cyan) 52%,var(--text) 72%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;animation:fxshine 7.5s linear infinite}
@keyframes fxshine{to{background-position:-220% center}}

/* --- Status dot that pulses like live telemetry. --- */
.fx-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--success);flex:none}
.fx-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;
  animation:fxping 2.1s cubic-bezier(0,0,.2,1) infinite}
@keyframes fxping{0%{transform:scale(1);opacity:.7}75%,100%{transform:scale(2.6);opacity:0}}

/* --- Sidebar nav: an accent rail that slides in on hover/active. --- */
.nav-links a{position:relative}
.nav-links a::before{content:"";position:absolute;left:0;top:50%;width:2px;height:0;border-radius:2px;
  background:var(--gradient-primary);transform:translateY(-50%);
  transition:height .24s var(--m-ease);box-shadow:0 0 8px var(--fx-glow)}
.nav-links a:hover::before{height:46%}
.nav-links a.active::before{height:64%}

/* --- App content gets depth: the shell reads as a lit surface, not flat. --- */
.fx-app-bg{background:
  radial-gradient(1100px 520px at 76% -8%,color-mix(in srgb,var(--primary) 7%,transparent),transparent 62%),
  radial-gradient(860px 460px at -6% 12%,color-mix(in srgb,#4b7bb5 6%,transparent),transparent 60%)}

@media(prefers-reduced-motion:reduce){
  .fx-field::before,.fx-field::after,.fx-field .fx-grid,.fx-shine,.fx-live::after,
  .fx-edge:hover::before{animation:none!important}
  .fx-shine{-webkit-text-fill-color:var(--text);color:var(--text)}
  .fx-tilt,.fx-magnet{transform:none!important;transition:none}
  .fx-spot::after{display:none}
  .nav-links a::before{transition:none}
  .fx-progress{transition:none}
}