/* ════════════════ PRICING — one flat rate row + fee slider ════════════════ */
/* A jump to #pricing lands it flush with the top of the view, under the floating nav, and it fills the view with its content centered,
   so neither the Sign Up card nor the FAQ peeks in (lvh keeps that true after mobile toolbars collapse).
   #signup gives up its bottom padding so the gaps above and below match. */
#signup { padding-bottom: 0; }
#pricing { scroll-margin-top: 0; min-height: 100lvh; display: flex; flex-direction: column; justify-content: center; }
#pricing > .wrap { width: 100%; }
.rates { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 640px; margin: 44px auto 0; padding: 0; }
.rates li { display: grid; align-content: start; gap: 8px; padding: 4px 12px; font-size: 13px; color: var(--ink-3); transition: opacity .4s; }
.rates li + li { border-left: 1px solid var(--hair-soft); }
.rates li.off { opacity: .32; }
.rates .rate { font: 800 clamp(30px, 3.6vw, 44px)/1 var(--rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--rc); }
.rates .r1 { --rc: #fff; } .rates .r2 { --rc: var(--mint); } .rates .r3 { --rc: var(--amber); }
.band-fee { margin-top: 2px; font: 700 15px/1 var(--rounded); font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* Slider: the 20px thumb centers at 10px + (100% − 20px) × p, so the fill and the band ticks use the same offset. */
.fee-calc { max-width: 640px; margin: 36px auto 0; }
.fee-track { position: relative; --p: .5; }
.fee-track .tick { position: absolute; top: 50%; left: calc(10px + (100% - 20px) * var(--at, 0)); width: 2px; height: 14px; margin: -7px 0 0 -1px; border-radius: 2px; background: var(--mint); pointer-events: none; }
.fee-track .tick.r3 { background: var(--amber); }
.fee-track input { position: relative; z-index: 1; display: block; width: 100%; height: 24px; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; }
.fee-track input:focus-visible { outline: none; }
.fee-track input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--money) 0 calc(10px + (100% - 20px) * var(--p)), rgba(255,255,255,.1) 0); }
.fee-track input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); }
.fee-track input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--money); }
.fee-track input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--mint-hi) 55%, var(--money)); box-shadow: 0 0 0 5px rgba(135,189,159,.16), 0 0 18px rgba(138,213,172,.7); transition: box-shadow .25s; }
.fee-track input::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--mint-hi) 55%, var(--money)); box-shadow: 0 0 0 5px rgba(135,189,159,.16), 0 0 18px rgba(138,213,172,.7); transition: box-shadow .25s; }
.fee-track input:hover::-webkit-slider-thumb, .fee-track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 9px rgba(135,189,159,.2), 0 0 24px rgba(138,213,172,.9); }
.fee-track input:hover::-moz-range-thumb, .fee-track input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 9px rgba(135,189,159,.2), 0 0 24px rgba(138,213,172,.9); }
.fee-out { display: block; margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); font-variant-numeric: tabular-nums; text-wrap: balance; }
.fee-out b { font: 700 17px var(--rounded); color: #fff; }

.price-fine { margin: 24px auto 0; max-width: 640px; font-size: 13px; line-height: 1.6; color: var(--ink-4); text-wrap: pretty; }

@media (max-width: 560px) {
  .rates { margin-top: 32px; }
  .rates li { padding-inline: 6px; font-size: 12px; }
  .band-fee { font-size: 13px; }
  .fee-out { font-size: 14px; }
}