/* ============================================================
   PRICING PAGE
   The device: a break-even chart. You type what you pay monthly
   today, and it draws the month our one-time build costs less —
   which is the whole argument this business runs on.

   Chart colours are NOT the raw brand tokens. #ffb829 sits at
   OKLCH L 0.83, outside the 0.48–0.67 band a dark chart surface
   needs, so the amber series is stepped down to #c08a1e. That pair
   passes the lightness band, chroma floor, CVD separation, the
   normal-vision floor and 3:1 contrast on #060606. Re-validate
   before changing either value.
   ============================================================ */
:root{
  --c-us:#8052ff;    /* series 1 — building it once, with us */
  --c-them:#c08a1e;  /* series 2 — whatever you pay every month */
}

/* ============================================================
   Packages
   ============================================================ */
.pkgs{border-top:1px solid var(--hair);padding-block:var(--s120)}
.pkgs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s30);align-items:stretch}

.pkg{
  display:flex;flex-direction:column;position:relative;
  padding:var(--s36) var(--s30);border-radius:var(--r-3xl);
  border:1px solid var(--hair);background:rgba(255,255,255,.014);
  transition:border-color .5s ease,background .5s ease,transform .6s var(--ease);
}
.pkg:hover{border-color:var(--hair-2);background:rgba(255,255,255,.03);transform:translateY(-4px)}

/* the featured one gets the site's premium panel language:
   a 1px gradient edge over a radial fill, not a louder colour */
.pkg--hero{
  border:0;padding:0;background:
    linear-gradient(155deg,rgba(128,82,255,.55),rgba(255,184,41,.16) 44%,rgba(255,255,255,.05) 74%);
  border-radius:var(--r-3xl);
}
.pkg--hero:hover{transform:translateY(-6px)}
.pkg__inner{
  height:100%;display:flex;flex-direction:column;
  padding:var(--s36) var(--s30);border-radius:calc(var(--r-3xl) - 1px);
  background:radial-gradient(120% 90% at 0% 0%,#0e0b16 0%,#060606 58%);
  position:relative;overflow:hidden;
}
.pkg__inner::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
}
.pkg__flag{
  position:absolute;top:var(--s24);right:var(--s24);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--spark);padding:6px 13px;border-radius:var(--r-full);
  background:rgba(255,184,41,.1);border:1px solid rgba(255,184,41,.24);
}

.pkg__tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.pkg--hero .pkg__tag{color:var(--spark)}
.pkg__name{font-size:var(--t-2xs);font-weight:var(--fw-r);letter-spacing:-0.035em;margin-block:var(--s18) var(--s12)}
.pkg__who{font-size:14px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.6;min-height:44px}

.pkg__price{
  margin-top:var(--s30);padding-top:var(--s24);border-top:1px solid var(--hair);
  font-size:clamp(34px,4.2vw,48px);font-weight:var(--fw-r);
  letter-spacing:-0.05em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.pkg__price small{display:block;font-size:13px;letter-spacing:0;color:var(--ash);margin-top:12px;font-variant-numeric:normal}

/* the number that reframes a one-time price as a running cost */
.pkg__per{
  margin-top:var(--s18);padding:12px var(--s18);border-radius:12px;
  background:rgba(255,255,255,.03);
  font-size:13px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.55;
}
.pkg__per b{color:#fff;font-weight:var(--fw-r);font-variant-numeric:tabular-nums}

.pkg__list{margin-block:var(--s30);display:flex;flex-direction:column;gap:12px;flex:1}
.pkg__list li{
  position:relative;padding-left:27px;
  font-size:14px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.5;
}
.pkg__list li::before{
  content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;
  background:rgba(128,82,255,.14);border:1px solid rgba(128,82,255,.4);
}
.pkg__list li::after{
  content:"";position:absolute;left:5.2px;top:5.4px;width:3.6px;height:7.4px;
  border:solid #c4aaff;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.pkgs__note{
  grid-column:1/-1;margin-top:var(--s36);padding-top:var(--s30);
  border-top:1px solid var(--hair);
  font-size:15px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.7;max-width:76ch;
}
.pkgs__note b{color:#fff;font-weight:var(--fw-r)}

/* ============================================================
   Break-even — the device
   ============================================================ */
.bev{border-top:1px solid var(--hair);padding-block:var(--s120)}
.bev__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:var(--s60);align-items:start}
.bev__side{position:sticky;top:calc(var(--nav-h) + var(--s30))}

.ctrl + .ctrl{margin-top:var(--s36)}
.ctrl__k{
  display:flex;align-items:center;gap:12px;margin-bottom:var(--s18);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--spark);
}
.ctrl__k b{
  width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:var(--fw-sb);background:rgba(255,184,41,.12);color:var(--spark);
}
.ctrl__v{
  font-size:clamp(30px,4vw,42px);font-weight:var(--fw-r);
  letter-spacing:-0.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;
}
.ctrl__v small{font-size:13px;letter-spacing:0;color:var(--ash);margin-left:9px;font-variant-numeric:normal}
.ctrl__hint{font-size:13px;font-weight:var(--fw-xl);color:#5f5f5f;line-height:1.6;margin-top:var(--s12)}

/* range input — matched to the work page's calculator slider */
input[type=range].slider{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;
  background:transparent;cursor:pointer;margin-top:var(--s18);
}
input[type=range].slider::-webkit-slider-runnable-track{
  height:3px;border-radius:99px;
  background:linear-gradient(90deg,var(--iris) var(--fill,40%),rgba(255,255,255,.12) var(--fill,40%));
}
input[type=range].slider::-moz-range-track{height:3px;border-radius:99px;background:rgba(255,255,255,.12)}
input[type=range].slider::-moz-range-progress{height:3px;border-radius:99px;background:var(--iris)}
input[type=range].slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;margin-top:-7.5px;
  background:#fff;box-shadow:0 0 0 5px rgba(128,82,255,.24);
  transition:box-shadow .3s ease,transform .3s var(--ease);
}
input[type=range].slider:hover::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(128,82,255,.3);transform:scale(1.08)}
input[type=range].slider::-moz-range-thumb{
  width:18px;height:18px;border:0;border-radius:50%;
  background:#fff;box-shadow:0 0 0 5px rgba(128,82,255,.24);
}

/* the headline the chart exists to deliver */
.verdict{
  padding:var(--s30) var(--s24);border-radius:16px;
  background:rgba(128,82,255,.07);border:1px solid rgba(128,82,255,.22);
  margin-bottom:var(--s24);
}
.verdict__k{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--s12)}
.verdict__v{
  font-size:clamp(30px,4.2vw,46px);font-weight:var(--fw-r);
  letter-spacing:-0.045em;line-height:1.05;color:#fff;
}
.verdict__d{font-size:14px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.6;margin-top:var(--s12)}

/* ---------------- Chart ----------------
   Text lives in HTML at real CSS sizes; the SVG carries only grid,
   lines and markers, sized in device pixels by pricing.js. That way
   nothing shrinks into illegibility on a phone. */
.chart{
  display:grid;grid-template-columns:60px minmax(0,1fr);
  grid-template-rows:auto auto;gap:10px 12px;margin-top:var(--s24);
}
.chart__y{grid-column:1;grid-row:1;position:relative}
.chart__plot{grid-column:2;grid-row:1;position:relative;height:268px}
.chart__x{grid-column:2;grid-row:2;position:relative;height:15px}
.chart__plot svg{position:absolute;inset:0;display:block;overflow:visible}
.chart__y span,.chart__x span{
  position:absolute;font-size:10px;letter-spacing:.07em;color:#565656;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.chart__y span{right:0;transform:translateY(-50%)}
.chart__x span{transform:translateX(-50%)}

/* direct labels riding the end of each line */
.chart__end{
  position:absolute;right:0;transform:translateY(-50%);
  text-align:right;pointer-events:none;
  font-size:11px;line-height:1.35;color:var(--mist);
  font-variant-numeric:tabular-nums;transition:top .5s var(--ease);
}
.chart__end b{display:block;font-size:14px;font-weight:var(--fw-r);color:#fff;letter-spacing:-0.02em}

/* the crossover annotation — the one thing the reader must see */
.chart__cross{
  position:absolute;transform:translateX(-50%);
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--spark);white-space:nowrap;pointer-events:none;
  padding:4px 9px;border-radius:var(--r-full);
  background:rgba(255,184,41,.1);border:1px solid rgba(255,184,41,.26);
}

.keys{display:flex;gap:var(--s24);flex-wrap:wrap;margin-top:var(--s24)}
.keys span{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:var(--fw-xl);color:var(--mist)}
.keys i{width:16px;height:2px;border-radius:2px;background:var(--k);flex:none}

/* hover readout */
.tip{
  position:absolute;pointer-events:none;z-index:3;opacity:0;
  padding:11px 14px;border-radius:12px;min-width:172px;
  background:rgba(10,10,10,.96);border:1px solid var(--hair-2);
  box-shadow:0 18px 40px -20px #000;
  transition:opacity .2s ease;
}
.tip.is-on{opacity:1}
.tip__m{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-bottom:9px}
.tip__r{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--mist);font-variant-numeric:tabular-nums}
.tip__r + .tip__r{margin-top:6px}
.tip__r i{width:12px;height:2px;border-radius:2px;background:var(--k);flex:none}
.tip__r b{margin-left:auto;color:#fff;font-weight:var(--fw-r)}

.bev__note{font-size:12px;line-height:1.7;color:#6a6a6a;margin-top:var(--s24);padding-top:var(--s18);border-top:1px solid var(--hair)}
.bev__note b{color:var(--ash);font-weight:var(--fw-sb)}

/* table view — the chart's numbers, available to everyone */
.tbl{margin-top:var(--s24)}
.tbl summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  transition:color .3s ease;
}
.tbl summary::-webkit-details-marker{display:none}
.tbl summary:hover{color:#fff}
.tbl summary::after{content:"+";font-size:16px;color:#3d3d3d;transition:transform .45s var(--ease)}
.tbl[open] summary::after{transform:rotate(45deg)}
.tbl table{width:100%;border-collapse:collapse;margin-top:var(--s18)}
.tbl th,.tbl td{
  padding:11px 12px;text-align:right;font-size:13px;
  border-bottom:1px solid var(--hair);font-variant-numeric:tabular-nums;color:var(--mist);
}
.tbl th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ash);font-weight:var(--fw-sb)}
.tbl th:first-child,.tbl td:first-child{text-align:left}

/* ============================================================
   Comparison matrix
   ============================================================ */
.matrix{border-top:1px solid var(--hair);padding-block:var(--s120)}
.matrix__scroll{overflow-x:auto;scrollbar-width:thin}
.mtx{width:100%;border-collapse:collapse;min-width:680px}
.mtx th,.mtx td{padding:var(--s18);text-align:left;vertical-align:top;border-bottom:1px solid var(--hair)}
.mtx thead th{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ash);font-weight:var(--fw-sb);border-bottom-color:var(--hair-2);
}
.mtx thead th b{display:block;font-size:19px;letter-spacing:-0.03em;color:#fff;font-weight:var(--fw-r);text-transform:none;margin-bottom:5px}
.mtx tbody th{
  font-size:15px;font-weight:var(--fw-xl);color:var(--mist);
  width:34%;line-height:1.5;
}
.mtx td{font-size:14px;font-weight:var(--fw-xl);color:var(--mist);width:22%}
.mtx tr:hover td,.mtx tr:hover th{background:rgba(255,255,255,.018)}

/* the featured column carries a wash the whole way down */
.mtx thead th.is-hero,.mtx td.is-hero{background:rgba(128,82,255,.055)}
.mtx thead th.is-hero{border-bottom-color:rgba(128,82,255,.4)}
.mtx tr:hover td.is-hero{background:rgba(128,82,255,.09)}

.mtx__grp th{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--spark);font-weight:var(--fw-sb);
  padding-top:var(--s36);border-bottom-color:var(--hair-2);
}
.mtx__grp:first-child th{padding-top:var(--s18)}

.yes,.no{display:inline-block;position:relative;width:17px;height:17px;vertical-align:-3px}
.yes::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(21,132,110,.16);border:1px solid rgba(21,132,110,.44);
}
.yes::after{
  content:"";position:absolute;left:5.6px;top:4.4px;width:3.8px;height:7.6px;
  border:solid #7fd3c0;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}
.no::before{content:"";position:absolute;left:2px;top:8px;width:13px;height:1px;background:#4a4a4a}

/* ============================================================
   What moves the price
   ============================================================ */
.drivers{border-top:1px solid var(--hair);padding-block:var(--s120)}
.driver{
  display:grid;grid-template-columns:56px minmax(0,1fr) auto;
  gap:var(--s24);align-items:start;
  padding-block:var(--s30);border-bottom:1px solid var(--hair);
  position:relative;isolation:isolate;
}
.driver:first-of-type{border-top:1px solid var(--hair)}
.driver::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(128,82,255,.09),transparent 55%);
  opacity:0;transition:opacity .45s ease;
}
.driver:hover::after{opacity:1}
.driver__n{font-size:var(--t-caption);letter-spacing:.16em;color:#4a4a4a;padding-top:5px;font-variant-numeric:tabular-nums;transition:color .35s ease}
.driver:hover .driver__n{color:var(--spark)}
.driver__t{font-size:clamp(19px,2.1vw,23px);font-weight:var(--fw-r);letter-spacing:-0.035em;margin-bottom:9px}
.driver__d{font-size:15px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.6;max-width:60ch}
.driver__p{
  justify-self:end;white-space:nowrap;margin-top:3px;
  font-size:13px;color:#fff;font-variant-numeric:tabular-nums;
  padding:8px 15px;border-radius:var(--r-full);
  background:rgba(255,255,255,.05);border:1px solid var(--hair);
}

/* ============================================================
   How paying works
   ============================================================ */
.pay{border-top:1px solid var(--hair);padding-block:var(--s120)}
.pay__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s60) var(--s96)}
.mile{position:relative;padding-top:var(--s30);border-top:1px solid var(--hair-2)}
.mile::after{
  content:"";position:absolute;top:-1px;left:0;height:1px;width:0;
  background:var(--iris);transition:width 1.2s var(--ease) var(--d,0s);
}
.mile.is-in::after{width:100%}
.mile__k{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s18);margin-bottom:var(--s18)}
.mile__n{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--iris)}
.mile__pc{font-size:clamp(27px,3.4vw,38px);font-weight:var(--fw-r);letter-spacing:-0.045em;line-height:1;color:#fff}
.mile__t{font-size:var(--t-2xs);font-weight:var(--fw-r);letter-spacing:-0.035em;margin-bottom:var(--s12)}
.mile__d{font-size:15px;font-weight:var(--fw-xl);color:var(--ash);line-height:1.65}

.pay__fine{
  grid-column:1/-1;margin-top:var(--s24);padding:var(--s30);border-radius:18px;
  background:rgba(255,255,255,.022);border:1px solid var(--hair);
}
.pay__fine h3{font-size:var(--t-2xs);font-weight:var(--fw-r);letter-spacing:-0.035em;margin-bottom:var(--s24)}
.fine{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s18) var(--s60)}
.fine li{
  position:relative;padding-left:27px;
  font-size:14px;font-weight:var(--fw-xl);color:var(--mist);line-height:1.6;
}
.fine li::before{
  content:"";position:absolute;left:0;top:2px;width:16px;height:16px;border-radius:50%;
  background:rgba(21,132,110,.15);border:1px solid rgba(21,132,110,.42);
}
.fine li::after{
  content:"";position:absolute;left:5.2px;top:5.2px;width:3.6px;height:7.4px;
  border:solid #7fd3c0;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
}

/* ---------------- Responsive ---------------- */
@media (max-width:1024px){
  .pkgs__grid{grid-template-columns:1fr;gap:var(--s24)}
  .pkg__who{min-height:0}
  .bev__grid{grid-template-columns:1fr;gap:var(--s60)}
  .bev__side{position:static}
  .pay__grid{grid-template-columns:1fr;gap:var(--s36)}
}

@media (max-width:760px){
  .chart{grid-template-columns:48px minmax(0,1fr);gap:8px}
  .chart__plot{height:224px}
  .driver{grid-template-columns:minmax(0,1fr) auto;gap:var(--s18)}
  .driver__n{grid-column:1/-1;padding-top:0;margin-bottom:-10px;color:var(--spark);letter-spacing:.2em;font-size:11px}
  .driver__p{grid-column:1/-1;justify-self:start;margin-top:var(--s12)}
  .fine{grid-template-columns:1fr}
  .pay__fine{padding:var(--s24)}
}

@media (max-width:480px){
  .chart__end{font-size:10px}
  .chart__end b{font-size:12px}
  .keys{gap:var(--s18)}
}

@media (hover:none){
  .pkg:hover,.pkg--hero:hover{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .mile::after{transform:none;width:100%}
  .chart__end{transition:none}
}