/* The checkout of a system with a designed sales page (body.co.designed; buy.mjs page()). Loaded
   after buy.css, which keeps the layout; this changes only the look, to match the sales page
   (Figma, Sales flow C01-C10). Colours are the sales page's palette (--ink, --text, --brand...),
   which buy.mjs also prints onto the --sk-* tokens buy.css reads. Nothing here names a brand. */
:root{--fg-rgb:255,255,255;--strong:#fff;--glow-tint-rgb:var(--brand-rgb)}   /* the palette's own :root style, printed after, overrides */
body.co.designed{
  --display:"Archivo",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --glass:rgba(var(--glass-rgb),.55);--edge:rgba(var(--fg-rgb),.10);--edge-2:rgba(var(--fg-rgb),.16);
  --co-sunk:rgba(var(--fg-rgb),.04);--co-r:20px;--co-r-sm:12px;
  --sk-ok:#5FD39A;--sk-ok-bg:rgba(43,182,115,.14);--sk-warn:#F5C26B;--sk-warn-bg:rgba(245,170,60,.14);
  --sk-bad:#FF8A80;--sk-bad-bg:rgba(255,90,80,.13);
  background:var(--ink);color:var(--text);font-family:var(--body);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 680px 520px at 50% -80px,rgba(var(--glow-tint-rgb),.30),rgba(var(--glow-tint-rgb),.08) 55%,transparent 75%);
  background-repeat:no-repeat;min-height:100vh;
}
body.co.designed.theme-light{
  --glass:rgba(255,255,255,.82);
  --sk-ok:#1E7A4C;--sk-ok-bg:#E3F4EA;--sk-warn:#8A5A00;--sk-warn-bg:#FBF0DC;--sk-bad:#B3261E;--sk-bad-bg:#FCEBEA;
}

/* ---- type */
body.co.designed h1,body.co.designed h2,body.co.designed h3,body.co.designed h4{
  font-family:var(--display);font-stretch:92%;letter-spacing:-.02em;color:var(--strong);font-weight:700}
body.co.designed .co-h{font-size:clamp(30px,4.4vw,46px);line-height:1.06}
body.co.designed .co-h em{font-style:italic;color:var(--accent)}
body.co.designed.theme-light .co-h em{color:var(--brand)}
body.co.designed .co-lede,body.co.designed .co-sub,body.co.designed .co-hero .co-scroll{color:var(--text-soft)}
body.co.designed .co-hero .co-lede{max-width:56ch;margin-left:auto;margin-right:auto}
.co.designed .co-eyebrow,.co.designed .co-sec,.co.designed .co-flag,.co.designed .co-opt em,.co.designed .co-receipt dt{
  font-family:var(--mono) !important}
.co.designed .co-eyebrow{color:var(--accent);font-size:12.5px;letter-spacing:.16em}
.co.designed .co-sec{color:var(--accent) !important;font-size:12.5px !important;letter-spacing:.14em !important;font-weight:500 !important}
body.co.designed .co-hero .co-promo{color:var(--accent)}

/* ---- chrome: the logo centred over the glow */
body.co.designed .co-top .co-in{padding-top:30px;display:flex;justify-content:center}
body.co.designed .co-top .co-in::after{content:none}
body.co.designed .co-top img{height:30px}
body.co.designed .co-foot{color:var(--text-faint)}
body.co.designed .co-foot::before{background:var(--edge)}
body.co.designed .co-foot b{color:var(--text-soft)}
body.co.designed .co-foot a{color:var(--text-soft)}

/* ---- buttons: the sales page's gradient pill */
body.co.designed .btn,body.co.designed button.btn{
  border-radius:999px;background:linear-gradient(135deg,var(--brand-hi),var(--brand) 55%,var(--brand-deep));
  color:#fff;font-family:var(--body);font-weight:650;font-size:16.5px;padding:16px 28px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 12px 34px -10px rgba(var(--brand-rgb),.85);
  transition:transform .15s,box-shadow .15s}
body.co.designed .btn:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 16px 40px -10px rgba(var(--brand-rgb),.95)}
body.co.designed .btn.co-caps{text-transform:none;letter-spacing:0}
body.co.designed .btn:disabled{background:rgba(var(--fg-rgb),.18);box-shadow:none;transform:none}
body.co.designed .btn.ghost{background:rgba(var(--fg-rgb),.05);color:var(--strong);box-shadow:0 0 0 1px var(--edge-2) inset}

/* ---- glass cards */
body.co.designed .co-plan,body.co.designed .co-cost,body.co.designed .co-sum,body.co.designed .co-receipt,
body.co.designed .co-order form.card,body.co.designed .co-more,body.co.designed .co-narrow,body.co.designed .card.offer{
  background:var(--glass);border:1px solid var(--edge);border-radius:var(--co-r);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 30px 60px -30px rgba(var(--sk-shadow-rgb),.55);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.co.designed .co-order form.card{padding:28px}
@media (max-width:620px){ body.co.designed .co-order form.card{padding:22px 18px} }
body.co.designed .co-plan.best{border-color:rgba(var(--brand-rgb),.7);
  box-shadow:0 0 0 1px rgba(var(--brand-rgb),.35),0 30px 70px -28px rgba(var(--brand-rgb),.55)}
.co.designed .co-flag{background:var(--brand);color:var(--badge-ink);font-size:11px}
body.co.designed .co-price{font-family:var(--display);font-stretch:92%;color:var(--strong)}
.co.designed .co-row{border-bottom-color:var(--edge)}
.co.designed .co-row b{color:var(--strong)}
.co.designed .co-row.tot{color:var(--strong)}
.co.designed .co-feat li{color:var(--text-soft)}
.co.designed .co-feat li b{color:var(--strong)}
.co.designed .co-feat li.no::before{border-color:var(--edge-2)}

/* ---- form */
body.co.designed .field > span{color:var(--text-2)}
body.co.designed .field small{color:var(--text-faint)}
body.co.designed input[type=text],body.co.designed input[type=email],body.co.designed input[type=tel]{
  background:rgba(var(--fg-rgb),.045);border:1px solid var(--edge-2);color:var(--strong);height:50px;border-radius:var(--co-r-sm)}
body.co.designed input::placeholder{color:var(--text-faint)}
body.co.designed input:focus{outline:2px solid rgba(var(--brand-rgb),.75);outline-offset:1px;border-color:transparent;background:rgba(var(--fg-rgb),.06)}
body.co.designed .recurly-element-card{height:50px;background:rgba(var(--fg-rgb),.045);border-color:var(--edge-2);border-radius:var(--co-r-sm)}
body.co.designed .recurly-element-card-focus{border-color:rgba(var(--brand-rgb),.8);background:rgba(var(--fg-rgb),.06)}
body.co.designed .co-opt{background:rgba(var(--fg-rgb),.03);border-color:var(--edge-2);border-radius:var(--co-r-sm);color:var(--text)}
body.co.designed .co-opt:has(input:checked){border-color:var(--brand);background:rgba(var(--brand-rgb),.14)}
.co.designed .co-opt em{color:var(--accent);background:rgba(var(--brand-rgb),.18);font-weight:500}
body.co.designed .co-opt:has(input:checked) em{background:rgba(var(--brand-rgb),.24)}
body.co.designed .co-opt input,body.co.designed .co-terms input{accent-color:var(--brand)}
body.co.designed .co-terms{color:var(--text-2)}
body.co.designed .co-terms a{color:var(--text-soft)}
body.co.designed .co-secure,body.co.designed .co-sum p{color:var(--text-faint)}

/* ---- upsell */
body.co.designed .co-offer .co-h{font-size:clamp(30px,4.6vw,48px)}
body.co.designed .co-vid{background:rgba(var(--glass-rgb),.7);border:1px solid var(--edge);border-radius:var(--co-r);
  box-shadow:0 30px 70px -30px rgba(var(--brand-rgb),.45)}
body.co.designed .co-lead{color:var(--strong);margin-top:6px}
body.co.designed .co-body{color:var(--text-soft);font-weight:500}
body.co.designed .co-offer form{max-width:520px;margin:22px auto 0}
body.co.designed .co-yes small{font-weight:500;opacity:.88}
body.co.designed .co-no{color:var(--text-faint);font-size:15px}
body.co.designed .co-offer hr{display:none}
body.co.designed .co-more{padding:30px 28px;margin:40px 0 0}
body.co.designed .co-more h3{font-size:clamp(22px,2.8vw,28px);color:var(--strong)}
body.co.designed .co-more p{color:var(--text-soft)}
body.co.designed .co-more b,body.co.designed .co-more strong{color:var(--strong)}
@media (max-width:620px){ body.co.designed .co-more{padding:24px 18px} }

/* ---- confirmation */
body.co.designed .co-tick{background:rgba(var(--brand-rgb),.16);box-shadow:0 0 0 1px rgba(var(--brand-rgb),.35) inset,0 0 60px -6px rgba(var(--glow-tint-rgb),.55)}
body.co.designed .co-tick span{border-color:var(--accent)}
body.co.designed.theme-light .co-tick span{border-color:var(--brand)}
body.co.designed .co-receipt dt{color:var(--text-faint)}
body.co.designed .co-receipt dd{color:var(--text)}
body.co.designed .co-thanks .btn{max-width:420px;margin-left:auto;margin-right:auto}

/* ---- bits from app.css that assume a white page */
body.co.designed .notice{border:1px solid var(--edge)}
body.co.designed .empty{background:var(--glass);color:var(--text-soft);border:1px solid var(--edge);border-radius:var(--co-r)}
body.co.designed a{color:inherit}