/* KEMET Retail public site screens (kmet.io): home sections, pricing cards, /start signup, request-an-account form.
   Ported from KEMET Restaurants public.css (approved concept) and adapted to retail objects:
   shelf label, mini POS scan, stock-transfer slip, online pickup ticket, retail devices.
   Prefix: kp-. Colours are tokens only: theme tokens from core.css, fixed paper inks (--p-*) from site.css. */

/* ---------- base ---------- */
.kp svg.ic{stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kp-skip{position:absolute;z-index:100;inset-inline-start:12px;inset-block-start:-60px;background:var(--brass-hi);color:var(--on-brass);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.kp-skip:focus{inset-block-start:12px}
.kp [tabindex="-1"]:focus{outline:none}
.kp .hero .lh{z-index:12}
.kp .lh .brand{flex:none}
.kp-logo{width:30px;height:30px;flex:none;display:block}
.kp .lnav .kp-nav-login{display:none}
.kp-sec{padding-block:clamp(64px,8vw,112px)}
.kp-alt{background:var(--surface);border-block:1px solid var(--line-2)}
.kp-eb{color:var(--brass)}
.kp .rs-head{margin-block-end:clamp(32px,4vw,52px)}
.kp bdi.mono,.kp .ltr.mono{white-space:nowrap}
.kp .tbl-x{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch}
.kp-cap-s{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}

/* hero proof strip (honest product facts, no counts) */
.kp-home .hero-in{padding-block-end:clamp(40px,5vw,60px)}
.kp-proof{list-style:none;margin:0;display:flex;flex-wrap:wrap;gap:10px 36px;padding:18px 0 26px;border-block-start:1px solid rgba(201,164,92,.22);color:var(--on-date-2);font-size:14px}
.kp-proof li{display:inline-flex;align-items:center;gap:8px}
.kp-proof .ic{width:16px;height:16px;color:var(--brass-hi);stroke-width:2.4}

/* check lists */
.kp-pts{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.kp-pts li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;font-size:15px;line-height:1.7}
.kp-pts .ic{width:28px;height:28px;padding:5px;border-radius:50%;background:var(--brass-wash);color:var(--brass);stroke-width:2.2}
.kp-pts b{display:block;font-weight:600}
.kp-pts span{color:var(--ink-2);font-size:14px}

/* ---------- live order stage ---------- */
.kp-stage{background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:20px 22px 22px}
.kp-alt .kp-stage{background:var(--ground)}
.kp-stage-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-block-end:26px}
.kp-stage-id{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13.5px;color:var(--ink-2)}
.kp-stage-id b{color:var(--ink);font-weight:600}
.kp-play{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:14px;border-radius:99px;border:1px solid var(--line);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.kp-play:hover{color:var(--ink);border-color:var(--ink-3)}
.kp-play i{width:8px;height:10px;border-inline:3px solid currentColor;box-sizing:border-box}
.kp-play[aria-pressed="false"] i{border:0;width:0;height:0;border-block:5px solid transparent;border-inline-start:8px solid currentColor}
.kp-objs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:end;padding:8px 6px 0;min-height:300px;background:linear-gradient(to top,var(--sunk) 0 10px,transparent 10px);border-radius:0 0 6px 6px}
.kp-obj{position:relative;background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:14px 14px 16px;margin-block-end:10px;font-size:12.5px;line-height:1.55;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 22px -16px rgba(0,0,0,.5);transition:transform .45s ease,opacity .45s ease,box-shadow .45s ease}
.kp-obj[data-st="wait"]{opacity:.5;transform:translateY(6px)}
.kp-obj[data-st="now"]{transform:translateY(-10px);box-shadow:0 0 0 2px var(--brass-hi),0 24px 30px -18px rgba(0,0,0,.55)}
.kp-obj-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-weight:600;font-size:13px;border-block-end:1.5px dashed var(--p-rule);padding-block-end:7px;margin-block-end:9px}
.kp-obj-h .mono{font-weight:400;color:var(--paper-mute);font-size:11.5px}
.kp-obj-h span:first-child{color:var(--p-blue)}
.kp-done{position:absolute;inset-block-start:-11px;inset-inline-start:12px;display:none;align-items:center;gap:4px;background:var(--p-ok);color:var(--p-on);border-radius:99px;padding-block:1px;padding-inline:7px 9px;font-size:11px;font-weight:600}
.kp-done svg{width:12px;height:12px;stroke-width:2.6}
.kp-obj[data-st="done"] .kp-done{display:inline-flex}
.kp-meta{display:flex;justify-content:space-between;color:var(--paper-mute);font-size:11.5px;margin-block-end:6px}
.kp-ol{list-style:none;margin:0;padding:0}
.kp-ol li{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:6px;padding-block:3px;border-block-end:1px solid var(--p-line)}
.kp-ol li:last-child{border-block-end:0}
.kp-ol .mono{font-size:11.5px}
.kp-ol .q{color:var(--paper-mute)}
.kp-send{display:block;margin-block-start:10px;text-align:center;background:var(--paper-ink);color:var(--paper);border-radius:4px;padding:5px;font-weight:600}
.kp-kt{border-block-start:5px solid var(--p-warn)}
.kp-obj[data-st="done"].kp-kt,.kp-stage[data-at="rest"] .kp-kt{border-block-start-color:var(--p-ok)}
.kp-timer{font-family:var(--f-mono);font-size:22px;font-weight:500;line-height:1.2;color:var(--p-warn)}
.kp-obj[data-st="done"] .kp-timer{color:var(--p-ok)}
.kp-kt small{display:block;color:var(--p-warn);margin-block:6px 0}
.kp-tbl{display:flex;align-items:center;gap:10px;margin-block-end:8px}
.kp-tbl b{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper-ink);color:var(--paper);font-family:var(--f-mono);font-size:18px;font-weight:500;flex:none}
.kp-tbl span{font-size:12px;color:var(--paper-mute);line-height:1.45}
.kp-tbl span strong{display:block;color:var(--paper-ink);font-size:13px}
.kp-fl{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-block:8px}
.kp-fl i{aspect-ratio:1.4;border-radius:3px;border:1px solid var(--p-chip)}
.kp-fl i.b{background:var(--p-fill);border-color:var(--p-fill)}
.kp-fl i.m{background:var(--p-blue);border-color:var(--p-blue)}
.kp-served{display:block;text-align:center;border:1.5px solid var(--paper-ink);border-radius:4px;padding:4px;font-weight:600}
.kp-rc{padding-block-end:18px;margin-block-end:18px}
.kp-rc::after{content:"";position:absolute;inset-inline:0;bottom:-8px;height:8px;background:conic-gradient(from -45deg at 50% 100%,var(--paper) 90deg,#0000 0) 0 0/12px 8px repeat-x}
.kp-rc-name{text-align:center;font-weight:700;font-size:14px;margin:0}
.kp-rc-sub{text-align:center;color:var(--paper-mute);font-size:11px;margin:0 0 6px}
.kp-rc hr{border:0;border-block-start:1.5px dashed var(--p-rule);margin:8px 0}
.kp-rc-row{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--paper-mute)}
.kp-rc-tot{display:flex;justify-content:space-between;align-items:baseline;font-weight:700;font-size:13px}
.kp-rc-tot .mono{font-size:17px;font-weight:500}
.kp-rc .rc-bar{height:26px;margin-block:10px 0}
.kp-track{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-block-start:26px;padding-block-start:22px}
.kp-track::before,.kp-fill{content:"";position:absolute;top:6px;height:2px;inset-inline-start:12.5%}
.kp-track::before{inset-inline-end:12.5%;background:var(--line)}
.kp-fill{width:calc(75% * var(--p,1));background:var(--brass-hi);transition:width .6s ease}
.kp-step{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;text-align:center;background:none;border:0;padding:6px 6px 4px;border-radius:8px;color:var(--ink-3);font:inherit;font-size:12.5px;line-height:1.5;cursor:pointer}
.kp-step::before{content:"";position:absolute;top:-22px;width:14px;height:14px;border-radius:50%;background:var(--surface);border:2px solid var(--line);box-sizing:border-box}
.kp-step[data-st="done"]::before{background:var(--brass-hi);border-color:var(--brass-hi)}
.kp-step[data-st="now"]::before{border-color:var(--brass-hi);box-shadow:0 0 0 5px var(--brass-wash)}
.kp-step b{color:var(--ink);font-weight:600;font-size:14px}
.kp-step[data-st="wait"] b{color:var(--ink-3);font-weight:500}
.kp-step:hover b{text-decoration:underline;text-underline-offset:4px}
.kp-step .mono{font-size:12px}
.kp-cap{margin:18px 0 0;padding-block-start:14px;border-block-start:1px solid var(--line-2);font-size:14px;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.kp-cap b{color:var(--ink);font-weight:600}

/* ---------- devices ---------- */
.kp-dev{--dv:var(--p-dev);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}
.kp-dv{grid-column:span 4;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;min-width:0}
.kp-dv.w7{grid-column:span 7}.kp-dv.w5{grid-column:span 5}
.kp-art{height:236px;display:grid;place-items:center;padding:22px;background:radial-gradient(120% 90% at 50% 100%,color-mix(in srgb,var(--brass-hi) 16%,var(--sunk)),var(--sunk) 70%);border-block-end:1px solid var(--line-2)}
.kp-art svg{max-width:100%;max-height:100%;height:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.28))}
.kp .dv-b{fill:var(--dv);stroke:var(--line);stroke-width:1}
.kp .dv-s{fill:var(--paper)}.kp .dv-p{fill:var(--paper-2)}.kp .dv-l{fill:var(--p-fill)}.kp .dv-k{fill:var(--paper-ink)}.kp .dv-m{fill:var(--p-mute-2)}
.kp .dv-g{fill:var(--p-gold-hi)}.kp .dv-ok{fill:var(--p-ok)}.kp .dv-w{fill:var(--p-warn)}.kp .dv-r{fill:var(--p-bad)}.kp .dv-sl{fill:var(--p-slot)}
.kp .dv-rd{fill:none;stroke:var(--p-line);stroke-width:7;stroke-linecap:round}
.kp .dv-rt{fill:none;stroke:var(--p-blue);stroke-width:3;stroke-dasharray:6 5;stroke-linecap:round}
.kp-dv-b{padding:16px 18px 18px;display:grid;gap:6px}
.kp-dv-b h3{margin:0;font-size:16.5px;font-weight:600}
.kp-dv-b p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.75}
.kp-dv-b small{color:var(--ink-3);font-size:12.5px}
.kp-dev-foot{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;margin-block-start:22px;padding:16px 20px;border:1px dashed var(--line);border-radius:12px;color:var(--ink-2);font-size:14.5px}
.kp-dev-foot p{margin:0}

/* ---------- own-brand online ordering ---------- */
.kp-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.kp-copy .h2{margin-block-end:18px}
.kp-copy>p{color:var(--ink-2);font-size:16.5px;line-height:1.85;margin:0 0 26px;max-width:34em}
.kp-shop-wrap{position:relative;display:flex;justify-content:center;padding-block:6px 40px}
.kp-shop{--sa:var(--p-brand);width:min(410px,100%);background:var(--paper);color:var(--paper-ink);border-radius:14px;overflow:hidden;box-shadow:0 30px 50px -28px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.06)}
.kp-shop-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--paper-2);border-block-end:1px solid var(--p-line)}
.kp-dots{display:flex;gap:5px;direction:ltr}
.kp-dots i{width:9px;height:9px;border-radius:50%;background:var(--p-chip)}
.kp-url{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;background:var(--paper);border-radius:99px;padding:4px 12px;font-family:var(--f-mono);font-size:12.5px;direction:ltr}
.kp-url svg{width:12px;height:12px;flex:none;fill:none;stroke:var(--p-ok);stroke-width:2.4;stroke-linecap:round}
.kp-shop-hero{padding:16px 16px 12px;background:linear-gradient(170deg,color-mix(in srgb,var(--sa) 14%,var(--paper)),var(--paper) 80%)}
.kp-shop-hd{display:flex;align-items:center;gap:12px}
.kp-logo-s{width:46px;height:46px;border-radius:12px;background:var(--sa);color:var(--p-on);display:grid;place-items:center;font-weight:700;font-size:20px;flex:none}
.kp-shop-hd b{display:block;font-size:17px;line-height:1.35}
.kp-shop-hd small{display:flex;align-items:center;gap:6px;color:var(--paper-mute);font-size:12.5px}
.kp-shop-hd small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p-ok);flex:none}
.kp-shop-br{margin-inline-start:auto;font-size:12px;border:1px solid var(--p-rule-2);border-radius:99px;padding:3px 10px;white-space:nowrap}
.kp-cats{display:flex;gap:6px;padding:12px 16px 2px;overflow:hidden}
.kp-cats span{white-space:nowrap;padding:3px 12px;border-radius:99px;border:1px solid var(--p-line);font-size:12.5px}
.kp-cats .on{background:var(--sa);border-color:var(--sa);color:var(--p-on)}
.kp-items{list-style:none;margin:0;padding:4px 16px}
.kp-items li{display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:12px;align-items:center;padding-block:10px;border-block-end:1px solid var(--p-line)}
.kp-items li:last-child{border-block-end:0}
.kp-items b{display:block;font-size:14px;font-weight:600}
.kp-items small{display:block;font-size:12px;color:var(--paper-mute);line-height:1.5}
.kp-items .mono{font-size:12.5px}
.kp-add{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--sa);color:var(--sa);display:grid;place-items:center;font-weight:600;font-family:var(--f-mono)}
.kp-add.q{background:var(--sa);color:var(--p-on)}
.kp-cart{margin:8px 16px 12px;display:flex;align-items:center;gap:10px;background:var(--sa);color:var(--p-on);border-radius:10px;padding:10px 14px;font-size:13.5px}
.kp-cart b{margin-inline-start:auto;font-family:var(--f-mono);font-weight:500}
.kp-cart i{font-style:normal;font-weight:600;padding-inline-start:10px;border-inline-start:1px solid rgba(255,255,255,.35)}
.kp-pay{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;font-size:11.5px;color:var(--paper-mute);padding:0 16px 14px}

/* ---------- multi-branch report ---------- */
.kp-rep{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.kp-rep-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px 20px;padding:18px 20px;border-block-end:1px solid var(--line-2)}
.kp-rep-h b{display:block;font-size:15px;font-weight:600}
.kp-rep-h small{color:var(--ink-3);font-size:12.5px}
.kp-rep-tot{font-size:14px;color:var(--ink-2)}
.kp-rep-tot .mono{font-size:28px;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.kp-rep-l{list-style:none;margin:0;padding:6px 0}
.kp-rep-l li{display:grid;grid-template-columns:minmax(96px,auto) minmax(0,1fr) auto;gap:6px 18px;align-items:center;padding:12px 20px}
.kp-rep-l li+li{border-block-start:1px solid var(--line-2)}
.kp-rep-n b{display:block;font-weight:600;font-size:14.5px}
.kp-rep-n small{color:var(--ink-3);font-size:12px;font-variant-numeric:tabular-nums}
.kp-rep-bar{height:10px;border-radius:5px;background:var(--sunk);overflow:hidden}
.kp-rep-bar i{display:block;height:100%;width:var(--w);background:var(--brass-hi);border-radius:5px}
.kp-rep-v{font-family:var(--f-mono);font-size:14.5px;font-weight:500;text-align:end;min-width:8ch}
.kp-rep-v small{display:block;font-family:var(--f-body);font-size:11.5px;color:var(--ink-3);font-weight:400}
.kp-new{font-size:11px;font-weight:600;color:var(--brass);background:var(--brass-wash);border-radius:4px;padding:0 6px;margin-inline-start:6px}
.kp-rep-f{display:flex;flex-wrap:wrap;gap:6px 20px;padding:12px 20px;border-block-start:1px solid var(--line-2);background:color-mix(in srgb,var(--sunk) 40%,transparent);font-size:12.5px;color:var(--ink-2)}
.kp-rep-f b{color:var(--ink);font-weight:600}

/* ---------- pricing (real packages) ---------- */
.kp-bill-wrap{display:grid;justify-items:center;text-align:center;margin-block-end:28px}
.kp-bill{display:inline-flex;gap:2px;padding:4px;border-radius:99px;background:var(--sunk);border:1px solid var(--line-2)}
.kp-bill button{height:40px;padding-inline:20px;border-radius:99px;border:0;background:none;color:var(--ink-2);font:inherit;font-weight:600;font-size:14.5px;cursor:pointer}
.kp-bill button:hover{color:var(--ink)}
.kp-bill button[aria-pressed="true"]{background:var(--date);color:var(--on-date)}
.kp-bill-note{margin:10px 0 0;font-size:13px;color:var(--ink-3);min-height:1.6em}
.kp-pks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kp-pks[data-count="1"]{grid-template-columns:minmax(0,420px);justify-content:center}
.kp-pks[data-count="2"]{grid-template-columns:repeat(2,minmax(0,400px));justify-content:center}
.kp-pks[data-count="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.kp-pk{display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:22px 20px;box-shadow:0 24px 44px -32px rgba(0,0,0,.5);min-width:0}
.kp-alt .kp-pk{background:var(--ground)}
.kp-pk.pop{border-color:var(--brass-hi);box-shadow:0 0 0 1px var(--brass-hi),0 26px 46px -28px rgba(0,0,0,.5)}
.kp-pk-hd{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.kp-pk h3{font-size:19px;font-weight:600;margin:0}
.kp-pop{font-size:12px;font-weight:600;background:var(--brass-wash);color:var(--brass);padding:1px 10px;border-radius:99px}
.kp-pk-for{margin:-6px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.7}
.kp-pk-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;min-height:48px}
.kp-pk-price b{font-family:var(--f-mono);font-size:36px;font-weight:500;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.kp-pk-price span{font-weight:600}
.kp-pk-price small{color:var(--ink-3);font-size:13px}
.kp-pk-price .ask{font-family:var(--f-body);font-size:26px;font-weight:600;letter-spacing:0}
.kp-pk-save{margin:-8px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.6}
.kp-pk-lim{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:600;padding:8px 10px;border-radius:8px;background:var(--sunk)}
.kp-pk-lim .ui-icon,.kp-pk-lim .ic{width:16px;height:16px;color:var(--ink-2)}
.kp-pk-meta{margin:-6px 0 0;font-size:12.5px;color:var(--ink-3)}
.kp-pk ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13.5px}
.kp-pk li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;line-height:1.55}
.kp-pk li .ic{width:16px;height:16px;margin-top:2px;color:var(--ok);stroke-width:2.2}
.kp-pk li.no{color:var(--ink-3)}
.kp-pk li.no .ic{color:var(--ink-3)}
.kp-pk-trial{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--ink-3)}
.kp-pk-trial .ui-icon{width:16px;height:16px}
.kp-pk-trial.on{color:var(--ok);font-weight:500}
.kp-pk .btn{margin-block-start:auto}
.kp-pk-note{margin:16px 0 0;font-size:13px;color:var(--ink-3);text-align:center}
.kp-panel{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;margin-block-start:36px}
.kp-alt .kp-panel{background:var(--ground)}
.kp-pn-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 18px;border-block-end:1px solid var(--line-2)}
.kp-pn-h h3{margin:0;font-size:15.5px;font-weight:600}
.kp-cmp .tbl{min-width:560px}
.kp-cmp .tbl th,.kp-cmp .tbl td{text-align:center}
.kp-cmp .tbl th:first-child,.kp-cmp .tbl td:first-child{text-align:start;position:sticky;inset-inline-start:0;background:var(--surface);z-index:1}
.kp-alt .kp-cmp .tbl th:first-child{background:var(--ground)}
.kp-cmp .tbl thead th{font-size:13.5px;color:var(--ink);font-weight:600;padding-block:14px}
.kp-cmp .tbl thead th small{display:block;font-weight:400;color:var(--ink-3);font-size:12px;font-family:var(--f-mono)}
.kp-cmp .tbl tbody th{color:var(--ink);font-weight:500;font-size:13.5px}
.kp-cmp .tbl .pc{background:color-mix(in srgb,var(--brass-wash) 50%,transparent)}
.kp-cmp .tbl thead th.pc{box-shadow:inset 0 3px 0 var(--brass-hi)}
.kp-cmp .tbl tr.grp th{background:var(--sunk);color:var(--ink-2);font-weight:600;font-size:12.5px;text-align:start;padding-block:8px}
.kp-cmp .tbl tbody tr:hover{background:none}
.kp-y{display:inline-flex;color:var(--ok)}.kp-y .ic{width:18px;height:18px;stroke-width:2.4}
.kp-n{color:var(--ink-3);font-weight:600}
.kp-cmp .key{display:flex;gap:14px;font-size:12.5px;color:var(--ink-3)}
.kp-cmp .key span{display:inline-flex;align-items:center;gap:4px}
.kp-empty{display:grid;justify-items:center;text-align:center;gap:10px;padding:44px 20px;border:1px dashed var(--line);border-radius:14px;color:var(--ink-2)}
.kp-empty .ui-icon{width:30px;height:30px;color:var(--ink-3)}
.kp-empty h3{margin:0;font-size:17px;color:var(--ink)}
.kp-empty p{margin:0;max-width:46ch;line-height:1.8}
.kp-empty .row{justify-content:center;margin-block-start:6px}
/* package picker inside /start */
.kp-pick{border:0;padding:0;margin:0;min-width:0}
.kp-pick-card{padding-inline-end:44px}
.kp-pick-card b{font-size:15px}
.kp-pick-pr{font-size:14px;color:var(--ink)}
.kp-pick-pr .num{font-family:var(--f-mono);font-weight:500;font-size:18px}
.kp-pick-card small{color:var(--ink-3);font-size:12.5px;line-height:1.6}
.kp-rec{justify-self:start;font-size:11px;font-weight:600;color:var(--brass);background:var(--brass-wash);border-radius:4px;padding:0 7px}
.kp-ask{font-weight:600}

/* ---------- FAQ ---------- */
.kp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 64px;align-items:start}
.kp-faq-side p{color:var(--ink-2);margin:16px 0 0;line-height:1.85;max-width:26em}
.kp-faq-side a{color:var(--brass);font-weight:600;text-underline-offset:5px}
.kp-qs{border-block-start:1px solid var(--line)}
.kp-qs details{border-block-end:1px solid var(--line)}
.kp-qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-size:16.5px;font-weight:600;line-height:1.6}
.kp-qs summary::-webkit-details-marker{display:none}
.kp-qs summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(45deg);margin-block-start:-6px;transition:transform .2s}
.kp-qs details[open] summary::after{transform:rotate(-135deg);margin-block-start:6px}
.kp-qs summary:hover{color:var(--brass)}
.kp-qs details p{margin:0;padding:0 4px 20px;color:var(--ink-2);line-height:1.9;max-width:60em}

/* ---------- contact band ---------- */
.kp-cta{--focus:var(--brass-hi);background:var(--date);color:var(--on-date);position:relative;overflow:hidden;isolation:isolate}
.kp-cta::before{content:"";position:absolute;z-index:-1;inset-block-end:-300px;inset-inline-start:-160px;width:760px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,168,92,.16),transparent)}
.kp-cta-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px clamp(32px,5vw,80px);align-items:center;padding-block:clamp(64px,8vw,104px)}
.kp-cta .h2{margin-block-end:16px}
.kp-cta-p{color:var(--on-date-2);font-size:16.5px;line-height:1.85;margin:0 0 26px;max-width:32em}
.kp-cta-soft{font-size:14px;margin-block-start:-8px}
.kp-cta .cta-row{margin-block-end:30px}
.kp-wa{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:16px 36px;margin:0;justify-content:start}
.kp-wa dt{font-size:12.5px;color:var(--on-date-2)}
.kp-wa dd{margin:2px 0 0;color:var(--on-date);font-size:15px}
.kp-wa dd a{color:inherit}
.kp-wa dd.big{font-family:var(--f-mono);font-size:22px;font-weight:500;color:var(--brass-hi)}
.kp-cta-card{--focus:var(--ink);background:var(--surface);color:var(--ink);border-radius:14px;padding:22px;display:grid;gap:14px;box-shadow:0 30px 50px -30px rgba(0,0,0,.6)}
.kp-cta-card h3{margin:0;font-size:17px}
.kp-cta-card>p{margin:-6px 0 0;color:var(--ink-2);font-size:14px;line-height:1.8}
.kp-req-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.kp-req-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.kp-req-steps li>.mono{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brass-wash);color:var(--brass);font-weight:500;font-size:13px}
.kp-req-steps b{display:block;font-weight:600;font-size:14.5px}
.kp-req-steps span{color:var(--ink-2);font-size:13.5px;line-height:1.7}

/* ---------- footer ---------- */
.kp-foot{--focus:var(--brass-hi);background:var(--date);color:var(--on-date-2);border-block-start:1px solid rgba(201,164,92,.22);font-size:14px}
.kp-foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:52px 36px}
.kp-foot .brand{color:var(--on-date)}
.kp-foot-about{margin:14px 0 18px;line-height:1.85;max-width:30em}
.kp-foot-con{display:grid;gap:4px;font-size:13.5px}
.kp-foot h3{font-size:13.5px;font-weight:600;color:var(--on-date);margin:4px 0 14px}
.kp-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.kp-foot a{color:var(--on-date-2);text-decoration:none}
.kp-foot a:hover{color:var(--on-date);text-decoration:underline;text-underline-offset:4px}
.kp-foot-bot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;justify-content:space-between;padding-block:18px 28px;border-block-start:1px solid rgba(201,164,92,.18);font-size:12.5px}

/* =========================== /start signup =========================== */
.kp-su{display:grid;grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);min-height:100vh;background:var(--ground)}
.kp-su-side{--focus:var(--brass-hi);position:relative;isolation:isolate;overflow:hidden;background:var(--date);color:var(--on-date);padding:26px clamp(20px,3vw,44px) 30px;display:flex;flex-direction:column;gap:26px}
.kp-su-side::before{content:"";position:absolute;z-index:-1;top:-220px;inset-inline-start:-160px;width:640px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,168,92,.2),rgba(214,168,92,.05) 55%,transparent)}
.kp-su-side .brand{color:var(--on-date)}
.kp-su-side .eyebrow{margin-block-end:12px}
.kp-su-h{font-family:var(--f-display);font-weight:700;font-size:clamp(34px,3.4vw,48px);line-height:1.35;margin:0 0 12px}
.kp-su-h em{font-style:normal;color:var(--brass-hi)}
.kp-su-lede{margin:0;color:var(--on-date-2);font-size:15.5px;line-height:1.85;max-width:34em}
.kp-su-obj{display:flex;justify-content:center;padding-block:4px 8px}
.kp-su-obj .rc-wrap{transform:rotate(-1.6deg)}
.kp-su-obj .rcpt{width:min(290px,76vw);padding:20px 20px calc(20px + var(--z))}
.kp-su-obj .rc-name{font-size:26px}
.kp-su-obj .rc-sub .mono{direction:ltr;unicode-bidi:isolate}
.kp-su-get{list-style:none;margin:0;padding:18px 0 0;border-block-start:1px solid rgba(201,164,92,.25);display:grid;gap:12px;font-size:14.5px}
.kp-su-get li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;line-height:1.65}
.kp-su-get .ic{color:var(--brass-hi);margin-top:3px;stroke-width:2.4}
.kp-su-get small{display:block;color:var(--on-date-2);font-size:13px}
.kp-su-help{margin:auto 0 0;font-size:13px;color:var(--on-date-2)}
.kp-su-help a{color:var(--on-date)}
.kp-su-main{min-width:0;display:flex;flex-direction:column}
.kp-su-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:18px clamp(20px,4vw,56px);font-size:14px;color:var(--ink-2)}
.kp-su-bar a{color:var(--ink-2)}
.kp-su-bar .link{color:var(--brass)}
.kp-su-in{width:100%;max-width:640px;margin-inline:auto;padding:8px clamp(16px,4vw,40px) 48px}
.kp-su .stepper{margin-block-end:28px}
.kp-su .stepper li>a,.kp-su .stepper li>span{display:flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.kp-su .stepper li>a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line)}
.kp-su .stepper .mono{font-size:12px;color:var(--ink-3)}
.kp-su .stepper li.cur .mono{color:var(--brass)}
.kp-su .stepper li.done .mono{color:var(--ok)}
.kp-su .field{align-content:start}
.kp-step-h{margin:0 0 4px;font-size:24px;font-weight:600;line-height:1.4}
.kp-step-p{margin:0 0 22px;color:var(--ink-3);font-size:14.5px;line-height:1.8}
.kp-su .callout{margin-block-end:18px}
.kp-su .callout ul{margin:4px 0 0;padding-inline-start:18px}
.kp-su .callout p{margin:0}
.kp-derived{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.kp-derived b{color:var(--ink-2);font-weight:600}
.kp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-start:26px;padding-block-start:20px;border-block-start:1px solid var(--line-2)}
.kp-nav .btn-brass{margin-inline-start:auto}
.kp-nav .ic{width:18px;height:18px}
[dir="ltr"] .kp-nav .kp-fwd,[dir="ltr"] .kp-nav .kp-back{transform:scaleX(-1)}
.kp-url-prev{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kp-url-prev .mono{direction:ltr;unicode-bidi:isolate;color:var(--ink);background:var(--sunk);border-radius:6px;padding:2px 8px;font-size:13px}
.kp-url-prev .kp-tag{font-size:12px;font-weight:600;padding:0 8px;border-radius:4px;background:var(--sunk);color:var(--ink-3)}
.kp-url-prev .kp-tag.ok{background:var(--ok-wash);color:var(--ok)}
.kp-url-prev .kp-tag.bad{background:var(--bad-wash);color:var(--bad)}
.kp-su .affix:focus-within{border-color:var(--brass);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass-hi) 25%,transparent)}
.kp-su .affix .input:focus{box-shadow:none}
.kp-su .field.has-err .affix{border-color:var(--bad)}
.kp-su .field.has-err .select{border-color:var(--bad)}
.kp-code{max-width:220px;font-family:var(--f-mono);font-size:22px;letter-spacing:.4em;text-align:center;height:52px}
/* password box is always LTR (typed text + eye at the end of the text) */
.kp-pw{position:relative;direction:ltr}
.kp-pw .input{padding-inline-end:48px}
.kp-eye{position:absolute;inset-block-start:4px;inset-inline-end:4px;width:36px;height:36px;border:0;background:none;border-radius:6px;color:var(--ink-3);display:grid;place-items:center;cursor:pointer}
.kp-eye:hover{color:var(--ink);background:var(--sunk)}
.kp-eye .off{display:none}
.kp-eye[aria-pressed="true"] .on{display:none}
.kp-eye[aria-pressed="true"] .off{display:block}
.kp-hints{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-3)}
.kp-hints li{display:inline-flex;align-items:center;gap:6px}
.kp-hints li::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ink-3);flex:none;box-sizing:border-box}
.kp-hints li.ok{color:var(--ok)}
.kp-hints li.ok::before{border-color:var(--ok);background:var(--ok);box-shadow:inset 0 0 0 2px var(--surface)}
.kp-strength{display:flex;gap:4px;direction:ltr;margin-block-start:2px}
.kp-strength i{flex:1;height:4px;border-radius:2px;background:var(--sunk)}
.kp-strength[data-l="1"] i:nth-child(-n+1){background:var(--bad)}
.kp-strength[data-l="2"] i:nth-child(-n+2){background:var(--warn)}
.kp-strength[data-l="3"] i:nth-child(-n+3){background:var(--ok)}
.kp-strength[data-l="4"] i{background:var(--ok)}
.kp-resend{font-size:13px;color:var(--brass);font-weight:500;text-underline-offset:4px}
.kp-prov{list-style:none;margin:0;padding:0;border:1px solid var(--line-2);border-radius:10px;background:var(--surface)}
.kp-prov li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;border-block-end:1px solid var(--line-2);font-size:14px}
.kp-prov li:last-child{border-block-end:0}
.kp-prov small{display:block;color:var(--ink-3);font-size:12.5px}
.kp-prov .mk{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;box-sizing:border-box}
.kp-prov .mk .ic{width:14px;height:14px;stroke-width:2.4}
.kp-prov li[data-st="done"] .mk{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.kp-prov li[data-st="wait"] .mk{border-color:var(--warn);color:var(--warn)}
.kp-prov em{font-style:normal;font-size:12px;font-weight:600;padding:1px 8px;border-radius:4px;background:var(--sunk);color:var(--ink-3);white-space:nowrap}
.kp-prov li[data-st="done"] em{background:var(--ok-wash);color:var(--ok)}
.kp-prov li[data-st="wait"] em{background:var(--warn-wash);color:var(--warn)}
.kp-ready{margin-block-start:16px}
.kp-next-list{margin:8px 0 0;padding-inline-start:18px;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.kp-off{display:grid;gap:14px;padding:22px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface)}
.kp-off h2{margin:0;font-size:20px;font-weight:600;display:flex;align-items:center;gap:10px}
.kp-off h2 .ui-icon{color:var(--warn)}
.kp-off p{margin:0;color:var(--ink-2);line-height:1.85}
.kp-off .row{margin-block-start:4px}

/* =========================== responsive =========================== */
@media (max-width:1180px){
  .kp-pks,.kp-pks[data-count="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .kp .lnav .kp-nav-login{display:block;border-block-start:1px solid rgba(201,164,92,.22);margin-block-start:4px;color:var(--brass-hi)}
  .kp-faq{grid-template-columns:1fr}
  .kp-foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kp-foot-brand{grid-column:1/-1}
  /* minmax(0,…): the shop mock-up's clipped chip row must not widen the single track (long fil/hi/bn chips) */
  .kp-split,.kp-cta-in{grid-template-columns:minmax(0,1fr)}
  .kp-dv,.kp-dv.w5{grid-column:span 6}
  .kp-dv.w7{grid-column:span 12}
  .kp-objs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;min-height:0}
  .kp-su{grid-template-columns:1fr;align-content:start}
  .kp-su-side{gap:16px;padding-block:20px 22px}
  .kp-su-obj,.kp-su-help{display:none}
  .kp-su-h{font-size:32px}
  .kp-su-get{grid-template-columns:1fr 1fr;gap:10px 16px;font-size:13.5px}
}
@media (max-width:640px){
  .kp .lh .btn{height:38px;font-size:14px}
  .kp-foot-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
  .kp-qs summary{font-size:15.5px}
  .kp-proof{gap:8px 22px;font-size:13px}
  .kp-dv,.kp-dv.w7,.kp-dv.w5{grid-column:span 12}
  .kp-art{height:200px}
  .kp-stage{padding:16px 12px 18px}
  .kp-objs{gap:14px 12px;padding-inline:0}
  .kp-obj{padding:12px 10px 14px;font-size:11.5px}
  .kp-ol li{grid-template-columns:12px minmax(0,1fr) auto;gap:4px}
  .kp-step{font-size:11px;padding-inline:2px}
  .kp-step b{font-size:12px}
    .kp-shop-wrap{flex-direction:column;align-items:center;padding-block-end:0}
  .kp-rep-l li{grid-template-columns:minmax(0,1fr) auto;padding-inline:16px}
  .kp-rep-bar{grid-column:1/-1;grid-row:2}
  .kp-rep-h,.kp-rep-f{padding-inline:16px}
  .kp-pks,.kp-pks[data-count]{grid-template-columns:1fr}
  .kp-bill button{padding-inline:14px;font-size:14px}
  .kp-cmp .tbl th,.kp-cmp .tbl td{padding-inline:10px}
  .kp-wa{grid-template-columns:1fr}
  .kp-cta-card,.kp-req{padding:18px 16px}
  .kp-su-get{grid-template-columns:1fr}
  .kp-su-get small{display:none}
  .kp-step-h{font-size:21px}
  .kp-su .stepper li{font-size:12px}
  .kp-su .stepper li .kp-st-l{display:none}
  .kp-su .stepper li.cur .kp-st-l{display:inline}
  .kp-nav .btn{flex:1 1 auto}
  .kp-nav .btn-brass{order:-1;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .kp-obj,.kp-fill{transition:none}
}

/* =========================== languages (ar · en · hi · ur · bn · fil) =========================== */
/* Scripts: hi/bn add their Noto face after Plex (Plex keeps Latin + digits); ur uses the Plex Arabic stack. */
html[lang="hi"]{--f-body:"IBM Plex Sans Arabic","Noto Sans Devanagari","Nirmala UI","Segoe UI",system-ui,sans-serif}
html[lang="bn"]{--f-body:"IBM Plex Sans Arabic","Noto Sans Bengali","Nirmala UI","Vrinda","Segoe UI",system-ui,sans-serif}
/* Aref Ruqaa is an Arabic display face: only ar keeps it. Every other locale sets headlines in the body face, strong weight. */
html:not([lang="ar"]) .kp{--f-display:var(--f-body)}
html:not([lang="ar"]) .kp .h1{font-size:clamp(36px,4.6vw,68px);line-height:1.14;letter-spacing:-.015em;text-wrap:balance}
html:not([lang="ar"]) .kp .h2{font-size:clamp(28px,3.3vw,46px);line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
/* header: longer nav labels (fil, bn, hi) must stay on one line */
.kp .lnav a,.kp .lh-login,.kp .lh .btn{white-space:nowrap}
html:not([lang="ar"]) .kp .lh{gap:18px}
html:not([lang="ar"]) .kp .lnav{gap:0}
html:not([lang="ar"]) .kp .lnav a{padding-inline:10px}
html:not([lang="ar"]) .kp .kp-su-h{font-size:clamp(30px,3vw,42px);line-height:1.2;letter-spacing:-.01em}
html:not([lang="ar"]) .kp .wm-ar{font-size:14px;font-weight:500;letter-spacing:.02em}
html:not([lang="ar"]) .kp .rc-name{font-size:23px;line-height:1.35}
/* Devanagari / Bengali matras and Urdu descenders need taller lines than Latin. */
html:is([lang="hi"],[lang="bn"]) .kp .h1{line-height:1.32;letter-spacing:0}
html:is([lang="hi"],[lang="bn"]) .kp :is(.h2,.kp-su-h){line-height:1.38;letter-spacing:0}
html[lang="ur"] .kp .h1{line-height:1.5;letter-spacing:0}
html[lang="ur"] .kp :is(.h2,.kp-su-h){line-height:1.55;letter-spacing:0}
html[lang="ur"] .kp .rc-name{line-height:1.6}
html:is([lang="ur"],[lang="hi"],[lang="bn"]) .kp .kp-qs summary{line-height:1.75}

/* language switcher: compact <details> menu (header, /start) + inline list inside the mobile menu */
.kp-lang{position:relative}
.kp-lang summary{list-style:none;display:inline-flex;align-items:center;gap:7px;height:40px;padding-inline:11px;border-radius:6px;border:1px solid rgba(201,164,92,.4);color:var(--on-date);cursor:pointer;font-size:14px;font-weight:500;white-space:nowrap;user-select:none}
.kp-lang summary::-webkit-details-marker{display:none}
.kp-lang summary:hover{border-color:var(--brass-hi)}
.kp-lang summary:focus-visible{outline:2px solid var(--focus,var(--brass-hi));outline-offset:2px}
.kp-lang summary .ui-icon{width:17px;height:17px;flex:none}
.kp-lang-chev{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-block-start:-3px;opacity:.75;transition:transform .15s}
.kp-lang[open] .kp-lang-chev{transform:rotate(-135deg);margin-block-start:3px}
.kp-lang-menu{position:absolute;z-index:40;inset-block-start:calc(100% + 6px);inset-inline-end:0;min-width:190px;margin:0;padding:6px;list-style:none;background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 18px 40px -16px rgba(0,0,0,.45)}
.kp-lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 12px;border-radius:6px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.4}
.kp-lang-menu a:hover,.kp-lang-menu a:focus-visible{background:var(--sunk)}
.kp-lang-menu a:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.kp-lang-menu a[aria-current="true"]{background:var(--brass-wash);color:var(--brass);font-weight:600}
.kp-lang-menu small{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;direction:ltr}
.kp-lang-list{display:none}
/* /start: the switcher sits on the light page ground, next to "have an account?" */
/* bar = Home · have-an-account · language. Language stays at the inline end of the first row so its menu opens inward. */
.kp-su-have{margin-inline-start:auto}
/* longer translations: buttons in the signup-off panel and contact card may wrap instead of overflowing */
.kp-off .btn,.kp-req .btn,.kp-cta-card .btn,.kp-empty .btn{white-space:normal;height:auto;min-height:44px;padding-block:9px;line-height:1.4;text-align:center}
.kp-off{min-width:0}
.kp-su-bar .kp-lang summary{color:var(--ink-2);border-color:var(--line);height:36px;font-size:13.5px}
.kp-su-bar .kp-lang summary:hover{color:var(--ink);border-color:var(--ink-3)}
.kp-su-bar .kp-lang summary:focus-visible{outline-color:var(--brass)}
/* Header collapses into the menu button below 1240px: with six languages the full nav no longer fits
   (it already spilled in ar near 1040px). Mirrors the <=980px rules in site.css. */
@media (max-width:1240px){
  .kp .lnav{display:none;position:absolute;inset-inline:0;top:76px;z-index:10;flex-direction:column;background:var(--date-2);border:1px solid rgba(201,164,92,.28);border-radius:10px;padding:8px;margin:0}
  .kp .lnav.open{display:flex}
  .kp .lnav a,html:not([lang="ar"]) .kp .lnav a{padding:12px}
  .kp .menu-btn{display:inline-flex}
  .kp .lh-login{display:none}
  .kp .lh-act{margin-inline-start:auto}
  .kp .lnav .kp-nav-login{display:block;border-block-start:1px solid rgba(201,164,92,.22);margin-block-start:4px;color:var(--brass-hi)}
  .kp .lh-act .kp-lang{display:none}
  .kp .lnav .kp-lang-list{display:flex;flex-wrap:wrap;gap:6px;padding:10px 6px 4px;margin-block-start:4px;border-block-start:1px solid rgba(201,164,92,.22)}
  .kp .lnav .kp-lang-list a{padding:6px 12px;border-radius:99px;border:1px solid rgba(201,164,92,.3);font-size:14px;line-height:1.5}
  .kp .lnav .kp-lang-list a[aria-current="true"]{border-color:var(--brass-hi);color:var(--brass-hi);box-shadow:none;border-radius:99px}
}

@media (max-width:640px){
  .kp-su-have{order:3;flex-basis:100%;margin-inline-start:0}
}

/* ---------- rc6-hf1: request-an-account form on /start (shown while self sign-up is off) ---------- */
.kp-req{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:clamp(20px,3vw,32px);display:grid;gap:14px;max-width:720px}
.kp-req h2{margin:0;font-size:clamp(20px,2.2vw,24px);line-height:1.35;text-wrap:balance}
.kp-req-lead{margin:0;color:var(--ink-2);line-height:1.8;max-width:60ch}
.kp-req .form{gap:14px}
.kp-req .row{gap:14px 18px}
.kp-req .muted{font-size:14px}
.kp-hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.kp-req-done{display:grid;justify-items:start;gap:10px}
.kp-req-ok{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ok-wash);color:var(--ok)}
.kp-req-ok :is(.ic,.ui-icon){width:22px;height:22px}
.kp-req button[aria-busy="true"]{opacity:.7;pointer-events:none}

/* =========================== retail objects (kmet.io) =========================== */
/* receipt: variant line under each item, loyalty points row */
.rc-var{display:block;font-size:11px;color:var(--paper-mute);line-height:1.4}
.rc-pts{color:var(--p-blue)}
.rc-pts .mono{font-weight:500}

/* story rail: two rows (morning / evening) of three paper tickets */
.rail-when{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--ink-3);font-size:13px;font-weight:600}
.rail-when::after{content:"";flex:1;height:1px;background:var(--line-2)}
.rail.rail-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.rail.rail-3+.rail-when{margin-block-start:40px}
.rail-3 .tk:nth-child(2){transform:rotate(-.4deg)}
.rail-3 .tk:nth-child(3){transform:rotate(.5deg)}
.tk .mini small{font-size:11.5px}
/* purchase slip */
.kp-po-h{display:flex;justify-content:space-between;gap:8px;font-weight:600}
.kp-po-h .mono{color:var(--paper-mute);font-weight:400}
.kp-po>small{display:block;color:var(--paper-mute);margin-block-end:6px}
.kp-po ul{list-style:none;margin:0 0 8px;padding:0}
.kp-po li{display:flex;justify-content:space-between;gap:8px;padding-block:3px;border-block-end:1px dashed var(--p-rule-2)}
.kp-po li .mono{color:var(--p-ok);font-weight:500}
.kp-po-ok{display:block;text-align:center;background:var(--p-ok);color:var(--p-on);border-radius:4px;padding:3px;font-weight:600}
/* barcode shelf label */
.kp-tag{background:var(--paper);border:1px solid var(--p-rule-2);border-inline-start:5px solid var(--p-blue);border-radius:4px;padding:8px 10px;display:grid;gap:3px}
.kp-tag>small{font-size:10.5px;color:var(--paper-mute);letter-spacing:.02em}
.kp-tag>b{font-size:14px;line-height:1.35}
.kp-tag-var{display:flex;gap:4px;flex-wrap:wrap}
.kp-tag-var span{font-size:10.5px;padding:0 7px;border-radius:99px;border:1px solid var(--p-chip);color:var(--paper-mute)}
.kp-tag-var .on{background:var(--p-blue);border-color:var(--p-blue);color:var(--p-on)}
.kp-tag-pr{display:flex;align-items:baseline;gap:5px}
.kp-tag-pr .mono{font-size:22px;font-weight:500;line-height:1.2;color:var(--paper-ink)}
.kp-tag-pr small{font-size:11px;color:var(--paper-mute)}
.kp-bc{display:block;height:30px;margin-block-start:2px;direction:ltr;background:repeating-linear-gradient(90deg,var(--paper-ink) 0 2px,transparent 2px 3px,var(--paper-ink) 3px 4px,transparent 4px 7px,var(--paper-ink) 7px 10px,transparent 10px 11px,var(--paper-ink) 11px 12px,transparent 12px 15px,var(--paper-ink) 15px 17px,transparent 17px 19px)}
.kp-tag-no{font-size:10.5px;text-align:center;letter-spacing:.12em;color:var(--paper-ink);direction:ltr}
/* mini POS with a scan */
.kp-scan{position:relative;display:flex;align-items:center;gap:8px;background:var(--paper);border:1.5px solid var(--p-blue);border-radius:6px;padding:6px 8px;overflow:hidden;direction:ltr}
.kp-scan .mono{font-size:11.5px;color:var(--paper-ink)}
.kp-scan-ic{width:18px;height:12px;flex:none;background:repeating-linear-gradient(90deg,var(--paper-ink) 0 1.5px,transparent 1.5px 3px,var(--paper-ink) 3px 5px,transparent 5px 6px)}
.kp-beam{position:absolute;inset-inline:6px;top:50%;height:2px;border-radius:2px;background:var(--p-scan);box-shadow:0 0 8px var(--p-scan);opacity:.85;animation:kp-scan 2.6s ease-in-out infinite}
@keyframes kp-scan{0%,100%{transform:translateY(-9px);opacity:.25}50%{transform:translateY(9px);opacity:.95}}
.kp-scan-ok{display:inline-flex;align-items:center;gap:5px;margin-block:7px 4px;font-size:11px;font-weight:600;color:var(--p-ok)}
.kp-scan-ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p-ok)}
.kp-mpos ul{list-style:none;margin:0;padding:0}
.kp-mpos li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:4px 6px;border-radius:4px}
.kp-mpos li small{display:block;color:var(--paper-mute);font-size:10.5px}
.kp-mpos li.new{background:var(--p-blue-wash);box-shadow:inset 3px 0 0 var(--p-blue)}
[dir="rtl"] .kp-mpos li.new{box-shadow:inset -3px 0 0 var(--p-blue)}
.kp-mpos .pos-tot i{background:var(--p-blue);color:var(--p-on)}
/* stock per location */
.kp-stk>b{display:block;margin-block-end:6px;font-size:12px}
.kp-stk ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.kp-stk li{display:grid;grid-template-columns:minmax(0,1fr) 54px 26px;gap:6px;align-items:center}
.kp-stk li i{height:6px;border-radius:3px;background:var(--p-chip);position:relative;overflow:hidden}
.kp-stk li i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);background:var(--p-blue);border-radius:3px}
.kp-stk li .mono{text-align:end;font-weight:500}
.kp-stk li.is-low,.kp-stk li.is-low .mono{color:var(--p-bad)}
.kp-stk li.is-low i::after{background:var(--p-bad)}
.kp-stk-low{display:block;margin-block-start:7px;color:var(--p-bad);font-weight:600}

/* stage objects */
.kp-tag-s{border-inline-start-width:4px;padding:6px 8px}
.kp-tag-s .kp-tag-pr .mono{font-size:19px}
.kp-tag-s .kp-bc{height:24px}
.kp-scan-s{margin-block-end:8px}
.kp-count{display:flex;align-items:baseline;gap:12px;margin-block:4px 6px}
.kp-count s{font-size:17px;color:var(--paper-mute)}
.kp-count b{font-size:34px;font-weight:500;line-height:1.1;color:var(--paper-ink)}
.kp-lvl{position:relative;height:8px;border-radius:4px;background:var(--p-chip);margin-block:4px 2px}
.kp-lvl i{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:4px;background:var(--p-blue)}
.kp-lvl em{position:absolute;inset-block:-4px;inset-inline-start:var(--at);width:2px;background:var(--p-bad)}
.kp-kt{border-block-start-color:var(--p-blue)}
.kp-obj[data-st="done"].kp-kt,.kp-stage[data-at="rest"] .kp-kt{border-block-start-color:var(--p-ok)}
.kp-kt small{color:var(--p-text)}
.kp-obj[data-st="now"]{box-shadow:0 0 0 2px var(--retail),0 24px 30px -18px rgba(0,0,0,.55)}
.kp-send{background:var(--p-blue);color:var(--p-on)}
.kp-fill,.kp-step[data-st="done"]::before{background:var(--retail)}
.kp-step[data-st="done"]::before,.kp-step[data-st="now"]::before{border-color:var(--retail)}
.kp-step[data-st="now"]::before{box-shadow:0 0 0 5px var(--retail-wash)}

/* devices: three per row, retail inks */
.kp .dv-bl{fill:var(--p-blue)}
.kp .dv-blw{fill:var(--p-blue-wash);stroke:var(--p-blue);stroke-width:1.5}
.kp .dv-beam{fill:var(--p-scan);opacity:.16}
.kp .dv-rline{fill:none;stroke:var(--p-scan);stroke-width:2.5;stroke-linecap:round}
.kp .dv-vfd{fill:var(--p-vfd)}
.kp .dv-vt{fill:var(--p-vfd-ink);font-family:var(--f-mono);font-size:15px;letter-spacing:.06em;white-space:pre}
.kp .dv-cam{fill:none;stroke:var(--p-on);stroke-width:3;stroke-linecap:round}

/* online store: boutique swatches, sizes, pickup / delivery, pickup ticket */
.kp-cloth{width:50px;height:50px;border-radius:10px;background:linear-gradient(135deg,var(--p-slot) 0 45%,color-mix(in srgb,var(--p-slot) 80%,var(--paper)) 45% 55%,var(--p-slot) 55%)}
.kp-cloth.c2{background:radial-gradient(circle at 30% 30%,var(--p-gold-hi) 0 8%,transparent 9%),radial-gradient(circle at 70% 65%,var(--p-gold-hi) 0 7%,transparent 8%),var(--p-dev)}
.kp-cloth.c3{background:repeating-linear-gradient(45deg,var(--p-rule-2) 0 6px,var(--p-line) 6px 12px)}
.kp-sizes{display:flex;gap:4px;margin-block:4px 2px;direction:ltr;justify-content:flex-start}
[dir="rtl"] .kp-sizes{justify-content:flex-end}
.kp-sizes i{font-style:normal;font-family:var(--f-mono);font-size:11px;min-width:24px;text-align:center;border:1px solid var(--p-rule-2);border-radius:4px;padding:0 3px}
.kp-sizes i.on{border-color:var(--sa);background:var(--sa);color:var(--p-on)}
.kp-ful{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:8px 16px 0;padding:3px;border-radius:10px;background:var(--paper-2);font-size:12.5px;text-align:center}
.kp-ful span{padding:5px;border-radius:8px;color:var(--paper-mute)}
.kp-ful .on{background:var(--paper);color:var(--paper-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.kp-pick-tk{position:absolute;inset-block-end:0;inset-inline-end:-6px;width:196px;background:var(--paper);color:var(--paper-ink);padding:11px 12px 10px;border-block-start:5px solid var(--p-blue);border-radius:0 0 4px 4px;transform:rotate(-3deg);font-size:12px;line-height:1.55;box-shadow:0 18px 26px -14px rgba(0,0,0,.5)}
.kp-pick-h{display:flex;justify-content:space-between;gap:6px;font-size:12.5px}
.kp-pick-h .mono{color:var(--paper-mute);font-size:11.5px}
.kp-pick-st{display:inline-block;margin-block:4px;padding:0 8px;border-radius:4px;background:var(--p-blue-wash);color:var(--p-blue);font-weight:600;font-size:11.5px}
.kp-pick-tk ul{list-style:none;margin:0;padding:0}
.kp-pick-tk li{display:flex;gap:6px}
.kp-pick-tk li .mono{color:var(--paper-mute)}
.kp-pick-tk p{margin:4px 0 0;color:var(--paper-mute);font-size:11.5px}
.kp-pick-tk .kp-bc{height:22px;margin-block-start:6px}

/* branches & warehouses: stock-transfer slip + stock per location */
.kp-slip{position:relative;background:var(--paper);color:var(--paper-ink);border-radius:6px;padding:18px 20px 20px;box-shadow:0 30px 50px -30px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.05);font-size:13px;overflow:hidden}
.kp-slip::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:6px;background:var(--p-blue)}
.kp-slip-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;border-block-end:1.5px dashed var(--p-rule);padding-block-end:10px}
.kp-slip-h b{display:block;font-size:16px}
.kp-slip-h small{color:var(--paper-mute);font-size:12px}
.kp-slip-h .mono{font-size:13px;color:var(--p-blue);font-weight:500}
.kp-slip-route{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:8px;align-items:center;padding-block:12px}
.kp-slip-route small{display:block;color:var(--paper-mute);font-size:11.5px}
.kp-slip-route b{font-size:14px;line-height:1.4}
.kp-slip-arrow{height:2px;background:var(--p-blue);position:relative}
.kp-slip-arrow::after{content:"";position:absolute;inset-inline-end:-1px;top:-4px;border-block:5px solid transparent;border-inline-start:8px solid var(--p-blue)}
.kp-slip-t{width:100%;border-collapse:collapse;font-size:12.5px}
.kp-slip-t th{font-weight:500;color:var(--paper-mute);text-align:start;padding:5px 0;border-block-end:1px solid var(--p-rule-2)}
.kp-slip-t th:last-child,.kp-slip-t td:last-child{text-align:end;width:56px}
.kp-slip-t td{padding:6px 0;border-block-end:1px solid var(--p-line)}
.kp-slip-t td small{display:block;color:var(--paper-mute);font-size:11px}
.kp-slip-t tfoot td{border:0;font-weight:700;padding-block-start:8px}
.kp-slip-st{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;font-size:11.5px}
.kp-slip-st li{position:relative;padding-block-start:12px;color:var(--paper-mute)}
.kp-slip-st li::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;border-radius:2px;background:var(--p-chip)}
.kp-slip-st li b{display:block;font-weight:600}
.kp-slip-st li.d{color:var(--paper-ink)}.kp-slip-st li.d::before{background:var(--p-ok)}
.kp-slip-st li.a{color:var(--paper-ink)}.kp-slip-st li.a::before{background:var(--p-blue)}
.kp-slip-stamp{position:absolute;inset-block-start:58px;inset-inline-end:18px;transform:rotate(-8deg);border:2px solid var(--p-blue);color:var(--p-blue);border-radius:6px;padding:1px 10px;font-weight:700;font-size:12.5px;opacity:.85;background:color-mix(in srgb,var(--paper) 70%,transparent)}
.kp-locs{margin-block-start:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px}
.kp-locs-h{margin:0 0 8px;font-size:13.5px;font-weight:600}
.kp-locs ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kp-locs li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 36px;gap:12px;align-items:center;font-size:13.5px}
.kp-locs li .mono{text-align:end;font-weight:500}
.kp-locs .kp-rep-bar i{background:var(--retail)}
.kp-locs li.is-low,.kp-locs li.is-low .mono{color:var(--bad)}
.kp-locs li.is-low .kp-rep-bar i{background:var(--bad)}
.kp-locs em{font-style:normal;font-size:11px;font-weight:600;margin-inline-start:8px;padding:0 6px;border-radius:4px;background:var(--bad-wash);color:var(--bad)}

/* currency next to a mono amount stays in the body face (Arabic letters never go through the mono font) */
.kp-cur{font-family:var(--f-body);font-size:.72em;font-weight:500;letter-spacing:0}
.rep-n .kp-cur{font-size:12px}
.kp-cart b .mono{font-weight:500}
.kp-items .kp-price{display:block;font-size:12.5px}
.kp-rc-tot>span:last-child,.rc-total>span:last-child{display:inline-flex;align-items:baseline;gap:4px}
/* the shop sits at the inline start, the pickup ticket beside it at the inline end (no overlap on wide screens) */
@media (min-width:1241px){
  .kp-shop-wrap{justify-content:flex-start;padding-block-end:0}
  .kp-shop{width:min(340px,100%)}
  .kp-shop-wrap .kp-pick-tk{width:190px;inset-inline-end:0;inset-block-end:24px}
}
@media (min-width:641px) and (max-width:1240px){
  .kp-shop-wrap{flex-direction:column;align-items:center;padding-block-end:0}
  .kp-shop-wrap .kp-pick-tk{position:relative;inset:auto;margin:14px auto 0;transform:rotate(-2deg)}
}

/* footer: sister products; logo tile */
.kp-foot-host{font-size:11.5px;opacity:.75;margin-inline-start:4px}
.kp .kp-logo{border-radius:7px}

@media (max-width:980px){
  .rail.rail-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kp-dv{grid-column:span 6}
}
@media (max-width:640px){
  .rail.rail-3{grid-template-columns:1fr}
  .kp-dv{grid-column:span 12}
  .kp-pick-tk{position:relative;inset:auto;margin:12px auto 0;transform:rotate(-2deg)}
  .kp-slip{padding:16px 16px 18px}
  .kp-slip-stamp{inset-block-start:auto;inset-block-end:62px}
}
@media (prefers-reduced-motion:reduce){
  .kp-beam{animation:none;transform:none;opacity:.8}
}

/* Filipino labels are the longest: collapse the header into the menu button a little earlier (same rules as <=1240px). */
@media (min-width:1241px) and (max-width:1360px){
  html[lang="fil"] .kp .lnav{display:none;position:absolute;inset-inline:0;top:76px;z-index:10;flex-direction:column;background:var(--date-2);border:1px solid rgba(201,164,92,.28);border-radius:10px;padding:8px;margin:0}
  html[lang="fil"] .kp .lnav.open{display:flex}
  html[lang="fil"] .kp .lnav a{padding:12px}
  html[lang="fil"] .kp .menu-btn{display:inline-flex}
  html[lang="fil"] .kp .lh-login{display:none}
  html[lang="fil"] .kp .lh-act{margin-inline-start:auto}
  html[lang="fil"] .kp .lnav .kp-nav-login{display:block;border-block-start:1px solid rgba(201,164,92,.22);margin-block-start:4px;color:var(--brass-hi)}
  html[lang="fil"] .kp .lh-act .kp-lang{display:none}
  html[lang="fil"] .kp .lnav .kp-lang-list{display:flex;flex-wrap:wrap;gap:6px;padding:10px 6px 4px;margin-block-start:4px;border-block-start:1px solid rgba(201,164,92,.22)}
  html[lang="fil"] .kp .lnav .kp-lang-list a{padding:6px 12px;border-radius:99px;border:1px solid rgba(201,164,92,.3);font-size:14px;line-height:1.5}
  html[lang="fil"] .kp .lnav .kp-lang-list a[aria-current="true"]{border-color:var(--brass-hi);color:var(--brass-hi);box-shadow:none;border-radius:99px}
}