.marketing-page {
  --m-ink: #101828;
  --m-copy: #344054;
  --m-muted: #667085;
  --m-line: #d8e0ea;
  --m-blue: #1769e0;
  --m-blue-strong: #0d55c5;
  --m-cyan: #0b8ea8;
  --m-green: #17805f;
  --m-coral: #e6543f;
  --m-amber: #d58a0b;
  --m-wash: #f3f6fa;
  --m-mint: #edf8f3;
  --m-peach: #fff1ec;
  --m-dark: #111827;
  color: var(--m-ink);
  background: #fff;
}

.marketing-page .site-header {
  min-height: 72px;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  padding: 10px max(24px, calc((100vw - 1420px) / 2));
  border-color: rgba(216, 224, 234, .92);
  background: rgba(255, 255, 255, .96);
  box-shadow: none;
}

.marketing-page .brand {
  gap: 10px;
}

.marketing-page .brand img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
}

.marketing-page .brand strong {
  color: var(--m-ink);
  font-size: 18px;
  line-height: 1.1;
}

.marketing-page .brand small {
  color: var(--m-muted);
  font-size: 11px;
}

.marketing-page .site-header nav {
  gap: 26px;
  color: var(--m-copy);
  font-size: 13px;
  font-weight: 750;
}

.marketing-page .site-header nav a {
  padding: 10px 0;
  border-bottom: 2px solid transparent;
}

.marketing-page .site-header nav a:hover,
.marketing-page .site-header nav a:focus-visible {
  color: var(--m-blue);
  border-bottom-color: var(--m-blue);
}

.marketing-page .button {
  min-height: 44px;
  border-radius: 6px;
  padding: 0 17px;
  font-size: 14px;
  font-weight: 800;
}

.marketing-page .button-primary {
  border-color: var(--m-blue);
  background: var(--m-blue);
  color: #fff;
}

.marketing-page .button-primary:hover,
.marketing-page .button-primary:focus-visible {
  border-color: var(--m-blue-strong);
  background: var(--m-blue-strong);
}

.marketing-page .button-secondary {
  border-color: #c7d2e0;
  background: #fff;
  color: var(--m-ink);
}

.marketing-page .button-secondary:hover,
.marketing-page .button-secondary:focus-visible {
  border-color: var(--m-blue);
  color: var(--m-blue);
}

.marketing-page .button-ghost {
  border-color: rgba(255, 255, 255, .6);
  background: rgba(17, 24, 39, .38);
  color: #fff;
}

.marketing-page .button-ghost:hover,
.marketing-page .button-ghost:focus-visible {
  background: rgba(17, 24, 39, .66);
}

.marketing-page .hero {
  height: min(720px, calc(100svh - 120px));
  min-height: 580px;
  align-items: end;
  background: var(--m-dark);
}

.marketing-page .hero-image {
  object-position: center;
}

.marketing-page .hero-shade {
  background: rgba(8, 15, 27, .56);
  box-shadow: inset 52vw 0 170px rgba(8, 15, 27, .5);
}

.marketing-page .hero-content {
  width: min(1420px, 100%);
  padding: 64px 40px 34px;
}

.marketing-page .eyebrow {
  margin: 0 0 11px;
  color: var(--m-blue);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.marketing-page .hero .eyebrow {
  color: #8ec5ff;
}

.marketing-page .hero h1 {
  max-width: 720px;
  margin: 0;
  font-family: inherit;
  font-size: 66px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.marketing-page .hero-copy {
  max-width: 760px;
  margin: 22px 0 28px;
  color: rgba(255, 255, 255, .9);
  font-size: 20px;
  line-height: 1.52;
}

.marketing-page .hero-facts {
  max-width: 1020px;
  margin-top: 42px;
  border-color: rgba(255, 255, 255, .28);
}

.marketing-page .hero-facts div {
  min-height: 92px;
  padding: 18px 28px 16px 0;
}

.marketing-page .hero-facts div + div {
  border-color: rgba(255, 255, 255, .28);
}

.marketing-page .hero-facts dt {
  font-size: 14px;
}

.marketing-page .hero-facts dd {
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
}

.marketing-page .signal-strip {
  width: min(1420px, 100%);
  min-height: 84px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  padding: 0 40px;
  background: #fff;
}

.marketing-page .signal-strip > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px 22px 0;
  border-bottom: 1px solid var(--m-line);
}

.marketing-page .signal-strip > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--m-line);
}

.marketing-page .signal-strip span {
  color: var(--m-blue);
  font-size: 11px;
  font-weight: 850;
}

.marketing-page .signal-strip strong {
  min-width: 0;
  color: var(--m-copy);
  font-size: 13px;
}

.marketing-page .section,
.marketing-page .platform-section,
.marketing-page .security-section {
  padding: 92px max(28px, calc((100vw - 1280px) / 2));
}

.marketing-page .section-heading {
  max-width: 780px;
}

.marketing-page .section-heading-wide {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
  gap: 80px;
  align-items: end;
}

.marketing-page .section-heading h2,
.marketing-page .stage-copy h2,
.marketing-page .migration-band h2,
.marketing-page .cta-band h2 {
  margin: 0;
  font-family: inherit;
  font-size: 42px;
  line-height: 1.12;
  font-weight: 820;
  letter-spacing: 0;
}

.marketing-page .section-heading > p,
.marketing-page .section-heading-wide > p,
.marketing-page .stage-copy > p,
.marketing-page .migration-band > p,
.marketing-page .cta-band > div > p:last-child {
  margin: 0;
  color: var(--m-muted);
  font-size: 16px;
  line-height: 1.65;
}

.marketing-page .workflow {
  background: #fff;
}

.marketing-page .workflow-lane {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 48px;
  border-top-color: var(--m-blue);
}

.marketing-page .workflow-lane li {
  min-height: 158px;
  gap: 8px;
  padding: 22px 16px;
  border-bottom-color: var(--m-line);
}

.marketing-page .workflow-lane li + li {
  border-left-color: var(--m-line);
}

.marketing-page .workflow-lane span {
  color: var(--m-blue);
}

.marketing-page .workflow-lane strong {
  color: var(--m-ink);
  font-size: 16px;
}

.marketing-page .workflow-lane small {
  color: var(--m-muted);
  font-size: 12px;
  line-height: 1.48;
}

.marketing-page .platform-section {
  background: var(--m-wash);
}

.marketing-page .product-window {
  min-width: 0;
  margin-top: 52px;
  overflow: hidden;
  border: 1px solid #cbd6e4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 24, 40, .14);
}

.marketing-page .product-topbar {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 0 18px;
  border-bottom: 1px solid var(--m-line);
  background: #fff;
  color: var(--m-muted);
  font-size: 11px;
  font-weight: 750;
}

.marketing-page .product-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--m-ink);
  font-size: 13px;
  font-weight: 850;
}

.marketing-page .product-mark img {
  width: 25px;
  height: 25px;
  border-radius: 4px;
}

.marketing-page .product-state {
  justify-self: end;
}

.marketing-page .product-state i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--m-green);
}

.marketing-page .product-project-head {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--m-line);
  background: #fbfcfe;
}

.marketing-page .product-project-head > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.marketing-page .product-project-head span {
  color: var(--m-blue);
  font-size: 13px;
  font-weight: 850;
}

.marketing-page .product-project-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--m-ink);
  font-size: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.marketing-page .product-project-head em,
.marketing-page .panel-heading > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 4px;
  background: #e8f6ef;
  color: var(--m-green);
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
}

.marketing-page .product-body {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  min-height: 430px;
}

.marketing-page .product-tabs {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px 10px;
  border-right: 1px solid var(--m-line);
  background: #f7f9fc;
}

.marketing-page .product-tabs button {
  min-height: 44px;
  padding: 0 13px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--m-copy);
  text-align: left;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.marketing-page .product-tabs button:hover {
  background: #eaf0f8;
}

.marketing-page .product-tabs button[aria-selected="true"] {
  background: #e7f0ff;
  color: var(--m-blue);
}

.marketing-page .product-panel {
  min-width: 0;
  padding: 26px 28px 30px;
}

.marketing-page .panel-heading {
  min-height: 58px;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--m-line);
}

.marketing-page .panel-heading small,
.marketing-page .project-summary small {
  display: block;
  margin-bottom: 4px;
  color: var(--m-muted);
  font-size: 10px;
  font-weight: 850;
}

.marketing-page .panel-heading h3 {
  margin: 0;
  color: var(--m-ink);
  font-size: 20px;
}

.marketing-page .project-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 24px;
  padding-top: 18px;
}

.marketing-page .timeline-list article {
  min-height: 75px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-bottom: 1px solid var(--m-line);
}

.marketing-page .timeline-list time {
  color: var(--m-muted);
  font-size: 12px;
  font-weight: 800;
}

.marketing-page .timeline-list strong {
  font-size: 14px;
}

.marketing-page .timeline-list p,
.marketing-page .billing-flow p {
  margin: 4px 0 0;
  color: var(--m-muted);
  font-size: 11px;
}

.marketing-page .timeline-list em,
.marketing-page .demo-table em,
.marketing-page .billing-flow em {
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.marketing-page .status-ok {
  color: var(--m-green);
}

.marketing-page .status-progress {
  color: var(--m-blue);
}

.marketing-page .status-attention {
  color: var(--m-coral);
}

.marketing-page .project-summary {
  min-width: 0;
  padding: 19px;
  border-left: 3px solid var(--m-blue);
  background: var(--m-wash);
}

.marketing-page .project-summary > strong {
  font-size: 17px;
}

.marketing-page .project-summary p {
  margin: 14px 0 0;
  color: var(--m-muted);
  font-size: 12px;
  line-height: 1.55;
}

.marketing-page .progress {
  height: 7px;
  margin: 22px 0 0;
  background: #dbe3ed;
}

.marketing-page .progress span {
  width: 72%;
  background: var(--m-blue);
}

.marketing-page .demo-table {
  padding-top: 10px;
}

.marketing-page .demo-table > div {
  min-height: 61px;
  display: grid;
  grid-template-columns: 70px minmax(200px, 1fr) 110px 120px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--m-line);
  font-size: 12px;
}

.marketing-page .demo-table .demo-table-head {
  min-height: 38px;
  color: var(--m-muted);
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.marketing-page .demo-table b {
  color: var(--m-blue);
}

.marketing-page .mini-stage {
  position: relative;
  height: 290px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--m-line);
  background: #fbfdff;
}

.marketing-page .mini-stage-grid,
.marketing-page .sheet-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#dce5ef 1px, transparent 1px),
    linear-gradient(90deg, #dce5ef 1px, transparent 1px);
  background-size: 28px 28px;
}

.marketing-page .mini-stage::after {
  position: absolute;
  left: 22%;
  right: 22%;
  top: 23%;
  bottom: 11%;
  border: 1px solid #9dacbd;
  background: rgba(230, 236, 243, .78);
  content: "";
}

.marketing-page .mini-truss,
.marketing-page .sheet-truss {
  position: absolute;
  z-index: 2;
  height: 22px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border: 3px solid #25364b;
  background: #fff;
}

.marketing-page .mini-truss::before,
.marketing-page .mini-truss::after,
.marketing-page .sheet-truss::before,
.marketing-page .sheet-truss::after {
  position: absolute;
  top: -3px;
  width: 8px;
  height: 22px;
  border: 3px solid #25364b;
  background: #fff;
  content: "";
}

.marketing-page .mini-truss::before,
.marketing-page .sheet-truss::before {
  left: -8px;
}

.marketing-page .mini-truss::after,
.marketing-page .sheet-truss::after {
  right: -8px;
}

.marketing-page .mini-truss i,
.marketing-page .sheet-truss i {
  width: 2px;
  height: 22px;
  display: block;
  background: #25364b;
  transform: rotate(38deg);
}

.marketing-page .mini-truss-top {
  top: 30%;
  left: 14%;
  right: 14%;
}

.marketing-page .mini-truss-bottom {
  bottom: 15%;
  left: 25%;
  right: 25%;
}

.marketing-page .mini-fixture {
  position: absolute;
  z-index: 3;
  width: 34px;
  display: grid;
  justify-items: center;
  gap: 4px;
}

.marketing-page .mini-fixture b {
  width: 22px;
  height: 22px;
  display: block;
  border: 3px solid var(--m-green);
  border-radius: 50%;
  background: #fff;
}

.marketing-page .mini-fixture b::after {
  width: 17px;
  height: 5px;
  display: block;
  margin: 20px 0 0 0;
  background: var(--m-green);
  content: "";
}

.marketing-page .mini-fixture span {
  margin-top: 6px;
  padding: 2px 4px;
  background: var(--m-green);
  color: #fff;
  font-size: 8px;
  font-weight: 850;
}

.marketing-page .fixture-1 { top: 26%; left: 24%; }
.marketing-page .fixture-2 { top: 26%; left: 42%; }
.marketing-page .fixture-3 { top: 26%; right: 37%; }
.marketing-page .fixture-4 { top: 26%; right: 20%; }

.marketing-page .mini-stage-label {
  position: absolute;
  z-index: 3;
  right: 23%;
  bottom: 19%;
  color: #41546a;
  font-size: 10px;
  font-weight: 850;
}

.marketing-page .billing-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 28px;
}

.marketing-page .billing-flow article {
  min-height: 220px;
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px 18px;
  border-top: 3px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
}

.marketing-page .billing-flow article + article {
  border-left: 1px solid var(--m-line);
}

.marketing-page .billing-flow article > span {
  color: var(--m-muted);
  font-size: 11px;
  font-weight: 850;
}

.marketing-page .billing-flow article > em {
  align-self: end;
  color: var(--m-muted);
}

.marketing-page .billing-flow .is-complete {
  border-top-color: var(--m-green);
}

.marketing-page .billing-flow .is-complete > em {
  color: var(--m-green);
}

.marketing-page .billing-flow .is-current {
  border-top-color: var(--m-blue);
  background: #f2f7ff;
}

.marketing-page .billing-flow .is-current > em {
  color: var(--m-blue);
}

.marketing-page .capabilities {
  background: #fff;
}

.marketing-page .capability-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 52px;
  border-top: 1px solid var(--m-line);
}

.marketing-page .capability-groups article {
  min-height: 182px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 18px;
  padding: 28px 34px 28px 0;
  border-bottom: 1px solid var(--m-line);
}

.marketing-page .capability-groups article:nth-child(even) {
  padding-left: 34px;
  border-left: 1px solid var(--m-line);
}

.marketing-page .capability-groups article > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid #bcd0eb;
  border-radius: 5px;
  color: var(--m-blue);
  font-size: 11px;
  font-weight: 850;
}

.marketing-page .capability-groups h3 {
  margin: 2px 0 10px;
  font-size: 18px;
}

.marketing-page .capability-groups p {
  margin: 0;
  color: var(--m-muted);
  font-size: 14px;
  line-height: 1.62;
}

.marketing-page .stage-planner-section {
  display: grid;
  grid-template-columns: minmax(340px, .72fr) minmax(590px, 1.28fr);
  gap: 72px;
  align-items: center;
  padding: 96px max(28px, calc((100vw - 1400px) / 2));
  background: #123a38;
  color: #fff;
}

.marketing-page .stage-copy .eyebrow {
  color: #66ded0;
}

.marketing-page .stage-copy > p {
  margin-top: 20px;
  color: rgba(255, 255, 255, .72);
}

.marketing-page .stage-copy ul {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.marketing-page .stage-copy li {
  position: relative;
  padding-left: 22px;
  color: rgba(255, 255, 255, .9);
  font-size: 14px;
  line-height: 1.5;
}

.marketing-page .stage-copy li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #66ded0;
  content: "";
}

.marketing-page .stage-sheet {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 4px;
  background: #fff;
  color: var(--m-ink);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.marketing-page .stage-sheet > header,
.marketing-page .stage-sheet > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 16px;
  border-bottom: 1px solid #cfd8e2;
}

.marketing-page .stage-sheet > header div {
  display: grid;
  gap: 3px;
}

.marketing-page .stage-sheet > header strong {
  font-size: 13px;
}

.marketing-page .stage-sheet > header span,
.marketing-page .stage-sheet > header b,
.marketing-page .stage-sheet > footer {
  color: #667085;
  font-size: 9px;
}

.marketing-page .stage-sheet-body {
  position: relative;
  height: 430px;
  overflow: hidden;
}

.marketing-page .sheet-grid {
  background-size: 24px 24px;
}

.marketing-page .sheet-stage {
  position: absolute;
  z-index: 1;
  left: 18%;
  right: 18%;
  top: 18%;
  bottom: 12%;
  display: grid;
  place-items: end center;
  padding: 12px;
  border: 2px solid #5d6d80;
  background: rgba(236, 241, 246, .88);
}

.marketing-page .sheet-stage span {
  color: #516174;
  font-size: 9px;
  font-weight: 850;
}

.marketing-page .sheet-truss {
  left: 11%;
  right: 11%;
  top: 27%;
}

.marketing-page .sheet-truss-b {
  top: auto;
  bottom: 19%;
  left: 24%;
  right: 24%;
}

.marketing-page .sheet-light {
  position: absolute;
  z-index: 3;
  top: 23%;
  width: 46px;
  display: grid;
  justify-items: center;
  gap: 7px;
}

.marketing-page .sheet-light b {
  width: 26px;
  height: 26px;
  display: block;
  border: 3px solid #14845d;
  border-radius: 50%;
  background: #fff;
}

.marketing-page .sheet-light b::after {
  width: 20px;
  height: 6px;
  display: block;
  margin: 24px 0 0 0;
  background: #14845d;
  content: "";
}

.marketing-page .sheet-light span {
  margin-top: 5px;
  padding: 2px 4px;
  background: #14845d;
  color: #fff;
  font-size: 8px;
  font-weight: 850;
}

.marketing-page .light-a { left: 21%; }
.marketing-page .light-b { left: 39%; }
.marketing-page .light-c { right: 38%; }
.marketing-page .light-d { right: 20%; }

.marketing-page .sheet-speaker {
  position: absolute;
  z-index: 3;
  top: 42%;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.marketing-page .sheet-speaker b {
  width: 27px;
  height: 56px;
  display: block;
  border: 3px solid #1769e0;
  background:
    radial-gradient(circle at 50% 28%, #1769e0 0 5px, transparent 6px),
    radial-gradient(circle at 50% 72%, #1769e0 0 8px, transparent 9px),
    #fff;
}

.marketing-page .sheet-speaker span {
  color: #1769e0;
  font-size: 9px;
  font-weight: 850;
}

.marketing-page .speaker-a { left: 12%; }
.marketing-page .speaker-b { right: 12%; }

.marketing-page .stage-sheet > footer {
  border-top: 1px solid #cfd8e2;
  border-bottom: 0;
  background: #f7f9fc;
  font-weight: 750;
}

.marketing-page .migration-band {
  display: grid;
  grid-template-columns: 1.15fr .95fr .7fr;
  gap: 60px;
  align-items: center;
  padding: 72px max(28px, calc((100vw - 1280px) / 2));
  background: var(--m-peach);
}

.marketing-page .migration-band .eyebrow {
  color: var(--m-coral);
}

.marketing-page .migration-band h2 {
  font-size: 32px;
}

.marketing-page .migration-path {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.marketing-page .migration-path span {
  color: #8b3d30;
  font-size: 11px;
  font-weight: 850;
  text-align: center;
}

.marketing-page .migration-path i {
  height: 2px;
  background: #e9a394;
}

.marketing-page .roles {
  background: #fff;
}

.marketing-page .role-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 44px;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
}

.marketing-page .role-list article {
  min-height: 168px;
  padding: 26px 24px 24px 0;
}

.marketing-page .role-list article + article {
  padding-left: 24px;
  border-left: 1px solid var(--m-line);
}

.marketing-page .role-list strong {
  font-size: 17px;
}

.marketing-page .role-list p {
  color: var(--m-muted);
  font-size: 13px;
  line-height: 1.6;
}

.marketing-page .pricing-section {
  padding: 92px max(28px, calc((100vw - 1280px) / 2));
  background: var(--m-wash);
}

.marketing-page .pricing-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 48px;
  border: 1px solid var(--m-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.marketing-page .pricing-compare > article {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 24px;
  min-width: 0;
  padding: 30px;
}

.marketing-page .pricing-compare > article + article { border-left: 1px solid var(--m-line); }
.marketing-page .pricing-compare > article.is-plus { box-shadow: inset 0 4px var(--m-green); }
.marketing-page .pricing-compare article > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.marketing-page .pricing-compare header > div span { color: var(--m-blue); font-size: 11px; font-weight: 850; text-transform: uppercase; }
.marketing-page .pricing-compare .is-plus header > div span { color: var(--m-green); }
.marketing-page .pricing-compare h3 { margin: 5px 0 0; font-size: 24px; }
.marketing-page .pricing-compare header p { display: grid; justify-items: end; gap: 2px; margin: 0; white-space: nowrap; }
.marketing-page .pricing-compare header p strong { font-size: 25px; }
.marketing-page .pricing-compare header p small { color: var(--m-muted); font-size: 11px; }
.marketing-page .pricing-year { display: grid; gap: 4px; padding: 13px 0; border-top: 1px solid var(--m-line); border-bottom: 1px solid var(--m-line); }
.marketing-page .pricing-year b { font-size: 14px; }
.marketing-page .pricing-year span { color: var(--m-muted); font-size: 11px; }
.marketing-page .pricing-compare ul { display: grid; align-content: start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.marketing-page .pricing-compare li { position: relative; padding-left: 20px; color: var(--m-copy); font-size: 13px; line-height: 1.45; }
.marketing-page .pricing-compare li::before { position: absolute; top: 2px; left: 0; color: var(--m-green); content: "✓"; font-weight: 900; }
.marketing-page .pricing-compare .button { justify-self: start; }

.marketing-page .pricing-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 34px;
  border-top: 1px solid var(--m-line);
  border-bottom: 1px solid var(--m-line);
  background: #fff;
}

.marketing-page .pricing-process article { min-width: 0; min-height: 190px; padding: 24px 22px 22px 0; }
.marketing-page .pricing-process article + article { padding-left: 22px; border-left: 1px solid var(--m-line); }
.marketing-page .pricing-process span { color: var(--m-blue); font-size: 11px; font-weight: 850; }
.marketing-page .pricing-process strong { display: block; margin-top: 12px; font-size: 16px; }
.marketing-page .pricing-process p { margin: 8px 0 0; color: var(--m-muted); font-size: 12px; line-height: 1.55; }

.marketing-page .pricing-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 28px 0 0;
  border: 1px solid var(--m-line);
  border-radius: 6px;
  background: #fff;
}

.marketing-page .pricing-details div { min-width: 0; padding: 17px 18px; }
.marketing-page .pricing-details div + div { border-left: 1px solid var(--m-line); }
.marketing-page .pricing-details dt { color: var(--m-muted); font-size: 10px; font-weight: 850; text-transform: uppercase; }
.marketing-page .pricing-details dd { margin: 6px 0 0; color: var(--m-copy); font-size: 12px; line-height: 1.5; }

.marketing-page .security-section {
  background: var(--m-mint);
}

.marketing-page .security-points {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px;
  border-color: #bdd8cd;
}

.marketing-page .security-points article {
  min-height: 210px;
  display: grid;
  align-content: start;
  gap: 13px;
  padding: 28px 25px 28px 0;
}

.marketing-page .security-points article + article {
  padding-left: 25px;
  border-color: #bdd8cd;
}

.marketing-page .security-points span {
  color: var(--m-green);
  font-size: 11px;
  font-weight: 850;
}

.marketing-page .security-points strong {
  font-size: 17px;
}

.marketing-page .security-points p {
  margin: 0;
  color: #536b62;
  font-size: 13px;
  line-height: 1.6;
}

.marketing-page .cta-band {
  display: flex;
  justify-content: space-between;
  gap: 60px;
  padding: 76px max(28px, calc((100vw - 1280px) / 2));
  background: var(--m-dark);
  color: #fff;
}

.marketing-page .cta-band > div:first-child {
  max-width: 760px;
}

.marketing-page .cta-band .eyebrow {
  color: #8ec5ff;
}

.marketing-page .cta-band > div > p:last-child {
  margin-top: 14px;
  color: rgba(255, 255, 255, .68);
}

.marketing-page .cta-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.marketing-page .cta-actions .button-secondary {
  border-color: rgba(255, 255, 255, .5);
  background: transparent;
  color: #fff;
}

.marketing-page .site-footer {
  min-height: 150px;
  grid-template-columns: auto 1fr auto;
  background: #0b101a;
}

.marketing-page .site-footer .brand strong {
  color: #fff;
}

.marketing-page .site-footer > div {
  display: flex;
  gap: 24px;
  font-size: 13px;
  font-weight: 700;
}

.marketing-page .site-footer a:hover {
  color: #8ec5ff;
}

@media (max-width: 1120px) {
  .marketing-page .site-header nav {
    gap: 16px;
  }

  .marketing-page .site-header nav a:nth-child(4) {
    display: none;
  }

  .marketing-page .workflow-lane {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .marketing-page .workflow-lane li:nth-child(5) {
    border-left: 0;
  }

  .marketing-page .stage-planner-section {
    grid-template-columns: 1fr;
  }

  .marketing-page .stage-copy {
    max-width: 760px;
  }

  .marketing-page .migration-band {
    grid-template-columns: 1fr 1fr;
  }

  .marketing-page .migration-band > p {
    grid-column: 1 / -1;
  }
}

@media (max-width: 980px) {
  .marketing-page .site-header {
    grid-template-columns: auto 1fr auto auto;
    padding-inline: 18px;
  }

  .marketing-page .site-header nav {
    display: none;
    top: 72px;
    padding: 14px 18px 18px;
    background: #fff;
  }

  .marketing-page .site-header.is-open nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 18px;
  }

  .marketing-page .site-header nav a,
  .marketing-page .site-header nav a:nth-child(4) {
    display: block;
    min-height: 44px;
    padding: 13px 4px;
    border-bottom: 1px solid var(--m-line);
  }

  .marketing-page .menu-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 4px;
    padding: 0;
    border: 1px solid var(--m-line);
    border-radius: 5px;
    background: #fff;
  }

  .marketing-page .menu-button span {
    width: 17px;
    height: 2px;
    display: block;
    background: var(--m-ink);
  }

  .marketing-page .section-heading-wide {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .marketing-page .signal-strip {
    grid-template-columns: 1fr 1fr;
  }

  .marketing-page .signal-strip > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .marketing-page .product-body {
    grid-template-columns: 1fr;
  }

  .marketing-page .product-tabs {
    grid-template-columns: repeat(4, 1fr);
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--m-line);
  }

  .marketing-page .product-tabs button {
    text-align: center;
  }

  .marketing-page .security-points,
  .marketing-page .role-list {
    grid-template-columns: 1fr 1fr;
  }

  .marketing-page .pricing-process,
  .marketing-page .pricing-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .marketing-page .pricing-process article:nth-child(3),
  .marketing-page .pricing-details div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--m-line); border-left: 0; }
  .marketing-page .pricing-process article:nth-child(4),
  .marketing-page .pricing-details div:nth-child(4) { border-top: 1px solid var(--m-line); }

  .marketing-page .security-points article:nth-child(3),
  .marketing-page .role-list article:nth-child(3) {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid;
  }

  .marketing-page .security-points article:nth-child(3) {
    border-color: #bdd8cd;
  }

  .marketing-page .role-list article:nth-child(3) {
    border-color: var(--m-line);
  }
}

@media (max-width: 700px) {
  .marketing-page .site-header {
    min-height: 64px;
    gap: 8px;
  }

  .marketing-page .brand img {
    width: 36px;
    height: 36px;
  }

  .marketing-page .brand strong {
    font-size: 16px;
  }

  .marketing-page .brand small {
    font-size: 9px;
  }

  .marketing-page .site-header .header-actions .button-secondary {
    display: none;
  }

  .marketing-page .site-header .header-actions .button-primary {
    min-height: 40px;
    padding: 0 10px;
    font-size: 11px;
  }

  .marketing-page .site-header nav {
    top: 64px;
  }

  .marketing-page .hero {
    height: min(700px, calc(100svh - 100px));
    min-height: 580px;
  }

  .marketing-page .hero-image {
    object-position: 61% center;
  }

  .marketing-page .hero-shade {
    background: rgba(8, 15, 27, .68);
    box-shadow: none;
  }

  .marketing-page .hero-content {
    padding: 54px 22px 34px;
  }

  .marketing-page .hero h1 {
    font-size: 48px;
  }

  .marketing-page .hero-copy {
    margin: 18px 0 24px;
    font-size: 17px;
    line-height: 1.5;
  }

  .marketing-page .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-page .hero-actions .button {
    width: 100%;
  }

  .marketing-page .hero-facts {
    display: none;
  }

  .marketing-page .signal-strip {
    grid-template-columns: 1fr;
    padding: 0 22px;
  }

  .marketing-page .signal-strip > div,
  .marketing-page .signal-strip > div + div {
    min-height: 56px;
    padding: 15px 0;
    border-left: 0;
  }

  .marketing-page .section,
  .marketing-page .platform-section,
  .marketing-page .security-section,
  .marketing-page .pricing-section {
    padding: 66px 22px;
  }

  .marketing-page .section-heading h2,
  .marketing-page .stage-copy h2,
  .marketing-page .cta-band h2 {
    font-size: 33px;
  }

  .marketing-page .workflow-lane {
    grid-template-columns: 1fr 1fr;
    margin-top: 36px;
  }

  .marketing-page .workflow-lane li {
    min-height: 132px;
    padding: 18px 13px;
  }

  .marketing-page .workflow-lane li:nth-child(odd) {
    border-left: 0;
  }

  .marketing-page .workflow-lane li:nth-child(even) {
    border-left: 1px solid var(--m-line);
  }

  .marketing-page .product-window {
    margin-top: 36px;
    border-radius: 5px;
  }

  .marketing-page .product-topbar {
    grid-template-columns: 1fr auto;
  }

  .marketing-page .product-context {
    display: none;
  }

  .marketing-page .product-project-head {
    align-items: start;
    padding: 14px 15px;
  }

  .marketing-page .product-project-head > div {
    display: grid;
    gap: 4px;
  }

  .marketing-page .product-project-head strong {
    max-width: 230px;
    font-size: 15px;
  }

  .marketing-page .product-tabs {
    overflow-x: auto;
    grid-template-columns: repeat(4, 105px);
  }

  .marketing-page .product-panel {
    padding: 20px 15px 24px;
  }

  .marketing-page .panel-heading h3 {
    font-size: 17px;
  }

  .marketing-page .project-overview {
    grid-template-columns: 1fr;
  }

  .marketing-page .timeline-list article {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 9px;
  }

  .marketing-page .project-summary {
    min-height: 130px;
  }

  .marketing-page .demo-table {
    overflow-x: auto;
  }

  .marketing-page .demo-table > div {
    width: 650px;
  }

  .marketing-page .mini-stage {
    height: 310px;
  }

  .marketing-page .billing-flow {
    grid-template-columns: 1fr 1fr;
  }

  .marketing-page .billing-flow article {
    min-height: 170px;
  }

  .marketing-page .billing-flow article:nth-child(3) {
    border-left: 0;
  }

  .marketing-page .capability-groups {
    grid-template-columns: 1fr;
    margin-top: 36px;
  }

  .marketing-page .capability-groups article,
  .marketing-page .capability-groups article:nth-child(even) {
    min-height: 0;
    padding: 24px 0;
    border-left: 0;
  }

  .marketing-page .stage-planner-section {
    gap: 44px;
    padding: 66px 22px;
  }

  .marketing-page .stage-sheet-body {
    height: 330px;
  }

  .marketing-page .sheet-stage {
    left: 14%;
    right: 14%;
  }

  .marketing-page .sheet-truss {
    left: 8%;
    right: 8%;
  }

  .marketing-page .sheet-speaker {
    display: none;
  }

  .marketing-page .migration-band {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 56px 22px;
  }

  .marketing-page .migration-band h2 {
    font-size: 30px;
  }

  .marketing-page .migration-band > p {
    grid-column: auto;
  }

  .marketing-page .migration-path {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 7px;
  }

  .marketing-page .migration-path i {
    width: 2px;
    height: 18px;
    margin-left: 8px;
  }

  .marketing-page .migration-path span {
    text-align: left;
  }

  .marketing-page .role-list,
  .marketing-page .security-points {
    grid-template-columns: 1fr;
  }

  .marketing-page .pricing-compare { grid-template-columns: 1fr; margin-top: 36px; }
  .marketing-page .pricing-compare > article { padding: 24px 20px; }
  .marketing-page .pricing-compare > article + article { border-top: 1px solid var(--m-line); border-left: 0; }
  .marketing-page .pricing-compare article > header { align-items: stretch; flex-direction: column; }
  .marketing-page .pricing-compare header p { justify-items: start; }
  .marketing-page .pricing-compare .button { width: 100%; }
  .marketing-page .pricing-process,
  .marketing-page .pricing-details { grid-template-columns: 1fr; }
  .marketing-page .pricing-process article,
  .marketing-page .pricing-process article + article { min-height: 0; padding: 22px 0; border-top: 1px solid var(--m-line); border-left: 0; }
  .marketing-page .pricing-process article:first-child { border-top: 0; }
  .marketing-page .pricing-details div,
  .marketing-page .pricing-details div + div { padding: 16px; border-top: 1px solid var(--m-line); border-left: 0; }
  .marketing-page .pricing-details div:first-child { border-top: 0; }

  .marketing-page .role-list article,
  .marketing-page .role-list article + article,
  .marketing-page .security-points article,
  .marketing-page .security-points article + article {
    min-height: 0;
    padding: 23px 0;
    border-top: 1px solid;
    border-left: 0;
  }

  .marketing-page .role-list article,
  .marketing-page .role-list article + article {
    border-color: var(--m-line);
  }

  .marketing-page .security-points article,
  .marketing-page .security-points article + article {
    border-color: #bdd8cd;
  }

  .marketing-page .cta-band {
    display: grid;
    padding: 60px 22px;
  }

  .marketing-page .cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .marketing-page .site-footer {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 38px 22px;
  }

  .marketing-page .site-footer > div {
    flex-wrap: wrap;
    gap: 14px 22px;
  }
}

@media (max-width: 430px) {
  .marketing-page .site-header {
    padding-inline: 12px;
  }

  .marketing-page .brand span small {
    display: none;
  }

  .marketing-page .site-header .header-actions .button-primary {
    max-width: 118px;
    line-height: 1.15;
    text-align: center;
  }

  .marketing-page .hero {
    min-height: 610px;
  }

  .marketing-page .panel-heading > span {
    max-width: 105px;
    text-align: center;
  }
}