/* Payout plans. Tokens from site.css, so light and dark mode follow the system. */
.plans .wrap{ max-width:var(--w); margin:0 auto; padding-left:24px; padding-right:24px; }
.plans .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.js-only{ display:none !important; }
.js .js-only{ display:flex !important; }
.js .nojs-summary{ display:none; }

/* hero */
.p-hero{ padding-top:40px; padding-bottom:24px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap:24px 56px; align-items:end; }
.p-hero .eyebrow{ margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 18px; font:600 15px/1.2 var(--f-ui); }
.p-hero .kicker{ color:var(--accent); }
.p-hero .fresh{ font-size:13.5px; }
.p-hero h1{ margin:0; font:600 clamp(46px, 5.4vw, 76px)/0.95 var(--f-display); letter-spacing:-0.01em; color:var(--ink); text-wrap:balance; }
.p-hero .lede{ margin:0; max-width:56ch; font:400 17.5px/1.5 var(--f-body); color:var(--ink-2); text-wrap:pretty; }

/* your plan */
.p-panel{ padding-bottom:32px; }
.panel{ background:var(--surface); border:1px solid var(--rule); border-radius:16px; padding:20px 24px 22px; display:flex; flex-direction:column; gap:20px; }
.ctl{ flex-wrap:wrap; align-items:flex-end; gap:16px 28px; }
.ctl > div{ display:flex; flex-direction:column; gap:8px; }
.c-l{ font:600 15px/1 var(--f-ui); color:var(--ink-2); }
.seg-g{ display:inline-flex; flex-wrap:wrap; border:1px solid var(--rule-2); border-radius:12px; padding:4px; gap:3px; background:var(--surface); }
.seg-g button{ min-height:48px; padding:0 16px; border:0; border-radius:9px; background:transparent; color:var(--ink-2); font:600 17px/1 var(--f-ui); cursor:pointer; }
.seg-g button:hover{ background:var(--tint); color:var(--ink); }
.seg-g button[aria-checked="true"]{ background:var(--ink); color:var(--surface); }
.c-amt .seg-g button{ font:600 26px/1 var(--f-display); padding:0 14px; font-variant-numeric:lining-nums; }
.c-mkt select{ min-height:58px; padding:8px 12px; border-radius:12px; border:1px solid var(--rule-2); background:var(--surface); color:var(--ink); font:600 17px/1.2 var(--f-ui); }
.nojs-summary{ margin:0; font:400 16px/1.5 var(--f-body); color:var(--ink-2); }
.nojs-summary b{ color:var(--ink); }
.panel .tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr)); border-top:2px solid var(--ink); }
.panel .tile{ padding:14px 16px 14px 0; border-bottom:1px solid var(--rule); min-width:0; }
.panel .t-l{ display:block; font:600 13.5px/1.2 var(--f-ui); color:var(--ink-3); }
.panel .t-l.ok{ color:var(--money-ink); }
.panel .t-v{ display:block; margin-top:4px; font:600 46px/1 var(--f-display); color:var(--ink); }
.panel .t-v small{ margin-left:6px; font:500 17px/1.2 var(--f-ui); color:var(--ink-2); }
.none-plan{ grid-column:1 / -1; margin:0; padding:16px 0; font:500 16px/1.5 var(--f-ui); color:var(--ink-2); }
.where-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 20px; margin-bottom:10px; }
.where-h h2{ margin:0; font:600 20px/1.2 var(--f-ui); color:var(--ink); }
.where-h span{ font:500 14px/1.3 var(--f-ui); color:var(--ink-3); }
.bar{ display:flex; flex-wrap:wrap; gap:3px; }
.seg{ min-width:0; min-height:54px; border-radius:8px; background:var(--accent); color:var(--on-ink); display:flex; flex-direction:column; justify-content:center; padding:6px 12px; }
.seg b{ font:600 15px/1.15 var(--f-ui); overflow-wrap:anywhere; }
.seg span{ font:500 13px/1.2 var(--f-ui); }
.accs{ list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:0 32px; }
.acc{ padding:12px 0; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:4px; min-width:0; }
.a-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 9px; }
.acc .firm{ font:600 16px/1.25 var(--f-ui); color:var(--ink); text-decoration:none; }
.acc .firm:hover{ color:var(--accent); text-decoration:underline; }
.acc .pg{ font:500 15px/1.25 var(--f-ui); color:var(--ink-2); }
.lane{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font:500 12.5px/1.2 var(--f-ui); color:var(--ink-3); }
.lane i{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--ink-3); }
.lane.allowed i{ background:var(--lane-allowed); }
.lane.approval i, .lane.conditional i{ background:var(--lane-approval); }
.lane.banned i{ background:var(--lane-banned); }
.acc p{ margin:0; }
.a-t{ font:400 15px/1.45 var(--f-body); color:var(--ink-2); }
.a-t b{ color:var(--ink); font-weight:600; }
.a-s{ font:400 13.5px/1.45 var(--f-ui); color:var(--ink-3); }
.a-go{ font:600 14px/1.3 var(--f-ui); }
.a-go a{ display:inline-flex; align-items:center; min-height:30px; }

/* section heads */
.sec-h{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 24px; border-top:2px solid var(--ink); padding-top:12px; margin-bottom:16px; }
.sec-h h2{ margin:0; font:600 32px/1.1 var(--f-display); color:var(--ink); }
.sec-h p{ margin:0; font:500 14.5px/1.3 var(--f-ui); color:var(--ink-3); }

/* three ways */
.p-ways{ padding-bottom:40px; }
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap:16px; }
.card{ background:var(--surface); border:1px solid var(--rule); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:10px; }
.card.rec{ border:2px solid var(--accent); padding:17px 19px; }
.card.off h3{ color:var(--ink-2); }
.w-k{ margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font:600 14px/1.2 var(--f-ui); color:var(--ink-2); }
.w-dot{ width:10px; height:10px; border-radius:50%; background:var(--rule-2); }
.w-dot.on{ background:var(--accent); }
.badge{ margin-left:auto; padding:4px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-hover); font:600 12.5px/1 var(--f-ui); }
.card h3{ margin:0; font:600 26px/1.1 var(--f-display); color:var(--ink); }
.w-f{ margin:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.w-f div{ min-width:0; }
.w-f dt{ font:600 12.5px/1.2 var(--f-ui); color:var(--ink-3); }
.w-f dd{ margin:3px 0 0; font:600 19px/1.15 var(--f-ui); color:var(--ink); font-variant-numeric:tabular-nums lining-nums; }
.w-n{ margin:0; font:400 15px/1.5 var(--f-body); color:var(--ink-2); }

/* tables */
.p-each, .p-soon{ padding-bottom:40px; }
.tw{ overflow-x:auto; border:1px solid var(--rule); border-radius:14px; background:var(--surface); }
.tbl{ width:100%; border-collapse:collapse; font:400 15px/1.4 var(--f-ui); font-variant-numeric:tabular-nums lining-nums; }
.tbl th, .tbl td{ padding:13px 10px; text-align:right; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl tr > :first-child{ padding-left:18px; }
.tbl tr > :last-child{ padding-right:18px; }
.tbl thead th{ padding-top:13px; padding-bottom:11px; border-bottom:1.5px solid var(--ink); font-weight:600; font-size:13.5px; color:var(--ink-2); }
.tbl .l{ text-align:left; }
.tbl tbody th{ font-weight:600; color:var(--ink); white-space:nowrap; }
.tbl tbody th .t{ display:block; font-weight:500; font-size:13px; color:var(--ink-3); }
.tbl td.l{ color:var(--ink-2); }
.tbl td b{ font-weight:600; color:var(--ink); }
.tbl td.none{ color:var(--ink-3); }
.tbl tbody tr:last-child > *{ border-bottom:0; }
.soon td a{ font-weight:600; }
.soon td .sub{ display:block; margin-top:3px; font-size:13px; color:var(--ink-3); }
.plans .foot{ margin:12px 0 0; max-width:110ch; font:400 13.5px/1.5 var(--f-ui); color:var(--ink-3); }

/* read with care, in numbers */
.p-care{ padding-bottom:20px; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap:28px 48px; }
.p-care .sec-h h2{ font-size:28px; }
.care{ display:flex; flex-direction:column; gap:14px; font:400 15.5px/1.55 var(--f-body); color:var(--ink-2); }
.care p{ margin:0; }
.care b{ color:var(--ink); font-weight:600; }
.nbs{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:-4px; }
.nb{ padding:14px 14px 14px 0; border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:4px; min-width:0; }
.nb:nth-child(odd){ border-right:1px solid var(--rule); }
.nb:nth-child(even){ padding-left:16px; padding-right:0; }
.nb-v{ font:600 40px/1 var(--f-display); color:var(--ink); }
.nb-v small{ margin-left:5px; font:500 16px/1 var(--f-ui); color:var(--ink-2); }
.nb-t{ font:400 14px/1.4 var(--f-ui); color:var(--ink-2); }

@media (max-width: 760px){
  .tw{ border:0; background:none; overflow:visible; }
  .tbl, .tbl tbody{ display:block; }
  .tbl thead{ display:none; }
  .tbl tr{ display:grid; grid-template-columns:minmax(0, 1fr); gap:6px; padding:12px 14px; margin-bottom:10px; border:1px solid var(--rule); border-radius:12px; background:var(--surface); }
  .tbl th, .tbl td, .tbl tr > :first-child, .tbl tr > :last-child{ display:block; padding:0; border:0; text-align:left; }
  .tbl tbody th{ white-space:normal; }
  .tbl td[data-l]::before{ content:attr(data-l); display:block; font:600 12px/1.3 var(--f-ui); color:var(--ink-3); margin-bottom:1px; }
}
@media (max-width: 640px){
  .plans .wrap{ padding-left:16px; padding-right:16px; }
  .p-hero{ padding-top:24px; padding-bottom:18px; gap:14px; }
  .p-hero h1{ font-size:44px; }
  .p-hero .lede{ font-size:16.5px; }
  .panel{ padding:16px 14px 18px; gap:16px; }
  .ctl{ gap:14px; }
  .ctl > div{ width:100%; }
  .seg-g{ display:flex; }
  .seg-g button{ flex:1 1 auto; padding:0 10px; font-size:16px; }
  .c-amt .seg-g button{ font-size:22px; padding:0 8px; }
  .c-mkt select{ width:100%; min-height:48px; }
  .panel .tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .panel .tile{ padding:12px 10px 12px 0; }
  .panel .t-v{ font-size:32px; }
  .panel .t-v small{ display:block; margin:4px 0 0; font-size:14.5px; }
  .seg{ flex:1 1 calc(50% - 3px) !important; }
  .sec-h h2{ font-size:28px; }
  .w-f dd{ font-size:17px; }
  .nb-v{ font-size:34px; }
}
@media print{
  .js .ctl, .ctl{ display:none !important; }
  .js .nojs-summary{ display:block; }
  .seg{ background:none; color:#000; border:1px solid #000; }
  .badge{ background:none; border:1px solid #000; color:#000; }
  .card, .acc, .tbl tr{ break-inside:avoid; }
}