/* kliniX order flow. Loaded AFTER the site's /assets/app.css and builds on it: fonts, tokens, header (.hdr,
   .brand, .nav, .lang, .pill-link), footer (.ftr, .soc, .lang--text), buttons (.btn, .btn--dark, .tlink), badges
   (.badge + .live), section type (.eyebrow, .h2, .lede), tiles (.tile, .tile__ic, .tile__glow), glass orbs (.glass,
   .pdeco), the app icon (.appicon) and the film band's glows (.film__glow) all come from app.css.
   This file only adds what the order flow needs, and re-tunes a few site pieces for it.

   Zoom: app.css zooms the body (.75 desktop ≥1024, .85 tablet 768–1023; phones 1). Every length inside the body is
   multiplied by that on screen (px, vw, vh alike), so this file (1) keeps sizes in px, (2) scales the order UI's own
   type/controls by --s so forms stay readable under the zoom, and (3) divides on-screen measurements from JS
   (--hdrh, --barh) by --z before using them inside the body. order.js sets --z from the real computed zoom.
   CSP: style-src 'self' — no inline styles; JS only touches CSSOM custom properties + classes. */

:root{
  --line2:#d2d2d7; --edge:#86868b; --lime-t:#ecf7cb;
  --hdrh:86px; --barh:0px; --z:1; --s:1;
  --ring:2px;                                                         /* focus ring: 3px under the zoom = 2+ px on screen */
  --grad:linear-gradient(90deg,#45b8f0 0%,#a6dc34 58%,#c9f53f 100%);  /* the site's flow line (blue → lime) */
}
@media (min-width:768px) and (max-width:1023.98px){:root{--z:.85;--s:1.08;--ring:3px}}
@media (min-width:1024px){:root{--z:.75;--s:1.16;--ring:3px}}

/* ---------- base additions ---------- */
[hidden]{display:none!important}
html{scroll-padding-top:calc(var(--hdrh) + 16px);scroll-padding-bottom:calc(var(--barh) + 16px)}
body.kxo{min-height:calc(100vh / var(--z));min-height:calc(100dvh / var(--z));display:flex;flex-direction:column;overflow-wrap:break-word}
.kxo main{flex:1 0 auto;padding-bottom:112px;overflow-x:hidden;overflow-x:clip} /* glows + orbs never cause sideways scroll; clip keeps sticky working */
dl,dd,fieldset{margin:0}
button{margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{flex:none}
.nojs{margin:48px 0;padding:20px 24px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.kxo :focus-visible{outline-width:var(--ring)}  /* the site's 2px ring would render ~1.5px under its own zoom */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:var(--ring) solid var(--link);outline-offset:6px}

/* the site's live dot + badge shimmer, but they settle: 2 pings, 1 shimmer (WCAG 2.2.2 — nothing loops forever here) */
.kxo .live::before{animation-iteration-count:2}
.kxo .badge::after{animation-iteration-count:1}

/* ---------- header: the site's, plus the "Order" context ---------- */
.kxo .hdr{height:auto}
.hdr__id{justify-self:start;display:flex;align-items:center;gap:12px;min-width:0}
.hdr__sep{flex:none;width:1px;height:18px;background:var(--line2)}
.hdr__ctx{min-width:0;font-size:13px;font-weight:500;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:859px){.kxo .hdr__row{grid-template-columns:minmax(0,1fr) auto}}
@media (max-width:599px){.hdr__sep,.hdr__ctx{display:none}}   /* phone header = the site's: brand, BM|EN, Apply */
@media (max-width:359px){.hdr__id{gap:8px}.brand{gap:7px}.brand__name{font-size:17px}.hdr__ctx{font-size:12px}}

/* language switch: the site's pill (header) and text (footer) look, as in-page toggle buttons */
.lang__b{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;margin:-7px 0;border-radius:980px;color:inherit}
.lang__b span{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:980px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:#4d4d50;transition:background-color .25s,color .25s,box-shadow .25s,transform .25s var(--ease)}
.lang__b[aria-pressed="true"] span{background:#fff;box-shadow:inset 0 0 0 1px rgba(29,29,31,.12),0 1px 3px rgba(29,29,31,.14);color:var(--ink)}
.lang__b[aria-pressed="false"]:hover span{color:var(--ink);background:rgba(255,255,255,.7);transform:translateY(-1px)}
.lang__b:focus-visible{outline:none}
.lang__b:focus-visible span{outline:var(--ring) solid var(--link);outline-offset:2px}
.lang--text .lang__b{margin:0;height:44px}
.lang--text .lang__b span{position:relative;z-index:0;height:auto;padding:0;background:none!important;box-shadow:none!important;font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;color:var(--ink2)}
.lang--text .lang__b[aria-pressed="true"] span{font-weight:600;color:var(--ink)}
.lang--text .lang__b span::after{content:"";position:absolute;z-index:-1;left:-3px;right:-3px;top:50%;height:9px;border-radius:3px;background:var(--lime);transform:scaleX(0);transform-origin:left center;transition:transform .35s var(--ease)}
.lang--text .lang__b[aria-pressed="false"]:hover span{transform:none}
.lang--text .lang__b[aria-pressed="false"]:hover span::after{transform:none}


/* ---------- buttons + links (the site's, sized for a form) ---------- */
.kxo main .btn{height:auto;min-height:calc(52px * var(--s));padding:10px calc(28px * var(--s));gap:8px;font-size:calc(17px * var(--s));line-height:1.15;white-space:normal;text-align:center}
.kxo main .btn svg{margin:0 -4px}
.kxo main .step--plan .btn,.kxo main .step--ready .btn{min-height:52px;padding:10px 28px;font-size:17px}
.btn--ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn--ghost:hover{color:var(--ink);background:var(--bg2);box-shadow:inset 0 0 0 1px var(--edge)}
.btn--light{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.18),0 18px 44px -18px rgba(201,245,63,.45)}
.btn--light:hover{color:var(--ink);background:#fff;transform:translateY(-2px);box-shadow:0 0 0 4px rgba(201,245,63,.5),0 18px 40px -14px rgba(201,245,63,.55),0 0 44px 6px rgba(69,184,240,.22)}
.btn--light:focus-visible{outline:var(--ring) solid #fff;outline-offset:3px;box-shadow:0 0 0 4px rgba(201,245,63,.5)}
.btn__ic{display:flex;align-items:center;justify-content:center;flex:none;width:calc(30px * var(--s));height:calc(30px * var(--s));margin-right:calc(-14px * var(--s));border-radius:50%;background:var(--lime);color:var(--ink);transition:transform .45s var(--spring)}
.kxo main .btn__ic svg{margin:0 0 0 1px}
.btn--light:hover .btn__ic{transform:translateX(3px) scale(1.06)}
.linkbtn{display:inline-flex;align-items:center;min-height:calc(26px / var(--z));padding:2px 0;color:var(--link);font-size:calc(15px * var(--s));text-align:left;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;border-radius:4px}
.linkbtn:hover{color:var(--link-h)}
.tag{display:inline-flex;align-items:center;height:calc(22px * var(--s));padding:0 9px;border-radius:980px;background:var(--lime-t);font-family:var(--mono);font-size:calc(11px * var(--s));font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.tag--warn{background:#fff4d6;color:#5c3d00}
.ocard{position:relative;border-radius:28px;background:#fff;border:1px solid rgba(29,29,31,.08);box-shadow:0 30px 60px -30px rgba(29,29,31,.3)}

/* ---------- step indicator (the site's flow: numbered discs, blue → lime line) ---------- */
.steps{margin-top:40px}
.steps__list{display:flex;align-items:center}
.steps__item{display:flex;align-items:center;flex:1 1 0;min-width:0}
.steps__item:last-child{flex:0 0 auto}
.steps__item:not(:last-child)::after{content:"";flex:1;height:2px;min-width:12px;margin:0 14px;border-radius:2px;background:var(--line)}
.steps__item.is-done:not(:last-child)::after{background:var(--grad)}
.steps__el{display:inline-flex;align-items:center;gap:10px;min-height:calc(30px / var(--z));padding:2px 6px 2px 2px;border-radius:980px;font-size:calc(14px * var(--s));font-weight:500;color:var(--mute2);white-space:nowrap}
.steps__num{display:inline-flex;align-items:center;justify-content:center;flex:none;width:calc(30px * var(--s));height:calc(30px * var(--s));border-radius:50%;background:#fff;border:1px solid rgba(29,29,31,.14);box-shadow:0 6px 14px -8px rgba(29,29,31,.3);font-family:var(--mono);font-size:calc(12px * var(--s));font-weight:600;color:var(--mute2);transition:background-color .3s,box-shadow .3s,color .3s,border-color .3s}
.steps__num svg{width:calc(16px * var(--s));height:calc(16px * var(--s))}
.is-cur .steps__el{color:var(--ink);font-weight:600}
.is-cur .steps__num{background:var(--ink);border-color:var(--ink);color:var(--lime);box-shadow:0 0 0 5px rgba(201,245,63,.3),0 8px 18px -8px rgba(29,29,31,.55)}
.is-done .steps__el{color:var(--ink2)}
.is-done .steps__num{background:linear-gradient(150deg,#f3fccf 0%,#fbfdf2 48%,#e4f4fd 100%);border-color:rgba(150,196,30,.6);color:var(--ink)}
button.steps__el:hover .steps__t{text-decoration:underline;text-underline-offset:4px}
button.steps__el:hover .steps__num{box-shadow:0 0 0 4px rgba(201,245,63,.4)}
.steps__cap{display:none}

/* ---------- layout ---------- */
.layout{margin-top:48px}
.layout.has-cart{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:start}
.step{position:relative}
.step:not([hidden]){animation:kx-o-in .5s var(--ease) backwards}
.step__head{max-width:680px}
.step__h{font-size:32px;line-height:1.08;font-weight:600;letter-spacing:-.032em;text-wrap:balance}
.step__lede{max-width:100%;margin-top:14px;font-size:19px;line-height:1.4;letter-spacing:-.01em;color:var(--mute);overflow-wrap:anywhere;text-wrap:pretty}
.step--center{text-align:center}

/* ---------- decoration: the site's glows + glass orbs (step 1 + the ready step). Decorative, aria-hidden. They float
   in once and then rest; with a mouse they drift a little with the pointer (order.js sets --px/--py). ---------- */
.odeco{position:absolute;z-index:-1;left:-12%;right:-12%;top:-96px;bottom:-60px;pointer-events:none}
.odeco>*{translate:calc(var(--px,0) * var(--d,12px)) calc(var(--py,0) * var(--d,12px));transition:translate 1s var(--ease)}
.odeco .pdeco,.odeco .glass{animation:kx-o-orb 1.4s var(--ease) both}
.odeco .pdeco--lime{--d:14px;left:calc(50% - 860px);top:120px;width:780px;background:radial-gradient(closest-side,rgba(201,245,63,.44),rgba(201,245,63,.14) 55%,rgba(201,245,63,0))}
.odeco .pdeco--blue{--d:18px;left:calc(50% + 60px);top:420px;width:820px;background:radial-gradient(closest-side,rgba(69,184,240,.34),rgba(69,184,240,.1) 55%,rgba(69,184,240,0));animation-delay:.12s}
.odeco .glass--p1{--d:26px;left:calc(50% - 772px);top:470px;bottom:auto;width:104px;animation-delay:.2s}
.odeco .glass--p2{--d:34px;left:calc(50% + 560px);top:150px;width:76px;animation-delay:.3s}
.odeco .glass--p3{--d:42px;left:calc(50% + 652px);top:auto;bottom:26%;width:26px;animation-delay:.4s}
.odeco .glass--p4{--d:22px;left:calc(50% - 600px);top:236px;width:20px;animation-delay:.5s}
@media (min-width:768px){.odeco .glass{display:block}} /* app.css hides the pilot orbs below 1100; the order page keeps them */
@keyframes kx-o-orb{from{opacity:0;scale:.7}to{opacity:1;scale:1}}

/* ---------- 1. plan: opens like a site section ---------- */
.step--plan{padding-top:12px}
.step__head--plan{position:relative;max-width:860px;margin-inline:auto}
.plans{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1200px;margin:64px auto 0}
/* each card spans 9 rows of the list's grid (subgrid), so name, price, badge, features and button line up across cards in
   both languages; without subgrid support the cards simply stack their rows */
.plan.tile{display:grid;grid-row:span 9;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:0;gap:0 0;padding:40px;border-radius:32px;background:#fff;text-align:left;box-shadow:0 0 0 1px rgba(29,29,31,.07),0 1px 2px rgba(29,29,31,.04),0 40px 80px -48px rgba(29,29,31,.38)}
.plan::before{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,245,63,.2),rgba(69,184,240,.08) 45%,rgba(69,184,240,0) 70%);opacity:0;transition:opacity .45s var(--ease)}
.plan.tile:hover,.plan.tile.is-pt{box-shadow:0 0 0 1px rgba(201,245,63,.75),0 26px 70px -26px rgba(201,245,63,.65),0 40px 80px -44px rgba(29,29,31,.38)}
.plan.tile.is-pt{transform:perspective(1100px) translateY(-6px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.plan.is-pt::before{opacity:1}
.plan.tile.is-sel{box-shadow:0 0 0 2px var(--ink),0 0 0 7px rgba(201,245,63,.55),0 40px 80px -44px rgba(29,29,31,.45)}
.plan__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plan .plan__ic{width:76px;height:76px;border-radius:23px}
.plan .plan__ic svg{width:46px;height:46px}
.plan .plan__name{margin-top:26px;font-size:calc(34px * var(--s));line-height:1.05;font-weight:600;letter-spacing:-.03em}
.plan .plan__tag{margin-top:8px;font-size:calc(17px * var(--s));line-height:1.45;color:var(--mute)}
.plan__price{margin-top:26px}
.money{white-space:nowrap}
.price .money__v{font-size:calc(60px * var(--s));line-height:1;font-weight:600;letter-spacing:-.045em}
.price .money__per{margin-left:4px;font-size:calc(19px * var(--s));letter-spacing:-.01em;color:var(--mute)}
.plan .plan__lim{justify-self:start;align-self:start;display:inline-flex;align-items:center;min-height:calc(26px * var(--s));margin-top:22px;padding:3px 12px;border-radius:980px;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(29,29,31,.06);font-family:var(--mono);font-size:calc(11.5px * var(--s));line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.plan .plan__feath{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:calc(12px * var(--s));line-height:16px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.plan__feat{align-content:start;margin-top:16px}
.plan__btn{align-self:end;width:100%;margin-top:34px}
.plan__sel{margin-top:4px}

/* Premium: the site's dark tile (like the Patient & EMR bento tile) with its lime/blue glows */
/* its drop shadow stays short: a long dark shadow greyed the note + pilot link under the cards below 4.5:1 */
.plan--dark.tile{background:linear-gradient(160deg,#222624 0%,#0d0f0e 55%,#060707 100%);color:#f5f5f7;box-shadow:0 0 0 1px rgba(255,255,255,.05),0 30px 56px -36px rgba(11,13,12,.6)}
.plan--dark.tile:hover,.plan--dark.tile.is-pt{box-shadow:0 0 0 1px rgba(201,245,63,.5),0 22px 60px -30px rgba(201,245,63,.4),0 30px 56px -36px rgba(11,13,12,.6)}
.plan--dark::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(201,245,63,.16),rgba(69,184,240,.08) 45%,rgba(69,184,240,0) 70%)}
.plan--dark .tile__glow{animation:none;transition:opacity .6s var(--ease);opacity:.85}
.plan--dark:hover .tile__glow{opacity:1}
.plan--dark .tile__ic{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 18px 34px -20px rgba(0,0,0,.8);color:#f5f5f7}
.plans .plan--dark .tile__ic::before{background:radial-gradient(circle at 30% 20%,rgba(201,245,63,.26),rgba(201,245,63,.05) 70%)}
.plan--dark .plan__name{color:#fff}
.plan--dark .plan__tag,.plan--dark .money__per,.plan--dark .plan__feath{color:#a1a1a6}
.plan--dark .plan__lim{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#e8e8ed}
.plan--dark .plan__feath{border-top-color:rgba(255,255,255,.12)}
.plan--dark .tag{background:var(--lime);color:var(--ink)}
.plan--dark.tile.is-sel{box-shadow:0 0 0 2px var(--lime),0 0 0 7px rgba(201,245,63,.3),0 30px 56px -36px rgba(11,13,12,.6)}

.plans__note{position:relative;margin-top:72px;font-size:calc(15px * var(--s));line-height:1.45;color:var(--mute2);text-align:center}
.plans__note-p{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 14px;margin-top:4px}
.plans__note .tlink{font-size:calc(16px * var(--s))}

/* ---------- feature rows (plan cards + configure) ---------- */
.feats{display:grid;gap:12px}
.feat{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:12px;font-size:calc(16px * var(--s));line-height:1.4;color:var(--ink2)}
.feat__ic{display:flex;align-items:center;justify-content:center;width:calc(22px * var(--s));height:calc(22px * var(--s));margin-top:calc(.7em - 11px * var(--s));border-radius:50%;background:var(--lime-t);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(80,110,0,.2)}
.feat__ic svg{width:calc(14px * var(--s));height:calc(14px * var(--s))}
.feat.is-up{color:var(--mute)}
.feat.is-up .feat__ic{background:transparent;box-shadow:none;border:1.5px dashed #b0b0b5;color:#86868b}
.feat.is-soon{color:var(--mute)}
.feat.is-soon .feat__ic{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2)}
.ptag{align-self:center;display:inline-flex;align-items:center;height:calc(21px * var(--s));padding:0 8px;border-radius:980px;background:var(--lime-t);box-shadow:inset 0 0 0 1px rgba(80,110,0,.25);font-family:var(--mono);font-size:calc(10.5px * var(--s));font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ptag--soon{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2)}
.plan--dark .feat{color:#c7c7cc}
.plan--dark .feat__ic{background:rgba(201,245,63,.14);box-shadow:inset 0 0 0 1px rgba(201,245,63,.35);color:var(--lime)}
.plan--dark .feat.is-plus{color:#fff;font-weight:500}
.plan--dark .feat.is-plus .feat__ic{background:var(--lime);box-shadow:0 0 12px -2px rgba(201,245,63,.7);color:var(--ink)}
.plan--dark .feat.is-soon{color:#a1a1a6}
.plan--dark .feat.is-soon .feat__ic{background:rgba(255,255,255,.1);box-shadow:none;color:#d2d2d7}
.plan--dark .ptag--soon{background:rgba(255,255,255,.1);box-shadow:none;color:#e8e8ed}

/* ---------- forms (inside a card like the site's signup card) ---------- */
.form{position:relative;margin-top:36px;max-width:720px}
.form.ocard{padding:34px 40px 36px}
.form__req{margin:0 0 24px;font-size:calc(14px * var(--s));line-height:1.45;color:var(--mute2)}
/* the business step: "All fields are required…" and the "Fill in sample details" helper share one line when they fit */
.form__top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 20px;margin:0 0 24px}
.form__top .form__req{margin:0}
.form__top .linkbtn{font-size:calc(14px * var(--s))}
.chosen{display:flex;align-items:center;gap:14px;margin-bottom:30px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.chosen__ic{flex:none;display:flex;align-items:center;justify-content:center;width:calc(48px * var(--s));height:calc(48px * var(--s));border-radius:15px}
.chosen__ic svg{width:60%;height:60%}
.chosen__ic--light{background:linear-gradient(160deg,#fff 0%,#eeeff2 100%);box-shadow:inset 0 0 0 1px rgba(29,29,31,.08),0 10px 18px -12px rgba(29,29,31,.3)}
.chosen__ic--dark{background:linear-gradient(155deg,#272b29 0%,#0d0f0e 55%,#050606 100%);box-shadow:0 12px 22px -12px rgba(11,13,12,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.chosen__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.chosen__t{font-size:calc(17px * var(--s));font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.chosen__chg{flex:none}
.field{margin-bottom:30px}
.field__l{display:block;font-size:calc(15px * var(--s));line-height:1.35;font-weight:600;color:var(--ink)}
.field__hint{margin-top:4px;font-size:calc(14px * var(--s));line-height:1.45;color:var(--mute2)}
.input,.affix{margin-top:10px}
.input{display:block;width:100%;height:calc(52px * var(--s));padding:0 16px;border-radius:14px;border:1px solid var(--edge);background:#fff;font-size:calc(17px * var(--s));color:var(--ink);transition:border-color .2s,box-shadow .25s}
.input--short{max-width:340px}
.input:hover{border-color:#515154;box-shadow:0 6px 20px -12px rgba(29,29,31,.35)}
.input:focus-visible{outline:var(--ring) solid var(--link);outline-offset:2px;border-color:var(--link);box-shadow:none}
.input[aria-invalid="true"],.affix.is-bad,.qty__in[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px rgba(215,0,21,.1)}
.field__err{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:calc(14px * var(--s));line-height:1.45;font-weight:500;color:var(--err)}
.field__err svg{margin-top:2px}

.affix{display:flex;align-items:stretch;height:calc(52px * var(--s));border-radius:14px;border:1px solid var(--edge);background:#fff;overflow:hidden;transition:border-color .2s,box-shadow .25s}
.affix:hover{border-color:#515154;box-shadow:0 6px 20px -12px rgba(29,29,31,.35)}
.affix:focus-within{outline:var(--ring) solid var(--link);outline-offset:2px;border-color:var(--link);box-shadow:none}
.affix__in{flex:1;min-width:0;height:100%;padding:0 4px 0 16px;border:0;background:transparent;font-size:calc(17px * var(--s));color:var(--ink)}
.affix__in:focus-visible{outline:none}
.affix__sfx{display:flex;align-items:center;padding:0 16px 0 12px;background:var(--bg2);border-left:1px solid var(--line);font-family:var(--mono);font-size:calc(15px * var(--s));font-weight:500;color:var(--ink2);white-space:nowrap}

.avail{display:flex;align-items:flex-start;gap:8px;min-height:22px;margin-top:10px;font-size:calc(14px * var(--s));line-height:1.45;color:var(--ink2)}
.avail__ic{position:relative;flex:none;display:none;width:20px;height:20px;border-radius:50%}
.avail__ic svg{display:none;position:absolute;inset:2px}
.avail__pending{display:none;color:var(--mute2)}
.avail__msg{min-width:0;overflow-wrap:anywhere}
.avail__msg:empty{display:none}
.avail[data-state="pending"] .avail__ic,.avail[data-state="ok"] .avail__ic,.avail[data-state="bad"] .avail__ic{display:block}
.avail[data-state="pending"] .avail__pending{display:inline}
.avail[data-state="pending"] .avail__msg{display:none}
.avail__spin{display:none;position:absolute;inset:2px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--ink);animation:kx-spin .8s linear infinite}
.avail[data-state="pending"] .avail__spin{display:block}
.avail[data-state="ok"] .avail__ic{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(80,110,0,.35)}
.avail[data-state="ok"] .avail__ok{display:block;color:var(--ink)}
.avail[data-state="ok"] .avail__msg{color:var(--ink);font-weight:500}
.avail[data-state="bad"] .avail__bad{display:block;inset:0;color:var(--err)}
.avail[data-state="bad"] .avail__msg{color:var(--err);font-weight:500}

.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:0 64px}
.qty{display:inline-flex;align-items:center;gap:8px;margin-top:10px}
.qty__b{display:inline-flex;align-items:center;justify-content:center;width:calc(44px * var(--s));height:calc(44px * var(--s));border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--edge);color:var(--ink);transition:background-color .2s,box-shadow .2s,transform .35s var(--spring)}
.qty__b:hover{background:var(--lime-t);box-shadow:inset 0 0 0 1px rgba(80,110,0,.45)}
.qty__b:active{transform:scale(.94)}
.qty__b:focus-visible{outline:var(--ring) solid var(--link);outline-offset:2px;border-radius:50%}
.qty__b[aria-disabled="true"]{cursor:not-allowed;color:#8e8e93;box-shadow:inset 0 0 0 1px var(--line2);background:var(--bg2);transform:none}
.qty__in{width:calc(72px * var(--s));height:calc(52px * var(--s));border-radius:14px;border:1px solid var(--edge);background:#fff;text-align:center;font-size:calc(19px * var(--s));font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.qty__in:focus-visible{outline:var(--ring) solid var(--link);outline-offset:2px;border-color:var(--link)}
.qty__in[readonly]{background:var(--bg2);border-color:var(--line2);color:var(--ink2)}
/* a single-branch plan: a static chip (the plan cards' .plan__lim look) instead of a stepper locked at 1 */
.qfix{display:inline-flex;align-items:center;min-height:calc(34px * var(--s));margin-top:10px;padding:4px 16px;border-radius:980px;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(29,29,31,.08);font-family:var(--mono);font-size:calc(12px * var(--s));line-height:1.3;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.upsell{margin-top:8px}

.incl{margin:4px 0 8px;padding-top:26px;border-top:1px solid var(--line)}
.incl__h{font-size:calc(15px * var(--s));line-height:1.35;font-weight:600;color:var(--ink)}
.incl .feats{margin-top:14px;gap:11px 28px}
.incl .feat{display:block;position:relative;padding-left:calc(22px * var(--s) + 12px);font-size:calc(15px * var(--s))}
.incl .feat__ic{position:absolute;left:0;top:calc(.7em - 11px * var(--s));margin:0}
.incl .ptag{display:inline-flex;vertical-align:1px;margin-left:8px}
.incl__up{margin-top:14px}
.incl .feat.is-soon{grid-column:1/-1}
.form::before{content:"";position:absolute;z-index:-1;left:-22%;bottom:0;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(69,184,240,.2),rgba(69,184,240,0));pointer-events:none}

.notice{display:flex;gap:12px;align-items:flex-start;margin-top:4px;padding:16px 18px;border-radius:16px;background:var(--bg2);font-size:calc(14px * var(--s));line-height:1.45;color:var(--ink2)}
.notice .ic{margin-top:1px;color:var(--mute)}

.navrow{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.navrow__next{margin-left:auto}
.pilotline{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-size:calc(16px * var(--s));color:var(--ink2)}
.pilotline .tlink{font-size:calc(16px * var(--s))}

/* ---------- 4. payment ---------- */
.review{display:grid;gap:14px;margin-bottom:16px}
.review__sec.ocard{padding:22px 26px 20px;box-shadow:0 24px 48px -32px rgba(29,29,31,.3)}
.review__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}
.review__h{font-size:calc(16px * var(--s));line-height:1.3;font-weight:600}
.review .kv{padding:12px 0 14px}
.paybox.ocard{display:flex;gap:18px;align-items:flex-start;padding:24px 26px}
.paybox__ic{flex:none;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:16px;background:linear-gradient(160deg,#fff 0%,#eeeff2 100%);box-shadow:inset 0 0 0 1px rgba(29,29,31,.08);color:var(--ink2)}
.paybox__t{font-size:calc(18px * var(--s));line-height:1.3;font-weight:600;letter-spacing:-.015em}
.paybox__b{margin-top:6px;font-size:calc(15px * var(--s));line-height:1.5;color:var(--mute)}
@media (min-width:1024px){.review__sec--order{display:none}}

/* ---------- order summary: one shape for sidebar, phone sheet, payment review, final recap ---------- */
.oline{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;padding-top:16px;font-size:calc(15px * var(--s));font-weight:600;color:var(--ink)}
.oline__name{display:inline-flex;align-items:center;gap:10px;min-width:0}
.oline__ic{flex:none;display:flex;align-items:center;justify-content:center;width:calc(24px * var(--s));height:calc(24px * var(--s));border-radius:calc(7px * var(--s))}
.oline__ic svg{width:64%;height:64%}
.oline__v{font-variant-numeric:tabular-nums}
.oline__v .money__per{font-weight:500;color:var(--mute2)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;padding:14px 0 16px;font-size:calc(14px * var(--s));line-height:1.4}
.kv dt{color:var(--mute2)}
.kv dd{text-align:right;color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.kv dd.is-empty{color:var(--mute);font-weight:400}
.kv dd.host{grid-column:1/-1;margin-top:-4px;text-align:left;font-family:var(--mono);font-size:calc(13px * var(--s));font-weight:500}
.kv dd.host.is-empty{font-family:var(--sans);font-size:calc(14px * var(--s))}
/* an address: moves to a new line as a whole; inside it the only break point is before ".klinix.my" */
.lh{display:inline-block;max-width:100%;vertical-align:bottom}
.ototal{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:16px;border-top:1px solid var(--line);font-size:calc(15px * var(--s));font-weight:600}
.ototal__v .money__v{font-size:calc(30px * var(--s));letter-spacing:-.03em}
.ototal__v .money__per{margin-left:2px;font-size:calc(15px * var(--s));font-weight:500;color:var(--mute2)}
.onote2{margin-top:4px;padding-left:18px;font-size:calc(13px * var(--s));line-height:1.45;color:var(--mute2)}

.cart{position:sticky;top:calc(var(--hdrh) / var(--z) + 24px);border-radius:28px;background:#fff;border:1px solid rgba(29,29,31,.08);box-shadow:0 30px 60px -30px rgba(29,29,31,.3)}
.cart::before{content:"";position:absolute;z-index:-1;left:-12%;right:-12%;top:-18%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,245,63,.22),rgba(201,245,63,0));pointer-events:none}
.cart__toggle{display:none}
.scrim{display:none}
.cart__body{padding:26px 26px 22px}
.cart__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cart__h{font-size:calc(19px * var(--s));font-weight:600;letter-spacing:-.015em}

/* ---------- 5. setup: a dark product panel, like the site's film band ---------- */
.dep{position:relative;isolation:isolate;overflow:hidden;overflow:clip;max-width:1200px;margin-inline:auto;padding:48px;border-radius:36px;background:linear-gradient(180deg,#000 0%,#0b0d0c 100%);color:#f5f5f7;box-shadow:0 60px 120px -40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}
.dep::before{content:"";position:absolute;z-index:-1;left:50%;top:-300px;width:900px;height:560px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgba(201,245,63,.13),rgba(201,245,63,0));pointer-events:none}
.dep__fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.dep .film__glow{animation:none;opacity:.7}
.dep.is-run .film__glow,.dep.is-pay .film__glow{animation:kx-glow 5s ease-in-out infinite}
.dep .film__glow--lime{left:-12%;top:-34%;width:62%}
.dep .film__glow--blue{right:-14%;bottom:-44%;width:66%}
.dep__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px;align-items:stretch}
.dep__main{min-width:0}
.dep__head{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:30px;align-items:center}
.dep__art{position:relative;width:96px;height:96px;margin:6px}
.dep__icon.appicon{position:relative;z-index:2;border-radius:27px;box-shadow:0 26px 40px -22px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.16)}
.dep__icon svg{width:62%;height:62%}
.dep__halo{position:absolute;z-index:0;inset:-30px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,245,63,.42),rgba(201,245,63,.1) 60%,rgba(201,245,63,0))}
.dep.is-run .dep__halo,.dep.is-pay .dep__halo{animation:kx-o-breathe 2.4s ease-in-out infinite}
.dep__ring{position:absolute;z-index:1;left:-18px;top:-18px;width:calc(100% + 36px);height:calc(100% + 36px);overflow:visible}
.dep__ring-t{stroke:rgba(255,255,255,.2)}
.dep__ring-a{stroke:#45b8f0;stroke-dasharray:.22 .78;transform-box:fill-box;transform-origin:center;transition:stroke-dasharray .7s var(--ease),stroke .4s}
.dep.is-run .dep__ring-a,.dep.is-pay .dep__ring-a{animation:kx-spin 1.6s linear infinite}
.dep.is-ack .dep__ring-a{stroke:#ffc400;stroke-dasharray:.25 .75}   /* waiting for approval: a still, amber quarter ring (nothing loops while it waits) */
.dep.is-done .dep__ring-a{stroke:var(--lime);stroke-dasharray:1 0}
.dep__ring{transition:opacity .35s var(--ease)}
.dep.is-done .dep__ring{opacity:0}
.dep__ripple{position:absolute;z-index:1;inset:0;border-radius:27px;border:1.5px solid rgba(201,245,63,.9);box-shadow:0 0 26px rgba(201,245,63,.45),inset 0 0 26px rgba(201,245,63,.25);opacity:0}
.dep__burst{position:absolute;z-index:3;left:50%;top:50%;width:0;height:0}
.dep__burst i{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px rgba(201,245,63,.8);opacity:0;--d:84px}
.dep__burst i:nth-child(3n+2){left:-3px;top:-3px;width:6px;height:6px;background:#45b8f0;box-shadow:0 0 10px rgba(69,184,240,.8);--d:70px}
.dep__burst i:nth-child(3n){left:-2.5px;top:-2.5px;width:5px;height:5px;background:#f2f8de;box-shadow:none;--d:96px}
.dep__burst i:nth-child(1){--a:0deg}.dep__burst i:nth-child(2){--a:30deg}.dep__burst i:nth-child(3){--a:60deg}.dep__burst i:nth-child(4){--a:90deg}
.dep__burst i:nth-child(5){--a:120deg}.dep__burst i:nth-child(6){--a:150deg}.dep__burst i:nth-child(7){--a:180deg}.dep__burst i:nth-child(8){--a:210deg}
.dep__burst i:nth-child(9){--a:240deg}.dep__burst i:nth-child(10){--a:270deg}.dep__burst i:nth-child(11){--a:300deg}.dep__burst i:nth-child(12){--a:330deg}
.dep__badge{position:absolute;z-index:4;right:-9px;bottom:-9px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 0 0 4px #070808,0 8px 18px -6px rgba(160,205,20,.8);transform:scale(0);transition:transform .55s var(--spring) .15s}
.dep.is-done .dep__badge{transform:scale(1)}
.dep.is-done .dep__ripple{animation:kx-o-ripple 1.1s cubic-bezier(.2,.6,.3,1) both}
.dep.is-done .dep__burst i{animation:kx-o-burst 1s cubic-bezier(.15,.7,.3,1) both}
.dep.is-done .dep__icon{animation:kx-o-pop .7s var(--spring) both}
.dep__titles{min-width:0}
.badge--dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);box-shadow:none;color:#f5f5f7}
.badge--dark::after{background:linear-gradient(105deg,transparent 30%,rgba(201,245,63,.22) 44%,rgba(255,255,255,.18) 50%,rgba(69,184,240,.18) 56%,transparent 70%)}
.dep__h{margin-top:0;font-size:calc(34px * var(--s));line-height:1.08;font-weight:600;letter-spacing:-.032em;color:#fff;text-wrap:balance}
.dep__lede{margin-top:10px;font-size:calc(17px * var(--s));line-height:1.45;color:#a1a1a6}
.dep__prog{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:26px;font-size:calc(14px * var(--s));font-weight:600;color:#f5f5f7}
.dep__pct{font-family:var(--mono);font-size:calc(13px * var(--s));color:var(--lime);font-variant-numeric:tabular-nums}
.bar{position:relative;height:8px;margin-top:12px;border-radius:980px;background:rgba(255,255,255,.1);overflow:hidden}
.bar__fill{position:absolute;inset:0;border-radius:inherit;background:var(--grad);transform-origin:left center;transform:scaleX(var(--p,0));transition:transform var(--dur,600ms) linear}
.bar__fill::after{content:"";position:absolute;right:0;top:0;bottom:0;width:40px;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75))}
.dsteps{display:grid;gap:8px;margin-top:22px}
.dstep{display:flex;align-items:center;gap:14px;min-height:40px;font-size:calc(16px * var(--s));color:#a1a1a6;transition:color .3s}
.dstep__ic{position:relative;flex:none;width:calc(26px * var(--s));height:calc(26px * var(--s));border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.24)}
.dstep__ic svg{position:absolute;inset:0;margin:auto;width:calc(15px * var(--s));height:calc(15px * var(--s));opacity:0;transform:scale(.4);transition:opacity .25s,transform .45s var(--spring)}
.dstep__body{flex:1;min-width:0;display:flex;flex-direction:column}
.dstep__t{min-width:0;overflow-wrap:anywhere}
.dstep__sub{margin-top:1px;font-size:calc(13.5px * var(--s));font-weight:400;line-height:1.4;color:#a1a1a6;overflow-wrap:anywhere}
.dstep.is-run .dstep__sub,.dstep.is-wait .dstep__sub{color:#d2d2d7}
.dstep__time{flex:none;font-family:var(--mono);font-size:calc(12px * var(--s));color:#98989d;font-variant-numeric:tabular-nums}
.dstep.is-run{color:#fff;font-weight:600}
.dstep.is-run .dstep__ic{box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.dstep.is-run .dstep__ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--lime);border-right-color:var(--lime);animation:kx-spin .8s linear infinite}
.dstep.is-done{color:#f5f5f7}
.dstep.is-done .dstep__ic{background:var(--lime);box-shadow:0 0 14px -2px rgba(201,245,63,.6);color:var(--ink)}
.dstep.is-done .dstep__ic svg:not(.dstep__wait){opacity:1;transform:scale(1)}
.dstep.is-wait{color:#fff;font-weight:600}
.dstep.is-wait .dstep__ic{background:rgba(255,196,0,.14);box-shadow:inset 0 0 0 1.5px rgba(255,196,0,.6);color:#ffd666}
.dstep.is-wait .dstep__wait{opacity:1;transform:none}
.dep__done{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 18px;margin-top:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);animation:kx-o-in .45s var(--ease) both}
.dep__fin{display:flex;align-items:center;gap:10px;font-size:calc(15px * var(--s));font-weight:600;color:#fff}
.dep__finic{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--lime);color:var(--ink)}
.dep__side{display:flex;flex-direction:column;min-width:0}
.log{flex:1 1 0;min-height:340px;overflow:auto;overscroll-behavior:contain;border-radius:22px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);color:#e8e8ed;font-family:var(--mono);font-size:calc(12.5px * var(--s));line-height:1.75}
.log:focus-visible{outline:var(--ring) solid #fff;outline-offset:3px;border-radius:22px}
.log__head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 18px;background:#141615;border-bottom:1px solid rgba(255,255,255,.07);font-size:calc(11.5px * var(--s));color:#a1a1a6}
.log__dots{display:flex;gap:6px}
.log__dots i{width:9px;height:9px;border-radius:50%;background:#3a3a3c}
.log__dots i:first-child{background:var(--lime);opacity:.85}
.log__list{padding:12px 18px calc(16px + var(--logpad,0px))}
.log__list li{display:flex;gap:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.log__ts{flex:none;color:#98989d}
.log__tag{flex:none;width:6ch;color:var(--lime)}
.log__tag--b{color:#7fd0f7}
.log__msg{flex:1;min-width:0}
.log__list li.is-new{animation:kx-o-line .35s var(--ease) both}
.log__caret{display:inline-block;width:7px;height:14px;margin-left:2px;vertical-align:-2px;background:var(--lime);animation:kx-o-blink 1s steps(1) infinite}

/* ---------- 6. ready: like the site's #pilot section ---------- */
.step--ready{padding-top:8px}
.odeco--ready .pdeco--lime{left:calc(50% - 600px);top:40px;width:720px}
.odeco--ready .pdeco--blue{left:calc(50% - 100px);top:150px;width:700px}
.odeco--ready .glass--p1{left:calc(50% - 540px);top:400px;bottom:auto;width:104px}
.odeco--ready .glass--p2{left:calc(50% + 400px);top:190px;width:76px}
.odeco--ready .glass--p3{left:calc(50% + 470px);top:560px;bottom:auto}
.odeco--ready .glass--p4{left:calc(50% - 470px);top:190px}
.done{position:relative;max-width:720px;margin-inline:auto;display:flex;flex-direction:column;align-items:center}
.done__art{position:relative;width:96px;height:96px;animation:kx-o-pop .7s var(--spring) both}
.done__art .appicon{position:relative;z-index:1;border-radius:28px;box-shadow:0 24px 48px -16px rgba(11,13,12,.5),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.14)}
.done__art .appicon svg{width:60%;height:60%}
.done__ring{position:absolute;inset:-4px;border-radius:32px;border:1.5px solid rgba(160,205,20,.9);box-shadow:0 0 26px rgba(201,245,63,.45);opacity:0;animation:kx-o-ripple 1.2s cubic-bezier(.2,.6,.3,1) .35s both}
.done__check{position:absolute;z-index:2;right:-12px;bottom:-12px;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:var(--lime);color:var(--ink);box-shadow:0 0 0 5px var(--bg),0 12px 24px -8px rgba(110,150,10,.6);animation:kx-o-check .6s var(--spring) .3s both}
.done .done__h{margin-top:34px}
.done .done__lede{max-width:600px;margin:16px auto 0;color:var(--mute2);overflow-wrap:anywhere}
.receipt.ocard{width:100%;margin-top:32px;overflow:hidden;overflow:clip;text-align:left}
.receipt__sec{padding:20px 26px}
.receipt__sec+.receipt__sec{border-top:1px solid var(--line)}
.receipt__l{font-size:calc(15px * var(--s));line-height:1.35;font-weight:600;color:var(--ink)}
.urlbox__row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line)}
.urlbox__lock{color:var(--mute)}
.urlbox__url{flex:1 1 180px;min-width:0;font-family:var(--mono);font-size:calc(15px * var(--s));font-weight:500;color:var(--ink);overflow-wrap:anywhere}
.receipt__mail{display:flex;gap:12px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:calc(15px * var(--s));line-height:1.45;color:var(--ink2);overflow-wrap:anywhere}
.receipt__mic{flex:none;display:flex;align-items:center;justify-content:center;width:calc(32px * var(--s));height:calc(32px * var(--s));border-radius:calc(10px * var(--s));background:linear-gradient(160deg,#fff 0%,#eeeff2 100%);box-shadow:inset 0 0 0 1px rgba(29,29,31,.08);color:var(--ink2)}
.recap .oline{padding-top:14px}
.recap .ototal{padding-top:14px}
/* the site's hero pair: dark pill + blue text link; the pilot CTA is the page's last word */
.done__btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:30px}
.tlink--btn{font-family:inherit;line-height:1.2;text-align:left;cursor:pointer}
.tlink--btn:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.tlink--btn:hover .tlink__arr{transform:translateX(4px)}

/* ---------- footer: the site's; room for the phone summary bar ---------- */
.kxo .ftr{position:relative;z-index:1;padding-bottom:calc(44px + var(--barh) / var(--z))}  /* never tinted by a glow */

/* ---------- motion ---------- */
@keyframes kx-o-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes kx-o-pop{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:none;opacity:1}}
@keyframes kx-o-check{0%{transform:scale(0) rotate(-30deg)}100%{transform:none}}
@keyframes kx-o-ripple{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
@keyframes kx-o-burst{0%{opacity:0;transform:rotate(var(--a)) translateY(-40px) scale(.4)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1)}}
@keyframes kx-o-breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes kx-o-line{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes kx-o-blink{50%{opacity:0}}
@keyframes kx-o-fade{from{opacity:0}to{opacity:1}}

/* ---------- 4. business: fieldsets, 2-column rows, selects, checkboxes ---------- */
.fset{min-width:0;margin:0;padding:0;border:0}
.fset+.fset{margin-top:6px;padding-top:28px;border-top:1px solid var(--line)}
.fset__l{float:left;width:100%;margin:0 0 20px;padding:0;font-size:calc(18px * var(--s));line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.fset__l+*{clear:both}
.fset__lede{margin:-12px 0 20px;font-size:calc(14px * var(--s));line-height:1.45;color:var(--mute2)}
.form--biz .field{margin-bottom:24px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
.frow>.field{display:grid;grid-row:span 4;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:0}   /* inputs line up across the two columns whatever the hints' length */
.frow--pc{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
.field--half{max-width:min(100%,420px)}   /* the business-type and state selects: their longest option fits */
.sel{position:relative;margin-top:10px}
.sel .input{margin-top:0;padding-right:calc(48px * var(--s));font-family:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis}
.sel__chev{position:absolute;right:calc(18px * var(--s));top:50%;width:calc(18px * var(--s));height:calc(18px * var(--s));transform:translateY(-50%) rotate(180deg);pointer-events:none;color:var(--ink2)}
.country{margin:-6px 0 18px;font-size:calc(14px * var(--s));line-height:1.45;color:var(--mute2)}
.country__v{margin-left:4px;color:var(--ink);font-weight:500}


/* checkbox: a native input (invisible, on top, same size) over a drawn box; 24px on screen at every zoom */
.cb{--cbx:0px;--cby:0px;--cbs:calc(24px / var(--z));position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:start;padding:var(--cby) var(--cbx);font-size:calc(16px * var(--s));line-height:1.45}
.cb__in{position:absolute;z-index:1;left:var(--cbx);top:calc(var(--cby) + (1.45em - var(--cbs)) / 2);width:var(--cbs);height:var(--cbs);margin:0;font:inherit;opacity:0;cursor:pointer}
.cb__box{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;width:var(--cbs);height:var(--cbs);margin-top:calc((1.45em - var(--cbs)) / 2);border-radius:calc(7px / var(--z));border:1.5px solid var(--edge);background:#fff;color:transparent;transition:background-color .2s,border-color .2s,box-shadow .2s,color .2s}
.cb__box svg{width:calc(16px / var(--z));height:calc(16px / var(--z))}
.cb__in:hover+.cb__box{border-color:#515154;box-shadow:0 4px 12px -6px rgba(29,29,31,.35)}
.cb__in:checked+.cb__box{background:var(--ink);border-color:var(--ink);color:var(--lime)}
.cb__in:focus-visible+.cb__box{outline:var(--ring) solid var(--link);outline-offset:2px}
.cb__in[aria-invalid="true"]+.cb__box{border-color:var(--err);box-shadow:0 0 0 4px rgba(215,0,21,.1)}
.cb__l{grid-column:2;grid-row:1;color:var(--ink);cursor:pointer}
.cb>.field__err,.cb>.cb__doc,.cb>.cb__hint{grid-column:2}
.cb__hint{margin-top:2px;font-size:calc(14px * var(--s));color:var(--mute2)}
.cb--bind{--cbx:18px;--cby:16px;margin-top:4px;border-radius:16px;background:var(--bg2);box-shadow:inset 0 0 0 1px rgba(29,29,31,.06)}
.cb--bind .cb__l{font-weight:500}

/* ---------- 5. review & pay ---------- */
.draftbar{display:flex;gap:12px;align-items:flex-start;max-width:720px;margin-top:26px;padding:14px 18px;border-radius:16px;background:#fff4d6;box-shadow:inset 0 0 0 1px rgba(160,110,0,.3);font-size:calc(15px * var(--s));line-height:1.45;color:#4a3300}
.draftbar strong{font-weight:700}
.draftbar__ic{margin-top:1px;color:#8a5a00}
.draftbar+.form{margin-top:20px}
.kv dd.addr{grid-column:1/-1;margin-top:-4px;text-align:left;white-space:pre-line}
.kv dd.ref{font-family:var(--mono);font-size:calc(13px * var(--s));letter-spacing:.04em}
.kv--tax{padding:0 0 14px}
.kv--tax dd{color:var(--ink2)}
.paybox__l{font-family:var(--mono);font-size:calc(11.5px * var(--s));line-height:1.4;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.paybox__l+.paybox__t{margin-top:4px}
.paybox__t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.paybox__via{margin-top:2px;font-size:calc(14px * var(--s));color:var(--mute2)}
.paybox__b+.paybox__b{margin-top:8px}
.tag--soon{background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2)}
.tag--wrap{height:auto;min-height:calc(22px * var(--s));padding:3px 10px;line-height:1.35;white-space:normal}
.terms.ocard,.agree.ocard{margin-top:16px;padding:22px 26px 10px;box-shadow:0 24px 48px -32px rgba(29,29,31,.3)}
.terms__lede,.agree__lede{margin-top:4px;font-size:calc(14px * var(--s));line-height:1.45;color:var(--mute2)}
.term{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:18px 0;border-top:1px solid var(--line)}
.terms__lede+.term{margin-top:16px}
.term__ic{display:flex;align-items:center;justify-content:center;width:calc(36px * var(--s));height:calc(36px * var(--s));border-radius:calc(11px * var(--s));background:linear-gradient(160deg,#fff 0%,#eeeff2 100%);box-shadow:inset 0 0 0 1px rgba(29,29,31,.08);color:var(--ink2)}
.term__ic svg{width:calc(20px * var(--s));height:calc(20px * var(--s))}
.term__body{min-width:0}
.term__t{font-size:calc(16px * var(--s));line-height:1.35;font-weight:600;color:var(--ink)}
.term__p{margin-top:4px;font-size:calc(15px * var(--s));line-height:1.5;color:var(--ink2)}
.term__x{margin-top:10px;padding:12px 14px 12px;border-radius:14px;background:#fffaf0;box-shadow:inset 0 0 0 1px rgba(160,110,0,.2)}
.term__list{margin-top:8px;padding-left:1.15em;list-style:disc outside;font-size:calc(15px * var(--s));line-height:1.5;color:var(--ink2)}
.term__list li+li{margin-top:4px}
.term__link{margin-top:8px}
.more{margin-top:6px}
.more__s{display:inline-flex;align-items:center;gap:6px;min-height:calc(26px / var(--z));padding:2px 0;list-style:none;border-radius:4px;color:var(--link);font-size:calc(14px * var(--s));cursor:pointer}
.more__s::-webkit-details-marker{display:none}
.more__s:hover span{text-decoration:underline;text-underline-offset:3px}
.more__chev{flex:none;transition:transform .25s var(--ease)}
.more[open] .more__chev{transform:rotate(90deg)}
.more__b{margin-top:4px;padding-left:22px;font-size:calc(14px * var(--s));line-height:1.5;color:var(--mute)}
.doclink{display:inline-flex;align-items:flex-start;gap:6px;min-height:calc(24px / var(--z));color:var(--link);font-size:calc(14px * var(--s));line-height:1.35;border-radius:4px}
.doclink__t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}   /* only the name is underlined, never "(coming soon)" */
.doclink svg{flex:none;margin-top:calc((1.35em - 16px) / 2);color:var(--mute)}
.doclink__txt{min-width:0}
.doclink[aria-disabled="true"]{color:var(--ink2);cursor:default}
.doclink[aria-disabled="true"] .doclink__t{text-decoration-style:dotted}
.doclink__soon{color:var(--mute2)}
.ver{display:inline-flex;align-items:center;height:calc(20px * var(--s));padding:0 8px;border-radius:980px;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--line2);font-family:var(--mono);font-size:calc(11px * var(--s));font-weight:600;letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.agree.ocard{min-width:0;border:1px solid rgba(29,29,31,.08)}
.agree__h{float:left;width:100%;padding:0;font-size:calc(16px * var(--s));line-height:1.3;font-weight:600;color:var(--ink)}
.agree__h+*{clear:both}
.agree__lede{margin-top:0;padding-top:4px}
.agree__list{margin-top:14px}
.agree__list>.cb{--cby:14px;border-top:1px solid var(--line)}
.cb__doc{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-top:4px;font-size:calc(14px * var(--s))}
.agree__err{margin:4px 0 6px}
.cb--opt{--cby:14px;margin-top:6px;border-top:1px dashed var(--line2)}
.cb--opt .cb__l{color:var(--ink2)}
.notice--approve{margin-top:16px}
.notice--approve .ic{color:var(--ink2)}
.navrow--pay{margin-top:24px}
.gate{flex:1 0 100%;margin-top:2px;font-size:calc(14px * var(--s));line-height:1.45;font-weight:500;color:var(--ink2);text-align:right}
.btn__lock{display:none;flex:none}
.kxo main .btn[aria-disabled="true"],.kxo main .btn[aria-disabled="true"]:hover{background:var(--bg2);color:#515154;box-shadow:inset 0 0 0 1px var(--line2);transform:none;cursor:not-allowed}
.kxo main .btn[aria-disabled="true"]:focus-visible{background:var(--bg2);color:#515154;transform:none;box-shadow:inset 0 0 0 1px var(--line2),0 0 0 4px rgba(201,245,63,.55)}
.btn[aria-disabled="true"] .btn__lock{display:block}
.seller{display:flex;align-items:flex-start;gap:8px;margin-top:22px;font-size:calc(13px * var(--s));line-height:1.45;color:var(--mute2)}
.seller .ic{margin-top:1px}
/* the order API's answer to the last attempt (INTEGRATION SEAM; the demo shows it via CONFIG.demoSubmitError) */
.apierr{display:flex;gap:12px;align-items:flex-start;max-width:720px;margin-top:18px;padding:14px 18px;border-radius:16px;background:#fff1f2;box-shadow:inset 0 0 0 1px rgba(215,0,21,.28);font-size:calc(15px * var(--s));line-height:1.45;font-weight:500;color:#9f0012}
.apierr svg{flex:none;margin-top:1px;color:var(--err)}
.apierr+.navrow--pay{margin-top:18px}

/* ---------- 1. plan: ordering closed (catalog.ordering.open = false) ---------- */
.closed{position:relative;display:flex;gap:16px;align-items:flex-start;max-width:720px;margin:44px auto 0;padding:22px 26px;border-radius:24px;background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(29,29,31,.08),0 24px 48px -32px rgba(29,29,31,.3);text-align:left}
.closed__ic{flex:none;display:flex;align-items:center;justify-content:center;width:calc(44px * var(--s));height:calc(44px * var(--s));border-radius:50%;background:#fff4d6;box-shadow:inset 0 0 0 1px rgba(160,110,0,.3);color:#8a5a00}
.closed__body{min-width:0}
.closed__t{font-size:calc(20px * var(--s));line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.closed__b{margin-top:6px;font-size:calc(16px * var(--s));line-height:1.5;color:var(--ink2)}
.closed__a{margin-top:10px}
.closed__a .tlink{font-size:calc(16px * var(--s))}
.closed:not([hidden])+.plans{margin-top:40px}

/* ---------- 6. order status: the order line, the waiting state ---------- */
.dep__order{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:30px;padding:10px 12px 10px 18px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.dep__ref{display:inline-flex;align-items:baseline;gap:10px;font-size:calc(14px * var(--s));color:#a1a1a6}
.dep__refv{font-family:var(--mono);font-size:calc(15px * var(--s));font-weight:600;letter-spacing:.06em;color:#fff}
.dep__st{display:inline-flex;align-items:center;gap:8px;min-height:calc(28px * var(--s));padding:3px 12px;border-radius:980px;background:rgba(69,184,240,.14);box-shadow:inset 0 0 0 1px rgba(69,184,240,.42);font-size:calc(13px * var(--s));font-weight:600;color:#bfe6fb;white-space:nowrap}
.dep__stdot{flex:none;width:8px;height:8px;border-radius:50%;background:#45b8f0}
.dep__st[data-st="awaiting_approval"]{background:rgba(255,196,0,.12);box-shadow:inset 0 0 0 1px rgba(255,196,0,.42);color:#ffd666}
.dep__st[data-st="awaiting_approval"] .dep__stdot{background:#ffc400}
.dep__st[data-st="active"]{background:rgba(201,245,63,.14);box-shadow:inset 0 0 0 1px rgba(201,245,63,.45);color:var(--lime)}
.dep__st[data-st="active"] .dep__stdot{background:var(--lime)}
.dep__ack{margin-top:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);animation:kx-o-in .45s var(--ease) both}
.dep__other{margin-top:16px;font-size:calc(13px * var(--s));line-height:1.45;color:#a1a1a6}

/* ===================================================================== desktop (zoom .75) */
@media (min-width:1024px){
  .step__h{font-size:54px}
  .step__lede{font-size:21px}
  .log__list li{white-space:nowrap}
  .log__msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .log .lh{display:inline}
  .log .lh wbr{display:none}
  .dep__h{min-height:2.16em}                 /* "Setting up…" → "…is set up" never pushes the panel down */
}
/* ≥600: the site's form field is a pill (its signup); phones keep the 14px field, as the site does */
@media (min-width:600px){
  .input,.affix,.qty__in{border-radius:980px}
  .input{padding:0 24px}
  .affix__in{padding-left:24px}
  .affix__sfx{padding:0 24px 0 16px}
}

/* ===================================================================== tablet + phone: summary becomes a bottom bar + sheet */
@media (max-width:1023.98px){
  .layout.has-cart{display:block}
  .cart{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:45;border:0;border-radius:24px 24px 0 0;background:rgba(255,255,255,.96);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -1px 0 rgba(29,29,31,.1),0 -18px 40px -24px rgba(29,29,31,.35);padding-bottom:env(safe-area-inset-bottom)}
  .cart::before{display:none}
  .cart__toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:72px;padding:12px max(var(--gut),env(safe-area-inset-left)) 12px;text-align:left;border-radius:24px 24px 0 0}
  .cart__toggle:focus-visible{outline-offset:-4px;border-radius:24px 24px 0 0}
  .cart__tl{display:flex;flex-direction:column;min-width:0}
  .cart__tt{overflow:hidden;text-overflow:ellipsis}   /* never runs into the price (safety net for large text settings) */
  .cart__tt{font-size:calc(15px * var(--s));font-weight:600;white-space:nowrap}
  .cart__tm{font-size:calc(13px * var(--s));color:var(--mute2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cart__tr{display:flex;align-items:center;gap:10px;flex:none}
  .cart__ttot .money__v{font-size:calc(20px * var(--s));font-weight:600;letter-spacing:-.02em}
  .cart__ttot .money__per{margin-left:2px;font-size:calc(13px * var(--s));color:var(--mute2)}
  .cart__chev{transition:transform .35s var(--ease)}
  .cart.is-open .cart__chev{transform:rotate(180deg)}
  .cart__body{display:none;max-height:calc((100vh - var(--hdrh) - var(--barh)) / var(--z) - 24px);max-height:calc((100dvh - var(--hdrh) - var(--barh)) / var(--z) - 24px);overflow:auto;padding:0 var(--gut) 18px;border-top:1px solid var(--line)}
  .cart.is-open .cart__body{display:block}
  .cart__body:focus-visible{outline:var(--ring) solid var(--link);outline-offset:-4px;border-radius:12px}
  .cart__head{justify-content:flex-start;padding-top:14px;padding-bottom:12px}
  .cart__h{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .scrim{display:block;position:fixed;inset:0;z-index:44;background:rgba(29,29,31,.32);animation:kx-o-fade .25s var(--ease) both}
  .layout.is-pay .cart{display:none}
  .dep__grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .log{flex:none;height:250px;min-height:0}
  .odeco .glass--p1{left:calc(50% - 450px);top:130px;bottom:auto;width:80px}
  .odeco .glass--p2{left:calc(50% + 350px);top:92px;width:62px}
  .odeco .glass--p3{left:calc(50% + 300px);top:232px;bottom:auto}
  .odeco .glass--p4{left:calc(50% - 330px);top:96px}
  .odeco .pdeco--lime{left:calc(50% - 640px);top:260px;width:640px}
  .odeco .pdeco--blue{left:calc(50% - 20px);top:560px;width:680px}
}
@media (min-width:768px) and (max-width:1023.98px){
  .step__h{font-size:44px}
  .step__lede{font-size:20px}
  .odeco .glass--p1,.odeco .glass--p2,.odeco .glass--p4{display:block}
  /* no free gutter beside the cards on a tablet: the small lime orb floats in the band above the Premium card */
  .odeco .glass--p3{display:none}
  .plans::after{content:"";position:absolute;right:10px;top:-44px;width:24px;aspect-ratio:1;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 30%,#f3ffd0 0%,#c9f53f 55%,#9cc72a 100%);box-shadow:0 10px 20px -6px rgba(120,160,20,.5);animation:kx-o-orb 1.4s var(--ease) .4s both}
  .steps__item:not(.is-cur) .steps__t{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .steps__item:not(.is-cur) .steps__el{gap:0;padding:2px}
  .plan.tile{padding:34px 30px}
}

/* ===================================================================== phone */
@media (max-width:767px){
  .steps{margin-top:24px}
  .steps__item:not(:last-child)::after{margin:0 6px;min-width:6px}
  .steps__t{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .steps__el{gap:0;padding:2px}
  .steps__num{width:28px;height:28px}
  .steps__cap{display:block;margin-top:14px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute2)}
  body[data-step="plan"] .steps__cap{display:none}   /* one mono line only: the centred "Pricing" eyebrow */
  .layout{margin-top:30px}
  .step__lede{font-size:17px}
  .step--plan{padding-top:0}
  .plans{grid-template-columns:minmax(0,1fr);max-width:520px;margin-top:36px;gap:16px}
  .plan.tile{padding:26px 22px 24px;border-radius:28px}
  .plan.tile:hover,.plan.tile:nth-child(even):hover{transform:none}
  .plan .plan__ic{width:56px;height:56px;border-radius:17px}
  .plan .plan__ic svg{width:34px;height:34px}
  .plan .plan__name{margin-top:18px;font-size:30px}
  .plan .plan__tag{font-size:16px}
  .plan__price{margin-top:18px}
  .price .money__v{font-size:48px}
  .price .money__per{font-size:17px}
  .plan .plan__lim{margin-top:18px}
  .plan .plan__feath{margin-top:22px;padding-top:20px}
  .plan__btn{margin-top:26px}
  .feat{font-size:15px}
  .plans__note{margin-top:64px;font-size:14px}
  .odeco{top:-60px;left:-24px;right:-24px}
  .odeco .pdeco--lime{left:-60px;top:420px;width:340px;background:radial-gradient(closest-side,rgba(201,245,63,.38),rgba(201,245,63,0))}
  .odeco .pdeco--blue{left:auto;right:-80px;top:760px;width:360px;background:radial-gradient(closest-side,rgba(69,184,240,.3),rgba(69,184,240,0))}
  /* phone: the two small orbs float in the band between the headline and the first card (whatever the lede's length),
     never beside a line of text — the site's #pilot glass, drawn by the card list itself */
  .odeco .glass--p3,.odeco .glass--p4{display:none}
  .plans::before,.plans::after{content:"";position:absolute;aspect-ratio:1;border-radius:50%;pointer-events:none;animation:kx-o-orb 1.4s var(--ease) .4s both}
  .plans::before{left:-8px;top:-27px;width:14px;background:radial-gradient(circle at 32% 30%,#e3f5fe 0%,#45b8f0 60%,#2a93c9 100%);box-shadow:0 8px 16px -6px rgba(42,147,201,.55)}
  .plans::after{right:-6px;top:-31px;width:18px;background:radial-gradient(circle at 32% 30%,#f3ffd0 0%,#c9f53f 55%,#9cc72a 100%);box-shadow:0 10px 20px -6px rgba(120,160,20,.5)}
  .form{margin-top:26px}
  .form.ocard{padding:24px 20px 24px;border-radius:24px}
  .chosen{gap:12px;margin-bottom:24px;padding-bottom:20px;flex-wrap:wrap}
  .chosen__txt{flex:1 1 150px}
  .field-row{grid-template-columns:minmax(0,1fr);gap:0}
  .navrow{margin-top:30px}
  .navrow__next{flex:1}
  .navrow--pay{flex-direction:column;align-items:stretch}
  .navrow--pay .navrow__next{order:1;margin-left:0}
  .navrow--pay .gate{order:2;margin:0;text-align:center}
  .navrow--pay [data-go="back"]{order:4}
  .terms.ocard,.agree.ocard{padding:18px 20px 8px;border-radius:24px}
  .term{column-gap:12px}
  .dep__order{padding:10px 12px 10px 14px}
  .paybox.ocard{flex-direction:column;gap:14px;padding:22px 20px}
  .review__sec.ocard{padding:18px 20px 16px;border-radius:24px}
  .dep{padding:26px 20px 22px;border-radius:28px;box-shadow:0 36px 64px -30px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06)}   /* a smaller blur: Chrome drew the desktop one with hard bands at DPR 2+ */
  .dep::before{width:520px;height:380px;top:-220px}
  .dep__head{column-gap:20px}
  /* phones: the lede runs under the icon + title, full width (a long line never squeezes beside the icon) */
  .dep__titles{display:contents}
  .dep__art{grid-row:1;align-self:center}
  .dep__h{grid-column:2}
  .dep__lede{grid-column:1 / -1;margin-top:16px}
  .dep__art{width:64px;height:64px;margin:4px}
  .dep__icon.appicon{border-radius:18px}
  .dep__ripple{border-radius:18px}
  .dep__halo{inset:-20px}
  .dep__ring{left:-13px;top:-13px;width:calc(100% + 26px);height:calc(100% + 26px)}
  .dep__badge{width:24px;height:24px;right:-7px;bottom:-7px}
  .dep__badge svg{width:13px;height:13px}
  .dep__burst i{--d:60px}
  .dep__burst i:nth-child(3n+2){--d:50px}
  .dep__burst i:nth-child(3n){--d:70px}
  .dep__h{margin-top:0;font-size:26px}
  .dep__lede{font-size:15px}
  .dep__prog{margin-top:26px}
  .dep__done .btn{flex:1 1 100%}
  .log{height:220px;font-size:11.5px}
  .log__list li{gap:8px}
  .log__ts{display:none}
  .step--ready{padding-top:8px}
  .odeco--ready .pdeco--lime{left:-80px;top:40px;width:320px}
  .odeco--ready .pdeco--blue{left:auto;right:-90px;top:140px;width:340px}
  .odeco--ready .glass--p3{right:14px;top:40px}
  .odeco--ready .glass--p4{left:20px;top:210px}
  .done__art{width:80px;height:80px}
  .done__art .appicon{border-radius:22px}
  .done__ring{border-radius:26px}
  .done__check{width:34px;height:34px;right:-10px;bottom:-10px}
  .done__btns{flex-direction:column;align-items:stretch;width:100%;gap:6px}
  .done__btns .tlink--btn{align-self:center}
  .receipt.ocard{border-radius:24px}
  .urlbox__scheme{display:none}
  .urlbox__url{font-size:14px}
  .receipt__sec{padding:18px}
}
@media (min-width:600px){
  .incl .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:599px){
  .frow,.frow--pc{display:block}
  .frow>.field{display:block}
  .field--half{max-width:none}
  .frow--pc #fld-postcode .input{max-width:200px}
  .draftbar{padding:14px 16px}
  .cb--bind{--cbx:16px;--cby:14px}
}
@media (max-width:359px){
  .steps__num{width:26px;height:26px;font-size:11px}   /* 7 steps fit 288px: 7 x 28 + 6 x 12 */
  .steps__el{padding:1px}
  .steps__item:not(:last-child)::after{margin:0 4px;min-width:4px}
  .cart__ttot .money__v{font-size:18px}
  .cart__ttot .money__per{font-size:12px}
  .cart__tt{font-size:14px}
  .cart__toggle{gap:8px}
  .cart__tr{gap:6px}
  .form.ocard{padding:20px 16px 22px}
  .plan.tile{padding:22px 18px 22px}
  .price .money__v{font-size:44px}
  .step__h{font-size:29px}
  .kxo main .btn{padding-inline:20px}
}

/* ---------- touch: no sticky hover lifts ---------- */
@media (hover:none){
  .plan.tile:hover,.plan.tile:nth-child(even):hover{transform:none}
}

/* ===================================================================== the courtesy gate (order.js CONFIG.gate)
   While the flow is locked, #oflow carries `inert` (plus aria-hidden, for any engine that does not honour inert yet)
   and the blur below. The blur is decoration only: it is `inert` that takes the flow away from a pointer, a keyboard
   and a screen reader. Neither is a security measure -- see the comment on CONFIG.gate in order.js.
   The card is the site's own .ocard, and inside it the order form's own .field / .field__l / .field__hint / .input /
   .field__err, sized like the rest of the order UI (* var(--s)). (NB .flow and .gate are already app.css's and
   order.css's own classes, hence .oflow and .codegate here.) */
.oflow{transition:filter .35s var(--ease),opacity .35s var(--ease)}
.oflow[inert]{filter:blur(7px) saturate(.92);opacity:.6;pointer-events:none;-webkit-user-select:none;user-select:none}
.codegate{position:fixed;inset:0;z-index:60;display:flex;padding:16px;overflow:auto;overscroll-behavior:contain;background:rgba(251,251,253,.4)}
.codegate__card{width:min(100%,calc(400px * var(--s)));margin:auto;padding:calc(30px * var(--s)) calc(32px * var(--s)) calc(32px * var(--s));text-align:left}
.codegate__h{font-size:calc(22px * var(--s));line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.codegate__b{margin-top:8px;font-size:calc(15px * var(--s));line-height:1.5;color:var(--ink2)}
.codegate__f{margin:calc(24px * var(--s)) 0 0}
.codegate__in{max-width:calc(190px * var(--s));font-family:var(--mono);font-size:calc(20px * var(--s));font-weight:600;letter-spacing:.42em;text-indent:.42em;text-align:center}
@media (max-width:359px){.codegate{padding:12px}.codegate__card{padding:22px 20px 24px}.codegate__in{max-width:100%}}
@media (prefers-reduced-motion:reduce){.oflow{transition:none}}

/* ---------- reduced motion: app.css already stops every animation + transition; nothing here moves either ---------- */
@media (prefers-reduced-motion:reduce){
  .odeco>*{translate:none}
  .plan.tile.is-pt,.plan.tile:hover,.plan.tile:nth-child(even):hover,.btn--light:hover,.btn--light:hover .btn__ic,.qty__b:active,.lang__b span{transform:none}
  .dep__burst i,.dep__ripple,.done__ring{display:none}
}

/* ---------- forced colours ---------- */
@media (forced-colors:active){
  .qty__b,.steps__num,.dstep__ic{border:1px solid CanvasText}
  .bar{border:1px solid CanvasText}
  .bar__fill{background:Highlight}
  .lang__b[aria-pressed="true"] span,.is-cur .steps__num{outline:var(--ring) solid Highlight;outline-offset:1px}
  .steps__item:not(:last-child)::after{background:GrayText}
  .steps__item.is-done:not(:last-child)::after{background:CanvasText}
  .plan,.ocard,.cart,.dep,.notice,.qfix,.draftbar,.term__x,.cb--bind,.dep__order,.dep__st,.closed,.apierr,.codegate__card{outline:1px solid CanvasText}
  .oflow[inert]{filter:none}   /* forced colours flattens the veil to Canvas anyway: a blur under it only muddies it */
  .cb__box{forced-color-adjust:none;border-color:CanvasText;background:Canvas;color:Canvas}
  .cb__in:checked+.cb__box{border-color:Highlight;background:Highlight;color:HighlightText}
  .ver{border:1px solid CanvasText}
  .plan.is-sel{outline:3px solid Highlight}
  .ptag,.tag{border:1px solid CanvasText}
  .odeco,.dep__fx,.dep__burst,.dep__halo,.plans::before,.plans::after{display:none}
}

/* ===================================================================== the return page (/order/return/, return.js)
   The status panel is the Status step's dark .dep panel (one column, no log). */
.rt{margin-top:48px}
.dep--rt{max-width:780px;padding:44px}
.dep--rt .dep__order{margin-top:28px}
.dep--rt .dep__h{min-height:0}              /* one title at a time here: no room kept for a second line */
.rt__steps{margin-top:18px}
.rt__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);animation:kx-o-in .45s var(--ease) both}
.rt__poll{margin-top:18px;font-family:var(--mono);font-size:calc(12px * var(--s));line-height:1.45;color:#98989d;font-variant-numeric:tabular-nums}
.rt__links{display:flex;justify-content:center;max-width:780px;margin:18px auto 0}
.rt__links .tlink{font-size:calc(16px * var(--s))}
@media (max-width:767px){
  .rt{margin-top:28px}
  .dep--rt{padding:26px 20px 22px}
  .rt__act .btn{width:100%}
}