/* Organised by where the parcel is: before dispatch, on the road, then the money. The product table opens the page because "one screen" is the whole argument. */
.sh{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(24px,5vw,72px);align-items:end;padding-block:clamp(48px,7vw,96px) clamp(28px,4vw,48px)}
.sh>*{animation:rise var(--ds-dur-4) var(--ds-ease-out) both}.sh>*:nth-child(2){animation-delay:120ms}
.sh .cta{margin-top:24px}
.board{background-color:var(--ds-surface-2);border-radius:var(--ds-radius-xl);padding:clamp(12px,3vw,40px);animation:rise var(--ds-dur-4) 220ms var(--ds-ease-out) both}
.vc{background-color:var(--ds-surface);border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);box-shadow:0 18px 40px -22px rgb(12 20 19/.28);overflow:hidden;min-width:0}
.vh{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:12px 16px;border-bottom:1px solid var(--ds-border);font-weight:600;font-size:.875rem}
.vh small{font-weight:400;color:var(--ds-text-3);font-size:.8125rem}
.wide{min-width:640px}.wide td,.wide th{white-space:nowrap}
.alt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(24px,6vw,96px);padding-block:var(--ds-section) clamp(40px,5vw,72px)}
.alt h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.5rem)}.alt p{font-size:var(--ds-fs-lead);line-height:1.9;color:var(--ds-text-2)}
.phase{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);gap:clamp(28px,6vw,88px);align-items:start;padding-block:clamp(44px,6vw,88px);border-top:1px solid var(--ds-border)}
.phase.flip{grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr)}
.phase h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.5rem);margin-bottom:8px}
.pts{display:grid}.pts div{padding-block:20px;border-bottom:1px solid var(--ds-border)}.pts div:last-child{border-bottom:0}.pts p{margin-top:8px;color:var(--ds-text-2);line-height:1.8}
.addr{display:grid;gap:6px;padding:14px 16px;border-bottom:1px solid var(--ds-border);font-size:.875rem}
.addr span{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}.addr small{color:var(--ds-text-3);font-size:.8125rem}.addr b{font-weight:600;color:var(--ds-accent)}
.pick td{background-color:var(--ds-accent-wash)}
.alarm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;background-color:var(--ds-warn-soft);color:var(--ds-warn);padding:12px 16px;font-size:.875rem;font-weight:600}
.alarm small{font-weight:400;font-size:.8125rem}
.stackv{display:grid;gap:14px}
.money{background-color:var(--ds-ink);color:var(--ds-ink-text);border-radius:var(--ds-radius-xl);padding:clamp(24px,6vw,80px);margin-block:clamp(16px,3vw,40px)}
.pg[data-theme="dark"] .money{box-shadow:inset 0 0 0 1px var(--ds-ink-line)}
.money .eyebrow{color:var(--ds-ink-accent)}.money h2{color:#fff;max-width:22em;font-size:clamp(1.6rem,1.3rem + 1.6vw,2.9rem)}
.money>p{margin-top:16px;color:var(--ds-ink-text-2);max-width:68ch;font-size:var(--ds-fs-lead);line-height:1.85}
.mgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,56px)}
.mgrid h3{color:#fff;margin-block:0 8px}.mgrid p{color:var(--ds-ink-text-2);font-size:.9375rem;line-height:1.8;margin-bottom:16px}
.ibtn{margin-top:clamp(24px,3vw,40px)}.ibtn .btn{white-space:normal;text-align:center;padding-block:10px}
.buck{display:grid;gap:1px;background-color:var(--ds-border)}.buck div{display:flex;justify-content:space-between;align-items:center;gap:12px;background-color:var(--ds-surface);padding:12px 16px;font-size:.875rem}.buck b{font-weight:600;font-variant-numeric:tabular-nums}
.vc .ex{display:block;padding:10px 16px;border-top:1px solid var(--ds-border)}
.prof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,6vw,96px);align-items:center;padding-block:clamp(44px,6vw,88px)}
.prof p{color:var(--ds-text-2);font-size:var(--ds-fs-lead);line-height:1.85}.prof .btn{margin-top:20px;white-space:normal;text-align:center;padding-block:10px}
.car{padding-block:clamp(44px,6vw,88px);border-top:1px solid var(--ds-border)}
.car h2{font-size:clamp(1.6rem,1.3rem + 1.3vw,2.5rem);margin-bottom:clamp(20px,3vw,36px)}
.names{display:flex;flex-wrap:wrap;gap:4px clamp(18px,3vw,40px);font:500 clamp(1.5rem,1.15rem + 1.9vw,3rem)/1.5 var(--ds-font-display)}
.names.g{font-size:clamp(1.15rem,1rem + .9vw,1.75rem);color:var(--ds-text-2);margin-top:14px}
.grp{display:block;margin-top:clamp(20px,3vw,36px);font-size:.875rem;font-weight:600;color:var(--ds-text-3)}
.cnote{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,72px);margin-top:clamp(28px,4vw,48px)}
.cnote p{color:var(--ds-text-2);line-height:1.85}.cnote .say{color:var(--ds-text);font:500 clamp(1.05rem,1rem + .4vw,1.3rem)/1.7 var(--ds-font-display)}
.cmpr{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;padding-block:clamp(32px,4vw,56px);border-block:1px solid var(--ds-border)}
.cmpr h2{font-size:clamp(1.4rem,1.2rem + 1vw,2rem)}.cmpr p{margin-top:10px;color:var(--ds-text-2);max-width:58ch}
.closeb{text-align:center;display:grid;justify-items:center;gap:14px;padding-block:clamp(48px,7vw,104px) 0}
.closeb p{color:var(--ds-text-2);max-width:54ch}.closeb .cta{justify-content:center;margin-top:10px}
@supports (animation-timeline:view()){.pts>div,.phase>.stackv,.phase>.vc,.money,.prof>*,.car,.cmpr,.closeb,.alt{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 38%}}
@media (max-width:1020px){.sh,.alt,.phase,.phase.flip,.mgrid,.prof,.cnote{grid-template-columns:minmax(0,1fr)}.phase.flip>.stackv{order:2}}
@media (max-width:560px){.closeb .btn,.cmpr .btn{flex:1 1 100%}}
/* Layout idea: the real product screen is the hero; visitors press it and watch their own daily problem resolve. */
.mk-hero{padding-block:clamp(40px,6vw,88px) clamp(28px,4vw,52px);max-width:900px}
.mk-hero h1{margin-block:0 20px}
.mk-hero .lead{margin-bottom:28px}
.mk-terms{margin-top:18px;font-size:.875rem;color:var(--ds-text-3)}
.mk-ink{position:relative;isolation:isolate;overflow:hidden;background-color:var(--ds-ink);color:var(--ds-ink-text);border-radius:var(--ds-radius-xl);padding:clamp(14px,3vw,36px)}
.mk-ink::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 55% at 78% 0%,rgb(45 212 191/.2),transparent 70%)}
.mk-ink-head{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:space-between;align-items:baseline;margin-bottom:18px}
.mk-ink-head h2{font-size:clamp(1.25rem,1rem + 1vw,1.75rem);color:var(--ds-ink-text)}
.mk-ink-head small{color:var(--ds-ink-text-2);font-size:.8125rem}
/* inbox */
.mk-app{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr) minmax(0,1fr);background-color:var(--ds-surface);color:var(--ds-text);border-radius:var(--ds-radius);overflow:hidden;min-height:520px}
.mk-list{border-inline-end:1px solid var(--ds-border);display:flex;flex-direction:column}
.mk-list h3,.mk-pane-t{font:600 .8125rem var(--ds-font-body);color:var(--ds-text-3);padding:14px 16px 10px;margin:0}
.mk-conv{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:13px 16px;border-top:1px solid var(--ds-border);cursor:pointer;min-height:44px}
.mk-conv:hover{background-color:var(--ds-surface-2)}
.mk-conv:focus-visible{outline:2px solid var(--ds-accent);outline-offset:-2px}
.mk-conv[aria-pressed="true"]{background-color:var(--ds-accent-wash)}
.mk-conv b{font-weight:600;font-size:.9375rem}
.mk-conv span{grid-column:1;font-size:.8125rem;color:var(--ds-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-conv .badge{grid-column:2;grid-row:1;font-style:normal;justify-self:end}
.mk-conv small{grid-column:2;grid-row:2;font-size:.75rem;color:var(--ds-text-3);text-align:end}
.mk-chat{display:flex;flex-direction:column;background-color:var(--ds-surface-2);min-width:0}
.mk-chat-top{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:12px 16px;background-color:var(--ds-surface);border-bottom:1px solid var(--ds-border);font-size:.8125rem;color:var(--ds-text-2)}
.mk-chat-top b{color:var(--ds-text);font-size:.9375rem;margin-inline-end:auto}
.mk-msgs{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px;font-size:.9375rem}
.mk-msg{max-width:84%;padding:9px 13px;border-radius:var(--ds-radius-sm);background-color:var(--ds-surface);box-shadow:var(--ds-shadow);align-self:flex-start}
.mk-msg.me{background-color:var(--ds-bub);color:var(--ds-bub-text);align-self:flex-end}
.mk-msg.sys{align-self:center;background:none;box-shadow:none;font-size:.75rem;color:var(--ds-text-3);text-align:center;padding:2px}
.mk-compose{display:flex;gap:8px;padding:12px 16px;background-color:var(--ds-surface);border-top:1px solid var(--ds-border);align-items:center;font-size:.875rem;color:var(--ds-text-3)}
.mk-compose span{flex:1;border:1px solid var(--ds-border);border-radius:var(--ds-radius-md);padding:9px 12px}
.mk-side{border-inline-start:1px solid var(--ds-border);padding-bottom:14px;min-width:0}
.mk-card{margin:0 16px 12px;padding:12px 14px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);font-size:.8125rem;display:grid;gap:6px}
.mk-card h4{font:600 .875rem var(--ds-font-body);margin:0;display:flex;justify-content:space-between;gap:8px;align-items:center}
.mk-card ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;color:var(--ds-text-2)}
.mk-card .tot{font-weight:600;color:var(--ds-text);font-variant-numeric:tabular-nums}
.mk-add{justify-self:start;font:600 .8125rem var(--ds-font-body);padding:8px 14px;border-radius:var(--ds-radius-md);background-color:var(--ds-accent);color:var(--ds-on-accent);border:0}
/* compare */
.mk-sec{padding-top:var(--ds-section)}
.mk-cmp th:nth-child(3),.mk-cmp td:nth-child(3){color:var(--ds-text);font-weight:600;background-color:var(--ds-accent-wash)}
.mk-cmp td,.mk-cmp th{font-size:.9375rem;padding:13px 16px}
.mk-cmp td:nth-child(2){color:var(--ds-text-2)}
.mk-note{margin-top:16px;font-size:.9375rem;color:var(--ds-text-2);max-width:68ch}
/* visuals */
.mk-vis{margin-bottom:clamp(20px,3vw,36px)}
.mk-funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.mk-funnel div{padding:18px 16px;border-inline-start:1px solid var(--ds-border);display:grid;gap:6px;align-content:start}
.mk-funnel div:first-child{border-inline-start:0}
.mk-funnel span{font-size:.8125rem;color:var(--ds-text-2)}
.mk-funnel b{font:600 1.5rem var(--ds-font-display);font-variant-numeric:tabular-nums}
.mk-funnel b.mk-small{font-size:1rem}
.mk-funnel .on{background-color:var(--ds-accent-wash)}
.mk-funnel .on b{color:var(--ds-accent)}
.mk-flow{list-style:none;margin:0;padding:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mk-flow li{padding:12px 14px;border:1px solid var(--ds-border);border-radius:var(--ds-radius-sm);display:grid;gap:4px}
.mk-flow small{font-size:.75rem;color:var(--ds-text-3)}
.mk-flow b{font-size:.9375rem;font-weight:600}
.mk-flow .on{background-color:var(--ds-accent-wash);border-color:var(--ds-accent-soft)}
.mk-bom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.mk-bom div{padding:18px 16px;border-inline-start:1px solid var(--ds-border);display:grid;gap:4px}
.mk-bom div:first-child{border-inline-start:0}
.mk-bom span{font-size:.875rem;color:var(--ds-text-2)}
.mk-bom b{font:600 1.125rem var(--ds-font-display)}
.mk-bom small{font-size:.8125rem;color:var(--ds-text-3)}
.mk-bom .low small{color:var(--ds-warn);font-weight:600}
.mk-bom .res{background-color:var(--ds-accent-wash)}
.mk-bom .res b{font-size:1.75rem;color:var(--ds-accent)}
.mk-empty{color:var(--ds-text-3);font-style:normal}
/* comparisons: an inlaid ink panel, so the Rabehni answer is the one bright thing in each card */
.mk-vs{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--ds-section);background-color:var(--ds-ink);color:var(--ds-ink-text);border-radius:var(--ds-radius-xl);padding:clamp(24px,5vw,64px) clamp(14px,4vw,56px)}
.mk-vs::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 12% 100%,rgb(45 212 191/.18),transparent 72%)}
.mk-vs .eyebrow{color:var(--ds-ink-accent)}
.mk-vs h2{color:var(--ds-ink-text)}
.mk-vs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mk-vs-card{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--ds-ink-line);border-radius:var(--ds-radius);background:rgb(255 255 255/.05)}
.mk-vs-card h3{font-size:1.0625rem;color:var(--ds-ink-text);margin:0}
.mk-vs-card p{margin:0;font-size:.9375rem;line-height:1.6}
.mk-vs-card small{display:block;font-size:.75rem;font-weight:600;margin-bottom:2px}
.mk-vs-card .was{color:var(--ds-ink-text-2)}
.mk-vs-card .now{margin-top:auto;padding:12px 14px;border-radius:var(--ds-radius-sm);background-color:var(--ds-ink-accent);color:var(--ds-ink-on-accent);font-weight:600}
.mk-vs .mk-note{color:var(--ds-ink-text-2);margin-top:22px}
/* product boards: a tinted bed with an ink title bar instead of grey on white */
.mk-vis.board{background-color:var(--ds-accent-soft)}
.mk-vis .vh{background-color:var(--ds-ink);color:var(--ds-ink-text)}
.mk-vis .vh small{color:var(--ds-ink-text-2)}
.mk-vis .tbl th{background-color:var(--ds-accent-wash);color:var(--ds-text)}
.mk-vis .mk-funnel .on,.mk-vis .mk-bom .res,.mk-vis .mk-flow .on{background-color:var(--ds-ink-accent);border-color:var(--ds-ink-accent);color:var(--ds-ink-on-accent)}
.mk-funnel .on span,.mk-funnel .on b,.mk-bom .res span,.mk-bom .res b,.mk-bom .res small,.mk-flow .on small,.mk-flow .on b{color:var(--ds-ink-on-accent)}
/* cost calculator and fit panels */
.mk-calc{margin-top:var(--ds-section);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);padding:clamp(24px,5vw,56px);border-radius:var(--ds-radius-xl);background-color:var(--ds-ink);color:var(--ds-ink-text)}
.mk-calc .eyebrow{color:var(--ds-ink-accent)}
.mk-calc h2{color:var(--ds-ink-text)}
.mk-calc p{color:var(--ds-ink-text-2);margin-top:12px}
.mk-calc-in{display:grid;gap:12px}
.mk-calc-in label{display:grid;gap:6px;font-size:.875rem;font-weight:500;color:var(--ds-ink-text-2)}
.mk-calc-in input{font:500 1.0625rem var(--ds-font-body);min-height:48px;padding:0 14px;border:1px solid var(--ds-ink-line);border-radius:var(--ds-radius-md);background:rgb(255 255 255/.06);color:var(--ds-ink-text);width:100%}
.mk-calc-in input:focus{border-color:var(--ds-ink-accent);outline:0}
.mk-calc-out{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mk-calc-out div{padding:14px 16px;border:1px solid var(--ds-ink-line);border-radius:var(--ds-radius-sm);display:grid;gap:4px;align-content:start}
.mk-calc-out small{font-size:.8125rem;color:var(--ds-ink-text-2)}
.mk-calc-out b{font:600 1.25rem var(--ds-font-display);font-variant-numeric:tabular-nums}
.mk-calc-out .tot{background-color:var(--ds-ink-accent);border-color:var(--ds-ink-accent);color:var(--ds-ink-on-accent)}
.mk-calc-out .tot small,.mk-calc-out .tot b{color:var(--ds-ink-on-accent)}
.mk-fit{margin-top:var(--ds-section);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mk-fit h2{grid-column:1/-1;margin-bottom:12px}
.mk-fit>div{padding:clamp(20px,3vw,32px);border-radius:var(--ds-radius)}
.mk-fit h3{font-size:1.125rem;margin:0 0 12px}
.mk-fit ul{margin:0;padding-inline-start:18px;display:grid;gap:8px;font-size:.9375rem}
.mk-fit .yes{background-color:var(--ds-accent-soft);color:var(--ds-text)}
.mk-fit .no{background-color:var(--ds-warn-soft);color:var(--ds-text)}
/* costs and steps */
.mk-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.mk-3>div{padding:clamp(18px,3vw,28px);border-radius:var(--ds-radius);display:grid;gap:8px;align-content:start;background-color:var(--ds-accent-wash)}
.mk-3>div:nth-child(2){background-color:var(--ds-accent-soft)}
.mk-3>div:nth-child(3){background-color:var(--ds-ink);color:var(--ds-ink-text)}
.mk-3>div:nth-child(3) small,.mk-3>div:nth-child(3) p{color:var(--ds-ink-text-2)}
.mk-3 b{color:inherit}
.mk-3 small{font-size:.8125rem;color:var(--ds-text-3)}
.mk-3 b{font:600 1.375rem var(--ds-font-display)}
.mk-3 p{font-size:.9375rem;color:var(--ds-text-2);margin:0}
.mk-limits{columns:2;column-gap:clamp(32px,6vw,96px);margin:0;padding-inline-start:18px;font-size:.9375rem;color:var(--ds-text-2)}
.mk-limits li{break-inside:avoid;margin-bottom:12px}
.mk-end{margin-block:var(--ds-section)}
/* inventory stage */
.mk-steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.mk-step{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;padding:10px 16px;border-radius:var(--ds-radius-md);border:1px solid var(--ds-ink-line);color:var(--ds-ink-text-2);font:500 .9375rem var(--ds-font-body)}
.mk-step:hover{color:var(--ds-ink-text);border-color:var(--ds-ink-text-2)}
.mk-step:focus-visible{outline:2px solid var(--ds-ink-accent);outline-offset:2px}
.mk-step[aria-pressed="true"]{background-color:var(--ds-ink-accent);border-color:var(--ds-ink-accent);color:var(--ds-ink-on-accent);font-weight:600}
.mk-stock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);background-color:var(--ds-surface);color:var(--ds-text);border-radius:var(--ds-radius);overflow:hidden}
.mk-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ds-border);grid-column:1/-1}
.mk-nums div{padding:clamp(16px,3vw,30px) clamp(14px,3vw,28px);border-inline-start:1px solid var(--ds-border);display:grid;gap:4px}
.mk-nums div:first-child{border-inline-start:0}
.mk-nums span{font-size:.875rem;color:var(--ds-text-2)}
.mk-nums b{font:600 clamp(2rem,1.4rem + 2.6vw,3.5rem)/1.1 var(--ds-font-display);font-variant-numeric:tabular-nums;transition:color var(--ds-dur-2)}
.mk-nums b.chg{color:var(--ds-accent)}
.mk-say{padding:clamp(18px,3vw,30px);display:grid;gap:10px;align-content:start;border-inline-end:1px solid var(--ds-border)}
.mk-say h3{font-size:1.25rem;margin:0}
.mk-say p{margin:0;color:var(--ds-text-2);font-size:.9375rem}
.mk-log{min-width:0}
.mk-log td,.mk-log th{font-size:.8125rem}
@media (max-width:900px){
  .mk-app{grid-template-columns:minmax(0,1fr);min-height:0}
  .mk-list,.mk-side{border:0}
  .mk-chat{border-block:1px solid var(--ds-border)}
  .mk-msgs{min-height:180px}
  .mk-side{padding-top:4px}
  .mk-3,.mk-calc,.mk-fit{grid-template-columns:minmax(0,1fr)}
  .mk-calc-out{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-vs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-limits{columns:1}
  .mk-funnel,.mk-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-funnel div:nth-child(3){border-inline-start:0}
  .mk-funnel div:nth-child(n+3){border-top:1px solid var(--ds-border)}
  .mk-bom{grid-template-columns:minmax(0,1fr)}
  .mk-bom div{border-inline-start:0;border-top:1px solid var(--ds-border)}
  .mk-bom div:first-child{border-top:0}
  .mk-stock{grid-template-columns:minmax(0,1fr)}
  .mk-say{border-inline-end:0;border-bottom:1px solid var(--ds-border)}
}
@media (max-width:560px){.mk-vs-grid{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.mk-nums b{transition:none}}
.mk-pane{display:contents}
.mk-pane[hidden]{display:none}
.mk-side{align-self:stretch}
.mk-log .tbl{min-width:0}