/* ═══ revocle-v2-plans.css — /pricing only ═══════════════════════════════════
   The plan deck (tickets + upgrade ladder), the matrix and the maths panel.
   Loaded AFTER the four shared layers by pricing.html AND index.html (the
   homepage pricing room); it only adds. Selectors are scoped to .pk so they
   beat legacy.css inside .pgbody and still apply on the homepage.
   Conventions kept: rules are `3px solid var(--rule)` at the use site, spacing
   is margin-bottom/gap (never shorthand margin), press states use `translate`
   so `.mag`'s inline transform cannot override them, and the lime ticket is a
   POSTER — its colours are static and it sets --rule/--fx-shadow locally so
   its border and offset shadow stay ink in dark mode (the nested-var() trap).
   21 Aug 2026. */

.pk{--pk-acc:var(--accent,var(--vio));--pk-tint:var(--blue-soft);--pk-line:light-dark(rgba(20,17,9,.18),rgba(239,233,220,.22))}

/* ── headings ─────────────────────────────────────────────────────────────── */
.pk .pk-h{font-family:var(--head);font-weight:800;letter-spacing:-.035em;line-height:.95;
  font-size:clamp(2rem,4.2vw,3.4rem);margin-bottom:14px;max-width:none}
.pk .pk-h .it{font-size:1.04em}
.pk .pk-lede{font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.5;max-width:62ch;
  margin-bottom:clamp(26px,3.4vw,44px);color:var(--ink-t)}
.pk .pk-h2{font-family:var(--head);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.05;margin-bottom:0}

/* ── 1 · the deck: four tickets on an 8-column grid, ladder nodes between ── */
.pk-deck{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));
  gap:clamp(18px,2vw,28px) clamp(12px,1.4vw,20px);align-items:stretch;
  margin-bottom:clamp(40px,5.5vw,72px);padding-top:14px}
.pk-tk{grid-row:1;position:relative;display:flex;
  border:3px solid var(--rule);background:var(--surface);color:var(--ink-t);
  box-shadow:var(--off) var(--off) 0 var(--fx-shadow,var(--rule));
  translate:0 var(--lift,0px);rotate:var(--tilt,0deg);
  transition:translate .35s var(--ease),box-shadow .35s var(--ease)}
.pk-tk:nth-of-type(1){grid-column:1/3;--lift:0px;--tilt:-1.1deg}
.pk-tk:nth-of-type(2){grid-column:3/5;--lift:-10px;--tilt:.8deg}
.pk-tk:nth-of-type(3){grid-column:5/7;--lift:-20px;--tilt:-.7deg}
.pk-tk:nth-of-type(4){grid-column:7/9;--lift:-30px;--tilt:1deg}
.pk-tk:hover{translate:0 calc(var(--lift,0px) - 6px);
  box-shadow:calc(var(--off) + 3px) calc(var(--off) + 3px) 0 var(--fx-shadow,var(--rule))}
.pk-tk:active{translate:0 calc(var(--lift,0px) + 2px);box-shadow:3px 3px 0 var(--fx-shadow,var(--rule))}
.pk-tk.is-picked{outline:3px solid var(--pk-acc);outline-offset:5px}
.pk-picked{position:absolute;top:-13px;left:14px;display:none;z-index:2;
  font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 10px;background:var(--pk-acc);color:var(--surface);border:2px solid var(--rule);white-space:nowrap}
.pk-tk.is-picked .pk-picked{display:inline-block}

.pk-stub{flex:0 0 42px;border-right:2px dashed var(--rule);display:flex;flex-direction:column;
  justify-content:space-between;align-items:center;padding:12px 0;color:var(--ink-t)}
.pk-stub span{font-family:var(--num);font-weight:700;font-size:15px;letter-spacing:-.02em}
.pk-stub i{writing-mode:vertical-rl;rotate:180deg;font-style:normal;font-family:var(--display);
  font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-t2)}

.pk-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;
  padding:clamp(16px,1.8vw,24px) clamp(14px,1.6vw,22px) clamp(14px,1.6vw,20px)}
.pk .pk-name{font-family:var(--head);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(1.35rem,1.9vw,1.75rem);margin-bottom:6px}
.pk .pk-for{font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.3;color:var(--ink-t2);margin-bottom:16px;max-width:none}
.pk-price{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding-bottom:14px;
  border-bottom:2px solid var(--rule)}
.pk-price b{font-family:var(--num);font-weight:700;font-size:clamp(2.3rem,3.3vw,3.2rem);
  letter-spacing:-.05em;line-height:.85}
.pk-price span{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-t2)}
.pk .pk-stats{display:grid;grid-template-columns:repeat(3,minmax(0,auto));gap:10px 10px;
  margin:0 0 18px;padding:0;max-width:none}
.pk-stats div{min-width:0}
.pk-stats dt{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-t2);margin-bottom:3px;white-space:nowrap}
.pk-stats dd{margin:0;font-family:var(--num);font-weight:700;font-size:clamp(.98rem,1.15vw,1.15rem);
  letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
.pk-stats dd small{font-family:var(--body);font-weight:500;font-size:.72em;letter-spacing:0;color:var(--ink-t2)}
.pk-act{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.pk .btn.pk-go{background:var(--ink-t);color:var(--surface);border-color:var(--ink-t);padding:11px 18px;font-size:14px}
.pk-cmp{appearance:none;background:none;border:0;border-bottom:2px solid currentColor;padding:6px 0;
  min-height:44px;cursor:pointer;font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-t2)}
.pk-cmp:hover{color:var(--ink-t)}
.pk-cmp[aria-pressed="true"]{color:var(--pk-acc)}

/* the lime ticket is a poster: static colours, local rule + shadow tokens */
.pk-tk.is-best{--rule:#141109;--fx-shadow:#141109;--ink-t:#141109;--ink-t2:#4a4335;--surface:#CCFF44;
  background:#CCFF44;color:#141109}
.pk-tk.is-best .btn.pk-go{background:#141109;color:#CCFF44;border-color:#141109}
.pk-tk.is-best .pk-cmp[aria-pressed="true"]{color:#141109}
.pk-tk.is-best .pk-picked{background:#141109;color:#CCFF44;border-color:#141109}

/* tags slapped on the corner */
.pk-tag{position:absolute;top:-14px;right:-10px;rotate:4deg;z-index:2}
.fk-tag.pk-tag{font-size:10.5px;padding:6px 11px}
.pk-tag--ink{display:inline-block;font-family:var(--display);font-weight:800;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;white-space:nowrap;
  border:2px solid #141109;background:#141109;color:#CCFF44;box-shadow:3px 3px 0 #141109}
.pk-tk.is-best .pk-tag--ink{box-shadow:3px 3px 0 #4a4335}

/* ladder nodes: what the next rupee buys */
.pk-dl{grid-row:2;position:relative;padding:4px 12px 4px 18px;border-left:3px solid var(--pk-acc);color:var(--ink-t)}
.pk-dl:nth-of-type(1){grid-column:2/4}
.pk-dl:nth-of-type(2){grid-column:4/6}
.pk-dl:nth-of-type(3){grid-column:6/8}
.pk-dl b{display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pk-acc);margin-bottom:8px}
.pk-dl b svg{width:18px;height:18px;flex:0 0 auto}
.pk .pk-dl ul{list-style:none;padding:0;margin:0;display:grid;gap:5px;max-width:none}
.pk-dl li{font-size:.93rem;line-height:1.35;padding-left:16px;position:relative}
.pk-dl li::before{content:"+";position:absolute;left:0;top:-1px;font-family:var(--num);font-weight:700;color:var(--pk-acc)}

/* ── 2 · the matrix ──────────────────────────────────────────────────────── */
.pk-mx{margin-bottom:clamp(40px,5.5vw,72px)}
.pk-mxhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin-bottom:16px}
.pk-switch{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 14px 6px 8px;
  border:2px solid var(--rule);background:var(--surface);color:var(--ink-t);cursor:pointer;
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pk-switch:hover{box-shadow:3px 3px 0 var(--rule)}
.pk-switch i{position:relative;width:42px;height:24px;border:2px solid var(--rule);flex:0 0 auto}
.pk-switch i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:var(--rule);
  transition:translate .2s var(--ease)}
.pk-switch[aria-checked="true"] i{--rule:#141109;background:var(--lime)}
.pk-switch[aria-checked="true"] i::after{translate:18px 0}
.pk-switch em{font-style:normal;font-weight:600;font-size:12px;letter-spacing:.04em;text-transform:none;color:var(--ink-t2)}
.pk-seg{display:none}
.pk-tw{border:3px solid var(--rule);background:var(--surface)}
html:not(.js) .pk-tw{overflow-x:auto}
.pk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pk .pk-table{border-collapse:separate;border-spacing:0;width:100%;min-width:0;table-layout:fixed}
.pk .pk-table th,.pk .pk-table td{border:0;border-bottom:2px solid var(--pk-line);border-right:2px solid var(--pk-line);
  padding:12px 14px;font-size:.95rem;line-height:1.3;vertical-align:middle;overflow-wrap:anywhere;text-align:left}
.pk .pk-table tr>*:last-child{border-right:0}
.pk .pk-table tbody:last-child tr:last-child>*{border-bottom:0}
.pk .pk-table thead th{position:sticky;top:var(--nav-h);z-index:3;background:var(--ink-t);color:var(--surface);
  font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:12px 14px;border-right-color:light-dark(rgba(255,247,234,.22),rgba(22,17,11,.35))}
.pk .pk-table thead th b,.pk .pk-table thead th span{color:inherit}
.pk .pk-table thead th b{display:block;font-family:var(--head);font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;text-transform:none;line-height:1.1}
.pk .pk-table thead th span{display:block;margin-top:3px;font-size:10px;letter-spacing:.12em}
.pk .pk-table th[scope="row"]{font-family:var(--body);font-weight:700;color:var(--ink-t);background:var(--surface)}
.pk .pk-table .pk-grp th{background:light-dark(rgba(20,17,9,.06),rgba(239,233,220,.08));font-family:var(--display);
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-t2);padding:8px 14px}
.pk .pk-table td{font-family:var(--body);font-weight:500;color:var(--ink-t);background:var(--surface)}
.pk .pk-table td.win{background:var(--lime);color:#141109;font-weight:700}
.pk .pk-table tbody tr:not(.pk-grp):hover>td:not(.win){background:light-dark(rgba(20,17,9,.05),rgba(239,233,220,.07))}
.pk.pk-diff tr[data-same]{display:none}
/* the picked column lights up; lime "win" cells keep their lime */
.pk[data-pick="debut"] .pk-table td[data-plan="debut"]:not(.win),
.pk[data-pick="anthem"] .pk-table td[data-plan="anthem"]:not(.win),
.pk[data-pick="platinum"] .pk-table td[data-plan="platinum"]:not(.win),
.pk[data-pick="legacy"] .pk-table td[data-plan="legacy"]:not(.win){background:var(--pk-tint)}
.pk[data-pick="debut"] .pk-table td[data-plan="debut"],
.pk[data-pick="anthem"] .pk-table td[data-plan="anthem"],
.pk[data-pick="platinum"] .pk-table td[data-plan="platinum"],
.pk[data-pick="legacy"] .pk-table td[data-plan="legacy"]{box-shadow:inset 3px 0 0 var(--pk-acc),inset -3px 0 0 var(--pk-acc)}
.pk[data-pick="debut"] .pk-table thead th[data-plan="debut"],
.pk[data-pick="anthem"] .pk-table thead th[data-plan="anthem"],
.pk[data-pick="platinum"] .pk-table thead th[data-plan="platinum"],
.pk[data-pick="legacy"] .pk-table thead th[data-plan="legacy"]{box-shadow:inset 3px 0 0 var(--pk-acc),inset -3px 0 0 var(--pk-acc),inset 0 -5px 0 var(--lime)}
.pk .pk-fine{font-size:.85rem;line-height:1.45;color:var(--ink-t2);margin-top:12px;max-width:none}

/* ── 3 · the maths ───────────────────────────────────────────────────────── */
.pk-math{padding:clamp(18px,2.6vw,32px)}
.pk-mhead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:10px 40px;align-items:end;margin-bottom:24px}
.pk .pk-mhead p{margin:0;max-width:none;color:var(--ink-t2);font-size:.98rem;line-height:1.5}
.pk-mgrid{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.5fr);gap:26px 44px;align-items:start}
.pk-ctl label{display:block;font-family:var(--display);font-size:11px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-t2);margin-bottom:8px}
.pk-ctl output{display:block;margin-bottom:4px;color:var(--ink-t)}
.pk-ctl output b{font-family:var(--num);font-weight:700;font-size:clamp(2.4rem,4vw,3.6rem);letter-spacing:-.05em;line-height:.9}
.pk-ctl output small{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-t2);margin-left:8px}
input.pk-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;background:var(--rule);border:0;
  margin:16px 0 18px;cursor:pointer}
input.pk-range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--lime);
  border:3px solid #141109;box-shadow:3px 3px 0 var(--rule);cursor:grab}
input.pk-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--lime);border:3px solid #141109;
  box-shadow:3px 3px 0 var(--rule)}
input.pk-range:focus-visible{outline:3px solid var(--pk-acc);outline-offset:8px}
.pk-presets{display:flex;flex-wrap:wrap;gap:8px}
.pk-presets button{appearance:none;border:2px solid var(--rule);background:var(--surface);color:var(--ink-t);
  padding:8px 11px;min-height:40px;font-family:var(--num);font-weight:700;font-size:13px;cursor:pointer}
.pk-presets button:hover{box-shadow:3px 3px 0 var(--rule)}
.pk-presets button[aria-pressed="true"]{background:var(--ink-t);color:var(--surface)}
.pk-bars{display:grid;gap:16px}
.pk-bar{display:grid;grid-template-columns:minmax(92px,.5fr) minmax(0,2fr) auto;gap:6px 14px;align-items:center}
.pk-bar-n{font-family:var(--head);font-weight:800;letter-spacing:-.02em;font-size:1rem;color:var(--ink-t);line-height:1.1}
.pk-bar-n small{display:block;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-t2);margin-top:3px}
.pk-bar-t{position:relative;height:28px;border:2px solid var(--rule);background:var(--surface);overflow:hidden}
.pk-bar-t i{position:absolute;inset:0;width:var(--w,0%);transition:width .45s var(--ease)}
.pk-bar[data-bar="debut"] .pk-bar-t i{background:repeating-linear-gradient(135deg,var(--ink-t) 0 5px,transparent 5px 10px)}
.pk-bar[data-bar="anthem"] .pk-bar-t i{background:var(--lime)}
.pk-bar[data-bar="platinum"] .pk-bar-t i{background:var(--pk-acc)}
.pk-bar[data-bar="legacy"] .pk-bar-t i{background:var(--ink-t)}
.pk-best{position:absolute;right:6px;top:50%;translate:0 -50%;display:none;font-family:var(--display);font-size:10px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;background:#141109;color:#CCFF44;white-space:nowrap}
.pk-bar.is-best .pk-best{display:inline-block}
.pk-bar-v{font-family:var(--num);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--ink-t);
  white-space:nowrap;text-align:right;min-width:8ch}
.pk-bar-v small{display:block;font-family:var(--display);font-weight:700;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-t2);margin-top:2px}
.pk-bar.is-neg .pk-bar-v{color:var(--ink-t2)}
.pk .pk-mnote{margin:24px 0 8px;padding:12px 14px;border-left:4px solid var(--pk-acc);font-weight:600;
  line-height:1.45;max-width:none;color:var(--ink-t)}
.pk .pk-mfine{font-size:.85rem;line-height:1.45;color:var(--ink-t2);max-width:none;margin:0}

/* ── the homepage pricing room (#price, cobalt poster): the same tickets,
   compact enough to keep the room one viewport; no Compare, no ladder ───── */
#price .pk-deck{margin-bottom:clamp(12px,2vh,24px);padding-top:16px;gap:clamp(14px,1.6vw,22px) clamp(10px,1.2vw,16px)}
#price .pk-tk:nth-of-type(2){--lift:-6px}
#price .pk-tk:nth-of-type(3){--lift:-12px}
#price .pk-tk:nth-of-type(4){--lift:-18px}
#price .pk-body{padding:clamp(12px,1.4vw,18px) clamp(12px,1.3vw,18px) clamp(12px,1.3vw,16px)}
#price .pk .pk-name{font-size:clamp(1.15rem,1.5vw,1.4rem)}
#price .pk .pk-for{font-size:clamp(.92rem,1.05vw,1.02rem);margin-bottom:10px}
#price .pk-price{margin-bottom:10px;padding-bottom:10px;gap:4px}
#price .pk-price b{font-size:clamp(1.9rem,2.6vw,2.5rem)}
#price .pk .pk-stats{margin-bottom:12px;gap:8px 12px}
#price .pk .btn.pk-go{padding:9px 15px;font-size:13px}
#price .pk-act{gap:8px}
@media (max-width:960px){
  #price .pk-deck{gap:0}
  #price .pk-tk+.pk-tk{margin-top:calc(var(--off) + 14px)}
}

/* ── tablets: the deck gets tighter, nothing else changes ───────────────── */
@media (max-width:1100px){
  .pk .pk-stats{grid-template-columns:repeat(2,minmax(0,auto))}
  .pk-go-n{display:none}
  .pk .btn.pk-go{white-space:nowrap;padding:10px 16px}
  .pk-tk:nth-of-type(2){--lift:-6px}.pk-tk:nth-of-type(3){--lift:-12px}.pk-tk:nth-of-type(4){--lift:-18px}
}

/* ── below 960px the deck stacks into a ladder (four-up gets cramped) ──── */
@media (max-width:960px){
  .pk-go-n{display:inline}
  .pk .btn.pk-go{padding:11px 18px}
  .pk-deck{grid-template-columns:1fr;gap:0;padding-top:16px}
  .pk-deck .pk-tk:nth-of-type(n),.pk-deck .pk-dl:nth-of-type(n){grid-column:auto;grid-row:auto}
  .pk-tk{--lift:0px;--tilt:0deg;translate:none;rotate:none}
  .pk-tk:hover,.pk-tk:active{translate:none}
  .pk .pk-stats{grid-template-columns:repeat(3,minmax(0,auto))}
  .pk-dl{margin:calc(var(--off) + 14px) 0 14px 20px;padding:10px 0 10px 16px;border-left:3px dashed var(--pk-acc)}
  .pk-dl b svg{rotate:90deg}
  .pk-tag{top:-13px;right:8px}
}

/* ── phones: a one-plan spec sheet, stacked maths ───────────────────────── */
@media (max-width:820px){
  .pk-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:sticky;top:calc(var(--nav-h) + 8px);
    z-index:4;margin-bottom:12px;padding:5px;border:3px solid var(--rule);background:var(--surface)}
  .pk-seg button{appearance:none;border:0;background:transparent;color:var(--ink-t);min-height:40px;padding:6px 2px;
    font-family:var(--display);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
  .pk-seg button[aria-pressed="true"]{background:var(--ink-t);color:var(--surface)}
  html:not(.js) .pk-seg{display:none}
  .pk .pk-table{table-layout:auto}
  .pk .pk-table thead th{position:static}
  .pk[data-pick="debut"] .pk-table [data-plan]:not([data-plan="debut"]),
  .pk[data-pick="anthem"] .pk-table [data-plan]:not([data-plan="anthem"]),
  .pk[data-pick="platinum"] .pk-table [data-plan]:not([data-plan="platinum"]),
  .pk[data-pick="legacy"] .pk-table [data-plan]:not([data-plan="legacy"]){display:none}
  html:not(.js) .pk-table [data-plan]{display:table-cell}
  .pk .pk-table th[scope="row"]{width:50%;position:static;box-shadow:none}
  .pk .pk-table th,.pk .pk-table td{padding:11px 12px;font-size:.92rem}
  .pk-mhead,.pk-mgrid{grid-template-columns:1fr}
  .pk-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "t t"}
  .pk-bar-n{grid-area:n}.pk-bar-v{grid-area:v}.pk-bar-t{grid-area:t}
}
@media (prefers-reduced-motion:reduce){
  .pk-tk,.pk-bar-t i,.pk-switch i::after{transition:none}
}