/* Wonderphase AI — pricing page (Upgrade plan · Top-up credits · Unlimited models).
   v12 "Teal & orange" (the film colour grade): two accent roles instead of one.
   · EMBER (--em-*, the Generate button's red-orange) = buy / chosen. Fills and strokes only: primary buttons, slider fill and
     thumb, the selected stop, the "Most popular" band and the popular card's border, glow and tint.
   · TEAL (--sv-*, "save") = every saving signal: discount badges, "Save $X a year", struck-price lines, the best-rate stops,
     the launch bonus.
   · AMBER (--am-*) is kept for "Best value" only.
   Dark: numbers, prices, rates, icons and secondary buttons are ivory / neutral (no ember lettering at all). Light: the ember
   numerals the owner approved stay; savings switch to teal, so both themes share one logic. The role tokens (--px-*) carry the
   difference between the two sets. The Unlimited-tab rules further down are kept exactly as they were. */
body[data-page="pricing"]{
  --acc:var(--hot);--acc-tx:var(--hot-tx);--acc-soft:var(--hot-soft);
  /* teal "save" family — dark (teal ~12% on the dark surface; dark text on the bright teal badge) */
  --sv:#2dd4bf;--sv-tx:#5eead4;--sv-50:#132b28;--sv-line:rgba(45,212,191,.42);
  --sv-badge:linear-gradient(135deg,#14b8a6,#2dd4bf);--sv-on:#04201c;--sv-glow:rgba(45,212,191,.32);
  /* roles — dark: ivory numerals, dim glyphs, neutral chips and secondary buttons */
  --px-num:var(--tx);--px-num-tx:var(--tx);--px-glyph:var(--dim);--px-ico:var(--tx);
  --px-chip-line:var(--line2);--px-chip-bg:var(--p2);--px-chip-bg-pop:var(--p3);--px-chip-tx:var(--mu);--px-chip-b:var(--tx);
  --px-btn2-line:rgba(255,255,255,.34);--px-btn2-tx:var(--tx);
  --px-link:var(--tx);--px-link-line:var(--line2);--px-link-hover:var(--tx);--px-popt-tx:var(--tx);
  --px-slc-glow:rgba(255,255,255,.035);
  /* ember family — dark */
  --em-grad:linear-gradient(135deg,#ff4b2b,#ff6a3d);
  --em-grad-txt:linear-gradient(135deg,#ff5a36,#ff8a5c);
  --em-badge:linear-gradient(135deg,#ff4b2b,#ff6a3d);
  --em-on:#1a0802;--em:#ff4b2b;--em-tx:#ff7a5c;--em-deep:#ff8a4c;
  --em-50:#351c17;--em-100:#431f19;--em-line:rgba(255,106,61,.45);--em-glow:rgba(255,75,43,.5);
  --em-row:#221715;--em-col:#271816;
  --em-card:linear-gradient(180deg,rgba(255,75,43,.16),rgba(255,75,43,.03) 46%),var(--p1);
  /* amber — the second emphasis level */
  --am:#ffb547;--am-tx:#ffc56b;--am-50:#30271a;--am-line:rgba(255,181,71,.45);
  --strike:#a8a39b;
  /* per-plan stripes (stroke only, never behind text) */
  --st-sand:linear-gradient(90deg,#c9a98f,#c9a98f);--st-amber:linear-gradient(90deg,#e8930c,#ffb547);
  --st-copper:linear-gradient(90deg,#d9622b,#f08a4b);--st-gold:linear-gradient(90deg,#e8930c,#ffc56b);--copper:#f08a4b;--sand:#c9a98f;
  --band-sh:rgba(0,0,0,.5);
}
html[data-theme="light"] body[data-page="pricing"]{
  --em-grad:linear-gradient(135deg,#e63d1e,#ff5a36);
  /* light numerals and badges sit on the Generate button's own start colour (#d92824) and run to orange;
     hero numerals (>= 24 px, weight 800) need 3:1 — #f0502e is 3.6:1 on white, 3.3:1 on the popular tint;
     badge text is white on #d92824 -> #d6401a = 4.9 -> 4.6:1 at every point of the gradient */
  --em-grad-txt:linear-gradient(135deg,#d92824,#f0502e);
  --em-badge:linear-gradient(135deg,#d92824,#d6401a);
  --dim:#6b665e;   /* 5.2:1 on the grey boxes (--p2); ui.css's #77726a is 4.38:1 there */
  --em-on:#ffffff;--em:#e63d1e;--em-tx:#c93216;--em-deep:#b02c12;
  --em-50:#fff4ef;--em-100:#ffeae2;--em-line:#f6b9a6;--em-glow:rgba(230,61,30,.4);
  --em-row:#fff8f5;--em-col:#fff6f2;
  --em-card:linear-gradient(180deg,#fff4ef 0%,#ffffff 46%);
  --am:#e8930c;--am-tx:#8f4300;--am-50:#fff3d6;--am-line:#f5c46b;
  --strike:#6b665e;
  --st-sand:linear-gradient(90deg,#b8916a,#d8b48a);--st-amber:linear-gradient(90deg,#c97a00,#e8930c);--st-gold:linear-gradient(90deg,#c97a00,#f0a830);--copper:#d9622b;--sand:#b8916a;
  --band-sh:rgba(20,20,20,.09);
  /* teal "save" family — light (badge: white on #0f766e -> #0e7a70) */
  --sv:#0d9488;--sv-tx:#0f766e;--sv-50:#e8f7f4;--sv-line:#9fdcd2;
  --sv-badge:linear-gradient(135deg,#0f766e,#0e7a70);--sv-on:#ffffff;--sv-glow:rgba(13,148,136,.35);
  /* roles — light: the approved ember numerals, glyphs, icons, chips and outline buttons stay as in v11 */
  --px-num:var(--em-deep);--px-num-tx:var(--em-tx);--px-glyph:var(--em);--px-ico:var(--em-tx);
  --px-chip-line:var(--em-line);--px-chip-bg:var(--em-50);--px-chip-bg-pop:var(--em-100);--px-chip-tx:var(--em-deep);--px-chip-b:var(--em-deep);
  --px-btn2-line:var(--em-line);--px-btn2-tx:var(--em-deep);
  --px-link:var(--em-tx);--px-link-line:var(--em-line);--px-link-hover:var(--em);--px-popt-tx:var(--em-deep);
  --px-slc-glow:var(--em-50);
}
.px{max-width:1400px;margin:0 auto;padding:6px clamp(16px,3vw,40px) 40px}
.px a:focus-visible,.px button:focus-visible,.px summary:focus-visible,.px [tabindex="0"]:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.px [tabindex="-1"]:focus{outline:0}   /* sections and cards that only receive focus from a jump */
.px-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.px-vh{visibility:hidden}
.px .u-sechead{margin:44px 0 14px}
.px-under{margin-top:12px}
.px-quiet{margin-top:16px;text-align:center;color:var(--dim);font-size:13px;line-height:1.5}
.px-quiet+.px-quiet{margin-top:4px}
.px .u-btn svg{width:14px;height:14px;flex:none}
/* secondary buy buttons (every plan card and pack row except the popular one): an outline on the surface, never a black or
   ivory slab — neutral (ivory text) in dark, ember in light; the filled ember button stays the one primary action per card */
.px-card:not(.pop) .u-btn.inv,.px-row:not(.pop) .u-btn{border:1.5px solid var(--px-btn2-line);background:var(--p1);color:var(--px-btn2-tx);box-shadow:none}
/* gradient numerals, light theme only: the ember gradient clipped to the text (solid deep ember where clipping is not
   supported). Credits and prices share it, so both hero numbers on a card are the same orange. Dark keeps them solid ivory. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  html[data-theme="light"] .px-box-cr b,html[data-theme="light"] .px-amt b,html[data-theme="light"] .px-pr-amt b{background:var(--em-grad-txt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;padding-right:.04em}
}

/* ───────── shared top: sticky tab pills, heading, switches ───────── */
.px-sentinel{display:block;height:1px;margin-bottom:-1px}
/* --px-top is measured in JS from the visible bottom edge of the site's top bar.
   The band is solid and full-bleed (border-image outset paints the page colour edge to edge without causing horizontal scroll).
   Once it sticks, the same solid colour also reaches up under the translucent top bar, so no half-cut text shows through it,
   and a soft shadow plus a hairline separate it from the page scrolling underneath. */
.px-tabbar{position:sticky;top:var(--px-top,58px);z-index:40;display:flex;justify-content:center;padding:14px 0 10px;background:var(--bg);border-image:linear-gradient(var(--bg),var(--bg)) fill 0/0/0 100vmax}
.px-tabbar.stuck{border-image-outset:var(--px-top,0px) 100vmax 0}
.px-tabbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;pointer-events:none;opacity:0;transition:opacity .2s;border-image:linear-gradient(var(--line) 0 1px,var(--band-sh) 1px,transparent) fill 0/0/0 100vmax}
.px-tabbar.stuck::after{opacity:1}
.px-tabs{padding:5px;border-radius:999px;border-color:var(--line2);background:var(--p1);box-shadow:var(--edge)}
.px-tabs a{border-radius:999px;font-weight:600}
.px-tabs a.on::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--em-grad);box-shadow:0 0 8px var(--em-glow)}
.px-ts{display:none}
.px-top{padding:20px 0 2px;text-align:center}
.px-h{margin:0 auto 12px;font-size:clamp(25px,3.3vw,42px);text-wrap:balance}
.px-sub{max-width:46em;margin:0 auto;color:var(--mu);font-size:16px;line-height:1.55;text-wrap:balance}
.px-ctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:22px}
/* switches: a raised surface pill on a grey track (not an ink pill), so the only dark pill on screen is the active tab */
.px-seg{padding:3px;border-radius:999px;border-color:var(--line);background:var(--p2)}
.px-seg button{gap:6px;padding:7px 14px;border-radius:999px;font-size:13px}
.px-seg button.on,.px-seg button.on:hover{background:var(--p1);color:var(--tx);font-weight:700;box-shadow:var(--edge),0 0 0 1px var(--line2),0 2px 6px -3px var(--band-sh)}
html:not([data-theme="light"]) .px-seg button.on,html:not([data-theme="light"]) .px-seg button.on:hover{background:var(--p4)}
.px-seg[hidden]{display:none}
/* discount badge: a solid teal "save" pill (white on deep teal in light, near-black on bright teal in dark) — also inside the
   active Annual pill. On the Unlimited tab the shared Annual pill keeps its v11 ember badge (that tab stays exactly as it was). */
.px-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--sv-badge);color:var(--sv-on);font-family:var(--ui);font-size:12.5px;font-style:normal;font-weight:800;letter-spacing:.01em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 3px 10px -5px var(--sv-glow)}
.px-badge[hidden]{display:none}
.px-tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;border:1px solid var(--line2);background:var(--p1);color:var(--tx);font-family:var(--ui);font-size:11.5px;font-weight:700;letter-spacing:.01em;text-transform:none;white-space:nowrap}
.px-tag.best{border-color:var(--am-line);background:var(--am-50);color:var(--am-tx)}
.px-tag.best::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--am)}
.px-tag.popt{border-color:var(--em-line);background:var(--em-50);color:var(--px-popt-tx)}
.px-tag.popt::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--em)}
.px-body{padding-top:28px}
/* "Most popular" header band across the top of the popular plan card and pack row */
.px-band{position:absolute;left:-1px;right:-1px;top:-1px;z-index:0;display:flex;align-items:center;justify-content:center;gap:7px;height:31px;border-radius:20px 20px 0 0;background:var(--em-badge);color:var(--em-on);font-size:13px;font-weight:800;letter-spacing:.03em;pointer-events:none}
.px-band svg{width:13px;height:13px;flex:none}

/* ───────── the drag slider (top-up amount and plan commitment) ───────── */
.px-sl{--in:22px;position:relative;padding:14px 0 2px;cursor:pointer;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.px-sl-track{position:relative;height:6px;margin:0 var(--in);border-radius:999px;background:var(--p3)}
.px-sl-fill{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:inherit;background:var(--em-grad);box-shadow:0 2px 10px -3px var(--em-glow);transition:width .18s ease}
.px-sl-dot{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--dim);pointer-events:none}
.px-sl-dot.on{background:rgba(255,255,255,.75)}
.px-sl-thumb{position:absolute;top:50%;left:var(--p);width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--em);background:var(--p1);box-shadow:0 0 0 6px color-mix(in srgb,var(--em) 16%,transparent),0 4px 10px -4px var(--em-glow);cursor:grab;touch-action:none;transition:left .18s ease,transform .15s ease,box-shadow .15s ease}
.px-sl-thumb::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--em-grad)}
.px-sl.drag .px-sl-thumb{cursor:grabbing;transform:scale(1.12);box-shadow:0 0 0 7px color-mix(in srgb,var(--em) 22%,transparent),0 4px 12px -4px var(--em-glow)}
.px-sl.drag .px-sl-thumb,.px-sl.drag .px-sl-fill{transition:none}
.px .px-sl-thumb:focus-visible{outline:2px solid var(--em);outline-offset:5px}
.px-sl-labs{position:relative;height:25px;margin:12px var(--in) 0}
.px-sl-labs span{position:absolute;top:0;transform:translateX(-50%);padding:4px 8px;border-radius:999px;color:var(--dim);font-size:12.5px;line-height:1.15;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
.px-sl-labs b{font-weight:500}
.px-sl-labs .hi{color:var(--sv-tx)}   /* the best-rate stops are a saving: teal; the chosen stop below is the ember pill */
.px-sl-labs .hi b{font-weight:700}
.px-sl-labs .cur{background:var(--em-badge);color:var(--em-on);box-shadow:0 4px 12px -6px var(--em-glow)}
.px-sl-labs .cur b{font-weight:700}
.px-sl-labs .ls{display:none}

/* ───────── tab 1 · upgrade plan ───────── */
/* Card row at Higgsfield proportions: every plan of the chosen audience in ONE row of narrow cards (~340 px each), centred.
   --pc-c is the column count (set from the number of cards with :has, then capped by the breakpoints at the end of the file);
   --pc-row is the row's width, which the "Start free" strip shares so their edges line up. */
.px-body{--pc-w:340px;--pc-g:18px;--pc-c:2;--pc-row:calc(var(--pc-c) * var(--pc-w) + (var(--pc-c) - 1) * var(--pc-g))}
.px-body:has(>.px-cards>.px-card:nth-child(3)){--pc-c:3}
.px-body:has(>.px-cards>.px-card:nth-child(4)){--pc-c:4;--pc-w:330px}
.px-body:has(>.px-cards>.px-card:nth-child(5)){--pc-c:5;--pc-w:300px}
.px-free{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;max-width:var(--pc-row);margin:0 auto 16px;padding:10px 10px 10px 18px;border:1px solid var(--line);border-radius:14px;background:var(--p1)}
.px-free::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--st-sand)}
.px-free p{color:var(--mu);font-size:14px}
.px-free b{color:var(--tx);font-weight:700}
.px-free .px-fc{color:var(--px-num);font-weight:700}
.px-cards{display:grid;grid-template-columns:repeat(var(--pc-c),minmax(0,1fr));gap:44px var(--pc-g);max-width:var(--pc-row);margin:0 auto}
.px-cards:has(.px-card.pop){padding-top:30px}   /* room for the popular card's band, so every card's content lines up */
.px-card{--stripe:var(--st-copper);--dotc:var(--copper);position:relative;display:flex;flex-direction:column;gap:15px;min-width:0;padding:22px 20px 20px;border:1px solid var(--line);border-radius:20px;background:var(--p1);box-shadow:var(--edge),var(--lift);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.px-card::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--stripe)}
.px-card.px-t-amber{--stripe:var(--st-amber);--dotc:var(--am)}
.px-card.px-t-copper{--stripe:var(--st-copper);--dotc:var(--copper)}
.px-card.px-t-gold{--stripe:var(--st-gold);--dotc:var(--am)}
.px-card.px-t-ember{--stripe:var(--em-grad);--dotc:var(--em)}
.px-card.pop{margin-top:-30px;padding-top:52px;border-color:var(--em-line);background:var(--em-card);box-shadow:var(--edge),0 0 0 1px color-mix(in srgb,var(--em) 35%,transparent),0 28px 60px -30px var(--em-glow)}
.px-card.pop::before{content:none}
/* side by side, the cards share their row tracks (subgrid): a tagline that wraps on one card pushes the same part of every
   card down with it, so credits boxes, prices, buttons and studio lists stay level across the row. A card has 8 parts:
   header, tagline, credits box, price, button, saving line, studios, feature list (the band and the stripe are absolute). */
@supports (grid-template-rows:subgrid){
  @media (min-width:681px){
    .px-cards{row-gap:15px}
    .px-card{display:grid;grid-template-rows:subgrid;grid-row:span 8;align-content:start}
  }
}
.px-card.flash,.px-slc.flash{animation:px-flash 1.1s ease-out}
@keyframes px-flash{0%,55%{box-shadow:var(--edge),0 0 0 3px var(--em),0 0 34px -8px var(--em-glow)}100%{box-shadow:var(--edge),var(--lift)}}
.px-card-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:24px}
.px-card-h h3{display:flex;align-items:center;gap:9px;margin:0 4px 0 0;font-family:var(--disp);font-size:20px;font-weight:800;letter-spacing:-.015em;line-height:1;text-transform:uppercase}
.px-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--dotc);box-shadow:0 0 0 3px color-mix(in srgb,var(--dotc) 18%,transparent)}
.px-tagline{margin-top:-8px;color:var(--mu);font-size:14px;line-height:1.45}
.px-box{display:flex;flex-direction:column;gap:6px;padding:15px 14px 10px;border:1px solid var(--line);border-radius:16px;background:var(--p2)}
html[data-theme="light"] .px-card.pop .px-box{border-color:var(--em-line);background:var(--p1)}
.px-box-cr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.px-box-cr b{color:var(--px-num);font-size:32px}
.px-box-cr span{color:var(--mu);font-size:14px;font-weight:600}
/* the "=" / "~" lines may wrap under their glyph on a narrow card (never cut off with an ellipsis) */
.px-eq{display:grid;gap:3px;margin:4px 0 0;padding:0;list-style:none;color:var(--mu);font-size:13.5px;line-height:1.4}
.px-eq li{display:flex;align-items:baseline;gap:7px;min-width:0}
.px-eq li>span{min-width:0}
.px-eq i{flex:none;width:12px;color:var(--px-glyph);font-style:normal;font-weight:800;text-align:center}
.px-eq b{color:var(--px-num);font-weight:700}
.px-box-sl{margin-top:9px;padding-top:11px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.4}
.px-box .px-sl{--in:14px;padding-top:12px}
.px-box .px-sl-thumb{width:24px;height:24px;margin:-12px 0 0 -12px}
.px-box .px-sl-labs span{padding:4px 7px}
.px-pr{display:flex;flex-direction:column;gap:5px}
.px-pr-amt{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;line-height:1}
.px-pr-amt s{color:var(--strike);font-size:19px;font-weight:500;text-decoration-line:line-through;text-decoration-color:var(--sv);text-decoration-thickness:2px}
.px-pr-amt s[hidden]{display:none}
.px-pr-amt b{color:var(--px-num);font-size:clamp(30px,3vw,38px);font-weight:800}
.px-card .px-pr-amt s{font-size:18px}
.px-card .px-pr-amt b{font-size:36px}
.px-pr-bill{color:var(--mu);font-size:13.5px}
.px-pr-seat{color:var(--tx);font-size:13.5px;font-weight:600}
/* the saving line stays on one line while it fits; on the narrowest cards it wraps inside a rounded box instead of overflowing */
.px-save{display:flex;align-items:center;justify-content:center;min-height:26px;margin-top:-5px;color:var(--mu);font-size:12.5px;line-height:1.35;text-align:center;text-wrap:balance}
/* inline (not flex), so when a long rupee saving wraps, the tag icon stays beside the first line and both lines centre */
.px-save-p{display:inline-block;max-width:100%;padding:4px 11px;border:1px solid var(--sv-line);border-radius:13px;background:var(--sv-50);color:var(--sv-tx);font-weight:600}
.px-save-p svg{display:inline-block;width:13px;height:13px;margin:0 6px 0 0;vertical-align:-2px;color:var(--sv)}
.px-save b{font-weight:800}
.px-save-b{display:inline-flex;align-items:center;gap:6px;min-height:26px;padding:0 4px;border:0;background:none;color:var(--sv-tx);font:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--sv-line);text-underline-offset:3px;cursor:pointer;transition:text-decoration-color .15s}
.px-save-b svg{width:13px;height:13px;flex:none;color:var(--sv);transition:transform .15s}
.px-inc{padding:12px 12px 6px;border:1px solid var(--line);border-radius:16px;background:var(--p2)}
.px-inc-h{margin-bottom:4px;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.px-inc ul{margin:0;padding:0;list-style:none}
.px-inc li{display:flex;align-items:center;gap:9px;padding:9px 0;border-top:1px solid var(--line);color:var(--tx);font-size:13px;font-weight:600;line-height:1.35}
.px-inc li:first-child{border-top:0}
.px-inc li>span{min-width:0;text-wrap:balance}
.px-inc svg{width:16px;height:16px;flex:none;color:var(--px-ico)}
.px-inc em{flex:none;margin-left:auto;padding:3px 7px;border:1px solid var(--line2);border-radius:999px;background:var(--p1);color:var(--tx);font-family:var(--mono);font-size:9px;font-style:normal;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.px-inc li.no{color:var(--dim);font-weight:500}
.px-inc li.no svg{color:var(--dim)}
.px-inc li.no em{padding-right:0;border-color:transparent;background:none;color:var(--dim);letter-spacing:.06em}
.px-fl{display:grid;gap:9px;margin:0;padding:0 2px;list-style:none;color:var(--tx);font-size:13.5px}
.px-fl li{display:flex;align-items:flex-start;gap:10px;line-height:1.4}
.px-fl li>span{min-width:0;text-wrap:pretty}
.px-fl small{color:var(--dim);font-size:12.5px}
.px-fl li.no{color:var(--dim)}
.px-ok,.px-x{width:16px;height:16px;flex:none;margin-top:2px}
.px-ok{color:var(--px-ico)}.px-x{color:var(--dim)}
.px-fl .u-link{color:var(--px-link);font-weight:700;text-decoration:underline;text-decoration-color:var(--px-link-line);text-underline-offset:3px}
.px-fl .u-link:hover{text-decoration-color:var(--px-link-hover)}

/* compare plans: one row per runnable model, one column per plan */
.px-cp{scroll-margin-top:120px}
.px-cp-scroll{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--p1);box-shadow:var(--edge);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.px-cpt{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:14px}
.px-cpt th,.px-cpt td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle;transition:background .12s}
.px-cpt tbody tr:last-child>*{border-bottom:0}
.px-cpt thead th{padding:16px 12px 14px;border-bottom-color:var(--line2);vertical-align:bottom}
.px-cpt thead th b{display:block;white-space:nowrap;color:var(--tx);font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:0;text-transform:uppercase}
.px-cpt thead th .u-num{display:block;margin-top:8px;color:var(--px-num);font-size:17px}
.px-cpt thead th .u-num.fr{color:var(--tx)}
.px-cpt thead th .u-num small{color:var(--dim);font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:0}
.px-cpt thead th.pop .u-num small{color:var(--mu)}
/* each plan's identity colour on its column head: a 3 px top stripe and a dot before the name (the body numbers stay ink) */
.px-cpt thead th[class*="px-t-"]{background-repeat:no-repeat;background-size:calc(100% - 16px) 3px;background-position:8px 0}
.px-cpt thead th.px-t-sand{background-image:var(--st-sand)}
.px-cpt thead th.px-t-amber{background-image:var(--st-amber)}
.px-cpt thead th.px-t-copper{background-image:var(--st-copper)}
.px-cpt thead th.px-t-gold{background-image:var(--st-gold)}
.px-cpt thead th b i{display:inline-block;width:7px;height:7px;margin:0 7px 0 0;border-radius:50%;background:var(--dotc,var(--dim));vertical-align:1px}
.px-cpt thead th.px-t-sand{--dotc:var(--sand)}
.px-cpt thead th.px-t-amber,.px-cpt thead th.px-t-gold{--dotc:var(--am)}
.px-cpt thead th.px-t-copper{--dotc:var(--copper)}
.px-cpt thead th.pop{--dotc:var(--em)}
/* Best value sits above its plan name, so every plan name and price stays on one line across the head */
.px-cpt thead th{position:relative}
.px-cpt:has(.px-tag) thead th{padding-top:42px}
.px-cpt thead th .px-tag{position:absolute;top:12px;left:50%;transform:translateX(-50%);height:20px;padding:0 8px;font-size:11px}
.px-cpt thead th>small{display:block;margin-top:5px;color:var(--mu);font-size:11.5px;font-weight:500}
.px-cpt .px-cp-m{width:32%;color:var(--dim);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-align:left;text-transform:uppercase}
.px-cpt th[scope="row"]{font-weight:400;text-align:left}
.px-cpt th[scope="row"] b{display:block;color:var(--tx);font-size:14px;font-weight:600;line-height:1.3}
.px-cpt th[scope="row"] span{display:block;margin-top:2px;color:var(--dim);font-size:12px;line-height:1.35}
.px-cpt td .u-num{color:var(--tx);font-size:14.5px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.px-cpt .pop{background:var(--em-col)}
.px-cpt td.pop .u-num{color:var(--px-num-tx)}
.px-cpt thead th.pop{background:var(--em-grad) top/100% 3px no-repeat,var(--em-col)}
.px-cpt thead th.pop b{color:var(--px-num)}
.px-cpt th:first-child{position:sticky;left:0;z-index:1;background:var(--p1);box-shadow:1px 0 0 var(--line)}
/* quiet zebra inside each group (opaque, so the sticky first column never shows text sliding under it) */
.px-cpt tbody tr.z>*{background:color-mix(in srgb,var(--p2) 55%,var(--p1))}
.px-cpt tbody tr.z>.pop{background:color-mix(in srgb,var(--em-100) 45%,var(--em-col))}
.px-cp-g th,.px-cp-g td{padding-top:20px;padding-bottom:8px}
.px-cp-g th{color:var(--tx);font-family:var(--disp);font-size:12.5px;font-weight:800;letter-spacing:.02em;text-align:left;text-transform:uppercase}
.px-cp-g th::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 0 0;border-radius:50%;background:var(--px-glyph);vertical-align:2px}
.px-cp-g th span{display:block;margin-top:3px;color:var(--dim);font-family:var(--ui);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}

/* ───────── tab 2 · top-up credits ───────── */
.px-tu{max-width:940px;margin:0 auto}
.px-slc{position:relative;padding:22px 26px 24px;border:1px solid var(--line2);border-radius:22px;background:radial-gradient(120% 60% at 100% 0%,var(--px-slc-glow),transparent 60%),var(--p1);box-shadow:var(--edge),var(--lift)}
.px-slc-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px;margin-bottom:6px}
.px-slc-top h2{font-family:var(--disp);font-size:15px;font-weight:800;letter-spacing:0;text-transform:uppercase}
.px-slc-top p{color:var(--mu);font-size:13px}
.px-slc-top p b{color:var(--sv-tx);font-weight:700}   /* the legend for the teal best-rate stops */
.px-slc-body{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px 28px;margin-top:18px;padding-top:20px;border-top:1px solid var(--line)}
.px-slc-l{display:flex;flex-direction:column;gap:12px;min-width:0}
.px-slc-r{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right}
.px-amt{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.px-amt b{color:var(--px-num);font-size:24px}
.px-amt span{color:var(--mu);font-size:14px;font-weight:600}
.px-amt.big b{font-size:clamp(36px,4.4vw,50px)}
.px-amt.big span{font-size:16px}
.px-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.px-rate{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border:1px solid var(--px-chip-line);border-radius:999px;background:var(--px-chip-bg);color:var(--px-chip-tx);font-size:12.5px;font-weight:600;white-space:nowrap}
.px-rate b{color:var(--px-chip-b);font-weight:800}
.px-ticks{display:grid;gap:6px;margin:0;padding:0;list-style:none;color:var(--mu);font-size:14px}
.px-ticks li{display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.px-ticks b{color:var(--px-num);font-weight:700}
.px-slc-r .px-pr-amt{justify-content:flex-end}
.px-slc-r .px-pr-amt b{font-size:clamp(32px,3.6vw,42px)}
.px-slc-r .u-btn{min-width:250px;margin-top:6px}
.px-rows-h{margin:34px 0 12px;color:var(--tx);font-family:var(--disp);font-size:14px;font-weight:800;letter-spacing:.01em;text-transform:uppercase}
.px-rows{display:grid;gap:10px}
.px-row{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr) auto auto;align-items:center;gap:14px 22px;padding:16px 18px 16px 20px;border:1px solid var(--line);border-radius:18px;background:var(--p1);box-shadow:var(--edge);transition:border-color .15s,background .15s,box-shadow .15s}
.px-row.best{box-shadow:var(--edge),inset 3px 0 0 var(--am)}
.px-row.pop{padding-top:47px;border-color:var(--em-line);background:var(--em-card);box-shadow:var(--edge),0 0 0 1px color-mix(in srgb,var(--em) 35%,transparent),0 24px 50px -30px var(--em-glow)}
.px-row.pop .px-band{border-radius:18px 18px 0 0}
.px-row.pop .px-rate{background:var(--px-chip-bg-pop)}
.px-row-pick{position:absolute;inset:0;z-index:1;width:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.px-row .u-btn{position:relative;z-index:2}
.px-row-n{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:7px;color:var(--mu);font-size:13.5px;font-weight:600}
.px-row-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.px-row .px-ticks{gap:2px;font-size:13px}
.px-row .px-ok{width:14px;height:14px}
.px-row-c{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right}
.px-row-c .px-pr-amt{justify-content:flex-end}
.px-row-c .px-pr-amt b{font-size:24px}
.px-row-c .px-pr-amt s{font-size:15px}
.px-row-c .px-pr-bill{color:var(--dim);font-size:12px}
.px-offer{display:flex;justify-content:center;margin-top:10px;text-align:center}
/* the launch bonus is a saving: a teal pill (amber is kept for "Best value" only) */
.px-offer>span{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:6px 14px;border:1px solid var(--sv-line);border-radius:999px;background:var(--sv-50);color:var(--sv-tx);font-size:13px;font-weight:600;line-height:1.4}
.px-offer svg{width:15px;height:15px;flex:none;color:var(--sv)}
html[data-theme="light"] .px-offer svg{color:var(--sv-tx)}
.px-offer b{font-weight:800}
.px-tu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:24px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--p1)}
.px-tu-foot p{color:var(--mu);font-size:13.5px;line-height:1.55}
.px-tu-foot i{margin:0 4px 0 8px;color:var(--px-glyph);font-style:normal;font-weight:800}
.px-unote{margin-top:18px}

/* ───────── tab 3 · unlimited models (unchanged) ───────── */
.px-a-mint{--pa:var(--mint);--pa-tx:var(--mint-tx);--pa-soft:var(--mint-soft)}
.px-a-cyan{--pa:var(--cyan);--pa-tx:var(--cyan-tx);--pa-soft:var(--cyan-soft)}
.px-a-hot{--pa:var(--hot);--pa-tx:var(--hot-tx);--pa-soft:var(--hot-soft)}
.px-a-violet{--pa:var(--violet);--pa-tx:var(--violet-tx);--pa-soft:var(--violet-soft)}
.px-a-gold{--pa:var(--gold);--pa-tx:var(--gold-tx);--pa-soft:var(--gold-soft)}
.px-ucard{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:22px 18px 18px;border:1px solid var(--line);border-radius:18px;background:var(--p1);box-shadow:var(--edge),var(--lift)}
.px-ucard::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:3px;border-radius:0 0 4px 4px;background:var(--pa)}
.px-ucard.pop{border-color:var(--em-line);background:var(--em-card);box-shadow:var(--edge),0 0 0 1px color-mix(in srgb,var(--em) 35%,transparent),0 26px 60px -28px var(--em-glow)}
/* plan identity on the unlimited cards, the same tones as the plan cards (palette 3 turns --violet and --gold into ink) */
.px-ucard.px-a-hot::before{background:var(--em-grad)}.px-ucard.px-a-violet::before{background:var(--st-copper)}.px-ucard.px-a-gold::before{background:var(--st-gold)}
.px-ucard.px-a-hot header h3 i{background:var(--em);box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 18%,transparent)}
.px-ucard.px-a-violet header h3 i{background:var(--copper);box-shadow:0 0 0 3px color-mix(in srgb,var(--copper) 18%,transparent)}
.px-ucard.px-a-gold header h3 i{background:var(--am);box-shadow:0 0 0 3px color-mix(in srgb,var(--am) 18%,transparent)}
.px-ucard .px-tick{color:var(--em-tx)}
.px-ucard header h3{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.px-ucard header h3 i{width:8px;height:8px;border-radius:50%;background:var(--pa);box-shadow:0 0 10px var(--pa);flex:none}
.px-feat{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--mu)}
.px-feat li{display:flex;gap:9px;align-items:flex-start;line-height:1.35}
.px-feat li b{color:var(--tx);font-weight:600}
.px-feat li small{font-size:12.5px;color:var(--dim);font-weight:400}
.px-feat li .u-link{font-weight:600;color:var(--pa-tx,var(--acc-tx));text-decoration:underline;text-underline-offset:3px}
.px-feat li.off{color:var(--dim)}.px-feat li.off i{width:15px;text-align:center;font-style:normal;flex:none}
.px-tick{width:15px;height:15px;flex:none;margin-top:2px;color:var(--pa-tx,var(--mint-tx))}
.px-scroll{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--p1);box-shadow:var(--edge);scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.px-scroll table{min-width:760px}
.px-cmp thead th{vertical-align:bottom;padding:16px 12px 12px}
.px-cmp thead th b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:0;color:var(--tx);font-weight:700}
.px-cmp thead th span{display:block;margin-top:4px;letter-spacing:.04em;text-transform:none;font-size:11.5px;color:var(--gold-tx)}
.px-unlt thead th span{margin-top:6px;font-family:var(--ui);font-size:14px;font-weight:800;letter-spacing:0;color:var(--em-deep)}
.px-unlt thead th span.fr{color:var(--tx)}
.px-unlt thead th.pop{background:var(--em-grad) top/100% 3px no-repeat,var(--em-col)}
.px-unlt thead th.pop b{color:var(--em-deep)}
.px-unlt .px-cap,.px-ucard .px-cap{color:var(--em-deep);font-weight:800}
.px-scroll .px-cmp{table-layout:fixed}
.px-cmp thead th:first-child{width:30%}
.px-cmp tbody th{font-family:var(--ui);letter-spacing:0;text-transform:none}
.px-cmp tbody th{text-align:left;font-weight:500;color:var(--tx);font-size:13.5px;padding:12px 14px;border-bottom:1px solid var(--line);min-width:220px}
.px-cmp tr:last-child th{border-bottom:0}
.px-cmp td{vertical-align:middle;padding:12px}
.px-cmp .pop,.px-unlt .pop{background:var(--em-col)}
.px-cmp thead th:first-child{padding-left:14px}
.px-yes{position:relative;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--em-50)}
.px-yes .px-tick{margin:0;color:var(--em-tx)}
.px-no{color:var(--dim);font-size:15px;padding-left:6px}
.px-uintro{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:12px 0 16px;border-color:var(--em-line);background:linear-gradient(120deg,var(--em-50),transparent 60%),var(--p1);box-shadow:var(--edge)}
.px-uintro p{max-width:76ch;margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--mu)}
.px-uintro p b{color:var(--tx);font-weight:700}
.px-model{display:flex;gap:13px;align-items:center}
.px-mt{width:72px;height:54px;border-radius:11px;overflow:hidden;background:var(--p3);flex:none;display:grid;place-items:center;font-weight:800;color:var(--mu);border:1px solid var(--line)}
.px-mt img{width:100%;height:100%;object-fit:cover}
.px-model b{display:block;font-size:14.5px;color:var(--tx);font-weight:700}
.px-model span{display:block;font-size:12.5px;color:var(--mu);font-weight:400;line-height:1.4;margin-top:2px}
.px-unlt thead th:first-child{width:38%}
.px-unlt .px-meta th{color:var(--mu);font-size:13px}
.px-unlt .px-meta td small{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}
.px-under2{margin-top:6px}
.px-ucards,.px-umodels{display:none}
.px-ucard header{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.px-ucard header span{color:var(--em-deep);font-size:14px;font-weight:800}
.px-ucard dl{display:grid;gap:0;margin:0;border-top:1px solid var(--line)}
.px-ucard dl div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.px-ucard dl div:last-child{border-bottom:0;padding-bottom:0}
.px-ucard dt{color:var(--mu)}.px-ucard dd{margin:0;color:var(--tx);font-weight:600;text-align:right}
.px-unone{color:var(--mu);font-size:13.5px;padding:12px 14px;border:1px dashed var(--line2);border-radius:14px}
.px-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.px-why .u-card{display:flex;flex-direction:column;gap:6px;box-shadow:var(--edge)}
.px-why b{font-size:15.5px;color:var(--tx);font-weight:700}
.px-why p{color:var(--mu);font-size:13.5px;line-height:1.5}
/* what a credit buys (shown under the Unlimited tab) */
.px-buys td{vertical-align:middle}
.px-buys .px-kind{font-family:var(--disp);font-size:13px;font-weight:700;letter-spacing:0;text-transform:uppercase;color:var(--tx);vertical-align:top;padding:14px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);width:110px}
.px-buys tbody tr:last-child .px-kind,.px-buys .px-kind[rowspan]:last-of-type{border-bottom:1px solid var(--line)}
.px-buys tbody tr:last-child td{border-bottom:0}
.px-buys .px-cr{white-space:nowrap}
.px-buys .px-cr b{font-size:18px;color:var(--em-deep);font-weight:800;margin-right:3px}
.px-buys .px-eq{white-space:nowrap}
.px-buys .u-tag{margin-left:6px;vertical-align:2px}
.px-buys .u-tag.mint{border-color:var(--em-line);background:var(--em-50);color:var(--em-deep)}   /* palette 3 leaves --mint green; this page has no green */
.px-buys thead th span{text-transform:none;letter-spacing:0;font-family:var(--ui);font-size:11.5px}
.px-buys .px-cr{color:var(--mu)}
.px-on{display:none}

/* ───────── FAQ, rail ───────── */
.px-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.px-faq details{border:1px solid var(--line);border-radius:14px;background:var(--p1);padding:0}
.px-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 16px;font-weight:600;font-size:14.5px;color:var(--tx);border-radius:14px}
.px-faq summary::-webkit-details-marker{display:none}
.px-faq summary::after{content:"+";font-size:18px;line-height:1;color:var(--acc-tx);flex:none}
/* dark, Upgrade plan and Top-up tabs: no ember lettering, so the FAQ marks are neutral (the Unlimited tab keeps them as they were) */
html:not([data-theme="light"]) .px:not([data-tab="unlimited"]) .px-faq summary::after{color:var(--mu)}
.px-faq details[open] summary::after{content:"−"}
.px-faq details[open]{border-color:var(--line2)}
.px-faq p{color:var(--mu);font-size:14px;line-height:1.55;padding:0 16px 16px;max-width:68ch}
.px-rail{margin-top:16px}
.px-rail .xlinks{grid-template-columns:repeat(3,minmax(0,1fr))}

/* the "try it first" rail: the core draws each thumbnail on #000; here it is a warm tile with a play mark until the picture arrives */
.px-rail .xm{border:1px solid var(--em-line);background:var(--em-50)}
.px-rail .xm::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:var(--em-tx);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l10.5-6.5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.px-rail .xm img{z-index:1}.px-rail .xm video{z-index:2}
/* dark, Upgrade plan and Top-up tabs: the waiting tile is neutral (no ember play marks); the Unlimited tab keeps it as it was */
html:not([data-theme="light"]) .px:not([data-tab="unlimited"]) .px-rail .xm{border-color:var(--line);background:var(--p2)}
html:not([data-theme="light"]) .px:not([data-tab="unlimited"]) .px-rail .xm::before{background:var(--mu)}

/* ───────── waitlist dialog (drawn in the core's sheet, outside .px) ───────── */
.sheet:has(.px-dlg){width:min(540px,calc(100vw - 24px))}
.px-dlg{display:flex;flex-direction:column;gap:14px}
.px-dlg-lede{color:var(--mu);font-size:14.5px;line-height:1.55}
.px-dlg-mail{margin:0;border:1px solid var(--line);border-radius:14px;background:var(--p2);overflow:hidden}
.px-dlg-mail div{display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:14px}
.px-dlg-mail div:last-child{border-bottom:0}
.px-dlg-mail dt{color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding-top:3px}
.px-dlg-mail dd{margin:0;color:var(--tx);font-weight:600;overflow-wrap:anywhere;user-select:all}
.px-dlg-act{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.px-dlg-act .u-btn{min-height:46px}
.px-dlg-st{min-height:20px;color:var(--tx);font-size:13.5px;font-weight:600}
.px-dlg-st:empty{display:none}
.px-dlg-note{color:var(--dim);font-size:13px;line-height:1.55}
.px-dlg .u-link{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.px-dlg a:focus-visible,.px-dlg button:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
@media (max-width:480px){.px-dlg-act{grid-template-columns:1fr}}

/* ───────── hover (mouse and trackpad only, so a tap on a phone never leaves a card stuck in its hover state) ───────── */
@media (hover:hover){
  .px .u-btn.inv:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--em) 22%,transparent)}
  .px-card:not(.pop) .u-btn.inv:hover,.px-row:not(.pop) .u-btn:hover{border-color:var(--em);background:var(--em-50);box-shadow:none}
  .px-tabs a:not(.on):hover,.px-seg button:not(.on):hover{background:var(--em-50);color:var(--tx)}
  .px-sl-thumb:hover{transform:scale(1.06);box-shadow:0 0 0 6px color-mix(in srgb,var(--em) 22%,transparent),0 4px 12px -4px var(--em-glow)}
  .px-save-b:hover{text-decoration-color:var(--sv)}
  .px-save-b:hover svg{transform:translateX(2px)}
  .px-cpt tbody tr:not(.px-cp-g):hover>*{background:var(--p2)}
  .px-cpt tbody tr:not(.px-cp-g):hover>.pop{background:var(--em-100)}
  .px-rail .xl:hover{border-color:var(--em-line)}
  .px-card:not(.pop):hover{transform:translateY(-2px);border-color:var(--em-line);box-shadow:var(--edge),0 22px 50px -30px var(--em-glow)}
  .px-card.pop:hover{box-shadow:var(--edge),0 0 0 1px color-mix(in srgb,var(--em) 45%,transparent),0 30px 66px -26px var(--em-glow),0 0 40px -18px var(--em-glow)}
  .px-row:hover{border-color:var(--em-line);background:var(--em-row)}
  .px-row.pop:hover{box-shadow:var(--edge),0 0 0 1px color-mix(in srgb,var(--em) 45%,transparent),0 26px 56px -26px var(--em-glow)}
}

/* ───────── responsive ───────── */
@media (max-width:1180px){.px-rail .xlinks{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* card row: 3 to 5 cards fold to 2 × 2 once one row would squeeze them under ~280 px; one column on phones */
@media (max-width:1240px){
  .px-body:has(>.px-cards>.px-card:nth-child(3)){--pc-c:2;--pc-w:360px}
  .px-cards:has(>.px-card:nth-child(3))>.px-card:nth-child(n+3){margin-top:26px}   /* air between the two rows */
}
@media (max-width:680px){
  .px-body:has(>.px-cards>.px-card:nth-child(n)){--pc-c:1;--pc-w:480px}
  .px-cards{row-gap:14px}
  .px-card.pop{order:-1}   /* the coloured, recommended card first on a phone (visual order only) */
  .px-cards:has(.px-card.pop){padding-top:0}
  .px-card{padding:20px 16px 18px}
  .px-card.pop{margin-top:0;padding-top:50px}
  .px-box{padding:14px 14px 8px}
}
@media (max-width:900px){
  .px-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"a c" "b b" "d d";gap:12px 16px;padding:16px}
  .px-row.pop{padding-top:45px}
  .px-row-a{grid-area:a;min-width:0}.px-row-b{grid-area:b}.px-row-c{grid-area:c;align-self:start}
  .px-row-c .px-pr-amt{flex-direction:column;align-items:flex-end;gap:3px}   /* was-price above the price, so the amount keeps its room */
  .px-row .u-btn{grid-area:d;width:100%}
}
@media (max-width:520px){.px-tl{display:none}.px-ts{display:inline}}   /* short tab labels on phones, stuck or not */
@media (max-width:760px){
  .px{padding:2px 16px 30px}
  .px-tabbar{padding:8px 0}
  .px-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;width:100%;padding:4px;overflow:visible;border-radius:16px}
  .px-tabs a{justify-content:center;min-height:44px;padding:7px 4px;border-radius:12px;font-size:13px;line-height:1.15;text-align:center;white-space:normal}
  .px-tabs a.on::before{width:6px;height:6px}
  .px-tabbar.stuck .px-tl{display:none}.px-tabbar.stuck .px-ts{display:inline}
  .px-top{padding-top:16px}
  .px-h{font-size:clamp(23px,7.2vw,30px)}
  .px-sub{font-size:14.5px}
  .px-ctl{gap:8px;margin-top:16px}
  .px-seg button{padding:7px 11px;font-size:12.5px}
  .px-body{padding-top:20px}
  .px-free{padding:10px 10px 10px 14px}
  .px-free::before{left:14px;right:14px}
  .px .u-sechead{margin-top:36px}
  .px-cpt{min-width:640px}
  .px-cpt .px-cp-m{width:150px}
  .px-cpt th,.px-cpt td{padding:10px 8px}
  .px-cpt th:first-child{padding-left:12px}
  .px-cpt thead th b{font-size:12px}.px-cpt thead th b i{display:none}   /* narrow columns: the top stripe carries the plan colour */
  .px-slc{padding:18px 16px;border-radius:20px}
  .px-slc-top{margin-bottom:2px}
  .px-sl{--in:14px}
  .px-sl.many .lf{display:none}.px-sl.many .ls{display:inline}
  .px-sl-labs span{padding:4px 5px;font-size:11.5px}
  .px-slc-body{grid-template-columns:1fr;align-items:start;gap:16px;margin-top:14px;padding-top:16px}
  .px-slc-r{align-items:stretch;text-align:left}
  .px-slc-r .px-tag{align-self:flex-start}
  .px-slc-r .px-pr-amt{justify-content:flex-start}
  .px-slc-r .u-btn{width:100%;min-width:0}
  .px-offer>span{border-radius:14px;text-align:left}
  .px-tu-foot{flex-direction:column;align-items:stretch}
  .px-tu-foot .u-btn{width:100%}
  .px-rail .xlinks{grid-template-columns:1fr}
  /* unlimited and "what a credit buys" — unchanged */
  .px-why,.px-faq{grid-template-columns:1fr}
  .px-umatrix{display:none}
  .px-umodels{display:grid;gap:10px;margin-bottom:16px}
  .px-umodels .px-model{padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--p1)}
  .px-ucards{display:grid;gap:14px;margin-top:4px}
  .px-uintro .u-btn{width:100%}
  .px-scroll:has(.px-buys){overflow:visible;border:0;background:none;box-shadow:none}
  .px-scroll .px-buys{min-width:0;display:block}
  .px-buys thead{display:none}
  .px-buys tbody{display:grid;gap:8px}
  .px-buys tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:var(--p1)}
  .px-buys td,.px-buys .px-kind{display:block;padding:0;border:0!important;width:auto}
  .px-buys .px-kind{display:none}
  .px-buys td[data-k]{grid-column:1/-1}
  .px-buys td[data-k]::before{content:attr(data-k);display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
  .px-buys .px-eq{grid-column:2;grid-row:2/4;align-self:center;max-width:15ch;text-align:right;color:var(--dim);font-size:12.5px;white-space:normal}   /* wraps, so nothing runs off a 390 px screen */
  .px-buys .px-cr{grid-column:1}
  .px-buys .px-on{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .px *,.px *::before,.px *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .px-card:hover,.px-sl-thumb:hover,.px-sl.drag .px-sl-thumb,.px-save-b:hover svg,.px-rail .xl:hover{transform:none!important}
}
/* Windows high contrast: drop the gradient-clipped numerals back to plain system text */
@media (forced-colors:active){
  .px-box-cr b,.px-amt b,.px-pr-amt b{background:none!important;-webkit-text-fill-color:currentColor!important;color:CanvasText!important}
}