/* ==================================================================
   checkout.css - THE EMBEDDED CHECKOUT OVERLAY AND THE ORDER BUMP.

   Moved here out of landing.css on 2026-09-24, verbatim, so the overlay can
   open on /thank-you (the add-on upsell) without that page loading
   landing.css, which restyles it (measured: +65px at 390). Loaded by
   index.html, bundle.html and thank-you.html, after their other
   stylesheets. Nothing here is duplicated anywhere else.

   The overlay's rise animation is `xi-rise`, defined with the exit modal in
   landing.css; on /thank-you, which has no exit modal, the box simply
   appears without the rise.
   ================================================================== */

/* ==================================================================
   5.  THE EMBEDDED-CHECKOUT MODAL.

   This one has no reference to measure: neither Otis nor Bertha embeds a
   checkout - both send the reader to a hosted page. So it is built on the
   card this page already has. `.co` is `.xi` with the padding taken down
   and a wider box, and `.co-close` is `.xi-close` at the same 44px target.
   Same backdrop colour, same blur, same rise animation, same scroll lock.

   THE BOX IS 520px AND THE BODY SCROLLS, NOT THE PAGE. The Whop element is
   about 890px tall at a phone width with every payment method open, which
   is taller than a phone. `max-height:100%` on the box plus
   `overflow-y:auto` on the body means the head with its close button stays
   put while the form scrolls under it - a reader who has scrolled to the
   pay button can always still reach the X.

   `-webkit-overflow-scrolling` and `overscroll-behavior:contain` are both
   here on purpose: the first is what makes the inner scroll feel native on
   an older iPhone, the second is what stops a flick at the end of the form
   scrolling the page behind the overlay.

   THE FORM IS AN IFRAME AND WE DO NOT STYLE INSIDE IT. Whop renders it;
   nothing in this file can reach it and nothing tries to.
   ================================================================== */
.co{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:flex-start;justify-content:center;
  padding:16px;
  background:rgba(10,42,46,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  overflow-y:auto;
}
.co.open{display:flex}
.co-box{
  position:relative;margin:auto;
  width:100%;max-width:520px;max-height:100%;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line-strong);
  border-radius:12px;
  box-shadow:0 22px 60px -10px rgba(0,0,0,.35);
  overflow:hidden;
  animation:xi-rise .4s cubic-bezier(.16,.84,.27,1) both;
}
@media (prefers-reduced-motion:reduce){.co-box{animation:none}}

.co-head{
  flex:none;
  display:flex;align-items:center;gap:12px;
  padding:12px 56px 12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--tile);
}
.co-thumb{display:block;flex:none;width:34px}
.co-thumb img{
  display:block;width:100%;height:auto;border-radius:2px;
  box-shadow:0 3px 8px rgba(34,39,31,.3);
}
.co-title{
  font-family:var(--serif);font-weight:700;
  font-size:15px;line-height:1.3;color:var(--ink);
  margin:0;max-width:none;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.co-close{
  position:absolute;top:4px;right:6px;
  background:none;border:0;
  font-family:var(--serif);font-size:1.8rem;line-height:1;
  color:var(--ink-mute);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0;
}
.co-close:hover{color:var(--ink)}
.co-close:focus-visible{outline:3px solid var(--accent);outline-offset:-4px}

.co-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:14px 16px 18px;
  background:#fff;
}
/* The line that stands in for the form while it loads. It is a <p role=
   status>, so a screen reader is told the checkout is opening rather than
   being left on a silent empty dialog. It is hidden by onReady and by
   nothing else - if the element never becomes ready, the watchdog has
   already taken the reader to the hosted checkout. */
.co-spin{
  font-family:var(--ui);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-mute);
  text-align:center;margin:28px 0;max-width:none;
}
.co-spin[hidden]{display:none}
#whop-checkout{min-height:0}

@media (max-width:480px){
  .co{padding:0}
  .co-box{max-width:none;border-radius:0;border:0;min-height:100%}
  .co-body{padding:12px 12px 20px}
}


/* A bundle's header image is a photograph of two or three books side by
   side, not a single 2:3 cover, so the slot widens for it instead of
   squashing the picture. 56px keeps the title on one line at 390. */
.co-thumb--set{width:56px}

/* The wait. The ring is decorative and the line under it is the status;
   both are centred in the body where the checkout will appear. */
.co-wait{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0 6px}
.co-wait[hidden]{display:none}
.co-ring{
  display:block;width:26px;height:26px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);
  animation:co-spin 900ms linear infinite;
}
@keyframes co-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .co-ring{animation:none;border-top-color:var(--line-strong)}
}


/* The bump: two real checkboxes, each a whole label, above Whop's form.
   A 22px box and a 44px row for a reader who taps with a thumb. */
.co-bump{
  margin:0 0 14px;padding:10px 12px;min-width:0;
  border:1px dashed var(--line-strong);border-radius:10px;background:var(--tile);
  display:flex;flex-direction:column;gap:8px;
}
.co-bump[hidden]{display:none}
/* CVR ROUND 4: the legend is visible now - small caps, muted. Floated so
   it sits inside the dashed box instead of on its border. */
.co-bump-h{
  float:left;width:100%;padding:0;margin:0 0 2px;
  font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);line-height:1.3;
}
.co-bump-h + *{clear:both}
/* THE STRUCK PRICE, AS THE CARD'S STRUCK $79 (2026-09-24): the same
   face (Oswald, inherited), regular weight, --ink-mute, a line through;
   about three quarters of the live price's size, and a small gap after
   it. The live price stays in the bold, dark title. */
.co-bump-was{font-size:.75em;font-weight:400;color:var(--ink-mute);text-decoration:line-through;margin-left:6px}
.co-bump-row{
  display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;
}
.co-bump-row input{
  flex:none;width:22px;height:22px;margin:0;accent-color:var(--free-green);cursor:pointer;
}
.co-bump-row input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.co-bump-cov{display:block;flex:none;width:28px}
.co-bump-cov img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 2px 6px rgba(34,39,31,.3)}
.co-bump-txt{display:flex;flex-direction:column;min-width:0}
.co-bump-txt b{font-family:var(--ui);font-size:15px;line-height:1.3;color:var(--ink);font-weight:700}
.co-bump-txt small{font-size:13px;line-height:1.35;color:var(--ink-mute)}
.co-bump.is-busy .co-bump-row{cursor:progress}


/* ==================================================================
   CVR ROUND 4, 2026-09-24 - THE CHECKOUT'S ONE-LINE NOTE.
   Under the plan's title in the overlay header, on every plan: 12px,
   muted, one line (it fits the title column at 390 with the widest,
   56px bundle thumbnail beside it).
------------------------------------------------------------------ */
.co-titles{display:flex;flex-direction:column;min-width:0}
.co-note{
  margin:1px 0 0;max-width:none;
  font-size:12px;line-height:1.35;color:var(--ink-mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ==================================================================
   THE ADD-ON UPSELL ON /thank-you, 2026-09-24. The bump's box and type,
   for a buyer of the Rule Book alone. Each row is a link that opens the
   same embedded checkout on an add-on plan (A, C, AC).
------------------------------------------------------------------ */
.ty-up{
  width:100%;max-width:520px;margin:2rem auto 0;text-align:left;
}
.ty-up[hidden]{display:none}
.ty-up .co-bump{margin:0}
.ty-up-row{
  display:flex;align-items:center;gap:10px;min-height:52px;padding:4px 6px;margin:0 -6px;
  border-radius:8px;text-decoration:none;color:inherit;
}
.ty-up-row:hover{background:rgba(17,63,68,.05)}
.ty-up-row:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.ty-up-row .co-bump-txt{flex:1 1 auto}
.ty-up-go{flex:none;font-family:var(--serif);font-size:20px;line-height:1;color:var(--accent)}
.co-bump-cov--two{display:flex;gap:3px;width:auto}
.co-bump-cov--two picture{display:block;width:22px}
.co-bump-cov--two img{display:block;width:100%;height:auto;border-radius:2px;box-shadow:0 2px 6px rgba(34,39,31,.3)}