:root {
  color-scheme: light;
  --sales-bg: #f7f8fa;
  --sales-surface: #ffffff;
  --sales-surface-soft: #eef2f6;
  --sales-text: #111b29;
  --sales-muted: #526477;
  --sales-line: #d2dae5;
  --sales-green: #173f6b;
  --sales-green-dark: #0e1929;
  --sales-green-soft: #e8f0fb;
  --sales-red: #b42318;
  --sales-red-soft: #fff0ee;
  --sales-amber: #925f00;
  --sales-amber-soft: #fff7df;
  --sales-page-gutter: clamp(16px, 2vw, 40px);
  --sales-font: "Onest Variable", "Segoe UI", Arial, sans-serif;
  --sales-mono: "JetBrains Mono Variable", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  scroll-behavior: smooth;
  background: var(--sales-bg);
}

body {
  margin: 0;
  color: var(--sales-text);
  background: var(--sales-bg);
  font-family: var(--sales-font);
  -webkit-font-smoothing: antialiased;
}

button,
a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 500;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  color: #fff;
  background: var(--sales-green-dark);
  border-radius: 6px;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

main {
  overflow: clip;
}

main > section,
.sales-footer {
  width: auto;
  margin-inline: var(--sales-page-gutter);
}

.sales-hero {
  display: grid;
  min-height: min(720px, calc(100dvh - var(--cr-suite-height)));
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  gap: clamp(52px, 8vw, 112px);
  align-items: center;
  padding-block: clamp(72px, 10vw, 136px);
}

.eyebrow {
  margin: 0;
  color: var(--sales-green);
  font: 760 11px/1.2 var(--sales-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.hero-copy h1 {
  max-width: 760px;
  margin: 22px 0 0;
  font-size: clamp(54px, 6.4vw, 92px);
  font-weight: 710;
  letter-spacing: -.065em;
  line-height: .96;
}

.hero-copy h1 span {
  color: var(--sales-green);
  font-weight: 480;
}

.hero-lead {
  max-width: 680px;
  margin: 30px 0 0;
  color: var(--sales-muted);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.button,
.flow-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 740;
  line-height: 1.2;
  text-decoration: none;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.button--primary,
.flow-button {
  color: #fff;
  background: var(--sales-green);
  border-color: var(--sales-green);
}

.button--primary:hover,
.button--primary:focus-visible,
.flow-button:hover,
.flow-button:focus-visible {
  background: var(--sales-green-dark);
  border-color: var(--sales-green-dark);
  transform: translateY(-1px);
}

.button--secondary,
.flow-button--quiet {
  color: var(--sales-text);
  background: transparent;
  border-color: #aebfb6;
}

.button--secondary:hover,
.button--secondary:focus-visible,
.flow-button--quiet:hover,
.flow-button--quiet:focus-visible {
  color: var(--sales-green-dark);
  background: #fff;
  border-color: var(--sales-green);
}

.boundary-note {
  display: flex;
  max-width: 650px;
  gap: 11px;
  align-items: flex-start;
  margin: 28px 0 0;
  color: #6d7f77;
  font-size: 12px;
  line-height: 1.55;
}

.boundary-note span { color: var(--sales-green); font-size: 8px; line-height: 2; }

.purchase-card {
  position: relative;
  width: min(100%, 640px);
  justify-self: end;
  padding: clamp(26px, 3.5vw, 42px);
  background: var(--sales-surface);
  border: 1px solid var(--sales-line);
  border-top: 3px solid var(--sales-green);
  box-shadow: 0 26px 70px rgba(15, 51, 39, .09);
}

.purchase-card::before {
  position: absolute;
  top: -11px;
  right: 24px;
  width: 18px;
  height: 18px;
  background: var(--sales-green);
  border: 4px solid var(--sales-bg);
  border-radius: 50%;
  content: "";
}

.purchase-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--sales-muted);
  font: 700 10px/1.2 var(--sales-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.purchase-card header b { color: var(--sales-green); }

.purchase-card h2 {
  margin: 27px 0 0;
  font-size: clamp(25px, 2.4vw, 34px);
  letter-spacing: -.04em;
  line-height: 1.08;
}

.purchase-card dl { margin: 30px 0 0; }

.purchase-card dl > div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 16px;
  padding: 17px 0;
  border-top: 1px solid var(--sales-line);
}

.purchase-card dt { color: var(--sales-muted); font-size: 12px; }
.purchase-card dd { margin: 0; font-size: 14px; font-weight: 690; }
.purchase-card > p { margin: 22px 0 0; padding: 16px 18px; color: var(--sales-muted); background: var(--sales-surface-soft); border-left: 3px solid var(--sales-green); font-size: 12px; line-height: 1.55; }
.purchase-card > p strong { color: var(--sales-text); }

.how-it-works,
.value-section,
.next-section {
  padding-block: clamp(82px, 10vw, 136px);
  border-top: 1px solid var(--sales-line);
}

.value-section { padding-block: clamp(64px, 7vw, 96px); }

.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(36px, 7vw, 100px);
  align-items: end;
}

.section-heading h2,
.next-copy h2 {
  max-width: 760px;
  margin: 18px 0 0;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 680;
  letter-spacing: -.06em;
  line-height: 1;
}

.section-heading > p,
.next-copy > p:last-child {
  margin: 0;
  color: var(--sales-muted);
  font-size: 16px;
  line-height: 1.65;
}

.how-it-works__register {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .45fr);
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
  margin-top: clamp(44px, 6vw, 74px);
  border-top: 1px solid var(--sales-line);
}

.how-it-works__register > ol {
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-step {
  display: grid;
  min-width: 0;
  grid-template-columns: 44px minmax(180px, .72fr) minmax(260px, 1fr) minmax(190px, .62fr);
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
  padding: 30px clamp(20px, 2vw, 30px) 30px 0;
  border-bottom: 1px solid var(--sales-line);
}

.how-step[data-state="missing"] {
  background: #fffaf9;
  box-shadow: inset 3px 0 0 var(--sales-red);
}

.how-step__number {
  padding-top: 5px;
  color: var(--sales-green);
  font: 760 11px/1 var(--sales-mono);
}

.how-step[data-state="missing"] .how-step__number { color: var(--sales-red); }

.how-step__title,
.how-step__artifact { min-width: 0; }

.how-step__title small,
.how-step__artifact small {
  display: block;
  color: var(--sales-green);
  font: 740 9px/1.4 var(--sales-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.how-step[data-state="missing"] .how-step__title small,
.how-step[data-state="missing"] .how-step__artifact small { color: var(--sales-red); }

.how-step__title h3 {
  margin: 9px 0 0;
  font-size: clamp(20px, 1.8vw, 28px);
  letter-spacing: -.035em;
  line-height: 1.16;
  overflow-wrap: anywhere;
}

.how-step > p {
  min-width: 0;
  margin: 0;
  color: var(--sales-muted);
  font-size: 15px;
  line-height: 1.65;
}

.how-step__artifact {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--sales-line);
}

.how-step__artifact strong {
  font-size: 14px;
  line-height: 1.45;
}

.how-step__status {
  width: fit-content;
  margin-top: 8px;
  padding: 5px 7px;
  color: var(--sales-green-dark);
  background: #eef7f2;
  border: 1px solid #9bc9b4;
  font: 750 8px/1.3 var(--sales-mono);
  letter-spacing: .045em;
}

.how-step__status--missing {
  color: var(--sales-red);
  background: var(--sales-red-soft);
  border-color: #e2a5a0;
}

.how-it-works__ownership {
  min-width: 0;
  padding: 28px;
  background: var(--sales-surface);
  border-top: 3px solid var(--sales-green);
  border-bottom: 1px solid var(--sales-line);
}

.how-it-works__ownership h3 {
  margin: 14px 0 0;
  font-size: clamp(25px, 2.2vw, 34px);
  letter-spacing: -.045em;
  line-height: 1.08;
}

.how-it-works__ownership dl { margin: 28px 0 0; }

.how-it-works__ownership dl > div {
  display: grid;
  grid-template-columns: minmax(100px, .38fr) minmax(0, 1fr);
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid var(--sales-line);
}

.how-it-works__ownership dt { font-size: 13px; font-weight: 750; }
.how-it-works__ownership dd { min-width: 0; margin: 0; color: var(--sales-muted); font-size: 13px; line-height: 1.55; }
.how-it-works__ownership > p { margin: 20px 0 0; padding: 15px 17px; color: var(--sales-text); background: var(--sales-surface-soft); border-left: 3px solid var(--sales-green); font-size: 13px; font-weight: 650; line-height: 1.55; }

.how-capability-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  border: 1px solid var(--sales-line);
}

.how-capability-band p {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(128px, auto) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 0;
  padding: 18px 20px;
  background: #eef7f2;
}

.how-capability-band p + p { border-left: 1px solid var(--sales-line); }
.how-capability-band b { color: var(--sales-green); font: 750 9px/1.4 var(--sales-mono); }
.how-capability-band span { color: var(--sales-muted); font-size: 12px; line-height: 1.55; }
.how-capability-band .how-capability-band__missing { background: var(--sales-red-soft); }
.how-capability-band__missing b { color: var(--sales-red); }
.how-capability-band .how-capability-band__activation { background: var(--sales-amber-soft); }
.how-capability-band__activation b { color: var(--sales-amber); }

.how-it-works__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 28px;
}

.how-it-works__actions > div:first-child { max-width: 620px; }
.how-it-works__actions strong { font-size: 18px; }
.how-it-works__actions p { margin: 7px 0 0; color: var(--sales-muted); font-size: 14px; line-height: 1.55; }
.how-it-works__actions > div:last-child { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(42px, 6vw, 72px);
  border-top: 1px solid var(--sales-line);
  border-bottom: 1px solid var(--sales-line);
}

.value-grid article {
  display: grid;
  min-height: 210px;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  padding: 26px 28px;
  background: var(--sales-surface);
}
.value-grid article + article { border-left: 1px solid var(--sales-line); }
.value-grid span { color: var(--sales-green); font: 740 10px var(--sales-mono); }
.value-grid h3 { margin: 32px 0 0; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.04em; }
.value-grid p { margin: 12px 0 0; color: var(--sales-muted); font-size: 14px; line-height: 1.6; }
.value-grid article small {
  align-self: end;
  margin-top: 24px;
  color: var(--sales-green-dark);
  font: 720 9px/1.45 var(--sales-mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 18px;
  margin-top: 25px;
  color: var(--sales-green-dark);
  font-size: 13px;
  font-weight: 740;
  text-decoration: none;
}

.text-link:hover,
.text-link:focus-visible { text-decoration: underline; text-underline-offset: 5px; }

.next-section { padding-bottom: clamp(92px, 12vw, 158px); }
.next-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: clamp(38px, 8vw, 112px); align-items: end; }
.next-copy .eyebrow { grid-column: 1 / -1; margin-bottom: -20px; }

.intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(42px, 6vw, 70px);
}

.intent-grid article {
  display: grid;
  min-height: 330px;
  align-content: start;
  padding: clamp(28px, 4vw, 46px);
  background: var(--sales-surface);
  border: 1px solid var(--sales-line);
}

.intent-grid article > span { color: var(--sales-green); font: 740 10px var(--sales-mono); letter-spacing: .12em; text-transform: uppercase; }
.intent-grid h3 { margin: 50px 0 0; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.045em; }
.intent-grid p { max-width: 480px; margin: 13px 0 0; color: var(--sales-muted); font-size: 14px; line-height: 1.6; }
.intent-grid .button { align-self: end; justify-self: start; margin-top: 38px; }

.truth-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 16px;
  border: 1px solid var(--sales-line);
}

.truth-strip p { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 20px; margin: 0; padding: 18px 22px; align-items: center; background: #eef7f2; }
.truth-strip p + p { border-left: 1px solid var(--sales-line); }
.truth-strip b { color: var(--sales-green); font: 750 9px/1.3 var(--sales-mono); }
.truth-strip span { color: var(--sales-muted); font-size: 12px; line-height: 1.45; }
.truth-strip .truth-strip__missing { background: var(--sales-red-soft); }
.truth-strip__missing b { color: var(--sales-red); }
.truth-strip .truth-strip__activation { background: var(--sales-amber-soft); }
.truth-strip__activation b { color: var(--sales-amber); }

.sales-footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 30px;
  align-items: center;
  padding-block: 30px;
  border-top: 1px solid var(--sales-line);
}

.footer-brand { font-size: 16px; font-weight: 760; text-decoration: none; }
.sales-footer p { margin: 0; color: var(--sales-muted); font-size: 12px; }
.sales-footer nav { display: flex; gap: 20px; }
.sales-footer nav a { color: var(--sales-muted); font-size: 12px; font-weight: 670; text-decoration: none; }
.sales-footer nav a:hover,
.sales-footer nav a:focus-visible { color: var(--sales-green-dark); }

:focus-visible { outline: 3px solid #54b58e; outline-offset: 3px; }

@media (max-width: 1180px) {
  .sales-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .purchase-card { width: min(680px, 100%); justify-self: start; }
  .how-it-works__register { grid-template-columns: minmax(0, 1fr); }
  .section-heading,
  .next-copy { grid-template-columns: minmax(0, 1fr); }
  .next-copy .eyebrow { margin-bottom: -8px; }
}

@media (max-width: 900px) {
  .how-step { grid-template-columns: 40px minmax(180px, .7fr) minmax(0, 1fr); }
  .how-step__artifact { grid-column: 2 / -1; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; padding: 14px 0 0; border-top: 1px solid var(--sales-line); border-left: 0; }
  .how-step__status { margin-top: 0; }
  .how-capability-band { grid-template-columns: minmax(0, 1fr); }
  .how-capability-band p + p { border-top: 1px solid var(--sales-line); border-left: 0; }
  .how-it-works__actions { align-items: flex-start; flex-direction: column; }
  .how-it-works__actions > div:last-child { justify-content: flex-start; }
}

@media (max-width: 760px) {
  :root { --sales-page-gutter: 14px; }
  .sales-hero { gap: 46px; padding-block: 58px 72px; }
  .hero-copy h1 { font-size: clamp(43px, 14vw, 64px); }
  .hero-lead { margin-top: 22px; font-size: 17px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .purchase-card { padding: 24px 20px; }
  .purchase-card dl > div { grid-template-columns: 74px minmax(0, 1fr); }
  .how-it-works,
  .value-section,
  .next-section { padding-block: 72px; }
  .section-heading h2,
  .next-copy h2 { font-size: clamp(38px, 12vw, 55px); }
  .section-heading > p,
  .next-copy > p:last-child { font-size: 15px; }
  .how-step { grid-template-columns: 34px minmax(0, 1fr); gap: 12px 14px; padding: 24px 14px 24px 0; }
  .how-step__number { grid-row: 1 / span 3; }
  .how-step__title,
  .how-step > p,
  .how-step__artifact { grid-column: 2; }
  .how-step > p { font-size: 16px; line-height: 1.58; }
  .how-step__artifact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-top: 14px; }
  .how-step__status { margin-top: 5px; }
  .how-it-works__ownership { padding: 24px 20px; }
  .how-it-works__ownership dl > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .how-capability-band p { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .how-it-works__actions > div:last-child { width: 100%; flex-direction: column; }
  .how-it-works__actions .button { width: 100%; }
  .value-grid,
  .intent-grid,
  .truth-strip { grid-template-columns: minmax(0, 1fr); }
  .value-grid article { min-height: 210px; padding: 24px 20px; }
  .value-grid article + article { border-top: 1px solid var(--sales-line); border-left: 0; }
  .value-grid h3 { margin-top: 30px; }
  .intent-grid article { min-height: 300px; }
  .truth-strip p { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .truth-strip p + p { border-top: 1px solid var(--sales-line); border-left: 0; }
  .sales-footer { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sales-footer nav { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
