/* checkout.css
   The self serve audit checkout: checkout.html.

   This file EXTENDS styles.css. Load order is not optional:

     <link rel="stylesheet" href="styles.css">
     <link rel="stylesheet" href="checkout.css">

   styles.css owns the tokens (BRAND.md sections 2 and 3), the reset, the type
   scale, the buttons, the header, the footer and the shared components:
   .wrap .lead .note .eyebrow .mono .muted .card .badge .btn. Nothing here
   redefines any of those.

   It deliberately does NOT load apply.css. That file is the five step
   application form and its field rules are scoped to `.q-form`. A checkout is a
   different shape: one column of fields, a summary that does not move, and a
   payment area owned by an iframe we do not control. The field styling below
   matches apply.css visually on purpose, so the two pages feel like one product
   without one importing the other's assumptions.

   Three inherited rules to keep in mind when editing the markup:

   1. styles.css sets `section { padding: var(--sec-pad) 0; border-top: 1px solid
      var(--rule) }`. That rhythm is wrong inside a checkout, so every block here
      is a <div> or a <fieldset>, never a <section>.
   2. styles.css sets `ul, ol { list-style: none; padding: 0 }`.
   3. `--alarm` and `--warn` appear only where they describe a real state: a
      validation error, a declined card, a VAT service that is not answering.
      BRAND.md section 3.
*/

/* ---------------------------------------------------------------------------
   0. Utilities styles.css does not have
   --------------------------------------------------------------------------- */

.co-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* This page carries no section nav, only the wordmark and one link. */
.site-head .btn { margin-left: auto; }

/* ---------------------------------------------------------------------------
   1. The test mode strip

   Visible, permanent, and not dismissible while Stripe is in test mode. A
   checkout that looks live but is not is the single most expensive kind of
   confusion, and hiding the difference to look finished would be exactly the
   thing we audit other people for.
   --------------------------------------------------------------------------- */

.co-testbar {
  background: var(--warn-dim);
  border-bottom: 1px solid var(--warn-line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-mono);
  line-height: 1.5;
}
.co-testbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
  padding: 9px 0;
}
.co-testbar b { color: var(--warn); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.co-testbar code {
  font-family: var(--mono);
  background: var(--surface);
  border: 1px solid var(--warn-line);
  border-radius: 3px;
  padding: 1px 6px;
}

/* ---------------------------------------------------------------------------
   2. Page intro
   --------------------------------------------------------------------------- */

.co-intro { padding: clamp(24px, 4.5vw, 44px) 0 clamp(16px, 2.5vw, 24px); }
.co-intro h1 { max-width: 20ch; font-size: clamp(1.7rem, 4.6vw, 2.5rem); }
.co-intro .lead { margin-top: 14px; max-width: 62ch; }

.co-meta {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.co-meta span::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--signal);
  margin-right: 8px;
  vertical-align: 2px;
}

/* ---------------------------------------------------------------------------
   3. The grid. One column on a phone, because that is where the ad opens.
   --------------------------------------------------------------------------- */

.co-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: clamp(96px, 12vw, 80px);
}

/* ---------------------------------------------------------------------------
   4. Panels: one per step, numbered, hairlines instead of shadows
   --------------------------------------------------------------------------- */

.co-panel {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  padding: clamp(16px, 3.2vw, 26px);
}
.co-panel + .co-panel { margin-top: 18px; }
.co-panel > legend { padding: 0; }

.co-panel-head {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 4px;
}
.co-panel-head .n {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--signal);
}
.co-panel-head h2 { font-size: var(--t-h3); }
.co-panel-note {
  color: var(--muted);
  font-size: var(--t-small);
  max-width: 62ch;
  margin: 0 0 20px 36px;
}

/* ---------------------------------------------------------------------------
   5. Fields
   --------------------------------------------------------------------------- */

.co-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

.co-field { margin-bottom: 18px; }
.co-field:last-child { margin-bottom: 0; }

.co-field > label,
.co-field .co-label {
  display: block;
  font-weight: 600;
  font-size: var(--t-small);
  margin-bottom: 7px;
}
.co-field > label .opt {
  font-weight: 400;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-left: 8px;
}

.co-hint {
  display: block;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 400;
  margin-top: 6px;
}

.co-form input[type="text"],
.co-form input[type="email"],
.co-form input[type="tel"],
.co-form select {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 11px 12px;
  line-height: 1.4;
}
/* 16px minimum on the fields a phone keyboard opens on, or iOS zooms the page
   and the layout jumps mid checkout. */
.co-form input, .co-form select { font-size: 16px; }

.co-form input::placeholder { color: var(--muted); opacity: 1; }
.co-form input[type="email"],
.co-form input[inputmode="numeric"],
.co-form input[data-mono] {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.co-form input:focus, .co-form select:focus { background: var(--surface); }
.co-form input[aria-invalid="true"],
.co-form select[aria-invalid="true"] {
  border-color: var(--alarm);
  background: var(--alarm-dim);
}

.co-form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.co-row { display: grid; grid-template-columns: 1fr; gap: 16px; }

.co-err {
  display: none;
  color: var(--alarm);
  font-size: var(--t-small);
  margin-top: 7px;
}
.co-err[data-open="true"] { display: block; }

/* The VAT field and its live status sit together, because the status is the
   answer to the field rather than a note about the page. */
.co-vatline {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: var(--t-small);
  min-height: 22px;
}
.co-vatline .badge { flex: none; }
.co-vatline .txt { color: var(--muted); max-width: 62ch; }

/* ---------------------------------------------------------------------------
   6. The VAT treatment block. This is the part that must never surprise
   anybody, so it is the most legible thing on the page after the total.
   --------------------------------------------------------------------------- */

.co-treat {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  border-radius: 4px;
  background: var(--paper);
  padding: 13px 15px;
  font-size: var(--t-small);
  line-height: 1.5;
}
.co-treat[data-state="warn"] { border-left-color: var(--warn); background: var(--warn-dim); }
.co-treat[data-state="alarm"] { border-left-color: var(--alarm); background: var(--alarm-dim); }
.co-treat[data-state="pending"] { border-left-color: var(--rule); }
.co-treat h3 {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.co-treat .headline { font-weight: 600; display: block; margin-bottom: 4px; }
.co-treat p { color: var(--ink-soft); }
.co-treat .mention {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   7. Payment
   --------------------------------------------------------------------------- */

/* The reserved height exists so the page does not jump when the Element
   appears. It is released the moment the Element resolves, one way or the
   other, so a failed load does not leave a hole where a card field is not. */
.co-pay-mount[data-state="loading"] { min-height: 180px; }
.co-pay-mount[data-state="loading"]::after {
  content: "Loading the payment form.";
  display: block;
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
  padding: 18px 0;
}

.co-secure {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
  line-height: 1.7;
}
.co-secure b { color: var(--ink); font-weight: 600; }

.co-submit-row {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.co-submit-row .btn { cursor: pointer; flex: 1 1 auto; justify-content: center; }
.co-submit-row .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.co-submit-row .btn[data-busy="true"] { cursor: progress; }

/* The spinner is a rotating hairline, not a brand moment. Motion: low. */
.co-spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--on-ink-line);
  border-top-color: var(--surface);
  border-radius: 50%;
  animation: co-rot 700ms linear infinite;
  flex: none;
}
@keyframes co-rot { to { transform: rotate(360deg); } }

.co-submit-note {
  font-size: var(--t-small);
  color: var(--muted);
  max-width: 64ch;
}

/* ---------------------------------------------------------------------------
   8. Errors and notices
   --------------------------------------------------------------------------- */

.co-alert {
  border: 1px solid var(--alarm-line);
  border-left: 3px solid var(--alarm);
  background: var(--alarm-dim);
  border-radius: 4px;
  padding: 12px 15px;
  font-size: var(--t-small);
  line-height: 1.5;
  margin-bottom: 18px;
}
.co-alert h3 { font-size: var(--t-small); color: var(--alarm); margin-bottom: 6px; }
.co-alert a { color: var(--alarm); }
.co-alert--warn { border-color: var(--warn-line); border-left-color: var(--warn); background: var(--warn-dim); }
.co-alert--warn h3 { color: var(--warn); }
.co-alert--plain {
  border-color: var(--rule);
  border-left-color: var(--signal);
  background: var(--paper);
}
.co-alert--plain h3 { color: var(--ink); }

/* ---------------------------------------------------------------------------
   9. The order summary. On a phone it comes first, so nobody fills six fields
   before finding out what they are buying.
   --------------------------------------------------------------------------- */

.co-summary {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}
.co-summary-head {
  background: var(--ink);
  color: var(--paper);
  padding: 13px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}
.co-summary-head .who {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
}
.co-summary-head .who .dot { width: 9px; height: 9px; background: var(--signal); border-radius: 2px; flex: none; }
.co-summary-head .tierlabel { margin-left: auto; font-size: var(--t-small); color: var(--on-ink); }

.co-summary-body { padding: 14px 16px; }

.co-lines { font-size: var(--t-small); }
.co-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
}
.co-line:last-child { border-bottom: 0; }
.co-line .lbl { min-width: 0; }
.co-line .lbl small { display: block; color: var(--muted); }
.co-line .amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 500;
}
.co-line--credit .amt { color: var(--signal); }
.co-line--vat .amt { font-weight: 400; }

.co-total {
  margin-top: 4px;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.co-total .lbl {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.co-total .amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.co-total[data-stale="true"] .amt { color: var(--muted); }

/* A value the page is waiting for. Same device as .slot on the landing page:
   a blank, never a placeholder number that might be wrong. */
.co-slot {
  display: inline-block;
  min-width: 72px;
  font-family: var(--mono);
  color: var(--muted);
  border-bottom: 1.5px dashed var(--rule);
  background: var(--paper-warm);
  border-radius: 2px;
  padding: 1px 8px;
}

.co-summary-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  padding: 13px 16px;
  font-size: var(--t-small);
  line-height: 1.5;
}
.co-summary-foot h3 {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.co-next { counter-reset: co; }
.co-next li {
  counter-increment: co;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  padding: 5px 0;
  color: var(--ink-soft);
}
.co-next li::before {
  content: counter(co, decimal-leading-zero);
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 600;
  color: var(--signal);
  padding-top: 3px;
}
.co-summary-foot .terms {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--t-small);
}

/* Availability. A number only where the server published one. No countdown, no
   timer, no "ends in". offer/TIERS.md section 9.7. */
.co-avail {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--t-mono);
  color: var(--muted);
  line-height: 1.6;
}
.co-avail b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------------------
   10. The tier ladder, when the visitor has not chosen yet or cannot buy this one
   --------------------------------------------------------------------------- */

.co-tiers { display: grid; grid-template-columns: 1fr; gap: 12px; }

.co-tier {
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  padding: 15px 16px;
}
.co-tier[data-current="true"] { border-color: var(--signal); background: var(--signal-dim); }
.co-tier[data-purchasable="false"] { background: var(--paper); }

.co-tier-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 6px;
}
.co-tier-head h3 { font-size: 1.05rem; }
.co-tier-head .price {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.co-tier-head .price small { font-weight: 400; color: var(--muted); font-size: var(--t-mono-sm); }
.co-tier p { font-size: var(--t-small); color: var(--muted); }
.co-tier .co-tier-why {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: var(--t-small);
  color: var(--ink-soft);
}
.co-tier .co-tier-act { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; }
.co-tier .co-tier-act .btn { cursor: pointer; }

/* ---------------------------------------------------------------------------
   11. Sticky total on small screens. A total, not a timer.
   --------------------------------------------------------------------------- */

.co-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--ink);
  color: var(--paper);
  border-top: 1px solid var(--on-ink-rule);
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.co-sticky .lbl {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-muted);
  display: block;
}
.co-sticky .amt {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 600;
}
.co-sticky .btn { margin-left: auto; cursor: pointer; }
.co-sticky .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   12. The result panel, after Stripe answers
   --------------------------------------------------------------------------- */

.co-result { padding: clamp(24px, 5vw, 56px) 0 clamp(48px, 7vw, 80px); max-width: 760px; }
.co-result h1 { margin-top: 14px; max-width: 22ch; }
.co-result .lead { margin-top: 14px; max-width: 64ch; }
.co-result .co-next { margin-top: 20px; }
.co-result .co-kv {
  margin-top: 22px;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
}
.co-result .co-kv th, .co-result .co-kv td {
  text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.co-result .co-kv th { font-weight: 400; color: var(--muted); width: 44%; padding-right: 16px; }
.co-result .co-kv td { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   13. Breakpoints
   --------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .co-row { grid-template-columns: 1fr 1fr; gap: 18px; }
  .co-row--wide { grid-template-columns: 2fr 1fr; }
}

@media (min-width: 900px) {
  .co-grid {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 40px;
    align-items: start;
    padding-bottom: clamp(48px, 7vw, 80px);
  }
  /* Source order puts the summary first for a phone. On a wide screen it
     belongs on the right, and the grid moves it without moving the DOM, so the
     tab order still reads what you are buying before how you pay. */
  .co-aside { grid-column: 2; grid-row: 1; position: sticky; top: 20px; }
  .co-main { grid-column: 1; grid-row: 1; }
  .co-sticky { display: none; }
  .co-tiers { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899px) {
  /* Room for the sticky bar, so the last field is never under it. */
  .co-grid { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-spin { animation: none; border-top-color: var(--on-ink-line); }
}

@media print {
  .co-sticky, .co-testbar, .site-head { display: none; }
  .co-panel { break-inside: avoid; }
}