/* Developer plan self-serve checkout (brief 09). Loaded on the checkout pages,
   and on the pricing page only when the checkout flag is on (pricing-hook.js). */
:root {
  --co-green: #17663a;
  --co-green-bg: #effaf3;
  --co-green-line: #b9e4c8;
  --co-amber-bg: #fff8e6;
  --co-amber-line: #e3b341;
  --co-amber-text: #6b4600;
  --co-red-bg: #fff5f4;
  --co-red-line: #f1c3bf;
  --co-red-text: #8a1c12;
  --co-blue-line: #c7d5ff;
  --co-blue-bg: #eef3ff;
  --co-blue-text: #2443b8;
  --co-muted: #545b68;
  --co-field-line: #8a909b;
}

/* ---------- shared bits ---------- */
.co-linkbtn { background: none; border: 0; padding: 0; color: var(--primary); text-decoration: underline; font: inherit; cursor: pointer; }
.co-linkbtn:hover { color: var(--tertiary); }
.co-muted { color: var(--co-muted); }
.co-small { font-size: .875rem; }
.co-ca-badge { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--co-red-line); background: var(--co-red-bg); color: var(--co-red-text); border-radius: 999px; padding: .2rem .75rem .2rem .45rem; font-size: .8125rem; font-weight: 600; line-height: 1.3; }
.co-ca-badge svg { width: 16px; height: 16px; flex: none; }
.co-ca-row { margin: .5rem 0 .25rem; }
.co-paymarks { margin-top: 1rem; border-top: 1px solid var(--co-blue-line); padding-top: .8rem; }
.co-pm-row { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.co-pm { width: 46px; height: 30px; border: 1px solid var(--grey-200); border-radius: 4px; background: var(--white); display: grid; place-items: center; overflow: hidden; }
.co-pm img { width: 38px; height: 24px; object-fit: contain; }
.co-pm-visa img, .co-pm-mastercard img, .co-pm-amex img { width: 44px; height: 28px; object-fit: cover; }
.co-pm-link img { width: 22px; height: 22px; }
.co-pm-secure { display: flex; align-items: center; gap: .35rem; font-size: .8125rem; color: var(--co-muted); margin-top: .5rem; }
.co-pm-secure svg, .co-pay-note svg { width: 15px; height: 15px; flex: none; }
.co-seller { font-size: .8125rem; color: var(--co-muted); margin: 1.5rem 0 0; padding: .75rem 1rem; border: 1px solid var(--grey-200); border-radius: var(--radius); background: var(--white); overflow-wrap: anywhere; }
.co-seller a { color: var(--primary); text-decoration: underline; }
.co-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- pricing page additions ---------- */
.co-loc-note { font-size: .8125rem; color: var(--co-muted); align-self: center; }
.co-loc-note .co-linkbtn { font-size: .8125rem; min-height: 24px; }
.co-from-b { font-size: .875rem; margin: .15rem 0 .5rem; color: var(--dark); }
.co-cta { display: flex; flex-direction: column; gap: .1rem; width: 100%; justify-content: center; padding: .7rem 1.2rem; min-height: 48px; text-align: center; }
.co-cta small { font-weight: 500; font-size: .8125rem; opacity: .95; }
.co-book { display: block; text-align: center; margin: .6rem 0 .25rem; font-size: .875rem; font-weight: 600; color: var(--primary); text-decoration: underline; min-height: 24px; }
.co-dev-note { display: inline; }

/* ---------- checkout page shell ---------- */
.co-main { padding: 1.5rem 0 3rem; background: var(--white); }
.co-crumbs { font-size: .875rem; margin-bottom: .75rem; }
.co-crumbs a { color: var(--primary); text-decoration: underline; display: inline-block; min-height: 24px; }
.co-steps { display: flex; gap: .4rem; list-style: none; font-size: .8125rem; color: var(--co-muted); margin: 0 0 .75rem; padding: 0; flex-wrap: wrap; }
.co-steps li { display: flex; align-items: center; gap: .4rem; }
.co-steps li + li::before { content: '\2192'; color: var(--co-muted); }
.co-steps .on { color: var(--primary); font-weight: 700; }
.co-head h1 { font-size: 2.25rem; margin-bottom: .35rem; }
.co-head p { color: var(--co-muted); max-width: 640px; }
.co-card { background: var(--white); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: 1.5rem; min-width: 0; }
.co-card h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; align-items: start; margin-top: 1.25rem; }
.co-summary { position: sticky; top: 96px; background: var(--blue-light); border-color: #dfe6ff; }
.co-loading { padding: 3rem 0; text-align: center; color: var(--co-muted); }

/* ---------- form fields ---------- */
.co-fld { margin-bottom: 1rem; min-width: 0; }
.co-fld > label, .co-sum-ctl label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .3rem; }
.co-fld .co-opt { font-weight: 400; color: var(--co-muted); }
.co-fld input[type=text], .co-fld input[type=email], .co-fld input[type=tel], .co-fld select, .co-fld textarea, .co-sum-ctl select {
  width: 100%; min-height: 48px; padding: .6rem .75rem; border: 1px solid var(--co-field-line); border-radius: var(--radius); font: inherit; font-size: 1rem; color: var(--dark); background: var(--white);
}
.co-fld textarea { min-height: 96px; resize: vertical; }
.co-fld input:focus-visible, .co-fld select:focus-visible, .co-fld textarea:focus-visible, .co-sum-ctl select:focus-visible { outline: 3px solid var(--primary); outline-offset: 1px; }
.co-hint { font-size: .8125rem; color: var(--co-muted); margin-top: .25rem; }
.co-err { font-size: .8125rem; color: var(--danger); margin-top: .3rem; font-weight: 600; display: flex; gap: .35rem; }
.co-err::before { content: '!'; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: var(--white); font-size: .7rem; flex: none; margin-top: 2px; }
.co-fld.invalid input, .co-fld.invalid select, .co-fld.invalid textarea { border: 2px solid var(--danger); background: #fff8f9; }
.co-fld-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.co-buyer { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.co-buyer legend { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; padding: 0; }
.co-buyer-opts { display: flex; gap: .6rem; flex-wrap: wrap; }
.co-bopt { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--co-field-line); border-radius: var(--radius); padding: .6rem .9rem; min-height: 48px; cursor: pointer; font-weight: 600; background: var(--white); }
.co-bopt input { width: 18px; height: 18px; accent-color: var(--primary); }
.co-bopt.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.co-buyer.invalid .co-bopt { border-color: var(--danger); }

/* ---------- order summary ---------- */
.co-sum-ctl { display: grid; gap: .75rem; margin-bottom: 1rem; }
.co-paychoice { border: 0; padding: 0; margin: .4rem 0 .9rem; min-width: 0; }
.co-pc-legend { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin-bottom: .55rem; padding: 0; }
.co-pc { display: flex; gap: .7rem; align-items: flex-start; border: 1.5px solid var(--grey-200); border-radius: var(--radius-lg); padding: .75rem .85rem; margin-bottom: .55rem; cursor: pointer; background: var(--white); transition: border-color .15s, box-shadow .15s; }
.co-pc:hover { border-color: var(--primary); }
.co-pc.on { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.co-pc input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); flex: none; }
.co-pc input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.co-pc-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.co-pc-head { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.co-pc-name { font-weight: 700; font-size: .9375rem; }
.co-pc-save, .co-pc-tag { font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .05rem .5rem; white-space: nowrap; }
.co-pc-save { background: #e7f6ec; color: var(--co-green); }
.co-pc-tag { background: var(--co-blue-bg); color: var(--co-blue-text); }
.co-pc-tag.best { background: #fff1e6; color: #8f3900; }
.co-pc-due { font-size: .9375rem; }
.co-pc-then, .co-pc-commit { color: var(--co-muted); }
.co-pc-commit { font-size: .8125rem; }
.co-pc-g { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--co-green); }
.co-pc-g svg { width: 13px; height: 13px; }
.co-pc-big { display: block; font-size: .8125rem; background: var(--co-amber-bg); border: 1px solid var(--co-amber-line); border-radius: 6px; padding: .35rem .55rem; margin-top: .35rem; }
.co-pc-big a { color: var(--co-amber-text); font-weight: 700; text-decoration: underline; }
.co-exit { background: var(--co-green-bg); border: 1px solid var(--co-green-line); border-radius: var(--radius-lg); padding: .7rem .85rem; font-size: .875rem; margin: .2rem 0 .5rem; }
.co-exit p { margin: .15rem 0 0; }
.co-exit-badge { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; color: var(--co-green); font-size: .8125rem; }
.co-exit-badge svg { width: 15px; height: 15px; flex: none; }
.co-sum-meta { font-size: .8125rem; color: var(--co-muted); margin: 0 0 .5rem; }
.co-lines { list-style: none; border-top: 1px solid #d5ddf5; padding: .75rem 0 0; margin: 0; }
.co-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; font-size: .9375rem; }
.co-lines li > span:last-child { white-space: nowrap; font-weight: 600; }
.co-l-sub { display: block; font-size: .8125rem; color: var(--co-muted); font-weight: 400; }
.co-lines li.co-total { border-top: 2px solid var(--dark); margin-top: .4rem; padding-top: .7rem; font-weight: 700; font-size: 1.15rem; }
.co-then { font-size: .875rem; margin-top: .5rem; background: var(--white); border-radius: var(--radius); padding: .6rem .75rem; }
.co-fx { font-size: .8125rem; color: var(--co-muted); margin-top: .5rem; }
.co-trust { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .875rem; display: grid; gap: .45rem; }
.co-trust li { display: flex; gap: .5rem; align-items: flex-start; }
.co-trust svg { width: 18px; height: 18px; flex: none; color: var(--primary); margin-top: 1px; }
.co-trust a { color: var(--primary); text-decoration: underline; }

/* ---------- consent and submit ---------- */
.co-disclosure { background: var(--grey-150); border: 1px solid var(--grey-200); border-left: 4px solid var(--primary); border-radius: var(--radius); padding: .8rem .9rem; font-size: .875rem; margin: .25rem 0 .9rem; }
.co-terms { border: 2px solid var(--grey-200); border-radius: var(--radius-lg); padding: 1.1rem; margin: 1rem 0 1.25rem; background: var(--white); }
.co-terms.invalid { border-color: var(--danger); background: #fff8f9; }
.co-chk { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; cursor: pointer; min-height: 24px; }
.co-chk + .co-chk { margin-top: .6rem; }
.co-chk input { width: 22px; height: 22px; accent-color: var(--primary); flex: none; margin-top: 1px; }
.co-chk a, .co-chk .co-linkbtn { color: var(--primary); text-decoration: underline; }
.co-terms .co-err { margin-left: 2.1rem; }
.co-terms-links { margin-top: .6rem; font-size: .875rem; }
.co-terms-links a { color: var(--primary); text-decoration: underline; }
.co-submit { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; }
.co-submit[aria-disabled=true], .co-submit[aria-disabled=true]:hover { background: #d5d8de; border-color: #d5d8de; color: var(--dark); cursor: not-allowed; transform: none; box-shadow: none; }
.co-missing { font-size: .875rem; color: var(--co-muted); margin-top: .6rem; }
.co-missing strong { color: var(--dark); }
.co-pay-note { font-size: .8125rem; color: var(--co-muted); margin-top: .6rem; display: flex; gap: .4rem; align-items: center; justify-content: center; text-align: center; }
.co-form-err { background: #fff8f9; border: 2px solid var(--danger); border-radius: var(--radius-lg); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9375rem; }
.co-form-err strong { display: block; }

/* ---------- banners ---------- */
.co-banner { border-radius: var(--radius-lg); padding: .9rem 1rem; margin: 1rem 0 0; display: flex; gap: .75rem; align-items: flex-start; font-size: .9375rem; }
.co-banner svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.co-banner strong { display: block; }
.co-banner.info { background: var(--co-blue-bg); border: 1px solid var(--co-blue-line); }
.co-banner.warn { background: var(--co-amber-bg); border: 1px solid var(--co-amber-line); }
.co-banner .co-linkbtn { margin-top: .35rem; min-height: 24px; }
.co-block { background: var(--co-amber-bg); border: 2px solid var(--co-amber-line); border-radius: var(--radius-lg); padding: 1rem; margin: -.25rem 0 1rem; }
.co-block p { margin: .25rem 0 .7rem; font-size: .9375rem; }
.co-btn-dark { background: var(--dark); color: var(--white); }
.co-btn-dark:hover { background: #1a1f2e; }

/* ---------- return page ---------- */
.co-ret { text-align: center; padding: 4rem 0 3rem; max-width: 640px; margin: 0 auto; }
.co-ret h1 { font-size: 2rem; margin-bottom: .6rem; }
.co-ret p + p { margin-top: .6rem; }
.co-ret .co-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.co-ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: var(--co-blue-bg); color: var(--secondary); }
.co-ico svg { width: 28px; height: 28px; }
.co-ico.bad { background: #fde8ec; color: var(--danger); }
.co-ico.ok { background: #e7f6ec; color: var(--co-green); }
.co-ico.wait { background: var(--co-amber-bg); color: var(--co-amber-text); }
.co-spinner { width: 42px; height: 42px; border: 4px solid #dfe6ff; border-top-color: var(--primary); border-radius: 50%; animation: co-spin 1s linear infinite; margin: 0 auto 1rem; }
.co-spinner.slow { opacity: .45; }
@keyframes co-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .co-spinner { animation-duration: 3s; } }
.co-welcome-hero { background: var(--gradient-hero); color: var(--white); padding: 3rem 0; }
.co-welcome-hero .co-ico { margin: 0 0 1rem; background: var(--white); color: var(--co-green); }
.co-welcome-hero .co-ico.wait { color: var(--co-amber-text); }
.co-welcome-hero h1 { font-size: 2.4rem; color: var(--white); margin-bottom: .5rem; }
.co-welcome-hero p { font-size: 1.0625rem; max-width: 720px; color: rgba(255, 255, 255, .92); }
.co-welcome-hero p + p { margin-top: .5rem; }
.co-welcome-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-top: 2rem; align-items: start; }
.co-paid-lines p + p { margin-top: .75rem; }
.co-next h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.co-next .btn { width: 100%; justify-content: center; min-height: 48px; margin-top: 1rem; }
.co-back { display: inline-block; margin-top: 1rem; color: var(--primary); text-decoration: underline; min-height: 24px; }
.co-receipt dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.25rem; font-size: .9375rem; margin: 0; }
.co-receipt dt { color: var(--co-muted); }
.co-receipt dd { font-weight: 600; text-align: right; margin: 0; overflow-wrap: anywhere; }
.co-bottom-badge { margin: 2rem 0 0; }

/* ---------- cancel page ---------- */
.co-cx { max-width: 580px; margin: 0 auto; }
.co-cx h1 { font-size: 2rem; margin-bottom: .5rem; }
.co-cx > p { color: var(--co-muted); }
.co-cx .co-card { margin-top: 1.25rem; }
.co-cx .co-submit { margin-top: .25rem; }
.co-cx-notes p { font-size: .875rem; color: var(--co-muted); margin-top: .7rem; }
.co-cx-lines p + p { margin-top: .6rem; }
.co-cx-lines { text-align: left; }

/* ---------- terms dialog ---------- */
.co-dialog { border: 0; border-radius: var(--radius-xl); padding: 0; width: min(760px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-shadow: 0 25px 80px rgba(0, 0, 0, .25); }
.co-dialog::backdrop { background: rgba(10, 15, 30, .55); }
.co-dialog[open] { display: flex; flex-direction: column; }
.co-dialog-head, .co-dialog-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--grey-200); }
.co-dialog-foot { border-bottom: 0; border-top: 1px solid var(--grey-200); }
.co-dialog-foot a { color: var(--primary); text-decoration: underline; }
.co-dialog-links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.co-dialog-head h2 { font-size: 1.25rem; }
.co-dialog-x { background: none; font-size: 1.75rem; line-height: 1; width: 48px; height: 48px; color: var(--dark); border-radius: var(--radius); }
.co-dialog-x:focus-visible { outline: 3px solid var(--primary); }
.co-dialog-body { overflow: auto; padding: 1rem 1.25rem; font-size: .9375rem; }

/* ---------- plan terms page ---------- */
.co-terms-page { max-width: 820px; margin: 0 auto; padding: 2.5rem 0 3rem; }
.co-terms-page h1 { font-size: 2.25rem; margin-bottom: .5rem; }
.co-terms-doc h2 { font-size: 1.2rem; margin: 1.5rem 0 .5rem; }
.co-terms-doc p, .co-terms-doc li { font-size: .9375rem; line-height: 1.65; }
.co-terms-doc p + p { margin-top: .6rem; }
.co-terms-doc ul, .co-terms-doc ol { margin: .4rem 0 .6rem 1.25rem; }
.co-terms-doc a { color: var(--primary); text-decoration: underline; }
.co-draft { background: var(--co-amber-bg); border: 1px solid var(--co-amber-line); border-radius: var(--radius); padding: .6rem .8rem; font-size: .875rem; margin: .75rem 0 1rem; }

/* ---------- responsive (site breakpoints 1024 / 768 / 480) ---------- */
@media (max-width: 1024px) {
  .co-grid { grid-template-columns: 1fr; }
  .co-summary { position: static; order: -1; }
}
@media (max-width: 768px) {
  .co-head h1, .co-cx h1, .co-ret h1 { font-size: 1.75rem; }
  .co-welcome-hero h1 { font-size: 1.85rem; }
  .co-welcome-body { grid-template-columns: 1fr; }
  .co-ret { padding: 2.5rem 0 2rem; }
}
@media (max-width: 480px) {
  .co-fld-2 { grid-template-columns: 1fr; }
  .co-card { padding: 1.1rem; }
  .co-lines li { font-size: .875rem; }
  .co-receipt dl { grid-template-columns: 1fr; gap: .1rem; }
  .co-receipt dd { text-align: left; margin-bottom: .45rem; }
  .co-bopt { flex: 1 1 100%; }
}
.co-stack { margin-top: 1.5rem; }
.co-due-note { margin-top: .25rem; }
/* Headings get programmatic focus on state changes (screen readers); no ring needed on them. */
h1[tabindex="-1"]:focus { outline: none; }
#currencyToggle[hidden] { display: none !important; }
.srv-cta[hidden] { display: none !important; }
/* No event pop-up over checkout, return or cancel forms (pages that render #coApp). */
body:has(#coApp) .mzpb { display: none !important; }
.co-welcome-hero .co-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.co-ret .co-actions + p { margin-top: 1rem; }

/* Plan Terms PDF (brief 26): printing the Plan Terms page prints only the Terms
   (no site menu, footer or chat button). The published PDF is made this way.
   Scoped to the Terms page itself (Terms inside <main>), so the cart's Terms dialog,
   which sits outside <main>, does not hide the cart when printing (review r7 L1). */
@media print {
  @page { size: Letter; margin: 16mm 15mm; }
  body:has(> main .co-terms-page) > *:not(main) { display: none !important; }
  body:has(> main .co-terms-page) .co-main { padding: 0; background: none; }
  main .co-terms-page h2 { break-after: avoid; }
  main .co-terms-page li, main .co-terms-page p { break-inside: avoid; }
}