/* PrimeStart v5 checkout: three real stages, one at a time, the order always at hand.
   Ported from the prototype (handover/rebuild-2026-10-12/v5/v5-checkout.css); custom properties carry the --v5- prefix.
   A quieter page than the rest: the header loses its menu, the footer shrinks, nothing competes with the order.
   Without the script the three stages are one page (progressive enhancement); .co.is-live is the script running.
   Loaded only on /checkout/ and /get-started/ where the website offer may render (inc/v5-checkout.php). */

/* slim chrome on this page only (display:none takes the menu out of the tab order and the accessibility tree) */
body.v5-checkout .hdr .nav,body.v5-checkout .hdr__login,body.v5-checkout .hdr__r .btn,body.v5-checkout .hdr__burger{display:none}
body.v5-checkout .hdr__in::after{content:"Secure checkout";margin-left:auto;font-weight:800;font-size:13.5px;color:var(--v5-ink-2);padding-left:24px;background:no-repeat left center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23127A43' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E")}
body.v5-checkout .ftr{margin-top:0;padding:26px 0}
body.v5-checkout .ftr__g{display:none}
body.v5-checkout .ftr__legal{margin-top:0;padding-top:0;border-top:0}
body.v5-checkout .ftr__b{margin-top:14px;padding-top:0;border-top:0}
body.v5-checkout .sticky,body.v5-checkout .mnav{display:none!important}

.co{background:linear-gradient(180deg,#FFF8F1 0,#F5F7FA 300px);padding:24px 0 72px;min-height:70vh}
.co [hidden]{display:none!important}

/* the top: a short heading and where the customer is (no paragraph above the form) */
.co__top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
.co__top h1{font-size:28px;line-height:1.15}
.co__steps{list-style:none;margin:0;padding:4px;display:flex;gap:4px;background:#fff;border:1px solid var(--v5-line);border-radius:999px;box-shadow:var(--v5-sh-1)}
.co__steps li{margin:0}
.co__steps a{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 6px;border-radius:999px;font-weight:800;font-size:13.5px;color:var(--v5-ink-3);white-space:nowrap;text-decoration:none}
.co__steps a:hover{color:var(--v5-ink)}
.co__steps a:focus-visible{outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.co__steps span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--v5-soft);font-size:12.5px;color:var(--v5-ink-2)}
.co__steps li.on a{background:var(--v5-ink);color:#fff}
.co__steps li.on span{background:var(--v5-orange);color:var(--v5-ink)}
.co__steps li.done a{color:var(--v5-ink-2)}
.co__steps li.done span{background:var(--v5-green-50);color:var(--v5-green)}

.co__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.co__main,.co__order,.co__details{display:grid;gap:16px;min-width:0;margin:0}
.cs{margin:0;border:1px solid var(--v5-line);border-radius:var(--v5-r-lg);background:#fff;box-shadow:var(--v5-sh-1);padding:22px 24px 24px;min-width:0}
.cs legend{float:left;width:100%;display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;font-weight:800;font-size:20px;color:var(--v5-ink);letter-spacing:-.02em;padding:0;margin-bottom:16px}
.cs legend~*{clear:both}
.cs legend small{font-size:14px;font-weight:600;color:var(--v5-ink-3);letter-spacing:0}
.cs__h{font:inherit;color:inherit;letter-spacing:inherit}
.cs__h:focus{outline:0}
.cs__h:focus-visible{outline:3px solid var(--v5-ring,#C94F0D);outline-offset:4px;border-radius:6px}
.cs__n{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--v5-ink);color:#fff;font-size:14.5px}
.cs__q{font-weight:800;color:var(--v5-ink);font-size:15.5px;margin-bottom:10px}
.cs__note{margin-top:14px;padding:12px 16px;border-radius:14px;background:var(--v5-butter-50);font-size:14.5px;font-weight:600;color:var(--v5-ink)}
.cs__help{margin-top:14px;font-size:14.5px}
.cs__in{font-size:14.5px;margin-top:12px}
.cs__in a,.cs__fine a{font-weight:800;color:var(--v5-ink);border-bottom:2px solid var(--v5-orange);text-decoration:none}
.cs__fine{font-size:13px;color:var(--v5-ink-3);margin-top:12px}

/* Continue and Back: the way through the stages. Without the script they are links between the sections. */
.cs__nav{display:flex;align-items:center;justify-content:flex-end;gap:12px 16px;margin-top:20px;flex-wrap:wrap}
.cs__nav .co__back{margin-right:auto}
.cs__go{min-height:50px;padding:0 26px}
.co__back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px 0 2px;font-weight:800;font-size:15px;color:var(--v5-ink);text-decoration:none;border-radius:12px}
.co__back .ic{width:16px;height:16px;transform:rotate(90deg);stroke-width:2.6}
.co__back:hover{color:var(--v5-orange-d,var(--v5-ink))}
.co__back:focus-visible{outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.co:not(.is-live) .co__back{display:none}

/* without the script the order is updated by a plain button; the script hides it once it is running */
.co__update{margin-top:16px}
.co.is-live .co__update{display:none}

/* stage 1: the website the address names, confirmed */
.cfm{position:relative;display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:start;padding:14px;border:2px solid var(--v5-ink);border-radius:20px;background:#FFFCF8}
.cfm .cp__v{height:104px;border-radius:14px}
.cfm .cp__v .bz{width:112px;top:14px}
.cfm .cp__v .lg{display:none}
.cfm .cp__v.v-all .bz{left:50%}
.cfm__b{min-width:0;padding-right:84px}
.cfm__n{font-weight:800;font-size:18px;color:var(--v5-ink);letter-spacing:-.01em;margin:2px 0 8px}
.cfm__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.cfm__l li{display:flex;gap:7px;align-items:flex-start;margin:0;font-size:13.5px;font-weight:600;color:var(--v5-ink-2);line-height:1.35}
.cfm__l .ic{flex:none;width:14px;height:14px;margin-top:2px;color:var(--v5-green);stroke-width:3}
.cfm__f{margin:12px 0 0;padding:10px 0 0;border-top:1px dashed var(--v5-line);display:grid;gap:4px}
.cfm__f div{display:flex;gap:10px;font-size:14px;line-height:1.4}
.cfm__f dt{flex:none;width:96px;font-weight:700;color:var(--v5-ink-3)}
.cfm__f dd{margin:0;font-weight:800;color:var(--v5-ink)}
.cfm__chg{position:absolute;right:12px;top:12px;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1.5px solid var(--v5-line-2,#CFD6DF);font-weight:800;font-size:14px;color:var(--v5-ink);text-decoration:none}
.cfm__chg:hover{border-color:var(--v5-ink)}
.cfm__chg:focus-visible{outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}

/* stage 1: the chooser (with no website in the address, or after "Change") */
.cpk{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cp{position:relative;display:flex;flex-direction:column;border:2px solid var(--v5-line);border-radius:20px;overflow:hidden;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;background:#fff;margin:0}
.cp:hover{transform:translateY(-2px);box-shadow:var(--v5-sh-2)}
.cp input{position:absolute;opacity:0;pointer-events:none}
.cp:has(input:checked){border-color:var(--v5-ink);box-shadow:var(--v5-sh-2)}
.cp:has(input:focus-visible){outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.cp__v{position:relative;height:96px;overflow:hidden;background:var(--v5-orange-50);display:block}
.cp:nth-child(2) .cp__v{background:var(--v5-sky-50)}
.cp:nth-child(3) .cp__v{background:var(--v5-butter-50)}
.cp__v .bz{position:absolute;left:50%;top:16px;width:140px;transform:translateX(-50%);display:block;border-radius:8px}
.cp__v .bz img{width:100%;height:auto}
.cp__v .bz__bar{height:14px;padding:0 6px;gap:3px;display:flex}
.cp__v .bz__bar i{width:4px;height:4px}
.cp__v.v-all .bz{left:38%}
.cp__v .lg{position:absolute;right:10px;top:14px;width:74px;height:44px;border-radius:9px;gap:5px}
.cp__v .lg i{width:16px;height:16px;border-radius:5px}
.cp__v .lg i svg{width:9px;height:9px}
.cp__v .lg b{font-size:8.5px}
.cp__v .lg small{font-size:4px}
.cp__b{display:block;padding:12px 16px 14px}
.cp__b b{display:block;font-size:16px;color:var(--v5-ink);letter-spacing:-.01em}
.cp__b small{display:block;font-size:13px;color:var(--v5-ink-2);line-height:1.35;margin-top:2px;min-height:35px}
.cp__b em{display:block;font-style:normal;font-weight:800;font-size:21px;letter-spacing:-.03em;color:var(--v5-ink);margin-top:6px}
.cp__flag{position:absolute;left:10px;top:10px;z-index:2;font-size:11px;font-weight:800;color:#fff;background:var(--v5-ink);border-radius:999px;padding:4px 9px}
.cp__tick{position:absolute;right:10px;top:10px;z-index:2;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid #CFD6DF;display:grid;place-items:center;color:transparent}
.cp__tick .ic{width:13px;height:13px;stroke-width:3.2}
.cp:has(input:checked) .cp__tick{background:var(--v5-orange);border-color:var(--v5-orange);color:var(--v5-ink)}

.cpay{margin-top:18px}
.cpay__o{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-opt{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--v5-line);border-radius:16px;cursor:pointer;transition:border-color .2s ease,background .2s ease;margin:0}
.co-opt input{flex:none;appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;border:2px solid #CFD6DF;margin:2px 0 0;padding:0;background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.co-opt input:checked{border-color:var(--v5-orange);box-shadow:inset 0 0 0 4px var(--v5-orange)}
.co-opt:has(input:checked){border-color:var(--v5-ink);background:#FFFCF8}
.co-opt:has(input:focus-visible){outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.co-opt input:focus{outline:0}
.co-opt b{display:block;color:var(--v5-ink);font-size:15.5px}
.co-opt small{display:block;font-size:13.5px;color:var(--v5-ink-2);line-height:1.4;margin-top:2px}

/* stage 2: at most three recommendations, each one Add/Added switch, then what the address added */
.cxr{display:grid;gap:10px}
.cxi{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"v b t" "v p t" "c c c";column-gap:14px;row-gap:2px;align-items:center;padding:8px 12px 8px 8px;border:2px solid var(--v5-line);border-radius:18px;cursor:pointer;transition:border-color .2s ease,background .2s ease;margin:0;min-height:68px}
.cxi input{position:absolute;opacity:0;pointer-events:none}
.cxi:hover{border-color:#CFD6DF}
.cxi:not(.cxi--pick):has(input:checked){border-color:var(--v5-ink);background:#FFFCF8}
.cxi:has(input:focus-visible){outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.cxi__b{grid-area:b;align-self:end;min-width:0}
.cxi__b b{display:block;font-size:15px;color:var(--v5-ink);line-height:1.25}
.cxi__b small{display:block;font-size:13px;color:var(--v5-ink-2);line-height:1.35;margin-top:1px}
.cxi>em{grid-area:p;align-self:start;font-style:normal;font-weight:800;font-size:14.5px;color:var(--v5-ink);white-space:nowrap}
.cxt__btn{grid-area:t;display:inline-flex;align-items:center;justify-content:center;min-width:92px;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--v5-ink);font-weight:800;font-size:14px;color:var(--v5-ink);background:#fff;transition:background .2s ease,color .2s ease}
.cxt__btn>span{display:inline-flex;align-items:center;gap:6px}
.cxt__btn .ic{width:14px;height:14px;stroke-width:3}
.cxt__added{display:none!important}
.cxi:has(input:checked) .cxt__btn{background:var(--v5-orange);border-color:var(--v5-orange);color:var(--v5-ink)}
.cxi:has(input:checked) .cxt__add{display:none!important}
.cxi:has(input:checked) .cxt__added{display:inline-flex!important}
.cxr__also{margin:8px 2px 0;font-weight:800;font-size:14px;color:var(--v5-ink-2)}

/* the small drawn objects in the tiles */
.cxi>.cdc{grid-area:c;justify-self:start;margin-top:5px;font-size:10.5px;padding:2px 8px;box-shadow:none;border:1px solid var(--v5-line)}
.cxi>.cdc::before{width:5px;height:5px}
.cp__v>.cdc{position:absolute;left:8px;bottom:6px;z-index:4;font-size:10px;padding:2px 7px;white-space:nowrap}
.cp__v>.cdc::before{width:5px;height:5px}
.cp__v>.cdc:not(.tag--c)::before{background:var(--v5-green)}
.cxi__v{grid-area:v;width:64px;height:52px;border-radius:12px;background:var(--v5-butter-50);display:grid;place-items:center;overflow:hidden}
.cxi__v.s{background:var(--v5-sky-50)}.cxi__v.r{background:var(--v5-rose-50)}.cxi__v.m{background:var(--v5-mint-50)}.cxi__v.l{background:var(--v5-lilac-50)}.cxi__v.g{background:var(--v5-green-50)}
.cxi__v .lg{position:static;width:54px;height:32px;border-radius:8px;gap:4px;box-shadow:var(--v5-sh-1)}
.cxi__v .lg i{width:12px;height:12px;border-radius:4px}
.cxi__v .lg i svg{width:7px;height:7px}
.cxi__v .lg b{font-size:6.5px}
.cxi__v .lg small{font-size:3.5px}
.cxi__v .gcard{width:56px;padding:5px 6px;border-radius:7px;box-shadow:var(--v5-sh-1)}
.cxi__v .gcard b{font-size:5.5px}
.cxi__v .gcard span{font-size:4.5px}
.cxi__v .bc{position:static;width:54px;height:32px;border-radius:5px;padding:6px 7px;transform:rotate(-5deg);box-shadow:var(--v5-sh-1)}
.cxi__v .bc b{font-size:6px}
.cxi__v .bc span{font-size:4px}
.cxi__v .bc i{width:9px;height:9px;border-radius:3px;right:5px;top:5px}
.cxi__v .fly{width:30px;height:40px;border-radius:4px;padding:4px;transform:rotate(5deg);box-shadow:var(--v5-sh-1)}
.cxi__v .fly i{height:14px;border-radius:2px}
.cxi__v .fly b{height:3px;margin-top:4px}
.cxi__v .fly u{height:2px;margin-top:3px}
.cxi__v .soc{gap:4px}
.cxi__v .soc i{width:24px;height:24px;border-radius:7px;box-shadow:var(--v5-sh-1)}
.cxi__v .soc i:nth-child(2){transform:translateY(-4px)}
.cxi__v .soc svg{width:11px;height:11px}
.cxi__ic{color:var(--v5-sky)}
.cxi__ic .ic{width:24px;height:24px}
.cxi__v .shp{position:relative;width:48px;height:40px;border-radius:7px;background:#fff;box-shadow:var(--v5-sh-1);padding:5px;display:block}
.cxi__v .shp i{display:block;height:15px;border-radius:3px;background:var(--v5-sky-50);border:1px solid #BFD9EE}
.cxi__v .shp b{display:block;height:3px;width:60%;margin-top:4px;border-radius:2px;background:var(--v5-ink)}
.cxi__v .shp u{display:block;height:3px;width:36%;margin-top:3px;border-radius:2px;background:#C9CED6;text-decoration:none}
.cxi__v .shp em{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px;border-radius:50%;background:#1D6FB8;color:#fff;display:grid;place-items:center;box-shadow:var(--v5-sh-1)}
.cxi__v .shp em svg{width:12px;height:12px}
.cxi__v .pay{position:relative;width:30px;height:42px;border-radius:6px;background:var(--v5-ink);box-shadow:var(--v5-sh-1);padding:4px 3px;display:block;transform:rotate(-4deg);overflow:hidden}
.cxi__v .pay i{display:block;height:12px;border-radius:3px;background:var(--v5-green);color:#fff;font-size:5px;font-weight:800;line-height:12px;text-align:center;font-style:normal;white-space:nowrap}
.cxi__v .pay b{display:block;height:2px;width:4px;margin:6px 0 0 3px;border-radius:2px;background:#8A93A3;box-shadow:7px 0 0 #8A93A3,14px 0 0 #8A93A3,0 5px 0 #8A93A3,7px 5px 0 #8A93A3,14px 5px 0 #8A93A3,0 10px 0 #8A93A3,7px 10px 0 #8A93A3,14px 10px 0 #8A93A3}
.cxi__v .pay u{display:none}
.cxi__v .bars{display:flex;align-items:flex-end;gap:4px;height:36px}
.cxi__v .bars i{width:7px;height:12px;border-radius:3px 3px 0 0;background:#9BD4B2}
.cxi__v .bars i:nth-child(2){height:20px}
.cxi__v .bars i:nth-child(3){height:16px}
.cxi__v .bars i:nth-child(4){height:27px}
.cxi__v .bars i:last-child{height:36px;background:var(--v5-green)}
.cxi__v .qrc{position:relative;width:34px;height:44px;border-radius:5px;background:#fff;box-shadow:var(--v5-sh-1);transform:rotate(-4deg);display:block}
.cxi__v .qrc i{position:absolute;left:7px;top:7px;width:20px;height:20px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--v5-ink) 0 3px,#fff 3px 5px),var(--v5-ink);opacity:.85}
.cxi__v .qrc b{position:absolute;left:7px;right:7px;bottom:7px;height:3px;border-radius:2px;background:var(--v5-orange)}
.cxi__v.m .cxi__ic{color:var(--v5-green)}

/* what the chosen package already includes (a list, not offered as extras) */
.cinc{border-radius:18px;background:var(--v5-green-50);padding:14px 16px;margin-bottom:16px}
.cinc__t{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--v5-green);font-size:15px}
.cinc__t .ic{width:18px;height:18px;stroke-width:2.8}
.cinc__l{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cinc__l li{display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 12px 0 9px;border-radius:999px;background:#fff;font-weight:800;font-size:13.5px;color:var(--v5-ink)}
.cinc__l .ic{width:14px;height:14px;color:var(--v5-green);stroke-width:3}
.cx__more{margin:14px 2px 0;font-size:15px;line-height:1.5}
.cx__more .link{white-space:nowrap}

/* stage 3: details */
.cf{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.fld{display:block;min-width:0}
.fld--w{grid-column:1/-1}
.fld>label{display:block;font-weight:800;font-size:14px;color:var(--v5-ink);margin:0 0 6px}
.fld input{width:100%;height:48px;border-radius:14px;border:1.5px solid #CFD6DF;padding:0 14px;font:600 16px var(--v5-sans);color:var(--v5-ink);background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}
.fld input:hover{border-color:#AEB7C3}
.fld input:focus{outline:0;border-color:var(--v5-ink);box-shadow:0 0 0 4px rgba(249,115,22,.22)}
.fld small{display:block;font-size:13px;color:var(--v5-ink-3);margin-top:6px}
.fld.is-err input{border-color:#B42318}
.fld__err{margin-top:6px;font-size:13.5px;font-weight:700;color:#B42318}
.cnote{margin-top:16px;padding:14px 16px;border-radius:16px;background:var(--v5-butter-50);font-size:14px;color:var(--v5-ink)}
.cnote p+p{margin-top:6px}
.chk{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-weight:700;cursor:pointer;min-height:44px}
.chk input{flex:none;appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:7px;border:2px solid #B9A66A;background:#fff;margin:0;padding:0;display:grid;place-items:center}
.chk input:checked{background:var(--v5-ink);border-color:var(--v5-ink)}
.chk input:checked::after{content:"";width:10px;height:6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translateY(-1px)}
.chk input:focus-visible{outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.chk input[aria-invalid="true"]{border-color:#B42318}
.co__alert{margin-top:16px;padding:12px 16px;border-radius:14px;background:#FDF0EE;border:1px solid #F2C6BF;font-size:14.5px;font-weight:600;color:var(--v5-ink)}
.co__alert a{margin-left:4px;font-weight:800;color:var(--v5-ink);border-bottom:2px solid var(--v5-orange);text-decoration:none}
.co__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.co__go{height:54px;padding:0 34px;font-size:16.5px}
.co__go[disabled]{background:#D8DEE6;color:#56627A;box-shadow:none;cursor:not-allowed;transform:none}
.co__go[aria-busy="true"]{cursor:progress}
.co__closed{margin-top:4px;padding:22px 24px;border-radius:18px;background:var(--v5-butter-50);display:grid;gap:10px}
.co__closed h3{margin:0;font-size:20px;line-height:1.25;font-weight:800;color:var(--v5-ink)}
.co__closed p{margin:0;font-size:15.5px;line-height:1.55;color:var(--v5-ink-2)}
.co__closed-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.co__done{display:grid;gap:14px;justify-items:start;border-color:var(--v5-green);scroll-margin-top:96px}
.cs,.os{scroll-margin-top:84px}
.osbar[hidden]{display:none!important}
.co__done:focus{outline:0}
.co__done h2{font-size:26px}
.co__done{padding:32px;background:linear-gradient(180deg,var(--v5-green-50),#fff 160px)}
.co__done h2{margin:0}
.co__done-lead{margin:0;font-size:17px;color:var(--v5-ink-2)}
.co__next{list-style:none;counter-reset:next;margin:6px 0 4px;padding:0;display:grid;gap:12px;width:100%}
.co__next li{counter-increment:next;position:relative;display:block;margin:0;padding:14px 16px 14px 64px;border-radius:16px;background:#fff;border:1px solid var(--v5-line);font-size:15.5px;line-height:1.45;color:var(--v5-ink-2)}
.co__next li::before{content:counter(next);position:absolute;left:16px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--v5-ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.co__next b{display:block;color:var(--v5-ink);font-size:16.5px}
@media (max-width:640px){.co__done{padding:22px 18px}.co__done h2{font-size:23px}.co__next li{padding:12px 14px 12px 56px}.co__next li::before{left:14px;top:12px}.co__done .btn{width:100%;justify-content:center}}

/* the order: a compact sticky aside on a desktop */
.os{position:sticky;top:76px;display:grid;gap:10px;max-height:calc(100vh - 88px);overflow:auto;overscroll-behavior:contain}
.os__card{border-radius:var(--v5-r-lg);background:#fff;border:1px solid var(--v5-line);box-shadow:var(--v5-sh-2);padding:18px 20px}
.os__hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.os__card h2{font-size:19px;margin:0}
.os__card h2:focus{outline:0}
.os__x{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--v5-soft);color:var(--v5-ink);place-items:center;cursor:pointer;padding:0}
.os__x .ic{width:18px;height:18px;stroke-width:2.6}
.os__x:focus-visible{outline:3px solid var(--v5-ring,#C94F0D);outline-offset:2px}
.os__lines{list-style:none;margin:10px 0 0;padding:0}
.os__lines li{display:flex;justify-content:space-between;gap:12px;margin:0;padding:6px 0;border-bottom:1px dashed var(--v5-line);font-size:14px;font-weight:600;color:var(--v5-ink-2)}
.os__lines li b{color:var(--v5-ink);white-space:nowrap}
.os__lines li.inc b{color:var(--v5-green);font-size:13px}
.os__due{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.os__due span{font-weight:800;color:var(--v5-ink);font-size:16px}
.os__due b{font-size:30px;line-height:1;letter-spacing:-.035em;color:var(--v5-ink);font-variant-numeric:tabular-nums}
.os__then{font-size:13.5px;line-height:1.45;margin-top:6px}
.os__tot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:9px 12px;border-radius:12px;background:var(--v5-soft);font-size:14px;font-weight:700;color:var(--v5-ink-2)}
.os__tot b{color:var(--v5-ink);white-space:nowrap}
.os__tax{font-size:13px;margin-top:6px}
.os__ticks{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--v5-line);display:grid;gap:6px}
.os__ticks li{display:grid;grid-template-columns:18px 1fr;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--v5-ink-2);line-height:1.4}
.os__ticks .ic{width:16px;height:16px;color:var(--v5-green);stroke-width:2.6;margin-top:1px}
.os__own{margin-top:8px;font-size:12px;line-height:1.45;color:var(--v5-ink-3)}
.os__clean{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;font-weight:800;color:var(--v5-green)}
.os__clean .ic{width:15px;height:15px;stroke-width:3}
.os__links{margin-top:12px;padding-top:10px;border-top:1px solid var(--v5-line);font-size:13px;line-height:1.7;color:var(--v5-ink-3)}
.os__links a,.os__help a{font-weight:800;color:var(--v5-ink);border-bottom:2px solid var(--v5-orange);text-decoration:none}
.os__card[aria-busy="true"] .os__ok{opacity:.55;transition:opacity .15s ease}
.os__fail{margin:12px 0 4px;padding:14px 16px;border-radius:14px;background:#FDF0EE;border:1px solid #F2C6BF;font-size:14px;line-height:1.45;color:var(--v5-ink);display:grid;gap:12px;justify-items:start}
/* the base sheet spaces a button after a paragraph; these two sit in a grid that already does */
.os__fail .btn,.co__done .btn{margin-top:0}
.os__help{text-align:center;font-size:14px}

.osbar,.os__scrim{display:none}

/* phones and tablets: the stages alone, and a bar at the foot that opens the order as a sheet */
@media (max-width:1000px){
  .co__grid{grid-template-columns:minmax(0,1fr)}
  .os{position:static;max-height:none;overflow:visible}
  .co{padding-bottom:96px}
  .co.is-live .os{display:none}
  .co.is-live.is-sheet .os{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:90;max-height:88vh;overflow:auto;padding:10px 10px calc(14px + env(safe-area-inset-bottom));background:#F5F7FA;border-radius:22px 22px 0 0;box-shadow:0 -12px 40px rgba(11,31,51,.22)}
  .co.is-sheet .os__x{display:grid}
  .os__scrim:not([hidden]){display:block;position:fixed;inset:0;z-index:85;background:rgba(11,31,51,.45)}
  .osbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 18px calc(10px + env(safe-area-inset-bottom));background:var(--v5-ink);color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
  .osbar b{font-size:20px;letter-spacing:-.02em;margin-left:6px}
  .osbar__go{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#FFB37A}
  .osbar__go .ic{width:15px;height:15px;transform:rotate(-90deg)}
  .osbar:focus-visible{outline:3px solid #fff;outline-offset:-4px}
  /* no price in hand: the bar shows no label for an amount it does not have */
  .osbar span:has(b:empty){visibility:hidden}
  body.v5-checkout .ftr{padding-bottom:84px}
}
html.co-lock,html.co-lock body{overflow:hidden}

@media (max-width:640px){
  .co{padding:14px 0 92px}
  .co__top{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:14px}
  .co__top h1{font-size:21px}
  .co__steps{justify-content:space-between}
  .co__steps a{height:40px;padding:0 10px 0 4px;font-size:12.5px;gap:6px}
  .cs{padding:16px 14px 18px;border-radius:20px}
  .cs legend{font-size:18px;margin-bottom:14px;gap:2px 10px}
  .cs legend small{flex-basis:100%;margin:0 0 0 40px;font-size:13px}
  .cs__n{width:28px;height:28px;font-size:13.5px}
  /* the confirmation on a phone: words first; the picture is the desktop's */
  .cfm{grid-template-columns:minmax(0,1fr);gap:0;padding:12px 14px}
  .cfm .cp__v{display:none}
  .cfm__b{padding-right:0}
  .cfm__n{font-size:17px;margin:10px 96px 10px 0}
  .cfm__l{grid-template-columns:1fr}
  .cfm__f dt{width:92px}
  .cfm__chg{right:10px;top:10px;padding:0 16px}
  .cpk{grid-template-columns:1fr;gap:8px}
  .cp{flex-direction:row;align-items:center}
  .cp__v{width:96px;height:76px;flex:none}
  .cp__v .bz{width:78px;top:18px}
  .cp__v.v-all .bz{left:50%}
  .cp__v .lg{display:none}
  .cp__v>.cdc{left:5px;bottom:4px;font-size:9px;padding:1px 6px;gap:4px}
  .cp__b{padding:8px 40px 8px 12px}
  .cp__b small{min-height:0}
  .cp__b em{font-size:18px;margin-top:2px}
  .cp__flag{left:8px;top:8px;font-size:9.5px;padding:3px 7px}
  .cpay__o{grid-template-columns:1fr}
  /* the tiles short enough that "No thanks, continue" is on the first screen */
  .cxr{gap:8px}
  .cxi{grid-template-columns:46px minmax(0,1fr) auto;column-gap:10px;padding:7px 8px 7px 7px;min-height:0}
  .cxi__v{width:46px;height:44px;border-radius:10px}
  .cxi__v .lg{width:40px;height:26px;gap:2px;padding:0 3px}
  .cxi__v .lg small{display:none}
  /* the Google Business Profile card: the text lines are unreadable at 46px, so the phone draws the shape alone (a white card, a name bar, a green "open" dot); the laptop drawing is untouched */
  .cxi__v .gcard{position:relative;width:34px;height:26px;padding:0;border-radius:6px}
  .cxi__v .gcard b,.cxi__v .gcard span{display:none}
  .cxi__v .gcard::before{content:"";position:absolute;left:5px;top:6px;width:18px;height:4px;border-radius:2px;background:var(--v5-ink)}
  .cxi__v .gcard::after{content:"";position:absolute;left:5px;bottom:6px;width:9px;height:3px;border-radius:2px;background:var(--v5-green)}
  .cxi__b b{font-size:14.5px}
  .cxi__b small{font-size:12.5px;line-height:1.3}
  .cxi>em{font-size:14px}
  .cxt__btn{min-width:76px;height:44px;padding:0 10px;font-size:13.5px}
  .cf{grid-template-columns:1fr 1fr;gap:12px}
  .fld{grid-column:1/-1}
  .fld--h{grid-column:auto}
  .cs__nav{margin-top:16px}
  .cs__go{flex:1;justify-content:center}
  .cs__nav--end .co__go{flex:1;padding:0 20px}
  .os__due b{font-size:32px}
}
@media (max-width:360px){
  .co__steps a{white-space:normal;line-height:1.15;padding-right:6px}
  .cxi{grid-template-columns:40px minmax(0,1fr) auto}
  .cxi__v{width:40px}
  .cxi>em{white-space:normal}
  .cxt__btn{min-width:0}
  .cfm__l li{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .cp,.co-opt,.cxi,.cxt__btn,.fld input{transition:none}
  .cp:hover{transform:none}
}

/* phones: 44px tap targets for the sign-in link, "Browse all extras" and the form labels (14 October 2026 review) */
@media (max-width:640px){
  .cs__in a,.cx__more .link{display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box}
  .cs__in a{border-bottom:0;text-decoration:underline;text-decoration-color:var(--v5-orange);text-decoration-thickness:2px;text-underline-offset:4px}
  .cs__in{margin-top:4px}
  .cx__more{margin-top:6px}
  .fld>label{display:flex;align-items:flex-end;min-height:44px;margin:0;padding-bottom:6px;box-sizing:border-box}
}