.commerce-page {
  --commerce-ink: #05111d;
  --commerce-safe-text: var(--safe);
  --commerce-accent-soft: color-mix(in srgb, var(--accent) 18%, var(--surface));
  --muted: color-mix(in srgb, var(--fg) 78%, var(--bg));
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .commerce-page { --commerce-safe-text: #2f6f10; }
}

:root[data-theme="light"] .commerce-page { --commerce-safe-text: #2f6f10; }

.commerce-page ::selection { background: var(--accent); color: var(--accent-ink); }
.commerce-page :focus-visible { outline: 3px solid var(--safe); outline-offset: 4px; }
.commerce-page a { text-underline-offset: .2em; }
.commerce-page .public-btn { line-height: 1.35; }
.commerce-page .public-nav { border-bottom: 0; }
.commerce-page .public-band { border-top: 0; }
.commerce-page .public-footer { border-top: 0; }

.commerce-hero {
  min-height: calc(100svh - 64px);
  overflow: hidden;
}

.commerce-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  min-height: calc(100svh - 64px);
  align-items: center;
  gap: clamp(30px, 5vw, 78px);
  padding-block: clamp(64px, 8vw, 118px);
}

.commerce-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 610px;
  animation: commerce-copy-in .72s cubic-bezier(.16, 1, .3, 1) both;
}

.commerce-hero h1 {
  max-width: 10ch;
  font-size: clamp(3.4rem, 6.8vw, 6rem);
  font-weight: 780;
  letter-spacing: -.04em;
  line-height: .92;
}

.commerce-hero-copy > p {
  max-width: 50ch;
  margin-top: 28px;
  color: var(--fg);
  font-size: 1.125rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.commerce-hero-copy > .public-btn { margin-top: 34px; }
.commerce-text-link {
  display: block;
  width: fit-content;
  margin-top: 20px;
  color: var(--muted);
  font-weight: 650;
}
.commerce-text-link:hover { color: var(--fg); }

.commerce-stage {
  position: relative;
  min-height: min(680px, 72svh);
  margin-right: min(-8vw, -42px);
  overflow: hidden;
  background: var(--accent);
  color: var(--accent-ink);
  clip-path: polygon(0 14%, 12% 0, 100% 0, 100% 100%, 0 100%);
  animation: commerce-stage-in 1.05s cubic-bezier(.16, 1, .3, 1) both;
}

.commerce-equation {
  display: grid;
  grid-template-columns: 1fr .58fr 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 24px;
  padding: clamp(76px, 10vw, 132px) clamp(28px, 5vw, 72px) 0;
  font-variant-numeric: tabular-nums;
}

.commerce-equation strong {
  font-family: var(--ff-display);
  font-size: clamp(5rem, 10vw, 9.5rem);
  font-weight: 820;
  letter-spacing: -.06em;
  line-height: .8;
}

.commerce-equation strong:last-of-type { text-align: right; }
.commerce-equation > span { display: grid; gap: clamp(12px, 2vw, 22px); }
.commerce-equation > span i { display: block; height: clamp(10px, 1.2vw, 18px); background: currentColor; }
.commerce-equation small { margin-top: 20px; font-size: 1rem; font-weight: 760; }
.commerce-equation small:last-child { text-align: right; }

.commerce-fragment {
  position: absolute;
  right: clamp(20px, 5vw, 70px);
  bottom: clamp(22px, 4vw, 52px);
  width: min(500px, calc(100% - 56px));
  padding: clamp(24px, 3vw, 34px);
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--radius);
  animation: commerce-fragment-in .78s .25s cubic-bezier(.16, 1, .3, 1) both;
}

.fragment-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.fragment-head strong { font-family: var(--ff-display); font-size: 1.125rem; }
.fragment-head span { color: var(--commerce-safe-text); font-size: .82rem; font-weight: 720; }
.commerce-fragment label { display: block; margin-bottom: 8px; color: var(--muted); font-size: .88rem; font-weight: 680; }
.commerce-fragment input {
  width: 100%;
  min-height: 54px;
  padding: 10px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  outline: 0;
  background: var(--surface);
  color: var(--fg);
  font: 700 1.125rem/1 var(--ff-display);
  font-variant-numeric: tabular-nums;
}
.commerce-fragment input:focus { border-color: var(--accent); }
.fragment-result { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.fragment-result span { color: var(--muted); }
.fragment-result strong { margin-left: auto; font-family: var(--ff-display); font-size: clamp(2rem, 4vw, 3.4rem); font-variant-numeric: tabular-nums; }
.commerce-fragment > p { margin-top: 20px; color: var(--muted); font-size: .88rem; }

.license-pricing { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); }
.license-field {
  display: flex;
  min-height: 78svh;
  flex-direction: column;
  justify-content: space-between;
  gap: 48px;
  padding: clamp(42px, 5vw, 76px);
  background: var(--surface-2);
  color: var(--fg);
}
.license-field-featured { background: var(--safe); color: #0b1705; }
.license-field h2 { max-width: 8ch; font-size: clamp(3rem, 5.5vw, 5.4rem); font-weight: 780; letter-spacing: -.04em; }
.license-field > div > p { max-width: 31ch; margin-top: 24px; font-size: 1.125rem; line-height: 1.6; }
.license-price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.license-price { display: flex; align-items: flex-end; margin: 0; font-family: var(--ff-display); font-size: clamp(5.7rem, 10vw, 10rem); font-weight: 820; letter-spacing: -.065em; line-height: .72; font-variant-numeric: tabular-nums; }
.license-price > span { align-self: flex-start; margin-right: 6px; font-size: .3em; letter-spacing: -.02em; }
.license-price small { margin-left: 14px; font-family: var(--ff-body); font-size: 1rem; font-weight: 750; letter-spacing: 0; }
.public-btn-ink { background: var(--commerce-ink); color: #fff; }
.public-btn-ink:hover { filter: brightness(1.2); }

.commerce-process h2,
.reseller-value h2,
.catalog-split h2,
.commerce-faq h2 { max-width: 11ch; font-size: clamp(3rem, 6vw, 6rem); font-weight: 780; letter-spacing: -.04em; line-height: .92; }

.payment-rail { display: flex; gap: 7px; margin-top: clamp(48px, 7vw, 86px); }
.payment-rail article {
  min-width: 0;
  flex: 1 1 0;
  min-height: 220px;
  padding: 24px;
  background: var(--surface);
}
.payment-rail article:nth-child(2) { flex-grow: 1.16; background: var(--surface-2); }
.payment-rail article:nth-child(3) { flex-grow: 1.28; background: var(--accent); color: var(--accent-ink); }
.payment-rail article:nth-child(4) { flex-grow: 1.14; background: var(--safe); color: #0b1705; }
.payment-rail strong { display: block; font-family: var(--ff-display); font-size: clamp(1.15rem, 1.8vw, 1.52rem); }
.payment-rail p { margin-top: 18px; font-size: 1rem; line-height: 1.55; }
.payment-rail article:nth-child(-n+2) p { color: var(--muted); }
.automatic-note { max-width: 70ch; margin: 40px 0 0 auto; color: var(--muted); font-size: 1rem; }
.automatic-note strong { color: var(--fg); }

.faq-layout { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); align-items: start; gap: clamp(40px, 8vw, 120px); }
.commerce-faq h2 { position: sticky; top: 104px; }
.faq-stack { display: grid; gap: 9px; }
.faq-stack details { background: var(--surface-2); border-radius: var(--radius); }
.faq-stack details[open] { background: var(--accent); color: var(--accent-ink); }
.faq-stack summary { position: relative; padding: 24px 64px 24px 26px; cursor: pointer; font-family: var(--ff-display); font-size: clamp(1.06rem, 1.6vw, 1.34rem); font-weight: 720; list-style: none; }
.faq-stack summary::-webkit-details-marker { display: none; }
.faq-stack summary::before,
.faq-stack summary::after { position: absolute; top: 50%; right: 26px; width: 18px; height: 3px; background: currentColor; content: ""; transform: translateY(-50%); transition: transform .2s ease; }
.faq-stack summary::after { transform: translateY(-50%) rotate(90deg); }
.faq-stack details[open] summary::after { transform: translateY(-50%) rotate(0); }
.faq-stack p { max-width: 56ch; padding: 0 26px 28px; font-size: 1rem; line-height: 1.65; }

.commerce-close { min-height: 82svh; padding-block: clamp(70px, 10vw, 150px); background: var(--accent); color: var(--accent-ink); }
.commerce-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .65fr); align-items: end; gap: clamp(60px, 9vw, 140px); min-height: 55svh; }
.commerce-close h2 { max-width: 9ch; font-size: clamp(4rem, 8vw, 8rem); font-weight: 820; letter-spacing: -.055em; line-height: .86; }
.commerce-close-grid > div:first-child > p { max-width: 42ch; margin-top: 28px; font-size: 1.125rem; line-height: 1.55; }
.close-ui { display: grid; gap: 16px; padding: 34px; background: var(--bg); color: var(--fg); border-radius: var(--radius); }
.close-ui > strong { font-family: var(--ff-display); font-size: clamp(1.8rem, 3vw, 3rem); }
.close-ui > span { color: var(--muted); }
.close-ui .public-btn { margin-top: 16px; background: var(--safe); color: #0b1705; }
.commerce-footer a { color: inherit; }

.reseller-stage { background: var(--safe); color: #0b1705; }
.reseller-program-hero h1 { max-width: 13ch; font-size: clamp(3.4rem, 6vw, 5.4rem); }
.wallet-amount { padding: clamp(78px, 10vw, 126px) clamp(28px, 5vw, 70px) 0; }
.wallet-amount strong { display: block; margin-top: 10px; font-family: var(--ff-display); font-size: clamp(4.5rem, 8.8vw, 8.6rem); font-weight: 820; letter-spacing: -.065em; line-height: .9; font-variant-numeric: tabular-nums; }
.wallet-amount small { display: block; max-width: 18ch; margin-top: 14px; font-size: 1rem; font-weight: 760; line-height: 1.35; }
.wallet-fragment { max-width: 520px; }
.ledger-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 14px 0; color: var(--muted); }
.ledger-line strong { color: var(--fg); font-family: var(--ff-display); font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.ledger-equals { display: grid; gap: 7px; width: 42px; margin: 10px auto; }
.ledger-equals i { display: block; height: 5px; background: var(--accent); }
.ledger-balance { color: var(--fg); }
.ledger-balance strong { color: var(--commerce-safe-text); font-size: 2rem; }

.reseller-value-grid,
.catalog-split { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: clamp(54px, 9vw, 140px); }
.value-statement { max-width: 37ch; font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.4; }
.value-statement strong { color: var(--commerce-safe-text); }
.reseller-value-copy dl { display: grid; gap: 34px; margin: 56px 0 0; padding: clamp(26px, 4vw, 44px); background: var(--surface); border-radius: var(--radius); }
.reseller-value-copy dl div { display: grid; grid-template-columns: minmax(120px, .35fr) minmax(0, 1fr); gap: 24px; }
.reseller-value-copy dt { font-family: var(--ff-display); font-size: 1.125rem; font-weight: 740; }
.reseller-value-copy dd { margin: 0; color: var(--muted); font-size: 1rem; }

.catalog-split > div:first-child > p { max-width: 36ch; margin-top: 24px; color: var(--muted); font-size: 1rem; }
.offer-ledger { display: grid; gap: 28px; padding: clamp(26px, 4vw, 44px); background: var(--surface); border-radius: var(--radius); }
.offer-ledger article { display: grid; grid-template-columns: .8fr .7fr 1.2fr; align-items: baseline; gap: 20px; }
.offer-ledger span { font-family: var(--ff-display); font-size: 1.125rem; font-weight: 740; }
.offer-ledger strong { color: var(--commerce-safe-text); font-variant-numeric: tabular-nums; }
.offer-ledger p { color: var(--muted); }
.reseller-close { background: var(--safe); color: #0b1705; }
.reseller-close .close-ui .public-btn { background: var(--accent); color: var(--accent-ink); }

@keyframes commerce-copy-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes commerce-stage-in {
  from { clip-path: polygon(0 100%, 12% 100%, 100% 100%, 100% 100%, 0 100%); }
  to { clip-path: polygon(0 14%, 12% 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes commerce-fragment-in {
  from { opacity: 0; transform: translateY(34px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.commerce-motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .72s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--reveal-order, 0) * 70ms);
}
.commerce-motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 980px) {
  .commerce-hero-grid { grid-template-columns: 1fr; }
  .commerce-stage { min-height: 620px; margin: 0; }
  .license-pricing { grid-template-columns: 1fr; }
  .license-field { min-height: 68svh; }
  .payment-rail { display: grid; grid-template-columns: 1fr 1fr; }
  .faq-layout,
  .reseller-value-grid,
  .catalog-split { grid-template-columns: 1fr; }
  .commerce-faq h2 { position: static; }
  .commerce-close-grid { grid-template-columns: 1fr; }
  .offer-ledger article { grid-template-columns: .75fr .6fr 1.2fr; }
}

@media (max-width: 720px) {
  .commerce-page .public-actions .public-btn { font-size: .8125rem; }
  .commerce-hero { min-height: auto; }
  .commerce-hero-grid { min-height: auto; gap: 50px; padding-block: 52px 0; }
  .commerce-hero h1 { max-width: 9ch; font-size: clamp(3.1rem, 14vw, 4.4rem); }
  .reseller-program-hero h1 { max-width: 10ch; font-size: clamp(3rem, 13vw, 4rem); }
  .commerce-hero-copy > p { margin-top: 22px; font-size: 1rem; }
  .commerce-stage { min-height: 570px; margin-inline: -10px; clip-path: polygon(0 11%, 20% 0, 100% 0, 100% 100%, 0 100%); }
  .commerce-equation { gap: 0 12px; padding: 90px 22px 0; }
  .commerce-equation strong { font-size: clamp(4.5rem, 22vw, 6rem); }
  .commerce-equation > span { gap: 9px; }
  .commerce-equation > span i { height: 9px; }
  .commerce-fragment { right: 16px; bottom: 22px; width: calc(100% - 32px); padding: 22px; }
  .fragment-result { flex-wrap: wrap; }
  .fragment-result strong { font-size: 2.25rem; }
  .license-field { min-height: 70svh; padding: 38px 20px 24px; }
  .license-field h2 { font-size: clamp(3.25rem, 13vw, 4.5rem); }
  .license-price-row { align-items: stretch; flex-direction: column; }
  .license-price { font-size: clamp(5.5rem, 28vw, 8rem); }
  .license-price-row .public-btn { order: -1; width: 100%; min-height: 50px; }
  .commerce-process h2,
  .reseller-value h2,
  .catalog-split h2,
  .commerce-faq h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .payment-rail { grid-template-columns: 1fr; gap: 7px; }
  .payment-rail article { min-height: 150px; }
  .automatic-note { margin-top: 28px; }
  .faq-layout { gap: 38px; }
  .faq-stack summary { padding: 20px 56px 20px 20px; font-size: 1.05rem; }
  .faq-stack summary::before,
  .faq-stack summary::after { right: 20px; }
  .faq-stack p { padding: 0 20px 22px; }
  .commerce-close { min-height: auto; }
  .commerce-close-grid { min-height: auto; gap: 50px; }
  .commerce-close h2 { font-size: clamp(3.7rem, 16vw, 5.5rem); }
  .close-ui { padding: 24px; }
  .wallet-amount { padding: 90px 24px 0; }
  .wallet-amount strong { font-size: clamp(4.2rem, 20vw, 6rem); }
  .reseller-value-copy dl div { grid-template-columns: 1fr; gap: 8px; }
  .value-statement { font-size: 1.35rem; }
  .offer-ledger article { grid-template-columns: 1fr; gap: 10px; padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .commerce-hero-copy,
  .commerce-stage,
  .commerce-fragment { animation: none; }
  .commerce-motion-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}