/* Curing Your Income Illness · STEP 1 OF 2, your details before Stripe (DRAFT 24 Oct 2026, for Zandre's look; not live).
   Every buy button opens this card instead of leaving for Stripe at once: first name + email, then Stripe's checkout with the
   email already filled in. Someone who leaves Stripe without paying is now a named contact the Cure follow-up emails can reach.
   The same ivory paper as the tickets, the ink button. Desktop: a card in the middle. Phone: a sheet from the bottom. */

.co{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.co[hidden]{display:none}
.co:not([hidden]) ~ .bar{transform:translateY(110%)}   /* the sticky ticket bar steps away while the card is open */
.co-back{position:absolute;inset:0;background:rgba(3,5,10,.78);animation:co-fade .3s var(--ease)}
.co-card{position:relative;width:100%;max-width:470px;max-height:calc(100svh - 48px);overflow:auto;overscroll-behavior:contain;
  background:var(--paper);color:var(--paper-ink);border-radius:26px;padding:34px 34px 26px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.95),0 0 0 1px rgba(228,196,127,.45),0 0 90px -30px rgba(228,196,127,.4);
  animation:co-rise .45s var(--ease)}
@keyframes co-fade{from{opacity:0}}
@keyframes co-rise{from{opacity:0;transform:translateY(18px)}}

.co-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--paper-mute);cursor:pointer;display:grid;place-items:center}
.co-x:hover{background:rgba(20,22,31,.06);color:var(--paper-ink)}
.co-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.co-step{margin:0 0 10px;font:650 12px/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--paper-gold)}
.co-title{margin:0;padding-right:28px;font:800 clamp(26px,3vw,32px)/1.04 var(--display);letter-spacing:-.014em;text-transform:uppercase;color:var(--paper-ink);text-wrap:balance}
.co-sub{margin:10px 0 0;font:500 15.5px/1.45 var(--body);color:var(--paper-mute)}

/* the ticket choice: the button pressed picks it, one tap switches it */
.co-pick{margin:22px 0 0;padding:0;border:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.co-opt{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 14px 13px;border-radius:16px;cursor:pointer;
  background:#FFFDF8;box-shadow:0 0 0 1.5px rgba(138,106,46,.28) inset;transition:box-shadow .2s,background .2s}
.co-opt input{position:absolute;opacity:0;pointer-events:none}
.co-opt b{font:800 26px/1 var(--display);letter-spacing:-.03em;color:var(--paper-ink)}
.co-opt b small{margin-left:5px;font:650 11px/1 var(--body);letter-spacing:.1em;color:var(--paper-mute)}
.co-opt span{font:650 11.5px/1.3 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--paper-gold)}
.co-opt em{font:400 13.5px/1.35 var(--body);font-style:normal;color:var(--paper-mute)}
.co-opt:has(input:checked){background:#FFF6DE;box-shadow:0 0 0 2px #14161F inset}
.co-opt:has(input:focus-visible){outline:2px solid var(--paper-gold);outline-offset:3px}

/* the two boxes */
.co-form{margin:0}
.co-field{display:block;margin:16px 0 0}
.co-field > span{display:block;margin:0 0 7px;font:650 12px/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#4A4E5A}
.co-field input{width:100%;height:54px;padding:0 16px;border:0;border-radius:14px;background:#FFFDF8;color:var(--paper-ink);
  font:500 17px/1 var(--body);box-shadow:0 0 0 1.5px rgba(20,22,31,.18) inset;transition:box-shadow .2s;-webkit-appearance:none;appearance:none}
.co-field input::placeholder{color:#9A9DA8}
.co-field input:focus{outline:0;box-shadow:0 0 0 2px var(--paper-ink) inset}
.co-field input.is-bad{box-shadow:0 0 0 2px #C0392B inset}
.co-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.co-err{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#FBE9E5;color:#8E2A1E;font:500 14.5px/1.4 var(--body)}
.co-err[hidden]{display:none}

.co-go{margin-top:22px}
.co-go[disabled]{opacity:.75;cursor:progress;transform:none}
.co-fine{margin:12px 0 0;text-align:center;font:400 13px/1.5 var(--body);color:var(--paper-mute)}
.co-lock{display:inline-block;width:12px;height:12px;margin:0 5px -1px 0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.co-110{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 0;padding:12px 0 0;border-top:1px solid rgba(138,106,46,.2)}
.co-110 b{font:800 22px/.9 var(--display);letter-spacing:-.03em;color:var(--paper-gold)}
.co-110 span{font:650 11.5px/1.25 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--paper-ink)}

/* the hand-over: a short "taking you to checkout" while the browser leaves for Stripe */
.co-going{text-align:center;padding:26px 0 8px}
.co-going p{margin:14px 0 0;font:500 15.5px/1.5 var(--body);color:var(--paper-mute)}
.co-going b{display:block;font:800 22px/1.15 var(--display);text-transform:uppercase;color:var(--paper-ink)}
.co-spin{width:34px;height:34px;margin:0 auto;border-radius:50%;border:3px solid rgba(138,106,46,.25);border-top-color:var(--paper-gold);animation:co-spin .8s linear infinite}
@keyframes co-spin{to{transform:rotate(360deg)}}
.co-preview{margin:16px 0 0;padding:12px 14px;border-radius:12px;background:#EEF3FB;color:#24406E;font:500 13.5px/1.45 var(--body);text-align:left;word-break:break-all}

/* PHONE: a sheet from the bottom, one thumb away, the boxes big enough that iOS never zooms (16 px or more) */
@media (max-width:760px){
  .co{align-items:flex-end;padding:0}
  .co-card{max-width:none;max-height:92svh;border-radius:24px 24px 0 0;padding:22px 18px calc(14px + env(safe-area-inset-bottom));animation:co-sheet .4s var(--ease)}
  @keyframes co-sheet{from{transform:translateY(40px);opacity:.4}}
  .co-x{top:8px;right:8px}
  .co-step{margin-bottom:6px;font-size:11.5px}
  .co-title{font-size:23px}
  .co-sub{font-size:14px;margin-top:6px}
  .co-pick{margin-top:14px;gap:8px}
  .co-opt{padding:10px 12px}
  .co-opt b{font-size:21px}
  .co-field{margin-top:10px}
  .co-field > span{margin-bottom:5px;font-size:11.5px}
  .co-field input{height:50px}
  .co-go{--h:54px;margin-top:16px}
  .co-fine{margin-top:10px;font-size:12.5px}
  .co-110{margin-top:10px;padding-top:10px}
}
@media (prefers-reduced-motion:reduce){.co-back,.co-card{animation:none}.co-spin{animation-duration:2s}}