/* checkout.css: the checkout funnel (Contact, Payment, Targeting, Login, Done). Built 2026-09-09 from the board's
   ck.css after five rounds with Dmitry (record: docs/mockups/[C] Checkout funnel board (2026-09-08)/). Wears the brand
   sheet (og-brand.css) through the --b-* tokens; nothing typed twice. The stub payment panel (.ck-stub) and the
   in-page error line (.ck-pay-err) are the two additions the product needs that the board did not. */
body.ck{margin:0;min-height:100vh;display:flex;flex-direction:column;background:#fff;color:var(--b-ink);font:400 16px/1.6 var(--b-font);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* a short step keeps the footer at the bottom of the window instead of floating mid-screen */
body.ck .ck-main{flex:1 0 auto;width:100%}
body.ck *,body.ck *:before,body.ck *:after{box-sizing:border-box}
body.ck [hidden]{display:none!important}
body.ck a{color:inherit}
body.ck a.b-btn,body.ck .b-btn{color:#fff}
body.ck img{max-width:100%;height:auto}
body.ck ::selection{background:var(--b-wash)}
body.ck :focus-visible{outline:2px solid var(--b-blue);outline-offset:3px;border-radius:4px}
body.ck .ck-field select:focus,body.ck .ck-field select:focus-visible,body.ck .ck-field input:focus,body.ck .ck-field input:focus-visible,body.ck .ck-box textarea:focus,body.ck .ck-box textarea:focus-visible,body.ck .ck-chips input:focus,body.ck .ck-chips input:focus-visible{outline:none;box-shadow:none}
body.ck input{caret-color:var(--b-blue)}

/* ---- the focused chrome: logo, the lock, log in ---- */
.ck-top{position:sticky;top:0;z-index:20;height:64px;border-bottom:1px solid var(--b-line);background:#fff}
.ck-top-in{max-width:1320px;height:100%;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.ck-top-l{display:flex;align-items:center;gap:14px;min-width:0}
/* the segments: four thin bars under the bar on one column (phones, tablets); the desktop keeps the rail */
.ck-seg{display:none}
.ck-top-brand{display:inline-flex;line-height:0}
.ck-top-brand img{width:190px;height:23px}
.ck-top-lock{display:inline-flex;align-items:center;gap:7px;font:400 var(--b-small)/1 var(--b-font);color:var(--b-mute);white-space:nowrap}
.ck-top-lock svg{width:15px;height:15px;stroke:var(--b-mute);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-top-login{justify-self:end;font:400 var(--b-small)/1 var(--b-font);color:var(--b-mute);text-decoration:none}
.ck-top-login:hover{color:var(--b-ink);text-decoration:underline;text-underline-offset:2px}
.ck-foot{padding:12px 20px 12px;text-align:center;font:400 var(--b-micro)/1.5 var(--b-font);color:var(--b-mute2)}
.ck-foot a{color:var(--b-mute);text-decoration:none;margin:0 7px}
.ck-foot a:hover{color:var(--b-ink);text-decoration:underline;text-underline-offset:2px}

/* ---- the page ---- */
.ck-main{max-width:1320px;margin:0 auto;padding:26px 20px 30px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
/* sticky top = the bar (64) + the page's top padding (26) = the column's resting spot, so it never moves and never slides under the bar (his round-5 video) */
.ck-side{position:sticky;top:90px;display:grid;gap:12px;min-width:0}
.ck-flow{min-width:0;max-width:680px;justify-self:start;width:100%}

/* ---- the rail: the sheet's numeral disc, four of them, one line ---- */
.ck-rail{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:0 10px}
.ck-rail li{display:flex;align-items:center;gap:9px;font:var(--b-label-w) var(--b-label)/1 var(--b-font);letter-spacing:var(--b-label-ls);text-transform:uppercase;color:var(--b-mute2);white-space:nowrap}
.ck-rail li{font:600 13px/1 var(--b-font);letter-spacing:0;text-transform:none;color:var(--b-mute2);gap:10px}
.ck-rail li i{display:grid;place-items:center;box-sizing:border-box;width:28px;height:28px;flex:0 0 28px;border-radius:50%;background:#fff;border:1.5px solid var(--b-line);color:var(--b-mute2);font-style:normal;transition:border-color 200ms var(--b-ease),background-color 200ms var(--b-ease),color 200ms var(--b-ease)}
.ck-rail li i em{display:grid;place-items:center;line-height:0}
.ck-rail li i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-rail li i .ck-ri-t{display:none}
.ck-rail li.is-now{color:var(--b-ink)}
.ck-rail li.is-now i{border-color:var(--b-blue);background:var(--b-blue);color:#fff}
.ck-rail li.is-done{color:var(--b-ink)}
.ck-rail li.is-done i{border-color:var(--b-blue);background:var(--b-blue);color:#fff}
.ck-rail li.is-done i .ck-ri-g{display:none}.ck-rail li.is-done i .ck-ri-t{display:grid}
.ck-rail li.is-done i svg{stroke-width:3}
.ck-rail hr{height:2px;border:0;margin:0;background:var(--b-line);border-radius:2px;transition:background-color 200ms var(--b-ease)}
.ck-rail hr.is-done{background:var(--b-blue)}
.ck-rail-phone{display:none}


/* long / short copy sets: desktop long, phones short, the narrowest phones shortest */
.ck-s,.ck-xs{display:none}
/* the done screen: the column has nothing left to do, the flow centres */
body.ck-nocol .ck-main{display:block;max-width:640px}
body.ck-nocol .ck-side{display:none}
body.ck-nocol .ck-flow{max-width:none}
.ck-after{margin-top:22px}

/* ---- a step ---- */
.ck-step{display:none}
.ck-step.is-on{display:block;animation:ck-in 220ms var(--b-ease) both}
@keyframes ck-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ck-h{margin:0;font:700 var(--b-h3)/var(--b-h3-lh) var(--b-font);letter-spacing:var(--b-h3-ls);color:var(--b-ink)}
.ck-h .ck-brk{display:none}
.ck-sub{margin:8px 0 0;font:400 var(--b-sub)/1.5 var(--b-font);color:var(--b-mute)}
.ck-sub .ck-sl{display:block}
.ck-sub .ck-sl.ck-s,.ck-sub .ck-sl.ck-xs{display:none}
.ck-fields{display:grid;gap:18px;margin-top:26px}
.ck-lab{display:block;margin:0 0 10px;font:700 15px/1.35 var(--b-font);color:var(--b-ink)}
.ck-lab>b{display:block;font-weight:700}
.ck-lab>b i{font-style:normal;font-size:15px;margin-right:7px}
.ck-lab>b .ck-s{display:none}
@media(max-width:991px){.ck-lab>b .ck-l{display:none!important}.ck-lab>b .ck-s{display:inline}}
.ck-lab small{display:block;margin-top:3px;font:400 13px/1.45 var(--b-font);color:var(--b-mute)}
.ck-lab small b{display:inline;font-weight:700;color:var(--b-ink)}
/* one sentence per span, never split across lines: inline-block wraps as a unit */
.ck-hl,.ck-ns{display:inline-block}
.ck-lab em{font-style:normal;font-weight:400;color:var(--b-mute2)}
.ck-fields{gap:22px}
.ck-step[data-step="2"] .ck-fields{gap:18px;margin-top:22px}
.ck-field{display:flex;align-items:center;gap:6px;height:52px;padding:0 16px;border:1px solid var(--b-line);border-radius:var(--b-inner-r);background:#fff;transition:border-color 160ms,box-shadow 160ms}
.ck-field:focus-within{border-color:var(--b-blue);box-shadow:0 0 0 3px rgba(0,152,254,.16)}
.ck-field .ck-at{font:600 17px/1 var(--b-font);color:var(--b-mute2)}
.ck-field input{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;background:none;padding:0;font:400 16px/1.2 var(--b-font);color:var(--b-ink);outline:0}
.ck-field input::placeholder{color:var(--b-mute2);opacity:1}
.ck-field .ck-eye{flex:none;width:36px;height:36px;margin-right:-8px;display:grid;place-items:center;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--b-mute)}
.ck-field .ck-eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ck-field .ck-eye:hover{color:var(--b-ink);background:var(--b-tile)}
.ck-box{min-height:52px;padding:10px 16px;border:1px solid var(--b-line);border-radius:var(--b-inner-r);background:#fff;transition:border-color 160ms,box-shadow 160ms}
.ck-box:focus-within{border-color:var(--b-blue);box-shadow:0 0 0 3px rgba(0,152,254,.16)}
.ck-box textarea{display:block;width:100%;border:0;background:none;padding:0;font:400 16px/1.5 var(--b-font);color:var(--b-ink);outline:0;resize:vertical;min-height:72px}
.ck-box textarea::placeholder{color:var(--b-mute2);opacity:1}
.ck-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ck-help{margin:8px 0 0;font:400 13px/1.45 var(--b-font);color:var(--b-mute)}
.ck-help b{color:var(--b-ink);font-weight:600}

/* the business picker: the system control inside our field (his call: the Apple picker on the phone, the system menu on the Mac) */
.ck-select{padding-right:14px}
.ck-select select{flex:1 1 auto;min-width:0;width:100%;height:100%;border:0;background:none;padding:0;margin:0;font:400 16px/1.2 var(--b-font);color:var(--b-ink);outline:0;appearance:none;-webkit-appearance:none;cursor:pointer}
.ck-select select.is-empty{color:var(--b-mute2)}
.ck-select svg{width:18px;height:18px;flex:none;stroke:var(--b-mute);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ck-select:focus-within{border-color:var(--b-blue);box-shadow:0 0 0 3px rgba(0,152,254,.16)}

/* ---- chips: type, Enter, a chip ---- */
.ck-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:52px;padding:8px 10px;border:1px solid var(--b-line);border-radius:var(--b-inner-r);background:#fff;cursor:text;transition:border-color 160ms,box-shadow 160ms}
.ck-chips:focus-within{border-color:var(--b-blue);box-shadow:0 0 0 3px rgba(0,152,254,.16)}
.ck-chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 6px 0 12px;border-radius:var(--b-pill);background:var(--b-tile);border:1px solid var(--b-line);font:600 14px/1 var(--b-font);color:var(--b-ink);white-space:nowrap;animation:ck-chip-in 180ms var(--b-ease) both}
@keyframes ck-chip-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.ck-chip.is-ok{border-color:#cfe9ff;background:var(--b-wash)}
.ck-chip .ck-chip-tick{width:14px;height:14px;flex:none;border-radius:50%;background:var(--b-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/8px no-repeat}
.ck-chip button{width:24px;height:24px;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;color:var(--b-mute)}
.ck-chip button svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.ck-chip button:hover{background:#fff;color:var(--b-ink)}
.ck-chips input{flex:1 1 120px;min-width:80px;height:34px;border:0;background:none;padding:0 6px;font:400 16px/1.2 var(--b-font);color:var(--b-ink);outline:0}
.ck-chips input::placeholder{color:var(--b-mute2);opacity:1}
.ck-add{flex:none;height:32px;padding:0 12px;border:0;border-radius:var(--b-pill);background:var(--b-ink);color:#fff;font:600 13px/1 var(--b-font);cursor:pointer;transition:transform 160ms var(--b-ease)}
.ck-add:active{transform:scale(.97)}
.ck-chip-err{margin:8px 0 0;font:400 13px/1.45 var(--b-font);color:#b42318}

/* ---- three pills for one choice ---- */
.ck-pills{display:flex;flex-wrap:wrap;gap:8px}
.ck-pill{display:inline-flex;align-items:center;justify-content:center;height:var(--b-chip-h);padding:0 var(--b-chip-px);border:1px solid var(--b-line);border-radius:var(--b-pill);background:#fff;color:var(--b-ink);font:600 var(--b-chip-fs)/1 var(--b-font);white-space:nowrap;cursor:pointer;transition:transform 160ms var(--b-ease),border-color 160ms,background-color 160ms,color 160ms}
.ck-pill:active{transform:scale(.97)}
.ck-pill[aria-pressed="true"]{background:var(--b-ink);border-color:var(--b-ink);color:#fff}
.ck-reveal{display:none;margin-top:12px}
.ck-reveal.is-on{display:block;animation:ck-in 200ms var(--b-ease) both}

/* ---- the plan row ---- */
.ck-plan{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;padding:14px 16px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r)}
.ck-plan b{font:700 var(--b-title)/1.3 var(--b-font);letter-spacing:var(--b-title-ls);color:var(--b-ink)}
.ck-plan b em{font-style:normal;font-weight:600;color:var(--b-link);font-size:12px;letter-spacing:0;margin-left:8px;vertical-align:2px}
.ck-plan span{font:400 var(--b-small)/1.4 var(--b-font);color:var(--b-mute)}
.ck-plan strong{grid-column:2;grid-row:1;font:700 var(--b-num-m)/1 var(--b-font);letter-spacing:var(--b-num-m-ls);color:var(--b-ink);white-space:nowrap}
.ck-plan strong small{font:400 13px/1 var(--b-font);letter-spacing:0;color:var(--b-mute)}
.ck-plan button{grid-column:2;grid-row:2;justify-self:end;border:0;background:none;padding:0;font:400 var(--b-small)/1 var(--b-font);color:var(--b-mute);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ck-plan button:hover{color:var(--b-ink)}
/* the plan options stay open on Payment (round 5: "so people may go for a better package here") */
.ck-plans{display:block;border:1px solid var(--b-line);border-radius:var(--b-inner-r);overflow:hidden}
.ck-plans label{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 16px;border-top:1px solid var(--b-line);cursor:pointer;background:#fff;transition:background-color 160ms}
.ck-plans label:first-child{border-top:0}
.ck-plans label:has(input:checked){background:var(--b-wash)}
.ck-plans input{appearance:none;width:18px;height:18px;margin:0;border:2px solid var(--b-line);border-radius:50%;background:#fff;transition:border-color 160ms,box-shadow 160ms}
.ck-plans input:checked{border-color:var(--b-blue);box-shadow:inset 0 0 0 4px #fff;background:var(--b-blue)}
.ck-plans .ck-plans-t{min-width:0}
.ck-plans .ck-plans-t b{display:block;font:700 15px/1.3 var(--b-font);color:var(--b-ink)}
.ck-plans .ck-plans-t b em{font-style:normal;font-weight:600;color:var(--b-link);font-size:12px;margin-left:8px}
.ck-plans .ck-plans-t>span{display:block;font:400 13px/1.4 var(--b-font);color:var(--b-mute)}
.ck-plans .ck-plans-t>span>span{display:none}
.ck-plans .ck-plans-t>span>.ck-l{display:inline}
@media(max-width:991px){.ck-plans .ck-plans-t>span>.ck-l{display:none}.ck-plans .ck-plans-t>span>.ck-s{display:inline}}
@media(max-width:359px){.ck-plans .ck-plans-t>span>.ck-s{display:none}.ck-plans .ck-plans-t>span>.ck-xs{display:inline}}
.ck-plans strong{font:700 18px/1 var(--b-font);letter-spacing:-.3px;white-space:nowrap}
.ck-plans strong small{font:400 12px/1 var(--b-font);letter-spacing:0;color:var(--b-mute)}

/* ---- the payment ---- */
.ck-pay{margin-top:12px}
.ck-express{margin:0 0 14px;min-height:0}
.ck-express:empty{display:none}
.ck-or{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:0 0 14px;font:400 13px/1 var(--b-font);color:var(--b-mute2)}
.ck-or:before,.ck-or:after{content:"";height:1px;background:var(--b-line)}
.ck-or.is-off{display:none}
.ck-pe{min-height:120px}
.ck-due{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--b-line)}
.ck-due span{font:400 15px/1.4 var(--b-font);color:var(--b-mute)}
.ck-due b{font:700 var(--b-num-m)/1 var(--b-font);letter-spacing:var(--b-num-m-ls);color:var(--b-ink);white-space:nowrap}
.ck-secure{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin:14px 0 0;font:400 13px/1.4 var(--b-font);color:var(--b-mute)}
.ck-secure span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ck-secure svg{width:14px;height:14px;stroke:var(--b-mute);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-secure .ck-stripe{font-weight:700;color:var(--b-mute);letter-spacing:-.2px}

/* ---- actions ---- */
.ck-act{display:grid;justify-items:center;gap:10px;margin-top:26px}
.ck-act .b-btn{width:100%;min-width:0}
.ck-act .b-btn.is-busy{pointer-events:none;filter:none;opacity:.85}
.ck-act .b-btn.is-busy:after{content:"";width:16px;height:16px;margin-left:10px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:ck-spin 700ms linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
/* Back: in the bar, left of the logo, where people look first (round 5, his Outfame video) */
.ck-back{display:inline-flex;align-items:center;gap:2px;margin:0 0 0 -6px;padding:6px 8px 6px 4px;border:0;border-radius:8px;background:none;font:600 14px/1 var(--b-font);color:var(--b-mute);cursor:pointer;transition:color 160ms,background-color 160ms,transform 160ms var(--b-ease)}
.ck-back svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-back:hover{color:var(--b-ink);background:var(--b-tile)}
.ck-back:active{transform:scale(.97)}
.ck-note{margin:14px 0 0;font:400 13px/1.5 var(--b-font);color:var(--b-mute)}
.ck-note a{color:var(--b-mute);text-decoration:underline;text-underline-offset:2px}
.ck-consent{margin-top:12px;text-align:center}
.ck-check{display:flex;gap:10px;align-items:flex-start;margin-top:4px;font:400 14px/1.5 var(--b-font);color:var(--b-body)}
.ck-check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--b-blue);flex:0 0 18px}
/* two badges on one line above the first button (desktop): cancel anytime, nothing charged here (round 5, "two badges on one line") */
.ck-assure{margin:-4px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ck-assure li{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:44px;padding:0 12px;border-radius:22px;background:var(--b-tile);border:1px solid var(--b-line);font:600 13px/1 var(--b-font);color:var(--b-ink);white-space:nowrap}
.ck-assure li svg{width:14px;height:14px;flex:none;stroke:var(--b-blue);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ck-guar{display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:12px 14px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r);font:400 14px/1.45 var(--b-font);color:var(--b-body)}
.ck-guar i{display:inline-grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--b-blue);color:var(--b-blue);font:700 12px/1 var(--b-font);font-style:normal}
.ck-guar b{font-weight:600;color:var(--b-ink)}
.ck-guar i svg{width:12px;height:12px;stroke:var(--b-blue);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- the video card beside the backup codes ---- */
.ck-video{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:14px;margin-top:12px;padding:12px 14px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r);text-decoration:none}
.ck-video i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--b-ink);color:#fff}
.ck-video i svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.ck-video b{display:block;font:700 15px/1.3 var(--b-font);color:var(--b-ink)}
.ck-video span{display:block;margin-top:2px;font:400 13px/1.4 var(--b-font);color:var(--b-mute)}
.ck-video:hover i{background:#1a1a1a}

/* ---- Login: why, the two-factor question, the video beside the path, codes typed or a screenshot ---- */
.ck-why{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;margin-top:22px;padding:12px 14px;background:var(--b-wash);border:1px solid #cfe9ff;border-radius:var(--b-inner-r);font:400 14px/1.5 var(--b-font);color:var(--b-body)}
.ck-why i{display:grid;place-items:center;width:24px;height:24px;margin-top:1px;border-radius:50%;background:#fff;border:2px solid var(--b-blue);color:var(--b-blue);font:700 12px/1 var(--b-font);font-style:normal}
.ck-why b{color:var(--b-ink);font-weight:600}
.ck-2fa{display:none}
.ck-2fa.is-on{display:grid;gap:14px;animation:ck-in 200ms var(--b-ease) both}
.ck-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.ck-vid{position:relative;display:block;width:100%;aspect-ratio:16/9;margin:0;padding:0;border:1px solid var(--b-line);border-radius:var(--b-inner-r);overflow:hidden;background:#010101;cursor:pointer}
.ck-vid img{display:block;width:100%;height:100%;object-fit:cover;opacity:.92}
.ck-vid i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#fff;box-shadow:var(--b-shadow-float);display:grid;place-items:center;transition:transform 160ms var(--b-ease)}
.ck-vid i svg{width:18px;height:18px;fill:var(--b-ink);margin-left:3px}
.ck-vid:active i{transform:scale(.97)}
.ck-vid em{position:absolute;left:10px;bottom:10px;padding:4px 8px;border-radius:999px;background:rgba(1,1,1,.7);color:#fff;font:600 12px/1 var(--b-font);font-style:normal}
.ck-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ck-path{padding:12px 14px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r)}
.ck-path b{display:block;font:700 14px/1.3 var(--b-font);color:var(--b-ink);margin-bottom:6px}
.ck-path ol{margin:0;padding-left:18px;display:grid;gap:3px}
.ck-path li{font:400 13px/1.4 var(--b-font);color:var(--b-body)}
.ck-codes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.ck-codes>div{display:grid;grid-template-rows:auto 1fr;align-items:stretch}
.ck-codes .ck-drop{min-height:92px}
.ck-drop{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px dashed #c9d7df;border-radius:var(--b-inner-r);background:#fff;cursor:pointer;transition:border-color 160ms,background-color 160ms}
.ck-drop:hover,.ck-drop.is-over{border-color:var(--b-blue);background:var(--b-wash)}
.ck-drop:focus-within{border-color:var(--b-blue);box-shadow:0 0 0 3px rgba(0,152,254,.16)}
.ck-drop i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--b-tile);border:1px solid var(--b-line)}
.ck-drop i svg{width:16px;height:16px;stroke:var(--b-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-drop b{display:block;font:600 14px/1.3 var(--b-font);color:var(--b-ink)}
.ck-drop span{display:block;font:400 12px/1.4 var(--b-font);color:var(--b-mute)}
.ck-drop img{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid var(--b-line)}
.ck-drop button{justify-self:end;border:0;background:none;padding:6px 0;font:400 13px/1 var(--b-font);color:var(--b-mute);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.ck-drop.has-file{grid-template-columns:auto 1fr auto;border-style:solid;border-color:#cfe9ff;background:var(--b-wash)}
.ck-2fa-no{padding:12px 14px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r);font:400 14px/1.5 var(--b-font);color:var(--b-body)}
.ck-2fa-no b{color:var(--b-ink);font-weight:600}
@media(max-width:767px){.ck-how,.ck-codes{grid-template-columns:1fr}
  .ck-chips{gap:6px;padding:7px 7px}.ck-chips input{min-width:64px}
  .ck-chip{height:32px;padding:0 2px 0 9px;gap:3px;font-size:13px;max-width:100%}.ck-chip>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .ck-chip .ck-chip-tick{display:none}.ck-chip button{width:20px;height:20px}}

/* the video overlay: a dark scrim, the player as large as the screen allows, one close, Esc closes */
.ck-ov{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(1,1,1,.78)}
.ck-ov.is-on{display:flex;animation:ck-in 180ms var(--b-ease) both}
.ck-ov-box{position:relative;width:min(1100px,100%)}
.ck-ov-in{position:relative;width:100%;aspect-ratio:16/9;max-height:calc(100vh - 96px);background:#000;border-radius:var(--b-card-r);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.ck-ov-in iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ck-ov-x{position:absolute;top:-18px;right:-18px;width:44px;height:44px;box-shadow:0 8px 24px rgba(0,0,0,.35);border:0;border-radius:50%;background:#fff;color:var(--b-ink);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--b-ease)}
.ck-ov-x:active{transform:scale(.96)}
.ck-ov-x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
@media(max-width:767px){.ck-ov{padding:12px}.ck-ov-x{top:-54px;right:0}}
body.ck-ov-open{overflow:hidden}

/* ---- done ---- */
.ck-done{text-align:center;padding:12px 0 0}
.ck-done .ck-mark{width:72px;height:72px;margin:0 auto 20px;border-radius:50%;background:var(--b-grad);display:grid;place-items:center;animation:ck-pop 420ms var(--b-ease) both}
@keyframes ck-pop{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.ck-done .ck-mark svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ck-done .ck-mark-p{stroke-dasharray:24;stroke-dashoffset:24;animation:ck-draw 520ms 220ms var(--b-ease) forwards}
@keyframes ck-draw{to{stroke-dashoffset:0}}
.ck-done .ck-h{white-space:normal;font-size:var(--b-h2);letter-spacing:var(--b-h2-ls)}
.ck-done .ck-sub{font-size:var(--b-sub)}
.ck-handle{font-weight:700;color:var(--b-ink)}
.ck-done-in{display:grid;gap:12px;margin-top:16px;text-align:left}
.ck-done-in>*{animation:ck-in 360ms var(--b-ease) both}
.ck-done-in>*:nth-child(1){animation-delay:360ms}.ck-done-in>*:nth-child(2){animation-delay:440ms}.ck-done-in>*:nth-child(3){animation-delay:520ms}.ck-done-in>*:nth-child(4){animation-delay:580ms}
/* the welcome card: face | quote over the signature (desktop); face beside the name, the quote under at full width (phones) */
.ck-welcome{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"av q" "av sig";gap:8px 14px;align-items:start;padding:16px 18px;background:var(--b-wash);border:1px solid #cfe9ff;border-radius:var(--b-card-r)}
.ck-welcome .ck-av{grid-area:av}
.ck-welcome-q{grid-area:q;margin:0;font:400 15px/1.5 var(--b-font);color:var(--b-ink);text-wrap:pretty}
.ck-welcome-sig{grid-area:sig;margin:0;font:700 14px/1.3 var(--b-font);color:var(--b-ink);white-space:nowrap}
.ck-welcome-sig span{margin-left:6px;font:400 13px/1.3 var(--b-font);color:var(--b-link)}
/* the order in one strip: plan, paid, renews, receipt (launch audit L2-013); four across from 600px, two by two below */
.ck-done-facts{padding:12px 18px}
.ck-done-facts dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
@media(min-width:600px){.ck-done-facts dl{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ck-done-facts dl>div{display:grid;gap:3px;min-width:0}
.ck-done-facts dt{font:600 12px/1.3 var(--b-font);color:var(--b-mute);letter-spacing:.1px}
.ck-done-facts dd{margin:0;font:700 15px/1.3 var(--b-font);color:var(--b-ink);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-done-facts dd a{color:var(--b-link);font-weight:600;text-underline-offset:2px}
.ck-note .ck-nl.ck-nl-promise{display:block}
.ck-done-in>*:nth-child(5){animation-delay:640ms}
.ck-done-when{text-align:center}
.ck-done-when .ck-side-h{text-align:left}
.ck-done .ck-done-in .b-btn{width:100%;justify-self:stretch}
.ck-done .ck-note{text-align:center;margin-top:0}
.ck-nl{display:block}
.ck-note .ck-nl.ck-s,.ck-note .ck-nl.ck-xs{display:none}
@media(max-width:991px){.ck-note .ck-nl.ck-l{display:none!important}.ck-note .ck-nl.ck-s{display:block}}
.ck-next{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px;text-align:left}
.ck-next li{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:baseline;padding:12px 14px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r)}
.ck-next li b{font:700 14px/1.4 var(--b-font);color:var(--b-blue)}
.ck-next li span{font:400 15px/1.45 var(--b-font);color:var(--b-body)}


/* ---- the side column ---- */
.ck-card{background:#fff;border:1px solid var(--b-line);border-radius:var(--b-card-r);padding:18px 20px}
.ck-side-h{margin:0 0 6px;font:700 var(--b-title)/1.3 var(--b-font);letter-spacing:var(--b-title-ls);color:var(--b-ink)}
.ck-side .ck-plan{background:#fff}
/* the founder card, the booking page's own (demo_page.py), face + name + rating + four pillars */
.ck-av{display:inline-block;flex:none;border-radius:50%;padding:2px;background:linear-gradient(#fff,#fff) padding-box,var(--b-grad) border-box;border:2px solid transparent;line-height:0}
.ck-av img{display:block;width:56px;height:56px;border-radius:50%;object-fit:cover;background:#e9f6ff}
.ck-who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;column-gap:14px;row-gap:9px}
.ck-who>.ck-av{grid-area:1/1/3/2}
.ck-who>.ck-who-t{grid-area:1/2/2/3;min-width:0}
.ck-who-t b{display:block;font:700 16px/1.25 var(--b-font);color:var(--b-ink);white-space:nowrap}
.ck-who-t span{display:block;margin-top:2px;font:600 13px/1.3 var(--b-font);color:var(--b-link)}
.ck-who>.ck-tag{grid-area:1/3/2/4;align-self:start;justify-self:end;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px 0 8px;border-radius:999px;background:var(--b-wash);color:var(--b-link);font:600 12px/1 var(--b-font);white-space:nowrap}
.ck-rating{display:flex;align-items:center;gap:7px;margin:0;font:400 13px/1 var(--b-font);color:var(--b-mute);white-space:nowrap}
.ck-who>.ck-rating{grid-area:2/2/3/4}
.ck-rating b{color:var(--b-ink);font-weight:700}
.ck-stars{display:inline-flex;gap:1px;line-height:0}
.ck-stars svg{width:13px;height:13px;fill:#f6a900}
.ck-who>.ck-facts{grid-area:3/1/4/4}
.ck-facts{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ck-facts li{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:6px 8px;border-radius:22px;background:var(--b-tile);border:1px solid var(--b-line);font:600 12px/1 var(--b-font);color:var(--b-ink);white-space:nowrap}
.ck-facts li i{font-style:normal;font-size:13px;line-height:1}
/* the review */
.ck-rev-head{display:flex;align-items:center;gap:10px}
.ck-rev-ini{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--b-wash);color:var(--b-link);font:700 16px/1 var(--b-font)}
.ck-rev-who{min-width:0;flex:1}
.ck-rev-who b{display:flex;align-items:center;gap:5px;font:700 15px/1.2 var(--b-font);color:var(--b-ink)}
.ck-rev-who b svg{width:15px;height:15px}
.ck-rev-who span{display:block;font:400 13px/1.3 var(--b-font);color:var(--b-mute)}
.ck-rev-q{margin:12px 0 0;font:400 15px/1.5 var(--b-font);color:var(--b-body);text-wrap:pretty}
.ck-rev-q .ck-l{display:inline}.ck-rev-q .ck-s{display:none}
/* the column's review (desktop step 1) reads the shorter quote so the column and the form end together */
.ck-side-rev .ck-rev-q .ck-l{display:none}.ck-side-rev .ck-rev-q .ck-s{display:inline}
/* the guarantee row in the column */
.ck-side .ck-guar{margin:0}
/* the column's timeline and the promise pillars (A, round 1: "more details on the left, more convincing") */
.ck-when{display:grid}
.ck-promise{margin:12px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ck-promise li{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:0;padding:6px 6px;border-radius:22px;background:var(--b-tile);border:1px solid var(--b-line);font:600 12px/1 var(--b-font);color:var(--b-ink);white-space:nowrap}
.ck-promise li i{display:inline-block;width:12px;height:12px;flex:none;border-radius:50%;background:var(--b-blue) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center/7px no-repeat}
.ck-trust{display:flex;align-items:center;gap:10px;margin:0;padding:11px 14px;background:#fff;border:1px solid var(--b-line);border-radius:var(--b-inner-r);font:400 13px/1.4 var(--b-font);color:var(--b-mute)}
.ck-trust svg{width:15px;height:15px;flex:none;stroke:var(--b-mute);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-secure{margin-top:6px}
.ck-plans .ck-off{display:inline-block;margin-left:8px;padding:3px 7px;border-radius:999px;background:var(--b-wash);color:var(--b-link);font:600 11px/1 var(--b-font);vertical-align:1px}
.ck-plans strong s,.ck-plan strong s{margin-right:6px;font:400 13px/1 var(--b-font);letter-spacing:0;color:var(--b-mute2);text-decoration:line-through}
/* the track: stops on one line, an emoji disc on it, a bold time above, two short lines under (never one word) */
.ck-track{--n:3;position:relative;list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px}
.ck-track:before{content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;background:var(--b-line);border-radius:2px}
.ck-track li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px}
.ck-track li b{font:700 13px/1 var(--b-font);color:var(--b-blue);height:13px}
.ck-track li i{display:block;width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--b-line);font-style:normal;font-size:19px;line-height:38px;text-align:center;position:relative;z-index:1}
.ck-track li span{font:600 12.5px/1.35 var(--b-font);color:var(--b-body)}
.ck-track li span br{display:inline}

.ck-plan-mini{display:none}
/* ---- phones and tablets: one column, the strip, the rail collapses to one label ---- */
@media(max-width:1199px){
  .ck-plan-mini{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:12px 0 0;padding:10px 14px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r);font:400 13px/1.45 var(--b-font);color:var(--b-mute)}
  .ck-plan-mini>b{font:700 15px/1.3 var(--b-font);color:var(--b-ink);white-space:nowrap}
  .ck-plan-mini>b strong{font-weight:700}
  .ck-plan-mini>b small{font:400 13px/1 var(--b-font);color:var(--b-mute)}
  .ck-plan-mini>span{white-space:nowrap}
  .ck-main{display:block;padding:24px 16px 32px;max-width:640px}
  .ck-side{position:static;display:none}
  .ck-flow{max-width:none}
  .ck-after{display:none}
  .ck-rail{display:none}
  /* the segments carry their names (his "which section is which"): current in ink, done in grey, upcoming lighter */
  .ck-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0 16px 9px;list-style:none}
  .ck-seg li{display:grid;gap:7px;min-width:0;justify-items:center;text-align:center}
  .ck-seg li i{display:block;width:100%;justify-self:stretch;height:4px;border-radius:2px;background:var(--b-line);transition:background-color 220ms var(--b-ease)}
  .ck-seg li.is-on i{background:var(--b-blue)}
  .ck-seg li span{max-width:100%;font:600 11px/1 var(--b-font);letter-spacing:.1px;color:var(--b-mute2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 220ms var(--b-ease)}
  .ck-seg li.is-on span{color:var(--b-mute)}
  .ck-seg li.is-now span{color:var(--b-ink)}
  .ck-who>.ck-rating{white-space:normal;flex-wrap:wrap;row-gap:3px}
  .ck-rev-q .ck-l{display:none}.ck-rev-q .ck-s{display:inline}
  .ck-l{display:none!important}.ck-s{display:inline}
  .ck-sub .ck-sl.ck-s{display:block}
  .ck-sub .ck-sl.ck-xs{display:none}
  /* one column: the logo centred, Back at the left, the lock at the right (the bar row 56, the segments under it) */
  .ck-top{height:auto}
  .ck-top-in{grid-template-columns:1fr auto 1fr;height:56px;padding:0 16px}
  .ck-top-l{display:contents}
  .ck-top .ck-back{grid-column:1;justify-self:start}
  .ck-top-brand{grid-column:2}
  .ck-top-brand img{width:160px;height:19px}
  .ck-top-lock{grid-column:3;justify-self:end}
  .ck-top-login{display:none}
  .ck-done .ck-h{font-size:var(--b-h2)}
  .ck-track[style*="--n:4"]{grid-template-columns:1fr 1fr;gap:10px 8px}
  .ck-track[style*="--n:4"]:before{display:none}
  .ck-track[style*="--n:4"] li{padding:10px 6px;background:var(--b-tile);border:1px solid var(--b-line);border-radius:var(--b-inner-r)}
  .ck-track li span{font-size:13px}
}
@media(max-width:767px){
  .ck-h{white-space:normal}
  /* phones: nothing after the button (his round 5), the step-1 sub and note go, the strip is gone, Powered by Stripe folds into the lock line */
  .ck-desk,.ck-sub-desk,.ck-secure .ck-stripe,.ck-top-lock span{display:none!important}
  .ck-welcome{grid-template-areas:"av sig" "q q";gap:12px;align-items:center}
  .ck-welcome-sig b,.ck-welcome-sig span{display:block;margin:0}.ck-welcome-sig span{margin-top:2px}
  /* the plan row on phones: name and price on one line, the facts on their own full line, Change plan under */
  .ck-plan{grid-template-columns:1fr auto;row-gap:2px}
  .ck-plan>span{grid-column:1/-1}
  .ck-plan button{grid-column:1/-1;grid-row:auto;justify-self:start;margin-top:4px}
  .ck-plan strong{grid-row:1}
  .ck-plans strong s,.ck-plans .ck-off{display:none}
  .ck-plans label{gap:10px;padding:10px 12px}
}
@media(max-width:599px){.ck-two{grid-template-columns:1fr}}
@media(max-width:479px){
  .ck-strip{gap:5px}
  .ck-strip{grid-template-columns:1fr 1fr}.ck-strip li:nth-child(3){display:none}
  .ck-strip li{font-size:13px;padding:6px 6px;gap:5px}.ck-strip li svg{width:14px;height:14px}
  .ck-facts li{font-size:12px;padding:6px 6px 6px 5px}
  .ck-next li{grid-template-columns:74px 1fr}
  .ck-line{grid-template-columns:74px 1fr}
}
@media(max-width:359px){.ck-h .ck-brk{display:inline}.ck-plans .ck-plans-t b em{display:none}.ck-note .ck-nl.ck-nx{display:none}.ck-note .ck-nl.ck-xs{display:block}.ck-who{column-gap:10px;padding:12px}.ck-who .ck-av img{width:48px;height:48px}.ck-who>.ck-tag i{display:none}.ck-who>.ck-tag{padding:0 9px}.ck-track[style*="--n:4"]{grid-template-columns:1fr}.ck-track[style*="--n:4"] li{display:grid;grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:10px;padding:8px 10px}.ck-track[style*="--n:4"] li i{display:none}.ck-track[style*="--n:4"] li b{align-self:center;min-width:64px}.ck-track[style*="--n:4"] li span br{display:none}.ck-sub .ck-sl.ck-s{display:none}.ck-sub .ck-sl.ck-xs{display:block}.ck-track li span{font-size:12px}.ck-facts{grid-template-columns:1fr;gap:5px}.ck-strip li{font-size:12px;padding:6px 3px}}
@media(min-width:1200px) and (max-height:860px){.ck-side .ck-when{display:none}}
@media(prefers-reduced-motion:reduce){.ck-step.is-on,.ck-chip,.ck-reveal.is-on,.ck-plans.is-on,.ck-done .ck-mark,.ck-done-in>*{animation:none}.ck-done .ck-mark-p{stroke-dashoffset:0;animation:none}.ck-field,.ck-box,.ck-chips,.ck-pill,.ck-rail li i{transition:none}.ck-act .b-btn.is-busy:after{animation:none}}

/* ---- the stub payment panel (local runs and tests: no Stripe key) and the payment error line ---- */
.ck-stub{display:grid;gap:10px;padding:14px 16px;border:1px dashed #c9d7df;border-radius:var(--b-inner-r);background:var(--b-tile);font:400 14px/1.5 var(--b-font);color:var(--b-body)}
.ck-stub b{color:var(--b-ink);font-weight:700}
.ck-stub-act{display:flex;flex-wrap:wrap;gap:8px}
.ck-stub-act button{height:40px;padding:0 14px;border-radius:var(--b-pill);border:1px solid var(--b-line);background:#fff;font:600 14px/1 var(--b-font);color:var(--b-ink);cursor:pointer}
.ck-stub-act button:first-child{background:var(--b-ink);border-color:var(--b-ink);color:#fff}
.ck-pay-err{margin:10px 0 0;font:400 14px/1.45 var(--b-font);color:#b42318}
.ck-pay-err:empty{display:none}
.ck-form-err{margin:12px 0 0;padding:10px 14px;border-radius:var(--b-inner-r);background:#fff1f0;border:1px solid #f5c2bd;font:400 14px/1.45 var(--b-font);color:#b42318}
.ck-wait{display:inline-flex;align-items:center;gap:8px;font:400 14px/1.4 var(--b-font);color:var(--b-mute)}

/* hover motion only where a pointer can hover (tests/test_motion.py: every hover transform is gated for touch) */
@media(hover:hover) and (pointer:fine){.ck-vid:hover i{transform:scale(1.06)}.ck-ov-x:hover{transform:scale(1.06)}}