/* Business finance set piece: card fee calculator (see partials/features/finance-calc.php).
   Default (no JS, reduced motion): the styled native range and the server-rendered result.
   .fcx.is-live (full motion with Draggable): the range goes invisible over a designed
   track and a big draggable handle drives it. */
.fcx { --k: 64px; overflow: clip; }
.fcx-grid { position: relative; z-index: 1; display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 1024px) { .fcx-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }
.fcx-copy > p { color: rgba(255,255,255,.86); margin-bottom: clamp(1.2rem, 2.2vw, 1.8rem); }

/* the calculator card */
.fcx-calc {
  position: relative; border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.6vw, 38px);
  background: linear-gradient(160deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.035) 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 70px -46px rgba(0,0,0,.7);
}
.fcx-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1.5rem; margin-bottom: .4rem; }
.fcx-label { font-weight: 600; font-size: 1.0625rem; color: rgba(255,255,255,.86); }
.fcx-takings { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.fcx-takings-n {
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: -.035em;
  font-size: clamp(2.2rem, 3.6vw, 3.3rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
}
.fcx-per { font-weight: 600; color: rgba(255,255,255,.7); }

/* the control: native range by default */
.fcx-control { position: relative; height: var(--k); margin-top: .5rem; }
.fcx-range {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: var(--k); margin: 0; background: transparent; cursor: pointer;
  --fill: calc(var(--k) / 2 + (100% - var(--k)) * var(--pn, .09));
}
.fcx-range::-webkit-slider-runnable-track {
  height: 14px; border-radius: 14px;
  background: linear-gradient(90deg, var(--tick) 0%, var(--mint-deep) var(--fill), rgba(255,255,255,.14) var(--fill));
}
.fcx-range::-moz-range-track { height: 14px; border-radius: 14px; background: rgba(255,255,255,.14); }
.fcx-range::-moz-range-progress { height: 14px; border-radius: 14px; background: linear-gradient(90deg, var(--tick), var(--mint-deep)); }
.fcx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: var(--k); height: var(--k); margin-top: calc((14px - var(--k)) / 2);
  border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 6px rgba(159,216,180,.28), 0 16px 30px -10px rgba(0,0,0,.55);
}
.fcx-range::-moz-range-thumb {
  width: var(--k); height: var(--k); border-radius: 50%; background: #fff; border: 0;
  box-shadow: 0 0 0 6px rgba(159,216,180,.28), 0 16px 30px -10px rgba(0,0,0,.55);
}
.fcx-range:focus-visible { outline: none; }
.fcx-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--pine), 0 0 0 7px var(--mint-deep); }
.fcx-range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px var(--pine), 0 0 0 7px var(--mint-deep); }

/* the designed track (live mode only) */
.fcx-drag { display: none; }
.fcx.is-live .fcx-range { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.fcx.is-live .fcx-drag { display: block; position: absolute; inset: 0; cursor: pointer; touch-action: pan-y; }
.fcx-rail {
  position: absolute; left: 0; right: 0; top: calc(50% - 8px); height: 16px; border-radius: 16px; overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 2px, transparent 2px 100%) calc(var(--k) / 2) 50% / calc((100% - var(--k)) / 20) 6px no-repeat,
    rgba(255,255,255,.12);
  background-repeat: repeat-x, no-repeat;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.35);
}
.fcx-fill {
  position: absolute; inset: 0; border-radius: inherit; transform-origin: left center;
  background: linear-gradient(90deg, var(--tick) 0%, var(--mint-deep) 100%);
  transform: scaleX(.1);
}
.fcx-knob {
  position: absolute; left: 0; top: 0; width: var(--k); height: var(--k); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #EAF4ED 70%, #D5E9DC 100%);
  box-shadow: 0 0 0 6px rgba(159,216,180,.26), 0 18px 34px -10px rgba(0,0,0,.6);
  display: grid; place-items: center; cursor: grab; touch-action: pan-y;
  transition: box-shadow .3s;
}
.fcx-knob:active, .fcx-knob.is-held { cursor: grabbing; box-shadow: 0 0 0 10px rgba(159,216,180,.34), 0 24px 40px -12px rgba(0,0,0,.65); }
.fcx-grip { display: flex; gap: 5px; }
.fcx-grip i { display: block; width: 3px; height: 20px; border-radius: 3px; background: var(--pine); opacity: .55; }
.fcx-range:focus-visible + .fcx-drag .fcx-knob { box-shadow: 0 0 0 4px var(--pine), 0 0 0 7px var(--mint-deep), 0 18px 34px -10px rgba(0,0,0,.6); }

/* scale under the track: label centres line up with the handle's centre */
.fcx-scale { position: relative; height: 1.6rem; margin: .45rem 0 clamp(1.2rem, 2.2vw, 1.7rem); }
.fcx-scale li {
  position: absolute; top: 0; width: 5em; text-align: center;
  left: calc(var(--k) / 2 + (100% - var(--k)) * var(--at) - 2.5em);
  font-weight: 600; font-size: 1rem; color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums;
}
.fcx-scale li:first-child { left: 0; text-align: left; }
.fcx-scale li:last-child { left: auto; right: 0; text-align: right; }

/* results */
.fcx-out { display: grid; gap: 10px; margin: 0; }
@media (min-width: 560px) { .fcx-out { grid-template-columns: 1.25fr 1fr 1fr; } }
.fcx-o {
  border-radius: 18px; padding: clamp(12px, 1.4vw, 18px) clamp(14px, 1.6vw, 20px);
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04);
}
.fcx-o dt { font-weight: 600; font-size: 1rem; color: rgba(255,255,255,.72); margin-bottom: .25rem; }
.fcx-o dd { margin: 0; }
.fcx-o output, .fcx-o dd {
  font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 96; letter-spacing: -.03em;
  font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums;
}
.fcx-o-main { background: var(--mint); border-color: var(--mint); }
.fcx-o-main dt { color: rgba(12,59,39,.78); }
.fcx-o-main dd, .fcx-o-main output { color: var(--pine); }
.fcx-o output { display: inline-block; }
.fcx-note { margin: clamp(.9rem, 1.6vw, 1.2rem) 0 0; font-size: 1rem; color: rgba(255,255,255,.7); }
.fcx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the phone and card */
.fcx-stage { position: relative; display: grid; justify-items: center; }
.fcx-art { display: block; height: min(var(--media-cap), 560px); width: auto; aspect-ratio: 440 / 560; max-width: 100%; overflow: visible; }
.fcx-disc { fill: rgba(255,255,255,.045); }
.fcx-orbit { fill: none; stroke: rgba(159,216,180,.3); stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.fcx-bezel { fill: none; stroke: rgba(255,255,255,.2); }
.fcx-ring { fill: none; stroke: var(--mint-deep); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fcx-rate { font-family: var(--display); font-weight: 800; font-size: 50px; letter-spacing: -.04em; fill: var(--pine); }
.fcx-rate-l { font-family: var(--body); font-weight: 600; font-size: 17px; fill: rgba(14,21,18,.62); }
.fcx-pill { font-family: var(--body); font-weight: 700; font-size: 15px; fill: var(--pine); }
.fcx-ok { fill: var(--tick); }
.fcx-card { filter: drop-shadow(0 18px 18px rgba(0,0,0,.4)); }

@media (max-width: 1023px) {
  .fcx-art { height: min(44vh, 400px); }
}
@media (max-width: 480px) {
  .fcx { --k: 56px; }
  .fcx-top { display: grid; }
}