/* pages.css -- the article pages (Pricing, First Ones, About, Terms, Privacy, Sign in): the shared top bar, then one
   framed page of readable width, with the price tables, the kit cards and the sign-in box. Builds on miware_site.css. */
.page { margin: 0 auto 18px; max-width: 1040px; padding: 26px clamp(18px, 4vw, 44px) 34px;
  background: linear-gradient(180deg, #0e2252, #050d26) padding-box, var(--sapphire) border-box; background-size: auto, 96px 96px; }
.page-wrap { padding: 0 18px; }
.page h1 { margin: 0 0 6px; font: 700 clamp(26px, 3vw, 38px)/1.1 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-hi); }
.page .lead { margin: 0 0 18px; font-size: 17px; line-height: 1.5; color: var(--ink); max-width: 70ch; }
.page h2 { margin: 26px 0 8px; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); padding-bottom: 6px; border-bottom: 1px solid rgba(212,175,55,0.45); }
.page h3 { margin: 16px 0 6px; font-size: 17px; color: var(--ink); }
.page p, .page li { line-height: 1.55; }
.page p { margin: 0 0 10px; max-width: 76ch; }
.page ul, .page ol { margin: 0 0 12px; padding-left: 1.3em; max-width: 76ch; }
.page li { margin: 4px 0; } .page li::marker { color: var(--gold-hi); }
.page b { color: var(--gold-hi); font-weight: 600; }
.page .dim { color: var(--ink-dim); }
.page .small { font-size: 13px; color: var(--ink-dim); }
.page .draft { display: inline-block; margin-left: 10px; padding: 2px 10px; border: 1px solid rgba(255,157,108,0.7); border-radius: 999px; color: #ffb48c; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: middle; }
/* price tables */
.prices { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 15px; }
.prices th, .prices td { padding: 9px 10px; text-align: left; border-bottom: 1px solid rgba(111,162,255,0.18); vertical-align: top; }
.prices th { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; }
.prices td.num { text-align: right; white-space: nowrap; font-weight: 700; color: var(--gold-hi); }
.prices td.name { color: var(--ink); font-weight: 600; }
.prices td .kind { margin-left: 8px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #7fb2ff; }
.prices tr:hover td { background: rgba(80,140,255,0.08); }
/* cards: the two build tiers, the kit */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 8px 0 14px; }
.card-p { padding: 16px 18px; border: 1px solid rgba(212,175,55,0.5); border-radius: 4px; background: rgba(4,11,31,0.5); }
.card-p h3 { margin: 0 0 4px; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-hi); }
.card-p .big { font-size: 30px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.card-p .big small { font-size: 13px; font-weight: 400; color: var(--ink-dim); margin-left: 4px; }
.card-p p { margin: 6px 0 0; font-size: 14px; color: var(--ink-dim); }
.card-p .bill { margin: 4px 0 8px; padding: 10px 12px; border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; background: #050c22; color: var(--ink);
  font: 500 14px/1.5 "Cascadia Mono", "Consolas", ui-monospace, monospace; white-space: pre; overflow-x: auto; }
.card-p.gold { border-color: rgba(243,210,122,0.8); background: radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,0.14), rgba(4,11,31,0.5)); }
/* the journey (how payment goes) */
.steps-p { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.steps-p li { counter-increment: s; padding: 12px 14px 12px 44px; position: relative; border: 1px solid rgba(212,175,55,0.4); border-radius: 4px; background: rgba(4,11,31,0.45); font-size: 14px; }
.steps-p li::before { content: counter(s); position: absolute; left: 12px; top: 11px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--navy-0); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.steps-p li b { display: block; margin-bottom: 2px; }
/* buttons on these pages */
.btn { display: inline-block; padding: 12px 18px; border-radius: 4px; text-decoration: none; text-transform: uppercase; cursor: pointer; appearance: none;
  font: 600 14px/1.2 "Segoe UI", system-ui, sans-serif; letter-spacing: 0.06em; color: var(--ink); background: #050a18; border: 2px solid var(--gold);
  box-shadow: 0 0 12px rgba(212,175,55,0.35); transition: box-shadow .2s, color .2s; }
.btn:hover { box-shadow: 0 0 22px rgba(243,210,122,0.6); color: var(--gold-hi); }
.btn.quiet { border-width: 1px; box-shadow: none; color: var(--gold-hi); background: transparent; }
.btn[disabled] { opacity: 0.5; cursor: default; box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 0; }
/* About: who we are (Vince 5 Nov 13:35) and the site map */
dl.who { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 8px 0 18px; }
dl.who dt { color: var(--gold); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; align-self: baseline; }
dl.who dd { margin: 0; }
dl.who .small { color: var(--ink-dim); font-size: 12px; }
ul.sitemap { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 6px; }
ul.sitemap li { padding-left: 14px; position: relative; }
ul.sitemap li::before { content: "◆"; position: absolute; left: 0; top: 2px; color: var(--gold); font-size: 9px; }
/* the First Ones counter */
.counter { display: flex; align-items: baseline; gap: 14px; margin: 10px 0 14px; padding: 14px 18px; border: 1px solid rgba(243,210,122,0.7); border-radius: 4px;
  background: radial-gradient(120% 140% at 50% 0%, rgba(212,175,55,0.16), rgba(4,11,31,0.5)); }
.counter b { font-size: 40px; line-height: 1; color: var(--gold-hi); }
.counter span { color: var(--ink-dim); }
/* sign in */
.signbox { max-width: 440px; margin: 10px 0 0; padding: 20px 22px; border: 1px solid rgba(212,175,55,0.5); border-radius: 4px; background: rgba(4,11,31,0.5); }
.signbox .google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--gold); background: #fff; color: #1f1f1f; font: 600 15px/1 "Segoe UI", system-ui, sans-serif; }
.signbox .google svg { width: 20px; height: 20px; }
.signbox .google[disabled] { opacity: 0.55; cursor: default; }
.signbox label.tick { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; color: var(--ink); }
.signbox label.tick input { margin-top: 3px; accent-color: var(--gold-hi); }
.signbox .note { margin: 10px 0 0; font-size: 13px; color: var(--ink-dim); }
.signbox .note b { color: #ffb48c; }
@media (max-width: 860px) { .page { padding: 18px 14px 24px; } .counter b { font-size: 32px; } }
/* phones: each price row becomes a small card -- name and the prices on the first line, what it does under them */
@media (max-width: 640px) {
  .prices thead { display: none; }
  .prices tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid rgba(111,162,255,0.18); }
  .prices td { display: block; padding: 2px 0; border: 0; }
  .prices td:nth-child(1) { grid-area: 1 / 1; }
  .prices td:nth-child(2) { grid-area: 2 / 1 / 2 / 3; font-size: 13px; color: var(--ink-dim); }
  .prices td:nth-child(3) { grid-area: 1 / 2; }
  .prices td:nth-child(4) { grid-area: 3 / 2; }
  .prices td.num { text-align: right; }
}

/* ---- account.html (Phase 2 Stage 4, 5 Nov 2026) ---- */
.badge-big { display: inline-block; margin-left: 12px; padding: 3px 12px; border: 1px solid var(--gold); border-radius: 999px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-hi); vertical-align: middle; }
.acct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
@media (max-width: 900px) { .acct-grid { grid-template-columns: 1fr; } }
.acct-card { padding: 16px 18px; border: 1px solid rgba(212,175,55,0.45); border-radius: 4px; background: rgba(4,11,31,0.5); margin: 0 0 16px; }
.acct-card h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-hi); }
.acct-card h2 small { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-dim); margin-left: 8px; }
.acct-card .big { font-size: 17px; font-weight: 600; color: var(--gold-hi); margin: 0 0 8px; }
.acct-card .small, .page .small { font-size: 13px; color: var(--ink-dim); }
.kit { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 10px; }
.kit dt { color: var(--ink-dim); font-size: 13px; } .kit dd { margin: 0; font-weight: 600; }
.coupons { width: 100%; border-collapse: collapse; } .coupons td { padding: 5px 4px; border-bottom: 1px solid rgba(212,175,55,0.18); } .coupons .n { text-align: right; font-weight: 700; color: var(--gold-hi); white-space: nowrap; }
.apps { list-style: none; padding: 0; margin: 0 0 8px; } .apps li { padding: 6px 0; border-bottom: 1px solid rgba(212,175,55,0.18); }
.billing { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: end; }
.billing label { font-size: 13px; color: var(--ink-dim); } .billing label.wide { grid-column: 1 / -1; }
.billing input, .billing textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid rgba(212,175,55,0.5); border-radius: 4px; background: rgba(0,0,0,0.35); color: var(--ink); font: inherit; }
.billing input.cc { text-transform: uppercase; }
.billing .btn { justify-self: start; }
@media (max-width: 700px) { .billing { grid-template-columns: 1fr; } }
.page label.tick { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .page label.tick input { margin-top: 3px; accent-color: var(--gold-hi); } .page label.tick small { display: block; color: var(--ink-dim); font-size: 12px; }
.page .note { margin: 12px 0 0; padding: 8px 12px; border: 1px solid var(--gold); border-radius: 4px; font-size: 13px; } .page .note.bad { border-color: #ffb48c; color: #ffb48c; }

/* ---- checkout.html (Phase 2 Stage 5) ---- */
.bill-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin: 16px 0; }
@media (max-width: 900px) { .bill-grid { grid-template-columns: 1fr; } }
.bill { width: 100%; border-collapse: collapse; } .bill td { padding: 6px 4px; border-bottom: 1px solid rgba(212,175,55,0.18); } .bill .n { text-align: right; white-space: nowrap; }
.bill tfoot td { border-bottom: none; } .bill tfoot .total td { font-weight: 700; color: var(--gold-hi); border-top: 1px solid rgba(212,175,55,0.5); } .bill tfoot .topay td { font-size: 18px; font-weight: 700; color: var(--gold-hi); } .bill tfoot .discount td { color: #9be7b0; }
.coupons label { cursor: pointer; font-size: 13px; } .coupons input[type=radio] { accent-color: var(--gold-hi); margin-right: 6px; }
.pay-card { text-align: center; } .btn.pay { font-size: 17px; padding: 14px 28px; } .btn.pay[disabled] { opacity: 0.5; cursor: default; }
.pay-card .terms { max-width: 640px; margin: 14px auto 4px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.confirm { margin: 0 auto 14px; padding: 12px 16px; max-width: 520px; border: 1px solid var(--gold); border-radius: 4px; background: rgba(212,175,55,0.1); } .confirm p { margin: 0 0 10px; font-weight: 600; } .confirm .btn { margin: 0 6px; }
/* LEGAL_DOCS_V1 */
.page .doc-meta { margin: -6px 0 18px; font-size: 13px; color: var(--ink-dim); }
.page nav.toc { margin: 0 0 22px; padding: 12px 18px; border: 1px solid rgba(212,175,55,0.35); border-radius: 4px; background: rgba(4,11,31,0.45); max-width: 760px; }
.page nav.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; font-size: 14px; line-height: 1.7; }
@media (max-width: 640px) { .page nav.toc ol { columns: 1; } }
.page dl.trader { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 6px 0 14px; font-size: 14px; }
.page dl.trader dt { color: var(--ink-dim); } .page dl.trader dd { margin: 0; }
.page .todo { color: #ffb48c; font-style: italic; }
.page h2 { scroll-margin-top: 80px; }
.signbox label.tick .req { color: #ffb48c; margin-left: 2px; }