/* ============================================================
   Business. — marketing design system
   Mirrors the product theme (osiris-fluent / SalesOS Fluent skin):
   light surfaces, Segoe/system type, 2px/8px radii, Fluent depth,
   flat (no gradients/glows). Token values copied READ-ONLY from
   public/fluent/tokens.css — those files are never edited here.
   Accent = product blue #0078d4.
   ============================================================ */
:root{
  /* ===== Accent (product blue) ===== */
  --accent:#0078d4; --accent-hover:#106ebe; --accent-pressed:#005a9e;
  --accent-selected:#eff6fc; --accent-soft:#deecf9;
  /* ===== Surfaces ===== */
  --bg:#ffffff; --canvas:#faf9f8; --shell:#f3f2f1; --bg-hover:#f3f2f1; --bg-pressed:#edebe9;
  /* ===== Strokes ===== */
  --stroke:#edebe9; --stroke-strong:#d2d0ce; --divider:#e1dfdd;
  /* ===== Text ===== */
  --text:#242424; --text-2:#605e5c; --text-3:#a19f9d; --on-accent:#ffffff;
  /* ===== Semantic ===== */
  --success:#107c10; --success-bg:#dff6dd; --warn:#ffaa44; --danger:#d13438;
  --opp:#f7821e; /* the opportunity/orange identity, used sparingly as a brand wink */
  /* ===== Type ===== */
  --font:'Segoe UI', system-ui, -apple-system, 'Segoe UI Web (West European)', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fw-reg:400; --fw-semi:600; --fw-bold:700;
  /* ===== Radius ===== */
  --r-sm:2px; --r-md:4px; --r-card:8px; --r-pill:999px;
  /* ===== Elevation (Fluent depth) ===== */
  --depth-4:0 1.6px 3.6px rgba(0,0,0,.10), 0 .3px .9px rgba(0,0,0,.07);
  --depth-8:0 3.2px 7.2px rgba(0,0,0,.10), 0 .6px 1.8px rgba(0,0,0,.07);
  --depth-16:0 6.4px 14.4px rgba(0,0,0,.11), 0 1.2px 3.6px rgba(0,0,0,.08);
  /* ===== Layout ===== */
  --maxw:1320px;          /* readable content track (text sections, footer) */
  --maxw-wide:1520px;     /* hero, product tour, feature grids — fills modern monitors */
  --gut:clamp(20px,4.5vw,64px); --ease:cubic-bezier(.33,0,.67,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:15px;line-height:1.55;color:var(--text);background:var(--canvas);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mk-wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.mk-wrap--wide{max-width:var(--maxw-wide)}

/* ===================== BRAND WORDMARK ===================== */
.mk-wm{font-weight:700;letter-spacing:-.02em;font-size:21px;color:var(--text);display:inline-flex;align-items:center}
.mk-wm i{font-style:normal;color:var(--accent)}            /* the dot follows the product accent */
.mk-wm--foot{font-size:17px}

/* ===================== BUTTONS ===================== */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border:1px solid var(--stroke-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--accent);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background .12s var(--ease),border-color .12s,box-shadow .12s}
.mk-btn:hover{background:var(--bg-hover);text-decoration:none}
.mk-btn .i{width:16px;height:16px}
.mk-btn--brand{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.mk-btn--brand:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.mk-btn--brand:active{background:var(--accent-pressed)}
.mk-btn--ghost{background:transparent;border-color:transparent;color:var(--accent)}
.mk-btn--ghost:hover{background:var(--accent-selected)}
.mk-btn--lg{height:46px;padding:0 22px;font-size:15px}
.mk-btn--block{width:100%}

/* ===================== HEADER + NAV ===================== */
.mk-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--stroke)}
.mk-nav{display:flex;align-items:center;gap:20px;height:56px}
.mk-nav__links{display:flex;align-items:center;gap:4px;margin-left:14px}
.mk-nav__links a{color:var(--text);font-size:14px;font-weight:500;padding:7px 11px;border-radius:var(--r-md);text-decoration:none}
.mk-nav__links a:hover{background:var(--bg-hover);text-decoration:none}
.mk-nav__links a.on{color:var(--accent)}
.mk-nav__cta{display:flex;align-items:center;gap:10px;margin-left:auto}
.mk-nav__signin{color:var(--text-2);font-size:14px;font-weight:500}
.mk-nav__signin:hover{color:var(--text);text-decoration:none}
/* hamburger */
.mk-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;margin-left:auto;
  border:1px solid var(--stroke-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);cursor:pointer}
.mk-burger .i{width:20px;height:20px}
/* mobile drawer */
.mk-menu{display:none;position:fixed;inset:56px 0 0;z-index:55;background:rgba(0,0,0,.32);}
.mk-menu.open{display:block}
.mk-menu__panel{background:var(--bg);border-bottom:1px solid var(--stroke);box-shadow:var(--depth-16);padding:10px var(--gut) 18px}
.mk-menu__panel a{display:block;padding:12px 6px;font-size:16px;font-weight:500;color:var(--text);border-bottom:1px solid var(--stroke)}
.mk-menu__panel a:hover{text-decoration:none;color:var(--accent)}
.mk-menu__cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}
@media(max-width:860px){
  .mk-nav__links{display:none}
  .mk-nav__cta{display:none}
  .mk-burger{display:flex}
}

/* ===================== SECTION SCAFFOLD ===================== */
.mk-section{padding:clamp(48px,6.5vw,92px) 0}
.mk-section--tint{background:var(--bg);border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.mk-section--shell{background:var(--shell)}
.mk-eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.mk-h1{font-size:clamp(2.3rem,4.7vw,3.9rem);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:var(--text)}
.mk-h2{font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.12;letter-spacing:-.02em;font-weight:700;color:var(--text)}
.mk-h3{font-size:17px;font-weight:600;color:var(--text)}
.mk-lead{font-size:clamp(1rem,1.6vw,1.18rem);color:var(--text-2);line-height:1.6}
.mk-sec-head{max-width:680px;margin-bottom:34px}
.mk-sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.mk-sec-head .mk-h2{margin-bottom:12px}

/* ===================== HERO ===================== */
.mk-hero{padding:clamp(40px,6vw,80px) 0 clamp(34px,5vw,60px)}
.mk-hero__grid{display:grid;grid-template-columns:1.02fr 1.08fr;gap:clamp(30px,4.5vw,72px);align-items:center}
.mk-hero__grid h1{margin:14px 0 18px}
.mk-hero__lead{max-width:560px;margin-bottom:26px}
.mk-hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.mk-hero__note{font-size:13px;color:var(--text-3)}
.mk-hero__stats{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--stroke)}
.mk-hero__stats b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.mk-hero__stats span{display:block;font-size:12.5px;color:var(--text-3);margin-top:3px}
@media(max-width:860px){.mk-hero__grid{grid-template-columns:1fr}.mk-hero__media{order:-1}}

/* ===================== PRODUCT WINDOW FRAME ===================== */
.mk-window{background:var(--bg);border:1px solid var(--stroke-strong);border-radius:10px;overflow:hidden;box-shadow:var(--depth-16)}
.mk-window__bar{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:var(--shell);border-bottom:1px solid var(--stroke)}
.mk-window__dots{display:flex;gap:6px}
.mk-window__dots i{width:11px;height:11px;border-radius:50%;background:#d2d0ce;display:block}
.mk-window__url{flex:1;max-width:340px;margin:0 auto;height:22px;border-radius:var(--r-pill);background:var(--bg);border:1px solid var(--stroke);
  display:flex;align-items:center;justify-content:center;gap:6px;font-size:11.5px;color:var(--text-3)}
.mk-window__url .i{width:11px;height:11px}
.mk-window__body{padding:0}
.mk-window img{width:100%;display:block}
.mk-window__cap{font-size:12.5px;color:var(--text-2);padding:10px 14px;border-top:1px solid var(--stroke);background:var(--bg)}

/* ===================== PRODUCT SURFACE (native HTML, mirrors the app) ===================== */
.ps{font-size:13px;color:var(--text);background:var(--bg)}
.ps__head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--stroke)}
.ps__title{font-size:15px;font-weight:700}
.ps__sub{font-size:11.5px;color:var(--text-3)}
.ps__spacer{margin-left:auto}
.ps__live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--success)}
.ps__live i{width:7px;height:7px;border-radius:50%;background:var(--success);display:block;box-shadow:0 0 0 3px var(--success-bg)}
.ps-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--stroke)}
.ps-row:last-child{border-bottom:0}
.ps-tile{width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.ps-tile .i{width:16px;height:16px;color:#fff}
.ps-nm{font-weight:600}
.ps-meta{font-size:11px;color:var(--text-3)}
.ps-val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.ps-pill--ok{background:var(--success-bg);color:var(--success)}
.ps-pill--accent{background:var(--accent-selected);color:var(--accent-pressed)}
.ps-pill--warn{background:#fff4ce;color:#8a6d00}
.ps__iris{display:flex;align-items:center;gap:11px;padding:12px 14px;background:var(--accent-selected);border-top:1px solid var(--stroke)}
.ps__iris .spark{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;flex:none}
.ps__iris .spark .i{width:16px;height:16px;color:#fff}
.ps__iris p{font-size:12.5px;color:var(--text-2);line-height:1.45}
.ps__iris b{color:var(--text)}
/* object-tile palette (mirrors slds object icons) */
.t-lead{background:#f88962}.t-account{background:#7f8de1}.t-contact{background:#a094ed}.t-opp{background:#ff7a1a}
.t-case{background:#e3528f}.t-invoice{background:#08a69e}.t-order{background:#5867e8}.t-report{background:#06a59a}
.t-po{background:#5867e8}.t-quote{background:#85d6c2}.t-cal{background:#576574}.t-dash{background:#ee65a4}

/* ===================== TRUST BAR ===================== */
.mk-trust{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;justify-content:center;
  padding:18px 0;color:var(--text-2);font-size:13px}
.mk-trust__item{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mk-trust__item .i{width:16px;height:16px;color:var(--accent)}
/* integration strip */
.mk-logos{display:flex;align-items:center;gap:clamp(16px,3vw,34px);flex-wrap:wrap;justify-content:center}
.mk-logo{display:inline-flex;align-items:center;gap:9px;color:var(--text-2);font-size:14px;font-weight:600;opacity:.85}
.mk-logo svg,.mk-logo img{width:22px;height:22px}
.mk-logos__note{text-align:center;font-size:12.5px;color:var(--text-3);margin-top:14px}

/* ===================== STATS ===================== */
.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.mk-stats{grid-template-columns:1fr}}

/* ===================== CARD + GRIDS ===================== */
.mk-card{background:var(--bg);border:1px solid var(--stroke);border-radius:var(--r-card);padding:22px;box-shadow:var(--depth-4)}
.mk-card .i{}
.mk-card .n{font-size:30px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.mk-card .n u{color:var(--accent);text-decoration:none}
.mk-card .l{font-size:14px;color:var(--text-2);margin-top:7px}
.mk-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:760px){.mk-steps{grid-template-columns:1fr}}
.mk-step .num{width:28px;height:28px;border-radius:var(--r-sm);background:var(--accent-selected);color:var(--accent-pressed);
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.mk-step h3{margin-bottom:7px}
.mk-step p{font-size:14px;color:var(--text-2)}
/* 4-up variant (migration) — responsive without an inline override */
.mk-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.mk-grid4{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mk-grid4{grid-template-columns:1fr}}
.mk-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:920px){.mk-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mk-features{grid-template-columns:1fr}}
.mk-feat .tile{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.mk-feat .tile .i{width:19px;height:19px;color:#fff}
.mk-feat h3{margin-bottom:6px}
.mk-feat p{font-size:13.5px;color:var(--text-2)}

/* ===================== PRODUCT TOUR ===================== */
.mk-tour{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:760px){.mk-tour{grid-template-columns:1fr}}

/* split feature row (text + product window) — collapses cleanly on mobile */
.mk-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.5vw,64px);align-items:center}
.mk-split--rev{grid-template-columns:.95fr 1.05fr}   /* product window on the left at desktop */
@media(max-width:820px){
  .mk-split,.mk-split--rev{grid-template-columns:1fr;gap:26px}
  .mk-split--rev .mk-window{order:2}                 /* on mobile, text first, then the window */
}

/* contact page: form + reach-us column. Stacks on mobile (it was an inline style, which can't
   carry a media query, so the WhatsApp numbers + email ran off-screen on phones). */
.mk-contact{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.mk-contact>*{min-width:0}                          /* long numbers/emails wrap instead of widening the track */
@media(max-width:820px){.mk-contact{grid-template-columns:1fr}}

/* ===================== ROI ===================== */
.mk-roi{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:stretch}
@media(max-width:760px){.mk-roi{grid-template-columns:1fr}}
.mk-roi__in{background:var(--bg);border:1px solid var(--stroke);border-radius:var(--r-card);padding:24px;box-shadow:var(--depth-4)}
.mk-roi__in label{display:flex;justify-content:space-between;font-size:14px;font-weight:500;color:var(--text-2);margin:16px 0 9px}
.mk-roi__in label:first-child{margin-top:0}
.mk-roi__in .val{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mk-roi__in input[type=range]{width:100%;accent-color:var(--accent);height:20px}
.mk-roi__out{background:var(--accent-selected);border:1px solid var(--accent-soft);border-top:3px solid var(--accent);
  border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;justify-content:center}
.mk-roi__out .cap{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--accent-pressed)}
.mk-roi__out .big{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;letter-spacing:-.03em;color:var(--text);margin:8px 0;font-variant-numeric:tabular-nums}
.mk-roi__out .sub{font-size:13.5px;color:var(--text-2)}
.mk-roi__out .sub b{color:var(--text)}

/* ===================== PRICING ===================== */
.mk-price{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
@media(max-width:1000px){.mk-price{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.mk-price{grid-template-columns:1fr}}
.mk-pcard{background:var(--bg);border:1px solid var(--stroke);border-radius:var(--r-card);padding:24px;display:flex;flex-direction:column;box-shadow:var(--depth-4);position:relative}
.mk-pcard .pn{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.mk-pcard .amt{font-size:34px;font-weight:700;letter-spacing:-.02em;color:var(--text)}
.mk-pcard .amt .per{font-size:15px;font-weight:500;color:var(--text-3)}
.mk-pcard .pdesc{font-size:13.5px;color:var(--text-2);margin:5px 0 18px}
.mk-pcard ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:20px}
.mk-pcard li{display:flex;gap:9px;font-size:13.5px;color:var(--text-2)}
.mk-pcard li .i{width:15px;height:15px;color:var(--accent);flex:none;margin-top:2px}
.mk-pcard .mk-btn{margin-top:auto}
.mk-pcard--pop{border-color:var(--accent);border-top:3px solid var(--accent);box-shadow:var(--depth-8)}
.mk-pcard .tag{position:absolute;top:20px;right:20px;font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;background:var(--accent);padding:3px 8px;border-radius:var(--r-sm)}
.mk-price-note{text-align:center;font-size:14px;color:var(--text-2);margin-top:20px}

/* ===================== SECURITY GRID ===================== */
.mk-sec{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:920px){.mk-sec{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.mk-sec{grid-template-columns:1fr}}
.mk-sec__item{display:flex;gap:12px;background:var(--bg);border:1px solid var(--stroke);border-radius:var(--r-card);padding:18px;box-shadow:var(--depth-4)}
.mk-sec__item .ic{width:34px;height:34px;border-radius:var(--r-md);background:var(--accent-selected);color:var(--accent-pressed);display:flex;align-items:center;justify-content:center;flex:none}
.mk-sec__item .ic .i{width:18px;height:18px}
.mk-sec__item h3{margin-bottom:4px}
.mk-sec__item p{font-size:13px;color:var(--text-2)}

/* ===================== FAQ (no JS — native details) ===================== */
.mk-faq{max-width:780px;margin:0 auto}
.mk-faq details{border:1px solid var(--stroke);border-radius:var(--r-md);background:var(--bg);margin-bottom:10px;box-shadow:var(--depth-4)}
.mk-faq summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mk-faq summary::-webkit-details-marker{display:none}
.mk-faq summary::after{content:"+";color:var(--accent);font-size:20px;font-weight:400;line-height:1}
.mk-faq details[open] summary::after{content:"\2212"}
.mk-faq p{padding:0 18px 16px;font-size:14px;color:var(--text-2)}

/* ===================== CTA + LEAD FORM ===================== */
.mk-cta{background:var(--bg);border:1px solid var(--stroke);border-radius:var(--r-card);padding:clamp(26px,4vw,44px);box-shadow:var(--depth-8)}
.mk-cta .mk-h2{margin:8px 0 10px}
.mk-cta__lead{font-size:15px;color:var(--text-2);max-width:560px;margin-bottom:24px}
.mk-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px;max-width:660px}
@media(max-width:560px){.mk-form{grid-template-columns:1fr}}
.mk-field{display:flex;flex-direction:column;gap:6px}
.mk-field.full{grid-column:1/-1}
.mk-field label{font-size:13px;font-weight:600;color:var(--text)}
.mk-field label .req{color:var(--accent)}
.mk-field input,.mk-field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--text);background:var(--bg);
  border:1px solid var(--stroke-strong);border-radius:var(--r-sm);padding:10px 12px;transition:border-color .12s,box-shadow .12s;resize:vertical}
.mk-field input:focus,.mk-field textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mk-field input[aria-invalid="true"],.mk-field textarea[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px rgba(209,52,56,.16)}
.mk-field .err{font-size:12.5px;color:var(--danger);min-height:0}
.mk-form__submit{grid-column:1/-1}
.mk-form__hint{grid-column:1/-1;font-size:12.5px;color:var(--text-3)}
.mk-lead-ok{display:none;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--success);
  background:var(--success-bg);border:1px solid #b7e0b3;border-radius:var(--r-md);padding:14px 16px;margin-top:8px}
.mk-lead-ok.show{display:flex}
.mk-lead-ok .i{width:20px;height:20px;color:var(--success)}

/* ===================== FOOTER ===================== */
.mk-footer{background:var(--bg);border-top:1px solid var(--stroke)}
.mk-footer__in{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  max-width:var(--maxw);margin:0 auto;padding:34px var(--gut)}
.mk-footer__links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px}
.mk-footer__links a{color:var(--text-2)}
.mk-footer__links a:hover{color:var(--accent)}
.mk-footer__legal{font-size:12px;color:var(--text-3)}
.mk-footer__legal a{color:var(--text-3)}

/* ===================== REVEAL ON SCROLL ===================== */
.mk-reveal{opacity:1;transform:none}
@media(prefers-reduced-motion:no-preference){
  .mk-reveal{opacity:.001;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .mk-reveal.in{opacity:1;transform:none}
}

/* ============================================================
   LIVE PRODUCT DEMOS
   The .ps product surfaces above animate when scrolled into view.
   PROGRESSIVE ENHANCEMENT: the static markup is already the FINISHED
   demo. marketing.js only ADDS the .demo-arm class (which hides the
   later beats) once it has confirmed motion is allowed — so with JS
   off OR prefers-reduced-motion, none of this fires and the reader
   sees the complete, populated product surface.
   ============================================================ */
.mk-window{position:relative}
.mk-window__media{position:relative}

/* bigger, more confident hero product window on wide screens */
.mk-hero__media .mk-window{box-shadow:var(--depth-16),0 40px 80px -40px rgba(0,0,0,.22)}
@media(min-width:1180px){
  .mk-hero__media .mk-window{transform:perspective(1600px) rotateY(-3deg) rotateX(1.2deg);transform-origin:left center}
}
@media(prefers-reduced-motion:reduce){.mk-hero__media .mk-window{transform:none}}

/* --- staggered row reveal --- */
.mk-window.demo-arm .d-row{opacity:0;transform:translateY(10px)}
.mk-window.demo-play .d-row{opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}

/* --- typewriter line (iris answers + typed questions) --- */
.d-type__caret{display:none;width:2px;height:1.05em;margin-left:1px;background:var(--accent);
  vertical-align:-2px;border-radius:1px}
.d-type__caret.on{display:inline-block;animation:d-blink 1s steps(1) infinite}
@keyframes d-blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* --- "iris is thinking" dots, shown before an answer types --- */
.d-typing{display:none;align-items:center;gap:4px;padding:2px 0}
.d-typing.on{display:inline-flex}
.d-typing i{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.4;display:block;
  animation:d-bounce 1.1s ease-in-out infinite}
.d-typing i:nth-child(2){animation-delay:.18s}.d-typing i:nth-child(3){animation-delay:.36s}
@keyframes d-bounce{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

/* --- conversation beats (iris chat): revealed one at a time by JS --- */
.mk-window.demo-arm .d-beat{opacity:0;transform:translateY(8px)}
.mk-window.demo-arm .d-beat.show{opacity:1;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}

/* --- count-up value gets a brief accent flash when it lands --- */
.d-count.landed{animation:d-flash .6s var(--ease)}
@keyframes d-flash{0%{color:var(--accent)}100%{color:inherit}}

/* --- pill swap (e.g. Assign -> On the way) --- */
.d-swap.changed{animation:d-pop .42s var(--ease)}
@keyframes d-pop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}

/* --- PAID stamp over the invoice window --- */
.d-stamp{position:absolute;top:46%;right:18px;display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--success);
  border:2px solid var(--success);border-radius:6px;padding:4px 9px;transform:rotate(-9deg);
  background:rgba(255,255,255,.7);pointer-events:none}
.d-stamp .i{width:15px;height:15px}
.mk-window.demo-arm .d-stamp{opacity:0}
.mk-window.demo-play .d-stamp{opacity:0;transform:rotate(-9deg) scale(1.6)}
.mk-window.demo-play .d-stamp.in{opacity:1;transform:rotate(-9deg) scale(1);
  transition:opacity .3s var(--ease),transform .42s cubic-bezier(.2,1.4,.3,1)}

/* --- mini Kanban (features CRM: a deal slides Proposal -> Won) --- */
.d-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px 14px}
.d-kanban__col{background:var(--shell);border:1px solid var(--stroke);border-radius:var(--r-md);padding:8px;min-height:128px}
.d-kanban__cl{display:flex;align-items:center;justify-content:space-between;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);margin-bottom:8px}
.d-kanban__cl .ct{color:var(--accent)}
.d-kanban__card{background:var(--bg);border:1px solid var(--stroke-strong);border-radius:var(--r-md);
  padding:8px 10px;box-shadow:var(--depth-4);margin-bottom:8px;will-change:transform}
.d-kanban__card:last-child{margin-bottom:0}
.d-kanban__card .nm{font-weight:600;font-size:12.5px;color:var(--text)}
.d-kanban__card .v{font-weight:700;font-size:12px;color:var(--text-2);margin-top:2px;font-variant-numeric:tabular-nums}
.d-kanban__card.is-hero{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--depth-8)}
.d-kanban__card.flip{transition:transform .58s cubic-bezier(.4,0,.2,1)}
.d-kanban__card.is-won .v{color:var(--success)}