/* Payments, checkout and the creator money pages. Same tokens as site.css (loaded first). No inline styles: CSP. */

.money-box{border:2px solid var(--navy);border-radius:var(--r);padding:24px;display:grid;gap:16px;max-width:560px;background:var(--white)}
.money-box h2{font-size:var(--h2)}
/* .notice, .inline-form, .actions and .table-wrap are site.css's (#129, Y-02: this sheet had its own copies). */

/* The price, line by line: you pay, the maker gets, card fees, Trilly's commission. One column, always (#129, B-04: as
   ".split" it took site.css's two-column grid and drew a 2x2 grid on desktops). */
.money-lines{display:grid;grid-template-columns:minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;max-width:520px}
.money-lines div{display:flex;justify-content:space-between;gap:16px;padding:12px 18px;border-top:1px solid var(--line)}
.money-lines div:first-child{border-top:0}
.money-lines .total{background:var(--mint);font-weight:600}
.money-lines .total b{font-family:var(--display);font-size:var(--h3);font-weight:700}

/* tables */
.money-table{width:100%;border-collapse:collapse;font-size:var(--fs-body);min-width:620px}
.money-table th,.money-table td{padding:11px 14px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.money-table thead th{border-top:0;background:var(--mist);font-weight:500;color:var(--soft);font-size:var(--fs-small)}
.money-table td.num,.money-table th.num{text-align:right;white-space:nowrap}
.money-table tr.neg td{color:var(--bad)}
.money-table tr.current td{background:var(--cream)}
/* Phones: a price and card fee every example shares are said once above the cards, not in each card (layout review G5-10). */
.money-same{display:none}
@media (max-width:640px){
  .money-same{display:block;margin-top:4px}
  .money-table .num-same{display:none}
}

/* totals */
.totals{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:760px){.totals{grid-template-columns:1fr}}

/* tier progress */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:860px){.ladder{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.ladder{grid-template-columns:1fr}}
.rung{border:1px solid var(--line);border-radius:20px;padding:16px 18px;display:grid;gap:8px;align-content:start}
.rung.here{border-color:var(--navy);background:var(--cream)}
.rung ul{margin:0;padding-left:18px;font-size:var(--fs-body);color:var(--soft);display:grid;gap:3px}
.rung-coming{margin:4px 0 0;font-weight:600;color:var(--navy)}
.rung .keep{font-family:var(--display);font-weight:700;font-size:var(--fs-num);color:var(--navy)}
.progress-list{display:grid;gap:18px;max-width:640px}
.progress-row{display:grid;gap:6px}
.progress-row .label{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meter{height:12px;border-radius:6px;background:var(--mist);overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);border-radius:6px}
.meter.done i{background:var(--good)}

/* plans */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:960px){.plans{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.plans{grid-template-columns:1fr}}
/* Two plans side by side at half the width, not two cards in a four-card grid (layout review G5-03, G2-23). */
@media (min-width:521px){
  .plans.plans-2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
}
/* Each plan's button sits at its foot, level with its neighbours' (pattern L, G5-04, G2-33). */
.plan{border:1px solid var(--line);border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:10px}
.plan>.plan-go{margin-top:auto;align-self:flex-start}
.plan.here{border-color:var(--navy)}
.plan .cost{font-family:var(--display);font-weight:700;font-size:var(--fs-num);color:var(--navy)}
.plan ul{margin:0;padding-left:18px;font-size:var(--fs-body);color:var(--soft);display:grid;gap:3px}
.usage{display:grid;gap:14px;max-width:640px}

/* The FAQ accordion is site.css's now (_Faq, every page that has questions: #129, Y-03). */

.big-promise{font-family:var(--display);font-weight:700;font-size:var(--h1);color:var(--navy);line-height:1.05}

/* Checkout leads with what it costs and three promises; who gets what and the fine print fold below (#136, audit B-07). */
.you-pay{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--ink)}
.you-pay b{font-family:var(--display);font-size:var(--fs-num);color:var(--navy);line-height:1.1;font-weight:700}
.next-step{margin:0;font-size:var(--fs-body)}
.fine-print{border-top:1px solid var(--line);padding-top:6px;display:grid;gap:12px}
.fine-print>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
.fine-print[open]>summary{margin-bottom:4px}
.fine-print ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:var(--fs-body)}

/* checkout agreement (dispute evidence: the buyer ticks this before paying) */
.agree{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:var(--fs-body)}
.agree input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--navy)}
/* phones: the checkout button stays in reach at the bottom of the screen while the box is in view */
@media (max-width:640px){
  .money-box{padding:18px}
  .checkout-go{position:sticky;bottom:0;z-index:5;margin:0 -18px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));background:var(--white);border-top:1px solid var(--line)}
  .checkout-go .agree{margin:0 0 10px}
  .checkout-go .btn{width:100%}
}
/* A plan change, confirmed with what it means (the UX audit's T-24). */
.confirm-box{border-color:var(--marigold)}
.confirm-lines{margin:0;padding-left:20px;display:grid;gap:6px}