/* plan-checkout.css — the close.
 *
 * Values follow the approved artefact. Palette is the platform's warm set,
 * declared locally rather than assumed: this renders inside app.html, whose
 * shell uses some of the same token names for different colours.
 */
.ock-overlay{
  --k-ink:#2a2030; --k-ink2:#5a4d62; --k-ink3:#8b7e92; --k-ink4:#b8acbb;
  --k-line:#ebe1c9; --k-linestrong:#d8cdaf; --k-cream:#faf6ec; --k-cream2:#f3ecdb;
  --k-accent:#6a4cf1; --k-accentsoft:#ece6ff; --k-accentdeep:#4a32b8;
  --k-good:#4f7c54; --k-goodsoft:#e4ecdc; --k-gold:#b8860b; --k-goldsoft:#faf0d8;
  --k-live:#ec1075; --k-bad:#b4232a;
  position:fixed; inset:0; z-index:9600;
  background:rgba(20,12,30,.55); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--k-ink);
}
.ock-overlay[hidden]{display:none;}
body.ock-open{overflow:hidden;}

.ock-panel{
  background:#fff; border-radius:18px; width:100%; max-width:1000px;
  max-height:calc(100vh - 40px); display:flex; flex-direction:column;
  overflow:hidden; box-shadow:0 40px 100px -30px rgba(42,32,48,.55);
}
.ock-load{margin:64px auto; color:var(--k-ink3); font-size:14px; text-align:center;}

.ock-bar{
  display:flex; align-items:center; gap:10px; flex:0 0 auto;
  padding:11px 16px; border-bottom:1px solid var(--k-line); background:var(--k-cream); font-size:12.5px;
}
.ock-back{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-family:inherit;
  border:1px solid var(--k-linestrong); background:#fff; border-radius:7px; padding:4px 9px;
  font-size:11.5px; color:var(--k-ink2);
}
.ock-back:hover{color:var(--k-ink);}
.ock-ttl{font-weight:650;}
.ock-x{
  margin-left:auto; width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  background:var(--k-cream2); color:var(--k-ink2);
  display:flex; align-items:center; justify-content:center;
}
.ock-x:hover{background:var(--k-ink); color:var(--k-cream);}

/* ⚠️ THE COLUMNS SCROLL, THE PANEL DOES NOT. Nine tier rows plus the order
   block is taller than a laptop; only this region moves. */
.ock-cols{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  display:grid; grid-template-columns:1fr;
}
@media(min-width:880px){ .ock-cols{grid-template-columns:1.15fr .85fr;} }
.ock-l{padding:24px 26px;}
.ock-r{padding:24px 26px; background:var(--k-cream); border-top:1px solid var(--k-line);}
@media(min-width:880px){ .ock-r{border-top:0; border-left:1px solid var(--k-line);} }
@media(max-width:640px){ .ock-l,.ock-r{padding:18px 16px;} }

.ock-h{
  font-family:Fraunces,Georgia,serif; font-weight:800; font-size:27px;
  letter-spacing:-.022em; line-height:1.1; margin:0 0 5px;
}
@media(max-width:640px){ .ock-h{font-size:22px;} }
.ock-sub{font-size:13.5px; color:var(--k-ink2); margin:0 0 18px;}

.ock-iv{display:inline-flex; gap:3px; padding:3px; background:var(--k-cream2); border-radius:9px; margin:0 0 16px;}
.ock-iv button{
  border:0; cursor:pointer; font-family:inherit; font-size:11.5px; font-weight:600;
  padding:6px 13px; border-radius:6px; background:transparent; color:var(--k-ink3);
  transition:background .15s, color .15s;
}
.ock-iv button.on{background:#fff; color:var(--k-ink); box-shadow:0 1px 3px rgba(42,32,48,.13);}
.ock-save{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9px;
  letter-spacing:.06em; color:var(--k-good); margin-left:5px;
}

.ock-tiers{display:grid; gap:9px; margin:0 0 4px;}
.ock-tier{
  display:flex; gap:12px; align-items:flex-start; text-align:left; width:100%;
  border:1.5px solid var(--k-line); background:#fff; border-radius:12px; padding:13px 14px;
  cursor:pointer; font-family:inherit; transition:border-color .15s, background .15s;
}
.ock-tier:hover{border-color:var(--k-linestrong);}
.ock-tier.on{border-color:var(--k-accent); background:var(--k-accentsoft);}
.ock-radio{
  width:17px; height:17px; border-radius:50%; border:1.5px solid var(--k-linestrong);
  flex:0 0 auto; margin-top:2px; background:#fff; position:relative;
}
.ock-tier.on .ock-radio{border-color:var(--k-accent);}
.ock-tier.on .ock-radio::after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--k-accent);}
.ock-body{flex:1; min-width:0;}
.ock-nm{display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14.5px; font-weight:700; line-height:1.2;}
.ock-pop{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:8.5px;
  letter-spacing:.09em; text-transform:uppercase; padding:2px 6px; border-radius:4px;
  background:var(--k-goldsoft); color:var(--k-gold);
}
.ock-bl{display:block; font-size:12.5px; color:var(--k-ink2); margin:3px 0 6px; line-height:1.4;}
.ock-caps{display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--k-ink3);}
.ock-caps b{color:var(--k-ink2); font-weight:600; font-variant-numeric:tabular-nums;}
.ock-pr{text-align:right; flex:0 0 auto;}
.ock-pr b{display:block; font-size:17px; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums;}
.ock-u{display:block; font-size:11px; color:var(--k-ink3);}
/* ⚠️ "paid annually" rides UNDER the monthly figure, never replaces it. */
.ock-pa{
  display:block; font-size:9.5px; color:var(--k-good); margin-top:2px;
  font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.03em;
}

.ock-next{
  background:var(--k-goodsoft); border:1px solid rgba(79,124,84,.26);
  border-radius:11px; padding:12px 14px; margin-top:16px;
}
.ock-nk{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--k-good); margin:0 0 6px;
}
.ock-next ul{margin:0; padding:0; list-style:none; display:grid; gap:5px;}
.ock-next li{font-size:12.5px; color:var(--k-ink2); display:flex; gap:7px; align-items:flex-start; line-height:1.4;}
.ock-next li::before{content:"\2713"; color:var(--k-good); font-weight:700; flex:0 0 auto;}

.ock-sh{
  font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--k-ink3); margin:0 0 11px;
}
.ock-srow{display:flex; justify-content:space-between; gap:12px; font-size:13.5px; padding:4px 0;}
.ock-srow b{font-variant-numeric:tabular-nums;}
.ock-free{color:var(--k-good);}
.ock-tot{border-top:1px solid var(--k-linestrong); margin-top:8px; padding-top:10px; font-weight:700; font-size:15px;}
.ock-note{font-size:11.5px; color:var(--k-ink3); margin:9px 0 0; line-height:1.5;}
.ock-note b{color:var(--k-ink2);}

.ock-cardrow{
  display:flex; align-items:center; gap:11px; background:#fff;
  border:1.5px solid var(--k-line); border-radius:11px; padding:11px 13px; margin:16px 0 0;
}
.ock-brand{
  width:34px; height:23px; border-radius:4px; flex:0 0 auto;
  background:linear-gradient(135deg,#1a1f71,#2b3a9e); color:#fff;
  font-size:8px; font-weight:800; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:center; text-transform:uppercase;
}
.ock-ctxt{flex:1; min-width:0;}
.ock-l1{display:block; font-size:13px; font-weight:600; line-height:1.25;}
.ock-l2{display:block; font-size:11px; color:var(--k-ink3); line-height:1.3;}
.ock-chg{
  flex:0 0 auto; background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:12px; color:var(--k-ink3);
  text-decoration:underline; text-decoration-color:var(--k-linestrong);
}
.ock-chg:hover{color:var(--k-accent);}

.ock-field{margin-top:16px;}
.ock-flabel{display:block; font-size:12px; font-weight:600; color:var(--k-ink2); margin:0 0 6px;}
.ock-cardel{
  border:1.5px solid var(--k-line); border-radius:10px; background:var(--k-cream2);
  padding:13px 14px; transition:border-color .15s, background .15s, box-shadow .15s;
}
.ock-cardel.ock-focus{border-color:var(--k-accent); background:#fff; box-shadow:0 0 0 4px rgba(106,76,241,.12);}

.ock-err{margin:11px 0 0; font-size:13px; color:var(--k-bad);}
/* The node is now always rendered so a failure can be reported by writing text
   into it rather than rebuilding the panel (that rebuild was a render loop —
   see mountCardElement). Empty means no error, and no error must take no space
   or every panel gains 11px of nothing. */
.ock-err:empty{display:none;}

.ock-go{
  margin-top:15px; width:100%; background:var(--k-accent); color:#fff; border:0;
  cursor:pointer; font-family:inherit; border-radius:999px; padding:14px 20px;
  font-size:15px; font-weight:700; box-shadow:0 12px 28px -10px var(--k-accent);
  display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.3;
}
.ock-go:hover{background:var(--k-accentdeep);}
.ock-go[disabled]{opacity:.6; cursor:default;}
.ock-pan{
  text-align:center; margin:8px 0 0; font-size:11px; color:var(--k-good);
  font-family:"JetBrains Mono",ui-monospace,monospace; letter-spacing:.04em;
}
.ock-trust{display:flex; justify-content:center; flex-wrap:wrap; gap:5px 14px; margin:11px 0 0; font-size:11px; color:var(--k-ink3);}
.ock-trust span{display:inline-flex; align-items:center; gap:5px;}
.ock-trust span::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--k-good);}

/* Under the button, not above it: they are for the person who has stalled,
   and someone who has stalled is looking at the button. */
.ock-tst{display:grid; gap:9px; margin-top:18px;}
.ock-t{background:#fff; border:1px solid var(--k-line); border-radius:11px; padding:12px 13px;}
.ock-st{color:#d9a441; font-size:10px; letter-spacing:2px; margin:0;}
.ock-q{font-size:12.5px; color:var(--k-ink2); line-height:1.5; margin:6px 0 8px;}
.ock-w{display:flex; align-items:center; gap:7px; margin:0;}
.ock-av{width:26px; height:26px; border-radius:50%; flex:0 0 auto; overflow:hidden; background:var(--k-cream2);}
.ock-av img{width:100%; height:100%; object-fit:cover; display:block;}
.ock-n{display:block; font-size:11.5px; font-weight:650; line-height:1.2;}
.ock-n em{display:block; font-style:normal; font-weight:400; font-size:10px; color:var(--k-ink3);}

@media (max-width:640px){
  .ock-overlay{padding:0;}
  .ock-panel{max-width:none; max-height:100vh; height:100vh; border-radius:0;}
}
@media (prefers-reduced-motion:reduce){ .ock-tier,.ock-iv button,.ock-go{transition:none;} }

/* ── Billing address (country · line 1 · postal code) ──────────────────
   Alex, 2026-08-25: *"Put the postal code back in but make sure that it
   geo-detects… first line of address and postcode just maximises the chance of
   approval."* Rationale and the Stripe quotes behind it:
   docs/projects/billing/STRIPE-AUTH-RESEARCH.md.

   Markup comes from the SHARED module (js/billing-address-fields.js) with
   prefix `ock`, so these rules dress a block the homepage modal also uses in
   its own palette. Only the skin lives here; the behaviour lives once. */
.ock-addr { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.ock-addr .ock-field { display: flex; flex-direction: column; gap: 5px; }
.ock-addr label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; color: var(--k-ink3);
}
.ock-addr input,
/* A long country name truncates with an ELLIPSIS, not mid-word. Same rule as
   the subnav labels: a cut you cannot see reads as the real text. */
.ock-addr select {
  text-overflow: ellipsis;
  font-family: inherit; font-size: 14.5px; color: var(--k-ink);
  background: #fff; border: 1px solid var(--k-line); border-radius: 9px;
  padding: 10px 12px; width: 100%;
  /* ⚠️ The Stripe Element next to these is 14.5px on a 1px --k-line border with
     the same radius. Any drift here and the address block reads as a different
     form bolted on above the card, which is exactly what it must not look like. */
  transition: border-color .14s, box-shadow .14s;
}
.ock-addr select {
  appearance: none; -webkit-appearance: none;
  /* The caret is a data URI: the CSP blocks external images, and a select with
     no affordance reads as a disabled text box. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238b7e92' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 34px;
}
.ock-addr input:focus,
.ock-addr select:focus {
  outline: none; border-color: var(--k-accent);
  box-shadow: 0 0 0 3px var(--k-accentsoft);
}
.ock-addr [hidden] { display: none; }

/* The Back slot when there is nothing behind this checkout.

   ⚠️ A SPACER, NOT `display:none`. `.ock-bar` centres its title between the two
   controls; removing the left one shunts the title off-centre and the ✕ looks
   misplaced. Only Outreach has an explainer to go back to, so every other plan
   renders this instead. Width matches `.ock-back`'s rendered box. */
.ock-back-sp { display: inline-block; width: 58px; flex: 0 0 auto; }

/* Country + postcode share a row: see billing-address-fields.js. Stacked, the
   block cost 244px and pushed the mobile submit button ~200px below the fold. */
.ock-addr .ock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* 🚨 `min-width:0` OR THE COLUMNS ARE NOT EQUAL. A grid item defaults to
   `min-width:auto`, so the text input refuses to shrink below its
   min-content width (~20 characters) and eats the row — which squeezed
   the country select to 84px and rendered "United Kingdom" as "Unite".
   The same flexbox/grid default that made the subnav label overflow. */
.ock-addr .ock-row > * { min-width: 0; }
@media (max-width: 359px) { .ock-addr .ock-row { grid-template-columns: 1fr; } }