/* Track & Trace: packet travels node to node */
.trace-node{transition:border-color .5s,box-shadow .5s,background .5s,transform .5s var(--ease)}
.trace-node b{transition:all .5s}
.trace-node.now{border-color:var(--orange-bright);background:#17222c;box-shadow:var(--glow-orange);scale:1.04}
.trace-node.now b{border-color:var(--orange-bright);color:#fff;background:rgb(237 121 46/30%);animation:node-ring 1.1s ease-out infinite}
.trace-node.active b{background:rgb(119 193 203/12%)}
.trace-pathline{background-size:100% 300%;animation:trace-flow 6s linear infinite}
.trace-header i{animation:live 1.4s ease-in-out infinite}
.trace-domains span{animation:float-drift 6s ease-in-out infinite}
.trace-domains span:nth-child(even){animation-delay:-3s}
.trace-accelerator-grid article span{display:inline-block;transition:letter-spacing .4s,color .3s}
.trace-accelerator-grid article:hover span{letter-spacing:.12em;color:var(--orange-bright)}
@keyframes trace-flow{to{background-position:0 300%}}
@keyframes node-ring{0%{box-shadow:0 0 0 0 rgb(255 152 79/55%)}100%{box-shadow:0 0 0 14px rgb(255 152 79/0)}}
@keyframes live{50%{opacity:.35}}
@keyframes float-drift{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* Track & Trace — premium supply chain intelligence */

.trace-page {

  --trace-bg: #10141d;

  --trace-deep: #0c121a;

  --trace-slate: #172433;

  --trace-slate-light: #1b2b39;

  --trace-cyan: #35d6e8;

  --trace-cyan-soft: #8adce4;

  --trace-orange: #e99a63;

  --trace-ink: #e9eff0;

  --trace-muted: #a7b5bc;

  --trace-rule: rgb(191 219 228 / 13%);

  position: relative;

  isolation: isolate;

  overflow: clip;

  color: var(--trace-ink);

  background: var(--trace-bg);

}


.trace-page .shell {

  width: min(100% - 2.5rem, 1160px);

  margin-inline: auto;

}


.trace-page .page-section {

  position: relative;

  padding-block: clamp(2.8rem, 4.7vw, 4.4rem);

}


.trace-page .section-kicker {

  margin: 0 0 0.75rem;

  color: #9bacb2;

  font: 500 0.57rem/1.5 var(--font-mono);

  letter-spacing: 0.1em;

}


.trace-page .section-kicker>span {

  display: inline-block;

  width: 7px;

  height: 7px;

  margin-right: 0;

  border-radius: 50%;

  background: var(--trace-cyan);

  box-shadow: 0 0 8px rgb(53 214 232 / 30%);

}


.trace-page h2,

.trace-page h3 {

  color: var(--trace-ink);

  font-family: var(--font-display);

  font-weight: 600;

}


.trace-page h2 {

  margin: 0.5rem 0 1rem;

  font-size: clamp(1.95rem, 3.3vw, 3.1rem);

  letter-spacing: -0.045em;

  line-height: 1.12;

}


.trace-page h3 {
  letter-spacing: -0.025em;
}


/* Hero: editorial copy beside the existing connected supply path. */

.trace-page .product-hero {

  position: relative;

  overflow: hidden;

  background:

    radial-gradient(ellipse at 79% 42%, rgb(53 164 184 / 14%), transparent 37%),

    radial-gradient(ellipse at 12% 95%, rgb(233 154 99 / 4%), transparent 34%),

    linear-gradient(112deg, #10141d 3%, #111d28 58%, #0e151d);

}


.trace-page .product-hero::before {

  position: absolute;

  z-index: 0;

  top: 5%;

  right: -11%;

  width: min(53vw, 700px);

  aspect-ratio: 1;

  border: 1px solid rgb(115 208 220 / 7%);

  border-radius: 50%;

  background: radial-gradient(circle, rgb(53 214 232 / 5%), transparent 68%);

  content: "";

  pointer-events: none;

}


.trace-page .product-hero-layout {

  position: relative;

  z-index: 1;

  display: grid;

  min-height: 0;

  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);

  align-items: center;

  gap: clamp(1.6rem, 4.5vw, 4rem);

  padding-block: clamp(2.8rem, 4.2vw, 4rem) clamp(2.2rem, 3.2vw, 3rem);

}


.trace-page .page-copy {
  min-width: 0;
}


.trace-page .page-copy h1 {

  max-width: 620px;

  margin: 0.8rem 0 1rem;

  color: var(--trace-ink);

  font: 600 clamp(2.65rem, 4.1vw, 3.8rem)/1.06 var(--font-display);

  letter-spacing: -0.06em;

}


.trace-page .page-copy h1 em {

  color: #b8c9ce;

  font-style: normal;

}


.trace-page .page-copy .page-lede {

  max-width: 550px;

  margin: 0;

  color: #b4c0c6;

  font-size: 0.9rem;

  line-height: 1.8;

}


.trace-page .product-back-link {

  display: inline-flex;

  margin: 1.2rem 1rem 0 0;

  color: #bac6cb;

  font-size: 0.73rem;

  transition: color 180ms ease, transform 180ms ease;

}


.trace-page .product-back-link:hover {

  color: var(--trace-cyan-soft);

  transform: translateX(-3px);

}


.trace-page .button-bright {

  margin-top: 1.2rem;

}


.trace-page .page-hero-foot {

  position: relative;

  z-index: 1;

  display: flex;

  justify-content: space-between;

  gap: 1rem;

  padding-block: 0.8rem;

  border-top: 1px solid rgb(195 220 227 / 10%);

  color: #81949c;

  font: 400 0.48rem/1.6 var(--font-mono);

  letter-spacing: 0.07em;

}


/* Keep the page-specific trace path as its visual signature. */

.trace-page .trace-visual {

  position: relative;

  min-width: 0;

  min-height: 370px;

  padding: 1.3rem;

  overflow: hidden;

  isolation: isolate;

  border: 1px solid rgb(103 197 211 / 16%);

  background-color: #0e1822;

  background-image:

    linear-gradient(rgb(184 214 222 / 3%) 1px, transparent 1px),

    linear-gradient(90deg, rgb(184 214 222 / 3%) 1px, transparent 1px),

    radial-gradient(ellipse at 52% 48%, rgb(32 105 119 / 20%), transparent 62%);

  background-size: 34px 34px, 34px 34px, auto;

  box-shadow: inset 0 0 65px rgb(4 10 15 / 45%), 0 20px 55px rgb(0 0 0 / 22%);

}


.trace-page .trace-header,

.trace-page .trace-foot {

  display: flex;

  justify-content: space-between;

  gap: 0.8rem;

  color: #91a2a9;

  font: 400 0.48rem/1.6 var(--font-mono);

  letter-spacing: 0.055em;

}


.trace-page .trace-path {

  position: relative;

  display: grid;

  max-width: 540px;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0.8rem 0.7rem;

  margin: 1.55rem auto;

}


.trace-page .trace-pathline {

  position: absolute;

  inset: 12px;

  z-index: 0;

  background: linear-gradient(160deg, rgb(53 214 232 / 55%), rgb(233 154 99 / 35%) 51%, rgb(53 214 232 / 12%));

  clip-path: polygon(0 2%, 100% 2%, 100% 9%, 4% 9%, 4% 40%, 100% 40%, 100% 47%, 4% 47%, 4% 75%, 100% 75%, 100% 82%, 4% 82%, 4% 100%, 0 100%);

  opacity: 0.62;

  pointer-events: none;

}

.trace-page .trace-pathline::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgb(53 214 232 / 78%) 42%, rgb(232 250 251 / 72%) 52%, transparent);
  opacity: 0.75;
  transform: translateX(-150%);
  animation: trace-route-light 7.8s ease-in-out infinite;
  content: "";
}

@keyframes trace-route-light {
  0%, 8% { transform: translateX(-150%); }
  54%, 64%, 100% { transform: translateX(650%); }
}

@keyframes trace-checkpoint-pulse {
  0%, 5%, 100% { box-shadow: 0 0 0 rgb(53 214 232 / 0%); }
  2.5% { box-shadow: 0 0 11px rgb(53 214 232 / 48%); }
}


.trace-page .trace-node {

  position: relative;

  z-index: 1;

  display: grid;

  min-width: 0;

  min-height: 58px;

  grid-template-columns: 29px minmax(0, 1fr);

  align-items: center;

  gap: 0.4rem;

  padding: 0.45rem;

  border: 1px solid rgb(195 220 227 / 14%);

  background: rgb(17 29 39 / 96%);

  transition: border-color 180ms ease, background-color 180ms ease;

}


.trace-page .trace-node:nth-of-type(even) {
  transform: translateX(5px);
}


.trace-page .trace-node b {

  display: grid;

  width: 25px;

  aspect-ratio: 1;

  place-items: center;

  border: 1px solid rgb(53 214 232 / 42%);

  border-radius: 50%;

  color: #b4d5d7;

  font: 400 0.46rem var(--font-mono);

  animation: trace-checkpoint-pulse 7.8s ease-in-out infinite;

}

.trace-page .trace-node:nth-of-type(2) b { animation-delay: 0.72s; }
.trace-page .trace-node:nth-of-type(3) b { animation-delay: 1.44s; }
.trace-page .trace-node:nth-of-type(4) b { animation-delay: 2.16s; }
.trace-page .trace-node:nth-of-type(5) b { animation-delay: 2.88s; }
.trace-page .trace-node:nth-of-type(6) b { animation-delay: 3.6s; }


.trace-page .trace-node span {

  min-width: 0;

  color: #e2e7e5;

  font-size: 0.67rem;

  line-height: 1.35;

  overflow-wrap: anywhere;

}


.trace-page .trace-node.active {
  border-color: rgb(53 214 232 / 27%);
}


.trace-page .trace-node.active b {

  border-color: var(--trace-cyan);

  color: #e8f3f2;

  box-shadow: 0 0 9px rgb(53 214 232 / 18%);

}


.trace-page .trace-node:hover {

  border-color: rgb(53 214 232 / 48%);

  background: #172633;

}


.trace-page .trace-foot {

  padding-top: 0.75rem;

  border-top: 1px solid var(--trace-rule);

  font-size: 0.43rem;

}


/* Overview: readable editorial split with a quieter surface change. */

.trace-page .trace-story {

  background:

    radial-gradient(ellipse at 5% 12%, rgb(53 164 184 / 8%), transparent 38%),

    radial-gradient(ellipse at 96% 88%, rgb(89 132 160 / 5%), transparent 42%),

    #121a24;

}


.trace-page .trace-story .editorial-split {
  position: relative;
  isolation: isolate;
  padding: clamp(1.35rem, 3.5vw, 2.5rem);
  overflow: hidden;
  border: 1px solid rgb(125 194 207 / 16%);
  border-radius: var(--radius-small, 8px);
  background:
    radial-gradient(ellipse at 88% 10%, rgb(53 214 232 / 9%), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 54px, rgb(132 181 193 / 2%) 55px 56px),
    linear-gradient(120deg, #172532, #121d28 68%);
  box-shadow: inset 0 1px 0 rgb(235 247 249 / 4%), 0 18px 40px rgb(0 0 0 / 12%);
}

.trace-page .trace-story .editorial-split h2 {
  max-width: 340px;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.trace-page .trace-story .editorial-split>div:first-child {
  position: relative;
  padding-top: 0.35rem;
}

.trace-page .trace-story .editorial-split>div:first-child::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--trace-cyan), transparent);
  content: "";
}


.trace-page .editorial-split {

  display: grid;

  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

  align-items: start;

  gap: clamp(1.5rem, 5vw, 4rem);

}


.trace-page .editorial-split>div {
  min-width: 0;
}


.trace-page .editorial-split h2 {

  max-width: 390px;

}


.trace-page .editorial-prose {

  max-width: 700px;

  padding-top: 0.45rem;

}


.trace-page .editorial-prose p,

.trace-page .trace-roadmap>.shell>p:not(.section-kicker) {

  margin: 0 0 0.85rem;

  color: #b2bec3;

  font-size: 0.84rem;

  line-height: 1.82;

}


.trace-page .editorial-prose p:last-child {
  margin-bottom: 0;
}


/* Accelerators: an asymmetric constellation of concise, connected features. */

.trace-page .trace-accelerators {

  background: linear-gradient(125deg, #0d1822 0%, #122331 55%, #0d1721 100%);

}


.trace-page .section-heading-row {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1.2rem;

}


.trace-page .section-heading-row h2,

.trace-page .trace-elements>.shell>h2,

.trace-page .trace-roadmap h2 {

  margin-bottom: 0;

}


.trace-page .trace-accelerators .trace-accelerator-grid {

  position: relative;
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  align-items: start;

  gap: 0.5rem clamp(1rem, 2.8vw, 2.5rem);

  margin-top: 1.45rem;

  isolation: isolate;

}


.trace-page .trace-accelerators .trace-accelerator-grid::before {
  position: absolute;
  z-index: -1;
  inset: 3% 8% 4%;
  border: 1px solid rgb(53 214 232 / 9%);
  border-bottom-color: transparent;
  border-radius: 50%;
  clip-path: inset(0 0 47% 0);
  content: "";
  pointer-events: none;
}

.trace-page .trace-accelerators .trace-accelerator-grid::after {
  position: absolute;
  z-index: -1;
  inset: 3% 8% 4%;
  border: 1px solid rgb(53 214 232 / 8%);
  border-top-color: transparent;
  border-radius: 50%;
  clip-path: inset(47% 0 0 0);
  content: "";
  pointer-events: none;
}


.trace-page .trace-accelerators .trace-accelerator-grid article {

  position: relative;

  display: block;

  min-width: 0;

  min-height: 116px;

  padding: 0.9rem 0.95rem 0.95rem 0;

  border-bottom: 1px solid rgb(148 183 193 / 14%);

  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;

}


.trace-page .trace-accelerators .trace-accelerator-grid article:nth-child(3n + 2) {
  margin-top: 1.1rem;
}


.trace-page .trace-accelerators .trace-accelerator-grid article:nth-child(3n) {
  margin-top: -0.35rem;
}


.trace-page .trace-accelerators .trace-accelerator-grid article>span {

  display: block;

  margin-bottom: 0.35rem;

  color: #8eabb3;

  font: 400 0.55rem/1.5 var(--font-mono);

}


.trace-page .trace-accelerators .trace-accelerator-grid h3 {

  display: flex;

  max-width: 340px;

  align-items: flex-start;

  gap: 0.58rem;

  margin: 0;

  color: #dce5e6;

  font-size: 0.86rem;

  line-height: 1.55;

  letter-spacing: -0.02em;

}

.trace-page .trace-accelerators .trace-inline-icon {
  width: 1.9rem;
  height: 1.9rem;
  flex-basis: 1.9rem;
  stroke-width: 1.55;
}


.trace-page .trace-inline-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 1.25rem;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--trace-cyan);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}


.trace-page .trace-accelerators .trace-accelerator-grid article:hover {

  transform: translateY(-2px);

  border-color: rgb(53 214 232 / 32%);

  background: linear-gradient(100deg, rgb(53 214 232 / 6%), transparent 78%);

}


/* Solution: compact capability cards followed by technology, practice, and delivery. */

.trace-page .trace-elements {

  background:

    radial-gradient(ellipse at 82% 47%, rgb(44 137 157 / 11%), transparent 37%),

    linear-gradient(115deg, #121b25, #172433 55%, #111b25);

}

.trace-page .trace-elements > .shell {
  width: min(calc(100% - var(--gutter) * 2), 1600px);
}


.trace-page .trace-elements>.shell>.section-kicker {
  color: #a5c7cc;
}


.trace-page .trace-elements>.shell>h2 {

  max-width: 760px;

  margin-bottom: 1.15rem;

}


.trace-page .trace-solution-intro {
  position: relative;
  isolation: isolate;
  display: block;
  margin-top: 1.2rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1rem, 2.3vw, 1.5rem);
  overflow: hidden;
  border: 1px solid rgb(125 194 207 / 16%);
  border-left: 2px solid rgb(53 214 232 / 46%);
  border-radius: var(--radius-small, 8px);
  background:
    radial-gradient(ellipse at 96% 5%, rgb(53 214 232 / 7%), transparent 35%),
    repeating-linear-gradient(0deg, transparent 0 25px, rgb(135 183 194 / 2%) 26px),
    linear-gradient(118deg, #172532, #121e29 68%, #172632);
  box-shadow: inset 0 1px 0 rgb(235 247 249 / 3%);
}


.trace-page .trace-solution-intro-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(190px, 0.68fr) minmax(0, 1.32fr);
  align-items: start;
  gap: clamp(1.25rem, 4vw, 3.2rem);
  min-width: 0;
  max-width: none;
}


.trace-page .trace-best-practices-title {
  margin: 0 0 0.7rem;
  color: #eaf3f4;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.trace-page .trace-best-practices-copy p {
  max-width: 78ch;
  margin: 0 0 0.7rem;
  color: #b4c2c6;
  font-size: 0.84rem;
  line-height: 1.78;
}

.trace-page .trace-best-practices-copy p:last-child {
  margin-bottom: 0;
}

.trace-page .trace-best-practices-copy strong {
  color: #d9f2f4;
  font-weight: 600;
}

.trace-page .trace-capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  align-items: stretch;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.trace-page .trace-capability-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 108px;
  padding: 0.9rem;
  overflow: hidden;
  border: 1px solid rgb(145 192 205 / 16%);
  border-radius: var(--radius-small, 8px);
  background:
    linear-gradient(145deg, rgb(31 49 63 / 92%), rgb(20 34 47 / 94%));
  box-shadow: inset 0 1px 0 rgb(235 247 249 / 3%);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.trace-page .trace-capability-card-wide {
  min-height: 108px;
}

.trace-page .trace-capability-card::before {
  position: absolute;
  top: 0;
  left: 0.9rem;
  width: 2.4rem;
  height: 1px;
  background: linear-gradient(90deg, var(--trace-cyan), transparent);
  content: "";
}

.trace-page .trace-capability-card h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin: 0 0 0.55rem;
  color: #e3edef;
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: -0.015em;
}

.trace-page .trace-capability-card ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-page .trace-capability-card-wide ul {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1201px) {
  .trace-page .trace-capability-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trace-page .trace-capability-card-wide {
    grid-column: 1 / -1;
  }

  .trace-page .trace-capability-card-wide ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
}

.trace-page .trace-capability-card li {
  position: relative;
  padding-left: 0.75rem;
  color: #b8c6cb;
  font-size: 0.7rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.trace-page .trace-capability-card li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--trace-cyan);
  content: "";
}

@media (hover: hover) and (pointer: fine) {
  .trace-page .trace-capability-card:hover {
    transform: translateY(-2px);
    border-color: rgb(53 214 232 / 42%);
    background: linear-gradient(145deg, rgb(35 57 72 / 96%), rgb(21 38 51 / 97%));
    box-shadow: inset 0 1px 0 rgb(235 247 249 / 4%), 0 8px 20px rgb(0 0 0 / 16%), 0 0 16px rgb(53 214 232 / 7%);
  }
}


/* The technology items continue the Solution section in a lighter, connected ledger. */

.trace-page .trace-technology {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--trace-rule);
  background: radial-gradient(ellipse at 92% 5%, rgb(53 214 232 / 6%), transparent 38%);
}

.trace-page .trace-tech-heading {
  margin: 0 0 1.1rem;
  color: #e9f3f4;
  font-size: clamp(1.45rem, 2.35vw, 1.85rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.035em;
}

.trace-page .trace-tech-ecosystem {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.8vw, 2.2rem);
  isolation: isolate;
}

.trace-page .trace-tech-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.85rem 0.7rem;
  padding: 0.4rem 0;
}

.trace-page .trace-tech-nodes::before {
  position: absolute;
  z-index: -1;
  inset: 5% 7% 3%;
  border: 1px solid rgb(53 214 232 / 12%);
  border-radius: 50%;
  clip-path: inset(0 0 5% 0);
  content: "";
  pointer-events: none;
}

.trace-page .trace-tech-node {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 92px;
  align-items: flex-start;
  padding: 0.95rem 0.9rem;
  border: 1px solid rgb(145 192 205 / 14%);
  border-radius: var(--radius-small, 8px);
  background: linear-gradient(145deg, rgb(26 43 56 / 82%), rgb(18 32 44 / 87%));
  box-shadow: inset 0 1px 0 rgb(235 247 249 / 3%);
  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.trace-page .trace-tech-node::before {
  position: absolute;
  top: -0.85rem;
  left: 50%;
  width: 1px;
  height: 0.85rem;
  background: linear-gradient(180deg, rgb(53 214 232 / 12%), rgb(53 214 232 / 42%));
  content: "";
}

.trace-page .trace-tech-node:nth-child(1) { grid-column: 1 / span 2; }
.trace-page .trace-tech-node:nth-child(2) { grid-column: 3 / span 2; margin-top: -0.25rem; }
.trace-page .trace-tech-node:nth-child(3) { grid-column: 5 / span 2; }
.trace-page .trace-tech-node:nth-child(4) { grid-column: 2 / span 2; margin-top: 0.25rem; }
.trace-page .trace-tech-node:nth-child(5) { grid-column: 4 / span 2; margin-top: 0.25rem; }

.trace-page .trace-tech-node h3 {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  color: #dce8ea;
  font-size: 0.76rem;
  line-height: 1.55;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.trace-page .trace-tech-node .trace-inline-icon {
  width: 1.65rem;
  height: 1.65rem;
  flex-basis: 1.65rem;
}

.trace-page .trace-tech-preview {
  display: block;
  width: 100%;
  max-width: 390px;
  height: auto;
  aspect-ratio: 3 / 2;
  justify-self: end;
  object-fit: contain;
  object-position: center;
  border: 1px solid rgb(125 194 207 / 20%);
  border-radius: var(--radius-small, 8px);
  background: linear-gradient(145deg, #0d1822, #132331);
  box-shadow: inset 0 1px 0 rgb(235 247 249 / 4%), 0 12px 28px rgb(0 0 0 / 16%);
}

@media (hover: hover) and (pointer: fine) {
  .trace-page .trace-tech-node:hover {
    transform: translateY(-2px);
    border-color: rgb(53 214 232 / 42%);
    background: linear-gradient(145deg, rgb(34 57 72 / 94%), rgb(21 39 52 / 96%));
    box-shadow: inset 0 1px 0 rgb(235 247 249 / 4%), 0 8px 20px rgb(0 0 0 / 15%), 0 0 16px rgb(53 214 232 / 7%);
  }
}


.trace-page .trace-technology-note {

  position: relative;
  margin: clamp(1.3rem, 2.7vw, 2rem) 0 0;
  padding: clamp(1rem, 2.3vw, 1.45rem) clamp(1rem, 2.4vw, 1.65rem);
  border: 1px solid rgb(53 214 232 / 24%);
  border-left: 2px solid rgb(53 214 232 / 68%);
  border-radius: var(--radius-small, 8px);
  color: #c7d3d6;
  background:
    radial-gradient(ellipse at 96% 0%, rgb(53 214 232 / 7%), transparent 38%),
    linear-gradient(105deg, #172735, #172330 72%, #1b2730);
  box-shadow: inset 0 1px 0 rgb(235 247 249 / 4%), 0 10px 28px rgb(0 0 0 / 12%);
  font-size: 0.84rem;
  line-height: 1.75;

}

.trace-page .trace-technology-note strong {
  color: #eff8f8;
  font-weight: 600;
}


/* Solution Roadmap: a compact, numbered timeline with restrained cyan/orange lighting. */
.trace-page .trace-roadmap {
  background: var(--trace-bg);
}

.trace-page .trace-roadmap h2 {
  margin-bottom: 0.6rem;
  text-align: left;
}

.trace-page .trace-roadmap > .shell {
  text-align: left;
}

.trace-page .trace-roadmap > .shell > .section-kicker {
  justify-content: flex-start;
}

.trace-page .trace-roadmap>.shell>p:not(.section-kicker) {
  max-width: 720px;
  margin: 0.65rem 0 1.3rem;
  text-align: left;
}

@media (min-width: 1024px) {
  .trace-page .trace-roadmap>.shell>p:not(.section-kicker) {
    max-width: none;
    white-space: nowrap;
  }
}

.trace-page .trace-roadmap .trace-accelerator-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 1.55rem;
  border-top: 0;
  counter-reset: roadmap-step;
  text-align: center;
  background: transparent;
}

.trace-page .trace-roadmap .trace-accelerator-grid::before {
  display: none;
}

.trace-page .trace-roadmap .trace-accelerator-grid article,
.trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(odd),
.trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(even) {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 118px;
  padding: 2.5rem 0.75rem 0.75rem;
  border: 0;
  border-right: 0;
  background: transparent;
  counter-increment: roadmap-step;
  transition: transform 200ms ease, background-color 200ms ease;
}

.trace-page .trace-roadmap .trace-accelerator-grid article::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgb(53 214 232 / 55%);
  border-radius: 50%;
  background: #14232e;
  box-shadow: none;
  color: #b8eef2;
  content: counter(roadmap-step, decimal-leading-zero);
  font: 500 0.58rem/1 var(--font-mono);
  transition: border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.trace-page .trace-roadmap .trace-accelerator-grid article:hover {
  transform: translateY(-3px);
  background: transparent;
}

.trace-page .trace-roadmap .trace-accelerator-grid article:hover::before {
  border-color: var(--trace-orange);
  color: #fff0e4;
  box-shadow: none;
}

.trace-page .trace-roadmap .trace-accelerator-grid h3 {
  max-width: 220px;
  margin: 0 auto;
  color: #dce8ea;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Implementation: three ordered paragraphs form a quiet horizontal timeline. */

.trace-page .trace-implementation {

  background:

    radial-gradient(ellipse at 9% 12%, rgb(53 164 184 / 10%), transparent 40%),

    radial-gradient(ellipse at 94% 92%, rgb(89 132 160 / 6%), transparent 42%),

    linear-gradient(120deg, #142331, #172838 56%, #13212e);

}


.trace-page .trace-implementation .editorial-split {

  display: block;

}


.trace-page .trace-implementation .editorial-split>div:first-child {

  display: grid;

  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

  align-items: end;

  gap: 1rem;

  margin-bottom: 1.25rem;

}


.trace-page .trace-implementation .section-kicker {
  margin-bottom: 0.25rem;
}


.trace-page .trace-implementation .editorial-split h2 {

  max-width: none;

  margin: 0;

}


.trace-page .trace-implementation .editorial-prose {

  position: relative;

  display: grid;

  max-width: none;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1.15rem;

  padding: 0.8rem 0 0;

  border-top: 1px solid rgb(191 219 228 / 20%);

}


.trace-page .trace-implementation .editorial-prose::before {

  position: absolute;

  top: -2px;

  left: 0;

  width: min(34%, 330px);

  height: 3px;

  background: linear-gradient(90deg, var(--trace-cyan), rgb(233 154 99 / 55%), transparent);

  content: "";

}


.trace-page .trace-implementation .editorial-prose p {

  position: relative;

  margin: 0;

  padding: 0.8rem 0.6rem 0.35rem 0;

  color: #c1cdd1;

  font-size: 0.79rem;

  line-height: 1.78;

}


.trace-page .trace-implementation .editorial-prose p::before {

  position: absolute;

  z-index: 1;

  top: -4px;

  left: 0;

  width: 7px;

  height: 7px;

  margin: 0;

  border: 1px solid var(--trace-cyan-soft);

  border-radius: 50%;

  background: #172838;

  box-shadow: 0 0 0 4px rgb(53 214 232 / 8%);

  content: "";

}


/* Closing summary: blue-slate depth and a restrained cyan edge. */

.trace-page .trace-summary {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  padding-block: clamp(2.6rem, 4.3vw, 4rem) clamp(1.5rem, 2.5vw, 2.5rem);

  border-top: 1px solid rgb(101 194 209 / 20%);

  background:

    radial-gradient(ellipse at 92% 12%, rgb(53 214 232 / 12%), transparent 38%),

    linear-gradient(120deg, #172433 0%, #1a2b39 48%, #142431 100%);

}


.trace-page .trace-summary::before {

  position: absolute;

  top: 0;

  left: 8%;

  width: min(42vw, 520px);

  height: 1px;

  background: linear-gradient(90deg, transparent, var(--trace-cyan-soft), var(--trace-orange), transparent);

  content: "";

  filter: drop-shadow(0 0 6px rgb(53 214 232 / 30%));

}


.trace-page .trace-summary .editorial-split {

  align-items: start;

  gap: clamp(1.5rem, 4vw, 3.5rem);

  padding: clamp(1.2rem, 2.7vw, 1.9rem);

  border: 1px solid rgb(166 211 221 / 15%);

  border-left: 2px solid rgb(53 214 232 / 67%);

  background: linear-gradient(115deg, rgb(27 45 59 / 68%), rgb(19 34 47 / 55%));

  box-shadow: 0 16px 38px rgb(0 0 0 / 13%), inset 0 1px 0 rgb(232 248 250 / 3%);

}


.trace-page .trace-summary .section-kicker {
  color: #a9dce2;
}


.trace-page .trace-summary .editorial-split h2 {
  margin-bottom: 0;
}


.trace-page .trace-summary .editorial-prose {
  max-width: 780px;
  padding-top: 0;
}


.trace-page .trace-summary .editorial-prose p {

  margin-bottom: 0.65rem;

  color: #c3d0d4;

  line-height: 1.78;

}


/* Responsive compositions: preserve reading order and compact spacing. */

@media (max-width: 900px) {
  .trace-page .trace-accelerators .trace-accelerator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 1.2rem;
  }

  .trace-page .trace-accelerators .trace-accelerator-grid article {
    min-height: 100px;
  }

  .trace-page .trace-accelerators .trace-accelerator-grid article:nth-child(3n + 2),
  .trace-page .trace-accelerators .trace-accelerator-grid article:nth-child(3n) {
    margin-top: 0;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 0.4rem;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid::before {
    top: 15px;
    right: 0;
    bottom: 15px;
    left: 0;
    width: auto;
    height: auto;
    background: linear-gradient(90deg, transparent calc(50% - 1px), rgb(53 214 232 / 22%) 50%, transparent calc(50% + 1px));
  }

  .trace-page .trace-roadmap .trace-accelerator-grid article,
  .trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(odd),
  .trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(even) {
    min-height: 108px;
    padding-inline: 0.75rem;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(even) {
    padding-inline: 0.75rem;
  }


  .trace-page .product-hero-layout {

    grid-template-columns: minmax(0, 1fr);

    gap: 1.6rem;

    padding-block: 2.7rem 2.2rem;

  }


  .trace-page .page-copy {
    max-width: 790px;
  }


  .trace-page .page-copy h1 {
    font-size: clamp(2.4rem, 5.3vw, 3.2rem);
  }


  .trace-page .trace-visual {
    width: min(100%, 720px);
    min-height: 345px;
    justify-self: center;
  }


  .trace-page .trace-tech-nodes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 0.6rem;
  }

  .trace-page .trace-tech-node:nth-child(1) { grid-column: 1 / span 2; }
  .trace-page .trace-tech-node:nth-child(2) { grid-column: 3 / span 2; margin-top: 0; }
  .trace-page .trace-tech-node:nth-child(3) { grid-column: 1 / span 2; }
  .trace-page .trace-tech-node:nth-child(4) { grid-column: 3 / span 2; margin-top: 0; }
  .trace-page .trace-tech-node:nth-child(5) { grid-column: 2 / span 2; margin-top: 0; }

  .trace-page .trace-tech-node {
    min-height: 72px;
  }

  .trace-page .trace-tech-ecosystem {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .trace-page .trace-tech-preview {
    max-width: 420px;
    justify-self: center;
  }


  .trace-page .trace-implementation .editorial-prose {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


}


@media (max-width: 640px) {
  .trace-page .page-section h2 {
    font-size: clamp(1.85rem, 7.5vw, 2.5rem);
  }

  .trace-page .trace-accelerators .trace-accelerator-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .trace-page .trace-accelerators .trace-accelerator-grid::before {
    inset: 0.5rem auto 0.5rem 0.55rem;
    width: 1px;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background: linear-gradient(180deg, rgb(53 214 232 / 52%), rgb(53 214 232 / 22%) 68%, rgb(233 154 99 / 35%));
  }

  .trace-page .trace-accelerators .trace-accelerator-grid::after {
    display: none;
  }

  .trace-page .trace-accelerators .trace-accelerator-grid article,
  .trace-page .trace-accelerators .trace-accelerator-grid article:nth-child(3n + 2),
  .trace-page .trace-accelerators .trace-accelerator-grid article:nth-child(3n) {
    min-height: 0;
    margin: 0;
    padding: 0.8rem 0.35rem 0.8rem 1.8rem;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
    margin-top: 1.2rem;
    padding-left: 0.15rem;
    text-align: left;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid::before {
    top: 12px;
    right: auto;
    bottom: 12px;
    left: 15px;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, rgb(53 214 232 / 55%), rgb(53 214 232 / 22%) 70%, rgb(233 154 99 / 42%));
  }

  .trace-page .trace-roadmap .trace-accelerator-grid article,
  .trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(odd),
  .trace-page .trace-roadmap .trace-accelerator-grid article:nth-child(even) {
    min-height: 68px;
    padding: 0.2rem 0 1rem 2.8rem;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid article::before {
    left: 0;
    transform: none;
    width: 29px;
    height: 29px;
  }

  .trace-page .trace-roadmap .trace-accelerator-grid h3 {
    max-width: 100%;
    margin: 0;
  }


  .trace-page .shell {
    width: min(100% - 2rem, 1160px);
  }


  .trace-page .page-section {
    padding-block: 2.5rem;
  }


  .trace-page .product-hero-layout {
    gap: 1.4rem;
    padding-block: 2rem 1.7rem;
  }


  .trace-page .page-copy h1 {
    max-width: 500px;
    font-size: clamp(2.15rem, 8vw, 2.75rem);
  }


  .trace-page .page-copy .page-lede {
    font-size: 0.83rem;
  }


  .trace-page .trace-visual {
    min-height: 300px;
    padding: 0.9rem;
  }


  .trace-page .trace-path {
    gap: 0.65rem;
    margin-block: 1.15rem;
  }


  .trace-page .trace-node {
    min-height: 52px;
    grid-template-columns: 25px minmax(0, 1fr);
    padding: 0.35rem;
  }


  .trace-page .trace-node b {
    width: 22px;
  }


  .trace-page .trace-node span {
    font-size: 0.63rem;
  }


  .trace-page .trace-header,

  .trace-page .trace-foot {
    font-size: 0.42rem;
  }


  .trace-page .page-hero-foot {
    flex-wrap: wrap;
    font-size: 0.43rem;
  }


  .trace-page .editorial-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }

  .trace-page .trace-solution-intro-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
  }

  .trace-page .trace-story .editorial-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    padding: 1.25rem;
  }


  .trace-page .editorial-split h2 {
    max-width: none;
  }


  .trace-page .editorial-prose {
    padding-top: 0;
  }


  .trace-page .trace-capability-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }

  .trace-page .trace-capability-card {
    min-height: 0;
  }

  .trace-page .trace-capability-card-wide ul {
    grid-template-columns: minmax(0, 1fr);
  }


  .trace-page .trace-tech-nodes {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 1.2rem;
  }

  .trace-page .trace-tech-nodes::before {
    inset: 0.4rem auto 0.4rem 0.45rem;
    width: 1px;
    border: 0;
    border-radius: 0;
    clip-path: none;
    background: linear-gradient(180deg, rgb(53 214 232 / 48%), rgb(53 214 232 / 20%) 72%, rgb(233 154 99 / 28%));
  }

  .trace-page .trace-tech-node {
    grid-column: 1 !important;
    min-height: 0;
    margin-top: 0 !important;
    padding: 0.75rem 0.65rem 0.75rem 0.85rem;
    border: 0;
    border-bottom: 1px solid rgb(145 192 205 / 14%);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .trace-page .trace-tech-preview {
    width: 100%;
    max-width: 420px;
    justify-self: center;
  }

  .trace-page .trace-tech-node::before {
    top: 1.1rem;
    left: -0.78rem;
    width: 5px;
    height: 5px;
    border: 1px solid rgb(53 214 232 / 70%);
    border-radius: 50%;
    background: #14232e;
  }

  .trace-page .trace-accelerators .trace-accelerator-grid article::before {
    position: absolute;
    top: 1.2rem;
    left: -1.43rem;
    width: 5px;
    height: 5px;
    border: 1px solid rgb(53 214 232 / 68%);
    border-radius: 50%;
    background: #14232e;
    content: "";
  }

  .trace-page .trace-implementation .editorial-split>div:first-child {

    grid-template-columns: minmax(0, 1fr);

    gap: 0;

  }


  .trace-page .trace-implementation .editorial-prose {

    grid-template-columns: minmax(0, 1fr);

    gap: 0.7rem;

    padding: 0 0 0 1.1rem;

    border-top: 0;

    border-left: 1px solid rgb(191 219 228 / 20%);

  }


  .trace-page .trace-implementation .editorial-prose::before {

    top: 0;

    left: -2px;

    width: 3px;

    height: 75%;

    background: linear-gradient(var(--trace-cyan), rgb(233 154 99 / 55%), transparent);

  }


  .trace-page .trace-implementation .editorial-prose p {
    padding-block: 0.35rem;
  }


  .trace-page .trace-implementation .editorial-prose p::before {
    top: 0.55rem;
    left: -1.4rem;
  }


  .trace-page .trace-summary {
    padding-block: 2.5rem;
  }


  .trace-page .trace-summary .editorial-split {
    padding: 1rem;
  }

}


@media (max-width: 380px) {

  .trace-page .shell {
    width: calc(100% - 1.4rem);
  }


  .trace-page .trace-visual {
    padding: 0.7rem;
  }


  .trace-page .trace-header,

  .trace-page .trace-foot {
    font-size: 0.37rem;
    letter-spacing: 0.02em;
  }


  .trace-page .trace-node {
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 0.25rem;
    padding: 0.28rem;
  }


  .trace-page .trace-node b {
    width: 19px;
    font-size: 0.4rem;
  }


  .trace-page .trace-node span {
    font-size: 0.57rem;
  }


}


@media (prefers-reduced-motion: reduce) {

  .trace-page .trace-accelerators .trace-accelerator-grid article:hover,
  .trace-page .trace-capability-card:hover,
  .trace-page .trace-tech-node:hover {
    transform: none;
  }

  .trace-page .trace-capability-card,
  .trace-page .trace-capability-card::before,
  .trace-page .trace-tech-node,
  .trace-page .trace-tech-node::before,
  .trace-page .trace-tech-node::after {
    transition-duration: 0.01ms !important;
  }

  .trace-page .trace-pathline::after,
  .trace-page .trace-node b {
    animation: none !important;
  }

  .trace-page \*,

  .trace-page \*::before,

  .trace-page \*::after {

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

  }

}

/* Reusable, repeatable product-page scroll reveals. */
.motion-ready .trace-page [data-reveal] {
  transition-delay: var(--product-reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .trace-page [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Lightweight surface feedback on the remaining editorial elements. */
.trace-page .trace-story .editorial-split,
.trace-page .trace-solution-intro,
.trace-page .trace-technology-note,
.trace-page .trace-tech-preview,
.trace-page .trace-summary > .shell.editorial-split,
.trace-page .trace-implementation .editorial-prose p {
  transition: opacity 680ms ease, transform 680ms var(--ease), border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .trace-page .trace-story .editorial-split:hover,
  .trace-page .trace-solution-intro:hover,
  .trace-page .trace-technology-note:hover,
  .trace-page .trace-tech-preview:hover,
  .trace-page .trace-summary > .shell.editorial-split:hover {
    border-color: rgb(53 214 232 / 32%);
    box-shadow: inset 0 1px 0 rgb(235 247 249 / 4%), 0 10px 26px rgb(0 0 0 / 14%), 0 0 18px rgb(53 214 232 / 6%);
  }

  .trace-page .trace-implementation .editorial-prose p:hover {
    color: #e0eef0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trace-page .trace-story .editorial-split,
  .trace-page .trace-solution-intro,
  .trace-page .trace-technology-note,
  .trace-page .trace-tech-preview,
  .trace-page .trace-summary > .shell.editorial-split,
  .trace-page .trace-implementation .editorial-prose p {
    transition: none !important;
  }
}