/* Checkout and payment status, built from the home page's design code: the ink header, a paper card with grain and a
   folder tab, and a dark panel with the same anatomy as the price calculator (bar, 2px progress, chips, options, solid button). */
:root{--paper:#E3E1DB;--paper-2:#D9D6CE;--ink:#141412;--ink-2:#55534D;--night:#141412;--night-2:#1E1E1B;--ntext:#E3E1DB;--ntext-2:#9C9A93;--nline:rgba(227,225,219,.18);--nline-2:rgba(227,225,219,.55);
  --line:1.5px;--r:4px;--disp:"Big Shoulders Display","Arial Narrow",sans-serif;--text:"Switzer",system-ui,sans-serif;--mono:"IBM Plex Mono",monospace;--ease:cubic-bezier(.23,1,.32,1);--m:clamp(16px,2.25vw,32px);
  --tab-d:54px;--tab-w:60px;--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .45 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--shoulder:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 56' preserveAspectRatio='none'%3E%3Cpath d='M0 56L0 54C30 54 30 0 60 0L60 56Z'/%3E%3C/svg%3E")}
/* Cyrillic: the same faces the Ukrainian home page uses */
:root[lang=uk]{--disp:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;--text:"Onest",system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--night);-webkit-text-size-adjust:100%}
body{min-width:320px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--night);color:var(--ink);font:400 16px/1.4 var(--text);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.micro{font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ink band with the hero's header */
.co-top{position:relative;padding:var(--m) var(--m) calc(var(--tab-d) + 34px);color:var(--ntext)}
.checkout-header{display:flex;align-items:center;justify-content:space-between;gap:12px;height:44px}
.checkout-logo{display:flex;align-items:center;gap:7px;font:700 22px/1 "Space Grotesk",sans-serif;letter-spacing:-.06em;color:var(--ntext);white-space:nowrap}
.checkout-logo svg{width:34px;height:34px;flex:none}
.checkout-logo .dot{margin-left:-4px}
.header-tools{display:flex;gap:8px}
.back-link{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:var(--line) solid var(--ntext);border-radius:var(--r);font:800 18px/1 var(--disp);text-transform:uppercase;letter-spacing:.01em;color:var(--ntext);white-space:nowrap;transition:background-color .2s var(--ease),color .2s var(--ease)}
.language-switch{display:inline-flex;height:44px;border:var(--line) solid var(--ntext);border-radius:var(--r);font:800 17px/1 var(--disp);overflow:hidden}
.language-switch button{display:flex;align-items:center;padding:0 10px;color:#8d8b84;transition:color .2s}
.language-switch button+button{border-left:var(--line) solid var(--ntext)}
.language-switch button[aria-pressed=true]{color:var(--ntext)}
@media (hover:hover){.back-link:hover{background:var(--ntext);color:var(--night)}.language-switch button:hover{color:var(--ntext)}}

/* paper card with a chapter sticker on its top edge (see the end of this file) */
.co-card{position:relative;flex:1;display:flex;flex-direction:column;background:var(--paper) var(--grain);border-radius:22px 22px 0 0;color:var(--ink)}
.co-card>main{flex:1}

/* intro on the paper, the calculator-style panel beside it */
.co-sec{padding:120px var(--m) 110px}
.co-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,4vw,64px);align-items:start;max-width:1180px;margin:0 auto}
.co-intro{grid-column:1;grid-row:1}
.co-panel{grid-column:2;grid-row:1/span 2}
.co-kick{display:inline-flex;align-items:center;gap:10px}
.co-kick i{width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none;animation:co-bl 1.4s steps(2) infinite}
@keyframes co-bl{50%{opacity:.2}}
.co-sec h1{font:900 clamp(64px,7vw,112px)/.86 var(--disp);text-transform:uppercase;margin:24px 0 18px}
.co-sec h1 span{white-space:nowrap}
.lede{font:400 clamp(17px,1.4vw,20px)/1.4 var(--text);color:var(--ink-2);max-width:26em;text-wrap:pretty}

/* the panel */
.co-panel{background:var(--night);color:var(--ntext);border:var(--line) solid var(--ink);border-radius:6px;overflow:hidden;display:flex;flex-direction:column}
.co-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:52px;padding:0 22px;color:var(--ntext-2)}
.co-count::before{content:"01 / 03"}
.co-panel:has([data-flow-step="2"][aria-current]) .co-count::before{content:"02 / 03"}
.co-panel:has([data-flow-step="3"][aria-current]) .co-count::before{content:"03 / 03"}
/* the three steps read as the calculator's 2px progress line; their names stay for screen readers */
.checkout-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:2px;background:var(--nline)}
.checkout-steps li{position:relative;overflow:hidden}
.checkout-steps li>*{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.checkout-steps li::before{content:"";position:absolute;inset:0;background:var(--ntext);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.checkout-steps li[aria-current=step]::before,.checkout-steps li.is-complete::before{transform:none}
.co-body{display:grid;gap:30px;padding:30px 30px 28px}
.order-label{color:var(--ntext-2)}
.price-row{display:flex;align-items:flex-end;gap:10px;margin:14px 0 18px}
.order-price{font:900 112px/.82 var(--disp);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.order-price::first-letter{font:800 40px/1 var(--disp);color:var(--ntext-2);vertical-align:top;margin-right:6px}
.usd-tag{font:500 12px/1 var(--mono);letter-spacing:.05em;color:var(--ntext-2);margin-bottom:8px}
/* the session as the calculator's chips */
.order-specs{display:flex;flex-wrap:wrap;gap:6px;font:400 15px/1.4 var(--text);color:var(--ntext-2)}
.order-specs>div{border:var(--line) solid var(--nline);border-radius:999px;padding:5px 11px;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ntext)}
.order-specs>div>span:first-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.conversion-note{display:none!important}
.empty-session{display:grid;gap:18px;justify-items:start;font:400 17px/1.45 var(--text)}
.co-body:has(>.empty-session:not([hidden]))>.order-ticket{display:none}
#payment-form{display:grid;gap:24px}
.checkout-field label,.methods legend{display:block;margin-bottom:10px;padding:0;font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ntext-2)}
.checkout-field input{width:100%;height:52px;padding:0 16px;background:var(--night-2);border:var(--line) solid var(--nline);border-radius:var(--r);color:var(--ntext);font:400 17px/1 var(--text);outline:0;transition:border-color .2s}
.checkout-field input::placeholder{color:#8d8b84}
.checkout-field input:focus{border-color:var(--ntext)}
.checkout-field input:focus-visible{outline:2px solid var(--ntext);outline-offset:2px}
.checkout-field p{margin-top:8px;font:400 13px/1.45 var(--text);color:var(--ntext-2)}
/* promo code: the email field with an outline button on the end; a used code shows the old price struck through */
.promo-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.promo-row input{text-transform:uppercase;font:500 15px/1 var(--mono);letter-spacing:.05em}
.promo-row input::placeholder{text-transform:none}
.promo-apply{height:52px;padding:0 18px;border:var(--line) solid var(--ntext);border-radius:var(--r);color:var(--ntext);font:800 20px/1 var(--disp);text-transform:uppercase;transition:background-color .2s,color .2s}
.promo-apply:disabled{opacity:.6;cursor:progress}
@media (hover:hover){.promo-apply:hover{background:var(--ntext);color:var(--night)}}
.checkout-field .promo-note.ok{color:var(--ntext)}
.checkout-field .promo-note.bad{color:#f2b3a5}
.old-price{margin:0 0 4px 6px;font:800 40px/1 var(--disp);color:var(--ntext-2);text-decoration:line-through;text-decoration-thickness:3px;font-variant-numeric:tabular-nums}
.order-specs>div.promo-chip{border-color:var(--ntext)}
/* payment methods as the calculator's options; the box at the end marks the chosen one */
.methods{border:0;display:grid;gap:8px;min-width:0}
.method-card{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) 34px;gap:14px;align-items:center;padding:14px 16px;border:var(--line) solid var(--nline);border-radius:var(--r);cursor:pointer;transition:border-color .2s,background-color .2s}
.method-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.method-no{font:500 11px/1 var(--mono);color:var(--ntext-2)}
.method-copy strong{display:block;font:800 20px/1 var(--disp);text-transform:uppercase}
.method-copy small{display:block;margin-top:5px;font:400 14px/1.4 var(--text);color:var(--ntext-2)}
.method-mark{width:34px;height:34px;border:var(--line) solid var(--nline);border-radius:var(--r);display:grid;place-items:center;color:transparent;transition:background-color .2s,color .2s,border-color .2s}
.method-mark svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.method-card:has(input:checked){border-color:var(--ntext)}
.method-card:has(input:checked) .method-mark{background:var(--ntext);border-color:var(--ntext);color:var(--night)}
.method-card:has(input:focus-visible){outline:2px solid var(--ntext);outline-offset:2px}
@media (hover:hover){.method-card:hover{border-color:var(--nline-2);background:var(--night-2)}}
.payment-context{font:400 14px/1.45 var(--text);color:var(--ntext-2);text-wrap:pretty}
.payment-context:empty{display:none}
.payment-quote,.payoneer-request{display:grid;gap:10px;padding:18px 20px;background:var(--night-2);border:var(--line) solid var(--nline);border-radius:6px}
.payment-quote h2,.payoneer-request h2{color:var(--ntext-2)}
#payment-amount{font:900 56px/.9 var(--disp);font-variant-numeric:tabular-nums}
.payment-quote p,.payoneer-request p{font:400 14px/1.45 var(--text);color:var(--ntext-2)}
#request-body{width:100%;padding:12px 14px;background:var(--night);border:var(--line) solid var(--nline);border-radius:var(--r);color:var(--ntext);font:400 13px/1.55 var(--mono);resize:vertical}
.empty-session-link{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px;border:var(--line) solid var(--ntext);border-radius:var(--r);color:var(--ntext);font:800 20px/1 var(--disp);text-transform:uppercase;justify-self:start;transition:background-color .2s,color .2s}
.payment-error{padding:12px 14px;border:var(--line) solid #e0806b;border-radius:var(--r);background:rgba(224,128,107,.08);color:#f2b3a5;font:400 14px/1.45 var(--text)}
.checkout-contract{display:grid;gap:10px}
.checkout-agreement{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;font:400 15px/1.45 var(--text);cursor:pointer}
.checkout-agreement input{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;border:var(--line) solid var(--ntext);border-radius:3px;display:grid;place-items:center;background:transparent;cursor:pointer;transition:background-color .15s}
.checkout-agreement input::after{content:"";width:12px;height:12px;background:var(--night);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 24%,86% 10%,38% 72%);transform:scale(0);transition:transform .15s var(--ease)}
.checkout-agreement input:checked{background:var(--ntext)}
.checkout-agreement input:checked::after{transform:none}
.checkout-agreement a,[data-legal-privacy] a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
[data-legal-privacy]{font:400 13px/1.45 var(--text);color:var(--ntext-2)}
/* the one solid action: the calculator's button */
.checkout-button{display:inline-flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:0 20px;border:var(--line) solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--paper);font:800 22px/1 var(--disp);text-transform:uppercase;text-align:start;transition:background-color .2s,color .2s}
.checkout-button .button-arrow{display:flex}
.co-panel .checkout-button{justify-self:start;border-color:var(--ntext);background:var(--ntext);color:var(--night)}
.checkout-button:disabled{opacity:.6;cursor:progress}
@media (hover:hover){.checkout-button:hover{background:transparent;color:var(--ink)}.co-panel .checkout-button:hover{background:transparent;color:var(--ntext)}.empty-session-link:hover{background:var(--ntext);color:var(--night)}}
.payment-next{font:400 13px/1.45 var(--text);color:var(--ntext-2);margin-top:-10px}
.payment-next:empty{display:none}
.co-foot{display:flex;align-items:center;min-height:52px;padding:12px 22px;border-top:var(--line) solid var(--nline);color:var(--ntext-2)}
.payment-contact{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;width:100%}
.payment-contact a{display:inline-flex;align-items:center;gap:8px;color:var(--ntext)}
.payment-contact .ic{width:12px;height:12px}
@media (hover:hover){.payment-contact a:hover{text-decoration:underline;text-underline-offset:3px}}

/* payment status page */
.co-status{max-width:1180px;margin:0 auto}
.co-status .lede{max-width:34em;margin-bottom:30px}
.co-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.co-link{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.co-link span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.co-link .ic{width:12px;height:12px}

/* footer: the home page's footer at the bottom of the card */
.checkout-footer{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin:0 var(--m);padding:22px 0 32px;border-top:var(--line) solid var(--ink);font:500 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.checkout-footer-nav{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center}
.checkout-footer-copy{color:var(--ink-2)}
@media (hover:hover){.checkout-footer-nav a:hover{text-decoration:underline;text-underline-offset:3px}}

/* Ukrainian: Roboto Condensed runs wider than Big Shoulders, so the display sizes come down as on the home page */
html[lang=uk] .co-sec h1{font-size:clamp(40px,5.4vw,86px);letter-spacing:-.01em}
html[lang=uk] .order-price{font-size:92px}
html[lang=uk] .method-copy strong{font-size:18px}
html[lang=uk] .checkout-button,html[lang=uk] .back-link,html[lang=uk] .empty-session-link,html[lang=uk] .promo-apply{font-size:18px}

@media (max-width:980px){
  :root{--tab-d:46px;--tab-w:44px}
  .co-top{padding-bottom:calc(var(--tab-d) + 28px)}
  .co-card{border-radius:0}
  .co-sec{padding:72px 16px 64px}
  .co-grid{grid-template-columns:1fr;grid-template-rows:none;row-gap:32px}
  .co-intro,.co-panel{grid-column:1;grid-row:auto}
  .co-sec h1{font-size:clamp(40px,13vw,72px)}
  html[lang=uk] .co-sec h1{font-size:clamp(34px,10.5vw,60px)}
  .co-bar{padding:0 16px}
  .co-body{padding:24px 18px 22px;gap:26px}
  .order-price{font-size:96px}
  html[lang=uk] .order-price{font-size:80px}
  .old-price{font-size:32px}
  .method-card{grid-template-columns:28px minmax(0,1fr) 34px;gap:10px;padding:12px}
  .co-panel .checkout-button{justify-self:stretch}
  .co-foot{padding:12px 16px}
  .checkout-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin:0 16px;padding:0 0 24px}
  .checkout-footer-brand{grid-column:1/-1;padding:18px 0;border-bottom:var(--line) solid var(--ink)}
  .checkout-footer-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .checkout-footer-nav a{padding:14px 0;border-bottom:var(--line) solid var(--ink)}
  .checkout-footer-nav a:nth-child(odd){padding-right:12px;border-right:var(--line) solid var(--ink)}
  .checkout-footer-nav a:nth-child(even){padding-left:14px}
  .checkout-footer-copy{grid-column:1/-1;padding-top:16px}
}
/* phones: the back link shows only its arrow so the header fits one row */
@media (max-width:600px){.back-link{width:44px;padding:0;justify-content:center}.back-link span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.co-kick i{animation:none}.checkout-steps li::before{transition:none}}

/* chapter sticker (replaces the folder tab), same as the landing's: centred on the card's top line, tilted */
.co-card>.stk{position:absolute;z-index:8;left:50%;top:0;transform:translate(-50%,-50%) rotate(-3deg);pointer-events:none}
.co-card>.stk svg{display:block;overflow:visible}
.co-card>.stk svg *{vector-effect:non-scaling-stroke}
.co-card>.stk .halo,.co-card>.stk .halo *{stroke:#E3E1DB!important;stroke-width:10px!important;fill:#E3E1DB!important;stroke-linejoin:round!important;stroke-linecap:round!important}
:root[lang=uk] .co-card>.stk .l-en,:root:not([lang=uk]) .co-card>.stk .l-uk{display:none}
.co-card>.stk .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ≤359px: smaller logo and tighter tools so the language switch keeps the 16px gutter (as on the landing) */
@media (max-width:359px){.checkout-logo{font-size:20px;gap:6px}.checkout-logo svg{width:28px;height:28px}.header-tools{gap:6px}.back-link{width:40px}.language-switch button{padding:0 8px}}

/* package: what's included, free one-shots and delivery time (left column, under the intro) */
.co-pack{margin-top:44px;max-width:31rem;border-top:var(--line) solid var(--ink);padding-top:18px}
.co-pack[hidden]{display:none}
.co-pack-h{display:flex;justify-content:space-between;gap:16px;margin:0 0 14px;color:var(--ink-2)}
.co-inc{list-style:none;margin:0;padding:0}
.co-inc li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;padding:11px 0;border-bottom:var(--line) solid rgba(20,20,18,.14);font:400 16px/1.4 var(--text);color:var(--ink)}
.co-inc li[hidden]{display:none}
.co-inc small{display:block;font-size:14px;color:var(--ink-2)}
.co-ck{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper)}
.co-ck svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2}
.co-tag{font:500 12px/1.9 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.co-opt{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:22px;padding:14px 16px;border:var(--line) solid rgba(20,20,18,.25);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background-color .15s}
.co-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.co-opt b{display:block;font:600 16px/1.3 var(--text);color:var(--ink)}
.co-opt small{display:block;margin-top:2px;font:400 14px/1.35 var(--text);color:var(--ink-2)}
.co-opt-p{font:800 24px/1 var(--disp);text-transform:uppercase;color:var(--ink)}
.co-box{width:34px;height:34px;display:grid;place-items:center;border:var(--line) solid var(--ink);border-radius:var(--r);color:transparent}
.co-box svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.co-opt:has(input:checked){border-color:var(--ink);background:rgba(20,20,18,.05)}
.co-opt:has(input:checked) .co-box{background:var(--ink);color:var(--paper)}
.co-opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.co-time{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0;padding:0;border:0;min-width:0}
.co-time label{position:relative;display:grid;gap:6px;align-content:start;padding:16px 18px;border:var(--line) solid rgba(20,20,18,.22);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s}
.co-time input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.co-time .micro{color:var(--ink-2)}
.co-time b{font:800 32px/1 var(--disp);text-transform:uppercase}
.co-time-p{font:500 13px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase}
.co-time label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--paper)}
.co-time label:has(input:checked) .micro{color:rgba(227,225,219,.65)}
.co-time label:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){.co-opt:hover,.co-time label:hover{border-color:var(--ink)}}
@media (max-width:980px){.co-pack{max-width:none}}
@media (max-width:600px){.co-pack{margin-top:32px}.co-time b{font-size:28px}.co-opt{grid-template-columns:34px minmax(0,1fr);align-items:start}.co-opt-p{grid-column:2;font-size:20px}}
@media (max-width:359px){.co-time label{padding:14px}.co-time b{font-size:22px}}