/* buy.css — the handful of classes FT8 Hero's purchase pages use, in this
   site's colours. The page bodies are copied unchanged; only their frame and
   their palette are ours. */
.page-hero.compact{padding:44px 0}
.page-hero.compact h1{font-size:36px}
.sect{padding:52px 0}
.container{max-width:1160px;margin:0 auto;padding:0 24px}
.narrow{max-width:640px;margin:0 auto}
.centre,.text-center{text-align:center}
.muted{color:var(--muted)}
.sub{color:var(--muted);font-size:15px}
.hint{color:var(--muted);font-size:13.5px;margin-top:6px}
.rule{height:1px;background:var(--line);margin:26px 0}
.line{height:1px;background:var(--line);margin:18px 0}

.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px}
.lift{box-shadow:0 10px 34px rgba(20,10,60,.08)}
.after-lift{margin-top:22px}

.btn-hero{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--purple);
  color:#fff;font-weight:600;padding:13px 26px;border-radius:9px;border:2px solid var(--purple);cursor:pointer;
  font-size:15px;transition:.15s}
.btn-hero:hover{background:var(--purple-deep);border-color:var(--purple-deep);color:#fff}
.btn-hero.ghost{background:transparent;color:var(--purple)}
.btn-hero.ghost:hover{background:var(--purple);color:#fff}
.btn-hero.block{display:flex;width:100%}
.btn-hero[disabled]{opacity:.55;cursor:default}

.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--ink)}
.field input,.field select{width:100%;padding:12px 14px;border:1px solid #d3cde4;border-radius:9px;
  font:15px/1.3 inherit;background:#fff}
.field input:focus,.field select:focus{outline:2px solid var(--purple);outline-offset:-1px;border-color:var(--purple)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.row-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;font-size:14px}
.row-links a{color:var(--purple)}

.msg{margin:0 0 18px}
.msg:empty{display:none}
/* site.js puts the kind ON the message box - class="msg show err" - so the
   rules are written for the box itself. Until 10 Sep 2026 they were written
   for a child that never existed (.msg .err), and "Wrong email or password."
   came out as a bare line of black text that nobody noticed: that was the
   sign-in page on which "nothing happens". */
.msg.ok,.msg.err,.msg.info,.msg .ok,.msg .err,.msg .info{display:block;padding:13px 16px;border-radius:10px;font-size:14.5px;line-height:1.45}
.msg.ok,.msg .ok{background:#e9f7ee;color:#14602f;border:1px solid #bfe4cd}
.msg.err,.msg .err{background:#fdecec;color:#8a1c1c;border:1px solid #f4c4c4}
.msg.info,.msg .info{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line)}
.notice{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;padding:14px 18px;margin:0 auto 18px;max-width:770px;font-size:14.5px}

.buysteps{display:flex;gap:10px;list-style:none;justify-content:center;margin:18px 0 0;padding:0;flex-wrap:wrap}
.buysteps li{font-size:13px;color:#d7cbf5;border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 15px}
.buysteps li.on{background:#fff;color:var(--purple);border-color:#fff;font-weight:600}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:900px;margin:0 auto}
.plan{background:#fff;border:2px solid var(--line);border-radius:16px;padding:26px;cursor:pointer;transition:.15s}
.plan:hover{border-color:var(--purple)}
.plan.on{border-color:var(--purple);box-shadow:0 10px 30px rgba(106,31,208,.12)}
.plan h3{font-size:21px;margin-bottom:4px}
.plan .who{color:var(--muted);font-size:14px;margin-bottom:14px}
.plan .amount{font-size:31px;font-weight:700;letter-spacing:-.5px;color:var(--purple)}
.plan .amount small{font-size:14px;font-weight:500;color:var(--muted)}

.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px;margin:14px 0}
.kv .k{color:var(--muted)}
.kv .v{color:var(--ink);font-weight:500}
.pill{display:inline-block;background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;
  padding:4px 12px;font-size:12.5px;color:var(--muted)}
.lic{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:17px;letter-spacing:1px;
  background:var(--bg-soft);border:1px dashed var(--line);border-radius:9px;padding:12px 16px;text-align:center}
#dlg-dim{position:fixed;inset:0;background:rgba(20,10,50,.45);display:flex;align-items:center;
  justify-content:center;z-index:200;padding:20px}
#dlg-dim > div{background:#fff;border-radius:16px;padding:26px;max-width:440px;width:100%}

/* ── checkout.php: the co- section ─────────────────────────────────────────
   Owned entirely by these rules. Nothing here uses .card, .plan, .lift or
   .btn-hero, because site.css and buy.css each define those differently and
   the page was caught between them (10 Sep 2026). Two equal cards, buttons on
   one line at the bottom, one payment panel, one width. */
.co-sect{padding:44px 0 64px}
.co-wrap{max-width:920px;margin:0 auto}
.co-note{margin:0 0 26px;padding:14px 18px;border:1px solid #d9c9fb;background:#f6f0ff;border-radius:12px;
  color:var(--ink);font-size:15px;line-height:1.5;text-align:center}
.co-plans{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.co-plan{position:relative;display:flex;flex-direction:column;background:#fff;border:2px solid var(--line);
  border-radius:18px;padding:28px 28px 24px;transition:border-color .15s,box-shadow .15s}
.co-plan:hover{border-color:#b89cf0}
.co-plan.chosen{border-color:var(--purple);box-shadow:0 12px 34px rgba(106,31,208,.14)}
.co-flag{position:absolute;top:-13px;right:22px;background:var(--purple);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.co-head{min-height:64px}
.co-plan h3{font-size:22px;font-weight:700;letter-spacing:-.2px;margin:0 0 4px;color:var(--ink)}
.co-who{margin:0;color:var(--muted);font-size:14.5px}
.co-amount{margin:16px 0 18px;font-size:34px;font-weight:700;letter-spacing:-.6px;color:var(--purple);line-height:1}
.co-amount small{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:0}
.co-features{list-style:none;margin:0 0 22px;padding:18px 0 0;border-top:1px solid var(--line);flex:1}
.co-features li{position:relative;padding:0 0 10px 26px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.co-features li:before{content:'\2713';position:absolute;left:2px;top:0;color:var(--purple);font-weight:700}
.co-cta{margin-top:auto}
.co-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;box-sizing:border-box;
  padding:14px 20px;border-radius:10px;border:2px solid var(--purple);background:var(--purple);color:#fff;
  font:inherit;font-size:15px;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s}
.co-btn:hover{background:var(--purple-deep);border-color:var(--purple-deep)}
.co-plan.chosen .co-btn{background:#fff;color:var(--purple)}
.co-btn.co-paypal{background:#ffc439;border-color:#ffc439;color:#0c2a4d}
.co-btn.co-paypal:hover{background:#f0b52c;border-color:#f0b52c}
.co-btn[disabled]{opacity:.5;cursor:default}
.co-pay{max-width:560px;margin:30px auto 0;background:#fff;border:2px solid var(--purple);border-radius:18px;
  padding:28px 28px 22px;box-shadow:0 12px 34px rgba(106,31,208,.10)}
.co-pay h2{font-size:21px;font-weight:700;margin:0 0 14px;color:var(--ink)}
.co-summary{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.co-what{font-size:15px;color:var(--ink)}
.co-cost{font-size:22px;font-weight:700;color:var(--purple);white-space:nowrap}
.co-cost small{font-size:13px;font-weight:500;color:var(--muted)}
.co-buttons{display:flex;flex-direction:column;gap:12px}
.co-muted{margin:16px 0 0;color:var(--muted);font-size:13.5px;text-align:center;line-height:1.5}
.co-switch{margin-top:8px}
.co-switch a{color:var(--purple);text-decoration:none;font-weight:600}
.co-switch a:hover{text-decoration:underline}
.co-smallprint{max-width:760px;margin:30px auto 0;color:var(--muted);font-size:13.5px;line-height:1.6;text-align:center}
.co-smallprint a{color:var(--purple)}
@media (max-width:720px){
  .co-plans{grid-template-columns:1fr}
  .co-plan{padding:24px 20px 20px}
  .co-head{min-height:0}
  .co-pay{padding:22px 18px 18px}
}

/* ── phones and tablets (under 920px) ─────────────────────────────────────
   The customer pages are read on a phone more often than not: a licence is
   bought from the QR code in the app. Nothing here reaches a desktop. */
@media (max-width:920px){
  .page-hero.compact{padding:30px 0}
  .page-hero.compact h1{font-size:28px}
  .sect{padding:32px 0}
  .container{padding:0 20px}
  .after-lift{margin-top:14px}
  .card{padding:20px 18px;border-radius:14px}
  .card h2{font-size:19px}
  .btn-hero{padding:13px 18px}
  .field input,.field select{font-size:16px} /* 16px: iOS does not zoom the page into a smaller field */
  .row-links{justify-content:space-between}
  .lic{font-size:15px;letter-spacing:.5px;word-break:break-all}
  .buysteps{gap:8px;margin-top:14px}
  .buysteps li{font-size:12.5px;padding:5px 12px}
  .notice{padding:12px 14px;font-size:14px}
  .co-sect{padding:28px 0 44px}
  .co-note{padding:12px 14px;font-size:14.5px;margin-bottom:18px}
  .co-plan h3{font-size:20px}
  .co-amount{font-size:30px}
  .co-pay{margin-top:22px}
  .co-pay h2{font-size:19px}
  .co-summary{flex-wrap:wrap}
  .co-cost{font-size:20px}
  .co-smallprint{margin-top:22px;font-size:13px}
  #dlg-dim > div{padding:20px}
}
@media (max-width:480px){
  .kv{grid-template-columns:1fr;gap:2px 0;margin:12px 0}
  .kv .k{font-size:13px}
  .card{padding:18px 16px}
  .lic{font-size:14px}
}