/* ============================================================================
   Checkout — design template.

   Loaded AFTER landing.css, which supplies the tokens, reset, typography and
   button styles. Nothing here redefines a token; if a value looks missing it
   lives in landing.css.

   ⚠️ SHARED BY TWO PAGES: checkout.html, which takes real payment, and
   checkout-preview.html, the design template. The .co-fake / .co-brands /
   .co-card-fields / .co-select / .co-hint / .co-hint-note rules below are used
   ONLY by the preview, where the card fields are non-input stand-ins. They look
   dead from checkout.html and are not — grep both files before deleting anything
   here. (.co-hint joined that list when the email hint was dropped from the live
   page; the preview still carries it.)
   ========================================================================== */

:root{
  --co-placeholder:#A0928A;   /* only used here: sits between --ink-300 and --ink-500 */
  --co-max:1080px;
}

.co-body{background:var(--paper-alt);min-height:100vh;display:flex;flex-direction:column;}

/* ---------- top bar ---------- */
.co-bar{background:var(--paper);border-bottom:1px solid var(--ink-200);}
.co-bar-inner{
  max-width:var(--co-max);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2rem);height:72px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.co-back{
  display:inline-flex;align-items:center;gap:.375rem;
  font-size:var(--fs-sm);font-weight:550;color:var(--ink-500);
  transition:color .16s ease;
}
.co-back:hover{color:var(--ink-800);}
.co-back svg{width:16px;height:16px;}

/* ---------- layout ---------- */
.co-main{flex:1;padding-block:clamp(2.25rem,5vw,4rem);}
.co-grid{
  max-width:var(--co-max);margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2rem);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,452px);
  gap:clamp(2rem,5vw,4rem);align-items:start;
}

/* ---------- left: the pitch ---------- */
.co-left h1{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.1;}
.co-left .lead{margin-top:1rem;max-width:38ch;}

.co-benefits{margin-top:2.25rem;display:flex;flex-direction:column;gap:1.375rem;}
.co-benefits li{display:flex;gap:1rem;align-items:flex-start;}
/* Historic, kept because it explains a constraint the outline inherits: the fill used to
   be --brand-tint rather than --brand-wash, because this page sits on --paper-alt rather
   than white and the wash was so close to it that the tiles all but disappeared. Same
   trap applies to any future fill here. */
/* Outlined rather than filled: the --brand-tint fill is gone and a 1px --brand-cta edge
   holds the shape instead. Safe at 42px because width and height are BOTH set explicitly,
   so the global box-sizing:border-box absorbs the border and the tile stays 42x42 with a
   40x40 content area. (Contrast .btn-outline in landing.css, which sets neither, sizes to
   content, and therefore had to take the border back out of its padding.) */
.co-bi{
  width:42px;height:42px;flex:none;border-radius:12px;
  border:1px solid var(--brand-cta);color:var(--brand-cta);display:grid;place-items:center;
}
.co-bi svg{width:19px;height:19px;}
.co-benefits b{
  display:block;font-size:1rem;font-weight:650;color:var(--ink);
  letter-spacing:-.015em;margin-bottom:.1875rem;
}
/* Scoped to the text column. A bare `.co-benefits span` also matches .co-bi — which is
   itself a <span> — and beat it on specificity, greying out the icons and killing the
   grid centring that keeps them in the middle of their tile. */
.co-benefits li > div > span{
  display:block;font-size:var(--fs-sm);color:var(--ink-500);line-height:1.55;
}

/* ---------- right: the order card ---------- */
/* No outline — the shadow alone lifts it off --paper-alt. The internal rules between
   summary / fields / total stay; they separate, they aren't an edge. */
.co-card{
  background:var(--paper);
  border-radius:var(--r-md);box-shadow:var(--sh-lg);overflow:hidden;
}

/* Flat white throughout — the dividing rules do the separating, not fills. */
.co-plan{
  padding:1.5rem 1.625rem;
  background:var(--paper);
  border-bottom:1px solid var(--ink-200);
}
.co-plan-head{display:flex;align-items:center;gap:.625rem;}
.co-plan-name{font-size:.6875rem;font-weight:700;letter-spacing:.11em;color:var(--ink-500);}
.co-plan-price{display:flex;align-items:baseline;gap:.625rem;flex-wrap:wrap;margin-top:.625rem;}
.co-plan-price b{font-size:2.5rem;font-weight:750;color:var(--ink);letter-spacing:-.04em;line-height:1;}
/* Matches the landing pricing card's "/ ONE TIME" exactly, since it is the same string
   one step earlier in the same funnel. Mirrors .plan-price .per-once in landing.css:
   14px, --brand-deep, .06em tracking, weight 500 (the weight comes from .plan-price .per
   there, so it has to be stated here).
   ⚠️ The four values are duplicated rather than shared, and nothing keeps them in step.
   They cannot be shared: .per-once is scoped .plan-price .per-once at 0,2,0 specifically
   so it beats .plan-price .per, and unscoping it to a bare .per-once would drop it to
   0,1,0 and let .per win on the landing page instead. If one moves, move both. */
.co-plan-price span{font-size:14px;color:var(--brand-deep);letter-spacing:.06em;font-weight:500;}
.co-incl{margin-top:1.25rem;display:grid;gap:.5rem;}
.co-incl li{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-sm);color:var(--ink-700);}
.co-incl svg{width:15px;height:15px;color:var(--teal);flex:none;}

/* ---------- wallets ---------- */
/* Hidden until the Express Checkout Element says it has something to draw, so the
   divider never appears on its own. [hidden] alone would be enough, but .co-fields
   is a flex column and its `gap` still reserves space around a hidden child in some
   engines, so the display is stated outright. */
.co-express[hidden]{display:none;}
.co-express{display:flex;flex-direction:column;gap:1.125rem;}

/* "Or pay by card", a centred rule with the label knocked out of it. */
.co-or{display:flex;align-items:center;gap:.75rem;color:var(--ink-500);font-size:.75rem;}
.co-or::before,.co-or::after{content:'';flex:1;height:1px;background:var(--ink-200);}

/* ---------- fields ---------- */
.co-fields{padding:1.5rem 1.625rem;display:flex;flex-direction:column;gap:1.125rem;}
.co-field > label{
  display:block;font-size:.8125rem;font-weight:600;
  color:var(--ink-800);margin-bottom:.4375rem;
}
.co-field input,
.co-select select{
  width:100%;height:46px;padding:0 .875rem;
  border:1px solid var(--ink-300);border-radius:10px;background:var(--paper);
  font-family:inherit;font-size:.9375rem;color:var(--ink-800);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.co-field input::placeholder{color:var(--co-placeholder);}
.co-field input:focus,
.co-select select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint);
}
.co-hint{font-size:.75rem;color:var(--ink-500);margin-top:.4375rem;}
.co-hint-note{color:var(--brand-cta-hov);font-weight:550;}

.co-select{position:relative;}
.co-select select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.5rem;}
.co-select svg{
  position:absolute;right:.875rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-500);pointer-events:none;
}

/* --- the Stripe Elements stand-in. Styled to match the real inputs above so the
       page reads correctly, but built from divs so it cannot accept input. --- */
.co-card-fields{display:flex;flex-direction:column;gap:.5rem;}
.co-fake{
  height:46px;padding:0 .875rem;
  border:1px solid var(--ink-300);border-radius:10px;background:var(--paper);
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  font-size:.9375rem;color:var(--co-placeholder);
}
.co-fake-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;}
.co-brands{display:flex;align-items:center;gap:.3125rem;flex:none;}
.co-brands i{
  font-style:normal;font-size:.5rem;font-weight:800;letter-spacing:.02em;
  color:#fff;border-radius:3px;padding:.25rem .25rem;line-height:1;
}
.co-brands .visa{background:#1A1F71;}
.co-brands .amex{background:#006FCF;}
.co-brands .mc{
  width:21px;height:14px;padding:0;position:relative;background:#F1EDEA;
}
.co-brands .mc::before,
.co-brands .mc::after{
  content:'';position:absolute;top:50%;width:10px;height:10px;
  border-radius:50%;transform:translateY(-50%);
}
.co-brands .mc::before{left:1px;background:#EB001B;}
.co-brands .mc::after{right:1px;background:#F79E1B;mix-blend-mode:multiply;}

/* ---------- total + submit ---------- */
.co-total{
  padding:1.25rem 1.625rem;background:var(--paper);
  border-top:1px solid var(--ink-200);
  display:flex;flex-direction:column;gap:.5rem;
}
.co-total-row{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-sm);color:var(--ink-600);}
.co-total-sum{
  padding-top:.625rem;border-top:1px solid var(--ink-200);
  font-size:1rem;font-weight:700;color:var(--ink);
}

.co-submit{
  margin:1.25rem 1.625rem 0;width:calc(100% - 3.25rem);
  height:52px;font-size:1rem;
}

/* ⚠️ NOT cosmetic. checkout.js disables this button from first paint until Stripe has
   loaded, and leaves it disabled for good if the session fails. landing.css has no
   :disabled rule at all, so without this it sits there in full brand orange with a
   pointer cursor: a buyer clicks the live-looking pay button on the page holding their
   card, and nothing happens, with nothing to say why.

   Scoped to .co-submit rather than .btn on purpose. Giving every .btn a disabled state
   is a change to the landing page, which is not this page's call to make. */
.co-submit:disabled,
.co-submit:disabled:hover{
  background:var(--ink-300);color:var(--paper);
  box-shadow:none;cursor:not-allowed;
}
/* The arrow's hover nudge is on .btn-primary:hover .ico and would still fire. */
.co-submit:disabled:hover .ico{transform:none;}

/* ---------- loading skeletons ---------- */
/* Every figure in this card is served, so on first paint there is nothing to show.
   Blank space would read as a broken render on a page asking for a card, so the shapes
   are held instead. The elements keep their &nbsp; and go transparent, which means the
   bar is the real element at its real size and nothing shifts when the text lands. */
.co-card.is-loading-plan .co-plan-name,
.co-card.is-loading-plan .co-plan-price b,
.co-card.is-loading-totals .co-amt{
  display:inline-block;border-radius:6px;
  background:var(--ink-100);color:transparent;
  user-select:none;animation:co-pulse 1.4s ease-in-out infinite;
}
.co-card.is-loading-plan .co-plan-name{min-width:8.5rem;}
.co-card.is-loading-plan .co-plan-price b{min-width:6.5rem;}
.co-card.is-loading-totals .co-amt{min-width:4.5rem;}

/* visibility, not display: the row keeps its height, so the list does not jump. */
.co-card.is-loading-plan .co-dyn{visibility:hidden;}

/* The "/ ONE TIME" suffix is empty until the plan lands and needs no bar of its own —
   a second one beside the price would read as a second figure. */
.co-card.is-loading-plan .co-plan-price span{display:none;}

@keyframes co-pulse{50%{opacity:.55;}}
@media (prefers-reduced-motion:reduce){
  .co-card.is-loading-plan .co-plan-name,
  .co-card.is-loading-plan .co-plan-price b,
  .co-card.is-loading-totals .co-amt{animation:none;}
}


/* Top padding has now been both ways: 1rem originally, .75rem while the guarantee block
   sat between this line and the button and supplied the separation itself, and 1.5rem
   since that block was removed. It is load-bearing spacing, not a round number. */
/* Payment errors, shown under the button. Not display:none — the [hidden] attribute is
   what toggles it, so a screen reader announces it via role="alert" the moment it appears
   rather than having to be moved into view. */
.co-error{
  margin-top:.875rem;padding-inline:1.625rem;text-align:center;
  font-size:var(--fs-sm);color:#D6371C;line-height:1.5;
}
.co-error[hidden]{display:none;}

.co-secure{
  display:flex;align-items:center;justify-content:center;gap:.4375rem;
  padding:1.5rem 1.625rem 1.5rem;font-size:.75rem;color:var(--ink-500);
}
.co-secure svg{width:14px;height:14px;flex:none;}

/* ---------- footer ---------- */
.co-foot{
  max-width:var(--co-max);margin-inline:auto;width:100%;
  padding:1.5rem clamp(1.25rem,4vw,2rem) 2.5rem;
  display:flex;justify-content:space-between;align-items:center;
  gap:.75rem 1.5rem;flex-wrap:wrap;
  font-size:var(--fs-xs);color:var(--ink-500);
}
.co-foot-links{display:flex;gap:1.25rem;}
.co-foot a{transition:color .16s ease;}
.co-foot a:hover{color:var(--ink-800);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  /* card first: anyone landing here already clicked "Get Lifetime" */
  .co-grid{grid-template-columns:minmax(0,1fr);gap:2.5rem;}
  /* The order pull on .co-right is gone: the left column now leads on a phone, which is
     DOM order, so nothing needs stating. It used to be order:-1, putting the order
     summary and card form first. */
  .co-left .lead{max-width:none;}
}
@media (max-width:520px){
  .co-plan,.co-fields,.co-total{padding-inline:1.125rem;}
  .co-submit{margin-inline:1.125rem;width:calc(100% - 2.25rem);}
  .co-error,.co-secure{padding-inline:1.125rem;}
  .co-bar-inner{height:64px;}
}