/* Public marketing site — the homepage body (Views/Home/Index.cshtml and its partials), implemented from the "Website
   redesign" reference mockup in docs/. The header, footer, Geist faces, .mk base and tokens and the shared buttons live
   in wwwroot/css/marketing-shell.css, which _MarketingLayout loads first; this file builds on it.

   SCOPE: every rule is under .mk, so the Pricing body, which shares _MarketingLayout, and every portal page are
   unaffected.

   STRUCTURE:
     1. The mockup's own rules, in the mockup's order, kept only where every class they name is used here (so the
        cascade is the mockup's). Its class names are kept, except .btn / .lead / .nav / .foot, renamed .mk-btn /
        .mk-lead / .mk-navbar / .mk-foot so Bootstrap's classes never mix in. Keyframes are prefixed mk-.
     2. The mockup's mobile composition (its .mob frame) as the max-width: 860px media query. Its .wrap padding stays
        here, after the section rules it overrides (the header and footer have their own copy in marketing-shell.css).
     3. Overrides for real links and lists, 44 × 44 touch targets, contrast, and the narrowest screens. */

/* ---- 1. the mockup */
.mk .mono {font-family:"Geist Mono",ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}

.mk .mk-btn.lg {height:50px;padding:0 24px;font-size:16px;border-radius:13px}
.mk h1, .mk h2, .mk h3 {margin:0;letter-spacing:-.035em;font-weight:700}
.mk .eyebrow {display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#1448CC}
.mk .eyebrow i {width:7px;height:7px;border-radius:99px;background:#1A5CFF;box-shadow:0 0 0 4px #E3ECFF}
.mk .eyebrow.plain {color:#5B6472;letter-spacing:.02em;text-transform:uppercase;font-size:12.5px}
.mk .mk-lead {font-size:19px;line-height:1.55;color:#4A5361;margin:0;max-width:520px}

.mk .big {font-size:17px;line-height:1.55;margin:10px 0 0}
.mk .ctas {display:flex;gap:10px;flex-wrap:wrap}
.mk .note {font-size:13.5px;color:#6B7380}
.mk .dash {height:100%;border-radius:16px;border:1px solid #DDE1E7;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(11,18,32,.04),0 30px 60px -20px rgba(11,18,32,.22)}
.mk .dtop {height:42px;flex:none;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid #EEF0F3;color:#0B1220}
.mk .dorg {font-size:11.5px;color:#6B7380;margin-right:8px}
.mk .dorg b {color:#0B1220}
.mk .dme {display:flex;align-items:center;gap:6px;font-size:11.5px;padding:3px 8px 3px 3px;border:1px solid #E4E7EC;border-radius:8px}
.mk .dme i {width:18px;height:18px;border-radius:99px;background:#6B7380;color:#fff;font-style:normal;font-size:9px;display:flex;align-items:center;justify-content:center}
.mk .dbody {flex:1;display:flex;min-height:0}
.mk .drail {width:34px;border-right:1px solid #EEF0F3;display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:12px}
.mk .drail i {width:12px;height:12px;border-radius:3px;background:#D5DAE1}
.mk .drail i.on {background:#1A5CFF}
.mk .dlist {width:220px;border-right:1px solid #EEF0F3;padding:10px;display:flex;flex-direction:column;gap:3px;font-size:11.5px;overflow:hidden}
.mk .dbtns {display:flex;gap:4px;margin-bottom:6px}
.mk .dbtns span {padding:3px 7px;border:1px solid #D5DAE1;border-radius:5px;font-size:10.5px;white-space:nowrap}
.mk .dgrp, .mk .drow, .mk .dtask {display:flex;gap:7px;align-items:flex-start;padding:4px 2px}
.mk .drow {padding-left:16px}
.mk .dtask {padding-left:12px;align-items:center}
.mk .tri {font-size:9px;color:#4A5361;margin-top:3px}
.mk .ti {width:14px;display:flex;justify-content:center}
.mk .dn {display:flex;flex-direction:column;gap:1px}
.mk .dn b {font-weight:600}
.mk .dn span {color:#6B7380;font-size:10.5px}
.mk .dmap {flex:1;position:relative;overflow:hidden}
.mk .dfoot {height:28px;flex:none;border-top:1px solid #EEF0F3;display:flex;align-items:center;gap:8px;padding:0 10px;font-size:10px;color:#4A5361;white-space:nowrap;overflow:hidden}
.mk .dfb {border:1px solid #D5DAE1;border-radius:4px;padding:1px 6px}
@keyframes mk-draw {to{stroke-dashoffset:0}
}
.mk .phwrap {position:relative;flex:none}
.mk .phone {box-sizing:border-box;width:392px;height:846px;padding:11px;border-radius:56px;background:#0B0D12;transform-origin:top left;position:absolute;left:0;top:0;box-shadow:0 30px 60px rgba(11,18,32,.28)}
.mk .pscr {width:370px;height:824px;border-radius:45px;overflow:hidden;position:relative;background:#fff}
.mk .pstat {position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;font-size:16px;z-index:5;letter-spacing:-1px}
.mk .island {width:120px;height:34px;border-radius:20px;background:#000}
.mk .pmap {position:absolute;left:0;right:0;top:0;height:330px}
.mk .psheet {position:absolute;left:0;right:0;top:300px;bottom:0;background:#fff;border-radius:26px 26px 0 0;padding:12px 22px;box-shadow:0 -8px 24px rgba(11,18,32,.08)}
.mk .pgrab {width:40px;height:5px;border-radius:3px;background:#D5DAE1;margin:0 auto 14px}
.mk .pstart {flex:1;height:52px;border-radius:14px;background:#1A5CFF;color:#fff;font-size:18px;font-weight:600;display:flex;align-items:center;justify-content:center}
.mk .pstart.sm {height:32px;font-size:13px;border-radius:9px;margin-top:6px}
.mk .plr {display:flex;gap:14px;padding:10px 0;border-bottom:1px solid #F0F2F5;font-size:16px}
.mk .plr b {font-weight:600}
.mk .plr span span {color:#7B8494;font-size:14px}
.mk .pln {font-weight:700;width:26px;font-size:15px;padding-top:1px}
.mk .phome {position:absolute;bottom:8px;left:50%;margin-left:-67px;width:134px;height:5px;border-radius:3px;background:#0B1220}
.mk .pproof {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk .pph {height:110px;border-radius:16px;background:#F4F5F7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:14px;color:#4A5361}
.mk .sec {padding-top:110px}
.mk .shead {max-width:640px;margin-bottom:44px}
.mk .shead h2 {font-size:42px;line-height:1.08;margin-top:10px}
.mk .shead.mk-row {max-width:none;display:flex;justify-content:space-between;align-items:flex-end}
.mk .frow {display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:center;padding:36px 0;border-top:1px solid #EEF0F3}
.mk .frow.flip .ftxt {order:2}
.mk .ftxt {display:flex;flex-direction:column;gap:12px;max-width:440px}
.mk .fnum {font-size:13px;color:#1A5CFF;font-weight:600}
.mk .ftxt h3 {font-size:30px;line-height:1.12}
.mk .ftxt p {margin:0;font-size:17px;line-height:1.6;color:#4A5361}
.mk .vis {min-height:340px;border-radius:20px;background:#F6F7F9;border:1px solid #ECEEF1;padding:28px;box-sizing:border-box;position:relative}
.mk .tag {font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:#EAF0FF;color:#1448CC;align-self:flex-start}
.mk .tw {color:#1448CC!important;font-weight:500}
.mk .assign {position:absolute;left:20px;right:20px;bottom:20px;background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:14px;font-size:14px;box-shadow:0 14px 30px -12px rgba(11,18,32,.2)}
.mk .assign .arrow {color:#8A93A1}
.mk .drv {display:flex;gap:10px;align-items:center}
.mk .drv i {width:30px;height:30px;border-radius:99px;background:#0B1220;color:#fff;font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mk .flab {font-size:12px;color:#6B7380}
.mk .okp {display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#0F7B55;background:#E3F4EC;padding:3px 8px;border-radius:6px;align-self:flex-start}
.mk .fdot {position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:99px;background:#1A5CFF;animation:mk-trav 2.4s ease-in-out infinite}
.mk .fdot.d2 {animation-delay:1.2s}
@keyframes mk-trav {0%{left:0;opacity:0}
15%{opacity:1}
85%{opacity:1}
100%{left:calc(100% - 10px);opacity:0}
}
.mk .tlink {border:0;background:none;color:#1448CC;font-size:15px;font-weight:600;padding:0}
.mk .tlink:hover {text-decoration:underline}
.mk .final {margin-top:110px;border-radius:26px;background:#0B1220;color:#fff;padding:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.mk .final h2 {font-size:40px;line-height:1.08}
.mk .final p {margin:12px 0 0;color:#B7C0CE;font-size:17px}
.mk .final .ctas {position:relative;z-index:1}
.mk .final>div:first-child {max-width:560px;position:relative;z-index:1}

.mk .page {animation:mk-fu .4s cubic-bezier(.2,.8,.2,1)}
.mk .rv {animation:mk-fu .7s cubic-bezier(.2,.8,.2,1) both}
.mk .d2 {animation-delay:.12s}

@media (prefers-reduced-motion: reduce) {
.mk .rv, .mk .page {animation:none}
.mk .fdot {animation:none;left:calc(50% - 5px)}
}

.mk .hero2 {padding-top:56px;display:flex;flex-direction:column;align-items:center}
.mk .htxt2 {display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;max-width:820px}
.mk .htxt2 h1 {font-size:72px;line-height:1;letter-spacing:-.048em}
.mk .htxt2 .mk-lead {text-align:center;max-width:600px;font-size:20px}
.mk .htxt2 .ctas {justify-content:center}
.mk .stg-wrap {width:100%;margin-top:44px}
.mk .stg {position:relative;height:610px;width:1120px;max-width:100%;margin:0 auto}
.mk .sdash {position:absolute;left:0;right:170px;top:0;height:560px}
.mk .sphone {position:absolute;right:0;bottom:0}
.mk .dash.mk-dash-hero .dlist {width:250px}
.mk .dash.mk-dash-hero {box-shadow:0 1px 2px rgba(11,18,32,.04),0 40px 80px -30px rgba(11,18,32,.28)}
.mk .neword {display:none;background:#EEF3FF;border-radius:8px;margin:2px 0;padding:6px 6px 6px 10px!important;animation:mk-fu .35s}
.mk .newt {margin-left:auto;font-size:10px;font-weight:700;color:#1448CC;background:#fff;border:1px solid #D6E1FF;border-radius:5px;padding:1px 5px}
.mk .stg.c0 .neword, .mk .stg.p1:not(.as) .neword {display:flex}
.mk .u0 {display:none}
.mk .stg.c0 .u0, .mk .stg.p1:not(.as) .u0 {display:inline}
.mk .stg.c0 .u1, .mk .stg.p1:not(.as) .u1 {display:none}
.mk .hl0 {transition:all .3s}
.mk .stg.c0 .hl0 {background:#1A5CFF;color:#fff;border-color:#1A5CFF}
.mk .k1, .mk .k2 {display:none}
.mk .stg.as .k0 {display:none}
.mk .stg.as .k1 {display:inline}
.mk .stg.fin .k1 {display:none}
.mk .stg.fin .k2 {display:inline;color:#0F7B55;font-weight:600}
.mk .d2row {transition:background .3s;border-radius:8px}
.mk .stg.as .d2row {background:#F5F8FF}
.mk .sub2 {display:none;padding-left:30px;flex-direction:column;gap:2px}
.mk .stg.as .sub2 {display:flex;animation:mk-fu .35s}
.mk .sr {display:flex;align-items:center;gap:7px;font-size:11px;padding:3px 0}
.mk .sg {width:16px;height:16px;border-radius:99px;background:#1A5CFF;color:#fff;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex:none}
.mk .sst {margin-left:auto;font-size:9.5px;font-weight:600}
.mk .ss0 {color:#1448CC;background:#EEF3FF;padding:1px 5px;border-radius:4px}
.mk .ss1 {display:none;color:#0F7B55;background:#E3F4EC;padding:1px 5px;border-radius:4px}
.mk .stg.fin .ss0 {display:none}
.mk .stg.fin .ss1 {display:inline}
.mk .ra {transition:opacity .5s}
.mk .rb {stroke-dasharray:1;stroke-dashoffset:1}
.mk .stg.op .ra {opacity:0}
.mk .stg.op .rb {stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.4,0,.2,1)}
.mk .np {opacity:0;transition:opacity .4s}
.mk .stg.p1 .np {opacity:1}
.mk .pulse {opacity:0}
.mk .stg.p1:not(.as) .pulse {animation:mk-pl 1.4s ease-out infinite}
@keyframes mk-pl {0%{opacity:.7;r:12}
100%{opacity:0;r:26}
}
.mk .olnk {opacity:0;transition:opacity .4s}
.mk .stg.p1 .olnk {opacity:.55}
.mk .stg.op .olnk {opacity:0}
.mk .dlvok, .mk .pkpok {opacity:0;transition:opacity .4s}
.mk .stg.fin .dlvok, .mk .stg.fin .pkpok {opacity:1}
.mk .stg.fin .dlv, .mk .stg.fin .pkp {opacity:0}
.mk .crt {position:absolute;left:16px;top:16px;width:250px;background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;font-size:12.5px;box-shadow:0 18px 40px -16px rgba(11,18,32,.3);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s;pointer-events:none}
.mk .stg.c0 .crt {opacity:1;transform:none}
.mk .cf {display:flex;gap:8px;align-items:flex-start}
.mk .cf .dn span {font-size:11px}
.mk .cbtn {height:30px;border-radius:8px;background:#1A5CFF;color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center}
.mk .mchip {position:absolute;left:50%;bottom:18px;transform:translate(-50%,8px);display:flex;align-items:center;gap:8px;padding:9px 14px;border-radius:12px;background:#fff;border:1px solid #E4E7EC;font-size:13px;white-space:nowrap;box-shadow:0 14px 30px -12px rgba(11,18,32,.25);opacity:0;transition:opacity .35s,transform .35s}
.mk .mchip.ok {color:#0B5C40}
.mk .av2 {width:22px;height:22px;border-radius:99px;background:#0B1220;color:#fff;font-style:normal;font-size:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.mk .stg.st2 .ch2, .mk .stg.st3 .ch3, .mk .stg.fin .ch6 {opacity:1;transform:translate(-50%,0)}
.mk .pnote {position:absolute;left:12px;right:12px;top:50px;z-index:8;display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(250,250,252,.96);box-shadow:0 10px 30px rgba(11,18,32,.18);font-size:15px;opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .35s}
.mk .pnote .dn span {font-size:13px}
.mk .stg.nt .pnote {opacity:1;transform:none}
.mk .pnew {display:none!important}
.mk .stg.ph .pnew {display:flex!important;background:#EEF3FF;border-radius:10px;padding-left:6px;margin:2px 0}
.mk .stg.cp .pnew, .mk .stg.fin .pnew {background:transparent}
.mk .pk {margin-left:auto;display:flex;align-items:center}
.mk .pnew .pk {display:none}
.mk .stg.fin .pnew .pk {display:flex}
.mk .plr.ok .pln {color:#0F7B55}
.mk .plr.cur .pln {color:#1A5CFF}
.mk .pc1 {display:none}
.mk .stg.ph .pc0 {display:none}
.mk .stg.ph .pc1 {display:inline}
.mk .pcomp {position:absolute;left:0;right:0;bottom:0;height:470px;background:#fff;border-radius:26px 26px 0 0;padding:12px 22px;box-shadow:0 -12px 30px rgba(11,18,32,.16);display:flex;flex-direction:column;gap:14px;transform:translateY(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);z-index:9}
.mk .stg.cp .pcomp {transform:none}
.mk .sig {stroke-dasharray:1;stroke-dashoffset:1}
.mk .stg.cp .sig {stroke-dashoffset:0;transition:stroke-dashoffset 1s .4s}
.mk .pcbtn {flex:none;transition:background .3s}
.mk .stg.cp .pcbtn {animation:mk-press 1.75s forwards}
@keyframes mk-press {0%,70%{background:#1A5CFF}
100%{background:#0F7B55}
}
.mk .dctl {display:flex;align-items:center;gap:8px;margin:14px auto 0;width:1120px;max-width:100%}
.mk .cbt {width:36px;height:36px;border-radius:99px;border:1px solid #DDE1E7;background:#fff;font-size:14px;color:#0B1220;display:flex;align-items:center;justify-content:center;flex:none}
.mk .cbt:hover {border-color:#B9C0CA}
.mk .dark {margin-top:120px;background:#0A1430;color:#fff;padding:110px 0 100px;position:relative}
.mk .dark .shead h2 {color:#fff}
.mk .dark .big {color:#A6B2C9}
.mk .eyebrow.dk {color:#8FB0FF}
.mk .dflow {display:grid;grid-template-columns:1fr 70px 1fr 70px 1fr;align-items:start}
.mk .dstep {display:flex;flex-direction:column;gap:12px}
.mk .dstep p {margin:0;font-size:15px;color:#A6B2C9;line-height:1.5}
.mk .dark .flab {color:#7F8DAA}
.mk .dcard {background:#111E43;border:1px solid #1F2D58;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:6px;min-height:160px;font-size:14.5px;transition:border-color .2s,transform .2s}
.mk .dcard:hover {border-color:#34508F;transform:translateY(-2px)}
.mk .dm {color:#8B98B3;font-size:12.5px}
.mk .dsep {height:1px;background:#1F2D58;margin:4px 0}
.mk .tag.dk {background:rgba(26,92,255,.2);color:#A9C1FF}
.mk .dline {height:2px;background:#22325F;margin-top:100px;position:relative}
.mk .dline .fdot {background:#5D8BFF}
.mk .dkeys {display:flex;flex-wrap:wrap;gap:8px;margin-top:56px;padding-top:28px;border-top:1px solid #1C2A52}
.mk .dkeys span {font-size:13.5px;color:#C5CEDF;padding:7px 12px;border:1px solid #233462;border-radius:99px}
@media (prefers-reduced-motion: reduce) {
.mk .rb, .mk .np, .mk .ra, .mk .crt, .mk .mchip, .mk .pnote, .mk .pcomp, .mk .sig {transition:none!important}
.mk .pulse, .mk .pcbtn {animation:none!important}
}

.mk h1, .mk h2, .mk h3 {font-family:var(--fh);font-weight:var(--hw);letter-spacing:var(--ht)}

.mk .mk-lead {color:var(--body);font-size:18.5px;line-height:1.58;font-weight:400}

.mk .big {font-size:17px;line-height:1.6}
.mk .eyebrow.plain {font-size:12px;font-weight:500;letter-spacing:.09em;color:var(--sub)}

.mk .mk-btn.lg {height:46px;padding:0 22px;font-size:15.5px;border-radius:11px}

.mk .hero2 {align-items:stretch;padding-top:84px}
.mk .htxt2 {align-items:flex-start;text-align:left;max-width:none;display:grid;grid-template-columns:1fr 360px;column-gap:56px;row-gap:18px}
.mk .htxt2 .eyebrow {grid-column:1 / -1}
.mk .htxt2 h1 {font-size:62px;line-height:1.04;grid-column:1;margin:0}
.mk .htxt2 .mk-lead {grid-column:2;grid-row:2;align-self:end;text-align:left;font-size:17.5px;max-width:none;margin-bottom:6px}
.mk .htxt2 .ctas {grid-column:1;justify-content:flex-start;margin-top:8px}
.mk .htxt2 .note {grid-column:2;align-self:center;margin-top:8px}
.mk .stg-wrap {margin-top:48px}
.mk .shead h2 {font-size:38px;line-height:1.12}
.mk .ftxt h3 {font-size:26px;line-height:1.2;letter-spacing:-.02em}
.mk .ftxt p {color:var(--body)}
.mk .fnum {font-weight:500}
.mk .final h2 {font-size:34px}
.mk .mono {font-variant-numeric:tabular-nums}
.mk .audk {font-weight:600}
.mk .dash, .mk .phone {font-family:"Geist",-apple-system,sans-serif}
.mk .appsec {padding-top:120px}
.mk .appgrid {display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;border-radius:28px;background:#F6F7F9;border:1px solid #ECEEF1;padding:56px 64px 0;overflow:hidden}
.mk .apptxt {display:flex;flex-direction:column;gap:16px;padding-bottom:56px}
.mk .apptxt h2 {font-size:38px;line-height:1.1;margin:4px 0 0}
.mk .apptxt .big {margin:0}
.mk .aud {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;padding-top:20px;border-top:1px solid #E4E7EC}
.mk .aud p {margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--body)}
.mk .audk {font-size:13px;color:#1448CC}
.mk .appvis {display:flex;justify-content:center;align-self:end;height:440px;overflow:hidden}
@keyframes mk-shup {from{transform:translateY(100%)}
}
.mk .dcard .pstart {flex:none;height:34px;margin-top:8px;font-size:13.5px;border-radius:9px}
.mk .dctl {gap:6px}
.mk .dcap {margin-left:12px;font-size:14px;font-weight:500;color:#0B1220;min-width:230px;animation:mk-fu .3s}
.mk .dsegs {flex:1;display:flex;gap:4px;margin-left:8px}
.mk .dseg {flex:1;height:22px;border:0;background:none;padding:0;display:flex;align-items:center}
.mk .dseg i {display:block;width:100%;height:3px;border-radius:2px;background:#E1E5EB;transition:background .3s}
.mk .dseg.done i {background:#9DB8FF}
.mk .dseg.on i {background:#1A5CFF}
.mk .dseg:hover i {background:#7FA2FF}
.mk .ra2 {opacity:0;transition:opacity .4s}
.mk .stg.as .ra {opacity:0}
.mk .stg.as .ra2 {opacity:1}
.mk .stg.op .ra2 {opacity:0;transition:opacity 1.6s ease}
.mk .nb {opacity:0;transition:opacity .4s .5s}
.mk .na {transition:opacity .3s}
.mk .stg.op .na {opacity:0}
.mk .stg.op .nb {opacity:1}

.mk .hero2 {position:relative;isolation:isolate;padding-top:88px;padding-bottom:8px}
.mk .hero2::before {content:"";position:absolute;z-index:-1;top:0;left:50%;transform:translateX(-50%);width:4000px;height:calc(100% - 330px);background:#F3F5F9;border-bottom:1px solid #E3E7EE}
.mk .hero2 .htxt2 {display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:0;max-width:640px}
.mk .hero2 .htxt2 .eyebrow {margin-bottom:22px}
.mk .hero2 .htxt2 h1 {font-size:64px;line-height:1.03;margin:0}
.mk .hero2 .htxt2 .mk-lead {margin:20px 0 0;max-width:540px;font-size:19px;line-height:1.55;color:#3B4350}
.mk .hero2 .htxt2 .ctas {margin-top:30px}
.mk .hero2 .htxt2 .note {margin-top:14px;font-size:13.5px;color:#5A6372}
.mk .hero2 .stg-wrap {margin-top:64px}
.mk .hero2 .dash.mk-dash-hero {border-color:#D6DBE3;box-shadow:0 1px 2px rgba(11,18,32,.05),0 50px 100px -40px rgba(11,18,32,.35),0 0 0 6px rgba(255,255,255,.7)}
.mk .hero2 .sphone .phone {box-shadow:0 40px 80px -20px rgba(11,18,32,.4)}
.mk .hero2 .dctl {margin-top:18px}
.mk .hero2 .htxt2 .mk-lead, .mk .hero2 .htxt2 .note, .mk .hero2 .htxt2 .ctas {align-self:flex-start;text-align:left}
.mk .hero2 .stg, .mk .hero2 .dctl {width:100%}
.mk .hero2 .htxt2 {max-width:820px}
.mk .stg.c0 .neword {display:none}
.mk .stg.p1:not(.as) .neword {display:flex}
.mk .stg.c0 .u0 {display:none}
.mk .stg.c0 .u1 {display:inline}
.mk .dlist {position:relative}
.mk .ghost {position:absolute;left:14px;right:14px;top:150px;z-index:5;display:flex;gap:7px;align-items:center;background:#fff;border:1px solid #1A5CFF;border-radius:9px;padding:7px 9px;box-shadow:0 14px 30px -8px rgba(26,92,255,.45);font-size:11.5px;opacity:0;pointer-events:none;transform:rotate(-1.5deg)}
.mk .ghost .dn span {font-size:10px}
.mk .gcur {position:absolute;right:-6px;bottom:-10px}
.mk .stg.dg .ghost {animation:mk-drag 1.6s cubic-bezier(.45,0,.2,1) forwards}
@keyframes mk-drag {0%{opacity:0;top:120px}
12%{opacity:1;top:120px}
75%{opacity:1;top:400px}
100%{opacity:0;top:405px}
}
.mk .optb {position:absolute;right:14px;top:14px;display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:9px;background:#fff;border:1px solid #D6DBE3;font-size:12.5px;font-weight:600;color:#0B1220;box-shadow:0 6px 16px -8px rgba(11,18,32,.25);opacity:0;transform:translateY(-4px);transition:all .3s}
.mk .stg.obv .optb {opacity:1;transform:none}
.mk .stg.obp .optb {background:#1A5CFF;border-color:#1A5CFF;color:#fff;animation:mk-pressb 1.9s forwards}
@keyframes mk-pressb {0%{transform:scale(1)}
8%{transform:scale(.95)}
16%{transform:scale(1)}
}
.mk .spin2 {display:none;width:12px;height:12px;border-radius:99px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;animation:sp .7s linear infinite}
.mk .stg.obp .spin2 {display:inline-block;animation:sp .7s linear 2 forwards}
.mk .stg.st2 .ch2 {opacity:0}
.mk .stg.st3 .ch2 {opacity:1;transform:translate(-50%,0)}
.mk .stg.st3 .ch3 {opacity:0}
.mk .stg.st4 .ch3 {opacity:1;transform:translate(-50%,0)}
.mk .stg.op .rb {transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .35s}
.mk .stg.op .ra2 {transition:opacity .9s ease}
@media (prefers-reduced-motion: reduce) {
.mk .ghost {display:none}
.mk .optb {transition:none}
}
.mk .ordvis {display:flex;align-items:center}
.mk .ordui {width:100%;background:#fff;border:1px solid #E4E7EC;border-radius:16px;box-shadow:0 14px 34px -16px rgba(11,18,32,.18);overflow:hidden;font-size:13.5px}
.mk .ouh {display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #F0F2F5}
.mk .oug {display:grid;grid-template-columns:1fr 1fr}
.mk .ous {display:flex;gap:10px;padding:14px 16px}
.mk .ous+.ous {border-left:1px solid #F0F2F5}
.mk .ous .dn span {font-size:12.5px}
.mk .oul {font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:#8A93A1}
.mk .ouf {display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #F0F2F5;background:#FAFBFC}
.mk .ouf>div {display:flex;flex-direction:column;gap:2px;padding:12px 16px}
.mk .ouf>div+div {border-left:1px solid #F0F2F5}
.mk .bavis {display:flex;flex-direction:column;justify-content:center}
.mk .ba {display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk .bam {position:relative;height:250px;border-radius:12px;overflow:hidden;border:1px solid #E4E7EC}
.mk .bal {position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:#fff;color:#5A6372;border:1px solid #E4E7EC}
.mk .bal.on {color:#1448CC;border-color:#C9D8FF}
.mk .w2m {display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;height:400px;overflow:hidden;padding:28px 28px 0}
.mk .w2c {display:flex;flex-direction:column;gap:8px;align-self:center}
.mk .w2card {background:#fff;border:1px solid #E4E7EC;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px;font-size:13.5px;box-shadow:0 12px 28px -14px rgba(11,18,32,.18)}
.mk .w2a {align-self:flex-end;margin-right:-10px}
.mk .w2p {align-self:end}
.mk .prvis {display:flex;align-items:center}
.mk .prd {width:100%;background:#fff;border:1px solid #E4E7EC;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:6px;box-shadow:0 14px 34px -16px rgba(11,18,32,.18)}
.mk .prh {display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.mk .prg {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.mk .prph {height:96px;border-radius:12px;background:#F4F5F7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#5A6372}
.mk .prf {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;font-size:13px}
.mk .prf>div {display:flex;flex-direction:column;gap:2px}
.mk .teamrow {display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.mk .teamid {display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:7px;background:#fff;border:1px solid #D6E1FF;color:#1448CC;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;box-shadow:0 1px 2px rgba(26,92,255,.08)}
.mk .teamid::before {content:"";width:6px;height:6px;border-radius:99px;background:#1A5CFF}
.mk .hero2 .htxt2 .teamrow {margin-bottom:22px}
@keyframes mk-pop2 {from{transform:scale(.6);opacity:0}
}
.mk .pmr {opacity:0;transition:opacity .4s}
.mk .pdash.has .pmr {opacity:1}
.mk .pm-opt {stroke-dasharray:1;stroke-dashoffset:1}
.mk .pdash.opt .pm-opt {stroke-dashoffset:0;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .3s}
.mk .pm-messy {transition:opacity 1s}
.mk .pdash.opt .pm-messy {opacity:0}
.mk .pdash .nb {opacity:0;transition:opacity .4s .8s}
.mk .pdash.opt .na {opacity:0}
.mk .pdash.opt .nb {opacity:1}
.mk .rdemo {font-size:10.5px;color:#8A93A1}
@keyframes mk-slin {from{transform:translateX(30px);opacity:0}
}

.mk .pill {height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;letter-spacing:-.005em;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .1s ease;white-space:nowrap;font-family:var(--ff,inherit)}
.mk .pill:active {transform:translateY(1px)}
.mk .pill:focus-visible {outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1A5CFF}
.mk .pill.out {background:#fff;color:#0B1220;border:1px solid #D5DAE1}
.mk .pill.out:hover {border-color:#9AA4B5;background:#FAFBFC}
.mk .pill.soft {background:#F1F3F6;color:#0B1220;border:1px solid #E4E7EC}
.mk .pill.soft:hover {background:#E8EBF0;border-color:#D5DAE1}
.mk .pill.blue {background:#1A5CFF;color:#fff;border:1px solid #1A5CFF}
.mk .pill.blue:hover {background:#0E4FEF;border-color:#0E4FEF}
.mk .pill.pghost {background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.mk .pill.pghost:hover {border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.05)}
.mk .final2 .pill.blue:focus-visible, .mk .final2 .pill.pghost:focus-visible {box-shadow:0 0 0 2px #0A1430,0 0 0 4px #7FA2FF}
.mk .lgp {height:48px;padding:0 24px}
.mk .pgrid2 {display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mk .pc2 {border:1px solid #E4E7EC;border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:16px;background:#fff;transition:border-color .18s,box-shadow .2s}
.mk .pc2:hover {border-color:#CBD2DC;box-shadow:0 16px 36px -24px rgba(11,18,32,.28)}
.mk .pc2.hi {border-color:#BFD0FF;box-shadow:0 0 0 1px #BFD0FF inset}
.mk .pn2 {font-size:15px;font-weight:600}
.mk .pp2 {display:flex;align-items:baseline;gap:7px}
.mk .pp2 b {font-size:44px;font-weight:600;letter-spacing:-.03em;font-family:var(--ff,inherit);font-variant-numeric:tabular-nums;line-height:1}
.mk .from2 {font-size:13px;color:#6B7380}
.mk .per2 {font-size:14px;color:#6B7380}
.mk .pl2 {list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.mk .pl2 li {display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #F0F2F5;font-size:14px}
.mk .pl2 li span {color:#5A6372}
.mk .pl2 li b {font-weight:600;font-size:14px}
.mk .pc2 .pill {width:100%}
.mk .pfoot2 {display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:13.5px;color:#5A6372}
.mk .pfoot2 span::before {content:"✓";color:#1A5CFF;margin-right:7px;font-weight:600}
.mk .final2 {background:#0A1430;overflow:hidden}
.mk .final2 h2 {font-size:36px}
.mk .final2 p {color:#A6B2C9;max-width:460px}
.mk .final2>div:first-child {position:relative;z-index:2}
.mk .final2 .ctas {position:relative;z-index:2}
.mk .fnet {position:absolute;right:-30px;top:50%;transform:translateY(-50%);width:460px;opacity:.75;z-index:1;pointer-events:none}
.mk .fdraw {stroke-dasharray:1;stroke-dashoffset:1;animation:mk-draw 2.4s .6s cubic-bezier(.4,0,.2,1) forwards}
.mk .final2 .ctas {margin-right:220px}
@media (prefers-reduced-motion: reduce) {
.mk .fdraw {animation:none;stroke-dashoffset:0}
.mk .pill {transition:none}
}
.mk .final2 {flex-direction:column;align-items:flex-start;gap:26px;padding:60px 56px}
.mk .final2 .ctas {margin-right:0;flex-wrap:nowrap}
.mk .final2>div:first-child {max-width:520px}
.mk .fnet {right:20px;width:440px;opacity:.85}
.mk .region {position:absolute;left:12px;bottom:10px;font-size:11px;font-weight:500;color:#5A6372;background:rgba(255,255,255,.9);border:1px solid #E4E7EC;border-radius:6px;padding:2px 7px}
.mk .sm2 {height:34px;padding:0 14px;font-size:13px}
.mk .trustl {display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.mk .trustl i {font-style:normal;color:#A3ACB9}
.mk .indus {margin-top:76px;padding:28px 0 0;border-top:1px solid #EEF0F3}
.mk .indh {display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.mk .indtabs {display:flex;gap:4px;flex-wrap:wrap}
.mk .itab {height:34px;padding:0 14px;border-radius:999px;border:1px solid transparent;background:none;font-size:14px;font-weight:500;color:#5A6372;cursor:pointer;transition:all .15s}
.mk .itab:hover {color:#0B1220;background:#F4F5F7}
.mk .itab.on {color:#0B1220;border-color:#D5DAE1;background:#fff}
.mk .itab:focus-visible {outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #1A5CFF}
.mk .indb2 {display:grid;grid-template-columns:360px 1fr;gap:40px;margin-top:22px;align-items:start}
.mk .indc {display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.mk .indc b {font-size:22px;font-weight:600;letter-spacing:-.015em}
.mk .indc p {margin:0;font-size:15.5px;line-height:1.55;color:#3B4350}
.mk .indflow {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mk .indst {display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid #E4E7EC;border-radius:14px;animation:mk-fu .3s}
.mk .indst .mono {font-size:12px;color:#1A5CFF}
.mk .indst b {font-size:15px;font-weight:600}
.mk .indst span:last-child {font-size:13.5px;color:#5A6372}
.mk .optsec {padding-top:100px}
.mk .optg {display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:stretch}
.mk .optbox {border:1px solid #E4E7EC;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;background:#fff;box-shadow:0 30px 60px -36px rgba(11,18,32,.3)}
.mk .optmap {position:relative;height:440px}
.mk .optbar {display:flex;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid #EEF0F3}
.mk .optbar .pill {height:40px}
.mk .ozst {font-size:13.5px;color:#5A6372;margin-left:6px}
.mk .optbox.hl .pm-messy path:last-child {stroke:#F59E0B;transition:stroke .3s}
.mk .optbox .pm-messy {transition:opacity 1s .6s}
.mk .optbox.opt .pm-opt {transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .6s}
.mk .optside {display:flex;flex-direction:column;gap:10px}
.mk .ozc {border:1px solid #E4E7EC;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:#fff}
.mk .ozr {display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk .ozv {display:flex;flex-direction:column;gap:1px;transition:opacity .4s}
.mk .ozv b {font-size:20px;font-weight:600;letter-spacing:-.02em}
.mk .ozv i {font-style:normal;font-size:12px;color:#6B7380}
.mk .ozv.dim {opacity:.45}
.mk .ozv.good b {color:#1448CC}
.mk .ozo {font-size:12.5px;line-height:1.6;color:#2B3340}
.mk .ozk {display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.mk .ozk span {display:flex;align-items:center;gap:7px;color:#0F7B55}
.mk .ozk span svg {flex:none}
.mk .opsg {display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.mk .opsl, .mk .opsf {border:1px solid #E4E7EC;border-radius:18px;padding:8px 18px;background:#fff}
.mk .opsd {display:grid;grid-template-columns:34px 150px 1fr auto;gap:12px;align-items:center;padding:14px 0;border-top:1px solid #F2F4F6;font-size:14px}
.mk .opsd:first-child {border-top:0}
.mk .opsav {width:34px;height:34px;border-radius:99px;color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mk .opsd .dn span {font-size:12.5px;color:#6B7380}
.mk .opsb {height:6px;border-radius:3px;background:#EEF0F3;overflow:hidden}
.mk .opsb span {display:block;height:100%;border-radius:3px}
.mk .ost {font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:6px;background:#F1F3F6;color:#5A6372;white-space:nowrap}
.mk .ost.on {background:#E3F4EC;color:#0F7B55}
.mk .ost.brk {background:#F1ECFF;color:#5B3FB8}
.mk .ost.warn {background:#FFF4E5;color:#9A5B00}
.mk .opsf .oul {display:block;padding:12px 0 4px}
.mk .opse {display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:start;padding:11px 0;border-top:1px solid #F2F4F6;font-size:13.5px}
.mk .opse .dn b {font-weight:500}
.mk .opse .dn span {font-size:12.5px;color:#6B7380}
.mk .opse .mono {font-size:12px;color:#8A93A1}
.mk .od {width:8px;height:8px;border-radius:99px;background:#7C5CE0;margin-top:6px}
.mk .od.ok {background:#0F7B55}
.mk .od.warn {background:#B45309}
.mk .od.brk {background:#5B3FB8}
.mk .two {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.mk .twoc {position:relative;border:1px solid #E4E7EC;border-radius:20px;padding:30px 30px 0;display:flex;flex-direction:column;gap:12px;align-items:flex-start;overflow:hidden;min-height:470px;background:#fff}
.mk .twoc h3 {font-size:26px;margin:0}
.mk .twoc p {margin:0;font-size:15.5px;line-height:1.55;color:#3B4350}
.mk .twon {font-size:13px;color:#5A6372}
.mk .twoc.dk2 {background:#0A1430;border-color:#0A1430;color:#fff}
.mk .twoc.dk2 h3 {color:#fff}
.mk .twoc.dk2 p {color:#A6B2C9}
.mk .twoc.dk2 .twon {color:#8B98B3}
.mk .twov {margin-top:auto;align-self:center;height:220px;overflow:hidden}
.mk .twod {position:absolute;left:30px;right:-120px;bottom:-140px;height:320px;opacity:.95}
.mk .twod .dash {height:100%}
@media (prefers-reduced-motion: reduce) {
.mk .optbox .pm-messy, .mk .optbox.opt .pm-opt {transition:none}
}
.mk .optmap {height:500px}

/* ---- 4. the mockup's mobile composition */
@media (max-width: 860px) {
.mk .wrap {padding:0 20px}

.mk .mk-lead {font-size:17px}
.mk .ctas .mk-btn.lg {flex:1}
.mk .dlist {display:none}
.mk .drail {display:none}
.mk .dorg {display:none}
.mk .sec {padding-top:72px}
.mk .shead h2 {font-size:30px}
.mk .shead.mk-row {flex-direction:column;align-items:flex-start;gap:12px}
.mk .frow, .mk .frow.flip {grid-template-columns:1fr;gap:20px;padding:28px 0}
.mk .frow.flip .ftxt {order:0}
.mk .ftxt h3 {font-size:24px}
.mk .vis {min-height:280px;padding:18px}
.mk .fdot {display:none}
.mk .final {flex-direction:column;align-items:flex-start;padding:32px;margin-top:72px}
.mk .final h2 {font-size:30px}
.mk .final .ctas {width:100%}

.mk .hero2 {padding-top:40px}
.mk .htxt2 h1 {font-size:46px}
.mk .htxt2 .mk-lead {font-size:17px}
.mk .stg-wrap {margin-top:32px}
.mk .stg {height:560px}
.mk .sdash {right:0;height:300px}
.mk .dash.mk-dash-hero .dlist {display:none}
.mk .dash .drail, .mk .dorg {display:none}
.mk .crt {width:200px;left:10px;top:10px}
.mk .mchip {font-size:11.5px;bottom:10px}
.mk .sphone {left:50%;right:auto;bottom:0;transform:translateX(-50%) scale(.82);transform-origin:bottom center}
.mk .dctl {flex-wrap:wrap}
.mk .dark {margin-top:72px;padding:64px 0}
.mk .dflow {grid-template-columns:1fr;gap:4px}
.mk .dline {height:30px;width:2px;margin:6px 0 6px 20px}
.mk .dline .fdot {display:none}
.mk .appgrid {grid-template-columns:1fr;padding:32px 22px 0;gap:20px}
.mk .apptxt {padding-bottom:0}
.mk .apptxt h2 {font-size:30px}
.mk .aud {grid-template-columns:1fr}
.mk .appvis {height:360px}
.mk .appsec {padding-top:72px}
.mk .htxt2 {grid-template-columns:1fr;row-gap:14px}
.mk .htxt2 h1 {font-size:42px}
.mk .htxt2 .mk-lead, .mk .htxt2 .note, .mk .htxt2 .ctas {grid-column:1;grid-row:auto}
.mk .dcap {min-width:0;flex:1;font-size:13px}
.mk .dsegs {flex-basis:100%;margin:8px 0 0}
.mk .hero2 {padding-top:44px}
.mk .hero2::before {height:calc(100% - 300px)}
.mk .hero2 .htxt2 h1 {font-size:42px}
.mk .hero2 .htxt2 .mk-lead {font-size:17px;margin-top:14px}
.mk .hero2 .htxt2 .ctas {margin-top:22px;width:100%}
.mk .hero2 .stg-wrap {margin-top:36px}

.mk .ba, .mk .oug, .mk .ouf, .mk .prf {grid-template-columns:1fr}
.mk .ous+.ous, .mk .ouf>div+div {border-left:0;border-top:1px solid #F0F2F5}
.mk .w2m {grid-template-columns:1fr;height:auto}
.mk .w2c {display:none}
.mk .bam {height:200px}
.mk .pgrid2 {grid-template-columns:1fr}
.mk .pfoot2 {flex-direction:column}
.mk .final2 .ctas {margin-right:0;flex-direction:column;width:100%}
.mk .final2 .pill {width:100%}
.mk .fnet {display:none}
.mk .final2 h2 {font-size:28px}
.mk .indb2, .mk .optg, .mk .opsg, .mk .two {grid-template-columns:1fr}
.mk .indflow {grid-template-columns:1fr}
.mk .optmap {height:320px}
.mk .opsd {grid-template-columns:34px 1fr auto}
.mk .opsb {display:none}
.mk .twod {display:none}
.mk .twoc {min-height:0;padding-bottom:24px}
}

/* ---- 5. overrides */
.mk-home { overflow-x: clip; background: #fff; }

/* Illustrations served as images fill their frame like the mockup's sliced SVGs. */
.mk .pmap img, .mk .bam img, .mk .dmap img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk .mk-dlogo { display: inline-flex; align-items: center; }

/* Elements that became headings or list items keep the mockup's look. */
.mk .indc .mk-indt { font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.mk .indflow { list-style: none; }
.mk .ozk li { display: flex; align-items: center; gap: 7px; color: #0F7B55; }
.mk .ozk li svg { flex: none; }
.mk .dkeys li { font-size: 13.5px; color: #C5CEDF; padding: 7px 12px; border: 1px solid #233462; border-radius: 99px; }
.mk .pfoot2 li::before { content: "✓"; color: #1A5CFF; margin-right: 7px; font-weight: 600; }
.mk .aud .audk { font-size: 13px; font-weight: 600; letter-spacing: 0; color: #1448CC; font-family: var(--ff); }
.mk .pc2 .pn2 { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.mk .tlink:hover { text-decoration: underline; }

/* Contrast: text that is real content (not part of an illustration) is at least 4.5:1. */
.mk .rdemo { font-size: 12px; color: #5A6372; }
.mk .optside .oul { color: #5A6372; }
.mk .mk-note-below { margin-top: 12px; }

.mk .optbar { flex-wrap: wrap; }

@media (max-width: 1100px) {
  .mk .fnet { opacity: .35; }
}

@media (max-width: 860px) {
  .mk .cbt { width: 44px; height: 44px; }
  .mk .dseg { height: 32px; }

  .mk .ozst { flex-basis: 100%; margin-left: 0; }
}

/* Both dashboard variants (_MarketingDashboard): the type the hero always rendered with. The mockup's hero dashboard
   carried the class "big", which is also its paragraph-size class (.big { font-size:17px; line-height:1.6 }), so the
   hero's rows inherited a 1.6 line-height by accident. The hero modifier is now .mk-dash-hero and the inherited values
   are set here, on purpose, for both. */
.mk .dash { font-size: 17px; line-height: 1.6; }

/* "Your entire operation" card: the hero's dashboard, static, in its first state (_MarketingDashboard, Compact). The
   mockup placed it absolutely — 120px past the card's right edge and 140px below it, at 95% opacity — and inside the
   dark card it inherited color:#fff, so task names, headings and buttons were white on white. Here it keeps its full
   340px design height, width and type, and the card shows only its upper part: .twod is a shorter window (overflow:
   hidden) at the bottom of the card, flush with the card's lower edge, and its last 48px fade out (a mask), so the row
   at the crop line dissolves instead of being cut. Nothing is scaled. The card therefore keeps a natural height close
   to the Personal card's, and the two stretch to equal height without empty space above either illustration. The
   window is 208px on wide screens (the fade lies over the fourth row) and 256px on narrow ones (fifth row). */
.mk .twoc .twod {
  position: relative; left: auto; right: auto; bottom: auto; align-self: stretch;
  height: 208px; margin: auto 0 0; overflow: hidden; opacity: 1;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
.mk .twoc .twod .dash.mk-dash-compact { height: 340px; }
/* The Personal card's phone window grows into whatever height the row gives it (up to the whole phone, 372px at its
   0.44 scale), so a taller Teams card shows more phone instead of empty card above it. */
.mk .twoc .twov { flex: 1 0 220px; height: auto; max-height: 372px; }
.mk .dash.mk-dash-compact { color: #0B1220; text-align: left; border-color: #2A3B66; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .45); }
.mk .dash.mk-dash-compact .dlist { width: 230px; flex: none; }

/* Narrow screens keep the card's dashboard as a readable task list: the map (and, as in the hero, the rail and the
   organization name) give way, so no task text is shrunk; the window is a little taller so several complete rows show. */
@media (max-width: 860px) {
  .mk .twod { display: block; }
  .mk .twoc.dk2 { padding-bottom: 0; }
  .mk .twoc .twod { height: 256px; }
  .mk .dash.mk-dash-compact .dmap { display: none; }
  .mk .dash.mk-dash-compact .dlist { display: flex; width: 100%; border-right: 0; }
  .mk .dash.mk-dash-compact .dfoot > span:last-child { display: none; }
}

/* Hero demo, task list: every step keeps the same typography and the same boxes. In the mockup the final step's stage
   class was "dn" — the same name as the .dn name-block class — so ".dn span { font-size: 10.5px; color: … }" and
   ".dn { display: flex; flex-direction: column }" restyled the whole stage at that step; the state is "fin" here
   (marketing-home.js). That step also set the DRV002 count .k2 to font-weight 600, and the count (.k0/.k1/.k2) and the
   status pill (.ss0/.ss1) swapped by display, so the bold text and the narrower "Done" pill changed the row. Here each set of
   alternatives shares ONE grid cell (sized to the widest) and only visibility changes; the final state changes text,
   colour and the checkmarks only. */
.mk .dlist .d2row .dn > span:last-child { display: inline-grid; justify-items: start; }
.mk .dlist .k0, .mk .dlist .k1, .mk .dlist .k2 { grid-area: 1 / 1; display: inline; visibility: hidden; font-weight: inherit; }
.mk .dlist .k0 { visibility: visible; }
.mk .stg.as .dlist .k0 { display: inline; visibility: hidden; }
.mk .stg.as .dlist .k1 { visibility: visible; }
.mk .stg.fin .dlist .k1 { display: inline; visibility: hidden; }
.mk .stg.fin .dlist .k2 { display: inline; visibility: visible; color: #0F7B55; font-weight: inherit; }
.mk .dlist .sst { display: inline-grid; justify-items: end; }
.mk .dlist .ss0, .mk .dlist .ss1 { grid-area: 1 / 1; display: inline-block; }
.mk .dlist .ss1 { visibility: hidden; }
.mk .stg.fin .dlist .ss0 { display: inline-block; visibility: hidden; }
.mk .stg.fin .dlist .ss1 { visibility: visible; }

/* The narrowest phones (320–380px): the page's side padding (the header keeps its own row: marketing-shell.css). */
@media (max-width: 380px) {
  .mk .wrap { padding: 0 16px; }
  .mk .htxt2 h1 { font-size: 36px; }
}