/* Pricing page (templates/tpl-pricing.php). Ported from design/03-pricing.html by
   tools/port-css.py, then edited by hand. The prototype's review tools (value
   highlights, the promo preview switcher) are not shipped. The promo bar and
   the promo themes are sitewide, in site.css. */
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.p-hero{padding:clamp(56px,8vw,96px) 0 34px;text-align:center}
.p-hero .wrap{display:grid;justify-items:center;gap:22px}
.p-hero h1{font-size:clamp(2.6rem,6.4vw,5rem);font-weight:800;letter-spacing:-.045em;line-height:.98;max-width:16ch;text-wrap:balance}
.p-hero .lede{text-align:center;max-width:52ch}
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px;align-items:stretch}
.plan{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px 24px 28px;display:flex;flex-direction:column;gap:18px;position:relative;animation:rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.plan h3{font-size:24px;display:flex;align-items:center;gap:9px}
.plan h3 i{width:11px;height:11px;border-radius:3px;background:var(--c)}
.plan .pdesc{color:var(--ink-2);font-size:15px;min-height:46px}
.price{display:flex;align-items:flex-end;gap:6px;min-height:70px}
.amt{font-family:var(--fd);font-weight:800;font-size:58px;letter-spacing:-.05em;line-height:.9;display:inline-block;font-variant-numeric:tabular-nums}
.amt.swap{animation:swapIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes swapIn{0%{opacity:0;transform:translateY(-16px);filter:blur(4px)}100%{opacity:1;transform:none;filter:none}}
.per{font-size:14px;color:var(--muted);line-height:1.3;padding-bottom:4px}
.plan .btn{width:100%}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.plan li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.plan li svg{color:var(--c);margin-top:3px;width:16px;height:16px;stroke-width:2.6}
.plan li:first-child.inherit{color:var(--ink);font-weight:600}
.plan.featured{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 40px 80px -36px rgba(12,22,56,.7)}
.plan.featured .pdesc,.plan.featured li,.plan.featured .per{color:#C3CCF2}
.plan.featured li:first-child.inherit{color:#fff}
.plan.featured .btn-ghost{background:#fff;color:var(--navy);border-color:#fff}
.plan .flag{position:absolute;top:-12px;left:24px;background:var(--c-mkt);color:var(--navy);font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:999px}
.trial-strip{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;color:var(--ink-2);font-size:15px}
.trial-strip span{display:flex;align-items:center;gap:8px}
.trial-strip svg{color:var(--c-mon);stroke-width:2.6;width:16px;height:16px}
.credits{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.cost-list{display:grid;gap:10px;margin-top:6px}
.cost{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:15px}
.cost b{font-family:var(--fd);font-size:17px;white-space:nowrap}
.est{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow);display:grid;gap:22px}
.est h4{font-size:20px;letter-spacing:-.02em}
.slider{display:grid;gap:8px}
.slider label{display:flex;justify-content:space-between;gap:10px;font-size:15px;font-weight:500}
.slider label output{font-weight:700;font-variant-numeric:tabular-nums}
.slider label small{color:var(--muted);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--royal) var(--f,30%),var(--surface-2) var(--f,30%));outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--royal);box-shadow:0 4px 10px -2px rgba(12,22,56,.3);cursor:grab}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--royal);cursor:grab}
.meter{display:grid;gap:10px;padding:18px;border-radius:16px;background:var(--surface-2)}
.meter-top{display:flex;justify-content:space-between;align-items:end;gap:10px}
.meter-top b{font-family:var(--fd);font-size:40px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.meter-top span{font-size:14px;color:var(--muted);text-align:right}
.mtrack{position:relative;height:14px;border-radius:8px;background:var(--surface);overflow:visible}
.mfill{height:100%;border-radius:8px;background:var(--royal);width:0;transition:width .6s cubic-bezier(.2,.8,.2,1),background .3s}
.mtick{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink-2);opacity:.35;left:var(--x)}
.mtick span{position:absolute;top:22px;transform:translateX(-50%);font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.rec{display:flex;gap:12px;align-items:center;font-size:15px;margin-top:22px}
.rec .tag{padding:6px 12px;border-radius:9px;color:#fff;background:var(--c,var(--royal));font-weight:700;white-space:nowrap;transition:background .3s}
.overage{background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(26px,4vw,48px);display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(26px,4vw,60px);align-items:center}
.ov-bar{position:relative;height:18px;border-radius:10px;background:var(--surface-2);margin:34px 0 60px}
.ov-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:10px;background:var(--c-mon)}
.in .ov-fill{animation:ovGrow 4.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes ovGrow{0%{width:0;background:var(--c-mon)}60%{background:var(--c-mkt)}80%{width:83%;background:var(--c-cus)}100%{width:100%;background:var(--c-cus)}}
.ov-mark{position:absolute;top:-8px;bottom:-8px;left:var(--x);width:2px;background:var(--line)}
.ov-mark span{position:absolute;top:34px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:700;color:var(--muted);transition:color .3s;white-space:nowrap}
.ov-mark.hit span{color:var(--ink)}
.ov-mark.hit{background:var(--ink)}
.ov-events{display:grid;gap:10px}
.ov-ev{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:14px;background:var(--surface-2);font-size:14.5px;opacity:.35;transition:opacity .4s,transform .4s;transform:translateX(-6px)}
.ov-ev.on{opacity:1;transform:none}
.ov-ev i{font-style:normal;font-family:var(--fd);font-weight:800;font-size:16px;min-width:46px;color:var(--c)}
.ov-ev b{display:block}
.ov-ev small{color:var(--muted);font-size:13.5px}
.import{background:var(--navy);color:#fff;border-radius:32px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.import h2{color:#fff}
.import .lede{color:#C3CCF2}
.imp-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px;display:grid;gap:14px}
.imp-src{display:flex;gap:8px}
.imp-src button{border:1px solid rgba(255,255,255,.2);background:transparent;color:#DCE3FF;border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px}
.imp-src button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.imp-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-size:14.5px;align-items:center}
.imp-row b{font-variant-numeric:tabular-nums}
.imp-row .t{grid-column:1/-1;height:6px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.imp-row .t i{display:block;height:100%;width:0;background:#8FA2FF;border-radius:4px;transition:width 1s cubic-bezier(.3,.7,.2,1)}
.imp-row.ok .t i{background:var(--c-mon)}
.imp-done{font-size:14px;font-weight:600;color:#9EE6B8;opacity:0;transition:opacity .4s}
.imp-done.show{opacity:1}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
table.cmp{border-collapse:collapse;width:100%;min-width:760px;font-size:15px}
.cmp th,.cmp td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{position:sticky;top:0;background:var(--surface);font-family:var(--fd);font-size:18px;letter-spacing:-.02em}
.cmp thead th.feat{color:var(--royal)}
.cmp tbody th{font-weight:500;color:var(--ink-2)}
.cmp td{font-weight:600}
.cmp tr.grp th{background:var(--surface-2);font-family:var(--fd);font-weight:700;color:var(--ink);font-size:16px}
.cmp td.yes svg{color:var(--c-mon);stroke-width:2.6;width:18px;height:18px}
.cmp td.no{color:var(--muted);font-weight:400}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
/* light overrides */
.plan.featured{background:var(--surface);border:2px solid var(--royal);color:var(--ink);box-shadow:0 40px 80px -40px rgba(36,71,245,.45)}
.plan.featured .pdesc,.plan.featured li{color:var(--ink-2)}
.plan.featured .per{color:var(--muted)}
.plan.featured li:first-child.inherit{color:var(--ink)}
.plan.featured .btn-ghost{background:var(--royal);color:#fff;border-color:var(--royal)}
.import{background:var(--bg-alt);color:var(--ink);border:1px solid var(--line)}
.import h2{color:var(--ink)}
.import .lede{color:var(--ink-2)}
.imp-card{background:var(--surface);border-color:var(--line)}
.imp-src button{border-color:var(--line);color:var(--ink-2)}
.imp-src button[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.imp-row .t{background:var(--surface-2)}
.imp-row .t i{background:var(--royal)}
.imp-done{color:var(--c-mon)}
@media (max-width:1100px){
  .plans{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .credits,.overage,.import{grid-template-columns:1fr}
}
@media (max-width:600px){
  .plans{grid-template-columns:1fr}
  .plan .pdesc{min-height:0}
}
/* ===== pricing v2: billing toggle, region, promos ===== */
.p-hero{padding-bottom:26px}
.bill{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--bg-alt);border:1px solid var(--line);border-radius:14px;padding:4px}
.bill button{position:relative;z-index:1;border:0;background:none;padding:10px 20px;font-weight:600;font-size:15px;color:var(--muted);border-radius:10px;transition:color .25s;display:flex;align-items:center;gap:8px;justify-content:center}
.bill button[aria-pressed="true"]{color:var(--ink)}
.bill .thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:var(--surface);box-shadow:0 2px 8px -2px rgba(12,22,56,.2);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.bill.annual .thumb{transform:translateX(100%)}
.save{font-size:11.5px;font-weight:800;color:var(--c-mon);background:color-mix(in srgb,var(--c-mon) 13%,transparent);padding:3px 7px;border-radius:999px}
.region{font-size:14px;color:var(--muted);display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.plans{grid-template-columns:repeat(4,minmax(0,1fr))}
.amt{font-size:clamp(34px,3.4vw,46px)}
.per{white-space:nowrap}
.price{flex-wrap:wrap;row-gap:2px}
@media (max-width:1100px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .plans{grid-template-columns:1fr}
}
.was{font-size:17px;color:var(--muted);text-decoration:line-through;font-weight:600;align-self:flex-start;margin-top:6px}
.bnote{font-size:13px;color:var(--muted);margin-top:-8px;min-height:18px}
.bnote b{color:var(--ink)}
.pbadge{position:absolute;top:-12px;right:20px;font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:999px;background:var(--pa,var(--ink));color:var(--pt,#fff);display:none}
body[data-promo] .plan.promo-on .pbadge{display:block}
body[data-promo] .plan.promo-on .flag{left:20px}
/* promo themes */
.promo-card{display:none;align-items:center;gap:22px;flex-wrap:wrap;justify-content:space-between;margin:6px auto 0;max-width:880px;width:100%;border-radius:22px;padding:18px 22px;background:var(--pa);color:var(--pt);text-align:left;position:relative;overflow:hidden}
body[data-promo] .promo-card{display:flex;animation:rise .6s cubic-bezier(.2,.8,.2,1)}
.promo-card::after{content:"";position:absolute;right:-40px;top:-60px;width:220px;height:220px;border-radius:50%;border:30px solid color-mix(in srgb,var(--pt) 10%,transparent);pointer-events:none}
.pc-l small{display:block;font-size:12.5px;font-weight:800;letter-spacing:.02em;opacity:.8}
.pc-l b{display:block;font-family:var(--fd);font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.03em;line-height:1.05;margin-top:4px}
.pc-l span{display:block;font-size:14px;opacity:.85;margin-top:6px}
.pc-l span.ph,.pc-l b .ph{display:inline;margin:0;font-size:inherit;opacity:1}
.pc-l code{font-family:inherit;font-weight:800;padding:1px 7px;border-radius:6px;border:1.5px dashed color-mix(in srgb,var(--pt) 60%,transparent)}
.cd{display:flex;gap:8px}
.cd div{display:grid;justify-items:center;min-width:58px;padding:8px 6px;border-radius:12px;background:color-mix(in srgb,var(--pt) 12%,transparent)}
.cd b{font-family:var(--fd);font-size:26px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.cd small{font-size:11px;font-weight:700;opacity:.75;margin-top:3px}
.cd b.tick{animation:tick .35s ease}
@keyframes tick{0%{transform:translateY(-4px);opacity:.3}}
body[data-promo] .plan.promo-on{border-color:var(--pa);box-shadow:0 30px 60px -40px var(--pa)}
body[data-promo="ny"] .plan.promo-on{border-color:#E0A800}
body[data-promo] .plan.promo-on .btn-primary,body[data-promo] .plan.promo-on.featured .btn-ghost{background:var(--pa);border-color:var(--pa);color:var(--pt);box-shadow:none}
.promo-note{display:none;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--bg-alt);border:1px dashed var(--line);border-radius:10px;padding:8px 10px}
body[data-promo] .plan.promo-off .promo-note{display:block}
@media (max-width:640px){
  .cd div{min-width:48px}
  .cd b{font-size:20px}
  .promo-card{padding:16px}
}
/* Filled in from the pricing endpoint (assets/js/pricing.js): hidden, not moved,
   until then, so nothing shifts and nothing shows another visitor's numbers. */
.pricing-page:not(.ready) .hyd{visibility:hidden}
.plan .amt:empty{display:inline-block;width:3.4em;height:.85em;border-radius:10px;background:linear-gradient(90deg,var(--surface-2),var(--bg-alt),var(--surface-2));background-size:200% 100%;animation:shimmer 1.2s linear infinite}
.pricing-page.offline .plan .amt:empty{display:none}
@keyframes shimmer{to{background-position:-200% 0}}
.plan .bnote:empty::before{content:"\00a0"}
.cd[hidden]{display:none}
#topupRow{flex-direction:column;align-items:flex-start;gap:6px}
#topupRow b{white-space:normal;display:grid;gap:2px;font-size:15px}
/* icons */
.plan h3{gap:10px}
.plan-i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--c);--ic-accent:var(--c);background:color-mix(in srgb,var(--c) 13%,#fff)}
.cost-l,.sl-l{display:flex;align-items:center;gap:10px}
.cost-i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:none;color:var(--royal);--ic-accent:var(--royal);background:var(--royal-soft)}
.slider .cost-i{width:28px;height:28px;border-radius:8px}
.cmp tr.grp th{display:table-cell}
.grp-i{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;margin-right:10px;vertical-align:middle;color:var(--royal);--ic-accent:var(--royal);background:var(--royal-soft)}
.imp-l{display:flex;align-items:center;gap:8px}
.imp-l svg{width:16px;height:16px;color:var(--royal);--ic-accent:var(--royal)}
.trial-strip .sb-icon{color:var(--c-mon);--ic-accent:var(--c-mon)}
.cmp-wrap{max-width:100%;min-width:0;width:100%;contain:paint}#compare .wrap{min-width:0}
/* contrast (WCAG AA) */
.save{color:color-mix(in srgb,var(--c-mon) 55%,var(--ink))}
.mtick{opacity:1;background:color-mix(in srgb,var(--ink-2) 35%,transparent)}
.mtick span{color:var(--muted)}
.rec .tag{color:var(--ink);background:color-mix(in srgb,var(--c,var(--royal)) 22%,#fff)}
.ov-ev{opacity:1}
.ov-ev:not(.on){transform:translateX(-6px)}
.ov-ev:not(.on) i{filter:grayscale(1)}
.ov-ev i{color:color-mix(in srgb,var(--c) 45%,var(--ink))}
.ov-ev.on{box-shadow:inset 3px 0 0 var(--c)}
.est h3{font-size:20px;letter-spacing:-.02em}
/* Five cards: the four plans and the display-only Enterprise card (pricing spec 7).
   The row gets a little more width than the page so five prices still fit. */
#plans.wrap{max-width:1360px}
.plans{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.plans .plan{padding:24px 20px 26px}
.plans .amt{font-size:clamp(30px,2.5vw,40px)}
.plan-custom{background:var(--bg-alt)}
.plan-custom .custom-price{font-family:var(--fd);font-weight:800;font-size:clamp(24px,1.9vw,30px);letter-spacing:-.03em;line-height:1.05;align-self:flex-end;padding-bottom:6px}
.plan-custom .btn.is-calling{opacity:.75;cursor:progress}
@media (max-width:1279px){
  .plans{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans .plan-custom{grid-column:1/-1}
}
@media (max-width:600px){
  .plans{grid-template-columns:1fr}
}
/* Pricing v2: credit rules and the note under the allowance table. */
.credit-rules{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.credit-rules li{display:flex;gap:10px;align-items:flex-start}
.credit-rules svg{color:var(--royal);width:16px;height:16px;margin-top:3px;flex:none;stroke-width:2.6}
.cmp-note{margin:16px auto 0;max-width:72ch;text-align:center;font-size:14.5px;color:var(--muted)}
#topupRow b small{font-family:var(--fb,inherit);font-weight:500;font-size:13px;color:var(--muted)}
/* Owner's pricing spec v2 (1 October 2026): credit packs, the overage line, the app's
   promotion button and the five-column comparison table. */
.packs{display:grid;gap:10px;margin-top:6px}
.packs h3{font-size:18px;letter-spacing:-.02em}
.pack-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pack{display:grid;gap:2px;padding:14px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.pack b{font-size:14px;color:var(--ink-2);font-weight:600}
.pack .pack-price{font-family:var(--fd);font-weight:800;font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pack small{font-size:13.5px;color:var(--muted)}
.pack-note,.ov-line{font-size:14.5px;color:var(--ink-2);margin:0}
.save{white-space:nowrap}
.ov-line[hidden],.packs[hidden],.promo-card[hidden],.pc-cta[hidden]{display:none!important}
.pc-cta{background:var(--pt);color:var(--pa);border-color:var(--pt);flex:none}
table.cmp{min-width:820px}
.cmp td{font-weight:500}
.cmp thead th.feat,.cmp td.feat{color:var(--royal)}
.credits .sec-head{gap:16px}
@media (max-width:600px){
  .pack-list{grid-template-columns:1fr}
  .pack{grid-template-columns:auto 1fr auto;align-items:baseline;gap:10px}
  .pack .pack-price{font-size:18px;text-align:right;order:3}
  .cmp th,.cmp td{padding:12px 12px}
}

/* Plans explained by what you get done (positioning spec 19), above the comparison table. */
.p-outcomes .sec-head{justify-items:center;text-align:center}
.p-outcomes .sec-head .lede{margin:0 auto;text-wrap:balance}
.po-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.po{--c:var(--royal);display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface)}
.po h3{display:flex;align-items:center;gap:10px;margin:0;font-family:var(--fd);font-size:1.1rem;color:var(--ink)}
.po-i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff)}
.po>p{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.po-mods{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.po-mods li{padding:3px 9px;border-radius:999px;background:var(--surface-2);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.po-plans{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:6px}
.po-plans dt{font-size:12.5px;font-weight:700;color:var(--ink)}
.po-plans dd{margin:0 0 4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;font-size:13px;color:var(--ink-2)}
.po-plans dd span{display:flex;justify-content:space-between;gap:6px}
.po-plans dd small{color:var(--muted);font-size:12px}
.po-every{display:flex;align-items:center;gap:6px;margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--c-mon)}
.po-every svg{width:16px;height:16px}
@media (max-width:1100px){.po-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.po-grid{grid-template-columns:1fr}}
.po-gates{display:grid;gap:6px;margin:0;padding:10px 0 0;list-style:none;border-top:1px solid var(--line)}
.po-plans+.po-gates{border-top:0;padding-top:0}
.po-gates li{display:flex;gap:7px;align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.4}
.po-gates svg{flex:none;width:14px;height:14px;margin-top:2px;color:var(--muted)}