/* Pricing page. Page prefix: pr-.
   Shared parts (page-hero, tag, btn, split, ticks, soon, glyph, mock, ui-win,
   ui-head, faq, cta-band) come from /assets/site/site.css. The two switches
   are native radio groups styled as one segmented control (pr-seg); pricing.js
   mirrors the checked value onto data-bill (hero) and data-plan (table).
   Without JS the switches hide, the yearly prices show and the table scrolls
   sideways under 900px. Motion is transform and opacity only. */

/* ---------- Hero: centred copy, the plans are the visual ---------- */
.pr-hero{padding-top:calc(var(--hd) + clamp(32px,4.5vw,64px))}
.pr-hero::before{background:
  radial-gradient(52% 34% at 50% 2%,rgba(123,92,255,.24),transparent 70%),
  radial-gradient(64% 34% at 50% 64%,rgba(123,92,255,.11),transparent 72%),
  radial-gradient(30% 26% at 4% 0%,rgba(183,168,255,.06),transparent 70%)}
.pr-hero::after{-webkit-mask-image:radial-gradient(44% 30% at 50% 14%,#000,transparent 76%);mask-image:radial-gradient(44% 30% at 50% 14%,#000,transparent 76%)}
.pr-hero-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.pr-hero .tag{margin-bottom:26px}
.pr-hero h1{max-width:none}
.pr-h1-a{display:block}
.pr-hero .lede{max-width:33em;margin-inline:auto}

/* ---------- Segmented control: the billing switch and the plan switch ---------- */
.pr-seg{min-width:0;margin:0;padding:0;border:0}
html:not(.js) .pr-seg{display:none}
.pr-seg-track{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:rgba(18,15,46,.86);box-shadow:inset 0 0 0 1px var(--line-2),0 24px 48px -28px rgba(0,0,0,.9)}
.pr-seg-opt{position:relative;display:block;min-width:0;cursor:pointer}
.pr-seg-in{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.pr-seg-t{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;font:500 15px/1 var(--sans);color:var(--muted);white-space:nowrap;transition:color .25s}
.pr-seg-t::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,#7B5CFF,#6A48F5);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 24px -12px rgba(123,92,255,.9);opacity:0;transform:scale(.94);transition:opacity .3s var(--ease),transform .4s var(--ease)}
.pr-seg-opt:hover .pr-seg-t{color:var(--paper)}
.pr-seg-in:checked + .pr-seg-t{color:#fff}
.pr-seg-in:checked + .pr-seg-t::before{opacity:1;transform:none}
.pr-seg-in:focus-visible + .pr-seg-t{outline:2px solid var(--lav);outline-offset:3px}
.pr-save{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:rgba(183,168,255,.14);font:500 13px/1 var(--sans);color:var(--lav);transition:background-color .25s,color .25s}
.pr-seg-in:checked + .pr-seg-t .pr-save{background:rgba(255,255,255,.2);color:#fff}
.pr-bill{margin-top:40px}

/* ---------- Plan cards ----------
   Six rows per card (name, for-line, price, sub-line, button slot, list) that
   line up across a row of cards through subgrid. Spacing sits on the rows, so
   every card adds the same amount to the shared tracks. */
.pr-plans{position:relative;z-index:1;list-style:none;margin:clamp(40px,4.5vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pr-plan{position:relative;display:flex;flex-direction:column;min-width:0;padding:28px 24px 30px;border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2) 62%);border:1px solid var(--line-2);box-shadow:0 50px 90px -60px rgba(0,0,0,.9)}
.pr-plan.is-pro{border-color:rgba(123,92,255,.9);background:radial-gradient(120% 46% at 50% 0%,rgba(123,92,255,.22),transparent 72%),linear-gradient(180deg,var(--night-3),var(--night-2) 62%);box-shadow:0 0 0 4px rgba(123,92,255,.1),0 40px 90px -44px rgba(123,92,255,.6)}
@supports (grid-template-rows:subgrid){
  .pr-plans{row-gap:0;margin-bottom:-20px}
  .pr-plan{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;margin-bottom:20px}
}
.pr-name{margin:0;font:600 22px/1.2 var(--display);letter-spacing:-.02em;color:var(--paper)}
.pr-for{margin-top:8px;font-size:16px;line-height:1.5;color:var(--muted)}
.pr-price{margin-top:26px}
.pr-pv{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 5px}
/* Narrow cards (4 columns, and 2 columns under 660px): the period goes under the price
   in every card, so Pro and Business match. A container query here would break the subgrid. */
@media (min-width:1100px),(min-width:600px) and (max-width:659px){.pr-pv{flex-direction:column;align-items:flex-start;gap:6px}}
.pr-amt{font:600 46px/1 var(--display);letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.pr-c{font-size:.5em;letter-spacing:-.02em;vertical-align:.62em;margin-left:.04em}
.pr-per{font-size:16px;line-height:1.2;color:var(--muted)}
.pr-sub{margin-top:10px;font-size:14px;line-height:1.5;color:var(--muted)}
.pr-act{display:flex;flex-direction:column;justify-content:center;margin-top:26px}
.pr-act .btn{width:100%}
.pr-btn-soft{background-color:rgba(123,92,255,.16);box-shadow:inset 0 0 0 1px rgba(183,168,255,.42)}
.pr-btn-soft::before{background:rgba(123,92,255,.16)}
.pr-inc{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.pr-lead{margin-bottom:14px;font-size:16px;font-weight:500;line-height:1.45;color:var(--paper)}
.pr-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pr-list li{position:relative;padding-left:32px;font-size:16px;line-height:1.5;color:var(--muted)}
.pr-list li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:rgba(183,168,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23B7A8FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.4'/%3E%3C/svg%3E") center / 12px no-repeat;box-shadow:inset 0 0 0 1px rgba(183,168,255,.26)}
.is-pro .pr-list li::before{background-color:rgba(123,92,255,.3);box-shadow:inset 0 0 0 1px rgba(183,168,255,.4)}
/* the badge is a limit, not a feature: a plain ring instead of a check */
.pr-list li.is-note::before{background:radial-gradient(circle,rgba(183,168,255,.7) 0 2px,transparent 2.5px);box-shadow:inset 0 0 0 1px rgba(183,168,255,.3)}
.pr-fine{position:relative;z-index:1;max-width:40rem;margin:32px auto 0;font-size:14px;line-height:1.5;color:var(--muted);text-align:center}

/* Yearly and monthly stack in one cell, so the card never changes height */
.pr-swap{display:grid}
.pr-swap > *{grid-area:1 / 1;transition:opacity .35s var(--ease) .08s,transform .45s var(--ease) .08s,visibility 0s linear 0s}
.pr-swap > [data-bill="monthly"]{visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.pr-hero[data-bill="monthly"] .pr-swap > [data-bill="yearly"]{visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s linear .3s}
.pr-hero[data-bill="monthly"] .pr-swap > [data-bill="monthly"]{visibility:visible;opacity:1;transform:none;transition:opacity .35s var(--ease) .08s,transform .45s var(--ease) .08s,visibility 0s linear 0s}

/* ---------- AI credits: the Billing panel of the app ---------- */
.pr-cr{container-name:pr-cr}
.pr-cr .ui-win{overflow:hidden}
.pr-cr .ui-head{padding:16px 22px}
.pr-cr-body{padding:20px 22px 10px}
.pr-cr-meter{padding:20px 20px 22px;border-radius:16px;background:linear-gradient(180deg,rgba(123,92,255,.16),rgba(123,92,255,.04));box-shadow:inset 0 0 0 1px rgba(183,168,255,.24)}
.pr-cr-left{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:15px;line-height:1.3;color:var(--muted)}
.pr-cr-left b{font:600 52px/1 var(--display);letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums}
.pr-cr-bar{position:relative;display:block;height:10px;margin-top:18px;overflow:hidden;border-radius:99px;background:rgba(183,168,255,.14)}
.pr-cr-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--lav));transform-origin:0 50%;transform:scaleX(.81)}
.pr-cr-rows{list-style:none;margin:8px 0 0;padding:0}
.pr-cr-row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 2px}
.pr-cr-row + .pr-cr-row{border-top:1px solid var(--line)}
.pr-cr-what{font-size:14px;line-height:1.4;color:var(--muted)}
.pr-cr-what b{font-weight:500;color:var(--paper)}
.pr-cr-n{display:inline-grid;place-items:center;min-width:44px;height:28px;padding:0 10px;border-radius:999px;background:rgba(183,168,255,.1);box-shadow:inset 0 0 0 1px var(--line-2);font:600 14px/1 var(--display);color:var(--paper);font-variant-numeric:tabular-nums}
@container pr-cr (max-width:459px){
  .pr-cr .ui-head{padding:14px 16px}
  .pr-cr-body{padding:14px 14px 4px}
  .pr-cr-meter{padding:16px 16px 18px}
  .pr-cr-left b{font-size:42px}
  .pr-cr-row{gap:12px;padding:13px 0}
}

/* ---------- Compare plans: the table ---------- */
.pr-cmp{--fk:34%;position:relative}
.pr-pick{display:none}
.pr-tablewrap{border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2) 24%);border:1px solid var(--line-2);box-shadow:0 60px 100px -60px rgba(0,0,0,.9);overflow:hidden;overflow:clip}
/* the Pro column wash runs through the group rows too, so it is painted on
   the table: plan columns share what the feature column leaves */
.pr-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:16px;line-height:1.45;background:linear-gradient(90deg,transparent calc(var(--fk) + (100% - var(--fk)) / 4),rgba(123,92,255,.07) calc(var(--fk) + (100% - var(--fk)) / 4) calc(var(--fk) + (100% - var(--fk)) / 2),transparent calc(var(--fk) + (100% - var(--fk)) / 2))}
.pr-table thead th{position:sticky;top:var(--hd);z-index:2;padding:20px 12px 18px;background:var(--night-3);box-shadow:inset 0 -1px 0 var(--line-2);font:600 17px/1.2 var(--display);letter-spacing:-.02em;color:var(--paper);text-align:center;vertical-align:bottom}
.pr-table thead th:first-child{width:var(--fk);padding-left:24px;text-align:left}
.pr-table thead th.is-pro{background:linear-gradient(rgba(123,92,255,.2),rgba(123,92,255,.2)),var(--night-3);box-shadow:inset 0 -1px 0 var(--line-2),inset 0 2px 0 var(--violet)}
.pr-grp th{padding:30px 24px 10px;font:500 13px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lav);text-align:left}
.pr-table thead + tbody .pr-grp th{padding-top:22px}
.pr-table tbody th[scope="row"]{padding:14px 16px 14px 24px;border-top:1px solid var(--line);font-weight:400;color:var(--paper);text-align:left;vertical-align:middle}
.pr-table td{padding:14px 12px;border-top:1px solid var(--line);color:var(--muted);text-align:center;vertical-align:middle}
.pr-table tbody:last-child tr:last-child > *{padding-bottom:18px}
.pr-v{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;vertical-align:middle}
.pr-yes{flex:none;width:20px;height:20px;fill:none;stroke:var(--lav);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pr-no{flex:none;display:block;width:14px;height:2px;border-radius:2px;background:rgba(185,179,218,.32)}
.pr-tnote{margin-top:18px;font-size:15px;line-height:1.5;color:var(--muted)}

/* ---------- On the roadmap: four short lists, no prices and no dates ---------- */
.pr-road{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pr-road-g{min-width:0;padding:26px 24px 28px;border-radius:var(--radius);background:linear-gradient(180deg,var(--night-3),var(--night-2) 62%);border:1px solid var(--line-2)}
.pr-road-g h3{margin:0 0 18px;font:600 19px/1.25 var(--display);letter-spacing:-.02em;color:var(--paper)}
.pr-road-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pr-road-list li{position:relative;padding-left:22px;font-size:16px;line-height:1.5;color:var(--muted)}
.pr-road-list li::before{content:"";position:absolute;left:3px;top:.62em;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(183,168,255,.55)}

/* ---------- Widths ---------- */
@media (max-width:1099px){
  .pr-plans,.pr-road{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr-plan{padding:28px 28px 30px}
}
@media (max-width:899px){
  /* one plan at a time: the plan switch sticks under the header while the
     table scrolls past */
  .js .pr-pick{display:block;position:sticky;top:calc(var(--hd) + 10px);z-index:3;margin-bottom:16px}
  .js .pr-pick .pr-seg-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;background:var(--night-2)}
  .js .pr-pick .pr-seg-t{padding:0 6px;font-size:15px}
  .js .pr-cmp{--fk:58%}
  .js .pr-table{background:none}
  .js .pr-table thead th{position:static}
  .js .pr-table thead th:not(:first-child){width:calc(100% - var(--fk))}
  .js .pr-cmp[data-plan="free"] .pr-table tr > :nth-child(n+2):not(:nth-child(2)),
  .js .pr-cmp[data-plan="pro"] .pr-table tr > :nth-child(n+2):not(:nth-child(3)),
  .js .pr-cmp[data-plan="business"] .pr-table tr > :nth-child(n+2):not(:nth-child(4)),
  .js .pr-cmp[data-plan="enterprise"] .pr-table tr > :nth-child(n+2):not(:nth-child(5)){display:none}
  .js .pr-table td{padding:14px 16px 14px 8px}
  html:not(.js) .pr-tablewrap{overflow-x:auto}
  html:not(.js) .pr-table{min-width:760px}
  html:not(.js) .pr-table thead th{position:static}
}
@media (max-width:599px){
  .pr-hero{padding-top:calc(var(--hd) + 32px)}
  .pr-bill{margin-top:32px}
  .pr-seg-t{padding:0 16px}
  .pr-plans,.pr-road{grid-template-columns:minmax(0,1fr)}
  .pr-plan{padding:26px 22px 28px}
  .pr-road-g{padding:24px 22px 26px}
  .js .pr-pick .pr-seg-t{font-size:14px;padding:0 4px}
  .pr-grp th{padding:26px 16px 8px}
  .pr-table thead th:first-child,.pr-table tbody th[scope="row"]{padding-left:16px}
}

/* ---------- Motion ---------- */
.js .pr-cr-bar i{transform:scaleX(0);transition:transform 1.2s var(--ease) .35s}
.js .is-in .pr-cr-bar i{transform:scaleX(.81)}
.js .pr-cr-row{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(450ms + var(--k) * 140ms)}
.js .is-in .pr-cr-row{opacity:1;transform:none}
@keyframes pr-fade{from{opacity:0}}
@media (prefers-reduced-motion:no-preference){
  .pr-table.is-swap td{animation:pr-fade .35s var(--ease)}
}
@media (prefers-reduced-motion:reduce){
  .js .pr-cr-bar i{transform:scaleX(.81)}
  .js .pr-cr-row{opacity:1;transform:none}
}