.platform-page {
  --platform-ink: #111214;
  --platform-muted: #686b70;
  --platform-paper: #f1f0ec;
  --platform-paper-2: #e9e8e4;
  --platform-card: #fafaf8;
  --platform-line: rgba(17, 18, 20, .1);
  --platform-dark: #111315;
  --platform-dark-2: #181a1d;
  --platform-dark-line: rgba(255, 255, 255, .1);
  --platform-blue: #168df3;
  min-width: 320px;
  color: var(--platform-ink);
  background: var(--platform-paper);
  -webkit-font-smoothing: antialiased;
}

.platform-page main {
  overflow: clip;
}

.platform-page ::selection {
  color: #fff;
  background: #111214;
}

.platform-shell {
  width: min(100% - var(--gutter) * 2, 1180px);
  margin: 0 auto;
}

.platform-page .site-header {
  padding: 18px var(--gutter) 0;
  border: 0;
  pointer-events: none;
}

.platform-page .site-header.is-scrolled {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.platform-page .nav-shell {
  width: min(100%, 940px);
  height: 56px;
  padding: 0 11px 0 14px;
  border: 1px solid rgba(17, 18, 20, .07);
  border-radius: 18px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 10px 30px rgba(26, 23, 19, .055);
  backdrop-filter: blur(24px) saturate(145%);
  pointer-events: auto;
}

.platform-page .brand {
  width: 125px;
}

.platform-page .brand img {
  filter: invert(1);
}

.platform-page .desktop-nav {
  gap: 28px;
  color: #55575b;
  font-size: 13px;
  font-weight: 580;
}

.platform-page .desktop-nav a:hover,
.platform-page .desktop-nav a[aria-current="page"],
.platform-page .login-link:hover {
  color: #070708;
}

.platform-page .desktop-nav a::after {
  bottom: -7px;
  background: #111214;
}

.platform-page .nav-actions {
  gap: 15px;
}

.platform-page .login-link {
  color: #55575b;
  font-size: 13px;
  font-weight: 580;
}

.platform-page .nav-actions .button,
.platform-page .mobile-menu .button {
  min-height: 38px;
  padding: 0 17px;
  color: #fff;
  border: 0;
  background: #09090a;
  box-shadow: none;
}

.platform-page .nav-actions .button:hover,
.platform-page .mobile-menu .button:hover {
  color: #fff;
  background: #292a2d;
}

.platform-label {
  display: inline-block;
  color: #7a7d82;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.platform-hero {
  position: relative;
  min-height: 1210px;
  padding: 180px var(--gutter) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, .9), transparent 32%),
    linear-gradient(180deg, #f5f4f1 0%, #efeee9 52%, #ddd9d2 100%);
  isolation: isolate;
}

.platform-hero__glow {
  position: absolute;
  z-index: -1;
  top: 330px;
  left: 50%;
  width: 920px;
  height: 560px;
  transform: translateX(-50%);
  opacity: .48;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .96), transparent 70%);
  filter: blur(22px);
  pointer-events: none;
}

.platform-hero__copy {
  position: relative;
  z-index: 2;
  text-align: center;
}

.platform-hero h1 {
  max-width: 980px;
  margin: 26px auto 24px;
  color: #050506;
  font-size: clamp(64px, 7vw, 96px);
  font-weight: 640;
  letter-spacing: -.073em;
  line-height: .93;
}

.platform-hero__copy > p {
  max-width: 650px;
  margin: 0 auto;
  color: #65676b;
  font-size: 19px;
  line-height: 1.55;
}

.platform-actions {
  display: flex;
  margin-top: 34px;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.platform-button {
  display: inline-flex;
  min-height: 50px;
  padding: 0 22px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 670;
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.platform-button:hover {
  transform: translateY(-1px);
}

.platform-button--dark {
  color: #fff;
  background: #080809;
  box-shadow: 0 9px 25px rgba(0, 0, 0, .12);
}

.platform-button--dark:hover {
  color: #fff;
  background: #2a2b2e;
}

.platform-button--quiet {
  color: #36383c;
  border: 1px solid rgba(17, 18, 20, .11);
  background: rgba(255, 255, 255, .48);
}

.platform-button--quiet:hover {
  color: #050506;
  background: rgba(255, 255, 255, .86);
}

.platform-product-window {
  position: relative;
  z-index: 2;
  width: min(100% - var(--gutter) * 2, 1240px);
  min-height: 692px;
  margin: 88px auto 0;
  overflow: hidden;
  color: #e9edf2;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 26px 26px 0 0;
  background: #0b0d10;
  box-shadow:
    0 80px 130px rgba(32, 27, 22, .24),
    0 0 0 1px rgba(0, 0, 0, .32);
}

.platform-browserbar {
  position: relative;
  display: grid;
  height: 42px;
  padding: 0 15px;
  align-items: center;
  grid-template-columns: 1fr auto 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, #1d1f22, #17191c);
}

.platform-traffic {
  display: flex;
  gap: 7px;
}

.platform-traffic i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff6059;
}

.platform-traffic i:nth-child(2) { background: #ffbd2e; }
.platform-traffic i:nth-child(3) { background: #28c840; }

.platform-address {
  display: flex;
  min-width: 280px;
  min-height: 27px;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #818790;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: #121417;
  font-size: 12px;
}

.platform-browser-actions {
  display: flex;
  justify-self: end;
  gap: 7px;
}

.platform-browser-actions i {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 5px;
}

.platform-app {
  display: grid;
  min-height: 650px;
  grid-template-columns: 190px minmax(0, 1fr);
  background: #090b0e;
}

.platform-app__sidebar {
  position: relative;
  display: flex;
  padding: 28px 15px 22px;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, .075);
  background: linear-gradient(180deg, #111317, #0e1013);
}

.platform-app__sidebar > img {
  width: 124px;
  margin: 0 10px 30px;
}

.platform-site-select {
  display: flex;
  min-height: 68px;
  padding: 13px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
}

.platform-site-select > span {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #30d78f;
  box-shadow: 0 0 12px rgba(48, 215, 143, .5);
}

.platform-site-select div,
.platform-app__top > div:first-child,
.platform-ui-heading > div:first-child {
  display: grid;
}

.platform-site-select strong {
  color: #eceff3;
  font-size: 13px;
  font-weight: 650;
}

.platform-site-select small {
  color: #727984;
  font-size: 12px;
}

.platform-app__sidebar nav {
  display: grid;
  margin-top: 22px;
  gap: 5px;
}

.platform-app__sidebar nav span {
  display: flex;
  min-height: 42px;
  padding: 0 12px;
  align-items: center;
  gap: 10px;
  color: #848b95;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 580;
}

.platform-app__sidebar nav span.is-active {
  color: #eaf4ff;
  background: rgba(22, 141, 243, .13);
  box-shadow: inset 2px 0 #1a95ff;
}

.platform-app__sidebar nav b {
  width: 18px;
  color: #a1a8b1;
  font-weight: 500;
  text-align: center;
}

.platform-app__sync {
  display: flex;
  margin-top: auto;
  padding: 12px;
  align-items: center;
  gap: 9px;
  color: #707782;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px;
}

.platform-app__sync i,
.platform-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30d78f;
}

.platform-app__main {
  min-width: 0;
  padding: 31px 28px 28px;
}

.platform-app__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.platform-app__top small {
  color: #68717d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
}

.platform-app__top h2 {
  margin: 7px 0 0;
  color: #f0f2f5;
  font-size: 24px;
  font-weight: 640;
  letter-spacing: -.035em;
}

.platform-app__top > div:last-child {
  display: flex;
  align-items: center;
  gap: 10px;
}

.platform-live {
  display: inline-flex;
  min-height: 32px;
  padding: 0 12px;
  align-items: center;
  gap: 7px;
  color: #6ee8b4;
  border: 1px solid rgba(48, 215, 143, .18);
  border-radius: 999px;
  background: rgba(48, 215, 143, .06);
  font-size: 12px;
  font-weight: 650;
}

.platform-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #e9edf2;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  background: #1d232a;
  font-size: 12px;
  font-weight: 700;
}

.platform-kpis {
  display: grid;
  margin-top: 26px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.platform-kpis article {
  display: grid;
  min-height: 118px;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 13px;
  background: #101216;
}

.platform-kpis article > span {
  color: #7d8590;
  font-size: 12px;
}

.platform-kpis strong {
  margin: 8px 0 4px;
  color: #f2f4f7;
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.04em;
}

.platform-kpis strong small {
  margin-left: 4px;
  color: #8b929c;
  font-size: 12px;
  font-weight: 600;
}

.platform-kpis em {
  align-self: end;
  color: #707883;
  font-size: 12px;
  font-style: normal;
}

.platform-kpis em.positive { color: #41d998; }

.platform-overview-grid {
  display: grid;
  margin-top: 10px;
  grid-template-columns: minmax(0, 1fr) 272px;
  gap: 10px;
}

.platform-chart-card,
.platform-issue-card {
  min-height: 356px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  background: #101216;
}

.platform-ui-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.platform-ui-heading strong {
  color: #e6e9ed;
  font-size: 14px;
  font-weight: 650;
}

.platform-ui-heading small {
  margin-top: 3px;
  color: #6f7782;
  font-size: 12px;
}

.platform-chart-legend {
  display: flex;
  gap: 14px;
  color: #747c86;
  font-size: 12px;
}

.platform-chart-legend span::before {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  content: "";
  border-radius: 50%;
  background: #168df3;
}

.platform-chart-legend .expected::before { background: #727983; }

.platform-chart {
  position: relative;
  height: 270px;
  margin-top: 12px;
  padding-left: 46px;
}

.platform-axis {
  position: absolute;
  top: 12px;
  bottom: 29px;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #59616b;
  font-size: 12px;
}

.platform-chart svg {
  display: block;
  width: 100%;
  height: 228px;
  overflow: visible;
}

.platform-grid-lines path {
  fill: none;
  stroke: rgba(255, 255, 255, .055);
  stroke-width: 1;
}

.platform-area { fill: url(#platformArea); }
.platform-expected { fill: none; stroke: #6d7580; stroke-width: 2; stroke-dasharray: 7 7; }
.platform-actual { fill: none; stroke: #37a3ff; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(55, 163, 255, .42)); }
.platform-guide { fill: none; stroke: rgba(55, 163, 255, .35); stroke-width: 1; stroke-dasharray: 4 5; }
.platform-point { fill: #8eceff; stroke: #168df3; stroke-width: 3; }

.platform-chart-readout {
  position: absolute;
  top: 36px;
  left: 55%;
  display: grid;
  min-width: 142px;
  padding: 12px 14px;
  border: 1px solid rgba(55, 163, 255, .24);
  border-radius: 10px;
  background: rgba(9, 12, 16, .92);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.platform-chart-readout small { color: #66707c; font-size: 12px; }
.platform-chart-readout strong { margin: 3px 0; color: #f0f5fa; font-size: 17px; }
.platform-chart-readout span { color: #7f8791; font-size: 12px; }

.platform-time-axis {
  display: flex;
  padding-top: 5px;
  justify-content: space-between;
  color: #59616b;
  font-size: 12px;
}

.platform-status {
  display: inline-flex;
  min-height: 25px;
  padding: 0 9px;
  align-items: center;
  color: #ffb565;
  border: 1px solid rgba(255, 167, 68, .2);
  border-radius: 999px;
  background: rgba(255, 167, 68, .07);
  font-size: 12px;
  font-weight: 700;
}

.platform-issue {
  display: grid;
  margin: 31px 0 18px;
}

.platform-issue > span {
  color: #ffae54;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.platform-issue strong {
  margin-top: 8px;
  color: #f0f2f5;
  font-size: 19px;
  line-height: 1.18;
}

.platform-issue p {
  margin: 8px 0 0;
  color: #79818c;
  font-size: 12px;
}

.platform-issue-card dl {
  margin: 0;
}

.platform-issue-card dl div {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .06);
  font-size: 12px;
}

.platform-issue-card dt { color: #6f7782; }
.platform-issue-card dd { margin: 0; color: #cdd2d8; font-weight: 620; }

.platform-issue-card button {
  display: flex;
  width: 100%;
  min-height: 40px;
  margin-top: 15px;
  padding: 0 13px;
  align-items: center;
  justify-content: space-between;
  color: #e6f2fc;
  border: 1px solid rgba(55, 163, 255, .18);
  border-radius: 9px;
  background: rgba(22, 141, 243, .08);
  font-size: 12px;
  font-weight: 650;
}

.platform-hero__caption {
  position: relative;
  z-index: 2;
  margin: 21px auto 0;
  color: #77756f;
  font-size: 13px;
  text-align: center;
}

.platform-trust {
  padding: 42px 0;
  color: #64666a;
  border-bottom: 1px solid var(--platform-line);
  background: #f5f4f1;
}

.platform-trust .platform-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.platform-trust .platform-shell > span {
  color: #808287;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .13em;
}

.platform-trust .platform-shell > div {
  display: flex;
  gap: clamp(26px, 5vw, 60px);
}

.platform-trust b {
  color: #4e5054;
  font-size: 14px;
  font-weight: 590;
}

.platform-section {
  padding: 150px 0;
}

.platform-heading {
  max-width: 790px;
  margin-bottom: 70px;
}

.platform-heading h2 {
  margin: 22px 0 20px;
  color: #09090a;
  font-size: clamp(54px, 6vw, 78px);
  font-weight: 620;
  letter-spacing: -.068em;
  line-height: .94;
}

.platform-heading p {
  max-width: 680px;
  margin: 0;
  color: #67696e;
  font-size: 18px;
  line-height: 1.62;
}

.platform-heading--dark .platform-label { color: #7e858e; }
.platform-heading--dark h2 { color: #f2f3f5; }
.platform-heading--dark p { color: #949aa3; }

.platform-bento-section {
  background: #f4f3ef;
}

.platform-bento {
  display: grid;
  grid-auto-rows: 292px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.bento-card {
  position: relative;
  padding: 30px;
  overflow: hidden;
  border: 1px solid rgba(17, 18, 20, .075);
  border-radius: 28px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 16px 45px rgba(33, 28, 23, .035), inset 0 1px rgba(255, 255, 255, .75);
}

.bento-card > span,
.bento-heading span {
  color: #73767b;
  font-size: 12px;
  font-weight: 710;
  letter-spacing: .12em;
}

.bento-performance { grid-column: span 8; grid-row: span 2; }
.bento-losses { grid-column: span 4; }
.bento-prediction { grid-column: span 4; }
.bento-diagnosis { grid-column: span 6; }
.bento-impact { grid-column: span 4; }
.bento-priority { grid-column: span 2; color: #f3f4f6; background: #141619; }

.bento-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.bento-heading h3 {
  margin: 7px 0 0;
  color: #18191b;
  font-size: 23px;
  font-weight: 620;
  letter-spacing: -.035em;
}

.bento-heading em {
  padding: 6px 9px;
  color: #16865b;
  border: 1px solid rgba(28, 157, 105, .16);
  border-radius: 999px;
  background: rgba(28, 157, 105, .055);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.bento-metric {
  display: block;
  margin-top: 52px;
  color: #111214;
  font-size: 58px;
  font-weight: 620;
  letter-spacing: -.06em;
}

.bento-metric small,
.bento-losses strong small,
.bento-impact strong small {
  color: #73767b;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: 0;
}

.bento-performance svg {
  display: block;
  width: 100%;
  height: 260px;
  margin-top: 44px;
}

.bento-grid-lines path { fill: none; stroke: rgba(17, 18, 20, .07); stroke-width: 1; }
.bento-area { fill: url(#bentoFill); }
.bento-expected { fill: none; stroke: #a4a7aa; stroke-width: 2; stroke-dasharray: 7 7; }
.bento-actual { fill: none; stroke: #168df3; stroke-width: 3; }

.bento-axis {
  display: flex;
  justify-content: space-between;
  color: #8b8d91;
  font-size: 12px;
}

.bento-losses,
.bento-prediction,
.bento-diagnosis,
.bento-impact,
.bento-priority {
  display: flex;
  flex-direction: column;
}

.bento-losses strong,
.bento-impact strong {
  margin-top: auto;
  color: #111214;
  font-size: 44px;
  font-weight: 620;
  letter-spacing: -.055em;
}

.bento-card > p {
  max-width: 330px;
  margin: 12px 0 0;
  color: #73767b;
  font-size: 14px;
  line-height: 1.55;
}

.bento-loss-bar {
  height: 5px;
  margin-top: 23px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e1dd;
}

.bento-loss-bar i {
  display: block;
  width: 64%;
  height: 100%;
  border-radius: inherit;
  background: #ff9d42;
}

.bento-probability {
  display: flex;
  margin-top: auto;
  align-items: center;
  gap: 20px;
}

.bento-probability strong {
  color: #111214;
  font-size: 48px;
  font-weight: 620;
  letter-spacing: -.055em;
}

.bento-probability i {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e1dd;
}

.bento-probability i::after {
  display: block;
  width: var(--probability);
  height: 100%;
  content: "";
  border-radius: inherit;
  background: #168df3;
}

.bento-prediction h3 {
  margin: 18px 0 0;
  color: #202124;
  font-size: 19px;
  font-weight: 620;
}

.diagnostic-path {
  display: flex;
  margin-top: auto;
  align-items: center;
  gap: 14px;
}

.diagnostic-path b {
  padding: 12px 14px;
  color: #4a4c50;
  border: 1px solid rgba(17, 18, 20, .08);
  border-radius: 10px;
  background: rgba(255, 255, 255, .54);
  font-size: 13px;
  font-weight: 620;
}

.diagnostic-path b.is-cause {
  color: #875018;
  border-color: rgba(206, 129, 46, .18);
  background: rgba(255, 160, 63, .08);
}

.diagnostic-path i {
  color: #a0a2a6;
  font-style: normal;
}

.bento-impact .impact-spark {
  display: flex;
  height: 58px;
  margin-top: 24px;
  align-items: flex-end;
  gap: 6px;
}

.impact-spark i {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: #d8eafe;
}

.impact-spark i:nth-child(1) { height: 28%; }
.impact-spark i:nth-child(2) { height: 42%; }
.impact-spark i:nth-child(3) { height: 38%; }
.impact-spark i:nth-child(4) { height: 58%; }
.impact-spark i:nth-child(5) { height: 70%; }
.impact-spark i:nth-child(6) { height: 64%; }
.impact-spark i:nth-child(7) { height: 82%; }
.impact-spark i:nth-child(8) { height: 100%; background: #168df3; }

.bento-priority > span { color: #858c96; }
.bento-priority > strong { margin-top: auto; color: #ffad57; font-size: 35px; font-weight: 700; letter-spacing: -.04em; }
.bento-priority > p { color: #8b929c; }
.bento-priority > div { display: flex; margin-top: 20px; gap: 5px; }
.bento-priority > div i { width: 100%; height: 5px; border-radius: 999px; background: #ff9d42; }
.bento-priority > div i:last-child { opacity: .22; }

.platform-lifecycle {
  min-height: 150vh;
  color: #f2f3f5;
  background: var(--platform-dark);
}

.platform-lifecycle__sticky {
  position: sticky;
  top: 0;
  display: flex;
  min-height: 100vh;
  padding: 118px 0 100px;
  align-items: center;
}

.platform-pipeline {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  border: 1px solid var(--platform-dark-line);
  border-radius: 24px;
  background: #17191c;
}

.platform-pipeline::before {
  position: absolute;
  z-index: 0;
  top: 75px;
  right: 6%;
  left: 6%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #3da7ff, #777e88 48%, #43d89a);
}

.platform-pipeline > div {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 210px;
  padding: 40px 18px 30px;
  align-items: center;
  flex-direction: column;
  border-right: 1px solid rgba(255, 255, 255, .07);
  text-align: center;
}

.platform-pipeline > div:last-child { border-right: 0; }

.platform-pipeline i {
  display: grid;
  width: 35px;
  height: 35px;
  margin-bottom: 35px;
  place-items: center;
  color: #9dcfff;
  border: 1px solid rgba(61, 167, 255, .42);
  border-radius: 50%;
  background: #172b3c;
  box-shadow: 0 0 0 7px #17191c;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.platform-pipeline > div:nth-last-child(-n+2) i {
  color: #77e2b6;
  border-color: rgba(67, 216, 154, .42);
  background: #163129;
}

.platform-pipeline strong {
  color: #eef0f3;
  font-size: 16px;
  font-weight: 620;
}

.platform-pipeline span {
  margin-top: 9px;
  color: #7f8690;
  font-size: 12px;
  line-height: 1.45;
}

.platform-loop-note {
  display: flex;
  margin-top: 25px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #717984;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .09em;
}

.platform-loop-note i {
  width: 44px;
  height: 1px;
  background: #3d4249;
}

.platform-loop-note b {
  color: #4dafff;
  font-size: 18px;
}

.platform-diagnostic-section {
  padding-top: 80px;
  color: #f2f3f5;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: var(--platform-dark);
}

.diagnostic-console {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 30px;
  background: #181a1d;
  box-shadow: 0 45px 100px rgba(0, 0, 0, .25);
}

.diagnostic-console__header {
  display: flex;
  min-height: 145px;
  padding: 34px 40px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.diagnostic-console__header > div:first-child {
  display: grid;
}

.diagnostic-console__header span,
.diagnostic-output span,
.diagnostic-priority span,
.portfolio-summary > span,
.portfolio-summary > div > span,
.sunalytiq-panel__asset span {
  color: #7c838d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.diagnostic-console__header h3 {
  margin: 7px 0 0;
  color: #f2f4f6;
  font-size: 34px;
  font-weight: 620;
  letter-spacing: -.045em;
}

.diagnostic-console__header p {
  margin: 5px 0 0;
  color: #7d848e;
  font-size: 14px;
}

.diagnostic-badge {
  display: flex;
  min-height: 36px;
  padding: 0 13px;
  align-items: center;
  gap: 9px;
  color: #ffc27d;
  border: 1px solid rgba(255, 163, 63, .18);
  border-radius: 999px;
  background: rgba(255, 163, 63, .065);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.diagnostic-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9f3d;
  box-shadow: 0 0 14px rgba(255, 159, 61, .55);
}

.diagnostic-console__body {
  display: grid;
  min-height: 470px;
  grid-template-columns: .88fr 1.12fr;
}

.diagnostic-output {
  display: grid;
  padding: 44px 40px;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 34px;
  border-right: 1px solid rgba(255, 255, 255, .08);
}

.diagnostic-output > div:not(.diagnostic-bars) {
  display: grid;
}

.diagnostic-output strong {
  margin-top: 12px;
  color: #f1f3f5;
  font-size: 46px;
  font-weight: 620;
  letter-spacing: -.055em;
}

.diagnostic-output strong small {
  color: #9299a2;
  font-size: 15px;
  font-weight: 600;
}

.diagnostic-output .diagnostic-delta strong { color: #ffad57; }

.diagnostic-bars {
  position: relative;
  display: grid;
  padding-top: 22px;
  grid-column: 1 / -1;
  gap: 13px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.diagnostic-bars i {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: #3b4149;
}

.diagnostic-bars i.actual {
  width: 87.5%;
  background: linear-gradient(90deg, #168df3, #44aafa);
}

.diagnostic-bars span {
  color: #838a94;
  font-size: 13px;
  letter-spacing: 0;
}

.diagnostic-findings {
  display: grid;
  padding: 30px 40px 40px;
  grid-template-columns: minmax(0, 1fr) 155px;
  gap: 38px;
}

.diagnostic-findings dl {
  margin: 0;
}

.diagnostic-findings dl div {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.diagnostic-findings dt {
  color: #818893;
  font-size: 14px;
}

.diagnostic-findings dd {
  max-width: 280px;
  margin: 0;
  color: #e2e5e9;
  font-size: 15px;
  font-weight: 620;
  text-align: right;
}

.diagnostic-priority {
  display: flex;
  min-height: 220px;
  padding: 24px;
  align-self: center;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255, 164, 66, .16);
  border-radius: 20px;
  background: rgba(255, 164, 66, .045);
  text-align: center;
}

.diagnostic-priority strong {
  margin: 16px 0 6px;
  color: #ffac52;
  font-size: 36px;
  letter-spacing: -.045em;
}

.diagnostic-priority small {
  color: #8c929a;
  font-size: 12px;
}

.diagnostic-console__footer {
  display: flex;
  min-height: 78px;
  padding: 0 40px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #15171a;
}

.diagnostic-console__footer > span {
  color: #747b85;
  font-size: 13px;
}

.diagnostic-console__footer a,
.sunalytiq-panel > a {
  display: inline-flex;
  min-height: 42px;
  padding: 0 16px;
  align-items: center;
  gap: 18px;
  color: #eff7ff;
  border: 1px solid rgba(55, 163, 255, .2);
  border-radius: 999px;
  background: rgba(22, 141, 243, .1);
  font-size: 13px;
  font-weight: 650;
}

.platform-portfolio-section {
  background: #f3f2ee;
}

.portfolio-visual {
  display: grid;
  overflow: hidden;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
  border: 1px solid rgba(17, 18, 20, .09);
  border-radius: 30px;
  background: rgba(255, 255, 255, .56);
  box-shadow: 0 35px 80px rgba(32, 27, 22, .06);
}

.portfolio-list {
  padding: 36px 40px 26px;
  border-right: 1px solid rgba(17, 18, 20, .08);
}

.portfolio-list__header {
  display: flex;
  min-height: 80px;
  align-items: flex-start;
  justify-content: space-between;
}

.portfolio-list__header > div {
  display: grid;
}

.portfolio-list__header span {
  color: #777a7e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.portfolio-list__header strong {
  margin-top: 8px;
  color: #111214;
  font-size: 25px;
  font-weight: 630;
  letter-spacing: -.04em;
}

.portfolio-list__header em {
  padding: 7px 10px;
  color: #66696d;
  border: 1px solid rgba(17, 18, 20, .09);
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
}

.portfolio-row {
  display: grid;
  min-height: 76px;
  align-items: center;
  grid-template-columns: 10px minmax(0, 1fr) 72px 80px;
  gap: 15px;
  border-top: 1px solid rgba(17, 18, 20, .075);
}

.portfolio-row > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9d42;
}

.portfolio-row > i.healthy { background: #2ecb88; }

.portfolio-row > div {
  display: grid;
}

.portfolio-row strong {
  color: #292a2d;
  font-size: 15px;
  font-weight: 620;
}

.portfolio-row span {
  color: #898b8f;
  font-size: 12px;
}

.portfolio-row > b {
  color: #313236;
  font-size: 16px;
  text-align: right;
}

.portfolio-row > em {
  color: #488d6e;
  font-size: 12px;
  font-style: normal;
  text-align: right;
}

.portfolio-row.is-warning > em { color: #b56d22; }

.portfolio-summary {
  display: flex;
  padding: 44px 38px;
  flex-direction: column;
  background: #17191b;
}

.portfolio-summary > strong {
  margin: 22px 0 12px;
  color: #f3f4f5;
  font-size: 50px;
  font-weight: 620;
  letter-spacing: -.06em;
}

.portfolio-summary > p {
  margin: 0;
  color: #858b94;
  font-size: 14px;
  line-height: 1.58;
}

.portfolio-summary > div:not(.portfolio-ring) {
  display: grid;
  margin-top: 42px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.portfolio-summary > div > b {
  margin-top: 10px;
  color: #f1f3f5;
  font-size: 31px;
  font-weight: 620;
}

.portfolio-summary > div > b small {
  color: #767e88;
  font-size: 14px;
}

.portfolio-ring {
  position: relative;
  display: grid;
  width: 145px;
  height: 145px;
  margin-top: auto;
  align-self: center;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(#2c9fff 0 96.8%, #292d32 96.8% 100%);
}

.portfolio-ring::after {
  position: absolute;
  width: 124px;
  height: 124px;
  content: "";
  border-radius: 50%;
  background: #17191b;
}

.portfolio-ring > span {
  z-index: 1;
  display: grid;
  color: #7e858e;
  font-size: 12px;
  text-align: center;
}

.portfolio-ring > span b {
  color: #f2f4f6;
  font-size: 24px;
}

.platform-comparison-section {
  background: #e9e8e4;
}

.monitoring-comparison {
  display: grid;
  align-items: stretch;
  grid-template-columns: .72fr 1.28fr;
  gap: 16px;
}

.traditional-panel,
.sunalytiq-panel {
  min-height: 600px;
  padding: 42px;
  border-radius: 28px;
}

.traditional-panel {
  color: #383a3e;
  border: 1px solid rgba(17, 18, 20, .08);
  background: rgba(255, 255, 255, .5);
}

.traditional-panel > span,
.sunalytiq-panel__top > span {
  color: #777a7f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
}

.traditional-panel > div {
  display: flex;
  margin-top: 180px;
  align-items: center;
  gap: 18px;
}

.traditional-panel > div > i {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  color: #817260;
  border: 1px solid rgba(17, 18, 20, .1);
  border-radius: 50%;
  font-style: normal;
  font-weight: 700;
}

.traditional-panel p {
  display: grid;
  margin: 0;
  color: #777a7f;
  font-size: 15px;
}

.traditional-panel p strong {
  color: #2b2c2f;
  font-size: 21px;
  font-weight: 620;
}

.traditional-panel > small {
  display: block;
  margin-top: 26px;
  color: #989a9d;
  font-size: 12px;
}

.sunalytiq-panel {
  color: #e9edf2;
  background: #151719;
  box-shadow: 0 35px 80px rgba(0, 0, 0, .12);
}

.sunalytiq-panel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sunalytiq-panel__top > span { color: #939aa3; }

.sunalytiq-panel__top em {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffbd73;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.sunalytiq-panel__top em i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff9d42;
}

.sunalytiq-panel__asset {
  display: grid;
  margin: 40px 0 22px;
}

.sunalytiq-panel__asset strong {
  margin-top: 7px;
  color: #f0f2f4;
  font-size: 26px;
  font-weight: 620;
}

.sunalytiq-panel dl {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
}

.sunalytiq-panel dl div {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.sunalytiq-panel dt {
  color: #858c95;
  font-size: 13px;
}

.sunalytiq-panel dd {
  margin: 0;
  color: #e1e5e9;
  font-size: 14px;
  font-weight: 620;
  text-align: right;
}

.sunalytiq-panel dd.negative { color: #ffb465; }
.sunalytiq-panel dd.high { color: #ffad57; letter-spacing: .08em; }
.sunalytiq-panel > a { margin-top: 30px; }

.platform-resolution {
  padding: 145px 0;
  color: #f1f3f5;
  background: #111315;
}

.resolution-steps {
  display: flex;
  padding: 34px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 26px;
  background: #181a1d;
}

.resolution-steps > div {
  display: grid;
  min-width: 0;
  width: 100%;
  min-height: 145px;
  align-content: center;
}

.resolution-steps > b {
  margin: 0 22px;
  color: #505761;
  font-size: 20px;
}

.resolution-steps i {
  color: #66baff;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.resolution-steps strong {
  margin: 22px 0 8px;
  color: #edf0f3;
  font-size: 18px;
  font-weight: 620;
}

.resolution-steps span {
  max-width: 190px;
  color: #818893;
  font-size: 13px;
  line-height: 1.5;
}

.platform-cta {
  padding: 150px 0 165px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 214, 148, .3), transparent 35%),
    #f1f0ec;
}

.platform-cta h2 {
  margin: 26px auto 22px;
  color: #09090a;
  font-size: clamp(58px, 7vw, 88px);
  font-weight: 620;
  letter-spacing: -.07em;
  line-height: .93;
}

.platform-cta p {
  max-width: 620px;
  margin: 0 auto 35px;
  color: #686a6f;
  font-size: 18px;
}

@keyframes platformLineDraw {
  from { stroke-dasharray: 1100; stroke-dashoffset: 1100; }
  to { stroke-dasharray: 1100; stroke-dashoffset: 0; }
}

.platform-product-window.is-visible .platform-actual,
.bento-performance.is-visible .bento-actual {
  animation: platformLineDraw 1.7s cubic-bezier(.22, 1, .36, 1) both .25s;
}

@media (max-width: 1040px) {
  .platform-page .desktop-nav { gap: 20px; }
  .platform-product-window { min-height: 650px; }
  .platform-app { grid-template-columns: 165px minmax(0, 1fr); }
  .platform-app__sidebar { padding-inline: 11px; }
  .platform-overview-grid { grid-template-columns: minmax(0, 1fr) 245px; }
  .platform-pipeline { overflow-x: auto; grid-template-columns: repeat(8, 145px); scrollbar-width: none; }
  .platform-pipeline::-webkit-scrollbar { display: none; }
  .platform-pipeline::before { right: 70px; left: 70px; width: 1020px; }
  .bento-diagnosis { grid-column: span 7; }
  .bento-impact { grid-column: span 5; }
  .bento-priority { grid-column: span 12; }
  .bento-priority { display: grid; min-height: 190px; grid-template-columns: 1fr auto; align-items: center; }
  .bento-priority > strong { margin: 0; font-size: 46px; }
  .bento-priority > p, .bento-priority > div { display: none; }
  .diagnostic-findings { grid-template-columns: 1fr; }
  .diagnostic-priority { min-height: 120px; flex-direction: row; gap: 20px; }
  .diagnostic-priority strong { margin: 0; }
}

@media (max-width: 860px) {
  .platform-page .site-header { padding: 10px var(--gutter) 0; }
  .platform-page .nav-shell { width: 100%; height: 54px; padding: 0 10px 0 12px; border-radius: 16px; }
  .platform-page .menu-toggle { display: flex; border-color: rgba(17, 18, 20, .1); background: rgba(17, 18, 20, .025); }
  .platform-page .menu-toggle span { background: #18191b; }
  .platform-page .mobile-menu { top: 72px; right: var(--gutter); left: var(--gutter); color: #2c2e31; border-color: rgba(17, 18, 20, .08); background: rgba(255, 255, 255, .96); box-shadow: 0 30px 70px rgba(28, 24, 20, .15); pointer-events: auto; }
  .platform-page .mobile-menu > a:not(.button) { color: #4d4f53; }
  .platform-page .mobile-menu > a:not(.button):hover,
  .platform-page .mobile-menu > a[aria-current="page"] { color: #080809; background: rgba(17, 18, 20, .045); }

  /* Hero height follows its content instead of a fixed 1120px backstop. */
  .platform-hero { min-height: 0; padding-top: 124px; }
  .platform-hero h1 { margin: 20px auto 20px; font-size: clamp(40px, 7.4vw, 64px); letter-spacing: -.06em; }
  .platform-hero__copy > p { font-size: 17px; }
  .platform-actions { margin-top: 28px; }

  /* Product window: framed for the viewport rather than a 980px desktop capture
     cropped off both edges. The app chrome reflows — the sidebar becomes a
     horizontal section strip, the panels stack — so the UI stays legible. */
  .platform-product-window { width: min(100% - var(--gutter) * 2, 760px); max-width: none; min-height: 0; margin: 44px auto 0; translate: none; border-radius: 20px 20px 0 0; }
  .platform-browserbar { height: 36px; padding: 0 12px; }
  .platform-address { min-width: 0; max-width: 210px; min-height: 24px; padding: 0 12px; font-size: 11px; }
  .platform-browser-actions { display: none; }
  .platform-app { min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .platform-app__sidebar { padding: 8px 12px; flex-direction: row; align-items: center; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .075); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, #000 90%, transparent 100%); overscroll-behavior-inline: contain; }
  .platform-app__sidebar::-webkit-scrollbar { display: none; }
  .platform-app__sidebar > img,
  .platform-site-select,
  .platform-app__sync { display: none; }
  .platform-app__sidebar nav { margin-top: 0; flex: 0 0 auto; grid-auto-flow: column; gap: 4px; }
  .platform-app__sidebar nav span { min-height: 34px; padding: 0 11px; flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
  .platform-app__sidebar nav span.is-active { box-shadow: inset 0 -2px #1a95ff; }
  .platform-app__main { padding: 20px 16px 18px; }
  .platform-app__top h2 { font-size: 20px; }
  .platform-kpis { margin-top: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .platform-kpis article { min-height: 0; padding: 14px; }
  .platform-kpis article:first-child { grid-column: 1 / -1; }
  .platform-kpis strong { font-size: 24px; }
  .platform-overview-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .platform-chart-card, .platform-issue-card { min-height: 0; padding: 16px; }
  .platform-chart { height: auto; margin-top: 14px; padding-left: 38px; }
  .platform-chart svg { height: 190px; }
  .platform-axis { bottom: 26px; }
  .platform-chart-readout { top: 24px; left: auto; right: 4px; min-width: 0; padding: 9px 11px; }
  .platform-chart-readout strong { font-size: 15px; }
  .platform-issue { margin: 22px 0 14px; }
  .platform-hero__caption { margin-top: 16px; }

  .platform-trust .platform-shell { align-items: flex-start; flex-direction: column; gap: 18px; }
  .platform-trust .platform-shell > div { flex-wrap: wrap; gap: 12px 26px; }
  .platform-section { padding: var(--space-section) 0; }
  .platform-heading { margin-bottom: var(--space-block); }
  .platform-heading h2 { font-size: clamp(36px, 6.6vw, 58px); letter-spacing: -.055em; }
  .platform-heading p { font-size: 17px; }
  .platform-bento { grid-auto-rows: 280px; }
  .bento-performance { grid-column: span 12; grid-row: span 2; }
  .bento-losses, .bento-prediction { grid-column: span 6; }
  .bento-diagnosis, .bento-impact { grid-column: span 12; }
  .platform-lifecycle { min-height: auto; }
  .platform-lifecycle__sticky { position: relative; min-height: 0; padding: var(--space-section) 0; }
  .platform-loop-note { justify-content: flex-start; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .platform-loop-note::-webkit-scrollbar { display: none; }
  .diagnostic-console__body { grid-template-columns: 1fr; }
  .diagnostic-output { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .portfolio-visual { grid-template-columns: 1fr; }
  .portfolio-list { border-right: 0; border-bottom: 1px solid rgba(17, 18, 20, .08); }
  .portfolio-summary { min-height: 0; }
  .monitoring-comparison { grid-template-columns: 1fr; }
  .traditional-panel { min-height: 0; }
  .traditional-panel > div { margin-top: 64px; }
  .sunalytiq-panel { min-height: 0; }
  .resolution-steps { display: grid; grid-template-columns: 1fr; }
  .resolution-steps > div { min-height: 0; padding: 6px 0; }
  .resolution-steps > b { margin: 0; transform: rotate(90deg); justify-self: start; }
  .resolution-steps span { max-width: none; }
  .platform-resolution { padding: var(--space-section) 0; }
  .platform-cta { padding: var(--space-section) 0 calc(var(--space-section) + 12px); }
  .platform-cta h2 { font-size: clamp(38px, 7vw, 62px); letter-spacing: -.06em; }
  .platform-cta p { font-size: 17px; }
}

@media (max-width: 640px) {
  .platform-page .brand { width: 120px; }
  .platform-hero { padding-top: 108px; }
  .platform-hero h1 { margin: 16px auto 16px; font-size: clamp(34px, 9.4vw, 48px); line-height: .98; }
  .platform-hero h1 br { display: none; }
  .platform-hero__copy > p { font-size: 16px; }
  .platform-actions { margin-top: 24px; align-items: center; flex-direction: column; gap: 8px; }
  .platform-button { width: min(100%, 300px); min-height: 48px; }

  .platform-product-window { margin-top: 34px; border-radius: 18px 18px 0 0; }
  .platform-app__main { padding: 16px 13px 15px; }
  .platform-app__top h2 { font-size: 18px; }
  .platform-app__sidebar nav span b { display: none; }
  .platform-kpis { margin-top: 16px; }
  .platform-kpis strong { font-size: 22px; }
  .platform-chart svg { height: 165px; }
  .platform-hero__caption { display: none; }

  .platform-trust { padding-block: 30px; }
  .platform-trust .platform-shell > div { gap: 12px 22px; }
  .platform-heading h2 { font-size: clamp(31px, 8.4vw, 44px); }
  .platform-heading h2 br { display: none; }
  .platform-heading p { font-size: 16px; }

  /* Bento: one column, but each card keeps only as much height as it needs. */
  .platform-bento { display: grid; grid-auto-rows: auto; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .bento-card,
  .bento-performance,
  .bento-losses,
  .bento-prediction,
  .bento-diagnosis,
  .bento-impact,
  .bento-priority { min-height: 0; padding: 24px 22px; grid-column: 1; grid-row: auto; border-radius: 20px; }
  .bento-heading h3 { font-size: 20px; }
  .bento-metric { margin-top: 26px; font-size: 42px; }
  .bento-performance svg { height: 170px; margin-top: 22px; }
  .bento-losses strong, .bento-impact strong { margin-top: 26px; font-size: 34px; }
  .bento-probability { margin-top: 24px; gap: 14px; }
  .bento-probability strong { font-size: 36px; }
  .bento-card > p { max-width: none; font-size: 14px; }
  .diagnostic-path { margin-top: 24px; align-items: stretch; flex-direction: column; gap: 8px; }
  .diagnostic-path b { text-align: center; }
  .diagnostic-path i { transform: rotate(90deg); align-self: center; }
  .bento-impact .impact-spark { margin-top: 20px; }
  .bento-priority { display: flex; }
  .bento-priority > strong { margin-top: 26px; font-size: 30px; }

  .platform-lifecycle__sticky { padding: var(--space-section) 0; }
  /* Bleeds to the right edge so the horizontal scroll reads as intentional. */
  .platform-pipeline { margin-right: calc(var(--gutter) * -1); border-radius: 20px 0 0 20px; }
  .platform-loop-note { margin-top: 20px; font-size: 11px; }
  .platform-diagnostic-section { padding-top: 64px; }
  .diagnostic-console { border-radius: 20px; }
  .diagnostic-console__header { min-height: 0; padding: 24px 20px; align-items: flex-start; flex-direction: column; gap: 18px; }
  .diagnostic-console__header h3 { font-size: 26px; }
  .diagnostic-console__body { min-height: 0; }
  .diagnostic-output { padding: 26px 20px; gap: 22px 16px; }
  .diagnostic-output strong { margin-top: 8px; font-size: 30px; }
  .diagnostic-bars { padding-top: 18px; gap: 10px; }
  .diagnostic-bars i { height: 13px; }
  .diagnostic-findings { padding: 18px 20px 26px; gap: 20px; }
  .diagnostic-findings dl div { min-height: 0; align-items: flex-start; padding: 14px 0; flex-direction: column; gap: 5px; }
  .diagnostic-findings dd { max-width: none; text-align: left; }
  .diagnostic-priority { min-height: 0; padding: 20px; justify-content: center; }
  .diagnostic-priority strong { font-size: 30px; }
  .diagnostic-console__footer { min-height: 0; padding: 20px; align-items: flex-start; flex-direction: column; gap: 14px; }

  .portfolio-visual { border-radius: 22px; }
  .portfolio-list { padding: 24px 20px 16px; }
  .portfolio-list__header { min-height: 0; margin-bottom: 14px; }
  .portfolio-list__header strong { font-size: 22px; }
  /* The status word duplicates the colour dot; the percentage carries the row. */
  .portfolio-row { min-height: 66px; gap: 12px; grid-template-columns: 9px minmax(0, 1fr) auto; }
  .portfolio-row > em { display: none; }
  .portfolio-summary { min-height: 0; padding: 30px 22px; }
  .portfolio-summary > strong { margin: 16px 0 10px; font-size: 40px; }
  .portfolio-summary > div:not(.portfolio-ring) { margin-top: 28px; padding-top: 22px; }
  .portfolio-ring { width: 132px; height: 132px; margin-top: 30px; }
  .portfolio-ring::after { width: 113px; height: 113px; }

  .monitoring-comparison { gap: 10px; }
  .traditional-panel, .sunalytiq-panel { padding: 26px 22px; border-radius: 20px; }
  .traditional-panel > div { margin-top: 44px; gap: 14px; }
  .traditional-panel p strong { font-size: 19px; }
  .sunalytiq-panel__top { align-items: flex-start; flex-direction: column; gap: 14px; }
  .sunalytiq-panel__asset { margin: 28px 0 16px; }
  .sunalytiq-panel__asset strong { font-size: 22px; }
  .sunalytiq-panel dl { grid-template-columns: minmax(0, 1fr); }
  .sunalytiq-panel dl div { min-height: 52px; gap: 14px; }

  .resolution-steps { padding: 22px 20px; border-radius: 20px; }
  .platform-cta h2 { font-size: clamp(34px, 9vw, 50px); }
  .platform-cta h2 br { display: none; }
  .platform-cta p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .platform-product-window.is-visible .platform-actual,
  .bento-performance.is-visible .bento-actual {
    animation: none;
  }

  .platform-lifecycle__sticky {
    position: relative;
  }
}