/* ---- Yekan Bakh (self-hosted, used for Persian / RTL) ---- */
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:100;font-display:swap;src:url('fonts/YekanBakh-Thin.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/YekanBakh-Light.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/YekanBakh-Regular.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/YekanBakh-SemiBold.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/YekanBakh-Bold.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/YekanBakh-ExtraBold.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:900;font-display:swap;src:url('fonts/YekanBakh-Black.woff2') format('woff2')}
@font-face{font-family:'Yekan Bakh';font-style:normal;font-weight:950;font-display:swap;src:url('fonts/YekanBakh-ExtraBlack.woff2') format('woff2')}
*{box-sizing:border-box}
:root{
  --blue:#03acfe; --blue-dark:#0290da; --navy:#07133f; --ink:#1e2e68; --muted:#5e6e9c;
  --faint:#8794b5; --line:#d5dce9; --line-soft:#e9eef6; --bg:#f4f7fc; --card:#ffffff;
  --green:#5cc845; --orange:#fc8929; --orange-dark:#f0741b; --red:#e2483a; --purple:#876fe3;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-head:'Sora',sans-serif;
}

/* Public example workspace ------------------------------------------------ */
.demo-workspace{background:#f4f7fb;min-height:80vh;padding:22px 24px 56px;color:var(--ink)}
.demo-banner,.demo-shell,.demo-cta{max-width:1240px;margin-inline:auto}
.demo-banner{display:flex;align-items:center;gap:14px;background:#07133f;color:#fff;border-radius:15px;padding:13px 16px;margin-bottom:16px;box-shadow:0 10px 28px rgba(7,19,63,.14)}
.demo-banner>span{font-size:12px;color:#b9c5e5;flex:1}.demo-banner .btn{white-space:nowrap}
.demo-shell{background:#fff;border:1px solid #dce4ef;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(23,35,61,.08)}
.demo-business{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid #e8edf4}.demo-business>div:nth-child(2){display:flex;flex-direction:column;gap:2px}.demo-business span{font-size:11.5px;color:var(--faint)}
.demo-business-mark{width:42px;height:42px;border-radius:12px;background:#163f77;color:#fff;display:grid;place-items:center;font-weight:900}.demo-memory{margin-inline-start:auto;background:#eef8ff;color:#2475aa;padding:8px 11px;border-radius:10px;font-size:11.5px}
.demo-team{display:grid;grid-template-columns:repeat(7,minmax(115px,1fr));gap:7px;padding:13px 18px;background:#fbfcfe;border-bottom:1px solid #e8edf4;overflow:auto}.demo-team>div{display:flex;align-items:center;gap:7px;min-width:115px}.demo-team img{border-radius:11px;background:#eaf7ff;object-fit:contain}.demo-team span{display:flex;flex-direction:column}.demo-team b{font-size:11.5px}.demo-team small{font-size:9.5px;color:var(--faint);line-height:1.25}
.demo-tabs{display:flex;gap:4px;padding:10px 18px;border-bottom:1px solid #e8edf4;overflow:auto}.demo-tabs button{border:0;background:transparent;padding:9px 13px;border-radius:9px;color:var(--muted);font:700 12.5px var(--font-body);white-space:nowrap;cursor:pointer}.demo-tabs button.on{background:#eaf7ff;color:#028ed5}
.demo-content{padding:22px}.demo-today-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,.85fr);gap:16px}.demo-main-column,.demo-side-column{display:flex;flex-direction:column;gap:14px}
.demo-card{padding:18px}.demo-card-title{font:800 14px var(--font-head);margin-bottom:12px}.demo-kicker{font-size:10px;font-weight:900;letter-spacing:.08em;color:#03acfe;margin-bottom:8px}.demo-priority{padding:22px;border-color:#c9dcf8;background:linear-gradient(135deg,#fff,#f7fbff)}.demo-priority-head{display:flex;align-items:center;gap:14px}.demo-priority-head img{border-radius:18px;background:#eaf7ff;object-fit:contain}.demo-priority h1,.demo-section-head h1{font:800 22px/1.2 var(--font-head);margin:0}.demo-priority-head p,.demo-section-head p{font-size:12.5px;color:var(--muted);margin:5px 0 0}.demo-reason{font-size:13.5px;line-height:1.65;color:var(--muted);margin:16px 0 12px}.demo-meta,.demo-actions{display:flex;gap:7px;flex-wrap:wrap}.demo-actions{margin-top:15px}.demo-pill{display:inline-flex;border:1px solid;border-radius:999px;padding:5px 9px;font-size:10.5px;font-weight:800}.demo-safety{font-size:10.5px;color:var(--faint);margin-top:10px}.demo-reasoning,.demo-answer{background:#f6f9ff;border:1px solid #dfeafb;border-radius:11px;padding:12px 14px;margin-top:13px;font-size:12px;line-height:1.6}.demo-reasoning ol{margin:7px 0;padding-inline-start:20px}.demo-reasoning small{color:var(--faint)}
.demo-list-row{display:flex;gap:10px;align-items:center;padding:11px 0;border-top:1px solid #edf1f6}.demo-list-row:first-of-type{border-top:0}.demo-list-row>div{display:flex;flex-direction:column;gap:3px;flex:1}.demo-list-row b{font-size:12.5px}.demo-list-row span,.demo-check-list,.demo-agent-work span{font-size:11.5px;color:var(--muted)}.demo-check-list{display:flex;flex-direction:column;gap:9px}.demo-goal-number,.demo-report-number{font:800 28px var(--font-head);color:#07133f}.demo-goal-number span{font-size:16px;color:var(--faint)}.demo-side-column p{font-size:12px;color:var(--muted);margin:4px 0 9px}.demo-side-column small,.demo-report-grid small{font-size:10.5px;color:var(--faint)}.demo-progress{height:8px;background:#e4eaf2;border-radius:5px;overflow:hidden;margin-bottom:7px}.demo-progress i{display:block;height:100%;background:#5cc845;border-radius:5px}.demo-agent-work{display:flex;gap:8px;padding:7px 0;border-top:1px solid #edf1f6;font-size:11.5px}.demo-agent-work b{min-width:50px}
.demo-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.demo-stat-grid,.demo-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.demo-report-grid{grid-template-columns:repeat(3,1fr)}.demo-stat-value{font-size:14px;line-height:1.45}.demo-board,.demo-pipeline{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.demo-pipeline{grid-template-columns:repeat(4,1fr)}.demo-board>section,.demo-pipeline>section{background:#f6f8fb;border-radius:13px;padding:12px;display:flex;flex-direction:column;gap:9px}.demo-board>section>b,.demo-pipeline>section>b{font-size:10px;letter-spacing:.06em;color:var(--faint)}.demo-board .card,.demo-pipeline .card{padding:13px}.demo-board span,.demo-pipeline h3{font-size:12.5px;font-weight:800;margin:0}.demo-board small,.demo-pipeline small{display:block;font-size:10.5px;color:var(--faint);margin-top:5px}.demo-pipeline p{font-size:11.5px;color:var(--muted);margin:5px 0}.demo-calendar{display:flex;flex-direction:column;gap:9px}.demo-calendar>.card{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;padding:14px}.demo-calendar span{font-size:10.5px;color:#03acfe;font-weight:800}.demo-calendar h3{font-size:13px;margin:3px 0 0}.demo-report-copy{font-size:13.5px;line-height:1.7;color:var(--muted)}
.demo-cta{margin-top:18px;background:#07133f;color:#fff;border-radius:17px;padding:20px 22px;display:flex;align-items:center;gap:18px}.demo-cta>div{display:flex;flex-direction:column;gap:4px;flex:1}.demo-cta b{font:800 17px var(--font-head)}.demo-cta span{font-size:12px;color:#b9c5e5}
@media(max-width:850px){.demo-workspace{padding:12px 10px 38px}.demo-banner{align-items:flex-start;flex-wrap:wrap}.demo-banner>span{flex-basis:100%;order:3}.demo-today-grid{grid-template-columns:1fr}.demo-content{padding:14px}.demo-team{grid-template-columns:repeat(7,125px)}.demo-stat-grid,.demo-report-grid{grid-template-columns:repeat(2,1fr)}.demo-board,.demo-pipeline{grid-template-columns:1fr}.demo-memory{display:none}.demo-cta{align-items:flex-start;flex-direction:column}.demo-cta .btn{width:100%}}
@media(max-width:520px){.demo-business{padding:14px}.demo-priority{padding:16px}.demo-priority-head{align-items:flex-start}.demo-priority-head img{width:54px;height:54px}.demo-priority h1,.demo-section-head h1{font-size:18px}.demo-stat-grid,.demo-report-grid{grid-template-columns:1fr}.demo-calendar>.card{grid-template-columns:38px 1fr}.demo-calendar .demo-pill{grid-column:2}.demo-section-head{flex-direction:column}.demo-actions>*{flex:1}.demo-banner .btn{width:100%}}
@media(max-width:900px){.today-layout{grid-template-columns:1fr!important}}

/* Owner-published public announcement. It sits above the sticky header so it
   feels like part of the site rather than a browser notification, and remains
   compact enough to respect mobile safe areas. */
.site-announcement{position:relative;z-index:51;color:#fff;background:linear-gradient(110deg,#07133f 0%,#173f86 52%,#075e78 100%)}
.site-announcement.tone-info{background:linear-gradient(110deg,#102b55,#145f91)}
.site-announcement.tone-success{background:linear-gradient(110deg,#074936,#0d8060)}
.site-announcement.tone-urgent{background:linear-gradient(110deg,#731c31,#bd3f35)}
.site-announcement-inner{width:min(1180px,100%);margin:0 auto;min-height:48px;padding:9px 24px;display:flex;align-items:center;justify-content:center;gap:12px;text-align:center}
.site-announcement-inner strong{font-size:13px;line-height:1.45;letter-spacing:.005em}
.site-announcement-spark{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.site-announcement-button{border:1px solid rgba(255,255,255,.42);background:#fff;color:#07133f;border-radius:999px;padding:7px 13px;display:inline-flex;align-items:center;gap:6px;flex:none;font:800 11.5px/1 var(--font-body);text-decoration:none;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.12)}
.site-announcement-button:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(0,0,0,.18)}
.site-announcement-close{width:29px;height:29px;border:0;background:rgba(255,255,255,.1);color:#fff;border-radius:9px;display:grid;place-items:center;cursor:pointer;flex:none}
.site-announcement-close:hover{background:rgba(255,255,255,.2)}
@media(max-width:640px){.site-announcement-inner{padding:9px max(12px,env(safe-area-inset-right)) 9px max(12px,env(safe-area-inset-left));gap:8px;flex-wrap:wrap}.site-announcement-inner strong{font-size:12px;flex:1 1 190px}.site-announcement-spark{display:none}.site-announcement-button{padding:7px 11px}.site-announcement-close{width:26px;height:26px}}
html[dir="rtl"]{
  --font-body:'Yekan Bakh','Vazirmatn',Tahoma,system-ui,sans-serif;
  --font-head:'Yekan Bakh','Vazirmatn',Tahoma,sans-serif;
}
/* Arabic gets a purpose-built Arabic family rather than the Persian one — the
   letterforms and numerals differ enough that Yekan Bakh reads as "Persian
   typesetting" to an Arabic speaker. */
html[lang="ar"]{
  --font-body:'IBM Plex Sans Arabic','Noto Sans Arabic',Tahoma,system-ui,sans-serif;
  --font-head:'IBM Plex Sans Arabic','Noto Sans Arabic',Tahoma,sans-serif;
}
/* German and French compounds are long — let them break instead of overflowing. */
html[lang="de"] h1,html[lang="de"] h2,html[lang="de"] h3{hyphens:auto;overflow-wrap:break-word}
body{margin:0;background:var(--bg);font-family:var(--font-body);color:var(--navy);-webkit-font-smoothing:antialiased}
/* Installed only. The rubber-band bounce past the top of the page is the
   single loudest "this is a web page in a costume" tell on iOS — no native
   app drags its whole UI down to reveal a blank strip. Scoped to standalone
   so the same page in a browser tab keeps the scrolling people expect there,
   including pull-to-refresh. */
@media (display-mode:standalone),(display-mode:minimal-ui){
  html,body{overscroll-behavior-y:none}
}
.skip-link{position:fixed;top:8px;left:8px;z-index:1000;padding:10px 14px;border-radius:8px;background:#07133f;color:#fff;transform:translateY(-160%)}
.skip-link:focus{transform:none;color:#fff}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-dark)}
::selection{background:rgba(30,144,255,.2)}
h1,h2,h3,h4{font-family:var(--font-head)}
button{font-family:var(--font-body)}
input,textarea,select{font-family:var(--font-body)}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulseDot{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes growY{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.rise{animation:rise .4s ease both}
.grow{transform-origin:bottom;animation:growY .7s ease both}
.pulse{animation:pulseDot 2s infinite}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.card-title{font-family:var(--font-head);font-weight:700;font-size:14.5px}
.kicker{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--faint);text-transform:uppercase}
.chip{border-radius:6px;padding:4px 9px;font-size:9.5px;font-weight:800;display:inline-block}
.pill{border-radius:999px;padding:5px 11px;font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;gap:6px}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}

.btn{border:none;background:var(--blue);color:#fff;border-radius:10px;padding:11px 16px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--font-body)}
.btn:hover{background:var(--blue-dark)}
.btn:disabled{opacity:.55;cursor:default}
.btn-lg{padding:14px 24px;font-size:15px;border-radius:12px;box-shadow:0 8px 20px rgba(30,144,255,.35)}
.btn-ghost{border:1px solid #dde3ee;background:#fff;color:var(--navy);border-radius:10px;padding:10px 15px;font-weight:700;font-size:12.5px;cursor:pointer}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-amber{border:none;background:var(--orange);color:var(--navy);border-radius:10px;padding:12px 18px;font-weight:800;font-size:13px;cursor:pointer}
.btn-amber:hover{background:#ffb733}
.btn-danger{border:1px solid #f5d9dc;background:#fff;color:var(--red);border-radius:10px;padding:11px 16px;font-weight:700;font-size:12.5px;cursor:pointer}
.btn-danger:hover{background:#ffeef0}
.btn-sm{padding:8px 13px;font-size:12px;border-radius:8px}

.field-label{font-size:12px;font-weight:800;color:var(--faint);margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
/* Screen-reader-only text: the "*" on a required field is announced as
   "required" rather than as a literal asterisk. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Placeholder for a value that is still being generated. Used instead of
   printing a zero, which claims a measurement that has not happened. */
.skeleton-line{background:linear-gradient(90deg,#eef2f9 25%,#e2e9f5 37%,#eef2f9 63%);background-size:400% 100%;animation:skeleton-shimmer 1.4s ease infinite}
@keyframes skeleton-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.skeleton-line{animation:none}}
.input, textarea.input, select.input{width:100%;border:1px solid #dde3ee;border-radius:10px;padding:12px 14px;font-weight:600;font-size:14px;color:var(--navy);background:#fbfcfe}
.input:focus{border-color:var(--blue);outline:3px solid rgba(30,144,255,.18);outline-offset:1px}
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,[tabindex]:focus-visible{
  outline:3px solid rgba(30,144,255,.42)!important;outline-offset:2px!important
}
.a11y-action{touch-action:manipulation}
.a11y-icon-action{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
textarea.input{resize:vertical}

.spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;vertical-align:-3px}
.spinner-dark{border-color:rgba(30,144,255,.25);border-top-color:var(--blue)}

.toggle{width:42px;height:24px;border-radius:12px;position:relative;transition:background .2s;flex:none;cursor:pointer}
.toggle .knob{position:absolute;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s,right .2s}
html[dir="ltr"] .toggle.on .knob{left:21px} html[dir="ltr"] .toggle .knob{left:3px}
html[dir="rtl"] .toggle.on .knob{right:21px} html[dir="rtl"] .toggle .knob{right:3px}

#toast-root{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--navy);color:#fff;border-radius:12px;padding:12px 18px;font-size:13px;font-weight:700;box-shadow:0 12px 30px rgba(23,35,61,.35);animation:rise .3s ease both;max-width:520px;display:flex;gap:10px;align-items:center}
.toast.err{background:#8e2f38}
.toast.ok{background:#0d7c54}
.toast a{color:#ffd591}

#modal-root:empty{display:none}
.modal-back{position:fixed;inset:0;background:rgba(17,26,46,.55);z-index:60;display:grid;place-items:center;padding:24px}
.modal{background:#fff;border-radius:18px;padding:26px;width:560px;max-width:100%;max-height:88vh;overflow:auto;animation:rise .25s ease both;box-shadow:0 30px 80px rgba(17,26,46,.4)}
.modal:has(.rich-editor){width:min(980px,96vw)}
.rich-editor-wrap{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.rich-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:7px;background:#f7f9fc;border-bottom:1px solid var(--line)}
.rich-tool{border:1px solid #dfe5ef;background:#fff;color:#26344f;border-radius:6px;min-width:30px;height:30px;padding:0 8px;font-size:11.5px;font-weight:800;cursor:pointer}
.rich-tool:hover{border-color:#03acfe;color:#03acfe}
.rich-editor{min-height:260px;padding:18px;outline:none;font-size:14px;line-height:1.7;color:#26344f;overflow:auto}
.rich-editor:focus{box-shadow:inset 0 0 0 2px rgba(30,144,255,.12)}
.rich-editor h2,.rich-editor h3{font-family:var(--font-head);line-height:1.25;margin:18px 0 8px}
.rich-editor p{margin:0 0 12px}.rich-editor blockquote{border-left:4px solid #03acfe;margin:14px 0;padding:8px 14px;background:#f4f8ff}
.featured-image-row{display:grid;grid-template-columns:180px 1fr;gap:12px;align-items:start}
.featured-image-preview{height:125px;border:1px dashed #ccd5e4;border-radius:10px;background:#f6f8fc center/cover no-repeat;display:grid;place-items:center;color:var(--faint);font-size:12px;font-weight:700}
.google-login{display:flex!important;align-items:center;justify-content:center;gap:10px;background:#fff!important;color:#26344f!important}
.google-g,.google-integration-icon{font-family:Arial,sans-serif;font-weight:800;color:#4285f4}
.google-integration-icon{width:44px;height:44px;border-radius:12px;border:1px solid #e3e7ef;display:grid;place-items:center;font-size:22px;background:#fff}
.auth-divider{height:18px;border-top:1px solid #e8ebf2;text-align:center;margin:3px 0 10px}.auth-divider span{position:relative;top:-9px;background:#fff;padding:0 10px;color:var(--faint);font-size:11px;font-weight:700}
.copy-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#101a2e;color:#dbe7ff;border-radius:8px;padding:11px;overflow:auto;white-space:nowrap}
.template-name{font-weight:800}
.integration-row{transition:border-color .18s,box-shadow .18s,transform .18s}.integration-row:hover{border-color:#b8d7ff!important;box-shadow:0 8px 22px rgba(23,35,61,.07);transform:translateY(-1px)}
.integration-hero{display:flex;align-items:center;gap:16px;border:1px solid color-mix(in srgb,var(--integration-color) 28%,#d5dce9);border-radius:16px;padding:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--integration-color) 8%,#fff),#fff)}
.integration-hero-icon{width:58px;height:58px;border-radius:16px;background:var(--integration-color);color:#fff;display:grid;place-items:center;font:900 24px var(--font-head);flex:none}.integration-hero h2{font-size:22px;margin:3px 0 5px}.integration-hero p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5;max-width:620px}
.integration-error{background:#fff2f3;border:1px solid #f5d9dc;color:#9f3540;border-radius:11px;padding:12px 14px;font-size:12.5px;line-height:1.55}
.integration-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin-bottom:14px}.integration-metrics>div{background:#f6f9ff;border:1px solid #e2ecfc;border-radius:10px;padding:12px}.integration-metrics b{display:block;font:800 19px var(--font-head);color:var(--navy)}.integration-metrics span{display:block;font-size:10px;font-weight:800;color:var(--faint);margin-top:3px;text-transform:capitalize}
.integration-table-wrap{overflow:auto;border:1px solid #d5dce9;border-radius:10px}.integration-table{width:100%;border-collapse:collapse;font-size:11.5px;white-space:nowrap}.integration-table th{background:#f6f8fc;color:#66728d;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.03em}.integration-table th,.integration-table td{padding:9px 10px;border-bottom:1px solid #e9eef6}.integration-table tbody tr:last-child td{border-bottom:0}.integration-empty-data{border:1px dashed #cbd5e4;border-radius:11px;padding:28px;text-align:center;color:var(--faint);font-size:12.5px;font-weight:700}

.sidebar-item{display:flex;align-items:center;gap:11px;padding:7px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;font-weight:700;color:#4a5876}
.sidebar-item:hover{background:#f1f5fc}
.sidebar-item.active{background:#eaf7ff;color:var(--blue);font-weight:800}

.hoverable{transition:all .2s;cursor:pointer}
.hoverable:hover{box-shadow:0 14px 34px rgba(23,35,61,.10);border-color:#c9dcf8}

/* ---- landing imagery + motion ---- */
.limg{display:block;width:100%;height:100%;object-fit:cover}
.img-frame{border-radius:18px;overflow:hidden;border:1px solid #d5dce9;box-shadow:0 22px 50px rgba(23,35,61,.12);position:relative;background:#f6f8fc}
.img-frame img{transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.img-frame:hover img{transform:scale(1.045)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.float{animation:floatY 5.5s ease-in-out infinite}
.float-slow{animation:floatY 7s ease-in-out infinite;animation-delay:1.2s}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal-d1{transition-delay:.09s}.reveal-d2{transition-delay:.18s}.reveal-d3{transition-delay:.27s}
.landing-industry-card{transition:transform .25s ease,box-shadow .25s ease}
.landing-industry-card:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(23,35,61,.14)}
.landing-stat{transition:transform .25s ease}
.landing-stat:hover{transform:translateY(-4px)}

/* ================= public site chrome ================= */
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.7) blur(16px);
  -webkit-backdrop-filter:saturate(1.7) blur(16px);border-bottom:1px solid rgba(230,235,244,.9)}
/* The border alone disappears against a white hero, so once the page scrolls a
   soft shadow takes over and the bar reads as a real floating layer. */
.site-header.scrolled{border-bottom-color:transparent;box-shadow:0 6px 24px rgba(23,35,61,.09)}
.site-header-inner{max-width:1200px;margin:0 auto;padding:13px 32px;display:flex;align-items:center;gap:16px}
.site-brand{display:flex;align-items:center;gap:11px;cursor:pointer;flex:none}
.site-brand-name{font-family:var(--font-head);font-weight:800;font-size:19px;letter-spacing:-.02em;color:var(--navy)}
/* Never overflow:hidden — the mega panels hang out of this box by design, and
   clipping them is what made an open menu vanish. Four group buttons is what
   keeps the links from reaching the language pill (see navGroups). */
.site-nav{display:flex;align-items:center;gap:1px;min-width:0}
.site-nav-link{position:relative;padding:9px 12px;border-radius:999px;font-size:14px;font-weight:700;
  color:#46587c;cursor:pointer;white-space:nowrap;transition:color .16s,background .16s}
.site-nav-link:hover{color:var(--navy);background:#f2f5fb}
.site-nav-link.on{color:var(--blue);background:#eff5ff}
.site-actions{display:flex;align-items:center;gap:6px;flex:none}

/* ---- header mega menu ----
   Four group buttons stand in for what used to be nine flat links. The panel
   is anchored to its own button rather than to the header, so it opens under
   the word you clicked and the arrow keeps pointing at it. */
.mega-wrap{position:relative;display:inline-flex}
.mega-btn{border:none;background:none;font-family:var(--font-body);display:inline-flex;align-items:center;gap:5px}
.mega-btn .icon{opacity:.7;transition:transform .18s}
.mega-btn.open{color:var(--navy);background:#f2f5fb}
.mega-btn.open .icon{transform:rotate(180deg)}
/* Sits under the panel and over everything else, so the next click anywhere
   closes the menu instead of falling through to the page. */
.mega-backdrop{position:fixed;inset:0;z-index:39}
.mega-panel{position:absolute;top:calc(100% + 10px);inset-inline-start:-8px;z-index:40;display:flex;gap:8px;
  background:#fff;border:1px solid #d5dce9;border-radius:16px;padding:12px;min-width:290px;
  box-shadow:0 18px 44px rgba(23,35,61,.16);animation:megaIn .16s ease-out}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-panel.wide{min-width:620px}
.mega-col{display:flex;flex-direction:column;gap:1px;min-width:238px;flex:1}
.mega-col-title{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);padding:6px 10px 7px}
.mega-item{display:flex;align-items:flex-start;gap:11px;padding:9px 10px;border-radius:11px;cursor:pointer;
  transition:background .14s}
.mega-item:hover{background:#f1f5fc}
.mega-ico{display:flex;flex:none;width:30px;height:30px;align-items:center;justify-content:center;
  border-radius:9px;background:#eef3fc;color:var(--blue)}
.mega-item:hover .mega-ico{background:#e2ecfd}
.mega-text{min-width:0}
.mega-text b{display:block;font-size:13.5px;font-weight:800;color:var(--navy);line-height:1.35}
.mega-text i{display:block;font-size:11.5px;font-style:normal;font-weight:600;color:var(--faint);line-height:1.4;margin-top:1px}
/* The trial card closes the wide panel — a reason to act, not another link. */
.mega-promo{flex:none;width:214px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  border-radius:12px;padding:14px;background:linear-gradient(160deg,#f4f8ff,#eef3fc);border:1px solid #e4ecfa}
.mega-promo b{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--navy)}
.mega-promo span{font-size:11.5px;font-weight:600;color:var(--faint);line-height:1.5}
.mega-promo .site-cta{margin-top:auto;padding:10px 15px;font-size:12.5px;box-shadow:none}
/* Headings that separate the same groups inside the burger sheet. */
.site-mobile-group{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);padding:12px 10px 4px}
/* both header buttons must stay on one line — a wrapped "Sign in" reads as a bug */
.site-signin{display:inline-flex;align-items:center;gap:7px;border:none;background:none;cursor:pointer;
  padding:10px 12px;border-radius:999px;font-family:var(--font-body);font-size:14px;font-weight:700;
  color:var(--navy);white-space:nowrap;transition:background .16s}
.site-signin:hover{background:#f2f5fb}
.site-cta{display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;background:var(--navy);
  color:#fff;border-radius:999px;padding:12px 20px;font-family:var(--font-body);font-size:14px;font-weight:800;
  white-space:nowrap;box-shadow:0 8px 20px rgba(23,35,61,.24);transition:transform .16s,box-shadow .16s,background .16s}
.site-cta:hover{background:#0d1730;transform:translateY(-1px);box-shadow:0 12px 26px rgba(23,35,61,.3)}
/* Four group buttons need far less room than the nine flat links this replaced,
   so the burger now only takes over on genuinely small screens. Above this the
   real nav always shows — a laptop should never get a hamburger. */
@media (max-width:1024px){
  .site-header-inner>.site-nav{display:none}
  .site-burger{display:grid}
}
/* The band where the nav fits but the actions are what runs it out of room.
   Dropping the sign-in label to its icon buys back more than tightening every
   other gap put together, and the CTA beside it still says what to do. */
@media (min-width:1025px) and (max-width:1200px){
  .site-header-inner{padding-inline:20px;gap:10px}
  .site-nav-link{padding-inline:9px}
  .site-signin>span{display:none}
  .site-signin{padding:10px}
}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.site-burger{display:none;width:40px;height:38px;border:1px solid #dde3ee;background:#fff;border-radius:10px;
  place-items:center;cursor:pointer;color:var(--navy)}
/* Only ever visible where the burger that opens it is visible. Without the
   media query an open sheet left over from a narrow window reappears at full
   desktop width, underneath a nav that is already showing every one of its
   links. */
.site-mobile-nav{display:none;border-top:1px solid var(--line);background:#fff;padding:10px 20px 16px}
@media (max-width:1024px){ .site-mobile-nav.open{display:block} }
.site-mobile-nav .site-nav-link{display:block;padding:11px 10px;font-size:14.5px}
.site-mobile-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}

/* ---- footer ---- */
.site-footer{background:#101a2e;color:#fff;overflow:hidden;position:relative}
.site-footer::before{content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(30,144,255,.6),rgba(138,99,244,.5),transparent)}
.footer-col-title{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6d85bd;margin-bottom:2px}
.footer-link{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#bccbe8;cursor:pointer;
  width:fit-content;transition:color .16s,transform .16s;background:none;border:none;padding:0;font-family:var(--font-body);text-decoration:none}
.footer-link:hover{color:#fff;transform:translateX(2px)}
html[dir="rtl"] .footer-link:hover{transform:translateX(-2px)}
.footer-link .icon{opacity:0;transition:opacity .16s}
.footer-link:hover .icon{opacity:.9}
.footer-faces{display:flex}
.footer-face{width:34px;height:34px;border-radius:11px;object-fit:cover;flex:none;
  border:2px solid #101a2e;margin-inline-end:-8px;transition:transform .2s ease}
.footer-face:last-child{margin-inline-end:0}
.footer-faces:hover .footer-face{transform:translateY(-3px)}
.footer-social{display:flex;gap:8px}
.footer-social a{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);display:grid;place-items:center;color:#bccbe8;transition:all .18s}
.footer-social a:hover{background:rgba(30,144,255,.18);border-color:rgba(30,144,255,.5);color:#fff;transform:translateY(-2px)}
.footer-wordmark{white-space:nowrap;font-family:var(--font-head);font-weight:800;font-size:clamp(56px,11vw,116px);
  line-height:.9;color:rgba(255,255,255,.045);user-select:none;pointer-events:none;letter-spacing:-.02em}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08)}

/* ---- section furniture shared by landing + marketing pages ---- */
.sec-head{max-width:660px;margin:0 auto 40px;text-align:center}
.sec-head .kicker{display:inline-flex;align-items:center;gap:7px;color:var(--blue);background:#f1f6ff;
  border:1px solid #dcebff;border-radius:999px;padding:6px 13px;margin-bottom:14px}
.sec-h2{font-family:var(--font-head);font-size:clamp(26px,3.4vw,34px);line-height:1.16;font-weight:800;margin:0 0 12px;color:var(--navy)}
.sec-sub{font-size:16px;line-height:1.65;color:var(--muted);margin:0}
.sec-head-start{text-align:start;margin-inline:0}

.feature-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;
  flex-direction:column;gap:12px;transition:border-color .2s,box-shadow .2s,transform .2s;position:relative;overflow:hidden}
.feature-card:hover{border-color:#c9dcf8;box-shadow:0 16px 38px rgba(23,35,61,.09);transform:translateY(-3px)}
.feature-card h3{font-family:var(--font-head);font-weight:700;font-size:16.5px;margin:0;line-height:1.35}
.feature-card p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted)}

.check-item{display:flex;gap:11px;align-items:flex-start}
.check-item>.check-mark{width:21px;height:21px;border-radius:50%;background:#e7f7f0;color:#0b8f5e;
  display:grid;place-items:center;flex:none;margin-top:1px}

.step-row{display:flex;gap:16px;align-items:flex-start}
.step-num{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-family:var(--font-head);
  font-weight:800;font-size:14px;color:#fff;flex:none}

/* ================= home page (mk-*) =================
   The home page leads with real screenshots of the product rather than stock
   renders, so most of this is framing: a browser chrome around a screenshot, a
   card that can hold either an <img> or a looping <video>, and the chunky
   rounded shapes the rest of the marketing site borrows. */
.mk-wrap{max-width:1200px;margin:0 auto;padding-inline:32px}
.mk-section{padding-block:88px}
.mk-section-tint{background:#f6f8fc;border-block:1px solid #e9eef6}

/* pill above a headline */
.mk-eyebrow{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #dce7f8;
  border-radius:999px;padding:7px 8px 7px 14px;font-size:12.5px;font-weight:800;color:var(--navy);
  box-shadow:0 4px 14px rgba(23,35,61,.06)}
.mk-eyebrow-tag{background:#eaf7ff;color:var(--blue);border-radius:999px;padding:3px 9px;font-size:11px;font-weight:800}

.mk-h1{font-family:var(--font-head);font-size:clamp(38px,5.1vw,62px);line-height:1.03;font-weight:800;
  letter-spacing:-.028em;margin:22px 0 0;color:var(--navy)}
.mk-h1 em{font-style:normal;color:var(--blue)}
.mk-lede{font-size:clamp(16px,1.35vw,19px);line-height:1.6;color:var(--muted);margin:20px 0 0;max-width:52ch}
.mk-h2{font-family:var(--font-head);font-size:clamp(28px,3.8vw,42px);line-height:1.1;font-weight:800;
  letter-spacing:-.024em;margin:0;color:var(--navy)}
.mk-h3{font-family:var(--font-head);font-size:clamp(22px,2.5vw,30px);line-height:1.16;font-weight:800;
  letter-spacing:-.018em;margin:0;color:var(--navy)}

/* chunky pill buttons — the home page's primary voice */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;
  border-radius:999px;padding:15px 26px;font-family:var(--font-body);font-size:15px;font-weight:800;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.mk-btn:hover{transform:translateY(-2px)}
.mk-btn-primary{background:var(--blue);color:#fff;box-shadow:0 10px 26px rgba(30,144,255,.34)}
.mk-btn-primary:hover{background:var(--blue-dark);box-shadow:0 14px 32px rgba(30,144,255,.42)}
.mk-btn-dark{background:var(--navy);color:#fff;box-shadow:0 10px 26px rgba(23,35,61,.28)}
.mk-btn-dark:hover{background:#0d1730}
.mk-btn-amber{background:var(--orange);color:var(--navy);box-shadow:0 10px 26px rgba(255,165,2,.36)}
.mk-btn-amber:hover{background:#ffb733}
.mk-btn-quiet{background:#fff;color:var(--navy);border:1.5px solid #dde5f2;box-shadow:none}
.mk-btn-quiet:hover{border-color:var(--blue);color:var(--blue)}

/* a screenshot dressed as a browser window */
.mk-shot{border-radius:16px;overflow:hidden;background:#fff;border:1px solid #e2e8f3;
  box-shadow:0 30px 70px rgba(23,35,61,.16),0 4px 12px rgba(23,35,61,.05)}
.mk-shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#f7f9fd;border-bottom:1px solid #eaeef6}
.mk-shot-dot{width:10px;height:10px;border-radius:50%;flex:none}
.mk-shot-url{flex:1;margin-inline:8px;background:#fff;border:1px solid #e8edf6;border-radius:7px;
  padding:5px 11px;font-size:11px;font-weight:700;color:var(--faint);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-shot img,.mk-shot video{display:block;width:100%;height:auto}
/* Screens taller than the frame are cut off deliberately; the fade makes that
   read as "there is more below" rather than as a broken image. */
.mk-shot-crop{max-height:520px;overflow:hidden;position:relative}
.mk-shot-crop::after{content:"";position:absolute;inset-inline:0;bottom:0;height:76px;pointer-events:none;
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.92))}

/* floating chips that sit over the hero screenshot */
.mk-float-card{position:absolute;background:#fff;border:1px solid #d5dce9;border-radius:15px;
  padding:11px 15px;box-shadow:0 16px 36px rgba(23,35,61,.16);display:flex;align-items:center;gap:10px;
  pointer-events:none;z-index:3}

/* the channel strip under the hero */
.mk-channels{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.mk-channel{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:10px 17px;font-size:13.5px;font-weight:800;color:var(--ink);
  transition:border-color .18s,transform .18s,box-shadow .18s}
.mk-channel:hover{border-color:#c9dcf8;transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,35,61,.08)}
.mk-channel-dot{width:9px;height:9px;border-radius:50%;flex:none}

/* the agent roster */
.mk-agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mk-agent{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s}
.mk-agent:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(23,35,61,.14);border-color:#d3e2f8}
.mk-agent-photo{aspect-ratio:1/1;overflow:hidden;position:relative}
.mk-agent-photo img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.6,.2,1)}
.mk-agent:hover .mk-agent-photo img{transform:scale(1.05)}
.mk-agent-role{position:absolute;inset-inline-start:12px;bottom:12px;background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:800;color:var(--navy)}
.mk-agent-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:7px;flex:1}

/* alternating screenshot / copy rows */
.mk-feature{display:grid;grid-template-columns:1fr 1.18fr;gap:64px;align-items:center}
.mk-feature.mk-feature-flip{grid-template-columns:1.18fr 1fr}
.mk-feature-flip>.mk-feature-copy{order:2}
.mk-feature-flip>.mk-feature-media{order:1}
.mk-feature-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.mk-tag{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 14px;
  font-size:12px;font-weight:800;letter-spacing:.02em}
.mk-bullets{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.mk-bullets li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.6;color:var(--ink)}
.mk-bullets .mk-tick{width:22px;height:22px;border-radius:50%;background:#e7f7f0;color:#0b8f5e;
  display:grid;place-items:center;flex:none;margin-top:1px}

/* big number band */
.mk-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:22px;overflow:hidden;background:#fff}
.mk-stat{padding:30px 26px;text-align:center;border-inline-end:1px solid var(--line-soft)}
.mk-stat:last-child{border-inline-end:none}
.mk-stat-num{font-family:var(--font-head);font-weight:800;font-size:clamp(32px,4vw,46px);line-height:1;letter-spacing:-.02em}
.mk-stat-label{font-size:13px;font-weight:700;color:var(--muted);margin-top:9px;line-height:1.45}

/* industry cards */
.mk-ind-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mk-ind{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease}
.mk-ind:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(23,35,61,.16)}
.mk-ind-photo{aspect-ratio:4/3;overflow:hidden}
.mk-ind-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
.mk-ind:hover .mk-ind-photo img{transform:scale(1.06)}

/* pricing */
.mk-price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.mk-price{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:32px;display:flex;
  flex-direction:column;gap:16px;position:relative;transition:transform .22s ease,box-shadow .22s ease}
.mk-price:hover{transform:translateY(-4px);box-shadow:0 24px 52px rgba(23,35,61,.12)}
.mk-price-pop{border-color:var(--blue);box-shadow:0 24px 56px rgba(30,144,255,.2)}
.mk-price-badge{position:absolute;top:-13px;inset-inline-start:50%;transform:translateX(-50%);
  background:var(--orange);color:var(--navy);font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:6px 16px;white-space:nowrap}
html[dir="rtl"] .mk-price-badge{transform:translateX(50%)}

/* The Free tier sits BELOW the paid grid as one wide band, not as a fourth
   column. Two reasons, and they are both commercial rather than cosmetic: a
   four-column grid reflows to 2+2 on a laptop and orphans a card, and a £0
   column placed beside three priced ones makes the eye read the paid tiers as
   the expensive options. As a band it reads as the floor under the range —
   still obvious, no longer competing for the same glance. */
.mk-free-band{margin-top:22px;background:#fff;border:1.5px solid var(--line);border-radius:22px;
  padding:26px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.mk-free-band-name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mk-free-band-title{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink)}
.mk-free-band-price{font-family:var(--font-head);font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.mk-free-band-tag{background:#eef7f1;color:#0b8f5e;border-radius:999px;padding:5px 11px;
  font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.mk-free-band-lede{font-size:12.5px;font-weight:700;color:var(--faint);margin-top:6px;line-height:1.5}
/* A grid, not flex-wrap: wrapping packed the bullets by width and produced a
   ragged second column that read as a mistake. Fixed columns line the check
   marks up. */
.mk-free-band-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 26px;font-size:13.5px;color:#4a5876;font-weight:600}
@media (max-width:720px){ .mk-free-band-feats{grid-template-columns:1fr} }
.mk-free-band-cta{white-space:nowrap}
@media (max-width:960px){
  /* The CTA drops under the copy before the features wrap to three lines —
     a full-width button is a better tap target than a squeezed one. */
  .mk-free-band{grid-template-columns:1fr;gap:18px;text-align:start}
  .mk-free-band-cta{width:100%}
}

/* "What it replaces" — the value anchor above pricing. Two cards weighted
   against each other: the stack you already pay for, and one price. The left
   card is deliberately plainer so the eye finishes on the right. */
.mk-worth{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;max-width:980px;margin:0 auto}
.mk-worth-stack,.mk-worth-us{border-radius:22px;padding:30px;display:flex;flex-direction:column}
.mk-worth-stack{background:#fff;border:1.5px solid var(--line)}
.mk-worth-us{background:linear-gradient(160deg,#07133f,#1f3358);border:1.5px solid transparent;
  box-shadow:0 28px 64px rgba(23,35,61,.24);color:#fff}
.mk-worth-head{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin-bottom:20px}
.mk-worth-head-on{color:#8fbaff}
.mk-worth-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.mk-worth-ico{width:30px;height:30px;border-radius:9px;background:#f1f5fc;color:var(--blue);
  display:grid;place-items:center;flex:none}
.mk-worth-name{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);line-height:1.35}
.mk-worth-brand{display:block;font-size:11.5px;font-weight:600;color:var(--faint);margin-top:2px}
.mk-worth-price{font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--navy);white-space:nowrap}
.mk-worth-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:18px;
  padding-top:16px;border-top:2px solid var(--navy);font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--faint)}
.mk-worth-total-num{font-family:var(--font-head);font-size:32px;font-weight:800;color:var(--navy);
  letter-spacing:-.03em;text-transform:none}
.mk-worth-foot{font-size:13px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.mk-worth-price-big{font-family:var(--font-head);font-size:clamp(44px,6vw,60px);font-weight:800;
  letter-spacing:-.035em;line-height:1;color:#fff;display:flex;align-items:baseline;gap:2px}
.mk-worth-cur{font-size:.55em;font-weight:700}
.mk-worth-per{font-family:var(--font-body);font-size:15px;font-weight:700;color:#8fa4cc;
  margin-inline-start:6px;align-self:flex-end}
.mk-worth-save{font-size:13.5px;font-weight:700;color:#a9bce0;margin:12px 0 22px}
.mk-worth-bullets li span:last-child{color:#c9d6ee;font-size:13.5px}
.mk-worth-bullets .mk-tick{background:rgba(255,255,255,.12);color:#7fe3b0}
/* The button carries a wide glow, so it needs real clearance from the bullets
   above it. On a narrow screen the flex spacer collapses to nothing and the two
   would otherwise sit edge to edge with the glow bleeding over the last line. */
.mk-worth-us .mk-btn{margin-top:26px}
.mk-worth-delta{margin-top:22px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(143,186,255,.22)}
.mk-worth-delta-num{display:block;font-family:var(--font-head);font-size:20px;font-weight:800;
  color:#7fe3b0;letter-spacing:-.02em}
.mk-worth-delta-sub{display:block;font-size:12.5px;font-weight:600;color:#8fa4cc;margin-top:3px;line-height:1.5}
.mk-worth-note{margin-top:14px;font-size:12.5px;font-weight:700;color:#8398c4;text-align:center}
.mk-worth-honest{max-width:66ch;margin:38px auto 0;text-align:center;font-size:15.5px;
  line-height:1.75;color:var(--muted)}
.mk-worth-disclaimer{max-width:66ch;margin:14px auto 0;text-align:center;font-size:12px;
  font-weight:600;line-height:1.6;color:var(--faint)}

/* FAQ */
.mk-faq{background:#fff;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s}
.mk-faq.on{border-color:#bcd8fb;box-shadow:0 12px 30px rgba(23,35,61,.07)}
.mk-faq-q{display:flex;align-items:center;gap:16px;padding:22px 24px;cursor:pointer}
.mk-faq-q>span:first-child{font-family:var(--font-head);font-weight:700;font-size:16px;flex:1}
.mk-faq-chev{width:30px;height:30px;border-radius:50%;background:#f1f5fc;color:var(--blue);
  display:grid;place-items:center;flex:none;transition:transform .24s ease,background .2s}
.mk-faq.on .mk-faq-chev{transform:rotate(180deg);background:#eaf7ff}
.mk-faq-a{padding:0 24px 22px;padding-inline-end:64px;font-size:14.5px;line-height:1.7;color:var(--muted)}

/* Competitor comparison matrix (/compare).
   The first data column is us, so it is tinted and given a heavier rule down
   both sides — on a table this wide the eye needs an anchor to compare against,
   and without one every row has to be read from the far left each time. */
.mk-cmp-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:#fff}
.mk-cmp{width:100%;border-collapse:collapse;min-width:720px}
.mk-cmp th,.mk-cmp td{padding:15px 16px;text-align:center;vertical-align:middle}
.mk-cmp thead th{font-family:var(--font-head);font-size:13.5px;font-weight:700;color:var(--navy);
  border-bottom:1px solid var(--line);white-space:nowrap}
.mk-cmp tbody td{border-top:1px solid var(--line-soft)}
.mk-cmp .mk-cmp-rowhead{text-align:start;font-size:13.5px;font-weight:600;color:var(--ink);
  min-width:260px;line-height:1.5}
.mk-cmp thead .mk-cmp-rowhead{border-bottom:1px solid var(--line)}
.mk-cmp .mk-cmp-us{background:#f4f9ff;border-inline:1px solid #dbeafe}
.mk-cmp thead .mk-cmp-us{color:var(--blue);background:#eaf7ff}
.mk-cmp tbody tr:last-child .mk-cmp-us{border-bottom:1px solid #dbeafe}
@media (max-width:720px){
  .mk-cmp th,.mk-cmp td{padding:12px 12px}
  .mk-cmp .mk-cmp-rowhead{min-width:190px;font-size:12.5px}
  .mk-cmp thead th{font-size:12.5px}
}

/* The single motion panel, framed like the product screenshots it sits among
   so it reads as part of the argument rather than as an interruption. */
.mk-clip{margin:0 0 56px}
.mk-clip-frame{position:relative;overflow:hidden;border-radius:20px;background:#0f1a2f;
  border:1px solid var(--line);box-shadow:0 22px 54px rgba(23,35,61,.14);aspect-ratio:21/7}
.mk-clip-frame video{width:100%;height:100%;object-fit:cover;display:block}
/* a soft vignette, so the clip's own edges never fight the rounded frame */
.mk-clip-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 130% at 50% 45%,rgba(0,0,0,0) 52%,rgba(15,26,47,.34) 100%)}
@media (max-width:720px){ .mk-clip-frame{aspect-ratio:16/9;border-radius:15px} .mk-clip{margin-bottom:40px} }

/* closing CTA */
.mk-cta{position:relative;overflow:hidden;border-radius:28px;isolation:isolate;text-align:center;
  padding:82px 32px;background:var(--navy)}
.mk-cta>.mk-cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.72;z-index:-2}
.mk-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,rgba(15,24,45,.34),rgba(15,24,45,.88))}

@media (max-width:1080px){
  .mk-hero-grid{grid-template-columns:1fr !important;gap:44px !important}
  .mk-feature,.mk-feature.mk-feature-flip{grid-template-columns:1fr;gap:34px}
  .mk-feature-flip>.mk-feature-copy,.mk-feature-flip>.mk-feature-media{order:0}
  .mk-agent-grid,.mk-ind-grid,.mk-price-grid{grid-template-columns:repeat(2,1fr)}
  .mk-stats{grid-template-columns:repeat(2,1fr)}
  .mk-stat:nth-child(2){border-inline-end:none}
  .mk-stat:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
}
@media (max-width:720px){
  .mk-wrap{padding-inline:20px}
  .mk-section{padding-block:56px}
  .mk-agent-grid,.mk-ind-grid,.mk-price-grid{grid-template-columns:1fr;gap:16px}
  .mk-worth{grid-template-columns:1fr;gap:16px}
  .mk-worth-stack,.mk-worth-us{padding:24px}
  .mk-stats{grid-template-columns:1fr 1fr}
  .mk-cta{border-radius:20px;padding:56px 22px}
  .mk-shot-crop{max-height:320px}
  .mk-faq-a{padding-inline-end:24px}
  .mk-faq-q{padding:18px 18px}
  .mk-faq-q>span:first-child{font-size:15px}

  /* The eyebrow has to wrap at this width, so it stops being a pill — a pill
     whose text wraps renders as a lozenge with the label floating inside it. */
  .mk-eyebrow{display:flex;align-items:center;gap:10px;border-radius:16px;padding:11px 14px;
    font-size:12px;line-height:1.45;text-align:start}
  .mk-eyebrow-tag{flex:none}

  /* Long CTA labels cannot fit on one line at 390px, so the buttons go
     full-width and keep their label on a single line at a smaller size. */
  .mk-hero-ctas{flex-direction:column;align-items:stretch}
  .mk-hero-ctas .mk-btn{width:100%}
  .mk-btn{padding:15px 20px;font-size:14.5px;white-space:nowrap}

  /* Floating annotations need room the mobile hero does not have. */
  .mk-float-card{display:none !important}
  .mk-newsletter-grid,.landing-newsletter-grid{grid-template-columns:1fr !important;gap:22px !important}
  .mk-price{padding:24px}
  .mk-stat{padding:22px 16px}
}

/* ---- CMS / blog prose ----
   Body copy for pages and posts comes out of the editor as bare h2/p/ul, so the
   whole typographic scale has to live here rather than on the elements. */
.public-rich>*:first-child{margin-top:0}
.public-rich>*:last-child{margin-bottom:0}
.public-rich h1,.public-rich h2,.public-rich h3{font-family:var(--font-head);color:var(--navy);
  line-height:1.25;letter-spacing:-.01em;margin:2em 0 .55em}
.public-rich h1{font-size:1.85em;font-weight:800}
.public-rich h2{font-size:1.45em;font-weight:800}
.public-rich h3{font-size:1.18em;font-weight:700}
.public-rich p{margin:0 0 1.15em}
.public-rich ul,.public-rich ol{margin:0 0 1.15em;padding-inline-start:1.35em}
.public-rich li{margin-bottom:.5em}
.public-rich li::marker{color:var(--blue)}
.public-rich a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.public-rich strong,.public-rich b{color:var(--navy);font-weight:800}
.public-rich blockquote{margin:1.6em 0;padding:16px 22px;background:#f6f9ff;border:1px solid #e2ecfc;
  border-radius:12px;border-inline-start:4px solid var(--blue);font-size:.97em;color:var(--ink)}
.public-rich blockquote p:last-child{margin-bottom:0}
.public-rich img{max-width:100%;height:auto;border-radius:14px;margin:1.4em 0}
.public-rich hr{border:none;border-top:1px solid var(--line);margin:2.4em 0}
.public-rich code{background:#f1f5fc;border:1px solid #e2e9f6;border-radius:5px;padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:#2f5fa8}
.public-rich pre{background:#101a2e;color:#dbe7ff;border-radius:12px;padding:16px 18px;overflow-x:auto;margin:0 0 1.3em}
.public-rich pre code{background:none;border:none;color:inherit;padding:0}
.public-rich h4{font-family:var(--font-head);color:var(--navy);font-size:1.02em;font-weight:700;margin:1.6em 0 .45em}
/* Tables in CMS prose — retention schedules, lawful-basis grids, the
   sub-processor list. They must stay legible on a phone, so they scroll
   inside their own box rather than forcing the page sideways. */
.public-rich table{width:100%;border-collapse:collapse;margin:0 0 1.5em;font-size:.93em;
  display:block;overflow-x:auto;white-space:normal}
.public-rich table th{text-align:start;background:#f6f9fd;font-family:var(--font-head);font-weight:700;
  font-size:.94em;color:var(--navy);padding:11px 14px;border:1px solid var(--line);vertical-align:top}
.public-rich table td{padding:11px 14px;border:1px solid var(--line);vertical-align:top;line-height:1.6}
.public-rich table tr:nth-child(even) td{background:#fbfcfe}

/* Policy-page furniture: the "last updated" stamp and the pre-launch review
   banner, both emitted by server/starter-pages.js. */
.public-rich .policy-meta{font-size:.9em;color:var(--faint);font-weight:600;
  padding-bottom:1em;border-bottom:1px solid var(--line);margin-bottom:1.5em}
.public-rich .policy-review{background:#fff8ec;border:1px solid #f4e0bd;border-inline-start:3px solid var(--orange-dark);
  border-radius:0 11px 11px 0;padding:14px 18px;font-size:.92em;color:#5c451c;margin:0 0 1.8em}
.public-rich .policy-review em{font-style:normal}
.public-rich table{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.94em}
.public-rich th,.public-rich td{padding:11px 13px;border-bottom:1px solid var(--line-soft);text-align:start}
.public-rich th{background:#f7f9fc;font-weight:800;color:var(--navy)}

/* ================= icons ================= */
.icon{stroke-linecap:round;stroke-linejoin:round}
.icon-tile{transition:transform .2s ease,box-shadow .2s ease}
.hoverable:hover .icon-tile{transform:translateY(-2px) scale(1.04)}
/* Line icons are drawn on an LTR grid; arrows and chevrons must point the other
   way in RTL, but symmetric glyphs (search, calendar…) must not be mirrored. */
html[dir="rtl"] .icon-flip{transform:scaleX(-1)}

/* ================= language switcher ================= */
.lang-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid #dde3ee;background:#fff;color:var(--navy);
  border-radius:10px;padding:8px 11px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:var(--font-body);line-height:1}
.lang-btn:hover{border-color:var(--blue);color:var(--blue)}
.lang-btn .icon{opacity:.75}
.lang-btn-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#e7eeff}
.lang-btn-dark:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.38);color:#fff}
.lang-wrap{position:relative}
.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:40;min-width:212px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 20px 46px rgba(17,26,46,.18);
  display:flex;flex-direction:column;gap:2px;animation:rise .18s ease both}
.lang-menu-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;
  border:none;background:none;width:100%;text-align:start;font-family:var(--font-body);color:var(--navy)}
.lang-menu-item:hover{background:#f1f5fc}
.lang-menu-item.on{background:#eaf7ff}
.lang-menu-item b{font-size:13px;font-weight:800;display:block;line-height:1.3}
.lang-menu-item i{font-size:11px;font-style:normal;font-weight:700;color:var(--faint);display:block;line-height:1.3}
.lang-menu-item .tick{margin-inline-start:auto;color:var(--blue);display:flex}
.lang-backdrop{position:fixed;inset:0;z-index:39}

/* the settings-screen picker: same data, laid out as cards */
.lang-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px}
.lang-choice{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid #dfe5ef;background:#fbfcfe;
  border-radius:12px;cursor:pointer;font-family:var(--font-body);color:var(--navy);text-align:start;transition:all .16s}
.lang-choice:hover{border-color:#b8d7ff;background:#fff;box-shadow:0 6px 16px rgba(23,35,61,.06)}
.lang-choice.on{border-color:var(--blue);background:#f2f8ff;box-shadow:0 0 0 1px var(--blue) inset}
.lang-choice-text{min-width:0;flex:1}
.lang-choice-text b{display:block;font-size:13px;font-weight:800;line-height:1.35}
.lang-choice-text i{display:block;font-size:10.5px;font-style:normal;font-weight:700;color:var(--faint);line-height:1.35}
.lang-choice-tick{color:var(--blue);display:flex}

/* Settings used to be two independently stacked columns: the short account
   column ended after two cards while the workspace column continued for most
   of the page. A single reading column keeps related controls in a predictable
   top-to-bottom order and avoids a large dead area on desktop. */
.settings-page{display:flex;flex-direction:column;gap:16px;max-width:920px;width:100%;margin-inline:auto}
.settings-stack{display:flex;flex-direction:column;gap:16px;min-width:0}

/* The tabbed replacement. One reading column was still eleven cards long, so
   the groups are now tabs and only one group renders at a time. The strip
   scrolls sideways rather than wrapping to a second row: a nav that changes
   height as you move through it makes the panel below jump. */
.settings-page-tabbed{display:flex;flex-direction:column;gap:16px;max-width:920px;width:100%;margin-inline:auto}
.settings-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none}
.settings-tabs::-webkit-scrollbar{display:none}
.settings-tab{display:inline-flex;align-items:center;gap:7px;flex:none;padding:9px 14px;border:1px solid #dfe5ef;
  background:#fbfcfe;border-radius:11px;cursor:pointer;font-family:var(--font-body);font-size:12.5px;font-weight:800;
  color:var(--faint);white-space:nowrap;transition:all .16s}
.settings-tab:hover{border-color:#b8d7ff;background:#fff;color:var(--navy)}
.settings-tab.on{border-color:var(--blue);background:#f2f8ff;color:var(--navy);box-shadow:0 0 0 1px var(--blue) inset}
.settings-panel{display:flex;flex-direction:column;gap:16px;min-width:0}

.markdownish p{margin:0 0 8px}
.markdownish{font-size:13.5px;line-height:1.65;color:var(--ink);white-space:pre-wrap;word-break:break-word}

/* Installed-app chrome. The sidebar remains the complete information
   architecture; the bottom tabs are a thumb-reachable native-style subset. */
.sidebar-brand-row{display:flex;align-items:flex-start;gap:6px;flex:none}
.sidebar-brand-row .markena-brand-lockup{flex:1 !important;min-width:0}
.sidebar-close-btn,.mobile-app-tabs{display:none}

.pwa-install-offer{position:fixed;inset-inline-end:20px;bottom:20px;z-index:90;width:min(390px,calc(100vw - 32px));
  padding:16px;background:rgba(255,255,255,.98);border:1px solid #dce6f4;border-radius:20px;
  box-shadow:0 22px 70px rgba(7,19,63,.24);font-family:var(--font-body);color:var(--ink);animation:pwa-offer-in .24s ease both}
@keyframes pwa-offer-in{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.pwa-install-head{display:flex;align-items:center;gap:12px;padding-inline-end:28px}
.pwa-install-logo{width:52px;height:52px;border-radius:15px;object-fit:cover;box-shadow:0 6px 18px rgba(7,19,63,.16)}
.pwa-install-title{font-family:var(--font-head);font-size:16px;font-weight:800;line-height:1.25;color:var(--navy)}
.pwa-install-copy{font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px}
.pwa-install-close{position:absolute;top:10px;inset-inline-end:10px;width:34px;height:34px;border:0;border-radius:50%;
  display:grid;place-items:center;background:transparent;color:var(--faint);cursor:pointer}
.pwa-install-close:hover{background:var(--ink-50);color:var(--navy)}
.pwa-install-actions{display:flex;gap:8px;margin-top:14px}
.pwa-install-actions button{min-height:42px;flex:1;border-radius:12px;font-family:var(--font-body);font-size:12.5px;font-weight:800;cursor:pointer}
.pwa-install-primary{border:0;background:linear-gradient(135deg,#03acfe,#0879dc);color:#fff;box-shadow:0 8px 20px rgba(3,172,254,.24)}
.pwa-install-secondary{border:1px solid #dce4ef;background:#fff;color:var(--navy)}
.pwa-install-steps{display:grid;gap:8px;margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.pwa-install-step{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.45;color:var(--muted)}
.pwa-install-step b{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:8px;background:#eaf7ff;color:#0879dc;font-size:11px}
.pwa-install-note{font-size:10.5px;line-height:1.45;color:var(--faint);margin-top:9px}

html.pwa-standalone,html.pwa-standalone body{min-height:100%;overscroll-behavior-y:none}
html.pwa-standalone body{-webkit-user-select:none;user-select:none}
html.pwa-standalone input,html.pwa-standalone textarea,html.pwa-standalone [contenteditable="true"]{-webkit-user-select:text;user-select:text}

@media (max-width:980px){
  .app-grid{grid-template-columns:1fr !important}
  .sidebar{position:fixed !important;inset-block:0;inset-inline-start:0;width:min(86vw,320px);height:100dvh !important;z-index:50;transform:translateX(-110%);transition:transform .22s ease;box-shadow:0 20px 60px rgba(17,26,46,.22);padding-top:max(20px,env(safe-area-inset-top)) !important;padding-bottom:max(14px,env(safe-area-inset-bottom)) !important}
  html[dir="rtl"] .sidebar{transform:translateX(110%)}
  .sidebar.open{transform:translateX(0)}
  .mobile-nav-backdrop{display:block !important;position:fixed;inset:0;background:rgba(17,26,46,.42);z-index:45;border:0;padding:0;width:100%;height:100%}
  .mobile-menu-btn{display:grid !important}
  .sidebar-close-btn{display:grid;width:38px;height:38px;place-items:center;flex:none;border:0;border-radius:11px;background:var(--ink-50);color:var(--navy);cursor:pointer}
  .app-topbar{padding:12px 16px !important}
  .app-topbar-search{display:none !important}
  .app-business-switcher{padding:7px 9px !important}
  .app-business-switcher>div:nth-child(2){display:none}
  .app-content{padding:18px 16px !important}
}

.mobile-menu-btn,.mobile-nav-backdrop{display:none}

@media (max-width:720px){
  .mobile-app-tabs{position:fixed;display:grid;grid-template-columns:repeat(var(--mobile-tab-count,5),minmax(0,1fr));inset-inline:0;bottom:0;z-index:35;
    min-height:66px;padding:7px 6px max(7px,env(safe-area-inset-bottom));background:rgba(255,255,255,.96);
    border-top:1px solid #dfe6f1;box-shadow:0 -8px 28px rgba(7,19,63,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .mobile-app-tab{min-width:0;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    border:0;border-radius:12px;background:transparent;color:#7a879f;font-family:var(--font-body);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .mobile-app-tab span{display:grid;place-items:center}
  .mobile-app-tab small{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:9.5px;font-weight:800;white-space:nowrap}
  .mobile-app-tab.active{color:#0879dc;background:#edf8ff}
  .app-content{padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important}
  .pwa-install-offer{inset-inline:16px;width:auto;bottom:calc(78px + env(safe-area-inset-bottom));border-radius:18px}
  main section>div[style*="repeat(3,1fr)"],main div:has(>.public-rich){grid-template-columns:1fr !important}
  body{overflow-x:hidden}
  .landing-nav{padding:16px !important}
  .landing-nav-links{gap:8px !important}
  .landing-nav-links>span,.landing-nav-links>.btn-ghost{display:none !important}
  .landing-nav-links>.btn{padding:10px 12px !important;font-size:12px !important}
  /* the public header collapses into the burger sheet */
  .site-header-inner{padding:12px 18px !important;gap:10px}
  .site-header-inner>.site-nav,.site-header-inner>.site-actions{display:none !important}
  .site-burger{display:grid !important}
  .site-mobile-nav .lang-menu{position:static;box-shadow:none;border-color:#d5dce9;margin-top:6px;width:100%}
  .site-mobile-nav .lang-backdrop{display:none}
  .footer-wordmark{font-size:52px !important}
  .landing-hero{padding:42px 20px 30px !important}
  .landing-h1{font-size:38px !important;line-height:1.08 !important;margin-top:20px !important}
  .landing-hero p{font-size:16px !important}
  .landing-mock-grid,.landing-three-grid,.landing-feature-grid,.landing-agent-grid,.landing-pricing-grid,
  .landing-footer-grid,.onboarding-form-grid,.onboarding-result-grid,.onboarding-persona-grid,
  .landing-hero-grid,.landing-industry-grid,.landing-stats-grid,.landing-newsletter-grid{grid-template-columns:1fr !important}
  .landing-newsletter-grid{gap:26px !important}
  .landing-hero-grid{text-align:center !important;gap:30px !important}
  .landing-hero-grid .landing-hero-ctas{justify-content:center !important}
  .landing-hero-visual{height:280px !important}
  /* Kena scales down and tucks in on narrow screens; at the smallest sizes the
     hero is centred and there is no corner left for her to hover off. */
  .kena-hero{width:92px !important;bottom:-40px !important;inset-inline-end:-16px !important}
  .landing-stats-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
  .landing-mock-grid{padding:14px !important}
  .landing-three-grid,.landing-agent-grid,.landing-pricing-grid{gap:12px !important}
  .landing-feature-grid{gap:24px !important}
  .landing-feature-reverse>div:first-child{order:2}
  .landing-feature-reverse>div:last-child{order:1}
  .landing-footer-grid{padding:44px 20px 30px !important;gap:28px !important}
  .onboarding-form-grid>div,.onboarding-result-grid>div{grid-column:1 !important}
  .app-content [style*="grid-template-columns"],.modal [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .app-content [style*="grid-column"],.modal [style*="grid-column"]{grid-column:1 !important}
  .app-content .card{min-width:0}
  .app-topbar-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .app-topbar-spacer{display:none}
  .app-topbar>.lang-wrap{display:none}
  .growth-tabs,.automation-tabs{max-width:100%;width:100% !important;overflow-x:auto;scrollbar-width:thin}
  .growth-tabs>button,.automation-tabs>button{flex:none}
  .agent-detail-hero{align-items:flex-start !important}
  .agent-detail-hero>div:nth-child(2){min-width:0;overflow-wrap:anywhere}
  .agent-detail-stats{width:100%;align-items:stretch !important}
  .agent-detail-stats>div{overflow-wrap:anywhere}
  .agent-detail-grid{grid-template-columns:minmax(0,1fr) !important}
  .integration-row{flex-wrap:wrap !important}
  .integration-row>div:nth-child(2){flex:1 1 180px !important;min-width:0}
  .integration-row .chip{margin-inline-start:48px}
  .integration-hero{align-items:flex-start;flex-wrap:wrap}
  .integration-hero>div:nth-child(2){min-width:0;flex:1 1 210px}
  .integration-hero p{overflow-wrap:anywhere}
  .modal-back{padding:12px}
  .modal{padding:20px;border-radius:14px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* The Product / Agents / Pricing hero. Same light treatment as the home page's
   so a visitor moving between them stays on one website, but with a narrower
   copy column, because these pages are entered deliberately and the headline
   does more work than the screenshot. */
.mk-page-hero{position:relative;overflow:hidden}
.mk-page-hero-glow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.4;pointer-events:none}
.mk-page-hero-inner{position:relative;padding-block:66px 60px;display:grid;
  grid-template-columns:1fr 1.06fr;gap:56px;align-items:center}
@media (max-width:900px){
  .mk-page-hero-inner{grid-template-columns:1fr;gap:38px;padding-block:48px 46px}
}

/* ===================== MONTHLY / ANNUAL PRICING TABS =====================
   Shared by the landing pricing block, the Pricing page and the in-app plan
   picker. A segmented control rather than a switch: a switch does not say what
   the "off" state means, and here both states are a real choice. */
.bill-toggle{display:inline-flex;gap:4px;background:#eef2f8;border:1px solid var(--line);
  border-radius:999px;padding:4px}
.bill-tab{display:inline-flex;align-items:center;gap:8px;border:none;background:transparent;cursor:pointer;
  border-radius:999px;padding:10px 22px;font:800 13.5px var(--font-body);color:var(--muted);
  transition:background .18s,color .18s,box-shadow .18s}
.bill-tab:hover{color:var(--navy)}
.bill-tab.on{background:#fff;color:var(--navy);box-shadow:0 2px 8px rgba(23,35,61,.12)}
.bill-save{background:rgba(14,168,111,.14);color:#0b7a52;border-radius:999px;padding:3px 9px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.bill-toggle-compact{display:flex;width:100%;background:#f4f7fc}
.bill-toggle-compact .bill-tab{flex:1;justify-content:center;padding:9px 12px;font-size:12.5px}

/* ============================ DOCUMENTATION ============================
   markena.co.uk/docs — sidebar + article. Deliberately quieter than the
   marketing pages: documentation is read, not scanned. */
.doc-hero{background:linear-gradient(168deg,#101b31 0%,#1a2c4d 60%,#123c72 100%);color:#fff}
.doc-hero-inner{padding-block:52px 46px;display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:end}
.doc-hero-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#8fb8f0}
.doc-hero-h1{font-family:var(--font-head);font-size:clamp(30px,4vw,42px);font-weight:800;letter-spacing:-.022em;margin:12px 0 10px;color:#fff}
.doc-hero-sub{font-size:16px;line-height:1.6;color:#a9bcdd;margin:0;max-width:56ch}
.doc-search{position:relative}
.doc-search-icon{position:absolute;inset-inline-start:16px;top:50%;transform:translateY(-50%);color:#7f93b8;display:inline-flex;pointer-events:none}
.doc-search-input{width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:#fff;
  border-radius:12px;padding:14px 18px;padding-inline-start:44px;font:600 14.5px var(--font-body)}
.doc-search-input::placeholder{color:#8298bd}
.doc-search-input:focus{outline:none;border-color:#4b9bff;background:rgba(255,255,255,.11)}

.doc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:52px;padding-block:44px 78px;align-items:start}
.doc-sidebar{position:sticky;top:22px;max-height:calc(100vh - 44px);overflow-y:auto;padding-inline-end:6px}
.doc-nav-group{margin-bottom:24px}
.doc-nav-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.doc-nav-link{display:block;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--muted);cursor:pointer;
  padding:6px 11px;border-radius:8px;border-inline-start:2px solid transparent;margin-inline-start:-2px}
.doc-nav-link:hover{color:var(--navy);background:#f4f7fc}
.doc-nav-link.on{color:var(--blue);background:#eef5ff;border-inline-start-color:var(--blue);font-weight:800}
.doc-nav-empty{font-size:13px;color:var(--faint);padding:6px 11px}

.doc-article{min-width:0;max-width:760px}
.doc-crumb{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.doc-h1{font-family:var(--font-head);font-size:clamp(27px,3.4vw,37px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;margin:10px 0 12px;color:var(--navy)}
.doc-lede{font-size:17px;line-height:1.65;color:var(--muted);margin:0 0 30px;padding-bottom:26px;border-bottom:1px solid var(--line)}

.doc-body{font-size:16px;line-height:1.78;color:var(--ink)}
.doc-body h2{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.012em;color:var(--navy);margin:40px 0 12px}
.doc-body h3{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--navy);margin:30px 0 8px}
.doc-body p{margin:0 0 16px}
.doc-body ul,.doc-body ol{margin:0 0 18px;padding-inline-start:22px}
.doc-body li{margin-bottom:8px}
.doc-body a{font-weight:700;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.doc-body code{background:#eef2f9;border:1px solid #e0e7f2;border-radius:5px;padding:1px 6px;font-size:.88em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#1e2e68}
.doc-body strong{color:var(--navy)}

.doc-steps{counter-reset:docstep;list-style:none;padding:0;margin:0 0 20px}
.doc-steps>li{counter-increment:docstep;position:relative;padding-inline-start:44px;margin-bottom:16px;min-height:30px}
.doc-steps>li::before{content:counter(docstep);position:absolute;inset-inline-start:0;top:1px;width:28px;height:28px;
  border-radius:9px;background:var(--blue);color:#fff;display:grid;place-items:center;font:800 13px var(--font-head)}
.doc-step-body{padding-top:3px}

.doc-note{border-inline-start:3px solid var(--blue);background:#f2f7ff;border-radius:0 11px 11px 0;
  padding:14px 18px;margin:0 0 20px;font-size:14.5px;line-height:1.65;color:#2c3f60}
.doc-note-warn{border-inline-start-color:var(--orange-dark);background:#fff8ec;color:#5c451c}
.doc-note-tip{border-inline-start-color:var(--green);background:#f0faf5;color:#1d4f3b}

.doc-table-wrap{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:13px}
.doc-table{width:100%;border-collapse:collapse;min-width:440px;background:#fff;font-size:14.5px}
.doc-table th{text-align:start;padding:12px 16px;background:#f7f9fd;font-family:var(--font-head);font-size:12.5px;
  font-weight:700;color:var(--navy);border-bottom:1px solid var(--line)}
.doc-table td{padding:12px 16px;border-top:1px solid var(--line-soft);vertical-align:top;color:var(--ink);line-height:1.6}

.doc-shot{margin:0 0 24px}
.doc-shot img{width:100%;border:1px solid var(--line);border-radius:14px;display:block;box-shadow:0 14px 34px rgba(23,35,61,.09)}
.doc-shot figcaption{font-size:12.5px;color:var(--faint);font-weight:600;margin-top:9px;text-align:center}

.doc-pager{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:44px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.doc-pager-item{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;
  padding:14px 17px;cursor:pointer;transition:border-color .18s,transform .18s}
.doc-pager-item:hover{border-color:#c4dbf8;transform:translateY(-2px)}
.doc-pager-item:last-child{text-align:end}
.doc-pager-dir{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.doc-pager-title{font-family:var(--font-head);font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.35}

.doc-foot-cta{margin-top:26px;background:#f6f8fc;border:1px solid var(--line);border-radius:15px;padding:22px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.doc-foot-title{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--navy)}
.doc-foot-cta p{margin:5px 0 0;font-size:14px;color:var(--muted);line-height:1.6;max-width:46ch}
.doc-foot-cta>div{flex:1;min-width:220px}

@media (max-width:900px){
  .doc-hero-inner{grid-template-columns:1fr;gap:24px;align-items:start}
  .doc-layout{grid-template-columns:1fr;gap:26px}
  .doc-sidebar{position:static;max-height:none;border-bottom:1px solid var(--line);padding-bottom:18px}
  .doc-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
  .doc-nav-group{margin-bottom:6px}
  .doc-pager{grid-template-columns:1fr}
  .doc-pager-item:last-child{text-align:start}
}

/* ---- team inbox: three panes, then two, then one ------------------------
   A phone has room for exactly one of rail/list/thread. Rather than shrink
   all three into uselessness, the rail becomes a horizontal strip of saved
   views and the contact sidebar folds under the transcript. */
@media (max-width:1180px){
  .inbox-grid{grid-template-columns:164px 1fr!important}
  .inbox-grid>*:nth-child(3){grid-column:1 / -1}
}
@media (max-width:760px){
  .first-value-steps,.plan-outcomes-grid{grid-template-columns:1fr!important}
  [data-save-status]{display:none}
  .inbox-grid{grid-template-columns:1fr!important}
  .inbox-grid>*:first-child{display:flex;flex-direction:row!important;flex-wrap:wrap;gap:6px!important}
  .inbox-grid>*:nth-child(3){grid-column:auto}
  .inbox-body{flex-wrap:wrap}
  .inbox-side{flex:1 1 100%!important;border-inline-start:none!important;border-top:1px solid #e9eef6;max-height:none!important}
  #inbox-thread{max-height:52vh!important}
}

/* ---- chatbot appearance: controls beside a sticky preview, then stacked ----
   Below 1080px the preview stops being a companion and becomes a banner: it
   moves above the controls and unsticks, because a 300px column next to a
   squeezed form is worse than either one at full width. */
@media (max-width:1080px){
  .wg-layout{grid-template-columns:1fr!important}
  .wg-layout>*:last-child{position:static!important;order:-1}
}

/* ===== SUPER ADMIN → PLATFORM SETTINGS ======================================
   Sixteen cards used to sit in one two-column stack, so finding the owner
   password meant scrolling past every video model queue. They are grouped into
   tabs now, wearing the same .settings-tab buttons as the customer app's
   settings page — the two pages solve the same problem and there is no reason
   for an owner to learn two tab styles.

   What differs is the panels. Over there, one tab renders at a time. Here every
   panel stays in the document and only its visibility is toggled, because this
   section is one enormous form with a Save button per card: re-rendering on a
   tab click would silently discard an API key half-typed in the tab being
   left. */
/* 64px is the height of the panel's own sticky header (14px padding, a 17px
   head-font title, 14px, 1px rule). Sticking any higher tucks the top of the
   tab pills underneath it. */
.sa-set-rail{position:sticky;top:64px;z-index:4;background:var(--bg);padding:6px 0 10px;margin:-6px 0 0}
.sa-set-panel{display:none;flex-direction:column;gap:16px}
.sa-set-panel.on{display:flex}
.sa-set-lede{font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.55;padding:0 2px;max-width:920px}
.sa-set-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.sa-set-grid>div{display:flex;flex-direction:column;gap:16px;min-width:0}
/* A lone column is capped at a readable measure — a password field stretched
   across a 1600px monitor looks like a mistake. */
.sa-set-single{display:flex;flex-direction:column;gap:16px;max-width:780px}
@media (max-width:1080px){ .sa-set-grid{grid-template-columns:1fr} }
.empty-state-visual{position:relative;width:112px;height:112px;margin-bottom:2px;display:grid;place-items:center;flex:none}
.empty-state-visual>.markena-mascot{position:absolute;inset:0;width:112px;height:112px;object-fit:contain}
.empty-state-glyph{position:relative;z-index:1;display:grid;place-items:center;color:var(--blue);font-size:32px;line-height:1;filter:drop-shadow(0 5px 12px rgba(3,172,254,.2))}

/* Super Admin on a small screen. The shell is a fixed 236px sidebar beside the
   content, written as an inline grid, so on a phone the content column was
   squeezed to ~150px and every section overflowed the viewport by 80-820px
   with the top bar's Sign out pushed off-screen entirely. There was no
   .sa-side rule anywhere — the back office had simply never been given a
   breakpoint. Stack the two, turn the sidebar into a horizontal scroller and
   let the panel behave like the customer app already does. */
@media (max-width:900px){
  .sa-shell{grid-template-columns:minmax(0,1fr) !important}
  .sa-side{position:static !important;height:auto !important;flex-direction:row !important;
    align-items:center;gap:6px !important;padding:10px 12px !important;overflow-x:auto;scrollbar-width:thin}
  .sa-side>*{flex:none}
  .sa-side>div[data-action]{white-space:nowrap}
  /* The brand block and the signed-in identity are desktop affordances; the
     top bar already names the section and carries its own Sign out. */
  .sa-side>div:first-child,.sa-side>div:last-child{display:none}
  .sa-topbar{padding:12px 14px !important;flex-wrap:wrap}
  .sa-body{padding:16px 14px !important}
  .sa-body [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important}
  .sa-body .card{min-width:0}
  .sa-body [style*="position:sticky"]{position:static !important}
}