/* A balanced comparison and payout calculator, using the active palette. */
.home-benefits .fees-panel{grid-template-columns:minmax(0,1fr) minmax(260px,.85fr);gap:24px;align-items:stretch;padding:24px}
.home-benefits .fee-explainer{display:flex;flex-direction:column;grid-column:auto;gap:18px;min-width:0;justify-content:flex-start}
.fee-eyebrow{display:block;font-size:10px;letter-spacing:1.4px;font-weight:650;color:var(--theme-accent);margin-bottom:10px}
.home-benefits .fee-explainer h2{font-size:clamp(23px,1.8vw,30px);line-height:1.25;letter-spacing:-.7px;margin:0 0 12px}
.home-benefits .fee-explainer .benefit-copy p{font-size:13px;line-height:1.8;margin:0;color:var(--muted)}
.home-benefits .fee-comparison{box-sizing:border-box;width:100%;padding:16px 0 0;border:0;border-top:1px solid var(--theme-border);border-radius:0;background:transparent}
.fee-comparison .fee-chart-heading{font-size:11px;font-weight:400;margin-bottom:16px;gap:8px;flex-wrap:wrap;color:var(--muted)}
.fee-chart-heading>span>strong{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.fee-comparison .fee-saving-badge{padding:5px 7px;font-size:9px;letter-spacing:.1px;background:color-mix(in srgb,var(--theme-accent) 8%,transparent)}
.fee-comparison .fee-chart-row+.fee-chart-row{margin-top:16px}
.fee-comparison .fee-chart-row>div:first-child{margin-bottom:10px;min-height:26px}
.fee-comparison .fee-chart-row>div>span{font-size:12px;gap:8px;color:var(--text)}
.fee-comparison .fee-chart-row strong{font-size:26px;font-weight:600;letter-spacing:-.8px}
.fee-comparison .fee-chart-row strong>span{font-size:14px}
.fee-comparison .fee-chart-row.marketplace strong{color:var(--theme-accent)}
.fee-comparison .fee-chart-row.benchmark strong,.fee-comparison .fee-chart-row.benchmark>div>span{color:var(--muted)}
.fee-comparison .fee-chart-row .site-logo{display:inline-block;width:18px;height:24px;flex:0 0 18px;background:var(--theme-accent)}
.fee-comparison .fee-chart-track{height:6px;background:color-mix(in srgb,var(--muted) 10%,transparent);border:0}
.fee-comparison .marketplace .fee-chart-track>span{background:var(--theme-accent);width:20%}
.fee-comparison .benchmark .fee-chart-track>span{background:color-mix(in srgb,var(--muted) 45%,var(--theme-surface))}
.fee-comparison .fee-chart-row>small{display:block;margin-top:7px;font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.fee-comparison .fee-chart-note{padding:0;border:0;margin:18px 0 0;font-size:10px;opacity:.8}
:root[data-theme] .home-benefits .fee-calculator{display:flex;flex-direction:column;align-self:stretch;gap:12px;padding:16px;border:1px solid var(--theme-border);border-radius:14px;background:color-mix(in srgb,var(--theme-raised) 38%,var(--theme-surface));min-width:0}
.home-benefits .fee-calculator-heading{gap:10px;min-height:32px}
.home-benefits .fee-calculator h3{font-size:15px;margin:0;line-height:1.35}
.home-benefits .fee-calculator-icon{width:30px;height:30px;border-radius:8px;background:transparent;color:var(--theme-accent)}
.home-benefits .fee-calculator-inputs>label:not(.screen-reader-only){font-size:11px;margin-bottom:9px}
.home-benefits .fee-amount-field{padding:10px 12px;gap:9px;border:1px solid var(--theme-border);background:var(--theme-surface);border-radius:9px;min-width:0}
:root[data-theme] body .home-benefits .fee-amount-field input{display:block;flex:1;min-width:0;width:0;padding:0;margin:0;min-height:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;outline:none!important;color:var(--text);font-size:24px;line-height:1.25;letter-spacing:-.5px;font-weight:600;font-variant-numeric:tabular-nums}
.home-benefits .fee-amount-field:focus-within{border-color:var(--theme-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--theme-accent) 10%,transparent)}
.home-benefits .fee-amount-field:has([aria-invalid=true]){border-color:#ef929b}
.home-benefits .fee-amount-field>.fee-currency{font-size:9px;letter-spacing:.6px;flex:none;color:var(--muted)}
.home-benefits .fee-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 12px}
.home-benefits .fee-presets button{padding:8px 3px;min-height:32px;font-size:10px;cursor:pointer}
:root[data-theme] body .home-benefits .fee-presets button[aria-pressed=true]{background:color-mix(in srgb,var(--theme-accent) 10%,var(--theme-surface));border-color:color-mix(in srgb,var(--theme-accent) 55%,var(--theme-border));color:var(--theme-accent)}
.home-benefits #fee-slider{appearance:none;-webkit-appearance:none;height:4px;border:0;border-radius:4px;background:linear-gradient(to right,var(--theme-accent) var(--fee-progress,1%),var(--theme-border) var(--fee-progress,1%));margin:8px 0;box-shadow:none;padding:0}
.home-benefits #fee-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:13px;height:13px;border:2px solid var(--theme-surface);border-radius:50%;background:var(--theme-accent);box-shadow:0 0 0 1px var(--theme-accent)}
.home-benefits #fee-slider::-moz-range-thumb{width:10px;height:10px;border:2px solid var(--theme-surface);border-radius:50%;background:var(--theme-accent);box-shadow:0 0 0 1px var(--theme-accent)}
.home-benefits .fee-range-labels{margin-top:9px;font-size:9px}
.home-benefits .fee-breakdown{padding:10px 0 0;margin:0;border-top:1px solid var(--theme-border);grid-column:auto;grid-row:auto}
.home-benefits .fee-breakdown>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;font-size:12px}
:root[data-theme] .home-benefits .fee-breakdown dd{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.home-benefits .fee-breakdown dt small{background:none;padding:0;font-size:10px;margin-left:5px;color:var(--muted)}
.home-benefits .fee-breakdown .fee-net{flex-direction:row;align-items:center;gap:12px;background:transparent;border:0;border-top:1px solid var(--theme-border);border-radius:0;padding:12px 0 0;margin-top:8px}
.home-benefits .fee-net dt{font-size:12px;color:var(--muted)}
:root[data-theme] .home-benefits .fee-net dd{font-size:clamp(25px,2vw,30px);line-height:1.15;letter-spacing:-1px;font-weight:650;margin:0;color:var(--theme-accent)}
.home-benefits .fee-savings{margin:0;padding:0;border:0;margin-top:2px;text-align:left}
.home-benefits .fee-savings>span{display:block;font-size:12px;color:var(--text)}
.home-benefits .fee-savings strong{font-size:12px;font-weight:650;color:var(--theme-accent)}
.home-benefits .fee-savings>small{display:block;font-size:10px;color:var(--muted);margin-top:5px;line-height:1.5}
@media(max-width:1100px){.home-benefits .fees-panel{grid-template-columns:minmax(0,1fr) minmax(280px,.85fr);gap:32px}.home-benefits .fee-explainer{grid-column:auto}}
@media(max-width:650px){.home-benefits .fees-panel{grid-template-columns:minmax(0,1fr);padding:22px;gap:24px}.home-benefits .fee-explainer{gap:22px}:root[data-theme] .home-benefits .fee-calculator{padding:20px}.home-benefits .fee-net dd{font-size:32px}}

/* The trade illustration shares one center line for both profiles and the item. */
.home-benefits .trade-panel{display:flex;flex-direction:column;gap:20px;padding:24px;align-items:stretch}
.trade-panel-heading h2{font-size:clamp(23px,1.8vw,30px);line-height:1.25;letter-spacing:-.7px;margin:0}
.home-benefits .trade-diagram{padding:22px 14px 16px;border-radius:12px}
.home-benefits .trade-route{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1.2fr) 20px minmax(0,1fr);gap:4px;align-items:start}
.home-benefits .trade-route :is(.trade-person,.trade-item){display:grid;grid-template-rows:76px 20px;justify-items:center;align-items:center;gap:8px;min-width:0}
.home-benefits .trade-person>.trade-avatar{width:52px;height:52px;margin:0;align-self:center}
.home-benefits .trade-item>span{width:76px;height:76px;margin:0;align-self:center;background:transparent;border:0}
.home-benefits .trade-item img{width:76px;height:76px;object-fit:contain}
.home-benefits .trade-connector{display:grid;place-items:center;height:76px;margin:0;color:var(--muted)}
.home-benefits .trade-connector.active{color:var(--theme-accent)}
.home-benefits .trade-connector .icon{width:18px;height:18px}
.home-benefits .trade-route strong{font-size:11px;color:var(--text);line-height:20px}
.home-benefits .trade-verification{margin-top:16px;padding-top:13px;font-size:10px;line-height:1.5}
.home-benefits .trade-panel .benefit-copy{display:flex;flex-direction:column;gap:18px;flex:1}
.home-benefits .trade-panel .benefit-copy p{font-size:13px;line-height:1.8;margin:0;color:var(--muted)}
.home-benefits .trade-panel .benefit-copy .text-button{align-self:flex-start;margin-top:auto;padding:0;font-size:12px}
@media(max-width:650px){.home-benefits .trade-panel{padding:22px}.home-benefits .trade-diagram{padding-inline:10px}}
