#pricing .pr-head { max-width:820px; }
#pricing .pr-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:28px; margin-top:40px; align-items:stretch; }
#pricing .pr-calc, #pricing .pr-viz { border-radius:24px; border:1px solid var(--line); background:linear-gradient(160deg, rgba(19,41,74,.82), rgba(8,20,38,.72)); padding:30px; min-width:0; }
#pricing .pr-lbl, #pricing .pr-k { display:block; font:700 12px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
#pricing .pr-inrow { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 18px; flex-wrap:wrap; }
#pricing .pr-num { width:190px; max-width:100%; font:700 40px/1 var(--head); color:var(--white); background:rgba(5,12,23,.6); border:1px solid var(--line); border-radius:14px; padding:10px 14px; font-variant-numeric:tabular-nums; -moz-appearance:textfield; }
#pricing .pr-num::-webkit-inner-spin-button { -webkit-appearance:none; }
#pricing .pr-num:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(34,211,238,.2); }
#pricing .pr-bandname { font:600 14px var(--body); padding:8px 14px; border-radius:999px; color:var(--bc,#22d3ee); border:1px solid currentColor; background:rgba(34,211,238,.06); transition:color .4s; }
#pricing .pr-range { -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px; outline:none; background:linear-gradient(90deg, var(--bc,#22d3ee) var(--p,66%), rgba(120,170,220,.18) var(--p,66%)); cursor:pointer; }
#pricing .pr-range::-webkit-slider-thumb { -webkit-appearance:none; width:26px; height:26px; border-radius:50%; background:#fff; border:5px solid var(--bc,#22d3ee); box-shadow:0 0 18px var(--bc,#22d3ee); }
#pricing .pr-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:#fff; border:5px solid var(--bc,#22d3ee); }
#pricing .pr-chips { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 24px; }
#pricing .pr-chips button { font:600 14px var(--body); color:var(--text); background:rgba(5,12,23,.5); border:1px solid var(--line); border-radius:999px; padding:8px 14px; cursor:pointer; transition:all .25s; }
#pricing .pr-chips button:hover { border-color:rgba(34,211,238,.5); color:var(--white); }
#pricing .pr-chips button.on { background:rgba(34,211,238,.14); border-color:var(--cyan); color:var(--cyan); }
#pricing .pr-out { border-top:1px solid var(--line); padding-top:20px; }
#pricing .pr-big { display:block; font:700 clamp(54px,6vw,80px)/1 var(--head); letter-spacing:-.03em; color:var(--gold); text-shadow:0 0 40px rgba(255,197,0,.3); margin:8px 0 18px; font-variant-numeric:tabular-nums; white-space:nowrap; }
#pricing .pr-big small { font-size:.42em; letter-spacing:0; }
#pricing .pr-big::after { content:" / month"; font:500 16px var(--body); color:var(--muted); letter-spacing:0; text-shadow:none; }
#pricing .pr-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#pricing .pr-row b { display:inline-block; margin-top:6px; font:700 26px/1.1 var(--head); color:var(--white); font-variant-numeric:tabular-nums; }
#pricing .pr-k2 { color:var(--muted); font-size:13px; margin-left:4px; }
#pricing .pr-floor, #pricing .pr-min { margin:14px 0 0; font-size:14px; color:var(--cyan); padding:10px 12px; border-radius:10px; background:rgba(34,211,238,.08); border:1px solid rgba(34,211,238,.25); }
#pricing .pr-min { color:var(--muted); background:transparent; border-style:dashed; }
#pricing .pr-viz { display:flex; flex-direction:column; }
#pricing .pr-chart { width:100%; height:auto; overflow:visible; }
#pricing .pr-axis text { font:500 12px var(--body); fill:var(--muted); }
#pricing .pr-axis line { stroke:rgba(120,170,220,.14); }
#pricing .pr-stair { fill:none; stroke:#7dd3fc; stroke-width:3; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(34,211,238,.6)); }
#pricing .pr-stairfill { fill:rgba(34,211,238,.08); }
#pricing .pr-floorline { fill:none; stroke:#ffc500; stroke-width:2.5; stroke-dasharray:5 5; opacity:.9; }
#pricing .pr-floortxt text { font:600 11.5px var(--body); fill:#ffc500; }
#pricing .pr-floortxt .pr-lg { stroke:#ffc500; stroke-width:2.5; stroke-dasharray:5 5; }
#pricing .pr-max { margin:14px 0 0; font-size:14px; color:var(--gold); padding:10px 12px; border-radius:10px; border:1px dashed rgba(255,197,0,.4); }
#pricing .pr-guide { stroke:rgba(255,255,255,.35); stroke-dasharray:3 5; }
#pricing .pr-mk { fill:#fff; stroke:var(--bc,#22d3ee); stroke-width:4; }
#pricing .pr-mk-halo { fill:var(--bc,#22d3ee); opacity:.25; }
#pricing .pr-bands { list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
#pricing .pr-bands li { padding:12px; border-radius:14px; border:1px solid var(--line); background:rgba(5,12,23,.45); transition:all .35s var(--ease); }
#pricing .pr-bands span { display:block; font-size:12.5px; color:var(--muted); }
#pricing .pr-bands b { font:700 22px/1.2 var(--head); color:var(--text); }
#pricing .pr-bands li.on { border-color:var(--bc); background:rgba(34,211,238,.1); transform:translateY(-4px); box-shadow:0 12px 30px -12px var(--bc); }
#pricing .pr-bands li.on b { color:var(--white); } #pricing .pr-bands li.on span { color:var(--bc); }
#pricing .pr-strip { display:grid; grid-template-columns:repeat(40,1fr); gap:3px; margin-top:18px; }
#pricing .pr-strip i { height:14px; border-radius:3px; background:rgba(120,170,220,.12); transition:background .4s; }
#pricing .pr-strip i.lit { background:var(--bc); box-shadow:0 0 6px var(--bc); }
#pricing .pr-striplbl { margin:8px 0 0; font-size:13px; color:var(--muted); }
#pricing .pr-inc { margin:26px 0 4px; font:600 17px var(--head); color:var(--white); }
#pricing .pr-fine { margin:0; font-size:13.5px; color:var(--muted); }
@media (max-width:900px) { #pricing .pr-grid { grid-template-columns:1fr; } }
@media (max-width:600px) {
  #pricing .pr-calc, #pricing .pr-viz { padding:20px; }
  #pricing .pr-num { width:150px; font-size:32px; }
  #pricing .pr-big { font-size:48px; } #pricing .pr-big::after { display:block; margin-top:6px; }
  #pricing .pr-row b { font-size:20px; }
  #pricing .pr-bands { grid-template-columns:1fr 1fr; }
  #pricing .pr-strip { grid-template-columns:repeat(20,1fr); } #pricing .pr-strip i:nth-child(n+21) { display:none; }
}
#pricing.hx-sec { padding-top:90px; padding-bottom:80px; }
#pricing .pr-head { max-width:1100px; }
@media (max-width:600px) { #pricing .pr-axis text { font-size:22px; } #pricing .pr-floortxt text { font-size:20px; } }
/* fit 1440x900 with footer clearance */
#pricing .pr-grid { margin-top:26px; }
#pricing .pr-calc, #pricing .pr-viz { padding:24px 28px; }
#pricing .pr-big { margin:4px 0 12px; }
#pricing .pr-chart { max-height:250px; }
#pricing .pr-bands { margin-top:10px; }
#pricing .pr-strip { margin-top:12px; }
#pricing .pr-inc { margin:16px 0 2px; }
