/* =====================================================================
   Membership and invoices.

   The invoice half carries a print stylesheet, because the document a
   member files with their accounts is this page through their browser's
   own Save as PDF — there is no second PDF renderer to keep in step.
   ===================================================================== */

/* ---------- Plan chooser ---------- */
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

.plan-card{position:relative;background:#fff;border-radius:18px;box-shadow:var(--shadow);
           padding:28px 26px;display:flex;flex-direction:column;gap:14px}
.plan-card.best{box-shadow:0 0 0 2px var(--blue),0 10px 30px rgba(31,63,143,.14)}

/* The metal each plan is sold as, so the card, the badge on a company and
   the dashboard agree. A 5px bar across the top rather than a tinted card:
   the card is mostly prices and a perk list, and a metal wash behind body
   text costs more in legibility than the accent is worth.

   Keyed on the plan CODE, which is stable across a rename — `full` is Silver,
   `premium` is Gold. A plan with no rule here simply has no bar, which
   is what a newly-added tier should do until somebody picks its colour. */
.plan-card[data-plan]{overflow:hidden}
.plan-card[data-plan]::before{content:"";position:absolute;inset:0 0 auto;height:5px}
.plan-card[data-plan="full"]::before{
  background:linear-gradient(90deg,var(--silver-lo),var(--silver-hi) 50%,var(--silver-lo))}
.plan-card[data-plan="premium"]::before{
  background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi) 50%,var(--gold-lo))}

/* Each plan's heading in its own metal's ink. Dark enough to read as
   body-weight text; the bar above carries the colour. */
.plan-card[data-plan="full"] h2{color:var(--silver-ink)}
.plan-card[data-plan="premium"] h2{color:var(--gold-ink)}

/* .ribbon is kept because the stylesheet is shared; the "Most members"
   instance on /membership/upgrade is gone. Note it cannot be used on a card
   that has a metal bar: the bar needs `overflow:hidden` to follow the 18px
   corner radius, which clips a ribbon hanging 11px above the card. */
.ribbon{position:absolute;top:-11px;left:26px;background:var(--blue);color:#fff;
        font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
        border-radius:999px;padding:5px 12px}

.plan-card h2{font-size:22px;letter-spacing:-.01em;margin:0}
.price{display:flex;align-items:baseline;gap:6px}
.price .cur{font-size:14px;font-weight:700;color:var(--mute)}
.price b{font-size:38px;letter-spacing:-.03em;line-height:1}
.price .per{font-size:14px;font-weight:600;color:var(--mute)}

.plan-lines{list-style:none;margin:0;padding:14px 0;border-top:1px solid var(--line);
            border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.plan-lines li{display:flex;align-items:baseline;gap:10px;font-size:13.5px}
.plan-lines li span{flex:1;min-width:0;color:#475569}
.plan-lines li i{font-style:normal;font-size:12px;color:var(--mute);white-space:nowrap}
.plan-lines li b{font-variant-numeric:tabular-nums}

.plan-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan-perks li{position:relative;padding-left:26px;font-size:14px;line-height:1.5;color:#334155}
.plan-perks li:before{content:"✓";position:absolute;left:0;top:-1px;
                      color:var(--sell);font-weight:800;font-size:14px}
/* What a plan does not include is worth saying, and worth not ticking. */
.plan-perks li.no{color:var(--mute)}
.plan-perks li.no:before{content:"—";color:var(--mute)}

.btn.wide{width:100%;padding:13px 18px;justify-content:center}

.open-invoice .lrow{align-items:center}
.how{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;
     font-size:14px;line-height:1.6;color:#475569}

/* ---------- One invoice ---------- */
.inv-wrap{max-width:840px;padding-top:24px;padding-bottom:64px;
          display:flex;flex-direction:column;gap:16px}

.inv-actions{display:flex;align-items:center;gap:12px}
.inv-actions .sp{flex:1}

.inv{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:40px 44px;
     display:flex;flex-direction:column;gap:28px}

.inv-head{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.inv-head .who p{margin:14px 0 0;font-size:13px;line-height:1.7;color:var(--mute)}
.inv-head .who a{color:var(--blue)}
.inv-head .meta{text-align:right}
.inv-head h1{font-size:30px;letter-spacing:-.02em;margin:0 0 12px;color:var(--blue)}
.inv-head table{border-collapse:collapse;margin-left:auto;font-size:13px}
.inv-head th{text-align:left;padding:3px 16px 3px 0;font-weight:600;color:var(--mute)}
.inv-head td{text-align:right;padding:3px 0}

.inv-to{display:flex;flex-direction:column;gap:4px}
.inv-to .k{font-size:10.5px;font-weight:700;letter-spacing:.08em;
           text-transform:uppercase;color:var(--mute)}
.inv-to b{font-size:17px}
.inv-to p{margin:2px 0 0;font-size:13.5px;color:#475569;line-height:1.6}

.inv-lines{width:100%;border-collapse:collapse;font-size:14px}
.inv-lines th,.inv-lines td{padding:11px 0;text-align:left}
.inv-lines thead th{font-size:10.5px;font-weight:700;letter-spacing:.08em;
                    text-transform:uppercase;color:var(--mute);
                    border-bottom:2px solid var(--line)}
.inv-lines tbody td{border-bottom:1px solid var(--line)}
.inv-lines .num{text-align:right;font-variant-numeric:tabular-nums}
.inv-lines tfoot th{text-align:right;padding-right:16px;font-weight:600;color:#475569}
.inv-lines tfoot td{text-align:right;font-variant-numeric:tabular-nums}
.inv-lines tfoot .total th,.inv-lines tfoot .total td{font-size:17px;font-weight:800;
                                                      color:var(--ink);padding-top:14px;
                                                      border-top:2px solid var(--line)}

.inv-paid{background:var(--sell-10);border-radius:14px;padding:18px 20px}
.inv-paid b{display:block;font-size:16px;color:#14532D;margin-bottom:4px}
.inv-paid p{margin:0;font-size:13.5px;line-height:1.6;color:#166534}

.inv-pay h2{font-size:16px;margin:0 0 8px}
.inv-pay p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:#475569}
.bank{border-collapse:collapse;font-size:13.5px}
.bank th{text-align:left;padding:5px 24px 5px 0;font-weight:600;color:var(--mute);white-space:nowrap}
.bank td{padding:5px 0;font-weight:700;font-variant-numeric:tabular-nums}

.inv-foot p{margin:0;padding-top:20px;border-top:1px solid var(--line);
            font-size:11.5px;line-height:1.6;color:var(--mute)}

/* ---------- Paper ----------
   The member's accounts copy is this page, so it has to come out of the
   printer as a document rather than as a screenshot of a website. */
@media print{
  .no-print,.site-header,footer,.ad{display:none!important}
  body{background:#fff!important}
  .inv-wrap{max-width:none;padding:0}
  .inv{box-shadow:none;border-radius:0;padding:0}
  .inv-lines tbody td{border-bottom:1px solid #ddd}
  a{text-decoration:none;color:#000}
  @page{margin:18mm}
}

@media (max-width:767px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .inv{padding:24px 20px}
  .inv-head .meta{text-align:left}
  .inv-head table{margin-left:0}
  .price b{font-size:32px}
}

/* ---------- The plain cards on this page ----------
   .card in mesteel.css is a white box with a border and nothing else —
   its padding and its inner vocabulary live in dashboard.css, which the
   membership page does not load. So "You have an invoice waiting" and
   "How payment works" were sitting flush against the card edge with
   their rows unstyled.

   Ported rather than pulling in the whole dashboard stylesheet: this is
   the handful of rules those two cards actually use, and billing.css is
   loaded on no page that would be affected by them. */
.ed-wrap > .card{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.ed-wrap .ch{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.ed-wrap .ch b{font-size:17px}
.ed-wrap .fine{margin:0;font-size:11.5px;color:var(--faint);line-height:1.5}

.ed-wrap .lrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg);border-radius:12px;padding:12px 14px}
.ed-wrap .lrow .lk{flex:1;min-width:160px;font-size:14px;font-weight:700;color:var(--ink)}
.ed-wrap .lrow .lk:hover{color:var(--blue)}
.ed-wrap .lrow b{font-variant-numeric:tabular-nums}

.ed-wrap .badge{font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px}
.ed-wrap .badge.ok{background:var(--green-10);color:var(--green)}
.ed-wrap .badge.wait{background:#FEF3C7;color:#92400E}
.ed-wrap .badge.off{background:#F1F5F9;color:var(--mute)}

/* The invoice's own footer is not the site's. Its rule was a bare
   element selector until now, so this only restores what it should
   always have been. */
.inv-foot{background:none;color:inherit;margin-top:0}

@media (max-width:639px){
  .ed-wrap > .card{padding:18px}
}

/* ── Paying an invoice, from the invoice page ─────────────────────────
   Above the document, not inside it: the invoice is the thing being
   printed and this is the thing being clicked. .no-print keeps it off
   the paper. */
.inv-paybox{max-width:820px;margin:0 auto 16px;background:#fff;border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow);padding:18px 20px}
.ip-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ip-head b{font-size:15px}
.ip-amt{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}

.ip-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.ip-acts .btn{min-height:44px}

.ip-msg{margin:11px 0 0;font-size:13px;font-weight:600;color:var(--faint);line-height:1.55}
.ip-msg.bad{color:var(--red)}

/* Already claimed a transfer. Says so rather than offering the button
   again, which would read as though the first press had not registered. */
.ip-claimed{margin:11px 0 0;padding:11px 14px;border-radius:12px;background:var(--bg);
  font-size:12.5px;line-height:1.6;color:var(--mute)}

/* A real card typed into a test-mode form is never charged, and the
   person is left waiting for a membership that will not start. */
.ip-test{margin:12px 0 0;font-size:12px;line-height:1.55;color:#92400E;
  background:#FFFBEB;border:1px dashed #D97706;border-radius:10px;padding:9px 12px}

.ip-confirm{text-align:center;padding:14px 0}
.ip-confirm p{margin:12px 0 0;font-size:14px;font-weight:600;color:var(--faint)}
.ip-confirm b{display:block;font-size:16px}
.ip-spin{width:28px;height:28px;margin:0 auto;border-radius:50%;
  border:3px solid var(--blue-10);border-top-color:var(--blue);animation:ipSpin .8s linear infinite}
@keyframes ipSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ip-spin{animation-duration:2.4s}}

/* The reader's plan, mentioned on the company membership page. A note,
   not a fourth plan card: those sell a company a listing and this sells
   a person a login, and side by side they invite a comparison on price
   that gets the cheapest chosen for the wrong reason. */
.np-aside{margin:24px 0 8px;padding:14px 18px;background:var(--bg);
  border-radius:14px;font-size:14px;line-height:1.6;color:#475569}
.np-aside b{color:var(--ink)}
.np-aside a{color:var(--blue);font-weight:700;white-space:nowrap}