/* Technically Not website — commerce.css: pricing.html and download.html only (scoped under main.commerce).
   Uses styles.css tokens and shared classes (.wrap .button .card .eyebrow .lede .strike .ai .reveal .faq .split .sub .note).
   New brand tokens get fallbacks here so the pages hold up while styles.css changes. Header/footer styling lives in styles.css. */

.commerce{
  --c-grad:var(--ai-grad,linear-gradient(90deg,#1ee0f5,#2563eb));
  --c-r:16px;--c-r-lg:22px;
}
.c-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Page hero ---------- */
.commerce .page-hero{position:relative;isolation:isolate;padding-top:clamp(56px,9vw,112px);padding-bottom:clamp(32px,5vw,56px)}
/* The glow spans the full window (body hides horizontal overflow), so it never ends in a hard edge at the content column; its centers stay where they were over the heading. */
.commerce .page-hero:before{content:"";position:absolute;z-index:-1;top:-40px;left:50%;width:100vw;transform:translateX(-50%);height:420px;pointer-events:none;
  background:radial-gradient(520px 240px at calc(50% - 380px) 30%,color-mix(in srgb,#1ee0f5 9%,transparent),transparent 70%),radial-gradient(520px 260px at calc(50% - 110px) 10%,color-mix(in srgb,#2563eb 7%,transparent),transparent 70%)}
.commerce .page-hero h1{font-size:clamp(40px,6vw,76px);line-height:1.04;letter-spacing:-.042em;font-weight:850;margin:0 0 22px;max-width:900px;text-wrap:balance}
.commerce .page-hero .lede{font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--text-soft);max-width:640px;margin:0}
.section-title{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.035em;font-weight:800;margin:0 0 12px;text-wrap:balance}
.section-title.small{font-size:clamp(22px,2.4vw,28px);margin-bottom:6px}

/* Placeholder-pricing note: quiet, not an alert */
.price-note{display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--text-soft);border:1px solid var(--line);background:var(--surface);padding:7px 14px 7px 10px;border-radius:999px;margin:28px 0 0}
.price-note:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-grad);flex:none}

/* ---------- Plans ---------- */
.commerce .plans-section{border-top:0;padding-top:8px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.commerce .plan{display:flex;flex-direction:column;gap:18px;padding:30px 28px;border-radius:var(--c-r);position:relative}
.commerce .plan.featured{border:1px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--c-grad) border-box;box-shadow:var(--shadow-lg)}
.plan-badge{align-self:flex-start;margin:0;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan.featured .plan-badge{background:var(--c-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.commerce .plan-name{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:-8px 0 0}
.commerce .plan-desc{font-size:14px;color:var(--text-soft);margin:-12px 0 0}
.plan .price{display:flex;align-items:baseline;gap:8px;padding:6px 0 2px}
.plan .price .amount{font-size:52px;font-weight:850;letter-spacing:-.045em;line-height:1;color:var(--ink)}
.plan .price .cycle{font-size:14px;color:var(--muted)}
.commerce .plan .button{justify-content:center;width:100%}
.plan-checks{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:11px;font-size:14px;color:var(--text-soft);flex:1;align-content:start}
.plan-checks li{position:relative;padding-left:26px}
.plan-checks li:before,.compare .yes:before{content:"";position:absolute;left:0;top:.3em;width:15px;height:15px;background:var(--ink);opacity:.85;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%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 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

.buy-legal{font-size:13px;color:var(--muted);margin:20px 0 0;text-align:center}
.buy-legal a{color:var(--text-soft);text-decoration:underline;text-underline-offset:3px}

/* ---------- Comparison table ---------- */
.commerce #compare .sub{margin-bottom:36px}
.compare-wrap{border:1px solid var(--line);border-radius:var(--c-r);background:var(--surface);overflow-x:auto}
.compare{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:16px 20px;text-align:center;border-bottom:1px solid var(--line);vertical-align:middle}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare thead th{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);background:var(--soft);padding-top:14px;padding-bottom:14px}
.compare thead th.is-featured{box-shadow:inset 0 -2px 0 0 var(--ai-to,#2563eb)}
.compare tbody th{text-align:left;font-weight:500;color:var(--ink);width:46%}
.compare td{color:var(--text-soft)}
.compare td.is-featured{background:color-mix(in srgb,var(--soft) 45%,transparent);color:var(--ink)}
.compare .yes{position:relative;display:inline-block;width:15px;height:15px;vertical-align:middle}
.compare .yes:before{top:0}
.compare .no{color:var(--muted)}

/* ---------- Download panel ---------- */
.commerce .get-section{border-top:0;padding-top:8px}
.dl-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);border:1px solid var(--line);border-radius:var(--c-r-lg);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.dl-panel:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--c-grad);opacity:.9}
.dl-main{padding:clamp(28px,4vw,48px)}
.dl-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--soft);color:var(--ink);margin-bottom:22px}
.dl-title{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.035em;line-height:1.1;margin:0 0 8px}
.dl-sub{color:var(--text-soft);margin:0 0 26px;max-width:440px}
.commerce .dl-main .button{justify-content:center;gap:10px}
.commerce .dl-main .button.lg{padding:15px 26px;font-size:16px;font-weight:600}
.commerce .dl-main .note{margin-top:16px}
.dl-main .note a{color:var(--ink);text-underline-offset:3px}
.dl-specs{margin:0;padding:clamp(24px,4vw,48px);background:var(--soft);border-left:1px solid var(--line);display:grid;align-content:center}
.dl-specs div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl-specs div:last-child{border-bottom:0}
.dl-specs dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.dl-specs dd{margin:0;text-align:right;color:var(--ink);font-size:14px;min-width:0}
.file-name{font:13px/1.4 "SFMono-Regular",Consolas,monospace;color:var(--text-soft);overflow-wrap:anywhere}

/* Requirements */
.reqs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0 0}
.commerce .reqs .card{padding:24px;border-radius:var(--c-r)}
.reqs dt{font-size:17px;font-weight:750;letter-spacing:-.015em;margin:0 0 8px;color:var(--ink)}
.reqs dd{margin:0;color:var(--text-soft);font-size:14px}

/* Install steps: numbered sequence */
.install-steps{counter-reset:i;list-style:none;padding:0;margin:32px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.install-steps li{counter-increment:i;position:relative;padding:22px 0 0;border-top:1px solid var(--line)}
.install-steps li:before{content:counter(i,decimal-leading-zero);display:block;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:14px}
.install-steps li:after{content:"";position:absolute;left:0;top:-1px;width:40px;height:2px;background:var(--ink)}
.install-steps b{display:block;font-size:18px;font-weight:750;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)}
.install-steps span{font-size:14px;color:var(--text-soft)}

.smartscreen-note{display:flex;gap:14px;align-items:flex-start;margin-top:36px;background:var(--surface);border:1px solid var(--line);border-radius:var(--c-r);padding:18px 20px;font-size:14px;color:var(--text-soft)}
.smartscreen-note p{margin:0;align-self:center}
.smartscreen-note b{color:var(--ink)}
.note-icon{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--soft);color:var(--ink)}

/* Updates */
.update-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.update-note{margin:0;color:var(--text-soft)}

/* ---------- Motion (reveal/strike timing lives in styles.css) ---------- */
@media (prefers-reduced-motion:no-preference){
  .plans .plan.reveal:nth-child(2){transition-delay:80ms}
  .plans .plan.reveal:nth-child(3){transition-delay:160ms}
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .plans{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .dl-panel{grid-template-columns:1fr}
  .dl-specs{border-left:0;border-top:1px solid var(--line)}
  .reqs,.install-steps{grid-template-columns:1fr}
  .install-steps{gap:28px}
}
@media (max-width:560px){
  .commerce .plan{padding:24px 20px}
  .plan .price .amount{font-size:44px}
  .compare{font-size:13px}
  .compare th,.compare td{padding:12px 8px}
  .compare tbody th{padding-left:14px;width:auto}
  .compare thead th{font-size:12px}
  .commerce .dl-main .button.lg{width:100%}
  .dl-specs div{flex-direction:column;gap:4px}
  .dl-specs dd{text-align:left}
  .update-row .button{width:100%;justify-content:center}
}
.nobr{white-space:nowrap}