:root {
  --accent: #2563eb;
  --accent-dark: #1d4ed8;
  --accent-bg: #eff4ff;
  --accent-border: #c7d7fe;
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --text: #1f2937;
  --text-muted: #6b7280;
  --text-faint: #9ca3af;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --success: #059669;
  --success-bg: #ecfdf5;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --info: #0891b2;
  --info-bg: #ecfeff;
  --radius: 8px;
  --radius-lg: 12px;
  --sidebar-w: 236px;
  --shadow: 0 1px 2px rgba(16,24,40,.04);
  --font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --accent: #3b82f6;
  --accent-dark: #60a5fa;
  --accent-bg: rgba(59,130,246,.16);
  --accent-border: #274574;
  --bg: #0f141c;
  --surface: #1a212e;
  --surface-2: #141a24;
  --text: #e5e7eb;
  --text-muted: #9aa6b6;
  --text-faint: #6b7686;
  --border: #2a3342;
  --border-strong: #3a4557;
  --success: #34d399;
  --success-bg: rgba(16,185,129,.14);
  --warning: #fbbf24;
  --warning-bg: rgba(217,119,6,.16);
  --danger: #f87171;
  --danger-bg: rgba(220,38,38,.16);
  --info: #22d3ee;
  --info-bg: rgba(8,145,178,.16);
  --shadow: 0 1px 2px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-weight: 600; color: var(--text); margin: 0 0 .5rem; }
h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  position: fixed; top: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  z-index: 20;
}
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px; font-size: 17px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.sidebar .brand .logo {
  width: 30px; height: 30px; border-radius: 8px; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.nav .group-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); padding: 14px 12px 6px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius);
  color: var(--text-muted); font-weight: 500; margin-bottom: 2px;
  transition: background .12s, color .12s;
}
.nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav a.active { background: var(--accent-bg); color: var(--accent-dark); }
.nav a i { font-size: 18px; width: 20px; text-align: center; }
.sidebar .user {
  border-top: 1px solid var(--border); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent-bg);
  color: var(--accent-dark); display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px; flex-shrink: 0;
}
.content { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 60px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  position: sticky; top: 0; z-index: 10;
}
.topbar .page-title { font-size: 18px; font-weight: 600; }
.topbar .actions { display: flex; align-items: center; gap: 10px; }
.main { padding: 24px 28px; flex: 1; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card .card-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.card .card-head h3 { margin: 0; }
.card .card-body { padding: 20px; }
.card .card-body.tight { padding: 0; }

/* ---------- Metric cards ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); }
.metric .label { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.metric .label i { font-size: 16px; color: var(--text-faint); }
.metric .value { font-size: 28px; font-weight: 700; margin-top: 6px; }
.metric .value.accent { color: var(--accent); }
.metric .value.success { color: var(--success); }
.metric .sub { font-size: 12px; color: var(--text-faint); margin-top: 2px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 600; padding: 12px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--surface-2); }
table.data .muted { color: var(--text-muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .12s, border-color .12s, transform .04s; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: scale(.985); }
.btn i { font-size: 17px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.danger { background: var(--surface); border-color: var(--border-strong); color: var(--danger); }
.btn.danger:hover { background: var(--danger-bg); border-color: #fca5a5; }
.btn.success { background: var(--success); border-color: var(--success); color: #fff; }
.btn.success:hover { filter: brightness(.95); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-muted); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.badge.gray { background: #f3f4f6; color: #4b5563; }
.badge.blue { background: var(--accent-bg); color: var(--accent-dark); }
.badge.green { background: var(--success-bg); color: var(--success); }
.badge.amber { background: var(--warning-bg); color: var(--warning); }
.badge.red { background: var(--danger-bg); color: var(--danger); }
.badge.cyan { background: var(--info-bg); color: var(--info); }
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---------- Forms ---------- */
.form-grid { display: grid; gap: 18px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--text); }
.field .hint { font-size: 12px; color: var(--text-faint); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], input[type=url], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-family: var(--font); font-size: 14px; color: var(--text); background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
textarea { resize: vertical; min-height: 90px; }
textarea.code { font-family: "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.5; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); }
.field-validation-error, .text-danger { color: var(--danger); font-size: 12.5px; }
.input-validation-error { border-color: var(--danger) !important; }

/* ---------- Alerts ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 18px; display: flex; align-items: center; gap: 9px; border: 1px solid transparent; }
.alert i { font-size: 18px; }
.alert.success { background: var(--success-bg); color: #065f46; border-color: #a7f3d0; }
.alert.error { background: var(--danger-bg); color: #991b1b; border-color: #fecaca; }
.alert.info { background: var(--accent-bg); color: var(--accent-dark); border-color: var(--accent-border); }

/* ---------- Progress ---------- */
.progress { height: 9px; background: #eef0f3; border-radius: 999px; overflow: hidden; }
.progress .bar { height: 100%; background: var(--accent); border-radius: 999px; transition: width .4s ease; }
.progress .bar.success { background: var(--success); }

/* ---------- Misc ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; }
.page-head .subtitle { color: var(--text-muted); font-size: 14px; margin-top: 2px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar .spacer { flex: 1; }
.search { position: relative; }
.search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: 17px; }
.search input { padding-left: 36px; min-width: 260px; }
.empty { text-align: center; padding: 56px 20px; color: var(--text-muted); }
.empty i { font-size: 40px; color: var(--border-strong); display: block; margin-bottom: 12px; }
.pagination { display: flex; gap: 6px; align-items: center; justify-content: flex-end; margin-top: 16px; }
.pagination a, .pagination span { padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.pagination a:hover { background: var(--surface-2); text-decoration: none; }
.pagination .current { background: var(--accent); color: #fff; border-color: var(--accent); }
.grid-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
.stat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: none; }
.stat-row .k { color: var(--text-muted); }
.stat-row .v { font-weight: 600; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; font-weight: 500; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }
.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mono { font-family: "Cascadia Code", Consolas, monospace; font-size: 12.5px; }
.text-muted { color: var(--text-muted); }
.text-right { text-align: right; }
.nowrap { white-space: nowrap; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: translateX(0); }
  .content { margin-left: 0; }
  .grid-2 { grid-template-columns: 1fr; }
  .form-grid.two { grid-template-columns: 1fr; }
  .menu-toggle { display: inline-flex !important; }
}
.menu-toggle { display: none; }

/* ---------- Auth pages ---------- */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff 0%, #f4f5f7 100%); padding: 20px; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px rgba(16,24,40,.08); width: 100%; max-width: 400px; padding: 36px 34px; }
.auth-card .brand { display: flex; align-items: center; gap: 11px; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.auth-card .brand .logo { width: 36px; height: 36px; border-radius: 9px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; }
.auth-card .sub { color: var(--text-muted); margin-bottom: 24px; }

/* ============================================================
   🐝 Shotbees — "Swarm" theme: white · ink · gold, kinetic
   ============================================================ */
:root{
  --accent:#F59E0B;        /* gold — highlights, focus, marks */
  --accent-dark:#B45309;   /* deep amber — readable links */
  --accent-bg:#FEF3C7;
  --accent-border:#FDE68A;
  --ink:#0e0e10;           /* near-black — primary actions & display type */
  --gold-1:#FBBF24; --gold-2:#F59E0B;
  --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* Serif display for large headings; Manrope for body/UI. */
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
}
html[data-theme="dark"]{
  --accent:#FBBF24; --accent-dark:#FCD34D; --accent-bg:rgba(251,191,36,.16); --accent-border:#78591c;
  --ink:#f4f4f5;
}
body{font-family:var(--font);}
a{color:var(--accent-dark);}

/* Primary action = solid ink, like the Swarm direction */
.btn.primary{background:#0e0e10;border-color:var(--ink);color:#fff;font-weight:700;}
.btn.primary:hover{background:#000;border-color:#000;color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);}
.btn.primary i{color:#fff;}
html[data-theme="dark"] .btn.primary{background:#fff;border-color:#fff;color:#0e0e10;}
html[data-theme="dark"] .btn.primary i{color:#0e0e10;}

/* Brand mark — the Velocibee SVG sits on a transparent tile */
.logo{background:transparent !important;box-shadow:none !important;padding:0 !important;overflow:visible;}
.logo svg{width:100%;height:100%;display:block;}
.brand:hover .logo{animation:sb-buzz .5s ease;}
@keyframes sb-buzz{0%,100%{transform:translateX(0)}30%{transform:translateX(-2px) rotate(-4deg)}60%{transform:translateX(2px) rotate(3deg)}}

/* Display type for marketing + auth headlines */
.hero h1,.auth-card .brand,.pub-wrap h1,.pub-wrap h2,.brand{font-family:var(--font-display);}
.brand{font-weight:700;letter-spacing:-.01em;}

/* ---- Landing hero: white + kinetic swarm ---- */
.hero{background:#fff;position:relative;overflow:hidden;}
html[data-theme="dark"] .hero{background:#0e0e10;}
.hero .pub-wrap{position:relative;z-index:2;}
#heroSwarm{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.hero h1{font-weight:600;letter-spacing:-.02em;}
.hero h1 mark{background:linear-gradient(120deg,var(--gold-1),var(--gold-2));color:#241a02;padding:0 .18em;border-radius:6px;}
.eyebrow{background:#0e0e10;color:var(--gold-1);border:0;}
.hero .btn.primary{box-shadow:0 10px 26px rgba(0,0,0,.16);}

/* Kinetic marquee strip under the hero */
.sb-marquee{background:#0e0e10;overflow:hidden;white-space:nowrap;}
.sb-marquee span{display:inline-block;padding:9px 0;color:var(--gold-1);font-weight:800;font-size:12px;letter-spacing:.22em;animation:sb-marq 18s linear infinite;}
@keyframes sb-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Feature icons in gold-on-ink for punch */
.feature .ic{background:linear-gradient(145deg,#FBBF24,#F59E0B) !important;color:#3a2a06 !important;width:58px !important;height:58px !important;border-radius:0 !important;font-size:26px !important;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);box-shadow:0 8px 18px -8px rgba(245,158,11,.6);}

/* ---- Auth pages: clean white with a gold hairline ---- */
.auth-wrap{background:#fff;}
html[data-theme="dark"] .auth-wrap{background:#0e0e10;}
.auth-card{border-top:3px solid var(--gold-2);}
.auth-card .brand .logo{width:46px;height:46px;background:transparent !important;}

@media(prefers-reduced-motion:reduce){
  .sb-marquee span,.brand:hover .logo{animation:none;}
}

/* Flying honey-trail bee (from the "Nectar" direction), layered on the hero */
.hero-flight{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero-flight path{fill:none;stroke:url(#sbTrail);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:100;stroke-dashoffset:100;animation:sb-draw 14s ease-in-out infinite;}
.hero-flight .bee{animation:sb-beemv 14s ease-in-out infinite;}
@keyframes sb-draw{0%{stroke-dashoffset:100;opacity:1}50%{stroke-dashoffset:0;opacity:1}82%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes sb-beemv{0%{offset-distance:0%;opacity:0}6%{opacity:1}50%{offset-distance:100%;opacity:1}72%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-flight{display:none;}}

/* Bigger, clearer brand mark in the app sidebar */
.sidebar .brand .logo{width:40px;height:40px;border-radius:0;background:transparent !important;}
.sidebar .brand{font-size:19px;}

/* ============================================================
   🐝 Bee FX — creative micro-interactions
   ============================================================ */
@keyframes sb-bob{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-9px) rotate(8deg)}}
@keyframes sb-flutter{0%,100%{transform:translate(-50%,-55%) rotate(-8deg)}50%{transform:translate(-50%,-62%) rotate(9deg)}}

/* (1) Primary buttons: gold streak zips across on hover + honey ripple on click */
.btn.primary{position:relative;overflow:hidden;}
.btn.primary::before{content:"";position:absolute;top:0;bottom:0;left:-30%;width:26px;
  background:linear-gradient(90deg,transparent,rgba(251,191,36,.55),transparent);opacity:0;transform:skewX(-18deg);pointer-events:none;}
.btn.primary:hover::before{animation:sb-zip .55s ease;}
@keyframes sb-zip{0%{left:-30%;opacity:0}25%{opacity:1}100%{left:120%;opacity:0}}
.btn.primary .sb-ripple{position:absolute;border-radius:50%;transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(251,191,36,.25) 60%,transparent 70%);
  pointer-events:none;animation:sb-ripple .6s ease-out forwards;}
@keyframes sb-ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0;}}

/* (2) Empty states get a friendly bobbing bee */
.empty::before{content:"";display:block;width:46px;height:27px;margin:0 auto 12px;background:url('/img/bee.svg') center/contain no-repeat;animation:sb-bob 3.2s ease-in-out infinite;}
.empty i{opacity:.5;}

/* (2b) Campaign delivery progress: a bee rides the leading edge of the bar */
.progress{position:relative;overflow:visible;}
.sb-progress-bee{position:absolute;top:50%;margin-top:-8px;margin-left:-13px;width:26px;height:15px;
  background:url('/img/bee.svg') center/contain no-repeat;transition:left .8s ease;pointer-events:none;
  animation:sb-flutter 1.1s ease-in-out infinite;z-index:2;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));}

/* (1c) Cursor-follow bee on the hero */
#cursorBee{position:absolute;left:0;top:0;font-size:26px;z-index:2;pointer-events:none;opacity:0;
  transition:opacity .4s ease;will-change:transform;}
.hero:hover #cursorBee{opacity:1;}

@media(prefers-reduced-motion:reduce){
  .btn.primary::before,.empty::before,.sb-progress-bee{animation:none;}
  #cursorBee{display:none;}
}
@media(hover:none){#cursorBee{display:none;}}

/* Brand lockup: Poppins wordmark, tightly integrated with the bee mark; "bees" in honey gold */
.brand,.auth-card .brand,.pub-nav .brand{
  font-family:"Poppins",var(--font) !important;font-weight:800;letter-spacing:-.03em;
  gap:4px !important;align-items:center;line-height:1;}
.brand .wm{display:inline-block;margin-left:-11px;position:relative;z-index:1;}
.brand .wm-b{color:var(--accent-dark);}
/* Auth card: gentler overlap + balanced size so the mark isn't crowded */
.auth-card .brand{gap:6px !important;}
.auth-card .brand .wm{margin-left:-5px;}
.auth-card .brand .logo{width:42px !important;height:42px !important;}

/* ============================================================
   🐝 Landing: feature cards, product mockup, footer
   ============================================================ */
/* Feature cards — top accent bar + hover lift (higher specificity beats the layout base) */
.feature-grid .feature{border-radius:16px;padding:26px 24px;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.feature-grid .feature::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold-1),var(--gold-2));transform:scaleX(0);transform-origin:left;transition:transform .3s ease;}
.feature-grid .feature:hover{transform:translateY(-5px);box-shadow:0 22px 44px -24px rgba(180,120,10,.4);border-color:var(--accent-border);}
.feature-grid .feature:hover::after{transform:scaleX(1);}

/* Section eyebrow (centered) */
.sec-head{text-align:center;margin-bottom:8px;}
.sec-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-2);background:var(--accent-bg);border:1px solid var(--accent-border);border-radius:999px;padding:6px 13px;}

/* Product mockup — realistic app window mirroring the live dashboard */
.shotcase{padding:20px 0 8px;}
.appwin{max-width:1000px;margin:26px auto 0;background:#fff;border:1px solid #e6e4de;border-radius:16px;
  box-shadow:0 40px 90px -40px rgba(30,25,10,.45);overflow:hidden;}
.aw-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f3f1ec;border-bottom:1px solid #e6e4de;}
.aw-bar i{width:11px;height:11px;border-radius:50%;background:#d4d0c6;}
.aw-bar i:first-child{background:#ff5f57;}.aw-bar i:nth-child(2){background:#febc2e;}.aw-bar i:nth-child(3){background:#28c840;}
.aw-url{margin-left:12px;font-size:12px;color:#8a8578;background:#fff;border:1px solid #e6e4de;border-radius:7px;padding:4px 14px;display:inline-flex;align-items:center;gap:6px;}
.aw-url i{width:auto;height:auto;background:none;font-size:12px;}
.aw-body{display:grid;grid-template-columns:210px 1fr;background:#fff;min-height:400px;}
@media(max-width:720px){.aw-body{grid-template-columns:74px 1fr;}}
.aw-side{background:#fbfaf7;border-right:1px solid #eeece6;padding:18px 14px;}
.aw-side .aw-brand{margin:0 0 20px 4px;}
.aw-side .aw-brand .wm{font-size:17px;}
.aw-nav{display:flex;flex-direction:column;gap:3px;}
.aw-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#a8a291;font-weight:700;margin:12px 0 4px 10px;}
.aw-nav a{display:flex;align-items:center;gap:10px;font-size:13.5px;color:#5b5647;padding:8px 10px;border-radius:9px;}
.aw-nav a i{font-size:17px;color:#9a9484;}
.aw-nav a.on{background:#FEF3C7;color:#B45309;font-weight:600;}
.aw-nav a.on i{color:#D97706;}
@media(max-width:720px){.aw-side .aw-brand .wm,.aw-lbl,.aw-nav a span{display:none;}.aw-nav a{justify-content:center;}}
.aw-main{padding:20px 22px 24px;background:#fff;}
.aw-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.aw-title{font-family:var(--font-display);font-weight:600;color:#161616;font-size:21px;}
.aw-cta{display:inline-flex;align-items:center;gap:6px;background:#0e0e10;color:#fff;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:9px;}
.aw-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
@media(max-width:720px){.aw-metrics{grid-template-columns:repeat(2,1fr);}}
.aw-metric{border:1px solid #eeece6;border-radius:13px;padding:13px 14px;background:#fff;}
.aw-metric .l{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8a8578;font-weight:600;}
.aw-metric .l i{font-size:14px;color:#c2a24a;}
.aw-metric .v{font-family:var(--font-display);font-weight:600;font-size:25px;color:#161616;margin:6px 0 2px;letter-spacing:-.01em;}
.aw-metric .v.green{color:#0a8a4a;}.aw-metric .v.gold{color:#D97706;}
.aw-metric .s{font-size:11.5px;color:#a29c8c;}
.aw-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;}
@media(max-width:720px){.aw-grid{grid-template-columns:1fr;}}
.aw-card{border:1px solid #eeece6;border-radius:13px;padding:15px 16px;background:#fff;}
.aw-ch{font-size:12.5px;color:#5b5647;font-weight:700;margin-bottom:12px;}
.aw-chart{width:100%;height:130px;display:block;}
.aw-grid-l{stroke:#f0eee8;stroke-width:1;}
.aw-stat{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f3f1ec;font-size:13.5px;}
.aw-stat:last-child{border-bottom:0;}
.aw-stat span:first-child{color:#8a8578;}
.aw-stat span:last-child{color:#161616;font-weight:700;}

/* Footer */
/* Footer is a fixed dark band in BOTH themes (not var(--ink), which flips to near-white in dark). */
.site-footer{background:#0e0e10;color:#cfc6b4;margin-top:24px;}
.site-footer .sf-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.3fr;gap:24px;padding:24px 32px 14px;align-items:start;}
@media(max-width:760px){.site-footer .sf-grid{grid-template-columns:1fr 1fr;gap:20px;}}
.site-footer .brand{color:#fff;margin-bottom:8px;font-size:17px;}
.site-footer .brand .logo{width:30px;height:30px;}
.site-footer .brand .wm-b{color:var(--gold-1);}
.site-footer .sf-brand p{color:#a99c83;font-size:12.5px;max-width:32ch;margin:0;line-height:1.5;}
.site-footer h4{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.09em;margin:0 0 10px;}
.site-footer .sf-col{display:flex;flex-direction:column;gap:7px;}
.site-footer .sf-col a{color:#cfc6b4;font-size:14px;}
.site-footer .sf-col a:hover{color:var(--gold-1);}
.site-footer .btn.primary{background:linear-gradient(180deg,#FBBF24,#F59E0B) !important;color:#241a02 !important;border:0 !important;align-self:flex-start;}
.site-footer .sf-bottom{padding:11px 32px 14px;border-top:1px solid rgba(255,255,255,.1);color:#8a7f68;font-size:12.5px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* Refined brand lockup: hug the (now tightly-framed) mark and merge it with the wordmark */
.brand .logo{width:auto !important;height:34px !important;display:inline-flex;align-items:center;}
.brand .logo svg{width:auto !important;height:100% !important;}
.sidebar .brand .logo{height:30px !important;}
.pub-nav .brand .logo{height:36px !important;}
.auth-card .brand .logo{height:40px !important;}
.site-footer .brand .logo{height:28px !important;}
.brand .wm,.auth-card .brand .wm{margin-left:-2px !important;}

/* Wordmark in uppercase (same Poppins font) */
.brand .wm{text-transform:uppercase;letter-spacing:.02em;}

/* ===== Chosen lockup: ACCENT BEE hovering above the wordmark ===== */
.brand{position:relative !important;padding-top:13px !important;align-items:flex-end;}
.brand .logo{position:absolute !important;top:0 !important;left:auto !important;right:4px !important;
  height:20px !important;width:auto !important;transform:rotate(-8deg);transform-origin:center;background:transparent !important;}
.brand .logo svg{height:100% !important;width:auto !important;}
.brand .wm{margin-left:0 !important;text-transform:uppercase;letter-spacing:.02em;}
.sidebar .brand{padding-top:24px !important;}
.sidebar .brand .logo{height:21px !important;top:6px !important;right:auto !important;left:78px !important;}
.pub-nav .brand .logo{height:23px !important;}
.auth-card .brand{padding-top:17px !important;}
.auth-card .brand .logo{height:25px !important;right:8px !important;}
.site-footer .brand .logo{height:18px !important;}

/* Fix: stack the accent bee directly above the word (column), robust in every context */
.brand{position:static !important;flex-direction:column !important;align-items:flex-start !important;
  padding-top:0 !important;gap:0 !important;line-height:1;}
.brand .logo{position:static !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;
  height:19px !important;width:auto !important;margin:0 0 1px 3px !important;transform:rotate(-8deg);}
.brand .logo svg{height:100% !important;width:auto !important;}
.sidebar .brand{padding-top:16px !important;}
.pub-nav .brand .logo{height:20px !important;}
.auth-card .brand{padding-top:0 !important;}
.auth-card .brand .logo{height:23px !important;}
.site-footer .brand .logo{height:16px !important;}

/* ===== Accent bee hovers ABOVE the wordmark — em-based so it never overlaps the letters ===== */
.brand{display:inline-flex !important;flex-direction:row !important;position:relative !important;
  align-items:flex-end !important;align-self:flex-start !important;width:max-content !important;max-width:100%;
  padding-top:1.3em !important;gap:0 !important;line-height:1;}
.brand .wm{margin-left:0 !important;text-transform:uppercase;letter-spacing:.02em;}
/* bee sits in the reserved top space, clear of the text (0..1.05em, text starts at 1.3em) */
.brand .logo{position:absolute !important;top:0 !important;right:.4em !important;left:auto !important;bottom:auto !important;
  height:1.05em !important;width:auto !important;transform:rotate(-6deg);margin:0 !important;background:transparent !important;}
.brand .logo svg{height:100% !important;width:auto !important;}
/* keep the sidebar divider full-width (brand no longer spans it) */
.sidebar .brand{border-bottom:0 !important;}
.sidebar .nav{border-top:1px solid var(--border);}
.site-footer .brand .logo{height:.95em !important;}

/* Raise the accent bee a touch higher above the word */
.brand{padding-top:22px !important;}
.brand .logo{top:-8px !important;}

/* Lower the accent bee a little (between too-high and the baseline) */
.brand{padding-top:19px !important;}
.brand .logo{top:-4px !important;}

/* Enlarge "SHOT" on its own; keep both on one baseline */
.brand .wm{align-items:baseline !important;}
.brand .wm-s{font-size:1.18em;}

/* "O" in SHOT is a target/crosshair — size it to sit like the letter O */
.wm .tgt{height:1.02em;width:1.02em;vertical-align:-0.16em;margin:0 .02em;display:inline-block;}

/* Hexagon "O" sizing inside the wordmark */
.wm .wm-o{height:1.0em;width:.9em;vertical-align:-0.12em;margin:0 .03em;display:inline-block;}

/* Pull the "T" closer to the hexagon O */
.wm .wm-o{margin-right:-0.08em !important;margin-left:0 !important;}

/* Hex O now uses a tight viewBox — size by height, hug the letters */
.wm .wm-o{height:1.02em !important;width:auto !important;vertical-align:-0.13em !important;margin:0 -0.01em !important;}

/* Hex O = clean letter O: cap-height, baseline-aligned, normal spacing */
.wm .wm-o{height:0.72em !important;width:auto !important;vertical-align:baseline !important;margin:0 .05em !important;display:inline-block;}

/* Pull T closer to the hexagon O */
.wm .wm-o{margin-left:.04em !important;margin-right:-0.05em !important;}

/* Tighter still: T closer to the hexagon O */
.wm .wm-o{margin-right:-0.11em !important;}

/* T a touch closer + a soft shadow on the brand lockup */
.wm .wm-o{margin-right:-0.16em !important;}
.brand{filter:drop-shadow(0 2px 2px rgba(15,20,30,.20));}
.site-footer .brand{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));}

/* Stronger, layered soft shadow on the brand lockup */
.brand{filter:drop-shadow(0 2px 3px rgba(15,20,30,.30)) drop-shadow(0 6px 12px rgba(15,20,30,.22)) !important;}
.site-footer .brand{filter:drop-shadow(0 3px 6px rgba(0,0,0,.45)) !important;}

/* ===== Premium touches on the logo ===== */
/* Metallic honey gradient on "bees" (readable on white) */
.brand .wm-b{background:linear-gradient(180deg,#E8930C,#A9520A) !important;-webkit-background-clip:text;background-clip:text;color:transparent !important;}
html[data-theme="dark"] .brand .wm-b,.site-footer .brand .wm-b{background:linear-gradient(180deg,#FDE68A,#F59E0B) !important;-webkit-background-clip:text;background-clip:text;color:transparent !important;}
/* Soft light sheen sweeping across the name on hover */
.brand .wm{position:relative;overflow:hidden;}
.brand .wm::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);}
.brand:hover .wm::after{animation:sb-sheen .85s ease;}
@keyframes sb-sheen{0%{left:-60%;opacity:0}18%{opacity:1}100%{left:130%;opacity:0}}
@media(prefers-reduced-motion:reduce){.brand:hover .wm::after{animation:none;}}

/* FIX: "bees" gradient-text broke into a solid block on some browsers — use solid gold instead */
.brand .wm-b{background:none !important;background-image:none !important;color:#B45309 !important;-webkit-text-fill-color:#B45309 !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;}
.site-footer .brand .wm-b,html[data-theme="dark"] .brand .wm-b{color:#FBBF24 !important;-webkit-text-fill-color:#FBBF24 !important;}

/* Soften the hover sheen */
.brand .wm::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent) !important;width:32% !important;}

/* Feature cards: 3 per row (2 on tablet, 1 on phone) */
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
@media(max-width:900px){.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}}
@media(max-width:600px){.feature-grid{grid-template-columns:1fr !important;}}

/* ===== Dark "Real-time analytics" band ===== */
.analytics{background:#0e0e10;color:#fff;padding:62px 0 70px;overflow:hidden;}
.analytics .an-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:start;}
@media(max-width:820px){.analytics .an-grid{grid-template-columns:1fr;gap:16px;}}
.an-eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#9aa0a6;margin-bottom:14px;}
.analytics h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.6vw,54px);line-height:1.04;color:#fff;margin:0;max-width:15ch;letter-spacing:-.01em;}
.analytics h2 .g{color:#FBBF24;}
.an-actions p{color:#a7adb4;font-size:16px;max-width:44ch;margin:4px 0 22px;line-height:1.6;}
.an-btns{display:flex;gap:12px;flex-wrap:wrap;}
.analytics .btn.primary{background:linear-gradient(180deg,#FBBF24,#F59E0B) !important;color:#241a02 !important;border:0 !important;}
.an-ghost{background:transparent !important;border:1px solid rgba(255,255,255,.32) !important;color:#fff !important;}
.an-ghost:hover{background:rgba(255,255,255,.08) !important;}
.analytics .an-pills{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:72px !important;}
.an-pill{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:13px 30px;font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;transition:border-color .2s;}
.an-pill:hover{border-color:rgba(255,255,255,.55);}
.an-pill.gold{border-color:#FBBF24;}
.an-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:21px;flex:none;background:linear-gradient(145deg,#FBBF24,#F59E0B);color:#241a02;}
.an-ic.p3{background:#17171b;border:1px solid rgba(255,255,255,.18);color:#FBBF24;}
@media(max-width:600px){.an-pill{font-size:16px;padding:11px 22px;}.an-ic{width:44px;height:44px;font-size:19px;}}

/* ===== Footer social + legal ===== */
.site-footer .sf-social{display:flex;gap:10px;margin-top:14px;}
.site-footer .sf-social a{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:#cfc6b4;font-size:19px;transition:background .2s ease,color .2s ease,transform .2s ease;}
.site-footer .sf-social a:hover{background:#F5A81C;color:#241a02;transform:translateY(-2px);}
.site-footer .sf-legal{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.site-footer .sf-legal a{color:#8a7f68;font-size:12.5px;}
.site-footer .sf-legal a:hover{color:#FBBF24;}
.site-footer .sf-bottom{align-items:center;}

/* Warm honey-tinted shadow instead of black */
.brand{filter:drop-shadow(0 2px 3px rgba(150,95,10,.28)) drop-shadow(0 6px 14px rgba(150,95,10,.20)) !important;}
.site-footer .brand{filter:drop-shadow(0 2px 5px rgba(0,0,0,.4)) !important;}

/* Decorative "email in flight" background on the features section */
.feat-bg{position:relative;overflow:hidden;}
.feat-bg::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:url('/img/feat-bg.svg') center top/cover no-repeat;}
.feat-bg > .pub-wrap{position:relative;z-index:1;}

/* T a bit closer to the hexagon O */
.wm .wm-o{margin-right:-0.20em !important;}

/* Enlarge the accent Mail-bee above the wordmark */
.brand{padding-top:25px !important;}
.brand .logo{height:25px !important;top:-6px !important;}
.pub-nav .brand .logo{height:29px !important;}
.sidebar .brand .logo{height:25px !important;}
.auth-card .brand .logo{height:31px !important;}
.site-footer .brand .logo{height:22px !important;}

/* Slightly smaller accent bee */
.brand{padding-top:22px !important;}
.brand .logo{height:22px !important;top:-5px !important;}
.pub-nav .brand .logo{height:25px !important;}
.sidebar .brand .logo{height:22px !important;}
.auth-card .brand .logo{height:27px !important;}
.site-footer .brand .logo{height:19px !important;}

/* Hero: stop the highlight/text from being clipped at the edges + a touch more line spacing */
.hero{overflow:visible !important;}
.hero h1{line-height:1.42 !important;padding-bottom:.08em;}
.hero h1 mark{padding:0 .18em .06em !important;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* Analytics band: more breathing room from the top */
.analytics{padding-top:96px !important;}

/* FIX: kill any leftover gradient-text on "bees" (was rendering as a gold block) */
.brand .wm-b,.pub-nav .brand .wm-b,.auth-card .brand .wm-b{
  background:none !important;background-image:none !important;
  color:#B45309 !important;-webkit-text-fill-color:#B45309 !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;}
.site-footer .brand .wm-b,html[data-theme="dark"] .brand .wm-b{
  background:none !important;background-image:none !important;
  color:#FBBF24 !important;-webkit-text-fill-color:#FBBF24 !important;-webkit-background-clip:border-box !important;background-clip:border-box !important;}
/* Softer logo shadow so the small bee stays crisp */
.brand{filter:drop-shadow(0 1px 2px rgba(150,95,10,.22)) !important;}
.site-footer .brand{filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)) !important;}

/* FIX: the accent bee inherits the text colour (was white → invisible on white cards) */
.brand .logo{color:inherit !important;}

/* ===== Product mockup: light (matches the app) + multi-screen carousel ===== */
.shotcase .app{background:#fff;}
.shotcase .mk-side{background:#fff !important;border-right:1px solid #eef0f2 !important;color:#334155 !important;}
.shotcase .mk-side .mk-brand{color:#0e0e10 !important;}
.shotcase .mk-side .mk-nav a{color:#6b7280 !important;}
.shotcase .mk-side .mk-nav a.on{background:#FEF3C7 !important;color:#B45309 !important;}
.shotcase .mk-main{background:#fff;}
.shotcase .mk-h{color:#0e0e10;}
.shotcase .shots{position:relative;}
.shotcase .shot{display:none;animation:mk-fade .4s ease;}
.shotcase .shot.on{display:grid;grid-template-columns:180px 1fr;}
@media(max-width:640px){.shotcase .shot.on{grid-template-columns:64px 1fr;}}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}
.shotcase .dots{display:flex;gap:7px;justify-content:center;padding:14px;background:#fff;border-top:1px solid #eef0f2;}
.shotcase .dots button{width:8px;height:8px;border-radius:50%;border:0;background:#e2e2e2;cursor:pointer;padding:0;transition:.25s;}
.shotcase .dots button.on{background:#F59E0B;width:22px;border-radius:5px;}
/* tables */
.shotcase .mk-table{border:1px solid #eee;border-radius:12px;overflow:hidden;}
.shotcase .mk-tr{display:grid;grid-template-columns:2fr 1fr 1fr .8fr;gap:10px;padding:11px 14px;border-bottom:1px solid #f2f2f2;font-size:12.5px;color:#334155;align-items:center;}
.shotcase .mk-table.cols3 .mk-tr{grid-template-columns:1.6fr 1fr 1fr;}
.shotcase .mk-tr:last-child{border-bottom:0;}
.shotcase .mk-th{background:#faf9f6;color:#8a8a8a;font-size:11px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;}
.shotcase .mk-badge{font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:999px;width:max-content;}
.shotcase .mk-badge.green{background:#e7f7ee;color:#0a8a4a;}
.shotcase .mk-badge.amber{background:#fef3c7;color:#b45309;}
.shotcase .mk-badge.gray{background:#f1f1f3;color:#6b7280;}
.shotcase .mk-search{border:1px solid #eee;border-radius:10px;padding:9px 12px;color:#9a9a9a;font-size:12.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px;}

/* ===== Swarm burst (scroll-triggered on [data-swarm] sections) ===== */
.sb-swarm{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:6;}
.sb-bee{position:absolute;top:0;left:0;background:url('/img/bee.svg') center/contain no-repeat;
  will-change:transform,opacity;opacity:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));}

/* ===== Static content pages (/p/{slug}) ===== */
/* content page fills the viewport so no grey strip shows before the footer */
.pub-body{display:flex;flex-direction:column;}
.pub-body > .doc{flex:1 0 auto;}
.doc{background:var(--surface);}
.doc-head{position:relative;background:linear-gradient(180deg,#FFFDF6,var(--surface));border-bottom:1px solid var(--border);padding:70px 0 48px;}
.doc-head::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));}
html[data-theme="dark"] .doc-head{background:linear-gradient(180deg,#17130a,var(--surface));}
.doc-crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--text-faint);margin-bottom:20px;text-transform:none;}
.doc-crumb a{color:var(--text-muted);transition:color .15s;}
.doc-crumb a:hover{color:var(--accent);text-decoration:none;}
.doc-crumb i{font-size:14px;opacity:.55;}
.doc-head h1{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,5.2vw,56px);line-height:1.05;letter-spacing:-.015em;color:var(--text);margin:0;max-width:20ch;}
.doc-head .doc-sub{font-size:18.5px;color:var(--text-muted);margin:16px 0 0;max-width:60ch;line-height:1.55;}
.doc-head .doc-meta{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-faint);margin:16px 0 0;}
.pub-wrap.doc-wrap{padding:72px 32px 100px;}
.content-body{max-width:none;margin:0;color:var(--text);font-size:16.5px;line-height:1.75;}
.content-body > :first-child{margin-top:0;}
.content-body h2{font-family:var(--font-display);font-weight:600;text-align:left;font-size:clamp(23px,3vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--text);margin:40px 0 12px;}
.content-body h3{font-weight:700;font-size:19px;color:var(--text);margin:28px 0 8px;}
.content-body p{margin:0 0 18px;}
.content-body a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;}
.content-body a:hover{color:var(--accent-dark);}
.content-body ul,.content-body ol{margin:0 0 18px;padding-left:22px;}
.content-body li{margin:6px 0;padding-left:4px;}
.content-body ul li::marker{color:var(--gold-2);}
.content-body strong{color:var(--text);font-weight:700;}
.content-body img{max-width:100%;height:auto;border-radius:14px;border:1px solid var(--border);box-shadow:0 12px 34px rgba(20,20,30,.10);margin:22px 0;display:block;}
.content-body figure{margin:26px 0;}
.content-body figure img{margin:0;}
.content-body figcaption{font-size:13.5px;color:var(--text-faint);text-align:center;margin-top:10px;}
.content-body blockquote{margin:24px 0;padding:14px 20px;border-left:3px solid var(--gold-2);background:color-mix(in srgb,var(--gold-1) 10%,transparent);border-radius:0 10px 10px 0;color:var(--text-muted);font-style:italic;}
.content-body hr{border:0;border-top:1px solid var(--border);margin:34px 0;}
.content-body code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:.9em;}
.content-body table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px;}
.content-body th,.content-body td{border:1px solid var(--border);padding:9px 12px;text-align:left;}
.content-body th{background:var(--surface-2);font-weight:700;}
/* Editorial two-column: <div class="cols">…</div> lays children side by side */
.content-body .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;margin:26px 0;}
@media(max-width:640px){.content-body .cols{grid-template-columns:1fr;}}

/* ===== Contact form (on static pages) ===== */
.doc-contact{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;max-width:1000px;}
.doc-contact .content-body{max-width:none;}
.doc-contact .doc-form{margin:0;position:sticky;top:88px;}
@media(max-width:760px){.doc-contact{grid-template-columns:1fr;gap:28px;}.doc-contact .doc-form{position:static;}}
.doc-form{max-width:720px;margin:32px 0 0;}
.contact-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:0 10px 30px rgba(20,20,30,.06);}
.contact-form .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:560px){.contact-form .cf-row{grid-template-columns:1fr;}}
.contact-form .cf-field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.contact-form label{font-size:13px;font-weight:600;color:var(--text);}
.contact-form .cf-opt{color:var(--text-faint);font-weight:400;}
.contact-form input,.contact-form textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:11px 13px;font-size:14.5px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--gold-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-1) 30%,transparent);background:var(--surface);}
.contact-form textarea{resize:vertical;min-height:120px;}
.contact-form .btn.primary{padding:11px 22px;font-size:15px;}
.cf-alert{display:flex;align-items:center;gap:8px;padding:12px 15px;border-radius:10px;margin-bottom:18px;font-size:14px;}
.cf-alert.ok{background:#e7f7ee;color:#0a6b3a;border:1px solid #b6e6ca;}
.cf-alert.err{background:#fdecec;color:#a12a2a;border:1px solid #f3c4c4;}
html[data-theme="dark"] .cf-alert.ok{background:#0f2a1c;color:#6ee7a8;border-color:#1f5138;}
html[data-theme="dark"] .cf-alert.err{background:#2a1414;color:#fca5a5;border-color:#5a2a2a;}

/* ===== Footer newsletter sign-up ===== */
.site-footer .sf-newsletter{gap:10px;}
.site-footer .sf-nl-copy{color:#a99c83;font-size:12.5px;line-height:1.5;margin:0 0 4px;max-width:34ch;}
.site-footer .sf-nl-form{display:flex;flex-direction:column;gap:8px;}
.site-footer .sf-nl-row{display:flex;gap:8px;flex-wrap:wrap;}
.site-footer .sf-nl-row input[type=email]{flex:1;min-width:150px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:0 12px;height:38px;color:#fff;font-size:13.5px;outline:none;transition:border-color .15s,background .15s;}
.site-footer .sf-nl-row input[type=email]::placeholder{color:#8a7f68;}
.site-footer .sf-nl-row input[type=email]:focus{border-color:var(--gold-1);background:rgba(255,255,255,.1);}
.site-footer .sf-nl-row .btn.primary{height:38px;white-space:nowrap;align-self:auto;}
.site-footer .sf-nl-msg{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;}
.site-footer .sf-nl-msg.ok{color:#4ade80;}
.site-footer .sf-nl-msg.err{color:#fca5a5;}

/* ============================================================
   FINAL authoritative brand lockup — supersedes every earlier
   accent-bee block. High specificity per context so the
   .auth-card / .sidebar overrides can't reintroduce overlap.
   Bee hovers in reserved top space (em-based), clear of letters.
   ============================================================ */
.brand,.sidebar .brand,.pub-nav .brand,.auth-card .brand,.site-footer .brand,.aw-side .aw-brand{
  display:inline-flex !important;flex-direction:row !important;align-items:flex-end !important;
  position:relative !important;width:max-content !important;max-width:100%;
  padding-top:1.42em !important;gap:0 !important;line-height:1 !important;}
.brand .wm,.sidebar .brand .wm,.pub-nav .brand .wm,.auth-card .brand .wm,.site-footer .brand .wm,.aw-side .aw-brand .wm{
  display:inline-flex !important;align-items:baseline !important;margin:0 !important;overflow:visible !important;}
.brand .logo,.sidebar .brand .logo,.pub-nav .brand .logo,.auth-card .brand .logo,.site-footer .brand .logo,.aw-side .aw-brand .logo{
  position:absolute !important;top:0 !important;right:.38em !important;left:auto !important;bottom:auto !important;
  height:1.32em !important;width:auto !important;margin:0 !important;transform:rotate(-6deg);
  transform-origin:center;background:transparent !important;color:inherit !important;}
.brand .logo svg,.auth-card .brand .logo svg,.aw-side .aw-brand .logo svg{height:100% !important;width:auto !important;}

/* ===== Auth pages background — refined "aurora" mesh (professional) ===== */
.auth-wrap{position:relative;overflow:hidden;
  background:linear-gradient(165deg,#FDFCF9 0%,#FBF7EF 55%,#FaF4E6 100%) !important;}
html[data-theme="dark"] .auth-wrap{
  background:linear-gradient(165deg,#12100b 0%,#0e0d0a 55%,#141009 100%) !important;}
/* barely-there honeycomb texture for brand grain */
.auth-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='124' viewBox='0 0 72 124'%3E%3Cg fill='none' stroke='%23C99A2E' stroke-width='1'%3E%3Cpath d='M36 0 L72 21 V62 L36 83 L0 62 V21 Z'/%3E%3Cpath d='M36 83 L72 104 M36 83 L0 104'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 124px;}
html[data-theme="dark"] .auth-wrap::before{opacity:.08;}
/* soft drifting gradient blobs */
.auth-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.ab-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;will-change:transform;}
.ab-blob.ab1{width:44vw;height:44vw;max-width:620px;max-height:620px;top:-14%;left:-10%;
  background:radial-gradient(circle at 50% 50%,rgba(251,191,36,.55),rgba(251,191,36,0) 70%);
  animation:ab-float1 22s ease-in-out infinite;}
.ab-blob.ab2{width:40vw;height:40vw;max-width:560px;max-height:560px;bottom:-16%;right:-8%;
  background:radial-gradient(circle at 50% 50%,rgba(245,158,11,.42),rgba(245,158,11,0) 70%);
  animation:ab-float2 27s ease-in-out infinite;}
.ab-blob.ab3{width:30vw;height:30vw;max-width:420px;max-height:420px;top:38%;left:55%;opacity:.35;
  background:radial-gradient(circle at 50% 50%,rgba(255,224,138,.6),rgba(255,224,138,0) 70%);
  animation:ab-float1 33s ease-in-out infinite reverse;}
html[data-theme="dark"] .ab-blob{opacity:.22;}
@keyframes ab-float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,30px) scale(1.12);}}
@keyframes ab-float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-46px,-26px) scale(1.1);}}
.auth-card{position:relative;z-index:2;box-shadow:0 24px 70px -28px rgba(120,80,10,.4),0 4px 14px rgba(20,20,30,.06) !important;}
@media(prefers-reduced-motion:reduce){.ab-blob{animation:none;}}

/* ===== About page: value cards + lead + CTA ===== */
.content-body .lead-p{font-size:19px;color:var(--text);line-height:1.7;margin-bottom:26px;}
.content-body .value-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0 10px;}
@media(max-width:600px){.content-body .value-grid{grid-template-columns:1fr;}}
.content-body .value-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 20px 18px;box-shadow:0 6px 18px rgba(20,20,30,.04);}
.content-body .value-card .vc-ic{display:inline-flex;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--gold-1) 20%,transparent);color:var(--gold-3);font-size:22px;margin-bottom:12px;}
.content-body .value-card h3{margin:0 0 6px;font-size:17px;}
.content-body .value-card p{margin:0;font-size:14.5px;color:var(--text-muted);line-height:1.6;}
.content-body .doc-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;}

/* ===== Final CTA band — simple animated honey glow ===== */
.cta-band{position:relative;overflow:hidden;}
.cta-band .pub-wrap{position:relative;z-index:1;}
.cta-band::before,.cta-band::after{content:"";position:absolute;border-radius:50%;filter:blur(72px);pointer-events:none;z-index:0;will-change:transform;}
.cta-band::before{width:520px;height:520px;top:-46%;left:-4%;opacity:.5;
  background:radial-gradient(circle,rgba(251,191,36,.38),rgba(251,191,36,0) 70%);animation:cta-float1 20s ease-in-out infinite;}
.cta-band::after{width:460px;height:460px;bottom:-50%;right:-4%;opacity:.42;
  background:radial-gradient(circle,rgba(245,158,11,.3),rgba(245,158,11,0) 70%);animation:cta-float2 26s ease-in-out infinite;}
html[data-theme="dark"] .cta-band::before{opacity:.24;}html[data-theme="dark"] .cta-band::after{opacity:.2;}
@keyframes cta-float1{0%,100%{transform:translate(0,0);}50%{transform:translate(44px,28px);}}
@keyframes cta-float2{0%,100%{transform:translate(0,0);}50%{transform:translate(-42px,-24px);}}
@media(prefers-reduced-motion:reduce){.cta-band::before,.cta-band::after{animation:none;}}

/* ===== Feature strip (replaces the scrolling marquee) ===== */
.feat-strip{background:#0e0e10;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);}
.feat-strip .fs-wrap{max-width:1000px;margin:0 auto;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding:16px 20px;}
.feat-strip .fs-item{display:flex;align-items:center;gap:11px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:6px 38px;position:relative;}
.feat-strip .fs-item:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);height:22px;width:1px;background:rgba(255,255,255,.14);}
.feat-strip .fs-item i{font-size:23px;color:var(--gold-1);}
@media(max-width:560px){.feat-strip .fs-item{padding:6px 18px;font-size:13.5px;gap:8px;}.feat-strip .fs-item i{font-size:20px;}}

/* ===== Never underline buttons or icon links ===== */
.btn,.btn:hover,.content-body a.btn,.doc-cta .btn{text-decoration:none !important;}
.site-footer .sf-social a,.site-footer .sf-social a:hover,.pub-nav a:hover,.feat-strip a:hover{text-decoration:none !important;}

/* ===== Wider About-style pages (value cards fill the page) ===== */
.content-body:has(.value-grid){max-width:1040px;}
.content-body:has(.value-grid) > p,.content-body:has(.value-grid) > h2{max-width:none;}

/* Footer sits flush against the content (removes the grey gap strip) */
.site-footer{margin-top:0 !important;}

/* Feature strip hover micro-interaction */
.feat-strip .fs-item{transition:transform .22s ease;cursor:default;}
.feat-strip .fs-item i{transition:transform .28s cubic-bezier(.34,1.56,.64,1),color .2s ease;}
.feat-strip .fs-item span{transition:color .2s ease;}
.feat-strip .fs-item:hover{transform:translateY(-3px);}
.feat-strip .fs-item:hover i{transform:scale(1.28) translateY(-2px) rotate(-6deg);color:#FDE68A;}
.feat-strip .fs-item:hover span{color:var(--gold-1);}

/* Sticky footer on public pages: push footer to the viewport bottom on short pages */
.pub-shell{display:flex;flex-direction:column;min-height:100vh;}
.pub-shell .pub-body{flex:1 0 auto;}
.pub-shell .site-footer{flex-shrink:0;}

/* ===== Use-cases grid ===== */
.usecases .uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.usecases .uc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.usecases .uc-grid{grid-template-columns:1fr;}}
.uc-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.uc-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,20,30,.09);border-color:var(--gold-2);}
.uc-card .uc-ic{display:inline-flex;width:48px;height:48px;border-radius:13px;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--gold-1) 20%,transparent);color:var(--gold-3);font-size:24px;margin-bottom:14px;}
.uc-card h3{margin:0 0 6px;font-size:17px;color:var(--text);}
.uc-card p{margin:0;font-size:14px;color:var(--text-muted);line-height:1.6;}

/* ===== Developer API band ===== */
.api-band{background:#0e0e10;color:#fff;padding:72px 0;}
.api-band .api-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:46px;align-items:center;}
@media(max-width:860px){.api-band .api-grid{grid-template-columns:1fr;gap:28px;}}
.api-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-1);background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.25);border-radius:999px;padding:6px 13px;}
.api-copy h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,40px);line-height:1.08;color:#fff;margin:16px 0 12px;}
.api-copy > p{color:#b9b09a;font-size:16px;line-height:1.7;margin:0 0 18px;max-width:46ch;}
.api-list{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:9px;}
.api-list li{display:flex;align-items:center;gap:10px;color:#e8e2d4;font-size:15px;}
.api-list li i{color:#34d399;font-size:18px;}
.api-code{background:#0a0a0c;border:1px solid #262019;border-radius:14px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
.ac-bar{display:flex;align-items:center;gap:7px;padding:12px 14px;background:#14110c;border-bottom:1px solid #262019;}
.ac-bar i{width:11px;height:11px;border-radius:50%;background:#3a342a;}
.ac-bar i:first-child{background:#ff5f57;}.ac-bar i:nth-child(2){background:#febc2e;}.ac-bar i:nth-child(3){background:#28c840;}
.ac-bar span{margin-left:10px;font-size:12px;color:#8a8270;font-family:ui-monospace,Consolas,monospace;}
.api-code pre{margin:0;padding:18px 20px;overflow-x:auto;}
.api-code code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12.5px;line-height:1.75;color:#d9d3c4;white-space:pre;display:block;}
.api-code .c-fn{color:#FBBF24;}.api-code .c-str{color:#7ee0a6;}.api-code .c-key{color:#f0a94b;}

/* ===== Analytics journey pipeline (replaces the pills row) ===== */
.analytics .an-flow{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;gap:0 6px;margin-top:72px !important;}
.af-step{display:flex;flex-direction:column;align-items:center;gap:11px;min-width:78px;}
.af-ic{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;
  border:1.5px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);transition:transform .2s ease,box-shadow .2s ease;}
.af-step:hover .af-ic{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35);}
.af-lbl{font-size:14px;font-weight:600;color:#e8e2d4;letter-spacing:.01em;}
.af-step.on .af-ic{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));border-color:transparent;color:#1a1300;
  box-shadow:0 8px 26px rgba(245,158,11,.42);}
.af-step.on .af-lbl{color:var(--gold-1);}
.af-line{flex:1 1 34px;max-width:70px;min-width:24px;height:2px;margin-top:27px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.16);border-radius:2px;}
.af-line::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-1),transparent);animation:af-pulse 2.6s linear infinite;}
.af-line:nth-of-type(4)::after{animation-delay:.65s;}
.af-line:nth-of-type(6)::after{animation-delay:1.3s;}
.af-line:nth-of-type(8)::after{animation-delay:1.95s;}
@keyframes af-pulse{0%{left:-40%;}100%{left:120%;}}
@media(prefers-reduced-motion:reduce){.af-line::after{animation:none;}}
@media(max-width:560px){.af-ic{width:46px;height:46px;font-size:20px;}.af-lbl{font-size:12.5px;}.af-line{max-width:34px;margin-top:22px;}.af-step{min-width:60px;}}

/* Footer newsletter: keep the Subscribe button beside the input (one line) */
.site-footer .sf-nl-row{flex-wrap:nowrap !important;}
.site-footer .sf-nl-row input[type=email]{min-width:0 !important;}
.site-footer .sf-nl-row .btn.primary{flex-shrink:0;}

/* Footer newsletter: icon-only Subscribe button (square) */
.site-footer .sf-nl-btn{width:38px;min-width:38px;padding:0 !important;justify-content:center;flex-shrink:0;}
.site-footer .sf-nl-btn i{font-size:18px;}

/* ===== Big showcase cards (text + media) ===== */
.showcase .sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:940px){.showcase .sc-grid{grid-template-columns:1fr;}}
.sc-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;
  display:grid;grid-template-columns:1fr 0.82fr;gap:18px;align-items:center;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;}
@media(max-width:560px){.sc-card{grid-template-columns:1fr;padding:22px;}}
.sc-card:hover{box-shadow:0 20px 46px rgba(20,20,30,.10);transform:translateY(-3px);border-color:color-mix(in srgb,var(--gold-2) 40%,var(--border));}
.sc-ic{display:inline-flex;width:46px;height:46px;border-radius:13px;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--gold-1) 20%,transparent);color:var(--gold-3);font-size:23px;margin-bottom:14px;}
.sc-text h3{font-size:20px;margin:0 0 8px;color:var(--text);}
.sc-text > p{color:var(--text-muted);font-size:14.5px;line-height:1.6;margin:0 0 16px;}
.sc-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px;}
.sc-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--text);line-height:1.45;}
.sc-list li i{color:var(--gold-2);font-size:18px;flex-shrink:0;margin-top:1px;}
.sc-link{display:inline-flex;align-items:center;gap:11px;font-weight:700;color:var(--text);font-size:14.5px;}
.sc-link:hover{text-decoration:none;color:var(--gold-3);}
.sc-arrow{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold-1);color:#1a1300;transition:transform .2s ease;}
.sc-link:hover .sc-arrow{transform:translateX(4px);}
.sc-media img{width:100%;height:auto;border-radius:14px;display:block;}
@media(max-width:560px){.sc-media{order:-1;}}

/* Raise the hero trail (and bee) so it clears the headline after reducing hero padding */
.hero-flight{transform:translateY(-48px);}
@media(max-width:760px){.hero-flight{transform:translateY(-30px);}}

/* ===== Mobile footer: single column so the newsletter input isn't squished ===== */
@media(max-width:600px){
  .site-footer .sf-grid{grid-template-columns:1fr !important;gap:26px;padding:26px 22px 14px;}
  .site-footer .sf-bottom{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 22px 18px;}
  .site-footer .sf-legal{flex-wrap:wrap;gap:14px;}
  .site-footer .sf-nl-row input[type=email]{min-width:0;}
  .site-footer .sf-brand p{max-width:none;}
}

/* ===== Mobile nav: keep the wordmark on one line, ease crowding ===== */
.brand .wm,.brand .wm-s,.brand .wm-b{white-space:nowrap !important;}
@media(max-width:600px){
  .pub-nav{padding:12px 14px;}
  .pub-nav .brand{flex-shrink:0;font-size:18px;}
  .pub-nav .brand .logo{height:30px !important;}
  .pub-nav .links{gap:6px;}
  .pub-nav .links .btn.sm{padding:6px 10px;font-size:12.5px;}
}

/* ===== Public top-nav menu ===== */
.pub-menu{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:26px;}
.pub-menu a{color:var(--text-muted);font-weight:600;font-size:14.5px;white-space:nowrap;}
.pub-menu a:hover{color:var(--text);text-decoration:none;}
.pub-nav .links{margin-left:0;}
#features,#usecases,#api{scroll-margin-top:84px;}
@media(max-width:900px){.pub-menu{display:none;}}

/* ===== Dashboard mockup: fit on mobile (no horizontal overflow) ===== */
.appwin,.aw-body,.aw-main,.aw-metrics,.aw-grid,.aw-card,.aw-metric{min-width:0;}
.appwin{max-width:100%;}
@media(max-width:640px){
  .aw-body{grid-template-columns:52px 1fr;}
  .aw-metrics{grid-template-columns:1fr 1fr;gap:8px;}
  .aw-grid{grid-template-columns:1fr;}
  .aw-main{padding:14px 14px 16px;}
  .aw-side{padding:14px 5px;}
  .aw-metric{padding:11px 12px;}
  .aw-metric .v{font-size:20px;}
  .aw-cta{display:none;}
  .aw-title{font-size:18px;}
  .aw-url{font-size:10.5px;padding:4px 8px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}

/* ===== Mobile hamburger menu ===== */
.pub-burger{display:none;background:transparent;border:0;color:var(--text);font-size:24px;cursor:pointer;padding:6px;line-height:1;}
.pub-mobile{display:none;flex-direction:column;gap:2px;padding:12px 20px 18px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:60px;z-index:19;}
.pub-mobile.open{display:flex;}
.pub-mobile a{padding:12px 6px;color:var(--text);font-weight:600;font-size:16px;border-bottom:1px solid var(--border);}
.pub-mobile a:hover{color:var(--accent);text-decoration:none;}
.pub-mobile .pm-actions{display:flex;gap:10px;margin-top:12px;}
.pub-mobile .pm-actions .btn{flex:1;justify-content:center;}
@media(max-width:900px){
  .pub-burger{display:inline-flex;}
  .pub-nav .links .btn.ghost.sm[onclick*="Theme"]{display:inline-flex;}
  .pub-nav .links a{display:none;}
}
@media(max-width:900px) and (min-width:641px){}

/* ===== Cookie consent banner ===== */
.cookie-bar{position:fixed;inset:auto;left:16px;right:16px;bottom:16px;z-index:2147483647;width:auto;max-width:560px;margin:0 auto;pointer-events:auto;overflow:visible;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:#0e0e10;color:#e8e2d4;border:1px solid rgba(255,255,255,.12);border-radius:14px;
  padding:14px 18px;box-shadow:0 18px 50px -14px rgba(0,0,0,.5);font-size:13.5px;line-height:1.5;}
.cookie-bar:popover-open{display:flex;}
.cookie-bar:not(:popover-open){display:none;}
.cookie-bar button{position:relative;z-index:1;pointer-events:auto;}
@media(max-width:640px){.cookie-bar{left:12px;right:12px;bottom:90px;}}
.cookie-bar a{color:var(--gold-1);font-weight:600;}
.cookie-bar .cookie-actions{display:flex;gap:8px;flex-shrink:0;}
.cookie-bar .btn.ghost{color:#cfc6b4;border-color:rgba(255,255,255,.18);}
.cookie-bar .btn.ghost:hover{background:rgba(255,255,255,.08);color:#fff;}

/* ===== FAQ accordion ===== */
.faq .faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:2px 20px;transition:border-color .15s,box-shadow .15s;}
.faq-item[open]{border-color:color-mix(in srgb,var(--gold-2) 40%,var(--border));box-shadow:0 8px 24px rgba(20,20,30,.06);}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 0;font-weight:600;font-size:16.5px;color:var(--text);}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary i{flex-shrink:0;font-size:20px;color:var(--gold-2);transition:transform .2s ease;}
.faq-item[open] summary i{transform:rotate(45deg);}
.faq-item p{margin:0 0 18px;color:var(--text-muted);font-size:15px;line-height:1.65;}

/* Cookie banner close (X) */
.cookie-bar{padding-right:40px;}
.cookie-x{position:absolute;top:8px;right:8px;width:26px;height:26px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:0;border-radius:8px;color:#cfc6b4;cursor:pointer;font-size:16px;line-height:1;
  transition:background .15s,color .15s;pointer-events:auto;z-index:2;}
.cookie-x:hover{background:rgba(255,255,255,.16);color:#fff;}

/* ===== Pricing page ===== */
.pricing-page .price{gap:0;}
.pricing-page .price h3{font-size:19px;margin:0 0 6px;}
.pricing-page .pp-desc{margin:0 0 14px;color:var(--text-muted);font-size:13.5px;line-height:1.5;min-height:38px;}
.pricing-page .price .amt{font-size:40px;margin:4px 0 18px;}
.pricing-page .pp-cta{margin-bottom:20px;}
.pricing-page .price ul{margin:0;}
.pricing-page .price li strong{color:var(--text);font-weight:700;}
.pp-included{max-width:900px;margin:52px auto 0;text-align:center;}
.pp-included h3{font-size:18px;color:var(--text);margin:0 0 20px;}
.pp-inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left;}
@media(max-width:720px){.pp-inc-grid{grid-template-columns:1fr;}}
.pp-inc-grid > div{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;font-size:14px;color:var(--text);font-weight:500;}
.pp-inc-grid i{font-size:20px;color:var(--gold-2);flex-shrink:0;}
.pp-contact{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:44px auto 0;
  background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:18px 24px;max-width:640px;}
.pp-contact span{color:var(--text-muted);font-size:15px;}