/* Checkout dialog (dist/checkout/*.js) and the payment return page. Uses the tokens in style.css. */
.co{--accent:var(--paper-2);padding:0;border:1.5px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);width:min(1040px,calc(100vw - 32px));max-width:none;height:min(740px,calc(100dvh - 32px));max-height:none;margin:auto;overflow:hidden;box-shadow:10px 10px 0 var(--ink)}
.co[data-plan=website]{--accent:var(--blue)}
.co[open]{display:grid;grid-template-columns:minmax(0,1fr) 340px}
.co::backdrop{background:rgb(17 17 17/.55);backdrop-filter:blur(3px)}
html:has(.co[open]){overflow:hidden}
@media(prefers-reduced-motion:no-preference){.co[open]{animation:co-in .22s ease-out}.co[open]::backdrop{animation:co-fade .22s ease-out}@keyframes co-in{from{opacity:0;transform:translateY(14px) scale(.985)}}@keyframes co-fade{from{opacity:0}}}

.co-main{display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;min-width:0}
.co-top{display:flex;align-items:center;gap:22px;padding:14px 20px 14px 28px;border-bottom:1.5px solid var(--ink)}
.co-brand{font-size:28px}
.co-steps{display:flex;flex-wrap:wrap;gap:6px 20px;list-style:none;margin:0 auto 0 4px;padding:0}
.co-step{display:flex;align-items:center;gap:8px;font:650 13px/1.2 var(--body);color:var(--muted)}
.co-step[aria-current=step]{color:var(--ink)}
.co-num{display:grid;place-items:center;width:24px;height:24px;border:1.5px solid currentColor;font:700 12px/1 var(--body)}
.co-step[aria-current=step] .co-num{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.co-step.is-done{color:var(--ink)}.co-step.is-done .co-num{background:var(--accent);border-color:var(--ink)}
.co-x{display:grid;place-items:center;width:44px;height:44px;background:transparent;font:400 30px/1 var(--body);border-radius:50%}
.co-x:hover{background:var(--paper-2)}

.co-body{overflow:auto;padding:32px 28px 36px;overscroll-behavior:contain}
.co-step-body{display:grid;gap:22px;max-width:640px;align-content:start}
.co-step-body:focus,.co-step-body:focus-visible,.co-h:focus-visible,.co [tabindex="-1"]:focus-visible{outline:0;box-shadow:none}
.co-h{font-size:clamp(26px,3vw,36px);letter-spacing:-.045em;outline:0}
.co-lead{margin-top:-10px;color:var(--ink-soft);font-size:15.5px;line-height:1.55}
.co-fine{font-size:13px;color:var(--muted);line-height:1.5}
.co-fine a{font-weight:650}

.co-fs{margin:0;padding:0;border:0;min-width:0}
.co-fs legend{padding:0;margin-bottom:10px;font:700 1rem/1.25 var(--body)}
.co-billing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.co-billing legend{grid-column:1/-1}
.co-opt{--c:var(--paper-2);position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 16px 14px 20px;border:1.5px solid var(--ink);background:var(--paper-3);cursor:pointer;transition:background .14s,transform .14s,box-shadow .14s}
.co-opt:before{content:'';position:absolute;inset:-1.5px auto -1.5px -1.5px;width:8px;background:var(--c);border:1.5px solid var(--ink)}
.co-opt-wide{--c:var(--ink)}
.co-opt:hover{background:#fff}
.co-opt{padding-right:54px}
.co-opt:after{content:'';position:absolute;right:18px;top:50%;width:22px;height:22px;margin-top:-11px;border:2px solid var(--ink);border-radius:50%;background:#fff;transition:background .14s,box-shadow .14s}
.co-opt:has(input:checked){background:var(--c);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.co-opt:has(input:checked):before{background:var(--ink)}
.co-opt:has(input:checked):after{content:"\2713";display:grid;place-items:center;background:var(--ink);border-color:var(--ink);color:var(--paper);font:800 13px/1 var(--body)}
.co-opt:has(input:checked) .co-opt-price{color:var(--ink);font-weight:600}
.co-opt-wide:has(input:checked){background:var(--ink);color:var(--paper);transform:none;box-shadow:none}
.co-opt-wide:has(input:checked) .co-opt-price{color:var(--paper)}
.co-opt-wide:has(input:checked):after{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.co-opt-wide:has(input:checked):before{background:var(--paper)}
.co-opt:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.co-opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.co-opt-name{font:700 19px/1.2 var(--display);letter-spacing:-.03em}
.co-opt-price{font-size:13.5px;color:var(--ink-soft)}

.co-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.co-opt-tag{font:500 .8125rem/1 var(--body);color:var(--muted)}
.co-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.co-next{min-height:52px;padding:0 26px;font-size:16px}
.co-next svg{width:15px;height:15px}
.co-back,.co-link{background:transparent;min-height:44px;padding:0 6px;margin-inline:-6px;font:650 15px/1.2 var(--body);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;color:var(--ink)}

.co-wait{display:flex;align-items:center;gap:12px;padding:18px 0;font-weight:650;color:var(--ink-soft)}
.co-spin{width:20px;height:20px;border:2.5px solid var(--line);border-top-color:var(--ink);border-radius:50%}
@media(prefers-reduced-motion:no-preference){.co-spin{animation:spin .9s linear infinite}}
.co-stripe{min-height:0;margin-inline:-6px}
.co-problem{display:grid;gap:16px;padding:20px 22px;border:2.5px solid var(--err);background:#fdf3f1}
.co-problem .co-h{font-size:24px}
.co-problem .co-lead{margin:0}
.co-problem .co-actions{margin:0}

.co-done{justify-items:start;gap:18px}
.co-done .co-lead{margin:0;font-size:17px;max-width:46ch}
.co-tick{display:grid;place-items:center;width:64px;height:64px;border:1.5px solid var(--ink);border-radius:50%;background:var(--accent);font:700 30px/1 var(--body)}

.co-side{background:var(--accent);border-left:1.5px solid var(--ink);padding:30px 28px;overflow:auto;transition:background .2s}
.co-sum{display:grid;gap:14px;align-content:start}
.co-kicker{font:700 11px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.co-sum-name{font-size:clamp(34px,4vw,46px)}
.co-sum-tag{font-size:15px}
.co-sum-price{display:grid;gap:2px;padding-block:14px;border-block:1.5px solid var(--ink)}
.co-sum-price strong{font:700 clamp(34px,3.2vw,44px)/1.1 var(--body);letter-spacing:-.03em}
.co-sum-price span{font-size:13.5px}
.co-sum-price small{font-size:12.5px;color:#111c}
.co-sum-price s{font-size:15px;color:#111c;text-decoration-thickness:1.5px;margin-right:8px}
.co-sum-price .co-sum-code{font-weight:650;color:var(--ink)}
.co-sum-list{display:grid;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;line-height:1.45}
.co-sum-list li{position:relative;padding-left:22px}
.co-sum-list li:before{content:'✓';position:absolute;left:0;font-weight:800}
.co-sum-list .co-sum-intro{padding-left:0;font-weight:700}.co-sum-list .co-sum-intro:before{content:none}
.co-sum-foot{font-size:12.5px;line-height:1.5;color:#111c}

.co-voucher-row{display:flex;gap:10px;align-items:stretch}
.co-voucher-in{flex:1 1 auto;min-width:0;text-transform:uppercase}
.co-voucher-in::placeholder{text-transform:none}
.co-apply{flex:none;min-height:48px;padding:0 22px}
.co-voucher-ok{display:none}
.co-voucher.is-applied .co-voucher-row{display:none}
.co-voucher.is-applied .co-voucher-ok{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 16px;border:1.5px solid var(--ink);background:var(--paper-3);font-size:15px}

@media(min-width:821px) and (max-width:1060px){.co[open]{grid-template-columns:minmax(0,1fr) 290px}.co-top{gap:12px;padding-left:20px}.co-steps{gap:6px 12px;margin-left:0}.co-step{gap:6px;font-size:12.5px}.co-body{padding-inline:20px}.co-side{padding-inline:22px}}
@media(max-width:820px){
  .co{width:100vw;height:100dvh;margin:0;border:0;box-shadow:none}
  .co[open]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
  .co-main{display:contents}
  .co-top{grid-row:1;padding:10px 12px 10px 18px;gap:12px}
  .co-brand{font-size:24px}
  .co-step:not([aria-current=step]) .co-lbl{display:none}
  .co-steps{flex-wrap:nowrap;gap:8px;margin-right:auto}
  .co-step{gap:6px;white-space:nowrap}
  .co-side{grid-row:2;padding:14px 18px;border-left:0;border-bottom:1.5px solid var(--ink);overflow:visible}
  .co-sum{grid-template-columns:1fr auto;align-items:center;gap:2px 16px}
  .co-sum>*{margin:0}
  .co-kicker,.co-sum-tag,.co-sum-list,.co-sum-foot{display:none}
  .co-sum-name{font-size:26px}
  .co-sum-price{display:block;padding:0;border:0;text-align:right;grid-row:1/3;grid-column:2}
  .co-sum-price .co-sum-code{display:none}
  .co-sum-price strong{font-size:24px}.co-sum-price span,.co-sum-price small{display:block}
  .co-body{grid-row:3;padding:22px 18px 30px}
  .co-grid,.co-billing{grid-template-columns:1fr}
}

/* the package buttons in the pricing cards stay as they are; this is the return page */
.co-return{max-width:640px;padding-block:clamp(48px,8vw,110px)}
.co-return .co-step-body{max-width:none}


@media(prefers-reduced-motion:reduce){.co-opt{transition:none}}
.co-brand .brand-logo{height:28px}
.co-x{flex:none;min-width:44px}.co-brand{flex:0 1 auto;min-width:0}.co-brand .brand-logo{height:auto;max-height:28px;max-width:100%}
@media(max-width:359px){.co-steps{gap:6px}.co-step[aria-current=step] .co-lbl{display:none}.co-brand{font-size:21px}}