/* ==========================================================================
   pay.css - styles for the payment page
   Loaded by pay.html.
   See DESIGN.md for the type system, color tokens, and brand rules.
   ========================================================================== */

/* ===== TOKENS & BASE - variables, reset, body, container ===== */
  :root{--paper:#fff;--bg:#F6F5F1;--ink:#141a20;--navy:#13294a;--navy2:#1d3a63;--blue:#1f5fa8;--blue-l:#7fa8dd;--muted:#59626d;--muted-2:#6f7681;--line:#e5e2d9;--good:#1e7d46;--warn-bg:#fbf1dc;--warn-bd:#ecd9a8;--warn-tx:#6b5200}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
  .wrap{max-width:860px;margin:0 auto;padding:0 28px}

/* ===== HEADER - bar, wordmark, back link ===== */
  header{background:var(--navy);padding:16px 0}
  header .wrap{display:flex;justify-content:space-between;align-items:center}
  .wm{color:#fff;font-weight:700;letter-spacing:.2em;font-size:15px;text-decoration:none}
  .wm span{display:block;font-size:8px;letter-spacing:.3em;color:var(--blue-l);font-weight:600}
  header a.back{color:#c9d6e8;font-size:13px;text-decoration:none}
  header a.back:hover{color:#fff}

/* ===== PAGE HEAD - title, subhead, alert banner ===== */
  main{padding:56px 0 80px}
  h1{font-size:30px;color:var(--navy);letter-spacing:-.02em;margin-bottom:8px}
  .sub{color:var(--muted);font-size:15px;margin-bottom:30px;max-width:600px}
  .banner{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx);border-radius:10px;padding:13px 18px;font-size:13.5px;margin-bottom:26px}
  .banner b{color:inherit}

/* ===== PLAN CARDS - card, price, buttons ===== */
  .card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px 28px;margin-bottom:18px}
  .card .head{display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:6px}
  .card h2{font-size:18px;color:var(--navy)}
  .card p{font-size:13.5px;color:var(--muted);margin-bottom:12px}
  .price{font-size:21px;font-weight:700;color:var(--navy);white-space:nowrap}
  .price small{font-size:11.5px;color:var(--muted-2);font-weight:400;margin-left:6px}
  .btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;padding:13px 24px;border-radius:8px;background:var(--blue);color:#fff;text-decoration:none;border:none;cursor:pointer;transition:.2s;white-space:nowrap;font-family:inherit}
  .btn:hover{background:var(--navy2)}
  .btn.off{background:var(--line);color:var(--muted);pointer-events:none}

/* ===== FORM - labels, inputs, rows, hints ===== */
  label{display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 5px}
  input{width:100%;font-family:inherit;font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
  input:focus{outline:2px solid var(--blue-l);border-color:var(--blue)}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
  @media(max-width:640px){.frow{grid-template-columns:1fr}}
  .hint{font-size:12px;color:var(--muted-2);margin-top:6px}

/* ===== STATUS & TRUST - portal messages, embed, secure badge, note ===== */
  .portalmsg{font-size:13px;margin-top:12px;padding:11px 14px;border-radius:8px;display:none}
  .portalmsg.on{display:block}
  .portalmsg.warn{background:var(--warn-bg);border:1px solid var(--warn-bd);color:var(--warn-tx)}
  #snapshotEmbed{min-height:10px;margin-top:4px}
  .secure{display:flex;align-items:center;gap:8px;margin-top:28px;color:var(--muted-2);font-size:12.5px}
  .secure svg{width:15px;height:15px;stroke:var(--good);fill:none;stroke-width:2}
  .note{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:16px 20px;font-size:13px;color:var(--muted);margin-top:22px}
  .note b{color:var(--navy)}

/* ===== FOOTER - bar, layout, links ===== */
  footer{border-top:1px solid var(--line);padding:22px 0;font-size:12.5px;color:var(--muted-2)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  footer a{color:var(--muted);text-decoration:none}
  /* ── Pardon-our-dust placeholder ── */
  main{min-height:66vh;display:flex;align-items:center;padding:48px 0}
  .pd{max-width:540px;margin:0 auto;text-align:center}
  .pd-badge{width:58px;height:58px;margin:0 auto 24px;border-radius:50%;background:rgba(31,95,168,.07);border:1px solid rgba(31,95,168,.22);display:flex;align-items:center;justify-content:center}
  .pd-badge svg{width:25px;height:25px;stroke:var(--navy);fill:none;stroke-width:1.6;stroke-linecap:round}
  .pd-kick{display:block;font-family:'Spline Sans Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
  .pd h1{font-size:clamp(2.4rem,5.4vw,3.5rem);color:var(--navy);letter-spacing:-.02em;line-height:1.04;margin-bottom:18px}
  .pd-lead{font-size:17px;color:var(--ink);max-width:42ch;margin:0 auto 12px;line-height:1.6}
  .pd-interim{font-size:14px;color:var(--muted);max-width:44ch;margin:0 auto 30px;line-height:1.6}
  .pd-cta{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap}
  .pd-back{color:var(--muted);font-size:14px;text-decoration:none;font-weight:500}
  .pd-back:hover{color:var(--navy)}