/* ============================================================================
   fm-pay.css — the plan sheet.

   The version before this one showed four narrow boxes reading
   "Library unlimited · Extract 2 · Typed unlimited". Every word of that was
   true and none of it told a person what they would get for their money.

   Now each plan has room: a price you can read across the room, and four or
   five lines in plain English. Four abreast on a wide screen, two on a
   laptop, one on a phone — the ladder is meant to be COMPARED, so the cards
   stay side by side for as long as they can be read side by side.
   ============================================================================ */
html.fmpay-open{overflow:hidden}
.fmpay{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:20px;
  font-family:'DM Sans',system-ui,-apple-system,sans-serif}
.fmpay-back{position:absolute;inset:0;background:rgba(8,14,24,.7);backdrop-filter:blur(6px)}
.fmpay-card{position:relative;width:100%;max-width:940px;max-height:calc(100vh - 40px);overflow:auto;
  background:#fffdf8;border:1px solid #e4dcc9;border-radius:20px;padding:30px 30px 22px;
  box-shadow:0 34px 90px rgba(0,0,0,.38);color:#12203a;
  animation:fmpay-in .2s ease-out}
@keyframes fmpay-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

.fmpay-x{position:absolute;top:14px;right:16px;background:none;border:0;color:#8a8578;font-size:26px;
  line-height:1;cursor:pointer;padding:2px 7px;border-radius:8px;z-index:2}
.fmpay-x:hover{color:#12203a;background:#f4efe4}

/* ---- heading ------------------------------------------------------------ */
.fmpay-head{text-align:center;max-width:600px;margin:0 auto 22px}
.fmpay-eyebrow{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#c9982a;margin-bottom:8px}
.fmpay-card h3{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin:0 0 9px}
.fmpay-lede{font-size:14px;line-height:1.62;color:#5a637a;margin:0;min-height:3.2em}

/* ---- the ladder --------------------------------------------------------- */
.fmpay-rungs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;
  align-items:stretch}
.fmpay-rung{position:relative;display:flex;flex-direction:column;text-align:left;
  background:#fff;border:1.5px solid #e8e0cd;border-radius:15px;padding:18px 16px 16px;
  cursor:pointer;font-family:inherit;color:#12203a;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.fmpay-rung:hover{border-color:#d8b45c;transform:translateY(-2px)}
.fmpay-rung.on{border-color:#c9982a;background:#fffdf4;
  box-shadow:0 0 0 3px rgba(201,152,42,.18),0 10px 26px rgba(201,152,42,.14)}

/* badges sit above the card edge, so they read as a label ON the plan */
.fmpay-tag{position:absolute;top:-9px;left:14px;background:#c9982a;color:#fff;
  font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;line-height:1.4}
.fmpay-tag-mine{left:auto;right:14px;background:#2f6b45}

.fmpay-name{display:block;font-size:13px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#8a8578}
.fmpay-price{display:block;font-size:31px;font-weight:800;letter-spacing:-.03em;
  line-height:1.1;margin:5px 0 14px}
.fmpay-price i{font-size:12px;font-style:normal;font-weight:600;color:#8a8578;letter-spacing:0}

.fmpay-list{list-style:none;margin:0;padding:0;flex:1}
.fmpay-list li{position:relative;padding-left:19px;font-size:12.3px;line-height:1.5;
  color:#3d4658;margin-bottom:8px}
/* a tick, drawn rather than loaded — no icon font to wait for */
.fmpay-list li::before{content:"";position:absolute;left:2px;top:4px;width:5px;height:9px;
  border:solid #2f6b45;border-width:0 1.8px 1.8px 0;transform:rotate(43deg)}

/* ---- term ---------------------------------------------------------------- */
.fmpay-termwrap{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.fmpay-termlab{font-size:13px;font-weight:600;color:#5a637a;white-space:nowrap}
.fmpay-terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;flex:1;min-width:240px}
.fmpay-term{background:#fff;border:1.5px solid #e8e0cd;border-radius:11px;padding:9px 4px;cursor:pointer;
  color:#5a637a;font-family:inherit;transition:border-color .14s,background .14s}
.fmpay-term:hover{border-color:#d8b45c}
.fmpay-term b{display:block;font-size:16px;font-weight:700;color:#12203a;line-height:1.1}
.fmpay-term span{display:block;font-size:11px;margin-top:2px}
.fmpay-term.on{background:#fffdf4;border-color:#c9982a}

/* ---- total + pay --------------------------------------------------------- */
.fmpay-total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 0 10px;border-top:1px solid #efe8da}
.fmpay-total span{font-size:13.5px;color:#5a637a}
.fmpay-total em{font-style:normal;color:#8a8578;font-size:12.5px}
.fmpay-total b{font-size:30px;font-weight:800;letter-spacing:-.025em;white-space:nowrap}

.fmpay-go{display:block;width:100%;background:linear-gradient(135deg,#f5c542,#c9982a);color:#12203a;
  border:0;border-radius:12px;padding:15px 18px;font-family:inherit;font-size:16px;font-weight:800;
  cursor:pointer;box-shadow:0 8px 20px rgba(201,152,42,.28)}
.fmpay-go:hover{filter:brightness(1.05)}
.fmpay-go:disabled{opacity:.6;cursor:default;box-shadow:none}

.fmpay-err{margin-top:12px;background:#fdeceb;border:1px solid #f2cfca;border-radius:10px;
  padding:10px 12px;font-size:12.5px;line-height:1.55;color:#a52b22}

.fmpay-fine{list-style:none;margin:20px 0 0;padding:15px 0 0;border-top:1px solid #efe8da;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 22px}
.fmpay-fine li{position:relative;padding-left:15px;font-size:11.5px;line-height:1.6;color:#8a8578;margin-bottom:5px}
.fmpay-fine li::before{content:"";position:absolute;left:2px;top:7px;width:4px;height:4px;border-radius:50%;
  background:rgba(201,152,42,.6)}

/* ---- narrower screens ---------------------------------------------------- */
@media(max-width:900px){
  .fmpay-rungs{grid-template-columns:repeat(2,1fr)}
  .fmpay-fine{grid-template-columns:1fr}
}
@media(max-width:560px){
  .fmpay{padding:10px}
  .fmpay-card{padding:24px 16px 16px;border-radius:16px}
  .fmpay-card h3{font-size:21px}
  .fmpay-lede{min-height:0}
  .fmpay-rungs{grid-template-columns:1fr;gap:10px}
  .fmpay-rung{padding:16px 15px 14px}
  .fmpay-price{font-size:27px;margin-bottom:11px}
  .fmpay-termwrap{gap:9px}
  .fmpay-termlab{width:100%}
  .fmpay-total b{font-size:26px}
}

/* ---- discount code -------------------------------------------------------
   A campaign mails a link carrying its code, so most people never type in
   this box - it is here for the ones who were told a code by someone else,
   and so that what was applied is visible rather than a silent price change. */
.fmpay-cpn{display:flex;gap:8px;margin-bottom:8px}
.fmpay-cpn input{flex:1;min-width:0;background:#fff;border:1.5px solid #e8e0cd;border-radius:11px;
  padding:11px 13px;font-family:inherit;font-size:13.5px;color:#12203a;letter-spacing:.04em}
.fmpay-cpn input:focus{outline:0;border-color:#c9982a;box-shadow:0 0 0 3px rgba(201,152,42,.14)}
.fmpay-cpn input::placeholder{color:#a9a294;letter-spacing:0}
.fmpay-cpn button{background:#fff;border:1.5px solid #e8e0cd;border-radius:11px;padding:11px 18px;
  font-family:inherit;font-size:13px;font-weight:700;color:#12203a;cursor:pointer;white-space:nowrap}
.fmpay-cpn button:hover{border-color:#c9982a}
.fmpay-cpn button:disabled{opacity:.55;cursor:default}
.fmpay-cpnmsg{font-size:12.5px;line-height:1.5;color:#5a637a;min-height:1.2em;margin-bottom:10px}
.fmpay-cpnmsg.ok{color:#2f6b45;font-weight:600}
.fmpay-cpnmsg.bad{color:#a52b22}