/* The sign-up steps (David's design boards, 2026-10-25: "Sign-up step 1: choose what you need", "step 1b: offer the
   other product", "step 2: create your account"): a slim header, one column, Archivo headings over Inter. */
body:has(.ck-page) { background: #f6f7f9; }
.ck-top { background: #fff; border-bottom: 1px solid #e2e8f0; }
.ck-top-in { max-width: 1080px; margin: 0 auto; padding: 8px 20px; box-sizing: border-box; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; min-height: 64px; }
.ck-top-in a { display: flex; align-items: center; min-height: 44px; color: #0f172a; font-weight: 600; font-size: 15px; text-decoration: none; }
.ck-top-in img { height: 26px; display: block; }
.ck-page { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, sans-serif; font-size: 18px; line-height: 1.6;
  color: #0f172a; background: #f6f7f9; }
.ck-page a { color: #0b1f3a; font-weight: 600; }
.ck { max-width: 560px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 20px clamp(48px, 6vw, 80px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 22px; }
.ck-wide { max-width: 760px; }
.ck-offer { padding-top: clamp(40px, 6vw, 72px); gap: 14px; }
.ck-head { display: flex; flex-direction: column; gap: 8px; }
.ck-step { color: #0f5e57; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; }
.ck h1 { margin: 0; font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1.12; letter-spacing: -.025em; color: #0b1f3a; text-wrap: balance; }
.ck form { margin: 0; }
.ck-stack { display: flex; flex-direction: column; gap: 22px; }
.ck-list { display: flex; flex-direction: column; gap: 12px; }
.ck-msg { background: #fff; border: 1px solid #e2e8f0; border-radius: 2px; padding: 12px 16px; font-size: 15px; color: #334155; }
.ck-msg.bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.ck-msg.ok { border-color: #bbe5dc; background: #eef5f4; color: #065f46; }

/* a product: the whole card is the switch */
.ck-card { position: relative; display: flex; align-items: center; gap: 18px; width: 100%; padding: 22px 24px; background: #fff;
  border: 1px solid #d5dbea; border-radius: 2px; cursor: pointer; box-sizing: border-box; min-height: 96px; font-weight: 400; font-size: 18px; }
.ck-card:has(input:checked) { border: 2px solid #0b1f3a; padding: 21px 23px; }
.ck-card input, .ck-api input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ck-card:has(input:focus-visible), .ck-api:has(input:focus-visible) { outline: 3px solid #10b981; outline-offset: 2px; }
.ck-box { flex: none; width: 26px; height: 26px; border-radius: 2px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid #94a3b8; box-sizing: border-box; }
.ck-box svg { width: 16px; height: 16px; }
:checked + .ck-box { background: #0f5e57; border-color: #0f5e57; }
.ck-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.ck-name { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-size: 22px; font-weight: 700; color: #0b1f3a; letter-spacing: -.02em; line-height: 1.3; }
.ck-sub { font-size: 16px; color: #475569; line-height: 1.5; }
.ck-price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.ck-amt { font-size: 20px; font-weight: 700; color: #0b1f3a; white-space: nowrap; }
.ck-amt s { font-size: 15px; font-weight: 500; color: #94a3b8; margin-right: 6px; }
.ck-amt s[hidden] { display: none; }
.ck-amt .per { font-size: 15px; font-weight: 500; color: #475569; }
.ck-free { font-size: 14px; font-weight: 600; color: #0f5e57; }

/* the Deal Screener's card, with the choice to pay by the deal at its foot (David, 2026-10-26; the design board
   "Sign-up step 1, proposal: with $20 a deal"): the frame is the box's, the card inside has none */
.ck-cardbox { background: #fff; border: 1px solid #d5dbea; border-radius: 2px; overflow: hidden; }
.ck-cardbox:has(> .ck-card input:checked) { border: 2px solid #0b1f3a; }
.ck-cardbox > .ck-card, .ck-cardbox > .ck-card:has(input:checked) { border: 0; padding: 22px 24px; border-radius: 0; }
.ck-cardbox:has(> .ck-card input:checked) > .ck-card { padding: 21px 23px 22px; }
.ck-deal { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; min-height: 52px;
  padding: 12px 24px; box-sizing: border-box; background: #f8fafc; border-top: 1px dashed #b4bfd3; cursor: pointer;
  font-weight: 400; font-size: 15px; color: #334155; }
.ck-cardbox:has(> .ck-card input:checked) > .ck-deal { padding: 12px 23px 11px; }
.ck-deal:has(input:checked) { background: #eef5f4; }
.ck-deal input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ck-deal:has(input:focus-visible) { outline: 3px solid #10b981; outline-offset: -3px; }
.ck-deal .ck-box { width: 20px; height: 20px; }
.ck-deal .ck-box svg { width: 12px; height: 12px; }
.ck-deal-what { flex: 1 1 0; min-width: 0; }      /* (the line alone: David, 2026-10-26, "this is a good version") */
.ck-deal-what b { color: #0b1f3a; }
/* the API's own sign-up: the API Plan first, then the products as extras for the team */
.ck-inc { font-size: 14px; color: #475569; }
.ck-extra { font-size: 15px; font-weight: 600; color: #475569; }

/* the API: a dashed line under them */
.ck-api { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px; background: transparent;
  border: 1px dashed #b4bfd3; border-radius: 2px; cursor: pointer; box-sizing: border-box; font-weight: 400; font-size: 18px; }
.ck-api .ck-box { width: 20px; height: 20px; }
.ck-api .ck-box svg { width: 12px; height: 12px; }
.ck-api-what { flex: 1 1 auto; min-width: 0; font-size: 15px; color: #334155; }
.ck-api-what b { color: #0b1f3a; }
.ck-api-price { flex: 0 0 auto; font-size: 14px; color: #475569; }

.ck-sum { background: #eef5f4; border-radius: 2px; padding: 16px 20px; display: flex; flex-direction: column; gap: 2px; color: #065f46; }
.ck-sum[hidden] { display: none; }
.ck-sum-t { font-size: 17px; font-weight: 700; }
.ck-sum-s { font-size: 15px; }
.ck-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; border: 0; border-radius: 2px;
  background: #0f5e57; color: #fff; font: inherit; font-weight: 600; font-size: 18px; cursor: pointer; text-decoration: none; }
.ck-go:hover { background: #0c4d47; }
.ck-go:disabled { background: #94a3b8; cursor: default; }
.ck-foot { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #475569; border-top: 1px solid #e2e8f0; padding-top: 18px; }

/* step 1b: the other product, offered */
.ck-yes { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 76px;
  padding: 18px 24px 16px; line-height: 1.2; box-sizing: border-box; background: #0f5e57; color: #fff; border: 0; border-radius: 2px;
  text-align: center; font: inherit; cursor: pointer; }
.ck-yes:hover { background: #0c4d47; }
.ck-yes-t { font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; }
.ck-yes-f { font-size: 16px; font-weight: 500; }
.ck-yes-p { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: #b9ddd6; }
.ck-yes-p b { font-weight: 700; color: #d6ece8; }
.ck-no { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; background: none; border: 0;
  color: #0b1f3a; font: inherit; font-weight: 600; font-size: 16px; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ck-fig { margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ck-fig figcaption { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.ck-fig img { width: 100%; height: auto; display: block; border: 1px solid #d5dbea; border-radius: 2px; box-shadow: 0 10px 30px rgba(11, 31, 58, .10); }

/* step 2: what was chosen, then the account */
.ck-chose { background: #fff; border: 1px solid #e2e8f0; border-radius: 2px; padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; }
.ck-chose-r { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; color: #0b1f3a; }
.ck-chose-r span:last-child { white-space: nowrap; }
.ck-chose-s { font-size: 15px; color: #475569; }
.ck-field { display: flex; flex-direction: column; gap: 6px; }
.ck-field label { font-weight: 600; font-size: 15px; color: #0f172a; }
.ck-field input { height: 50px; box-sizing: border-box; border: 1.5px solid #cbd5e1; border-radius: 2px; padding: 0 14px; font: inherit; font-size: 17px; background: #fff; }
.ck-note { margin: 0; font-size: 14px; color: #475569; text-align: center; }
.ck-clerk { min-height: 300px; display: flex; justify-content: center; }
.ck-clerk > * { width: 100%; }
/* Clerk's own sign-up box, in the board's look (on Clerk's class names: it gives the box its own class as it mounts).
   Borders, not shadows: the box clips a shadow at its sides. */
.ck .cl-socialButtonsBlockButton { min-height: 50px !important; border: 1.5px solid #cbd5e1 !important; border-radius: 2px !important;
  box-shadow: none !important; background: #fff !important; }
.ck .cl-socialButtonsBlockButtonText { font-weight: 700 !important; font-size: 16px !important; color: #0f172a !important; }
.ck .cl-dividerText { font-size: 14px !important; color: #64748b !important; }
.ck .cl-dividerLine { background: #e2e8f0 !important; }
.ck .cl-formFieldLabel { font-weight: 600 !important; font-size: 15px !important; color: #0f172a !important; }
.ck .cl-formFieldInput { height: 50px !important; max-height: none !important; font-size: 17px !important; padding-left: 14px !important;
  border: 1.5px solid #cbd5e1 !important; border-radius: 2px !important; box-shadow: none !important; background: #fff !important; }
.ck .cl-formFieldInput:focus { border-color: #0f5e57 !important; box-shadow: inset 0 0 0 1px #0f5e57 !important; }
.ck .cl-formButtonPrimary { min-height: 56px !important; font-size: 18px !important; font-weight: 600 !important; border-radius: 2px !important;
  box-shadow: none !important; background: #0f5e57 !important; text-transform: none !important; }
.ck .cl-formButtonPrimary::after { display: none !important; }
.ck .cl-formButtonPrimary:hover { background: #0c4d47 !important; }
.ck .cl-buttonArrowIcon { display: none !important; }
.ck .cl-socialButtonsBlockButton, .ck .cl-formFieldInput, .ck .cl-formButtonPrimary { transition: none !important; }

@media (max-width: 600px) {
  .ck-card { flex-wrap: wrap; gap: 12px 16px; padding: 18px; }
  .ck-card:has(input:checked) { padding: 17px; }
  .ck-what { flex-basis: calc(100% - 42px); }
  .ck-price { flex-basis: 100%; flex-direction: row; justify-content: space-between; align-items: baseline; padding-left: 42px; }
  .ck-api { flex-wrap: wrap; gap: 6px 12px; }
  .ck-api-price { flex-basis: 100%; padding-left: 32px; }
  .ck-cardbox > .ck-card, .ck-cardbox > .ck-card:has(input:checked) { padding: 18px; }
  .ck-cardbox:has(> .ck-card input:checked) > .ck-card { padding: 17px 17px 18px; }
  .ck-deal, .ck-cardbox:has(> .ck-card input:checked) > .ck-deal { padding: 12px 18px; }
  .ck-deal-what { flex-basis: calc(100% - 32px); }
}

/* the 4th deal (David's board "4th deal only: create an account while it reads"): the deal's reading beside the account */
.ck-split { max-width: 1080px; margin: 0 auto; padding: clamp(36px, 5vw, 64px) 20px clamp(48px, 6vw, 80px); box-sizing: border-box;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 32px 56px; align-items: start; }
.ck-split > .ck { max-width: none; margin: 0; padding: 28px; background: #fff; border: 1px solid #e2e8f0; border-radius: 2px; gap: 16px; }
.ck-aside { display: flex; flex-direction: column; gap: 18px; }
.ck-aside .ck-step { margin: 0; }
.ck-held-h1 { margin: 0; font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.15; letter-spacing: -.02em; color: #0b1f3a; text-wrap: balance; }
.ck-held-lede { margin: 0; font-size: 19px; color: #334155; }
.ck-held-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 2px; padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ck-held-file { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
.ck-held-file span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-held-file span:last-child { flex: none; color: #475569; font-weight: 400; }
.ck-held-bar { height: 8px; border-radius: 99px; background: #e2e8f0; overflow: hidden; }
.ck-held-bar > div { width: 6%; height: 100%; background: #0f5e57; border-radius: 99px; transition: width .6s ease; }
.ck-held-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #64748b; }
.ck-held-steps li { display: flex; gap: 10px; align-items: center; }
.ck-held-steps li::before { content: ""; flex: none; width: 14px; height: 14px; border: 2.4px solid #94a3b8; border-radius: 50%; }
.ck-held-steps li.now { color: #334155; }
.ck-held-steps li.now::before { border-color: #0f5e57; border-right-color: transparent; animation: ck-spin .9s linear infinite; }
.ck-held-steps li.done { color: #334155; }
.ck-held-steps li.done::before { width: 18px; height: 18px; border: 0; border-radius: 0; margin: -2px; background: #0f5e57;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes ck-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ck-held-steps li.now::before { animation: none; } }
.ck-h2 { margin: 0; font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2;
  letter-spacing: -.02em; color: #0b1f3a; }
.ck-sub { margin: 0; font-size: 17px; color: #334155; }
.ck-sum-due { display: flex; gap: 10px; }            /* $0 right after the words (David, 2026-10-26) */
.ck-split a.ck-go { color: #fff; text-decoration: none; }
.ck-held-plan .ck-card { cursor: default; }

/* the one sign-up page (David, 2026-10-26, the onboarding boards): the products and the account in one card, what they
   came for beside it */
.ck-split > .ck .ck-h2 { margin: 0; }
.ck-tight { gap: 14px; }
.ck-tight .ck-list { gap: 10px; }
.ck-split .ck-card { padding: 16px 18px; min-height: 0; gap: 8px 14px; flex-wrap: wrap; font-size: 16px; }
.ck-split .ck-card:has(input:checked) { padding: 15px 17px; }
.ck-split .ck-cardbox > .ck-card, .ck-split .ck-cardbox > .ck-card:has(input:checked) { padding: 16px 18px; }
.ck-split .ck-cardbox:has(> .ck-card input:checked) > .ck-card { padding: 15px 17px 16px; }
.ck-split .ck-what { flex: 1 1 200px; min-width: 0; }
.ck-split .ck-name { font-size: 19px; }
.ck-split .ck-sub { font-size: 15px; line-height: 1.45; }
.ck-split .ck-price { margin-left: auto; }
.ck-split .ck-deal { padding: 11px 18px; }
.ck-split .ck-cardbox:has(> .ck-card input:checked) > .ck-deal { padding: 11px 17px 10px; }
.ck-foot-in { font-size: 14px; padding-top: 14px; }
.ck-off { opacity: .45; pointer-events: none; }
.ck-points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 17px; color: #334155; }
.ck-points li { display: flex; gap: 10px; align-items: flex-start; }
.ck-points svg { flex: none; margin-top: 5px; }
/* a picture of what they are buying (David, 2026-10-26); a package: each product's, named, joined by a plus, what they
   came for first. On a narrow screen the pictures go under the sign-up. */
.ck-shots { margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ck-shot { display: flex; flex-direction: column; gap: 8px; }
.ck-shot[hidden] { display: none; }
.ck-shot[data-pos="1"] { order: 1; } .ck-shot[data-pos="2"] { order: 2; }
.ck-shot img { display: block; width: 100%; height: auto; box-sizing: border-box; border: 1px solid #dbe3ec; border-radius: 4px;
  background: #fff; box-shadow: 0 14px 34px -18px rgba(11, 31, 58, .32); }
.ck-shot-tag { display: none; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #0f5e57; }
.ck-shots:not([data-n="1"]) .ck-shot-tag { display: block; }
.ck-shots:not([data-n="1"]) .ck-shot:not([data-pos="0"])::before { content: "+"; align-self: center; width: 30px; height: 30px;
  margin: 2px 0 -2px; display: grid; place-items: center; border-radius: 50%; background: #0b1f3a; color: #fff; font-size: 20px;
  font-weight: 600; line-height: 1; }
@media (max-width: 900px) {
  .ck-split:has(.ck-shots) { row-gap: 18px; }
  .ck-split:has(.ck-shots) > .ck-aside { display: contents; }
  .ck-split:has(.ck-shots) > .ck { order: 1; margin-top: 14px; }
  .ck-split .ck-shots { order: 2; margin-top: 14px; }
}
.ck-free-line { margin: 0; font-size: 19px; font-weight: 600; color: #0f5e57; }
.ck-points { font-size: 18px; }
.ck-benefit { font-size: clamp(30px, 3.8vw, 42px); line-height: 1.12; }
.ck-free-line { font-size: 20px; font-weight: 700; }