/* Markena visual theme
   Canonical values are adapted from the supplied Markena Design System.
   This file intentionally sits after styles.css so product behaviour and
   layout remain untouched while every surface shares one visual language. */

:root {
  /* Brand palette */
  --sky-50:#eaf7ff;
  --sky-100:#d0eeff;
  --sky-200:#a5dfff;
  --sky-300:#6bccff;
  --sky-400:#2db8fe;
  --sky-500:#03acfe;
  --sky-600:#0290da;
  --sky-700:#0272ac;
  --cobalt-500:#3f7fdb;
  --violet-500:#876fe3;
  --ink-900:#07133f;
  --ink-800:#101e52;
  --ink-700:#1e2e68;
  --ink-600:#3b4c82;
  --ink-500:#5e6e9c;
  --ink-400:#8794b5;
  --ink-300:#b2bcd2;
  --ink-200:#d5dce9;
  --ink-100:#e9eef6;
  --ink-50:#f4f7fc;
  --glow-500:#4fd8fa;
  --spark-500:#fc8929;
  --leaf-500:#5cc845;
  --alarm-500:#e2483a;

  /* Existing app aliases */
  --blue:var(--sky-500);
  --blue-dark:var(--sky-600);
  --navy:var(--ink-900);
  --ink:var(--ink-700);
  --muted:var(--ink-500);
  --faint:var(--ink-400);
  --line:var(--ink-200);
  --line-soft:var(--ink-100);
  --bg:var(--ink-50);
  --card:#fff;
  --green:var(--leaf-500);
  --orange:var(--spark-500);
  --orange-dark:#f0741b;
  --red:var(--alarm-500);
  --purple:var(--violet-500);

  --font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --font-head:"Outfit",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --gradient-scarf:linear-gradient(100deg,var(--sky-500),var(--cobalt-500) 48%,var(--violet-500));
  --radius-control:14px;
  --radius-card:20px;
  --radius-sheet:28px;
  --shadow-xs:0 1px 2px rgba(7,19,63,.06);
  --shadow-sm:0 2px 6px rgba(7,19,63,.07),0 1px 2px rgba(7,19,63,.04);
  --shadow-md:0 6px 18px rgba(7,19,63,.09),0 2px 4px rgba(7,19,63,.04);
  --shadow-lg:0 16px 40px rgba(7,19,63,.12),0 4px 10px rgba(7,19,63,.05);
  --shadow-xl:0 32px 72px rgba(7,19,63,.16);
  --shadow-brand:0 8px 20px rgba(3,172,254,.32);
  --ring-focus:0 0 0 3px rgba(45,184,254,.42);
  --ease-standard:cubic-bezier(.2,.8,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

html { color-scheme:light; }
body {
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.45;
}
::selection { background:var(--sky-200); color:var(--ink-900); }
h1,h2,h3,h4 { color:var(--navy); letter-spacing:-.01em; text-wrap:balance; }
p { text-wrap:pretty; }
code,pre,.copy-code,.integration-metrics b,.mk-stat-num,.mk-worth-price,
.mk-worth-total-num,.mk-worth-price-big { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

:focus-visible,
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:none !important;
  box-shadow:var(--ring-focus) !important;
}

/* Core surfaces */
.card,.feature-card,.mk-agent,.mk-ind,.mk-price,.mk-faq,.mk-stats,
.integration-hero,.integration-table-wrap,.rich-editor-wrap,.doc-table-wrap {
  border-color:var(--line);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-sm);
}
.card { padding:24px; }

/* Super Admin support desk -------------------------------------------------
   Ticket rows are intentionally cards rather than a dense admin table: plan
   priority, ownership and freshness should be scannable before any text is
   read. */
.sa-support-heading{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:4px 2px 2px}
.sa-support-eyebrow,.sa-ticket-detail-kicker{font-size:10px;letter-spacing:.14em;font-weight:800;color:#03acfe}
.sa-support-title{font-family:var(--font-head);font-size:25px;line-height:1.15;font-weight:800;color:var(--ink);margin-top:4px}
.sa-support-subtitle{font-size:12.5px;color:var(--muted);margin-top:6px}
.sa-support-refresh{border-radius:12px!important;padding:10px 14px!important;background:#fff!important;box-shadow:0 5px 18px rgba(7,19,63,.06)}
.sa-support-filters{display:grid;grid-template-columns:1fr 1fr;gap:14px;background:rgba(255,255,255,.72);border:1px solid #e4eaf4;border-radius:16px;padding:14px 16px;box-shadow:0 8px 28px rgba(16,34,76,.04)}
.sa-support-filter-group{display:flex;align-items:center;gap:12px;min-width:0}
.sa-support-filter-label{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.sa-support-pills{display:flex;gap:5px;flex-wrap:wrap}
.sa-support-pill{appearance:none;border:0;background:transparent;border-radius:9px;padding:7px 10px;color:#73809e;font:700 11.5px var(--font-body);cursor:pointer;transition:.18s ease;white-space:nowrap}
.sa-support-pill:hover{background:#f1f6fd;color:#273b6d}.sa-support-pill.is-active{background:#07133f;color:#fff;box-shadow:0 5px 12px rgba(7,19,63,.14)}
.sa-support-pill span{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-inline-start:6px;padding:0 5px;border-radius:20px;background:rgba(112,128,163,.12);font-size:9.5px}
.sa-support-pill.is-active span{background:rgba(255,255,255,.18)}.sa-support-pill.is-priority:not(.is-active){color:#d85d16;background:#fff4ed}
.sa-ticket-list{display:flex;flex-direction:column;gap:10px}
.sa-ticket-row{position:relative;width:100%;display:grid;grid-template-columns:48px minmax(220px,1fr) minmax(200px,.75fr) 86px minmax(155px,.55fr) 24px;align-items:center;gap:16px;text-align:start;background:#fff;border:1px solid #e2e9f3;border-radius:17px;padding:16px 18px 16px 21px;color:var(--ink);font-family:var(--font-body);cursor:pointer;overflow:hidden;box-shadow:0 7px 24px rgba(15,31,68,.045);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.sa-ticket-row:hover{transform:translateY(-2px);border-color:#bdddf2;box-shadow:0 13px 32px rgba(15,31,68,.09)}
.sa-ticket-row:focus-visible{outline:3px solid rgba(3,172,254,.24);outline-offset:2px}
.sa-ticket-priority-bar{position:absolute;inset-block:0;inset-inline-start:0;width:5px;background:#b8c5d8}.sa-ticket-row.queue-enhanced .sa-ticket-priority-bar{background:#876fe3}.sa-ticket-row.queue-priority .sa-ticket-priority-bar{background:linear-gradient(#ff9a4a,#f05b32)}
.sa-ticket-avatar{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(145deg,#e9f7ff,#e8edff);color:#1768a8;font-size:12px;font-weight:800;letter-spacing:.04em;box-shadow:inset 0 0 0 1px rgba(3,172,254,.13)}
.queue-enhanced .sa-ticket-avatar{background:linear-gradient(145deg,#f1edff,#e9e5ff);color:#6d55c7}.queue-priority .sa-ticket-avatar{background:linear-gradient(145deg,#fff3e9,#ffe4d8);color:#d85d16}
.sa-ticket-main{min-width:0;display:flex;flex-direction:column;gap:5px}.sa-ticket-subject{display:flex;align-items:center;gap:8px;min-width:0;font-family:var(--font-head);font-size:14.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-ticket-workspace{font-size:11.5px;font-weight:650;color:#53627e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sa-ticket-workspace span{color:#9aa5ba;font-weight:500}
.sa-ticket-blocking{font:800 8.5px var(--font-body);letter-spacing:.06em;color:#d33b32;background:#fff0ef;border-radius:6px;padding:4px 6px}
.sa-ticket-tags{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.sa-ticket-message-count{display:flex;align-items:center;gap:6px;color:#8591a8}.sa-ticket-message-count small,.sa-ticket-updated small{font-size:9.5px;color:#a0aabd}
.sa-ticket-bubble{min-width:26px;height:26px;padding:0 7px;display:grid;place-items:center;border-radius:9px;background:#f2f6fb;color:#25375f;font-size:11px;font-weight:800}
.sa-ticket-updated{display:flex;flex-direction:column;gap:3px;text-align:end;white-space:nowrap}.sa-ticket-updated strong{font-size:11.5px;color:#42506c}.sa-ticket-arrow{font-size:17px;color:#bac5d6;transition:transform .18s ease}.sa-ticket-row:hover .sa-ticket-arrow{color:#03acfe;transform:translateX(3px)}
.sa-ticket-empty{min-height:150px;border:1px dashed #cad5e4;border-radius:17px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;gap:13px;color:#53627e}.sa-ticket-empty-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#eaf9ef;color:#43a95a;font-size:19px;font-weight:800}.sa-ticket-empty strong{font-size:14px}.sa-ticket-empty p{font-size:11.5px;color:var(--faint);margin:4px 0 0}
.sa-ticket-detail-toolbar{display:flex;align-items:center;gap:10px}.sa-ticket-detail-head{display:flex;align-items:center;gap:15px;background:linear-gradient(120deg,#fff 60%,#f2f9ff);border-color:#dce8f3}.sa-ticket-avatar-lg{width:54px;height:54px;border-radius:16px;flex:none}.sa-ticket-detail-copy{min-width:0}.sa-ticket-detail-title{font-family:var(--font-head);font-weight:800;font-size:20px;color:var(--ink);margin-top:3px}.sa-ticket-workspace-line{font-size:11.5px;color:var(--muted);margin-top:5px}.sa-ticket-detail-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sa-ticket-message{display:flex;gap:11px;max-width:88%}.sa-ticket-message.is-staff{margin-inline-start:auto;flex-direction:row-reverse}.sa-ticket-message-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:none;background:#edf2f8;color:#52627f;font-size:9.5px;font-weight:800}.sa-ticket-message.is-staff .sa-ticket-message-avatar{background:#e6f5ff;color:#078acb}.sa-ticket-message-body{flex:1;min-width:180px;background:#fff;border:1px solid #e3eaf3;border-radius:15px 15px 15px 4px;padding:13px 15px;box-shadow:0 6px 20px rgba(15,31,68,.04)}.sa-ticket-message.is-staff .sa-ticket-message-body{background:#f0f8ff;border-color:#d4eaf8;border-radius:15px 15px 4px 15px}.sa-ticket-message-head{display:flex;align-items:center;gap:7px;font-size:11.5px}.sa-ticket-message-text{font-size:12.5px;line-height:1.7;white-space:pre-wrap;margin-top:7px;color:#33425f}
.sa-ticket-composer{display:flex;flex-direction:column;gap:11px;border-color:#d8e5f0;box-shadow:0 10px 30px rgba(15,31,68,.05)}.sa-ticket-composer-hint{font-size:10.5px;color:var(--faint);margin-top:3px}

/* Long-form CMS AI writer */
.cms-body-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.cms-word-note{font-size:10px;color:var(--faint);font-weight:650;margin-top:3px}.cms-ai-button{padding:8px 12px!important;font-size:11px!important;background:linear-gradient(110deg,#03acfe,#6c75e6)!important;box-shadow:0 7px 18px rgba(45,121,222,.2)!important}
.modal:has(.cms-ai-dialog){width:min(760px,96vw)}.cms-ai-dialog{display:flex;flex-direction:column;gap:16px}.cms-ai-head{display:flex;align-items:center;gap:13px;padding-bottom:14px;border-bottom:1px solid #e8edf5}.cms-ai-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;font-size:20px;background:linear-gradient(145deg,#03acfe,#7b6be0);box-shadow:0 9px 22px rgba(63,113,218,.24)}.cms-ai-kicker{font-size:9px;letter-spacing:.13em;font-weight:800;color:#6b69dc}.cms-ai-title{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--ink);margin-top:2px}.cms-ai-subtitle{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}.cms-ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}.cms-ai-check{display:flex;align-items:flex-start;gap:10px;padding:12px 13px;border:1px solid #e3eaf3;background:#f8faff;border-radius:12px;cursor:pointer}.cms-ai-check input{margin-top:3px;accent-color:#03acfe}.cms-ai-check span{display:flex;flex-direction:column;gap:3px}.cms-ai-check strong{font-size:11.5px;color:#293a5c}.cms-ai-check small{font-size:10px;line-height:1.45;color:#8490a7}.cms-ai-status{min-height:20px;display:flex;align-items:center;gap:9px;font-size:11px;color:#65738e;line-height:1.5}.cms-ai-status .spinner{width:18px;height:18px;flex:none}.cms-ai-actions{display:flex;justify-content:flex-end;gap:9px;padding-top:3px}
@media(max-width:1100px){.sa-support-filters{grid-template-columns:1fr}.sa-ticket-row{grid-template-columns:44px minmax(180px,1fr) minmax(170px,.7fr) 70px 24px}.sa-ticket-updated{display:none}}
@media(max-width:760px){.sa-ticket-row{grid-template-columns:40px 1fr 20px;padding:14px 13px 14px 18px}.sa-ticket-tags,.sa-ticket-message-count,.sa-ticket-updated{display:none}.sa-support-filter-group{align-items:flex-start;flex-direction:column;gap:7px}.sa-ticket-message{max-width:100%}.sa-ticket-detail-head{align-items:flex-start;flex-wrap:wrap}.sa-ticket-detail-badges{justify-content:flex-start}.cms-ai-grid{grid-template-columns:1fr}.cms-ai-grid>[style*="grid-column"]{grid-column:1!important}.cms-body-heading{align-items:flex-start;flex-direction:column}.cms-ai-button{width:100%}}
.hoverable,.feature-card,.mk-agent,.mk-ind,.mk-price,.integration-row {
  transition:transform 220ms var(--ease-standard),box-shadow 220ms var(--ease-standard),border-color 220ms var(--ease-standard);
}
.hoverable:hover,.feature-card:hover,.mk-agent:hover,.mk-ind:hover,.mk-price:hover,.integration-row:hover {
  border-color:var(--sky-200) !important;
  box-shadow:var(--shadow-lg) !important;
  transform:translateY(-2px);
}
.kicker,.field-label,.footer-col-title,.mega-col-title {
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.chip { border-radius:999px; padding:5px 10px; }
.pill { padding:6px 12px; }

/* Controls */
.btn,.btn-ghost,.btn-amber,.btn-danger,.input,textarea.input,select.input,
.lang-btn,.lang-choice,.site-burger,.mobile-menu-btn,.rich-tool {
  border-radius:var(--radius-control);
  transition:background-color 150ms var(--ease-standard),border-color 150ms var(--ease-standard),
    box-shadow 150ms var(--ease-standard),color 150ms var(--ease-standard),transform 150ms var(--ease-standard);
}
.btn {
  background:var(--sky-500);
  box-shadow:var(--shadow-brand);
  font-weight:700;
}
.btn:hover { background:var(--sky-600); transform:translateY(-1px); }
.btn:active,.btn-ghost:active,.btn-amber:active,.btn-danger:active { transform:scale(.985); }
.btn:disabled,.btn-ghost:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn-lg { border-radius:var(--radius-control); box-shadow:var(--shadow-brand); }
.btn-sm { border-radius:12px; }
.btn-ghost {
  border-color:var(--ink-200);
  color:var(--ink-700);
  background:#fff;
}
.btn-ghost:hover { background:var(--ink-50); border-color:var(--ink-300); color:var(--ink-900); }
.btn-amber { background:var(--spark-500); color:var(--ink-900); }
.btn-danger { border-color:#fde0dc; color:var(--alarm-500); }
.input,textarea.input,select.input {
  min-height:44px;
  border-color:var(--ink-200);
  background:#fff;
  color:var(--ink-900);
  font-weight:500;
}
.input:hover { border-color:var(--ink-300); }
.input:focus { border-color:var(--sky-500); outline:none; box-shadow:var(--ring-focus); }
.toggle { box-shadow:inset 0 1px 3px rgba(7,19,63,.16); }

/* Feedback */
.modal-back { background:rgba(7,19,63,.42); backdrop-filter:blur(6px); }
.modal {
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius-sheet);
  padding:32px;
  box-shadow:var(--shadow-xl);
  animation:markena-rise 360ms var(--ease-out) both;
}
.toast { border-radius:var(--radius-control); box-shadow:var(--shadow-lg); animation:markena-rise 360ms var(--ease-out) both; }
.toast.ok { background:var(--ink-900); border-inline-start:4px solid var(--leaf-500); }
.toast.err { background:var(--ink-900); border-inline-start:4px solid var(--alarm-500); }
.spinner-dark { border-color:var(--sky-100); border-top-color:var(--sky-500); }

/* Product shell */
.app-grid { background:var(--bg); }
.sidebar {
  width:242px;
  background:#fff !important;
  border-color:var(--ink-200) !important;
  padding:18px 14px !important;
}
/* The section list is the part that scrolls. It must never scroll sideways:
   .sidebar-item:hover nudges the row 2px along, and a transform still counts
   towards scrollable overflow, so hovering any row used to raise a horizontal
   scrollbar — which ate 12px of height and clipped the rows at both ends. */
.sidebar-scroll {
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--ink-200) transparent;
  padding-inline-end:4px;
}
.sidebar-scroll::-webkit-scrollbar { width:6px; }
.sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
.sidebar-scroll::-webkit-scrollbar-thumb { background:var(--ink-200); border-radius:3px; }
.sidebar-scroll::-webkit-scrollbar-thumb:hover { background:var(--ink-300); }
/* Long labels ("Campaigns & Actions") shrink instead of pushing the row wider. */
.sidebar-item > span:not(:first-child) { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.markena-brand-lockup { display:flex; align-items:center; gap:10px; }
.markena-brand-icon {
  width:32px;
  height:32px;
  flex:none;
  display:block;
  border-radius:11px;
  object-fit:cover;
  box-shadow:0 5px 14px rgba(3,172,254,.24);
}
.markena-brand-icon-lg { width:38px; height:38px; border-radius:13px; }
.sidebar-item {
  min-height:38px;
  border-radius:12px;
  color:var(--ink-600);
  font-weight:600;
  transition:background 150ms var(--ease-standard),color 150ms var(--ease-standard),transform 150ms var(--ease-standard);
}
.sidebar-item:hover { background:var(--ink-50); color:var(--ink-900); transform:translateX(2px); }
html[dir="rtl"] .sidebar-item:hover { transform:translateX(-2px); }
.sidebar-item.active {
  background:var(--sky-50);
  color:var(--sky-700);
  box-shadow:inset 0 0 0 1px var(--sky-200);
}
.app-topbar {
  min-height:62px;
  background:rgba(255,255,255,.94) !important;
  border-color:var(--ink-200) !important;
  backdrop-filter:blur(12px) saturate(1.2);
}
.app-topbar-search { background:var(--ink-50) !important; border:1px solid var(--ink-100); border-radius:999px !important; }
.app-business-switcher { background:#fff !important; border-color:var(--ink-200) !important; border-radius:var(--radius-control) !important; }
.app-content { padding:32px !important; gap:24px !important; }
.app-content > * { width:100%; }

/* Public navigation */
.site-header {
  background:rgba(255,255,255,.94);
  border-color:rgba(213,220,233,.86);
  backdrop-filter:blur(12px) saturate(1.2);
}
.site-header.scrolled { box-shadow:var(--shadow-md); }
.site-header-inner { min-height:70px; }
.site-brand-name { font-size:20px; letter-spacing:-.02em; }
.site-nav-link,.site-signin { color:var(--ink-600); font-weight:600; }
.site-nav-link:hover,.site-signin:hover,.mega-btn.open { color:var(--ink-900); background:var(--ink-50); }
.site-nav-link.on { color:var(--sky-700); background:var(--sky-50); }
.site-cta {
  background:var(--sky-500);
  border-radius:var(--radius-control);
  box-shadow:var(--shadow-brand);
}
.site-cta:hover { background:var(--sky-600); box-shadow:0 12px 26px rgba(3,172,254,.38); }
.mega-panel,.lang-menu { border-color:var(--ink-200); border-radius:var(--radius-card); box-shadow:var(--shadow-lg); }
.mega-item,.lang-menu-item { border-radius:12px; }
.mega-item:hover,.lang-menu-item:hover { background:var(--ink-50); }
.mega-ico { background:var(--sky-50); color:var(--sky-700); border-radius:10px; }
.mega-promo { background:var(--sky-50); border-color:var(--sky-100); border-radius:var(--radius-control); }

/* Marketing pages */
.mk-section { padding-block:96px; }
.mk-section-tint { background:var(--ink-50); border-color:var(--ink-100); }
.mk-hero > img[aria-hidden="true"] { display:none; }
.mk-page-hero { background:#fff; }
.mk-page-hero-glow { display:none; }
.mk-eyebrow,.sec-head .kicker {
  color:var(--sky-700);
  background:var(--sky-50);
  border-color:var(--sky-100);
  box-shadow:none;
}
.mk-eyebrow-tag { background:#fff; color:var(--sky-700); }
.mk-h1 { font-size:clamp(42px,5.1vw,64px); line-height:1.04; letter-spacing:-.02em; }
.mk-h1 em { color:var(--sky-600); }
.mk-h2 { letter-spacing:-.02em; }
.mk-btn { border-radius:var(--radius-control); transition:transform 150ms var(--ease-standard),box-shadow 150ms var(--ease-standard),background 150ms var(--ease-standard); }
.mk-btn:hover { transform:translateY(-1px); }
.mk-btn:active { transform:scale(.985); }
.mk-btn-primary { background:var(--sky-500); box-shadow:var(--shadow-brand); }
.mk-btn-primary:hover { background:var(--sky-600); box-shadow:0 12px 26px rgba(3,172,254,.38); }
.mk-btn-dark { background:var(--ink-900); box-shadow:0 10px 26px rgba(7,19,63,.25); }
.mk-btn-amber { background:var(--spark-500); color:var(--ink-900); box-shadow:0 8px 20px rgba(252,137,41,.24); }
.mk-btn-quiet { border-color:var(--ink-200); }
.mk-shot { border-radius:var(--radius-card); border-color:var(--ink-200); box-shadow:var(--shadow-xl); }
.mk-shot-bar { background:var(--ink-50); border-color:var(--ink-100); }
.mk-shot-url { border-color:var(--ink-100); border-radius:10px; font-family:var(--font-mono); }
.mk-float-card { border-radius:var(--radius-control); border-color:var(--ink-200); box-shadow:var(--shadow-lg); }
.mk-channel { border-color:var(--ink-200); }
.mk-channel:hover { border-color:var(--sky-200); box-shadow:var(--shadow-md); }
.mk-tag { background:var(--sky-50) !important; color:var(--sky-700) !important; }
.mk-tick,.check-mark { background:#d6f5cb !important; color:#45a731 !important; }
.mk-agent-role { box-shadow:var(--shadow-sm); }
.mk-agent-photo { background:var(--sky-50); }
.mk-stat-num { color:var(--ink-900) !important; }
.mk-price-pop { border-color:var(--sky-300); box-shadow:0 20px 48px rgba(3,172,254,.15); }
.mk-price-badge { background:var(--spark-500); color:var(--ink-900); }
.mk-worth-us,.mk-cta {
  background:var(--ink-900);
  box-shadow:var(--shadow-xl);
}
.mk-cta-bg { display:none; }
.mk-cta { border-radius:var(--radius-sheet); }
.mk-faq.on { border-color:var(--sky-200); box-shadow:var(--shadow-md); }
.mk-faq-chev { background:var(--sky-50); color:var(--sky-700); }
.mk-cmp-scroll { border-radius:var(--radius-card); border-color:var(--ink-200); box-shadow:var(--shadow-sm); }
.mk-cmp .mk-cmp-us { background:var(--sky-50); border-color:var(--sky-100); }

/* Brand character */
.kena-hero,.markena-mascot {
  object-fit:contain !important;
  filter:drop-shadow(0 18px 14px rgba(3,172,254,.25));
  animation:markena-float 3.2s cubic-bezier(.45,0,.55,1) infinite !important;
}
.kena-hero { width:156px !important; height:auto !important; bottom:-58px !important; }

/* Docs, auth and prose */
.doc-hero { background:var(--ink-900) !important; }
.doc-nav-link { border-radius:12px; }
.doc-nav-link.on { background:var(--sky-50); color:var(--sky-700); border-color:var(--sky-500); }
/* Plain notes only. This file loads after styles.css, so a bare `.doc-note`
   here has the same specificity as `.doc-note-warn` and `.doc-note-tip` there
   and wins on order — which silently repainted every warning and every tip in
   the documentation the same blue as an ordinary aside. The whole point of
   those two is that they do not look like an ordinary aside. */
.doc-note:not(.doc-note-warn):not(.doc-note-tip) { background:var(--sky-50); border-color:var(--sky-500); }
.public-rich blockquote { background:var(--sky-50); border-color:var(--sky-100); border-inline-start-color:var(--sky-500); border-radius:0 14px 14px 0; }
.public-rich code { background:var(--ink-50); border-color:var(--ink-100); color:var(--cobalt-500); }
.public-rich pre,.copy-code { background:var(--ink-900); border-radius:var(--radius-control); }
.auth-divider span { background:#fff; }

/* Footer */
.site-footer { background:var(--ink-900); }
.site-footer::before { background:var(--gradient-scarf); height:4px; }
.footer-social a { border-radius:12px; }
.footer-social a:hover { background:rgba(3,172,254,.18); border-color:rgba(3,172,254,.5); }
.footer-wordmark { font-family:var(--font-head); color:rgba(255,255,255,.055); }

@keyframes markena-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes markena-rise { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

@media (max-width:980px) {
  .app-content { padding:20px 16px !important; }
  .sidebar { width:min(86vw,320px); }
}
@media (max-width:720px) {
  .mk-section { padding-block:64px; }
  .mk-hero > .mk-wrap { padding-block:48px 40px !important; }
  .mk-h1 { font-size:clamp(38px,11vw,48px); }
  .site-header-inner { min-height:62px; }
  .app-topbar { gap:8px !important; }
  .app-topbar > div:first-of-type { font-size:16px !important; white-space:nowrap; }
  .modal { border-radius:20px; padding:24px; }
  .kena-hero { width:106px !important; }
}
@media (prefers-reduced-motion:reduce) {
  .kena-hero,.markena-mascot { animation:none !important; }
}