/* Taste + Impeccable visual polish
   Direction: industrial brand first, digital platform second. */

:root {
  --blue: #0b6fe8;
  --cyan: #28a9d8;
  --violet: #125d9f;
  --magenta: #36a66a;
  --green: #36a66a;
  --ink: #071a2e;
  --navy: #061625;
  --mist: #f0f5f6;
  --muted: #506477;
  --line: rgba(7, 26, 46, .14);
  --yt-brand-blue: #0b6fe8;
  --yt-brand-cyan: #28a9d8;
  --yt-brand-green: #36a66a;
  --yt-deep-blue: #0a315b;
  --yt-media-radius: 72px;
  --yt-card-radius: 14px;
  --yt-ease-out: cubic-bezier(.16, 1, .3, 1);
  --yt-shadow-media: 0 28px 72px rgba(7, 42, 70, .17);
}

/* Keep the full homepage proposition inside the viewport below the shared navigation. */
.home-page .hero {
  height: calc(100svh - var(--nav-shell-height, 94px));
  min-height: 48rem;
}

/* Homepage capability rail: one grouped proof point beneath the primary actions. */
.home-page .hero-bottom {
  left: max(6vw, 58px);
  right: auto;
  bottom: clamp(2rem, 3.5vh, 2.75rem);
  width: min(46rem, calc(100vw - max(12vw, 116px)));
  margin: 0;
  padding: .5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  color: #fff;
  background: rgba(4, 18, 34, .9);
  border: 1px solid rgba(161, 217, 245, .28);
  border-radius: .75rem;
  font-size: 1rem;
}

.home-page .hero-bottom li {
  min-width: 0;
  min-height: 4.5rem;
  padding: .75rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.home-page .hero-bottom li + li {
  border-left: 1px solid rgba(161, 217, 245, .2);
}

.home-page .hero-bottom .hero-capability-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #64d6ef;
  background: rgba(40, 169, 216, .14);
  border-radius: .5rem;
}

.home-page .hero-bottom li:nth-child(2) .hero-capability-icon {
  color: #81b5ff;
  background: rgba(11, 111, 232, .18);
}

.home-page .hero-bottom li:nth-child(3) .hero-capability-icon {
  color: #78d69c;
  background: rgba(54, 166, 106, .16);
}

.home-page .hero-bottom .hero-capability-icon::before {
  content: none;
}

.home-page .hero-bottom svg {
  width: 1.35rem;
  height: 1.35rem;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .hero-bottom strong {
  font-size: .98rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .home-page .hero-bottom {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.75rem;
    width: auto;
    padding: .375rem;
  }

  .home-page .hero-bottom li {
    min-height: 4.75rem;
    padding: .625rem .25rem;
    flex-direction: column;
    justify-content: center;
    gap: .4rem;
  }

  .home-page .hero-bottom .hero-capability-icon {
    width: 2rem;
    height: 2rem;
    border-radius: .375rem;
  }

  .home-page .hero-bottom svg {
    width: 1.1rem;
    height: 1.1rem;
  }

  .home-page .hero-bottom strong {
    font-size: .875rem;
    line-height: 1.3;
    text-align: center;
  }
}

@media (max-width: 1000px) {
  .home-page .hero {
    height: calc(100svh - var(--nav-compact-height, 72px));
    min-height: 48rem;
  }
}

html {
  color-scheme: light;
  scrollbar-color: var(--yt-brand-blue) #dfe9ed;
  scrollbar-width: thin;
}

body {
  caret-color: var(--yt-brand-blue);
}

::selection {
  color: #fff;
  background: #075fc8;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #dfe9ed;
}

::-webkit-scrollbar-thumb {
  border: 2px solid #dfe9ed;
  border-radius: 999px;
  background: var(--yt-brand-blue);
}

/* One public footer component for every page. */
body > .site-footer[data-site-footer] {
  width: 100%;
  padding: 70px max(4.5vw, 42px) 28px;
  display: grid;
  grid-template-columns: 1.45fr repeat(3, minmax(150px, .75fr));
  gap: 56px;
  color: #fff;
  background: #030811;
}

body > .site-footer[data-site-footer] > img {
  width: 190px;
  height: auto;
  object-fit: contain;
  object-position: left top;
}

body > .site-footer[data-site-footer] > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: rgba(255, 255, 255, .62);
  font-size: 13px;
  line-height: 1.65;
}

body > .site-footer[data-site-footer] > div > span {
  margin-bottom: 8px;
  color: #70d4ff;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: .08em;
}

body > .site-footer[data-site-footer] a {
  width: fit-content;
  margin: 0;
  color: rgba(255, 255, 255, .68) !important;
  text-decoration: none;
  transition: color .2s ease;
}

body > .site-footer[data-site-footer] a:hover,
body > .site-footer[data-site-footer] a:focus-visible {
  color: #fff !important;
}

body > .site-footer[data-site-footer] .footer-bottom {
  grid-column: 1 / -1;
  margin: 28px 0 0 !important;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: rgba(255, 255, 255, .42);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11px;
  line-height: 1.7;
}

body > .site-footer[data-site-footer] .footer-legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

body > .site-footer[data-site-footer] .footer-filing {
  color: rgba(255, 255, 255, .42) !important;
  line-height: inherit;
}

body > .site-footer[data-site-footer] .footer-filing:hover,
body > .site-footer[data-site-footer] .footer-filing:focus-visible {
  color: rgba(255, 255, 255, .72) !important;
}

@media (max-width: 900px) {
  body > .site-footer[data-site-footer] {
    padding: 54px 20px 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 24px;
  }

  body > .site-footer[data-site-footer] > img {
    grid-column: 1 / -1;
    width: 176px;
  }

  body > .site-footer[data-site-footer] > div:last-of-type {
    grid-column: auto;
  }

  body > .site-footer[data-site-footer] .footer-bottom {
    display: grid;
    gap: 16px;
  }
}

@media (max-width: 540px) {
  body > .site-footer[data-site-footer] {
    grid-template-columns: 1fr;
  }

  body > .site-footer[data-site-footer] > img,
  body > .site-footer[data-site-footer] > div:last-of-type {
    grid-column: auto;
  }
}

/* Let the headline carry each section; repeated eyebrow labels fragmented the page. */
.eyebrow,
.kicker,
.cp-kicker,
.product-kicker,
.solution-kicker,
.campus-kicker,
.commercial-kicker,
.park-kicker {
  display: none;
}

:is(
  .hero h1,
  .section-title h2,
  .chain-copy h2,
  .scene-lead h2,
  .service-photo h2,
  .tech-title h2,
  .trust h2,
  .contact h2,
  .cp-hero-copy h1,
  .cp-section h2,
  .product-hero-copy h1,
  .path-heading h2,
  .delivery-title h2,
  .product-contact h2,
  .solution-hero-copy h1,
  .solution-title h2,
  .diagnosis-heading h2,
  .factory-contact h2
) {
  letter-spacing: -.03em;
  text-wrap: balance;
}

.hero h1 {
  font-size: clamp(64px, 6.2vw, 96px);
}

:is(.section-title h2, .chain-copy h2, .scene-lead h2, .tech-title h2, .trust h2, .contact h2) {
  font-size: clamp(48px, 4.9vw, 78px);
}

:is(.cp-hero-copy h1, .product-hero-copy h1, .solution-hero-copy h1) {
  font-size: clamp(50px, 5.5vw, 88px);
}

:is(
  .hero-copy > p,
  .chain-copy > p,
  .hardware-copy > p,
  .platform-copy > p,
  .cp-hero-copy > p,
  .cp-lead,
  .product-hero-copy > p,
  .solution-hero-copy > p,
  .contact aside p,
  .product-contact aside p,
  .factory-contact aside p
) {
  max-width: 70ch;
}

.primary-nav a,
.corporate-nav a,
.button,
.cp-button,
.header-cta,
button,
input,
textarea,
select {
  transition:
    color .22s var(--yt-ease-out),
    background-color .22s var(--yt-ease-out),
    border-color .22s var(--yt-ease-out),
    box-shadow .22s var(--yt-ease-out),
    transform .22s var(--yt-ease-out);
}

:is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid #25a8dc;
  outline-offset: 4px;
}

:is(.button, .cp-button) {
  border-radius: 6px;
}

:is(.button, .cp-button):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(7, 66, 120, .18);
}

:is(.button, .cp-button):active {
  transform: translateY(1px) scale(.99);
}

:is(.button, .cp-button)[aria-disabled="true"],
:is(.button, .cp-button):disabled {
  opacity: .48;
  pointer-events: none;
}

main p a:not(.button):not(.cp-button) {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
}

.back-to-top {
  border: 0;
  border-radius: 999px;
  background: #0a315b;
  box-shadow: 0 12px 30px rgba(3, 20, 36, .24);
}

/* One authored arrival moment, limited to the first-screen media. */
@keyframes yt-hero-settle {
  from { opacity: .88; filter: saturate(.82) blur(4px); transform: scale(1.045); }
  to { opacity: 1; filter: saturate(1) blur(0); transform: scale(1.025); }
}

.hero-image {
  animation: yt-hero-settle .9s var(--yt-ease-out) both;
}

/* Brand color world: blue + green, restrained cyan, no generic purple aurora. */
.hero-glow,
.chain-glow,
.tech-glow,
.contact-glow,
.product-hero-aurora,
.path-aurora,
.safety-aurora,
.contact-mesh,
.solution-hero-mesh,
.diagnosis-mesh,
.boundary-mesh,
.contact-aurora {
  background: conic-gradient(
    from 215deg,
    rgba(11, 111, 232, .78),
    rgba(40, 169, 216, .55),
    rgba(54, 166, 106, .42),
    rgba(10, 49, 91, .62),
    rgba(11, 111, 232, .78)
  );
  opacity: .3;
}

.hero-glow {
  opacity: .34;
}

.chain,
.operating-path,
.diagnosis-path {
  background: linear-gradient(145deg, #061625 0%, #0a315b 56%, #0b4d69 100%);
}

.technology,
.safety-section,
.factory-boundary {
  background: linear-gradient(145deg, #04111e 0%, #082b50 64%, #0a4b61 100%);
}

.contact,
.product-contact,
.factory-contact {
  background: linear-gradient(132deg, #075fc8 0%, #0b6fe8 48%, #187c82 78%, #2b9662 100%);
}

.scene-mall {
  background: linear-gradient(135deg, #0b6fe8, #167f9c 64%, #2c9a68);
}

/* Industry markers remain readable over four different photographic scenes. */
.scene > div > .scene-label {
  display: inline-flex;
  width: fit-content;
  min-height: 2.5rem;
  padding: .55rem .78rem .55rem .62rem;
  align-items: center;
  gap: .55rem;
  color: #b9efff;
  background: #082844;
  box-shadow: 0 .75rem 1.75rem rgba(2, 12, 24, .28);
  font-size: clamp(.875rem, .72rem + .22vw, .95rem);
  font-weight: 650;
  letter-spacing: .025em;
  line-height: 1.2;
}

.scene-label svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: none;
  stroke: #5ed8ff;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene-label strong {
  color: inherit;
  font: inherit;
}

.hardware-stage {
  background: linear-gradient(145deg, #f7fbfc, #dceef5 55%, #d9eee5);
}

.hardware-stage::after {
  background: linear-gradient(135deg, rgba(40, 169, 216, .3), rgba(54, 166, 106, .32));
  opacity: .7;
}

.platform-screen,
.tech-dashboard,
.topology-board,
.report-board,
.reconcile-board,
.factory-workbench,
.mobile-report-stage {
  background:
    radial-gradient(circle at 48% 42%, rgba(40, 169, 216, .2), transparent 28%),
    linear-gradient(145deg, #061625 0%, #0b3f73 62%, #14727c 100%);
}

.cap-dark,
.cap-control,
.factory-cap-row.cap-reverse {
  background:
    radial-gradient(circle at 18% 24%, rgba(40, 169, 216, .14), transparent 28%),
    linear-gradient(145deg, #04111e, #0a315b 64%, #0d5968);
}

.chain-steps::before,
.path-track::before,
.diagnosis-spine::before,
.topo-line {
  background: linear-gradient(180deg, #28a9d8, #0b6fe8 52%, #36a66a);
}

.detail-location,
.report-overview {
  background: linear-gradient(135deg, #0b6fe8, #167f9c 68%, #2e9967);
}

/* A consistent industrial media cut: one signature corner, not many unrelated shapes. */
:is(
  .needs-photo,
  .chain-photo,
  .hardware-stage,
  .platform-screen,
  .service-photo,
  .tech-dashboard,
  .cp-hero-visual,
  .product-hero-media,
  .topology-board,
  .report-board,
  .solution-hero-media,
  .reconcile-board,
  .factory-workbench
) {
  border-radius: 0 var(--yt-media-radius) 0 0;
  box-shadow: var(--yt-shadow-media);
}

/* Keep grids readable without making every item look like the same template card. */
.cap-grid,
.about-principles {
  grid-template-columns: 1.12fr .94fr .94fr;
}

:is(.cap-card, .about-principles article, .service-stage article) {
  border: 0;
  border-radius: var(--yt-card-radius);
  box-shadow: none;
}

.cap-grid > :nth-child(3n + 1),
.about-principles > :nth-child(3n + 1) {
  background: #eaf2f5;
}

.cap-grid > :nth-child(3n + 2),
.about-principles > :nth-child(3n + 2) {
  background: #edf5f0;
}

.cap-grid > :nth-child(3n),
.about-principles > :nth-child(3n) {
  background: #f4f6f5;
}

.service-stage {
  grid-template-columns: minmax(0, 1.16fr) minmax(18rem, .84fr);
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

.service-stage-photo {
  position: relative;
  grid-row: 1 / 3;
  min-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: 0 var(--yt-media-radius) 0 0;
  box-shadow: var(--yt-shadow-media);
}

.service-stage-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 17, 30, .03) 48%, rgba(4, 17, 30, .82));
}

.service-stage-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% center;
}

.service-stage-photo figcaption {
  position: absolute;
  z-index: 1;
  right: 36px;
  bottom: 32px;
  left: 36px;
  max-width: 34ch;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  line-height: 1.7;
}

.service-stage article {
  min-height: 0;
  padding: 30px;
}

.service-stage article h3 {
  margin: 54px 0 14px;
}

:is(.cap-card, .about-principles article, .service-stage article):hover {
  transform: translateY(-3px);
}

.cp-hero-visual,
.hero-interface {
  background: #eaf1f3;
}

.ui-head,
.screen-head,
.topology-head {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  :root {
    --yt-media-radius: 44px;
  }

  .hero h1 {
    font-size: clamp(44px, 13vw, 58px);
  }

  :is(.section-title h2, .chain-copy h2, .scene-lead h2, .tech-title h2, .trust h2, .contact h2) {
    font-size: clamp(36px, 10.5vw, 48px);
  }

  :is(.cp-hero-copy h1, .product-hero-copy h1, .solution-hero-copy h1) {
    font-size: clamp(40px, 12vw, 54px);
  }

  .cap-grid,
  .about-principles {
    grid-template-columns: 1fr;
  }

  .service-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .service-stage-photo {
    grid-row: auto;
    min-height: 420px;
  }

  .service-stage article {
    min-height: 230px;
  }

  :is(.button, .cp-button) {
    border-radius: 5px;
  }
}

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

/* Comfortable heading system
   The site speaks with hierarchy and weight, not oversized type in narrow columns. */
:is(
  .hero h1,
  .product-hero h1,
  .cp-hero-copy h1,
  .solution-hero h1,
  .campus-hero h1,
  .commercial-hero h1,
  .park-hero h1,
  .field-hero h1
) {
  max-inline-size: 18ch;
  font-size: var(--yt-type-hero);
  line-height: 1.08;
  letter-spacing: -.03em;
}

:is(
  .section-title h2,
  .chain-copy h2,
  .scene-lead h2,
  .service-photo h2,
  .tech-title h2,
  .trust h2,
  .contact h2,
  .product-title h2,
  .path-heading h2,
  .capability-lead h2,
  .delivery-title h2,
  .safety-copy h2,
  .faq-title h2,
  .product-contact h2,
  .cp-title,
  .feature-copy h2,
  .contact-panel h2,
  .solution-title h2,
  .diagnosis-heading h2,
  .capability-intro h2,
  .delivery-heading h2,
  .factory-boundary h2,
  .factory-faq > header h2,
  .factory-contact h2,
  .campus-heading h2,
  .after-hours-copy h2,
  .mobile-heading h2,
  .capability-title h2,
  .campus-boundary h2,
  .campus-contact h2,
  .commercial-heading h2,
  .closing-copy h2,
  .commercial-contact h2,
  .park-heading h2,
  .operations-copy h2,
  .park-contact h2,
  .field-heading h2,
  .boundary-title h2,
  .field-contact h2
) {
  max-inline-size: 22ch;
  font-size: var(--yt-type-section);
  line-height: var(--yt-leading-display);
  letter-spacing: -.025em;
  text-wrap: balance;
}

body.corporate-page .cp-title {
  max-inline-size: 22ch;
}

@media (min-width: 901px) {
  body.corporate-page .about-capability-title,
  body.corporate-page .about-trust-title {
    max-inline-size: none;
    white-space: nowrap;
  }
}

/* About hero: the unused right side becomes relevant field context. */
.about-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(7, 27, 51, .98) 0%, rgba(7, 27, 51, .94) 39%, rgba(7, 27, 51, .58) 68%, rgba(7, 27, 51, .74) 100%),
    url("./assets/hero-industrial.webp") center 48% / cover no-repeat;
}

.about-hero .cp-wrap {
  position: relative;
  z-index: 1;
}

@media (min-width: 901px) {
  body.corporate-page .overview-intro,
  body.corporate-page .service-promise {
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    gap: clamp(3rem, 6vw, 6.5rem);
    align-items: end;
  }

  body.product-page :is(.product-title, .path-heading, .delivery-title, .safety-copy),
  body.manufacturing-page :is(.solution-title, .diagnosis-heading, .delivery-heading),
  body.campus-page .split-heading,
  body.commercial-page .commercial-heading,
  body.park-page .park-heading,
  body.special-page .field-heading {
    grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: end;
  }

  body.corporate-page .overview-intro .cp-title,
  body.corporate-page .service-promise .cp-title {
    max-inline-size: 100%;
  }

  :is(
    .about-hero .cp-title,
    body.corporate-page .overview-intro .cp-title,
    body.corporate-page .service-promise .cp-title,
    body.product-page :is(.product-title, .path-heading, .delivery-title, .safety-copy) h2,
    body.manufacturing-page :is(.solution-title, .diagnosis-heading, .delivery-heading) h2,
    body.campus-page .split-heading h2,
    body.commercial-page .commercial-heading h2,
    body.park-page .park-heading h2,
    body.special-page .field-heading h2
  ) br {
    display: none;
  }

  :is(
    body.product-page :is(.product-title, .path-heading, .delivery-title, .safety-copy) h2,
    body.manufacturing-page :is(.solution-title, .diagnosis-heading, .delivery-heading) h2,
    body.campus-page .split-heading h2,
    body.commercial-page .commercial-heading h2,
    body.park-page .park-heading h2,
    body.special-page .field-heading h2
  ) {
    max-inline-size: 100%;
    font-size: clamp(2.375rem, 3.4vw, 3.25rem);
    line-height: 1.14;
  }

  :is(
    body.product-page :is(.product-title, .path-heading, .delivery-title, .safety-copy) h2,
    body.manufacturing-page :is(.solution-title, .diagnosis-heading, .delivery-heading) h2
  ) {
    font-size: clamp(2.25rem, 3vw, 2.875rem);
  }

  body.corporate-page .overview-intro > aside,
  body.corporate-page .service-promise > .promise-note,
  body.product-page :is(.product-title, .path-heading, .delivery-title, .safety-copy) > p:last-child,
  body.manufacturing-page :is(.solution-title, .diagnosis-heading, .delivery-heading) > p:last-child,
  body.campus-page .split-heading > p,
  body.commercial-page .commercial-heading > p,
  body.park-page .park-heading > p,
  body.special-page .field-heading > p {
    max-inline-size: 100%;
    margin: 0;
    padding-top: 0;
    font-size: 1rem;
    line-height: 1.75;
  }

  body.corporate-page .service-promise > .promise-note {
    padding-left: 1.25rem;
    border-left-width: 1px;
  }

  body.product-page .product-title:not(:has(> h2 + p)) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.product-page .product-title:not(:has(> h2 + p)) h2 {
    font-size: clamp(2.25rem, 3vw, 3rem);
    text-wrap: pretty;
  }
}

@media (max-width: 900px) {
  .about-hero {
    background: #071b33;
  }
}

/* Homepage hardware is a unique system diagram, reserving the product photograph for its dedicated page. */
.home-hardware-assembly {
  position: absolute;
  z-index: 2;
  inset: 16% 10% 17%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.65rem, 1.4vw, 1.25rem);
  align-items: center;
}

.home-hardware-assembly::before {
  position: absolute;
  top: 50%;
  right: 12%;
  left: 12%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, #68b842, #2f8bdc);
}

.home-device {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  aspect-ratio: .72;
  padding: clamp(1rem, 2.2vw, 1.75rem);
  color: #fff;
  background: #0b2948;
  box-shadow: 0 1.4rem 3rem rgba(19, 54, 93, .18);
}

.home-device::before {
  position: absolute;
  top: 1.2rem;
  left: 1.2rem;
  width: 1.4rem;
  height: 1.4rem;
  content: "";
  border: 1px solid rgba(122, 212, 239, .68);
}

.home-device b,
.home-device small {
  display: block;
}

.home-device b {
  margin-bottom: .45rem;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  font-weight: 650;
}

.home-device small {
  color: rgba(226, 238, 247, .66);
  font-size: clamp(.55rem, .8vw, .7rem);
  line-height: 1.5;
}

.home-device.device-edge {
  background: #185b9b;
  transform: translateY(-7%);
}

.home-device.device-platform {
  background: #315d50;
}

/* Solution overview owns one panorama; its sector index uses graphic fields instead of detail-page photographs. */
.solution-index .industry-card[class*="sector-"] {
  --sector-bg: #0d3152;
  --sector-accent: #56bde6;
  background: var(--sector-bg);
  isolation: isolate;
}

.solution-index .industry-card[class*="sector-"]::before {
  position: absolute;
  z-index: -1;
  top: -22%;
  right: -8%;
  width: 68%;
  aspect-ratio: 1;
  content: "";
  border: 1px solid color-mix(in srgb, var(--sector-accent) 48%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 3rem color-mix(in srgb, var(--sector-accent) 7%, transparent), 0 0 0 7rem color-mix(in srgb, var(--sector-accent) 4%, transparent);
  transition: transform .4s ease;
}

.solution-index .industry-card[class*="sector-"]::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, transparent 45%, color-mix(in srgb, var(--sector-accent) 15%, transparent) 45.2%, transparent 45.5%);
}

.solution-index .industry-card[class*="sector-"]:hover::before {
  transform: translate(-4%, 4%) scale(1.04);
}

.solution-index .industry-card.sector-manufacturing { --sector-bg: #0c2946; --sector-accent: #49b8e3; }
.solution-index .industry-card.sector-campus { --sector-bg: #164b45; --sector-accent: #78c65d; }
.solution-index .industry-card.sector-commercial { --sector-bg: #24416b; --sector-accent: #77a8ff; }
.solution-index .industry-card.sector-park { --sector-bg: #12394d; --sector-accent: #56c4c5; }
.solution-index .industry-card.sector-energy { --sector-bg: #315542; --sector-accent: #b2d65b; }

.solution-index .cp-hero-copy h1 span,
.solution-index .overview-intro .cp-title span {
  display: block;
  white-space: nowrap;
}

.solution-index .cp-hero-copy h1 {
  max-width: none;
  font-size: clamp(2.25rem, 4.2vw, 3.75rem);
}

.solution-index .overview-intro .cp-title {
  max-width: none;
  font-size: clamp(2.25rem, 3.5vw, 3.25rem);
}

.solution-index .industry-card.sector-manufacturing::before {
  top: 12%;
  right: 8%;
  width: 42%;
  height: 58%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: 2rem 2rem 0 color-mix(in srgb, var(--sector-accent) 8%, transparent), 4rem 4rem 0 color-mix(in srgb, var(--sector-accent) 4%, transparent);
}

.solution-index .industry-card.sector-commercial::before {
  top: -12%;
  right: 14%;
  width: 24%;
  height: 120%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: 4rem 0 0 color-mix(in srgb, var(--sector-accent) 8%, transparent), 8rem 0 0 color-mix(in srgb, var(--sector-accent) 4%, transparent);
  transform: skew(-12deg);
}

.solution-index .industry-card.sector-park::before {
  top: 2%;
  right: 7%;
  width: 48%;
  aspect-ratio: 1;
  border-radius: 0;
  transform: rotate(45deg);
}

.solution-index .industry-card.sector-energy::before {
  top: 10%;
  right: -12%;
  width: 76%;
  height: 34%;
  aspect-ratio: auto;
  border-radius: 50%;
  box-shadow: 0 3rem 0 color-mix(in srgb, var(--sector-accent) 7%, transparent), 0 6rem 0 color-mix(in srgb, var(--sector-accent) 4%, transparent);
}

@media (max-width: 900px) {
  .home-hardware-assembly {
    inset: 15% 7% 18%;
  }

  .home-device {
    padding: .9rem;
  }

  .home-device small {
    font-size: .55rem;
  }

  .solution-index .cp-hero-copy h1 {
    font-size: clamp(2.1rem, 9.5vw, 2.75rem);
  }

  .solution-index .overview-intro .cp-title {
    font-size: clamp(2rem, 8.8vw, 2.5rem);
  }
}

/* Homepage product system: one continuous reading surface instead of two
   diagonally separated columns. */
.home-page .products {
  padding-top: clamp(3.5rem, 4.5vw, 4.5rem);
  padding-bottom: 0;
}

.home-page .products {
  position: relative;
  isolation: isolate;
  color: #f4f8fa;
  background-color: #050709;
  background-image:
    radial-gradient(circle at 84% 8%, rgba(40, 169, 216, .09), transparent 24%),
    radial-gradient(circle at 9% 92%, rgba(54, 166, 106, .07), transparent 22%);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08), inset 0 -1px rgba(255, 255, 255, .06);
}

.home-page .products > * {
  position: relative;
  z-index: 1;
}

.home-page .product-title {
  margin-bottom: clamp(3rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 2.6vw, 2.75rem);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.home-page .product-title .kicker {
  color: #65cbe9;
}

.home-page .product-title h2 {
  width: 100%;
  max-inline-size: none;
  color: #f7fafb;
  font-size: clamp(2.625rem, 3.15vw, 3.35rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: pretty;
}

.home-page .hardware-showcase {
  display: grid;
  grid-template-columns: minmax(22rem, .78fr) minmax(0, 1.22fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: #08213b;
  border-radius: 0 var(--yt-media-radius) 0 0;
  box-shadow: 0 2.5rem 5.5rem rgba(0, 0, 0, .34);
}

.home-page .hardware-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: clamp(34rem, 35vw, 37.5rem);
  padding: clamp(3rem, 4.2vw, 4.5rem);
  color: #fff;
  background: #08213b;
}

.home-page .hardware-copy .product-index {
  color: #72d6fa;
}

.home-page .hardware-copy h3 {
  margin: 1.35rem 0 1.25rem;
  color: #fff;
  font-size: clamp(2rem, 2.55vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.home-page .hardware-copy > p:not(.product-index) {
  color: rgba(232, 244, 252, .78);
  font-size: 1rem;
  line-height: 1.75;
}

.home-page .hardware-copy .feature-tags {
  gap: .55rem;
  margin-top: 1.75rem;
}

.home-page .hardware-copy .feature-tags span {
  padding: .65rem .85rem;
  color: rgba(241, 249, 255, .88);
  background: rgba(255, 255, 255, .04);
  border-color: rgba(160, 211, 238, .34);
}

.home-page .hardware-copy > small {
  margin-top: auto;
  padding-top: 2rem;
  color: rgba(213, 231, 242, .58);
  border-top: 1px solid rgba(175, 217, 239, .18);
  font-size: .6875rem;
  line-height: 1.7;
}

.home-page .hardware-stage {
  isolation: isolate;
  height: auto;
  min-height: clamp(34rem, 35vw, 37.5rem);
  background:
    radial-gradient(ellipse at 50% 88%, rgba(46, 92, 118, .14), transparent 36%),
    linear-gradient(150deg, #f4f8fa 0%, #e8f0f3 48%, #dce8ec 100%) #edf3f5;
  border-radius: 0;
  box-shadow: none;
}

.home-page .hardware-stage::after {
  display: none;
}

.home-page .display-mockup {
  position: absolute;
  inset: 3.5% 3.5% 2.5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.home-page .display-screen {
  position: relative;
  width: min(84%, 46.25rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  flex: 0 0 auto;
  background: #071a2e;
  border-radius: .875rem;
  box-shadow: 0 1.75rem 4.5rem rgba(16, 52, 73, .24), 0 .4rem 1.2rem rgba(6, 31, 48, .16);
}

.home-page .display-screen::after {
  position: absolute;
  right: .75rem;
  bottom: .35rem;
  width: .28rem;
  height: .28rem;
  content: "";
  border-radius: 50%;
  background: #55b56e;
  box-shadow: 0 0 .5rem rgba(85, 181, 110, .45);
}

.home-page .display-screen .home-platform-dashboard {
  position: absolute;
  inset: .45rem .45rem .8rem;
  width: calc(100% - .9rem);
  height: calc(100% - 1.25rem);
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: none;
  mix-blend-mode: normal;
}

.home-page .display-stand {
  position: relative;
  width: 18%;
  height: 3.25rem;
  flex: 0 0 auto;
}

.home-page .display-stand::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 42%;
  height: 82%;
  content: "";
  background: linear-gradient(90deg, #9eabb1, #e2e8eb 42%, #bac5ca 74%, #8f9da3);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
}

.home-page .display-stand::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 170%;
  height: .65rem;
  content: "";
  border-radius: 50% 50% .25rem .25rem;
  background: linear-gradient(180deg, #dbe2e5, #8d9aa0);
  box-shadow: 0 .7rem 1.4rem rgba(29, 59, 76, .2);
  transform: translateX(-50%);
}

.home-page .platform-band {
  width: 100vw;
  margin-top: clamp(5rem, 7vw, 7rem);
  margin-left: 50%;
  padding-block: clamp(2rem, 2.4vw, 2.5rem);
  padding-inline: max(6vw, 58px);
  background: #fff;
  transform: translateX(-50%);
}

/* Keep the full-bleed platform band inside the page scroll boundary. */
.home-page .products {
  overflow-x: hidden;
  overflow-x: clip;
}

.home-page .platform-showcase {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 0;
  align-items: stretch;
  margin-top: 0;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.home-page .home-mobile-ui-showcase {
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  align-self: start;
  aspect-ratio: 3 / 2;
  padding: clamp(.75rem, 1.2vw, 1.125rem);
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  isolation: isolate;
}

.home-page .home-mobile-ui-showcase::after {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(15, 49, 76, .07);
}

.home-page .home-mobile-ui-stack {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  transform: scale(1.16);
  transform-origin: 50% 50%;
}

.home-page .platform-copy h3 {
  max-width: 11em;
  color: #071a2e;
  font-size: clamp(2.35rem, 3vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

.home-page .platform-copy > p:not(.product-index) {
  max-width: 34rem;
  color: #526878;
}

.home-page .platform-copy {
  min-width: 0;
  padding: clamp(2.75rem, 4vw, 4.25rem);
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #fff;
}

.home-page .platform-copy .product-index {
  color: #0877ed;
}

.home-page .platform-copy ul {
  margin-top: 2rem;
}

.home-page .platform-copy li {
  color: #405667;
  border-bottom-color: rgba(7, 26, 46, .14);
}

@media (max-width: 900px) {
  .home-page .products {
    padding-top: 4rem;
    padding-bottom: 0;
  }

  .home-page .product-title {
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
  }

  .home-page .product-title h2 {
    font-size: clamp(2.125rem, 9.2vw, 2.5rem);
    line-height: 1.12;
  }

  .home-page .hardware-showcase {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 0 var(--yt-media-radius) 0 0;
  }

  .home-page .hardware-copy {
    min-height: auto;
    padding: 2.25rem 1.5rem 2.5rem;
  }

  .home-page .hardware-copy h3 {
    font-size: 2rem;
  }

  .home-page .hardware-copy > small {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .home-page .hardware-stage {
    min-height: 20rem;
    aspect-ratio: auto;
  }

  .home-page .display-mockup {
    inset: 1.25rem .75rem .75rem;
  }

  .home-page .display-screen {
    width: 92%;
    border-radius: .75rem;
  }

  .home-page .display-screen .home-platform-dashboard {
    inset: .32rem .32rem .58rem;
    width: calc(100% - .64rem);
    height: calc(100% - .9rem);
  }

  .home-page .display-stand {
    width: 22%;
    height: 2.75rem;
  }

  .home-page .platform-band {
    margin-top: 5.25rem;
    padding-block: 2.25rem;
    padding-inline: 20px;
  }

  .home-page .platform-showcase {
    gap: 0;
    margin-top: 0;
    border-radius: 0;
  }

  .home-page .home-mobile-ui-showcase {
    min-height: 0;
    aspect-ratio: 1.42;
    padding: .75rem;
    border-radius: 0;
  }

  .home-page .home-mobile-ui-stack {
    object-position: 50% 50%;
    transform: scale(1.06);
  }

  .home-page .platform-copy h3 {
    max-width: 8.5em;
    font-size: 2.25rem;
    line-height: 1.1;
  }

  .home-page .platform-copy {
    padding: 2.25rem 1.5rem 2.5rem;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .home-page .display-screen .home-platform-dashboard {
    object-fit: contain;
  }
}

/* Homepage technology evidence — a code-native product UI inside an iPad frame. */
.home-page .technology {
  background:
    radial-gradient(circle at 78% 18%, rgba(40, 169, 216, .13), transparent 28%),
    linear-gradient(145deg, #04111e 0%, #082b50 68%, #0a4b61 100%);
}

.home-page .technology .tech-glow {
  display: none;
}

.home-page .technology .tech-layout {
  grid-template-columns: minmax(0, 1.18fr) minmax(19rem, .82fr);
  gap: clamp(3rem, 5vw, 5.75rem);
  margin-top: clamp(4rem, 5.5vw, 5.5rem);
}

.home-page .technology .tech-dashboard {
  display: grid;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1.42;
  padding: clamp(1rem, 1.55vw, 1.6rem);
  place-items: center;
  overflow: visible;
  border-radius: 0 var(--yt-media-radius) 0 0;
  background: linear-gradient(145deg, #071a2d, #0a3153 58%, #0d5864);
  box-shadow: 0 2.5rem 5rem rgba(0, 5, 16, .28);
}

.home-page .technology .tech-dashboard::before,
.home-page .technology .tech-dashboard::after {
  display: none;
}

.home-page .trace-ipad {
  position: relative;
  width: 100%;
  aspect-ratio: 1.46;
  padding: clamp(.42rem, .65vw, .68rem);
  border-radius: clamp(1.25rem, 2.1vw, 2.15rem);
  background: linear-gradient(145deg, #b8c3c9 0%, #eef2f3 28%, #66757d 66%, #dce3e6 100%);
  box-shadow: 0 2rem 4rem rgba(0, 5, 15, .38), inset 0 0 0 1px rgba(255, 255, 255, .5);
}

.home-page .trace-ipad::after {
  position: absolute;
  inset: .2rem;
  content: "";
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(4, 14, 24, .7);
}

.home-page .trace-camera {
  position: absolute;
  z-index: 4;
  top: .2rem;
  left: 50%;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: #07111b;
  box-shadow: inset 0 0 0 1px rgba(73, 139, 177, .25);
  transform: translateX(-50%);
}

.home-page .trace-ipad-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(.95rem, 1.55vw, 1.55rem);
  color: #142b3e;
  background: #edf3f5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.home-page .trace-appbar {
  height: 11.5%;
  min-height: 2.5rem;
  padding: 0 3.2%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #eaf6fb;
  background: #081f36;
}

.home-page .trace-app-brand,
.home-page .trace-app-brand > div,
.home-page .trace-environment,
.home-page .trace-user,
.home-page .trace-user > div {
  display: flex;
  align-items: center;
}

.home-page .trace-app-brand {
  gap: .55rem;
}

.home-page .trace-app-brand > div,
.home-page .trace-user > div {
  align-items: flex-start;
  flex-direction: column;
}

.home-page .trace-app-brand b {
  font-size: clamp(.6rem, .72vw, .8rem);
  line-height: 1.1;
}

.home-page .trace-app-brand small {
  margin-top: .18rem;
  color: #8eb1c4;
  font-size: clamp(.38rem, .44vw, .5rem);
}

.home-page .trace-brand-symbol {
  position: relative;
  width: 1.25rem;
  height: 1.05rem;
  flex: 0 0 auto;
}

.home-page .trace-brand-symbol i {
  position: absolute;
  width: .72rem;
  height: .28rem;
  transform: skew(-28deg);
}

.home-page .trace-brand-symbol i:first-child {
  top: .12rem;
  left: .02rem;
  background: #36a66a;
}

.home-page .trace-brand-symbol i:last-child {
  right: .02rem;
  bottom: .16rem;
  background: #28a9d8;
}

.home-page .trace-environment {
  gap: .4rem;
  color: #a9c7d5;
  font-size: clamp(.42rem, .5vw, .56rem);
}

.home-page .trace-environment i,
.home-page .trace-evidence dd i {
  width: .4rem;
  height: .4rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #36a66a;
  box-shadow: 0 0 .45rem rgba(54, 166, 106, .55);
}

.home-page .trace-app-shell {
  height: 88.5%;
  display: grid;
  grid-template-columns: 18% 82%;
}

.home-page .trace-sidebar {
  position: relative;
  min-width: 0;
  padding: 7% 9% 5%;
  color: #8eabbc;
  background: #0d2a43;
}

.home-page .trace-sidebar > p {
  margin: 0 0 11%;
  color: #628399;
  font-size: clamp(.4rem, .45vw, .5rem);
  font-weight: 650;
  letter-spacing: .08em;
}

.home-page .trace-nav-list {
  display: grid;
  gap: .25rem;
}

.home-page .trace-nav-list span {
  min-height: clamp(1.1rem, 2.2vw, 1.8rem);
  padding: 0 9%;
  display: flex;
  align-items: center;
  gap: .4rem;
  border-radius: .32rem;
  font-size: clamp(.42rem, .51vw, .58rem);
}

.home-page .trace-nav-list span.is-active {
  color: #f1f9fc;
  background: #17578a;
}

.home-page .trace-nav-list i {
  width: .42rem;
  height: .42rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: .1rem;
  opacity: .85;
}

.home-page .trace-nav-list .is-active i {
  border-color: #61d3e4;
  background: #61d3e4;
}

.home-page .trace-user {
  position: absolute;
  right: 9%;
  bottom: 6%;
  left: 9%;
  gap: .45rem;
}

.home-page .trace-user > span {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #d9f3fb;
  background: #16657e;
  font-size: .42rem;
  font-weight: 700;
}

.home-page .trace-user b,
.home-page .trace-user small {
  font-size: clamp(.38rem, .43vw, .48rem);
  line-height: 1.35;
}

.home-page .trace-user b {
  color: #dcecf3;
}

.home-page .trace-user small {
  color: #66889d;
}

.home-page .trace-workspace {
  min-width: 0;
  padding: 3.5% 3.8% 3%;
  background: #f3f7f8;
}

.home-page .trace-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.home-page .trace-summary > div:first-child > span {
  color: #5d788a;
  font-size: clamp(.42rem, .48vw, .54rem);
}

.home-page .trace-summary h3 {
  margin: .25rem 0 .12rem;
  color: #0d2941;
  font-size: clamp(.95rem, 1.15vw, 1.25rem);
  font-weight: 680;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.home-page .trace-summary p {
  margin: 0;
  color: #688092;
  font-size: clamp(.43rem, .49vw, .56rem);
}

.home-page .trace-review-state {
  padding-top: .15rem;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
}

.home-page .trace-review-state b {
  padding: .25rem .52rem;
  border-radius: 999px;
  color: #1c7950;
  background: #dff1e6;
  font-size: clamp(.42rem, .48vw, .55rem);
}

.home-page .trace-review-state small {
  margin-top: .28rem;
  color: #8294a1;
  font-size: clamp(.38rem, .42vw, .48rem);
}

.home-page .trace-chain {
  position: relative;
  margin-top: 3.2%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid #dbe5e9;
  border-radius: .55rem;
  background: #fff;
}

.home-page .trace-chain article {
  position: relative;
  min-width: 0;
  min-height: clamp(3.15rem, 5.5vw, 4.65rem);
  padding: 11% 10% 9%;
  border-right: 1px solid #e0e8eb;
}

.home-page .trace-chain article:last-child {
  border-right: 0;
  background: #e9f5ee;
}

.home-page .trace-chain article::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -.22rem;
  width: .38rem;
  height: .38rem;
  content: "";
  border-top: 1px solid #9eb8c6;
  border-right: 1px solid #9eb8c6;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}

.home-page .trace-chain article:nth-last-child(-n + 2)::after {
  background: #e9f5ee;
}

.home-page .trace-chain article:last-child::after {
  display: none;
}

.home-page .trace-chain span,
.home-page .trace-chain b,
.home-page .trace-chain small {
  display: block;
}

.home-page .trace-chain span {
  color: #1885b9;
  font-size: clamp(.38rem, .42vw, .48rem);
  font-weight: 700;
}

.home-page .trace-chain b {
  margin-top: .32rem;
  overflow: hidden;
  color: #17354a;
  font-size: clamp(.43rem, .51vw, .59rem);
  font-weight: 650;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-page .trace-chain small {
  margin-top: .18rem;
  overflow: hidden;
  color: #718796;
  font-size: clamp(.36rem, .41vw, .47rem);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-page .trace-detail-grid {
  margin-top: 2.7%;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(0, .78fr);
  gap: 2.4%;
}

.home-page .trace-trend,
.home-page .trace-evidence {
  min-width: 0;
  border: 1px solid #dbe5e9;
  border-radius: .55rem;
  background: #fff;
}

.home-page .trace-trend {
  padding: 3.2% 4% 2.5%;
}

.home-page .trace-trend header,
.home-page .trace-evidence header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.home-page .trace-trend header > div {
  display: flex;
  align-items: baseline;
  gap: .45rem;
}

.home-page .trace-trend b,
.home-page .trace-evidence b {
  color: #19384d;
  font-size: clamp(.45rem, .54vw, .62rem);
}

.home-page .trace-trend header span,
.home-page .trace-evidence header span,
.home-page .trace-trend header p {
  color: #7a8f9d;
  font-size: clamp(.34rem, .4vw, .46rem);
}

.home-page .trace-trend header p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .25rem;
}

.home-page .trace-trend header p i {
  width: .42rem;
  height: .12rem;
  background: #1b8fc3;
}

.home-page .trace-trend header p i:nth-of-type(2) {
  margin-left: .18rem;
  background: #9bb2bd;
}

.home-page .trace-trend svg {
  width: 100%;
  height: auto;
  margin-top: 1.5%;
  display: block;
}

.home-page .trace-grid-lines path {
  fill: none;
  stroke: #e4ecef;
  stroke-width: 1;
}

.home-page .trace-baseline,
.home-page .trace-measured {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-page .trace-baseline {
  stroke: #9bb2bd;
  stroke-dasharray: 6 6;
  stroke-width: 2;
}

.home-page .trace-measured-area {
  fill: rgba(40, 169, 216, .13);
}

.home-page .trace-measured {
  stroke: #1885b9;
  stroke-width: 3;
}

.home-page .trace-trend circle {
  fill: #fff;
  stroke: #1885b9;
  stroke-width: 3;
}

.home-page .trace-trend footer {
  margin-top: -.2rem;
  display: flex;
  justify-content: space-between;
  color: #8a9ba6;
  font-size: clamp(.33rem, .38vw, .44rem);
}

.home-page .trace-evidence {
  padding: 6% 7%;
}

.home-page .trace-evidence header {
  padding-bottom: 7%;
  border-bottom: 1px solid #e1e9ec;
}

.home-page .trace-evidence dl {
  margin: 0;
}

.home-page .trace-evidence dl > div {
  padding: 5.5% 0;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: .35rem;
  border-bottom: 1px solid #e5ecef;
}

.home-page .trace-evidence dl > div:last-child {
  border-bottom: 0;
}

.home-page .trace-evidence dt,
.home-page .trace-evidence dd {
  margin: 0;
  font-size: clamp(.36rem, .42vw, .48rem);
  line-height: 1.35;
}

.home-page .trace-evidence dt {
  color: #728794;
}

.home-page .trace-evidence dd {
  color: #254357;
  font-weight: 550;
}

.home-page .trace-evidence dd:last-child {
  display: flex;
  align-items: center;
  gap: .25rem;
}

@media (max-width: 900px) {
  .home-page .technology .tech-layout {
    gap: 2.25rem;
    margin-top: 3rem;
  }

  .home-page .technology .tech-dashboard {
    min-height: 0;
    aspect-ratio: 1.26;
    padding: .62rem;
    border-radius: 0 3.5rem 0 0;
  }

  .home-page .trace-ipad {
    aspect-ratio: 1.35;
    padding: .34rem;
    border-radius: 1.2rem;
  }

  .home-page .trace-ipad-screen {
    border-radius: .9rem;
  }

  .home-page .trace-camera {
    top: .09rem;
    width: .24rem;
    height: .24rem;
  }

  .home-page .trace-appbar {
    min-height: 2rem;
    padding: 0 4.5%;
  }

  .home-page .trace-app-brand b {
    font-size: .62rem;
  }

  .home-page .trace-app-brand small {
    display: none;
  }

  .home-page .trace-environment {
    font-size: .43rem;
  }

  .home-page .trace-app-shell {
    display: block;
  }

  .home-page .trace-sidebar {
    display: none;
  }

  .home-page .trace-workspace {
    height: 100%;
    padding: 3.5% 4%;
  }

  .home-page .trace-summary > div:first-child > span {
    font-size: .42rem;
  }

  .home-page .trace-summary h3 {
    margin: .16rem 0 0;
    font-size: .82rem;
  }

  .home-page .trace-summary p,
  .home-page .trace-review-state small {
    display: none;
  }

  .home-page .trace-review-state b {
    padding: .2rem .4rem;
    font-size: .42rem;
  }

  .home-page .trace-chain {
    margin-top: 2.5%;
  }

  .home-page .trace-chain article {
    min-height: 2.55rem;
    padding: 8% 8% 7%;
  }

  .home-page .trace-chain span,
  .home-page .trace-chain small {
    font-size: .34rem;
  }

  .home-page .trace-chain b {
    margin-top: .16rem;
    font-size: .39rem;
  }

  .home-page .trace-chain small {
    margin-top: .1rem;
  }

  .home-page .trace-detail-grid {
    margin-top: 2.3%;
    display: block;
  }

  .home-page .trace-trend {
    padding: 2.4% 3.5% 1.5%;
  }

  .home-page .trace-trend b {
    font-size: .46rem;
  }

  .home-page .trace-trend header span,
  .home-page .trace-trend header p,
  .home-page .trace-trend footer {
    font-size: .32rem;
  }

  .home-page .trace-trend svg {
    height: 4.2rem;
    margin-top: 0;
  }

  .home-page .trace-evidence {
    display: none;
  }
}