/* ============================================================
   SellFee Calculator · sellfeecalculator.com — production CSS
   Direction "Ledger Paper" — from design-mocks/assets/site.css (R5 moying)
   v2 approved baseline: red fee amounts + FEES TOTAL row + single-line nav
   (decisions #10). Mock-only rules removed. Do not redesign here.
   ============================================================ */

/* ---- Tokens ---- */
:root{
  --paper:#FAF9F5;
  --surface:#FFFFFF;
  --surface-2:#F3F1E9;
  --ink:#20241F;
  --ink-2:#5A6158;
  --ink-3:#8B9188;
  --line:#E4E1D4;
  --line-strong:#C8C4B4;
  --keep:#156B47;
  --keep-deep:#0D5234;
  --keep-bg:#E9F3ED;
  --fee:#A8402A;
  --fee-bg:#F9EDE8;
  --trust:#2C5E8C;
  --trust-bg:#EAF1F7;
  --promo:#8A5A00;
  --promo-bg:#FBF3E0;
  --danger:#A8402A;
  --font-ui:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-num:'IBM Plex Mono','SF Mono',Consolas,monospace;
  --r-table:2px; --r-ctl:4px; --r-card:6px; --r-modal:8px;
  --shadow-1:0 1px 2px rgba(32,36,31,.07);
  --shadow-2:0 8px 28px rgba(32,36,31,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.6;
}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px}
@media(max-width:640px){ .wrap{padding:0 16px} }
a{color:var(--trust); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:#1d4768}
h1,h2,h3{line-height:1.25; letter-spacing:-.01em; margin:0 0 .35em}
h1{font-size:clamp(26px,4vw,38px); font-weight:800}
h2{font-size:clamp(19px,2.6vw,24px); font-weight:700; margin-top:2.2em}
h3{font-size:16px; font-weight:700; margin-top:1.6em}
p{margin:.5em 0 1em}
.num,.mono{font-family:var(--font-num); font-variant-numeric:tabular-nums}
.small{font-size:13px; color:var(--ink-2)}
.note{font-size:12.5px; color:var(--ink-3)}
hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* ---- AdSense reserved container (production: empty div, no copy, no script) ---- */
.ad-slot{min-height:0}

/* ---- Header / Nav (v2: single line) ---- */
.site-head{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40}
.head-row{display:flex; align-items:center; gap:28px; height:62px}
.wordmark{display:flex; align-items:baseline; gap:1px; text-decoration:none; color:var(--ink)}
.wordmark .wm-strong{font-weight:800; font-size:19px; letter-spacing:-.02em}
.wordmark .wm-light{font-weight:500; font-size:19px; letter-spacing:-.01em; color:var(--ink-2)}
.wordmark .wm-dot{width:6px;height:6px;border-radius:50%;background:var(--keep); align-self:center; margin-left:6px}
.main-nav{display:flex; gap:22px; flex:1; align-items:center}
.main-nav a{font-size:13.5px; font-weight:600; color:var(--ink); text-decoration:none; padding:4px 0;
  border-bottom:2px solid transparent; white-space:nowrap}
.main-nav a:hover{border-bottom-color:var(--line-strong)}
.main-nav a.on{border-bottom-color:var(--keep); color:var(--keep-deep)}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line-strong);
  border-radius:var(--r-ctl); width:40px; height:36px; cursor:pointer; align-items:center; justify-content:center}
.mobile-nav{display:none; background:var(--surface); border-bottom:1px solid var(--line); padding:8px 16px 14px}
.mobile-nav a{display:block; padding:10px 4px; font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none; border-bottom:1px solid var(--line)}
body.nav-open .mobile-nav{display:block}
@media(max-width:880px){
  .main-nav{display:none}
  .nav-toggle{display:inline-flex}
}

/* ---- Breadcrumb ---- */
.crumbs{font-size:12.5px; color:var(--ink-3); padding:14px 0 4px}
.crumbs a{color:var(--ink-2)}

/* ---- Trust components (T1/T2) ---- */
.chip-verify{display:inline-flex; align-items:center; gap:4px; font-family:var(--font-num);
  font-size:11px; color:var(--trust); background:var(--trust-bg); border:1px solid #ccdaea;
  border-radius:3px; padding:2px 7px; text-decoration:none; white-space:nowrap}
.chip-verify:hover{background:#dfeaf4}
.page-badge{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-num); font-size:12px;
  color:var(--keep-deep); background:var(--keep-bg); border:1px solid #c6dfd0;
  border-radius:4px; padding:5px 10px}
.srcline{display:block; font-size:12.5px; color:var(--ink-2); margin-top:2px}
.srcline .chip-verify{margin-left:0; margin-top:3px}
.fee-lines{width:100%}
@media(max-width:420px){
  .fee-lines th[style]{width:64px !important}
  .fee-lines .c-amt{font-size:13px}
  .chip-verify{font-size:10.5px; padding:2px 5px}
  .net-row .val{font-size:26px}
}
.promo-tag{display:inline-block; font-family:var(--font-num); font-size:10.5px; letter-spacing:.03em;
  color:var(--promo); background:var(--promo-bg); border:1px solid #e8d5a8; border-radius:3px; padding:1px 6px}
.errline{font-size:13px; color:var(--ink-2); padding:10px 0 2px}
.errline a{font-weight:600}

/* ---- Layout primitives ---- */
.grid{display:grid; gap:20px}
/* R8-fix: mobile-collapsing 2-col grid (inline 1fr 1fr styles never collapsed and
   overflowed at 320 with fallback fonts) */
.grid-2{grid-template-columns:1fr 1fr}
@media(max-width:560px){ .grid-2{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-1)}
.pad{padding:20px}
@media(max-width:640px){ .pad{padding:16px} }
.two-col{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:28px}
.two-col>div{min-width:0}
.grid>*{min-width:0}
@media(max-width:960px){ .two-col{grid-template-columns:1fr} }

/* ---- Form controls (IME-safe: type=text + inputmode; no value rewrite during composition) ---- */
.field{margin-bottom:14px}
.field label{display:block; font-size:13px; font-weight:600; margin-bottom:5px}
.field .hint{font-size:11.5px; color:var(--ink-3); font-weight:400; margin-left:6px}
.inp,select.inp{width:100%; font-family:var(--font-num); font-size:16px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-ctl);
  padding:9px 12px; outline:none}
.inp:focus{border-color:var(--keep); box-shadow:0 0 0 3px rgba(21,107,71,.14)}
select.inp{font-family:var(--font-ui); font-size:14.5px; appearance:auto}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-weight:700;
  font-size:14.5px; background:var(--keep); color:#fff; border:1px solid var(--keep-deep);
  border-radius:var(--r-ctl); padding:10px 18px; cursor:pointer; text-decoration:none}
.btn:hover{background:var(--keep-deep)}
.btn-ghost{background:var(--surface); color:var(--ink); border:1px solid var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.check-row{display:flex; align-items:center; gap:8px; font-size:13.5px; margin:10px 0}
.check-row input{width:16px; height:16px; accent-color:var(--keep)}
.adv-toggle{background:none; border:0; font-size:12.5px; font-weight:600; color:var(--ink-2);
  cursor:pointer; padding:4px 0; text-decoration:underline; text-underline-offset:2px}
.adv-panel{display:none; border:1px dashed var(--line-strong); border-radius:var(--r-card);
  padding:12px 14px; margin-top:10px}
.adv-panel.open{display:block}

/* ---- Calculator template (v2: red bold fee lines + FEES TOTAL row) ---- */
.calc-card{padding:22px}
.calc-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.calc-grid .span2{grid-column:1/-1}
@media(max-width:640px){ .calc-grid{grid-template-columns:1fr} }
.result-card{background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-card); margin-top:18px}
.result-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:14px 18px; border-bottom:1px solid var(--line)}
.fee-lines{width:100%; border-collapse:collapse; font-size:14px}
.fee-lines th{text-align:right; font-weight:600; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-3); padding:10px 18px 6px; border-bottom:1px solid var(--line)}
.fee-lines th:first-child{text-align:left}
.fee-lines td{padding:9px 18px; border-bottom:1px solid var(--line); vertical-align:top}
.fee-lines tr:last-child td{border-bottom:0}
.fee-lines .c-name{font-weight:600; max-width:420px}
.fee-lines .c-amt{font-family:var(--font-num); text-align:right; white-space:nowrap}
.fee-lines .fee-amt{color:var(--fee); font-weight:700; font-size:15.5px}
.fee-lines tr.fee-total td{border-top:2px solid var(--line-strong); padding-top:12px}
.fee-lines .fee-total-lbl{font-weight:700; font-size:13px; color:var(--fee); text-transform:uppercase; letter-spacing:.04em}
.fee-lines .fee-total-amt{font-family:var(--font-num); font-weight:700; font-size:19px; color:var(--fee)}
/* R8-fix: narrow-viewport table fit — placed AFTER the base .fee-lines rules above.
   The same-specificity override used to sit before them (dead code since the mock
   port), and fallback-font metrics pushed min-content past the 320 viewport. */
@media(max-width:420px){
  .fee-lines th,.fee-lines td{padding-left:8px; padding-right:8px}
  .fee-lines .chip-verify{white-space:normal; line-height:1.5}
}
.net-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--keep-bg); border-top:1px solid #cfe3d7; border-radius:0 0 var(--r-card) var(--r-card)}
.net-row .lbl{font-size:13px; font-weight:700; color:var(--keep-deep); text-transform:uppercase; letter-spacing:.04em}
.net-row .val{font-family:var(--font-num); font-size:30px; font-weight:600; color:var(--keep-deep)}
.net-row .val small{font-size:14px; color:var(--ink-2); font-weight:400}
.cta-compare{margin-top:16px; border:1px solid #c6dfd0; background:var(--keep-bg); border-radius:var(--r-card);
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap}
.cta-compare .t{font-weight:700; font-size:14.5px; color:var(--keep-deep)}
.cta-compare .d{font-size:12.5px; color:var(--ink-2)}

/* ---- History (localStorage) ---- */
.hist-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin:14px 0 8px}
.hist-head h3{margin:0}
.hist-empty{font-size:13px; color:var(--ink-3)}
.hist-list{list-style:none; padding:0; margin:0}
.hist-list li{display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-bottom:1px solid var(--line);
  padding:9px 2px; font-size:13.5px}
.hist-list .h-name{font-weight:600; flex:1; min-width:140px}
.hist-list .h-name input{font-family:var(--font-ui); font-size:13.5px; border:1px solid var(--line-strong);
  border-radius:var(--r-ctl); padding:3px 8px; width:100%; max-width:260px}
.hist-list .h-sum{font-family:var(--font-num); font-size:12.5px; color:var(--ink-2); white-space:nowrap}
.hist-list .h-act{margin-left:auto; white-space:nowrap}
.link-btn{background:none; border:0; color:var(--trust); font-size:12.5px; font-weight:600; cursor:pointer;
  padding:2px 4px; text-decoration:underline; text-underline-offset:2px}
.link-btn.danger{color:var(--danger)}

/* ---- GEO answer block ---- */
.geo-answer{border-left:3px solid var(--trust); background:var(--surface); border-radius:0 var(--r-card) var(--r-card) 0;
  padding:14px 18px; margin:18px 0; font-size:14.5px}
.geo-answer .k{font-family:var(--font-num); font-size:11px; letter-spacing:.08em; color:var(--trust);
  text-transform:uppercase; display:block; margin-bottom:4px}

/* ---- Data tables ---- */
.tbl-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -20px; padding:0 20px}
@media(max-width:640px){ .tbl-wrap{margin:0 -16px; padding:0 16px} }
table.data{width:100%; min-width:560px; border-collapse:collapse; font-size:13.5px}
table.data th{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3);
  text-align:left; padding:8px 10px; border-bottom:2px solid var(--line-strong)}
table.data td{padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
table.data .num td, td.num{font-family:var(--font-num); font-variant-numeric:tabular-nums}

/* ---- Compare ---- */
.seg{display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-ctl); overflow:hidden}
.seg button{font-family:var(--font-ui); font-size:12.5px; font-weight:600; padding:6px 12px; border:0;
  background:var(--surface); color:var(--ink-2); cursor:pointer}
.seg button.on{background:var(--ink); color:#fff}
.plat-row{border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); margin-bottom:12px}
.plat-main{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px}
.plat-rank{font-family:var(--font-num); font-size:20px; color:var(--ink-3); text-align:center}
.plat-rank.top{color:var(--keep-deep)}
.plat-name{font-weight:700; font-size:15.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.plat-sub{font-size:12px; color:var(--ink-3); margin-top:2px}
.plat-nums{text-align:right; white-space:nowrap}
.plat-nums .payout{font-family:var(--font-num); font-size:19px; font-weight:600; color:var(--keep-deep)}
.plat-nums .fees{font-family:var(--font-num); font-size:12.5px; color:var(--fee)}
details.plat-detail{border-top:1px solid var(--line); background:#FCFBF7}
details.plat-detail summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--ink-2); padding:9px 16px}
details.plat-detail summary::-webkit-details-marker{display:none}
details.plat-detail summary .chev{transition:transform .15s}
details.plat-detail[open] summary .chev{transform:rotate(90deg)}
.plat-detail .inner{padding:2px 16px 14px}
.line-item{display:flex; justify-content:space-between; gap:12px; font-size:13px; padding:5px 0; flex-wrap:wrap}
.line-item .li-l{color:var(--ink-2); min-width:200px; flex:1}
.line-item .li-a{font-family:var(--font-num); color:var(--fee); white-space:nowrap}
.line-item.buyer-line .li-a{color:var(--ink-3)}
.base-note{font-size:12px; color:var(--promo); background:var(--promo-bg); border:1px solid #e8d5a8;
  border-radius:3px; padding:4px 8px; display:inline-block; margin:6px 0}

/* ---- FAQ ---- */
.faq details{border-bottom:1px solid var(--line); padding:4px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:14.5px; padding:10px 0; list-style:none; display:flex; justify-content:space-between; gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--ink-2); font-size:14px; margin:0 0 12px}

/* ---- Affiliate CTA + FTC ---- */
.aff-cta{border:1px solid var(--line-strong); border-radius:var(--r-card); background:var(--surface); padding:16px 18px}
.ftc-line{font-size:12.5px; color:var(--ink-2); border-bottom:1px solid var(--line); padding-bottom:8px; margin-bottom:10px}
.aff-cta h4{margin:0 0 4px; font-size:15px}
.aff-cta .btn{margin-top:8px}
.aff-cta .why{font-size:12.5px; color:var(--ink-3); margin-top:8px}

/* ---- waitlist modal ---- */
.modal-overlay{position:fixed; inset:0; background:rgba(32,36,31,.45); display:none;
  align-items:flex-end; justify-content:center; z-index:60; padding:0}
@media(min-width:641px){ .modal-overlay{align-items:center; padding:24px} }
.modal-overlay.open{display:flex}
.modal{background:var(--surface); width:100%; max-width:440px; max-height:calc(100vh - 24px);
  border-radius:var(--r-modal) var(--r-modal) 0 0; display:flex; flex-direction:column}
@media(min-width:641px){ .modal{border-radius:var(--r-modal)} }
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; border-bottom:1px solid var(--line); flex:none}
.modal-head h3{margin:0; font-size:16px}
.modal-x{background:none; border:1px solid var(--line-strong); border-radius:var(--r-ctl); width:34px; height:34px;
  font-size:17px; line-height:1; cursor:pointer; color:var(--ink)}
.modal-body{padding:16px 18px; overflow-y:auto}
.modal-state{font-size:12.5px; font-family:var(--font-num); border-radius:3px; padding:6px 10px; margin-top:10px; display:none}
.modal-state.ok{display:block; background:var(--keep-bg); color:var(--keep-deep)}
.modal-state.fail{display:block; background:var(--fee-bg); color:var(--fee)}

/* ---- Toast ---- */
.toast{position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(8px); opacity:0;
  background:var(--ink); color:#fff; font-size:13px; padding:9px 16px; border-radius:var(--r-ctl);
  z-index:70; transition:opacity .18s, transform .18s; pointer-events:none; max-width:88vw; text-align:center}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---- Footer ---- */
.site-foot{border-top:1px solid var(--line); background:var(--surface); margin-top:56px; padding:30px 0 40px; font-size:13px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px}
@media(max-width:880px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .foot-grid{grid-template-columns:1fr} }
.site-foot h5{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin:0 0 8px}
.site-foot a{color:var(--ink-2); text-decoration:none; display:block; padding:2px 0}
.site-foot a:hover{color:var(--ink); text-decoration:underline}
.foot-bottom{border-top:1px solid var(--line); margin-top:22px; padding-top:14px; display:flex;
  justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:var(--ink-3)}

/* ---- Platform matrix (home) ---- */
.plat-card{display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:14px 16px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow-1)}
.plat-card:hover{border-color:var(--keep)}
.plat-card .pc-rate{font-family:var(--font-num); font-size:12.5px; color:var(--ink-2); margin-top:4px}
.plat-card b{font-size:14.5px}
.matrix{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
@media(max-width:960px){ .matrix{grid-template-columns:repeat(2,1fr)} }
@media(max-width:480px){ .matrix{grid-template-columns:1fr} }

/* ---- misc ---- */
.hero-sub{font-size:16px; color:var(--ink-2); max-width:640px; margin-top:-2px}
.step-list{counter-reset:step; list-style:none; padding:0}
.step-list li{counter-increment:step; position:relative; padding:0 0 18px 44px}
.step-list li:before{content:counter(step); position:absolute; left:0; top:0; width:28px; height:28px;
  border:1px solid var(--line-strong); border-radius:50%; background:var(--surface);
  font-family:var(--font-num); font-size:13px; display:flex; align-items:center; justify-content:center; color:var(--keep-deep)}
.vercard{display:flex; gap:16px; align-items:center; flex-wrap:wrap; background:var(--keep-bg);
  border:1px solid #c6dfd0; border-radius:var(--r-card); padding:16px 18px}
.vercard .v{font-family:var(--font-num); font-size:22px; font-weight:600; color:var(--keep-deep)}
.notax{font-size:12.5px; color:var(--ink-3); border-top:1px solid var(--line); margin-top:24px; padding-top:12px}