/* Overall page composition measured from the reference site.
   Component skins stay in theme.css; this file owns only page format: chrome,
   hero geometry, section rhythm, grids, sticky storytelling, and reflow. */

html {
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  overflow-x: clip;
}

.container-wide {
  width: min(calc(100% - 48px), var(--container-wide));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Flat reference-style chrome
   -------------------------------------------------------------------------- */
.site-header,
.site-header.is-scrolled {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  border-bottom: 1px solid var(--hairline);
  background: var(--c-overlay);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.reading-progress {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
}

.nav-shell {
  width: min(calc(100% - 48px), var(--container));
  height: 100%;
  margin-inline: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  width: fit-content;
  flex: none;
}

.desktop-nav {
  position: absolute;
  top: 0;
  left: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  height: 100%;
  transform: translateX(-50%);
}

.site-header .desktop-nav > .nav-dropdown,
.site-header .desktop-nav > .primary-nav-link {
  flex: 0 0 108px;
  width: 108px;
}

.site-header .desktop-nav > .nav-dropdown > .nav-trigger,
.site-header .desktop-nav > .primary-nav-link {
  box-sizing: border-box;
  width: 100%;
  font-size: .9rem;
}

.site-header .desktop-nav > .nav-dropdown > .nav-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 10px;
}

.site-header .desktop-nav > .primary-nav-link {
  padding-inline: 10px;
}

/* This sheet loads after legacy.css, so the mobile hand-off to the
   menu-toggle must be re-asserted here or the base rule above wins. */
@media (max-width: 1080px) {
  .desktop-nav,
  .nav-cta {
    display: none;
  }
}

/* Caret drawn in CSS: U+25BE is absent from the Noto Sans SC subset (and from
   the full face), so a text glyph would fall back per-platform. */
.nav-trigger span {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.primary-nav-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 180ms var(--ease), background-color 180ms var(--ease);
}

.primary-nav-link:hover,
.primary-nav-link:focus-visible,
.primary-nav-link[aria-current="page"] {
  background: var(--bg-soft);
  color: var(--fg-strong);
}

.nav-cta {
  justify-self: end;
  min-height: 40px;
  padding-inline: 18px;
  border-radius: var(--radius);
}

.nav-cta-secondary {
  margin-left: auto;
}

/* --------------------------------------------------------------------------
   Centered hero + oversized product media
   -------------------------------------------------------------------------- */
.page-index .hero {
  min-height: auto;
  padding: 80px 0 96px;
  text-align: center;
}

.page-index .hero-grid {
  width: min(calc(100% - 48px), var(--container));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.page-index .hero-copy {
  width: min(100%, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.page-index .hero-copy > .eyebrow {
  margin-bottom: 70px;
}

.page-index .hero h1 {
  width: 100%;
  max-width: 1050px;
  margin: 0;
  font-size: var(--step-h1);
  line-height: 1.12;
  text-wrap: balance;
}

.page-index .hero-lead {
  max-width: 68ch;
  margin: 34px auto 0;
  font-size: 1.0625rem;
  line-height: 1.9;
  text-wrap: pretty;
}

.page-index .hero-actions {
  justify-content: center;
  margin-top: 34px;
}

.page-index .hero-proof {
  justify-content: center;
  margin: 34px 0 0;
}

.page-index .hero-visual {
  width: 100%;
  max-width: var(--container);
  margin-top: 72px;
  padding: 0;
}

.page-index .product-window-hero {
  position: relative;
  width: 100%;
  max-width: none;
  border-radius: 24px;
  overflow: hidden;
}

/* Hero visual: switch between the live workspace and the demo video.
   The video fills the WHOLE window (edge to edge), matching the reference's
   full-bleed hero media instead of only the workspace area below the bar. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
  overflow: hidden;
  background: var(--fg-strong);
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-window-hero.is-video .hero-video {
  display: block;
}

.product-window-hero.is-video .window-bar,
.product-window-hero.is-video .workspace {
  visibility: hidden;
}

.hero-view-toggle {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
}

.hero-tab {
  appearance: none;
  border: 0;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-muted);
  font: 500 .62rem/1 var(--font-tech);
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}

.hero-tab.is-active {
  background: var(--fg-strong);
  color: var(--on-accent);
}

/* The workspace idles with a "live" feel: AI detection boxes breathe. */
.page-index .ai-boxes rect {
  animation: hero-box-pulse 2.6s ease-in-out infinite;
}
.page-index .ai-boxes rect:nth-child(2) { animation-delay: .45s; }
.page-index .ai-boxes rect:nth-child(3) { animation-delay: .9s; }
.page-index .ai-boxes rect:nth-child(4) { animation-delay: 1.35s; }

@keyframes hero-box-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.page-index .progress-track span {
  animation: hero-progress 3s ease-in-out infinite;
}

.page-index .task.current i {
  animation: hero-current 1.6s ease-in-out infinite;
}

@keyframes hero-progress {
  0%, 100% { width: 34%; }
  50% { width: 86%; }
}

@keyframes hero-current {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 760px) {
  .page-index .product-window-hero .window-status {
    display: none;
  }
  .hero-tab {
    padding: 5px 10px;
  }
}

/* --------------------------------------------------------------------------
   Homepage section system
   -------------------------------------------------------------------------- */
.format-muted {
  padding-block: var(--section-space);
  border-block: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.format-section-heading {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.format-section-heading .eyebrow {
  margin-inline: auto;
}

.format-section-heading h2 {
  text-wrap: balance;
}

.format-section-heading > p:last-child {
  max-width: 62ch;
  margin: 24px auto 0;
  font-size: 1rem;
  line-height: 1.85;
}

.capability-link,
.industry-card,
.case-card,
.platform-card,
.value-grid > article,
.pain-card,
.capfeat-card,
.verify-card,
.task-card {
  --reveal-y: 20px;
  --reveal-duration: 450ms;
}

.capability-overview .format-section-heading {
  max-width: 1000px;
}

.capability-overview .capability-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 64px;
}

.capability-overview .capability-link {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  margin: 0;
  padding: 40px 32px 44px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-raised);
  box-shadow: none;
  text-align: center;
}

.capability-overview .capability-link:hover {
  background: var(--bg-soft);
  color: var(--fg-strong);
  transform: none;
}

.capability-overview .capability-link:hover h3 {
  color: var(--fg-strong);
}

.capability-overview .capability-mini {
  height: 240px;
  margin-top: 0;
}

.capability-overview .capability-link-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 40ch;
}

.capability-overview .capability-number {
  color: var(--fg-faint);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
}

.capability-overview .capability-link h3 {
  max-width: 22ch;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
  text-wrap: balance;
}

.capability-overview .capability-link > .capability-arrow {
  position: absolute;
  inset: auto 30px 30px auto;
  color: var(--fg-faint);
  font-size: 1rem;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms;
}

.capability-overview .capability-link:hover > .capability-arrow {
  transform: translate(2px, 2px);
  color: var(--fg-strong);
}

.capability-mini {
  position: relative;
  width: 100%;
  height: 185px;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--bg-soft);
  corner-shape: squircle;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.capability-link:hover .capability-mini {
  transform: translateY(-4px);
}

.capability-mini-extract svg {
  position: absolute;
  inset: 16px auto auto 18px;
  width: 72%;
  height: calc(100% - 32px);
  stroke: var(--fg-faint);
  stroke-width: 1.2;
}

.capability-mini-extract rect {
  stroke: var(--accent);
  stroke-width: 1.6;
  animation: capability-detect 3.2s ease-in-out infinite;
}

.capability-mini-extract rect:nth-of-type(2) {
  animation-delay: 0.18s;
}

.capability-mini-extract rect:nth-of-type(3) {
  animation-delay: 0.36s;
}

.capability-mini-rows {
  position: absolute;
  inset: 28px 20px auto auto;
  width: 25%;
  display: grid;
  gap: 24px;
}

.capability-mini-rows span {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--fg-strong);
  opacity: 0.72;
  transform-origin: left;
  animation: capability-row 3.2s ease-in-out infinite;
}

.capability-mini-rows span:nth-child(2) {
  animation-delay: 0.18s;
}

.capability-mini-rows span:nth-child(3) {
  animation-delay: 0.36s;
}

.capability-mini-replace {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 24px;
}

.capability-mini-replace > div:not(.capability-mini-scan) {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.capability-mini-replace > div:not(.capability-mini-scan) > span {
  padding: 12px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  background: var(--bg-raised);
  color: var(--fg-muted);
  font-family: var(--font-tech);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.capability-mini-replace > div:not(.capability-mini-scan) > span:last-child {
  border-color: var(--status-pass);
  color: var(--fg-strong);
}

.capability-mini-replace b {
  color: var(--fg-faint);
  font-weight: 500;
}

.capability-mini-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.capability-mini-scan span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent);
  opacity: 0;
  animation: capability-scan 3.4s ease-in-out infinite;
}

.capability-mini-scan span:nth-child(2) {
  animation-delay: 0.22s;
}

.capability-mini-scan span:nth-child(3) {
  animation-delay: 0.44s;
}

.capability-mini-audit {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr;
  align-items: stretch;
  padding: 18px;
}

.capability-mini-doc,
.capability-mini-verdict {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--bg-raised);
}

.capability-mini-doc span,
.capability-mini-verdict span {
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--hairline-strong);
}

.capability-mini-doc span:nth-child(2),
.capability-mini-verdict span:nth-child(2) {
  width: 76%;
}

.capability-mini-engine {
  display: grid;
  place-items: center;
}

.capability-mini-engine span {
  width: 30px;
  height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: 0 0 0 10px var(--decor-tint);
  animation: capability-pulse 2.6s ease-in-out infinite;
}

.capability-mini-verdict span {
  background: var(--status-pass);
  opacity: 0.72;
}

.capability-mini-verdict span:last-child {
  width: 54%;
  background: var(--status-warn);
}

/* Card 04 mini: a driver at the centre of a multimodal sensing field —
   dashed detection frame, driver core, and a sweeping sensor orbit. */
.capability-mini-cabin {
  isolation: isolate;
  background: var(--bg-soft);
}

.capability-mini-cabin-frame {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 52%;
  width: 58px;
  height: 104px;
  border: 1px dashed var(--accent);
  border-radius: 6px;
  transform: translate(-50%, -50%);
  animation: capability-detect 3.2s ease-in-out infinite;
}

.capability-mini-cabin-core {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 52%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
}

.capability-mini-cabin-core::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 2px;
  height: 34px;
  background: var(--accent);
  transform: translateX(-50%);
}

.capability-mini-orbit {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: 132px;
  height: 132px;
  border: 1px dashed var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: capability-orbit 5s linear infinite;
}

@keyframes capability-detect {
  0%, 18%, 100% { opacity: 0.22; }
  32%, 62% { opacity: 1; }
}

@keyframes capability-row {
  0%, 18%, 100% { transform: scaleX(0.35); opacity: 0.25; }
  36%, 66% { transform: scaleX(1); opacity: 0.72; }
}

@keyframes capability-scan {
  0% { left: 8%; opacity: 0; }
  20%, 72% { opacity: 0.42; }
  88%, 100% { left: 92%; opacity: 0; }
}

@keyframes capability-pulse {
  0%, 100% { transform: scale(0.9); box-shadow: 0 0 0 7px var(--decor-tint); }
  50% { transform: scale(1); box-shadow: 0 0 0 15px var(--decor-tint-strong); }
}

@keyframes capability-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.format-signal-bands {
  padding: 72px 0;
  overflow: hidden;
  background: var(--bg);
}

.signal-rail {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
}

.signal-rail::before,
.signal-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  z-index: 1;
  pointer-events: none;
}

.signal-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}

.signal-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.signal-track {
  width: max-content;
  display: flex;
  align-content: center;
  will-change: transform;
}

.signal-rail-reverse .signal-track {
  margin-top: 12px;
}

.signal-track span {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  margin-right: 12px;
  padding: 0 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  color: var(--fg-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.workflow-section {
  padding: var(--section-space) 0 0;
  background: var(--bg);
}

.workflow-layout {
  margin-top: 88px;
}

.workflow-layout.is-desktop {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
  align-items: start;
  gap: clamp(56px, 7vw, 104px);
}

.workflow-stack {
  min-width: 0;
  margin: 0;
  border: 0;
}

.workflow-story {
  min-height: min(64vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  background: var(--bg);
}

/* legacy.css still carries the old zebra rhythm
   (.feature-section:nth-of-type(2n) { background: var(--bg-canvas) }), which
   outranks the rule above on specificity. In the sticky-story layout each
   article is only as wide as the copy column, so the tint renders as a hard
   vertical seam against the white section rather than a full-bleed band.
   The narrative gets its rhythm from spacing now, so cancel it outright. */
.workflow-stack .feature-section:nth-of-type(2n) {
  background: var(--bg);
}

.workflow-story + .workflow-story {
  border-top: 0;
  margin-top: 96px;
}

.workflow-story .feature-grid {
  width: 100%;
  min-height: min(64vh, 560px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  padding-inline: 0;
}

.workflow-story .feature-copy,
.workflow-story .feature-visual {
  grid-column: auto;
  grid-row: auto;
}

.workflow-story .feature-copy {
  max-width: 470px;
  opacity: 0.42;
  transition: opacity 300ms var(--ease);
}

.workflow-story.is-active .feature-copy {
  opacity: 1;
}

.workflow-story .numbered-flow li,
.workflow-story .scenario-list li,
.workflow-story .risk-grid > div {
  opacity: 0.48;
  transition: opacity 350ms var(--ease);
}

.workflow-story.is-active .numbered-flow li,
.workflow-story.is-active .scenario-list li,
.workflow-story.is-active .risk-grid > div {
  opacity: 1;
}

.workflow-story.is-active .numbered-flow li:nth-child(2),
.workflow-story.is-active .scenario-list li:nth-child(2),
.workflow-story.is-active .risk-grid > div:nth-child(2) {
  transition-delay: 50ms;
}

.workflow-story.is-active .numbered-flow li:nth-child(3),
.workflow-story.is-active .scenario-list li:nth-child(3),
.workflow-story.is-active .risk-grid > div:nth-child(3) {
  transition-delay: 100ms;
}

.workflow-story.is-active .numbered-flow li:nth-child(4),
.workflow-story.is-active .scenario-list li:nth-child(4),
.workflow-story.is-active .risk-grid > div:nth-child(4) {
  transition-delay: 150ms;
}

.workflow-story.is-active .numbered-flow li:nth-child(5) {
  transition-delay: 200ms;
}

.workflow-story .feature-copy h2,
.workflow-story .feature-title {
  font-size: clamp(1.7rem, 2.3vw, 2.15rem);
  line-height: 1.25;
  text-wrap: balance;
}

/* Full-width supporting bands that follow the workflow narrative. The
   capability band and use-case grid formerly lived inside the tall
   workflow-story articles, which broke the sticky-stage scroll sync and
   forced multi-column content into the narrow narrative column. */
.workflow-support {
  margin-top: 80px;
}

.workflow-support + .workflow-support {
  margin-top: 0;
}

.workflow-support .capability-band {
  margin: 0;
  padding: 48px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-raised);
}

.workflow-support .usecase-grid {
  margin-top: 40px;
  overflow: hidden;
  border-radius: 24px;
}

.workflow-stage {
  position: sticky;
  top: 18vh;
  z-index: 0;
  height: fit-content;
  align-self: start;
}

.workflow-layout:not(.is-desktop) .workflow-stage {
  display: none;
}

.workflow-stage-shell {
  position: relative;
  height: min(68vh, 640px);
  min-height: 540px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-soft);
}

.js .workflow-stage .workflow-stage-panel {
  position: absolute;
  inset: 24px;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition:
    opacity 450ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .workflow-stage .workflow-stage-panel.is-before {
  transform: translateY(-20px);
}

.js .workflow-stage .workflow-stage-panel.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.workflow-stage-panel > .product-window {
  max-height: 100%;
  overflow: hidden;
  border-radius: 20px;
}

.workflow-stage-panel .extract-cta {
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   CAPABILITY 04 — multimodal cabin intelligence
   Left: the eight-stage AI process flow plus the use-case grid.
   Right: a vertical (~4:5) product panel whose hero element is a real CSS 3D
   wireframe viewport — contour rings, two perpendicular bounding planes and a
   perspective floor, rotating on the model's vertical axis. It reads as an
   unrendered modelling viewport rather than a marketing illustration.
   Panel sizing is tight because the sticky stage clips at min(68vh, 640px).
   -------------------------------------------------------------------------- */
.feature-lead-sub {
  margin-top: 14px;
}

.cabin-section-label {
  margin: 36px 0 14px;
  color: var(--fg-faint);
  font: 500 0.58rem/1 var(--font-tech);
  letter-spacing: 0.14em;
}

.cabin-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hairline);
}

.cabin-steps li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--hairline);
}

.cabin-step-no {
  color: var(--accent);
  font: 500 0.72rem/1.7 var(--font-tech);
  letter-spacing: 0.06em;
}

.cabin-steps b {
  display: block;
  margin-bottom: 5px;
  color: var(--fg-strong);
  font-size: 0.98rem;
  font-weight: 600;
}

.cabin-steps p {
  max-width: 56ch;
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.86rem;
  line-height: 1.8;
}

/* Sensing-input matrix — the six signal sources that feed the pipeline,
   lifted out of step 01's prose so the inputs are scannable. */
.cabin-inputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--hairline);
}

.cabin-inputs > div {
  padding: 14px 16px;
  background: var(--bg-raised);
}

.cabin-inputs span {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--fg-faint);
  font: 500 0.56rem/1.4 var(--font-tech);
  letter-spacing: 0.06em;
}

.cabin-inputs b {
  display: block;
  margin-bottom: 4px;
  color: var(--fg-strong);
  font-size: 0.88rem;
  font-weight: 600;
}

.cabin-inputs p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* Risk-to-response matrix — step 08's grading rules as a real table. */
.cabin-risk {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
}

.cabin-risk table {
  width: 100%;
  border-collapse: collapse;
}

.cabin-risk th,
.cabin-risk td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  font-size: 0.8rem;
  line-height: 1.65;
}

.cabin-risk thead th {
  background: var(--bg-soft);
  color: var(--fg-faint);
  font: 500 0.58rem/1 var(--font-tech);
  letter-spacing: 0.1em;
}

.cabin-risk tbody th {
  width: 22%;
  color: var(--fg-strong);
  font-weight: 600;
  white-space: nowrap;
}

.cabin-risk td {
  color: var(--fg-muted);
}

.cabin-risk tbody tr:last-child th,
.cabin-risk tbody tr:last-child td {
  border-bottom: 0;
}

.cabin-usecases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--hairline);
}

.cabin-usecases article {
  padding: 20px;
  background: var(--bg-raised);
}

.cabin-usecases h3 {
  margin: 0 0 7px;
  font-size: 0.95rem;
  font-weight: 600;
}

.cabin-usecases p {
  margin: 0;
  color: var(--fg-muted);
  font-size: 0.82rem;
  line-height: 1.75;
}

/* Five use cases in a two-column grid would leave a hole, so the last spans. */
.cabin-usecases article:last-child:nth-child(odd) {
  grid-column: span 2;
}

.cabin-window {
  width: 100%;
  max-width: 470px;
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  display: grid;
  grid-template-rows: auto 1fr;
}

.cabin-workspace {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 6px;
  padding: 8px;
  background: var(--ui-canvas-bg);
}

.cabin-stage-block {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}

.cabin-sysbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabin-sysbar li {
  padding: 3px 8px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--ui-panel-bg);
  color: var(--fg-faint);
  font: 500 0.46rem/1.3 var(--font-tech);
  letter-spacing: 0.06em;
}

.cabin-block {
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--ui-panel-bg);
}

.cabin-label {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  color: var(--fg-faint);
  font: 500 0.46rem/1 var(--font-tech);
  letter-spacing: 0.1em;
}

.cabin-label em {
  color: var(--accent);
  font-style: normal;
}

/* ---- 3D wireframe viewport ---- */
.cabin-viewport {
  position: relative;
  min-height: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--ui-canvas-bg);
  perspective: 1150px;
}

.cabin-floor {
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 260%;
  height: 66%;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: translateX(-50%) rotateX(74deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, black, transparent 82%);
}

.cabin-model {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotateX(-24deg) rotateY(0deg);
  transform-style: preserve-3d;
  animation: cabin-orbit 20s linear infinite;
}

@keyframes cabin-orbit {
  from { transform: rotateX(-24deg) rotateY(0deg); }
  to { transform: rotateX(-24deg) rotateY(360deg); }
}

.cabin-axis {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 292px;
  margin-top: -146px;
  background: var(--accent);
  opacity: 0.28;
}

/* Horizontal contour slices tracing a seated-driver body volume. Because each
   slice is an ellipse (wider than deep), the spin is actually legible. */
.cabin-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: var(--d);
  margin-top: calc(var(--d) / -2);
  margin-left: calc(var(--w) / -2);
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0.62;
  transform: translateY(var(--y)) rotateX(90deg);
}

.cabin-ring:nth-child(2) { --y: -118px; --w: 32px; --d: 29px; }
.cabin-ring:nth-child(3) { --y: -102px; --w: 46px; --d: 44px; }
.cabin-ring:nth-child(4) { --y: -86px; --w: 27px; --d: 29px; }
.cabin-ring:nth-child(5) { --y: -69px; --w: 97px; --d: 36px; }
.cabin-ring:nth-child(6) { --y: -49px; --w: 84px; --d: 46px; }
.cabin-ring:nth-child(7) { --y: -27px; --w: 65px; --d: 40px; }
.cabin-ring:nth-child(8) { --y: -6px; --w: 78px; --d: 49px; }
.cabin-ring:nth-child(9) { --y: 19px; --w: 68px; --d: 46px; }
.cabin-ring:nth-child(10) { --y: 46px; --w: 52px; --d: 38px; }
.cabin-ring:nth-child(11) { --y: 73px; --w: 44px; --d: 32px; }
.cabin-ring:nth-child(12) { --y: 101px; --w: 33px; --d: 26px; }
.cabin-ring:nth-child(13) { --y: 118px; --w: 38px; --d: 44px; }

/* Two perpendicular bounding planes — the giveaway that this is a 3D volume. */
.cabin-profile {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 282px;
  margin-top: -141px;
  margin-left: -50px;
  border: 1px dashed var(--accent);
  opacity: 0.34;
}

.cabin-profile-side {
  width: 62px;
  margin-left: -31px;
  transform: rotateY(90deg);
}

.cabin-profile-d1 {
  width: 86px;
  margin-left: -43px;
  opacity: 0.2;
  transform: rotateY(45deg);
}

.cabin-profile-d2 {
  width: 86px;
  margin-left: -43px;
  opacity: 0.2;
  transform: rotateY(135deg);
}

.cabin-plane {
  position: absolute;
  z-index: 3;
  left: 8%;
  right: 8%;
  top: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: cabin-plane 4.2s ease-in-out infinite;
}

@keyframes cabin-plane {
  0%, 100% { top: 12%; opacity: 0.3; }
  50% { top: 84%; opacity: 1; }
}

.cabin-callouts {
  position: absolute;
  z-index: 4;
  left: 8px;
  top: 8px;
  display: grid;
  gap: 4px;
  justify-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cabin-callouts li {
  padding: 2px 6px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--ui-scrim);
  color: var(--fg-muted);
  font: 500 0.4rem/1.35 var(--font-tech);
  letter-spacing: 0.05em;
}

/* ---- readouts ---- */
.cabin-readout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0;
  background: var(--hairline);
}

.cabin-readout > div {
  display: grid;
  gap: 2px;
  padding: 6px 7px;
  background: var(--ui-panel-bg);
}

.cabin-readout dt {
  color: var(--fg-faint);
  font: 500 0.42rem/1 var(--font-tech);
  letter-spacing: 0.07em;
}

.cabin-readout dd {
  margin: 0;
  color: var(--fg);
  font: 500 0.56rem/1 var(--font-tech);
}

.cabin-readout dd.is-pass {
  color: var(--status-pass);
}

.cabin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.cabin-flow {
  counter-reset: cabin-step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--hairline);
}

.cabin-flow li {
  counter-increment: cabin-step;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  background: var(--ui-panel-bg);
  color: var(--fg-muted);
  font: 500 0.46rem/1 var(--font-tech);
  letter-spacing: 0.06em;
  animation: cabin-stage 6s ease-in-out infinite;
}

.cabin-flow li::before {
  content: "0" counter(cabin-step);
  color: var(--accent);
  font-size: 0.42rem;
}

.cabin-flow li:nth-child(2) { animation-delay: 1s; }
.cabin-flow li:nth-child(3) { animation-delay: 2s; }
.cabin-flow li:nth-child(4) { animation-delay: 3s; }
.cabin-flow li:nth-child(5) { animation-delay: 4s; }
.cabin-flow li:nth-child(6) { animation-delay: 5s; }

@keyframes cabin-stage {
  0% { background: var(--accent-soft); color: var(--fg-strong); }
  16%, 100% { background: var(--ui-panel-bg); color: var(--fg-muted); }
}

.workflow-value-band {
  padding: 80px 0;
  border-top: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.workflow-value-band .value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-raised);
}

.workflow-value-band .value-grid article {
  min-height: 210px;
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.workflow-value-band .value-grid article:last-child {
  border-right: 0;
}

.platform-section,
.industries-section,
.cases-section {
  padding-block: var(--section-space);
  background: var(--bg);
}

.platform-section .section-intro,
.cases-section .section-intro {
  max-width: 780px;
  margin-inline: auto;
}

.platform-section .platform-card {
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
  align-items: center;
  gap: 56px;
  margin-top: 24px;
  padding: 48px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-raised);
}

.platform-section .section-intro + .platform-card {
  margin-top: 72px;
}

.platform-section .platform-card-dark {
  min-height: 420px;
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
  background: var(--bg-soft);
}

.industries-section {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.industries-section .split-heading {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.industries-section .split-heading > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.industries-section .split-heading > p {
  max-width: 62ch;
  margin-top: 24px;
}

.industries-section .industry-cloud {
  position: relative;
  min-height: 650px;
  display: block;
  margin-top: 72px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.industries-section .industry-cloud::before,
.industries-section .industry-cloud::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.industries-section .industry-cloud::before {
  width: 430px;
  height: 430px;
}

.industries-section .industry-cloud::after {
  width: 280px;
  height: 280px;
  border-style: dashed;
}

.industry-cloud-core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 164px;
  height: 164px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
  transform: translate(-50%, -50%);
}

.industry-cloud-core img {
  width: 42px;
  height: 42px;
}

.industry-cloud-core b {
  color: var(--fg-strong);
  font-size: 0.88rem;
}

.industries-section .industry-cloud .industry-card {
  position: absolute;
  z-index: 3;
  width: min(30%, 300px);
  min-height: 0;
  height: 205px;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.industries-section .industry-cloud .industry-card h3 {
  margin: 26px 0 12px;
  font-size: 1.1rem;
}

.industries-section .industry-cloud .industry-card ul {
  gap: 4px;
  font-size: 0.72rem;
  line-height: 1.5;
}

.industries-section .industry-cloud .industry-card:nth-of-type(1) {
  left: 7%;
  top: 0;
}

.industries-section .industry-cloud .industry-card:nth-of-type(2) {
  right: 7%;
  top: 0;
}

.industries-section .industry-cloud .industry-card:nth-of-type(3) {
  left: 0;
  top: 218px;
}

.industries-section .industry-cloud .industry-card:nth-of-type(4) {
  right: 0;
  top: 218px;
}

.industries-section .industry-cloud .industry-card:nth-of-type(5) {
  left: 12%;
  bottom: 0;
}

.industries-section .industry-cloud .industry-card:nth-of-type(6) {
  right: 12%;
  bottom: 0;
}

.cases-section .case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 72px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-raised);
}

.cases-section .case-card {
  border: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.cases-section .case-card:nth-child(even) {
  border-right: 0;
}

.cases-section .case-card:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.contact-section {
  padding-top: 80px;
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   Capability pages: centered product story, then structured panels
   -------------------------------------------------------------------------- */
.page-capability .hero {
  min-height: auto;
  padding: 80px 0 var(--section-space);
  text-align: center;
}

.page-capability .hero-grid {
  width: min(calc(100% - 48px), var(--container));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.page-capability .hero-copy {
  width: min(100%, 980px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.page-capability .hero-copy > .eyebrow {
  margin-bottom: 64px;
}

.page-capability .hero h1 {
  max-width: 1020px;
  margin: 0;
  font-size: var(--step-h1);
  line-height: 1.12;
  text-wrap: balance;
}

.page-capability .hero-lead {
  max-width: 70ch;
  margin: 32px auto 0;
  font-size: 1.0625rem;
  line-height: 1.9;
}

.page-capability .hero .tag-list,
.page-capability .hero .button-row {
  justify-content: center;
}

.page-capability .hero .tag-list {
  margin: 30px 0 0;
}

.page-capability .hero .button-row {
  margin-top: 34px;
}

.page-capability .hero-visual {
  width: 100%;
  max-width: var(--container);
  margin-top: 72px;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: 32px;
  background: var(--bg-soft);
}

.page-capability .hero-visual > .product-window {
  width: 100%;
  max-width: none;
  border-radius: 24px;
}

.page-capability .pain-section {
  padding-block: var(--section-space);
  border-block: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.page-capability .pain-section .section-intro,
.page-capability .seo-section .section-intro,
.page-capability .faq-section .section-intro {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.page-capability .pain-section .section-intro .eyebrow,
.page-capability .seo-section .section-intro .eyebrow,
.page-capability .faq-section .section-intro .eyebrow {
  margin-inline: auto;
}

.page-capability .pain-section .section-intro > p:last-child,
.page-capability .seo-section .section-intro > p:last-child {
  max-width: 62ch;
  margin: 24px auto 0;
}

.page-capability .pain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 64px;
  overflow: hidden;
  border: 1px solid var(--hairline-strong);
  border-radius: 28px;
  background: var(--bg-raised);
}

.page-capability .pain-card {
  min-height: 240px;
  margin: 0;
  padding: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-capability .pain-card:nth-child(odd) {
  border-right: 1px solid var(--hairline);
}

.page-capability .pain-card:nth-child(-n + 2) {
  border-bottom: 1px solid var(--hairline);
}

.page-capability .seo-section,
.page-capability .try-section,
.page-capability .faq-section,
.page-capability .proof-section {
  padding-block: var(--section-space);
  background: var(--bg);
}

.page-capability .capfeat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 64px;
}

.page-capability .capfeat-card {
  min-height: 300px;
  padding: 34px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-raised);
  box-shadow: none;
}

.page-capability .capfeat-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  min-height: 240px;
}

.page-capability .try-section {
  padding-top: 0;
}

.page-capability .try-band {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 56px;
  padding: 52px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-soft);
}

.page-capability .try-points {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--bg-raised);
}

.page-capability #how-to-choose {
  border-block: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.page-capability .verify-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 64px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-raised);
}

.page-capability .verify-card {
  min-height: 260px;
  padding: 30px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.page-capability .verify-card:nth-child(3n) {
  border-right: 0;
}

.page-capability .verify-card:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.page-capability .scene-section {
  background: var(--bg);
}

.page-capability .task-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 64px;
}

.page-capability .task-card {
  min-height: 300px;
  padding: 30px;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-raised);
  box-shadow: none;
}

.page-capability .faq-section {
  border-top: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.page-capability .faq-section .container {
  max-width: 900px;
}

.page-capability .faq-list {
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-raised);
}

.page-capability .faq-item {
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.page-capability .faq-item:last-child {
  border-bottom: 0;
}

.page-capability .proof-section {
  padding-bottom: 0;
}

.page-capability .proof-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
  align-items: center;
  gap: 56px;
  padding: 52px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-soft);
}

.page-capability .proof-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--bg-raised);
}

.page-capability .proof-stats > div {
  min-height: 132px;
  padding: 24px;
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.page-capability .proof-stats > div:nth-child(even) {
  border-right: 0;
}

.page-capability .proof-stats > div:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.page-capability .tool-final {
  padding: 80px 0 0;
  background: var(--bg);
}

.page-capability .tool-final-inner {
  padding: 72px 48px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-soft);
}

/* --------------------------------------------------------------------------
   Tool pages: centered claim, oversized live workbench below
   -------------------------------------------------------------------------- */
.page-tool .tool-hero {
  min-height: auto;
  padding: 80px 0 0;
  text-align: center;
}

.page-tool .tool-hero-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.page-tool .tool-hero-copy {
  width: min(100%, 960px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.page-tool .tool-hero-copy > .eyebrow {
  margin-bottom: 56px;
}

.page-tool .tool-hero-copy h1 {
  margin: 0;
  font-size: var(--step-h1);
  line-height: 1.12;
  text-wrap: balance;
}

.page-tool .tool-hero-copy .hero-lead {
  max-width: 66ch;
  margin: 30px auto 0;
  font-size: 1.0625rem;
  line-height: 1.9;
}

.page-tool .tool-hero-copy .button-row {
  justify-content: center;
  margin-top: 34px;
}

.page-tool .tool-note {
  margin-top: 18px;
  text-align: center;
}

.page-tool .tool-hero-visual {
  width: 100%;
  max-width: var(--container);
  margin-top: 72px;
}

.page-tool .tool-hero-visual > .product-window {
  border: 1px solid var(--hairline);
  border-radius: 24px;
  background: var(--bg-soft);
}

.page-tool .tool-workbench {
  padding-top: 96px;
  padding-bottom: var(--section-space);
  background: var(--bg);
}

.page-tool .tool-workbench .section-intro {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.page-tool .tool-workbench .section-intro .eyebrow {
  margin-inline: auto;
}

.page-tool .tool-workbench .workbench {
  margin-top: 56px;
}

.page-tool .tool-workbench .tool-breadcrumb {
  max-width: 780px;
  margin: 0 auto 56px;
  text-align: center;
}

.page-tool .tool-explain,
.page-tool .tool-case,
.page-tool .seo-section,
.page-tool .scene-section {
  padding-block: var(--section-space);
  background: var(--bg);
}

.page-tool .tool-explain {
  border-block: 1px solid var(--hairline);
  background: var(--bg-soft);
}

.page-tool .tool-explain .explain-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.page-tool .tool-case {
  border-top: 1px solid var(--hairline);
}

.page-tool .seo-section .section-intro,
.page-tool .scene-section .section-intro {
  max-width: 780px;
  margin-inline: auto;
  text-align: center;
}

.page-tool .seo-section .section-intro .eyebrow,
.page-tool .scene-section .section-intro .eyebrow {
  margin-inline: auto;
}

.page-tool .seo-section .section-intro > p:last-child,
.page-tool .scene-section .section-intro > p:last-child {
  max-width: 62ch;
  margin: 24px auto 0;
}

.page-tool .tool-final {
  padding: 80px 0 0;
  background: var(--bg);
}

.page-tool .tool-final-inner {
  padding: 72px 48px;
  border: 1px solid var(--hairline);
  border-radius: 28px;
  background: var(--bg-soft);
  text-align: center;
}

.page-tool .tool-final-inner .button-row {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Compact reference-style footer
   -------------------------------------------------------------------------- */
.site-footer {
  display: block;
  margin-top: 96px;
  padding: 44px 0 28px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) minmax(320px, 1fr) minmax(180px, auto);
  align-items: start;
  gap: 64px;
}

.footer-brand {
  max-width: 380px;
}

.footer-brand .brand {
  margin-bottom: 16px;
}

.footer-brand p,
.footer-company {
  color: var(--fg-muted);
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-nav-group p {
  margin-bottom: 4px;
  color: var(--fg-strong);
  font-size: 0.78rem;
  font-weight: 600;
}

.footer-nav-group a,
.footer-contact a,
.footer-contact span {
  color: var(--fg-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.footer-nav-group a:hover,
.footer-contact a:hover {
  color: var(--fg-strong);
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.footer-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.footer-qr img {
  display: block;
  width: 108px;
  height: 111px;
  object-fit: contain;
  background: var(--bg-raised);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.footer-qr span {
  font-size: 0.7rem;
  color: var(--fg-faint);
}

.footer-meta {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--fg-faint);
  font-size: 0.75rem;
}

@media (max-width: 1080px) {
  .nav-shell {
    gap: 12px;
  }

  .primary-nav-link {
    padding-inline: 12px;
  }

  .workflow-layout {
    margin-top: 64px;
  }

  .workflow-story {
    min-height: 0;
    padding: 80px 0;
    border-top: 1px solid var(--hairline);
  }

  .workflow-story .feature-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    align-items: center;
    gap: 40px;
  }

  .workflow-story .feature-copy {
    opacity: 1;
  }

  .workflow-story .numbered-flow li,
  .workflow-story .scenario-list li,
  .workflow-story .risk-grid > div {
    opacity: 1;
    transition: none;
  }

  .workflow-story .feature-visual {
    position: static;
    width: 100%;
    padding: 20px;
    border: 1px solid var(--hairline);
    border-radius: 28px;
    background: var(--bg-soft);
    opacity: 1;
    transform: none;
  }

  .industries-section .industry-cloud {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .industries-section .industry-cloud::before,
  .industries-section .industry-cloud::after {
    display: none;
  }

  .industry-cloud-core {
    position: relative;
    left: auto;
    top: auto;
    grid-column: 1 / -1;
    justify-self: center;
    transform: none;
  }

  .industries-section .industry-cloud .industry-card {
    position: static;
    width: auto;
    min-height: 210px;
  }

  .platform-section .platform-card,
  .platform-section .platform-card-dark {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
  }

  .page-capability .try-band,
  .page-capability .proof-inner {
    grid-template-columns: 1fr;
  }

  .page-capability .task-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-main {
    grid-template-columns: 1.2fr 1fr;
  }

  .footer-contact {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  html {
    scroll-padding-top: calc(var(--header-h-mobile) + 16px);
  }

  .format-muted {
    padding-block: var(--section-space-mobile);
  }

  .site-header,
  .site-header.is-scrolled {
    height: var(--header-h-mobile);
  }

  .nav-shell {
    width: min(calc(100% - 32px), var(--container));
  }

  .page-index .hero {
    padding: 52px 0 72px;
    text-align: center;
  }

  .page-index .hero-grid {
    width: min(calc(100% - 32px), var(--container));
  }

  .page-index .hero-copy {
    align-items: center;
  }

  .page-index .hero-copy > .eyebrow {
    margin-bottom: 66px;
  }

  .page-index .hero h1 {
    font-size: var(--step-h1-sm);
    line-height: 1.12;
  }

  .page-index .hero-lead {
    margin-top: 32px;
    font-size: 1rem;
    line-height: 1.9;
  }

  .page-index .hero-actions,
  .page-index .hero-proof {
    justify-content: center;
  }

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

  .page-index .hero-actions .button {
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .page-index .hero-proof {
    gap: 6px;
  }

  .page-index .hero-proof li {
    padding-inline: 9px;
    font-size: 0.67rem;
  }

  .page-index .hero-visual {
    margin-top: 58px;
  }

  .page-index .product-window-hero {
    border-radius: 18px;
  }

  .capability-overview .capability-nav {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 48px;
  }

  .capability-overview .capability-link {
    min-height: 360px;
    padding: 28px 24px 40px;
  }

  .capability-overview .capability-link > .capability-arrow {
    inset: auto 22px 22px auto;
  }

  .capability-overview .capability-mini {
    height: 200px;
    margin-top: 0;
  }

  .industries-section .industry-cloud {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 48px;
  }

  .industry-cloud-core {
    width: 132px;
    height: 132px;
    margin-bottom: 20px;
  }

  .industries-section .industry-cloud .industry-card {
    min-height: 0;
  }

  .workflow-layout {
    width: min(calc(100% - 32px), var(--container));
    margin-top: 52px;
  }

  .workflow-story {
    padding: 40px 0;
  }

  .workflow-story + .workflow-story {
    margin-top: 0;
  }

  .workflow-story .feature-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .workflow-story .feature-visual {
    padding: 12px;
    border-radius: 24px;
  }

  .workflow-support {
    margin-top: 56px;
  }

  .workflow-support .capability-band {
    padding: 28px 20px;
  }

  .workflow-support .band-steps {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .workflow-support .usecase-grid {
    grid-template-columns: 1fr;
  }

  .page-capability .hero {
    padding: 52px 0 var(--section-space-mobile);
  }

  .page-capability .hero-grid {
    width: min(calc(100% - 32px), var(--container));
  }

  .page-capability .hero-copy > .eyebrow {
    margin-bottom: 56px;
  }

  .page-capability .hero h1 {
    font-size: var(--step-h1-sm);
  }

  .page-capability .hero-lead {
    margin-top: 28px;
    font-size: 1rem;
  }

  .page-capability .hero .tag-list,
  .page-capability .hero .button-row {
    justify-content: center;
  }

  .page-capability .hero .button-row {
    width: 100%;
  }

  .page-capability .hero .button-row .button {
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .page-capability .hero-visual {
    margin-top: 56px;
    padding: 12px;
    border-radius: 24px;
  }

  .page-capability .hero-visual > .product-window {
    border-radius: 18px;
  }

  .page-capability .pain-section,
  .page-capability .seo-section,
  .page-capability .try-section,
  .page-capability .faq-section,
  .page-capability .proof-section {
    padding-block: var(--section-space-mobile);
  }

  .page-capability .pain-grid,
  .page-capability .capfeat-grid,
  .page-capability .verify-grid,
  .page-capability .task-grid,
  .page-capability .proof-inner {
    grid-template-columns: 1fr;
  }

  .page-capability .pain-grid,
  .page-capability .capfeat-grid,
  .page-capability .verify-grid,
  .page-capability .task-grid {
    margin-top: 48px;
  }

  .page-capability .pain-card,
  .page-capability .verify-card {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .page-capability .pain-card:last-child,
  .page-capability .verify-card:last-child {
    border-bottom: 0;
  }

  .page-capability .capfeat-card:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .page-capability .try-section {
    padding-top: 0;
  }

  .page-capability .try-band,
  .page-capability .proof-inner {
    gap: 36px;
    padding: 28px;
  }

  .page-capability .proof-stats {
    grid-template-columns: 1fr;
  }

  .page-capability .proof-stats > div,
  .page-capability .proof-stats > div:nth-child(even),
  .page-capability .proof-stats > div:nth-last-child(-n + 2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .page-capability .proof-stats > div:last-child {
    border-bottom: 0;
  }

  .page-capability .tool-final {
    padding-top: 56px;
  }

  .page-capability .tool-final-inner {
    padding: 48px 24px;
  }

  .page-tool .tool-hero {
    padding: 52px 0 0;
  }

  .page-tool .tool-hero-copy > .eyebrow {
    margin-bottom: 48px;
  }

  .page-tool .tool-hero-copy h1 {
    font-size: var(--step-h1-sm);
  }

  .page-tool .tool-hero-copy .hero-lead {
    margin-top: 26px;
    font-size: 1rem;
  }

  .page-tool .tool-hero-copy .button-row {
    width: 100%;
  }

  .page-tool .tool-hero-copy .button-row .button {
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .page-tool .tool-hero-visual {
    margin-top: 56px;
  }

  .page-tool .tool-workbench {
    padding-top: 64px;
    padding-bottom: var(--section-space-mobile);
  }

  .page-tool .tool-workbench .tool-breadcrumb {
    margin-bottom: 40px;
  }

  .page-tool .tool-explain,
  .page-tool .tool-case,
  .page-tool .seo-section,
  .page-tool .scene-section {
    padding-block: var(--section-space-mobile);
  }

  .page-tool .tool-explain .explain-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .page-tool .tool-final {
    padding-top: 56px;
  }

  .page-tool .tool-final-inner {
    padding: 48px 24px;
  }

  .site-footer {
    margin-top: 72px;
    padding-bottom: 24px;
  }

  .footer-main,
  .footer-nav {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-contact {
    grid-column: auto;
  }

  .footer-meta {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-nav-link,
  .capability-mini,
  .workflow-story .feature-copy,
  .js .workflow-stage .workflow-stage-panel {
    transition: none;
  }

  .capability-mini-extract rect,
  .capability-mini-rows span,
  .capability-mini-scan span,
  .capability-mini-engine span,
  .capability-mini-orbit {
    animation: none;
  }

  /* The cabin panel's 3D wireframe IS the content — a frozen ring stack is
     unreadable, not merely un-animated. legacy.css clamps every animation to
     .01ms/1 iteration with !important, so undo exactly those two longhands
     (using the shorthand here would reset the stagger delays to 0). The hero
     workspace idle pulses stay clamped. */
  .cabin-model,
  .cabin-plane,
  .cabin-flow li {
    animation-iteration-count: infinite !important;
  }

  .cabin-model { animation-duration: 20s !important; }
  .cabin-plane { animation-duration: 4.2s !important; }
  .cabin-flow li { animation-duration: 6s !important; }
}


/* --------------------------------------------------------------------------
   Project case pages (case-*.html) — editorial article layout.
   Modelled on the reference blog: narrow reading column, hairline-ruled
   post header, plain typographic rhythm, border-left asides, ruled tables.
   -------------------------------------------------------------------------- */

.case-wrap {
  max-width: 800px;
  padding-top: 40px;
}

.case-head {
  padding-bottom: 34px;
  border-bottom: 1px solid var(--hairline);
}

.case-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--fg-muted);
  text-decoration: none;
  transition: color 180ms var(--ease);
}

.case-back:hover {
  color: var(--fg-strong);
}

.case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 28px 0 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--fg-muted);
}

.case-dot {
  padding: 0 10px;
}

.case-head h1 {
  margin: 14px 0 0;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: normal;
  color: var(--fg-strong);
  text-wrap: balance;
}

.case-lead {
  margin: 14px 0 0;
  max-width: 58ch;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.case-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 30px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline);
}

.case-stats > div {
  padding: 0 16px;
  border-left: 1px solid var(--hairline);
}

.case-stats > div:first-child {
  padding-left: 0;
  border-left: 0;
}

.case-stats span {
  display: block;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

.case-stats b {
  display: block;
  margin-top: 6px;
  font: 600 1.15rem/1.2 var(--font-tech);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--fg-strong);
}

.case-stats i {
  margin-left: 3px;
  font-size: 0.72rem;
  font-style: normal;
  color: var(--fg-muted);
}

.case-article {
  padding: 36px 0 8px;
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--fg);
}

.case-article > * + * {
  margin-top: 16px;
}

.case-article p {
  max-width: 70ch;
  text-wrap: pretty;
}

.case-article b {
  font-weight: 600;
  color: var(--fg-strong);
}

.case-article a {
  font-weight: 500;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.case-article a:hover {
  color: var(--fg-strong);
  text-decoration-thickness: 2px;
}

.case-article h2 {
  margin: 56px 0 18px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--fg-strong);
}

.case-list {
  margin: 16px 0;
  padding-left: 24px;
}

.case-list li {
  max-width: 70ch;
  margin-bottom: 10px;
}

.case-list li:last-child {
  margin-bottom: 0;
}

.case-quote {
  margin: 24px 0;
  padding-left: 16px;
  border-left: 1px solid var(--hairline);
}

.case-quote p {
  max-width: 70ch;
  opacity: 0.8;
}

.case-code {
  margin: 20px 0;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-soft);
  font: 0.86rem/1.9 var(--font-tech);
}

.case-schematic {
  display: block;
  width: 100%;
  min-width: 800px;
  height: auto;
}

.case-schematic .cs-body {
  fill: var(--bg-soft);
  stroke: var(--fg-muted);
  stroke-width: 1.4;
}

.case-schematic .cs-line {
  fill: none;
  stroke: var(--fg-muted);
  stroke-width: 1.2;
}

.case-schematic .cs-fov {
  fill: none;
  stroke: var(--fg-faint);
  stroke-width: 1.1;
  stroke-dasharray: 5 5;
}

.case-schematic .cs-zone {
  fill: none;
  stroke: var(--fg-faint);
  stroke-width: 1.1;
  stroke-dasharray: 4 4;
}

.case-schematic .cs-cam {
  fill: var(--accent);
}

.case-schematic .cs-cam-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.3;
}

.case-schematic .cs-seat {
  fill: var(--c-white);
  stroke: var(--fg-muted);
  stroke-width: 1.2;
}

.case-schematic .cs-node-box {
  fill: var(--bg-soft);
  stroke: var(--hairline-strong);
  stroke-width: 1.2;
}

.case-schematic .cs-node {
  fill: var(--accent-strong);
}

.case-schematic .cs-text {
  fill: var(--fg-muted);
  font: 12px var(--font-tech);
}

.case-schematic .cs-text-strong {
  fill: var(--fg-strong);
  font: 600 13px var(--font-tech);
}

.case-schematic .cs-text-small {
  fill: var(--fg-faint);
  font: 11px var(--font-tech);
}

.case-schematic .cs-node-text {
  fill: var(--on-accent);
  font: 600 13px var(--font-tech);
}

.case-schematic .cs-node-sub {
  fill: var(--c-white-70);
  font: 11px var(--font-tech);
}

.case-schematic .cs-arrow {
  fill: none;
  stroke: var(--fg-muted);
  stroke-width: 1.2;
}

.case-figure {
  margin: 24px 0;
}

.case-table {
  overflow-x: auto;
}

.case-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  line-height: 1.7;
}

.case-table th,
.case-table td {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: top;
  color: var(--fg-muted);
}

.case-table thead th {
  padding: 12px 16px 12px 0;
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--hairline-strong);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fg-strong);
}

.case-table tbody th {
  font-weight: 600;
  color: var(--fg-strong);
  white-space: nowrap;
}

.case-table td b {
  font-weight: 600;
  color: var(--fg-strong);
}

.case-table td span {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--fg-faint);
}

.case-table tbody tr:last-child th,
.case-table tbody tr:last-child td {
  border-bottom: 0;
}

.case-table.num td,
.case-table.num tbody th {
  font-family: var(--font-tech);
  font-variant-numeric: tabular-nums;
}

.case-table.num thead th,
.case-table.num td {
  text-align: right;
}

.case-table.num tbody th {
  text-align: left;
}

.case-figure figcaption {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--fg-muted);
}

.case-figure figcaption b {
  margin-right: 6px;
  font-family: var(--font-tech);
  font-weight: 600;
  color: var(--fg);
}

.case-reject {
  margin: 24px 0;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.case-reject h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg-strong);
}

.case-reject h3 span {
  font: 500 0.72rem/1 var(--font-tech);
  letter-spacing: 0.02em;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--status-warn-bg);
  color: var(--status-warn);
}

.case-reject--fail h3 span {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

.case-reject p {
  max-width: 70ch;
}

.case-reject p + p {
  margin-top: 8px;
}

.case-sources {
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}

.case-sources h2 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}

.case-refs {
  margin: 0;
  padding-left: 20px;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--fg-muted);
}

.case-refs li {
  margin-bottom: 8px;
}

.case-refs a {
  font-weight: 500;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 4px;
  word-break: break-all;
}

.case-colophon {
  margin: 38px 0 72px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--fg-muted);
}

@media (max-width: 760px) {
  .case-head h1 {
    font-size: 1.75rem;
  }

  .case-stats {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 20px;
  }

  .case-stats > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }

  .case-stats > div:nth-child(even) {
    padding-right: 0;
  }

  .case-article {
    font-size: 0.98rem;
  }

  .case-table table {
    font-size: 0.84rem;
  }

  .case-table th,
  .case-table td {
    padding: 8px 10px 8px 0;
  }

  .case-table tbody th {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   .page-landing — composition measured from the reference site. The signature
   is a full-height 1px frame with 20px gutters, sections inside it alternating
   between #fafafa and the pale band, and near-black rounded cards inset on
   top. All rules are .page-landing-scoped.
   -------------------------------------------------------------------------- */

/* The frame: 20px gutters, hairline verticals, full page height. */
.page-landing .landing-frame {
  width: min(100%, var(--container-wide));
  margin-inline: auto;
  border-inline: 1px solid var(--c-frame);
  background: var(--c-page);
}

.page-landing .landing-rail {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: 40px;
}

/* Announcement bar */
.landing-note {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 56px;
  background: var(--c-night);
  color: var(--c-night-text);
}

.landing-note p {
  margin: 0;
  color: var(--c-night-text);
  font-size: 0.82rem;
  line-height: 1.5;
  text-align: center;
}

.landing-note p b {
  font-weight: 600;
}

.landing-note a {
  color: var(--c-lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.landing-note-close {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--c-night-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.landing-note-close:hover {
  background: var(--c-white-14);
  color: var(--c-night-text);
}

.page-landing.is-note-closed .landing-note {
  display: none;
}

/* Hero: a rounded media block spanning the frame, with centered overlay copy */
.landing-hero {
  padding: 22px 20px 0;
}

.landing-hero-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 620px;
  padding: 80px 32px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--c-night);
  text-align: center;
}

/* The reference's full-bleed hero photograph is stood in for by the site's own
   demo reel, looping muted behind the headline. It is decoration, not content:
   the copy on top is what the page is saying, so the video carries no label and
   the headline is not wrapped in role="img" (which would make the whole subtree
   presentational and hide the h1 and the CTA from assistive tech). */
/* Layering is video 0 / scrim 1 / copy 2. Keep this selector at class depth:
   .landing-shot-tag is also a direct child and sets position:absolute later in
   the file, so it must not be out-specified here. */
.landing-hero-media > * {
  position: relative;
  z-index: 2;
}

.landing-hero-media > .landing-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.landing-hero-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim between video and copy: one flat wash over the whole frame plus the
   brand's lime corner. Deliberately shape-free — a graduated patch behind the
   copy was tried and rejected, because any shape that varies across a moving
   picture reads as a smudge sitting on the video rather than as part of it.
   The cost is that the wash has to be as strong at the frame's edges as it is
   behind the copy, so it cannot be tuned per-region. */
.landing-hero-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--c-video-scrim);
  background-image: linear-gradient(160deg, var(--c-lime-veil) 0%, transparent 46%);
}

.landing-hero h1 {
  max-width: 17ch;
  margin: 0;
  color: var(--c-night-text);
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: balance;
  /* The scrim is light enough to watch the reel through, which is not light
     enough to read on by itself. The halo is what pays for it — see the scrim
     token. Per-glyph, so it adds no shape to the picture. */
  text-shadow: 0 1px 8px var(--c-copy-halo), 0 0 2px var(--c-copy-halo-tight);
}

.landing-hero-lead {
  max-width: 54ch;
  margin: 0;
  color: var(--c-night-lead);
  font-size: 1.02rem;
  line-height: 1.7;
  text-wrap: pretty;
  /* Body-size text needs 4.5:1 where the headline needs 3:1, so this is the
     element that actually sets how light the scrim can be. */
  text-shadow: 0 1px 8px var(--c-copy-halo), 0 0 2px var(--c-copy-halo-tight);
}

/* The tag labels the reel underneath it, so it only belongs on screen when a
   reel is actually there. Two states have none: reduced motion, where the
   media query below hides the video outright, and JS-off, where no source is
   ever assigned (scripts.js sets it) and the element never paints anything.
   Both leave the dark panel and its scrim, which is a finished-looking state
   on its own — a chip reading "demo video" over an empty panel is not. */
.no-js .landing-shot-tag {
  display: none;
}

.landing-shot-tag {
  position: absolute;
  left: 18px;
  bottom: 16px;
  padding: 6px 12px;
  border: 1px solid var(--c-white-20);
  border-radius: var(--radius-pill);
  color: var(--c-night-lead);
  font-family: var(--font-tech);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
}

/* Integration / format logo strip — a continuous marquee.
   Marks only, no wordmark: the supplied PNGs are already black-on-transparent,
   so nothing is recoloured here and no <span> sits beside them.

   Every mark is rendered at one canvas height, which makes the BOX spacing
   uniform: `column-gap` is exactly the distance from one img box to the next.
   It is not exactly the ink spacing, and the difference is worth knowing. Each
   PNG carries a transparent margin, and those margins are neither uniform nor
   proportional — the source files run 186-290px tall with a 1-14px alpha
   bbox inset (10-adient.png has 6px left / 1px right; 11-f-logo.png 12px / 9px;
   the other nine 11-14px). Scaling each to the same render height multiplies
   its margin by its own 34/H, so the baked margins land between roughly 0.1px
   and 2.3px a side. Measured at the 72px and 48px gaps this strip used to run:
   a nominal 72px box gap showed 74.3-75.4px of ink, a spread of ~1.1px, and
   48px showed 49.9-50.8px. The offset is a property of the PNGs and not of the
   gap — about +2.3-3.4px at the 34px desktop canvas and +1.9-2.8px at the 28px
   mobile one — so it carries to whatever gap is set here. That spread is below
   the threshold anyone can see at this size, so the strip reads as evenly
   spaced — but do not claim the ink gaps are identical, and do not try to fix
   the spread by adjusting `gap`, which cannot reach into a PNG's own padding. */
.landing-logos {
  padding: 30px 0;
  border-block: 1px solid var(--c-frame);
  background: var(--c-page);
}

/* Viewport clips the track and feathers both edges, so names dissolve in and
   out instead of being chopped off at the frame. */
.landing-logos-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--c-black) 7%, var(--c-black) 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--c-black) 7%, var(--c-black) 93%, transparent 100%);
}

/* Three identical groups sit side by side and the track slides by exactly one
   of them, so group two lands on group one's first pixel and the seam never
   shows. What the count has to satisfy: the group that lands at x=0 must span
   the whole strip by itself, because at full travel everything to its left has
   slid off. At the 72px gap this was first built at, a group measured 1234px
   against a 1278px strip, so two fell short — the right end went blank for the
   last third of every cycle and then snapped back — and three, at roughly
   3700px, held. At today's 104px the group is 1586px and the third pass is
   headroom rather than load; it stays because the keyframe below is written
   against /3, and because any return to a narrower gap needs it again.

   The duration is not a free knob: it is set against the group's width, so
   widening the gaps lengthens the group and the duration has to rise with it.
   These numbers hold the marks at the ~47px/s they were signed off at; leaving
   the duration alone when the gap changes speeds the strip up as a side effect
   of a change that was only ever about spacing. */
.landing-logos-track {
  display: flex;
  width: max-content;
  animation: landing-logos-drift 33s linear infinite;
}

.landing-logos:hover .landing-logos-track {
  animation-play-state: paused;
}

/* -100% / 3, not -33.333%: the track is exactly three groups wide, so this is
   exactly one group with nothing left over to accumulate as drift. */
@keyframes landing-logos-drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100% / 3)); }
}

/* Halving the group's horizontal padding on each side makes the seam gap
   (52 + 52) identical to the internal gap, so the loop has no wide spot. Padding
   must stay at exactly half the gap whenever the gap changes.
   Only column-gap is set here: a `gap: 0 104px` shorthand would zero row-gap,
   which the reduced-motion wrap below needs, and the mobile rule further down
   would then zero it a second time. */
.landing-logos-group {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  column-gap: 104px;
  margin: 0;
  padding: 0 52px;
  list-style: none;
}

.landing-logos li {
  display: flex;
  align-items: center;
}

/* Height is the single knob for mark size; width follows the file's own aspect
   ratio. The intrinsic size still comes from the width/height attributes so the
   box is reserved before load. */
.landing-logos img {
  display: block;
  flex: none;
  width: auto;
  height: 34px;
  opacity: 0.85;
}

/* Centered section headings */
.landing-head {
  padding: 96px 40px 0;
  text-align: center;
}

.landing-head h2 {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.12;
  font-weight: 300;
  text-wrap: balance;
}

.landing-head p {
  max-width: 62ch;
  margin: 20px auto 0;
  color: var(--c-body-grey);
  font-size: 1rem;
  line-height: 1.75;
}

/* Feature card — full width tinted panel: media left, copy right */
.landing-card {
  margin: 34px 20px 0;
  padding: 26px;
  border-radius: 18px;
  background: var(--c-tint-lime);
}

.landing-card-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: 40px;
}

.landing-card-copy h3 {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.16;
  font-weight: 700;
}

.landing-card-copy h3 .landing-card-title,
.landing-card-copy h3 .landing-card-subtitle {
  display: block;
}

.landing-card-copy h3 .landing-card-subtitle {
  margin-top: 0.18em;
  color: var(--c-mint);
}

.landing-card-copy p {
  max-width: 46ch;
  margin: 0 0 22px;
  color: var(--c-body-grey-2);
  font-size: 0.94rem;
  line-height: 1.72;
}

/* Feature pair — the screenshot sits directly on the page, flush with the copy
   beneath it, like the reference's own feature pair (image stacked above the
   heading, no tint frame). The dark ground is what keeps the dashed placeholder
   label readable against the light canvas. */
.landing-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 20px 20px 0;
}

.landing-duo-media {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.landing-duo-media .landing-media {
  aspect-ratio: 16 / 9;
}

.landing-duo h3 {
  margin: 26px 0 12px;
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.18;
  font-weight: 300;
}

.landing-duo p {
  margin: 0 0 20px;
  color: var(--c-body-grey);
  font-size: 0.94rem;
  line-height: 1.72;
}

/* Placeholder media panel */
.landing-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 14px;
  background: var(--c-night);
}

.landing-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--c-white-14) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.45;
}

.landing-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--c-lime-veil-2) 0%, transparent 52%);
}

.landing-media span {
  position: relative;
  padding: 9px 18px;
  border: 1px dashed var(--c-white-20);
  border-radius: var(--radius-pill);
  color: var(--c-night-muted);
  font-family: var(--font-tech);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
}

/* Real-screenshot variant: drop the placeholder's dot-grid, lime veil and
   dashed label, and show the screenshot in full. `contain` keeps the whole
   frame visible — a capture wider than 16:9 letterboxes onto the dark ground
   instead of getting cropped at the sides. */
.landing-media-shot {
  aspect-ratio: 16 / 9;
}
.landing-media-shot::before,
.landing-media-shot::after,
.landing-media-shot > span {
  display: none;
}
.landing-media-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Dark pipeline band — near-black rounded card inset on the light page.
   The card mirrors the reference ("One platform. Full data pipeline."): a
   450px-tall flex row, heading on the left, contain-fitted reel on the right.
   The format caption sits below the card on the light page. */
.landing-band {
  margin: 34px 20px 0;
}

.landing-band-card {
  border-radius: 16px;
  background: var(--c-night);
  overflow: hidden;
}

.landing-band-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 450px;
}

.landing-band h2 {
  margin: 0;
  padding: 24px 24px 24px 60px;
  color: var(--c-tint-mist);
  font-size: clamp(2.2rem, 4.7vw, 3.75rem);
  line-height: 1;
  font-weight: 300;
  letter-spacing: -0.035em;
}

/* Right column: flex-1 fills whatever the 450px card leaves after the heading
   column. object-fit:contain shows the full 16:9 frame, never cropped,
   letterboxed inside the box exactly like the reference. */
.landing-band-video {
  flex: 1;
  align-self: stretch;
  padding: 24px;
}

.landing-band-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing-band-note {
  margin: 22px 0 0 60px;
  color: var(--c-faint);
  font-family: var(--font-tech);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
}

/* Three-column service row on the pale band */
.landing-services {
  margin-top: 34px;
  padding: 72px 40px 80px;
  background: var(--c-band);
}

.landing-services-head {
  max-width: 40ch;
  margin: 0 0 44px;
}

.landing-services-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.14;
  font-weight: 300;
}

.landing-services-head p {
  margin: 18px 0 0;
  color: var(--c-body-grey);
  font-size: 0.98rem;
  line-height: 1.75;
}

.landing-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.landing-services-grid .landing-media {
  aspect-ratio: 16 / 10;
}
.landing-services-grid .landing-media img { object-fit: cover; }

.landing-services-grid h3 {
  margin: 22px 0 10px;
  font-size: 1.4rem;
  font-weight: 300;
}

.landing-services-grid p {
  margin: 0 0 18px;
  color: var(--c-body-grey);
  font-size: 0.9rem;
  line-height: 1.7;
}

/* Customer spotlight — dark card carrying the orchid statistics */
.landing-spot {
  margin: 34px 20px 0;
  padding: 40px;
  border-radius: 18px;
  background: var(--c-night);
}

.landing-spot-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.landing-spot-kicker {
  margin: 0 0 12px;
  color: var(--c-night-faint);
  font-size: 0.76rem;
}

.landing-spot-top h2 {
  margin: 0;
  color: var(--c-night-text);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 300;
}

.landing-spot-logos {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.landing-spot-logos li {
  color: var(--c-night-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.landing-spot-body {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 36px;
}

.landing-spot-quote .landing-media {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
}

.landing-spot-quote blockquote {
  margin: 18px 0 0;
  padding: 0;
}

.landing-spot-quote blockquote p {
  margin: 0;
  color: var(--c-night-text);
  font-size: 0.94rem;
  line-height: 1.65;
}

.landing-spot-copy h3 {
  margin: 0 0 14px;
  color: var(--c-night-text);
  font-size: clamp(1.4rem, 2.3vw, 1.95rem);
  line-height: 1.2;
  font-weight: 300;
}

.landing-spot-copy > p {
  margin: 0 0 22px;
  color: var(--c-night-muted);
  font-size: 0.9rem;
  line-height: 1.72;
}

.landing-spot-stats {
  display: flex;
  gap: 44px;
  margin: 0 0 26px;
  padding: 0;
}

.landing-spot-stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.landing-spot-stats dt {
  color: var(--c-orchid);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.landing-spot-stats dd {
  margin: 0;
  color: var(--c-night-faint);
  font-size: 0.76rem;
}

.landing-spot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-carousel-btns {
  display: flex;
  gap: 10px;
}

/* The reference's carousel controls are bare circular outline buttons. */
.landing-carousel-btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--c-white-20);
  border-radius: 50%;
  background: transparent;
  color: var(--c-night-text);
  cursor: pointer;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}

.landing-carousel-btns button:hover {
  border-color: var(--c-lime);
  background: var(--c-white-14);
}

.page-landing .button-on-dark {
  border-color: var(--c-white-20);
  background: transparent;
  color: var(--c-night-text);
}

.page-landing .button-on-dark:hover {
  border-color: var(--c-white-20);
  background: var(--c-white-14);
  color: var(--c-night-text);
}

/* Sector carousel — tall cards with vertical titles, active one in lime */
.landing-sector {
  padding: 34px 0 0;
}

.landing-sector-head {
  padding: 0 40px 26px;
  text-align: center;
}

.landing-sector-head h2 {
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  font-weight: 300;
}

.landing-sector-head p {
  margin: 16px auto 0;
  max-width: 56ch;
  color: var(--c-body-grey);
  font-size: 0.96rem;
}

.landing-sector-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.landing-sector-logos li {
  color: var(--c-logo-grey-2);
  font-size: 0.9rem;
  font-weight: 600;
}

.landing-sector-cta {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.landing-rail-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 0 40px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.landing-rail-scroll::-webkit-scrollbar {
  display: none;
}

.landing-sector-card {
  position: relative;
  flex: 0 0 232px;
  display: flex;
  align-items: flex-end;
  min-height: 350px;
  padding: 24px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--c-band);
  scroll-snap-align: start;
  text-decoration: none;
  transition: background 220ms var(--ease);
}

.landing-sector-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Collapsed cards carry only a vertical title, as on the reference. No
   transform here: vertical-rl already sets CJK upright and reading top to
   bottom, and adding rotate(180deg) on top of it turns every glyph upside
   down. The body copy and the screenshot are held out of the collapsed state
   on purpose — set vertically they overrun the card and overlap each other. */
.landing-sector-card h3 {
  writing-mode: vertical-rl;
}

.landing-sector-card p,
.landing-sector-card span,
.landing-sector-card .landing-media {
  display: none;
}

.landing-sector-card.is-open {
  flex-basis: 520px;
  align-items: stretch;
  background: var(--c-tint-lime);
}

.landing-sector-card.is-open h3 {
  writing-mode: horizontal-tb;
}

.landing-sector-card.is-open p,
.landing-sector-card.is-open span {
  display: block;
}

.landing-sector-card.is-open .landing-media {
  display: flex;
  aspect-ratio: 16 / 7;
  margin-bottom: 22px;
}

/* Open card splits its height: screenshot at the top, copy along the bottom. */
.landing-sector-card.is-open > div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.landing-sector-card p {
  margin: 12px 0 16px;
  max-width: 34ch;
  color: var(--c-body-grey-2);
  font-size: 0.9rem;
  line-height: 1.7;
}

.landing-sector-card span {
  color: var(--c-ink-warm);
  font-size: 0.86rem;
  font-weight: 600;
}

/* Trust band — the dark-plum card */
.landing-trust {
  margin: 34px 20px 0;
  padding: 64px 40px;
  border-radius: 18px;
  background: var(--c-plum);
  text-align: center;
}

.landing-trust h2 {
  max-width: 20ch;
  margin: 0 auto;
  color: var(--c-night-text);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 1.14;
  font-weight: 300;
}

.landing-trust p {
  max-width: 54ch;
  margin: 20px auto 0;
  color: var(--c-night-muted);
  font-size: 0.98rem;
  line-height: 1.72;
}

.landing-trust-cta {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.landing-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.landing-badges li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  padding: 12px;
  border: 1px solid var(--c-white-20);
  border-radius: 50%;
  background: var(--c-white-06);
  color: var(--c-night-text);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  /* keep-all stops CJK breaking between characters, which otherwise splits a
     four-character label across two lines inside the circle. */
  word-break: keep-all;
}

/* Closing CTA — the lime gradient card */
.landing-cta {
  margin: 34px 20px 34px;
  padding: 88px 40px;
  border-radius: 18px;
  background:
    radial-gradient(120% 90% at 50% 118%, var(--c-lime-wash) 0%, transparent 62%),
    linear-gradient(180deg, var(--c-white) 0%, var(--c-cta-bottom) 100%);
  text-align: center;
}

.landing-cta h2 {
  max-width: 16ch;
  margin: 0 auto;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.06;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.landing-cta p {
  max-width: 52ch;
  margin: 22px auto 0;
  color: var(--c-body-grey);
  font-size: 1rem;
}

.landing-cta-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.page-landing .button-lime {
  border-color: var(--c-lime);
  background: var(--c-lime);
  color: var(--on-accent-lime);
}

.page-landing .button-lime:hover {
  border-color: var(--c-lime-strong);
  background: var(--c-lime-strong);
  color: var(--on-accent-lime);
}

/* Footer sits inside the frame on the pale band, so it loses the shared
   .container gutter and spans the frame edge to edge instead. */
.page-landing .site-footer {
  width: auto;
  max-width: none;
  margin-top: 0;
  margin-inline: 0;
  padding: 56px 40px 26px;
  border-top: 1px solid var(--c-frame);
}

/* Scroll-reveal, matching the reference's fade-in-up on entering sections */
.page-landing .landing-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}

.page-landing .landing-reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-landing .landing-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .landing-flow li::after {
    animation: none;
  }

  /* Two moving elements are held still here. The hero reel is hidden rather
     than paused on frame one, because a paused first frame may be black and
     the scrim alone reads as a deliberate dark panel. scripts.js skips the
     reel's download outright in this mode. The logo strip drops its clones and
     wraps into a static block, so the names stay readable without anything
     sliding sideways. */
  .landing-hero-video {
    display: none;
  }

  /* Hiding the reel above takes the tag's referent with it — leaving the chip
     floating over an empty panel, labelling a video nobody can see. */
  .landing-shot-tag {
    display: none;
  }

  .landing-logos-track {
    width: auto;
    animation: none;
  }

  .landing-logos-clone {
    display: none;
  }

  /* width:100% matters: without it the group shrinks to its content inside the
     track, leaving justify-content nothing to distribute and pinning the row to
     the left edge. row-gap matters because wrapping with the base rule's
     column-only gap stacks the rows with no space between them at all. */
  .landing-logos-group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 66px;
  }

  .landing-logos-viewport {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 1080px) {
  .landing-card-inner,
  .landing-spot-body {
    grid-template-columns: 1fr;
  }

  .landing-services-grid {
    grid-template-columns: 1fr;
  }

  .landing-band-grid {
    flex-direction: column;
    height: auto;
  }

  .landing-band h2 {
    padding: 40px 24px 16px;
    text-align: center;
  }

  .landing-band-video {
    padding: 24px;
  }

  .landing-band-video video {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .landing-band-note {
    margin: 18px 24px 0;
    text-align: center;
  }

  .landing-spot-stats {
    gap: 32px;
  }
}

@media (max-width: 760px) {
  .page-landing .landing-frame {
    border-inline: 0;
  }

  .page-landing .landing-rail,
  .landing-head,
  .landing-services,
  .landing-sector-head,
  .landing-rail-scroll,
  .page-landing .site-footer {
    padding-inline: 20px;
  }

  .landing-hero,
  .landing-card,
  .landing-band,
  .landing-spot,
  .landing-trust,
  .landing-cta {
    margin-inline: 12px;
  }

  .landing-hero-media {
    min-height: 440px;
    padding: 56px 20px;
  }

  .landing-card,
  .landing-spot {
    padding: 22px;
  }

  .landing-trust {
    padding: 40px 24px;
  }

  .landing-cta {
    padding: 56px 22px;
  }

  .landing-duo {
    grid-template-columns: 1fr;
    margin-inline: 12px;
  }

  /* The marquee keeps running at this width. The group is shorter, so the same
     duration would read as slower — the duration is shortened with it to hold
     the px/s roughly constant against the desktop strip. At a 60px gap the
     group is 1024px, which at the same 47.5px/s is 21.6s; 22s is the whole
     second nearest to it. */
  .landing-logos-track {
    animation-duration: 22s;
  }

  .landing-logos-group {
    column-gap: 60px;
    /* Tighter than the desktop 66px to match the shorter marks. Inert while the
       track is moving; it only bites on the reduced-motion wrap, which sets its
       row-gap earlier in the file and would otherwise win here. */
    row-gap: 42px;
    padding: 0 30px;
  }

  .landing-logos img {
    height: 28px;
  }

  .landing-spot-top {
    flex-direction: column;
    gap: 20px;
  }

  .landing-spot-logos {
    flex-wrap: wrap;
    gap: 16px;
  }

  .landing-badges {
    flex-wrap: wrap;
    gap: 14px;
  }

  .landing-badges li {
    width: 82px;
    height: 82px;
  }

  /* Once the pipeline wraps, a connector stranded at the end of a row reads as
     a dangling dash. The labels alone carry the sequence at this width. */
  .landing-flow li:not(:last-child)::after {
    display: none;
  }

  .landing-flow {
    gap: 10px 22px;
  }

  .landing-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .landing-sector-card.is-open {
    flex-basis: 300px;
  }
}

/* ==========================================================================
   cockpit-vision.html — 智能座舱视觉解决方案中转页
   Light page. Lime is reserved for recognition status + sparse emphasis:
   the card images, the status dots, and the single conversion CTA.
   ========================================================================== */

.page-cockpit {
  background: var(--c-page);
  color: var(--c-ink);
}
.page-cockpit :is(.cv-hero, .cv-entries, .cv-common, .cv-cta) { --container: 1240px; }

/* ---- hero ---- */
.cv-hero { padding: 56px 0 48px; }
.cv-hero-grid { max-width: 860px; }
.cv-hero h1 { margin-top: 16px; font-size: var(--step-h1); }
.cv-hero-lead { max-width: 580px; margin: 26px 0 0; color: var(--c-muted); font-size: 1.08rem; }

/* ---- two solution entries ---- */
.cv-entries { padding: 16px 0 64px; }
.cv-entries-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }

.cv-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: 22px;
  overflow: hidden;
  transition: border-color .22s var(--ease);
}
.cv-card:hover { border-color: var(--c-border-strong); }

/* dark 16:10 media with lime recognition overlay */
.cv-media { position: relative; aspect-ratio: 16 / 10; background: var(--c-night); overflow: hidden; }
.cv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cv-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--c-video-scrim), transparent 46%); pointer-events: none; }

.cv-media-tags { position: absolute; left: 22px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.cv-media-tags span:first-child { color: var(--c-night-text); font: 650 .92rem/1.2 var(--font-tech); letter-spacing: .04em; }
.cv-media-tags span:last-child { color: var(--c-lime); font: 500 .72rem/1.2 var(--font-tech); letter-spacing: .14em; text-transform: uppercase; }
.cv-media-note { position: absolute; top: 16px; right: 18px; z-index: 2; color: var(--c-night-muted); font: 500 .7rem/1 var(--font-tech); letter-spacing: .08em; }

.cv-card-body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 26px; }
.cv-card-tag { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; color: var(--c-muted); font: 500 .7rem/1.1 var(--font-tech); letter-spacing: .14em; text-transform: uppercase; }
.cv-card-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-lime); box-shadow: 0 0 0 3px var(--c-lime-soft); }
.cv-card-body h2 { font-size: 1.75rem; }
.cv-card-value { margin: 14px 0 0; color: var(--c-ink); font-weight: 620; }
.cv-card-text { margin: 12px 0 0; color: var(--c-muted); font-size: .95rem; }

.cv-abilities { list-style: none; margin: 24px 0 26px; padding: 0; border-top: 1px solid var(--c-border); }
.cv-abilities li { display: flex; gap: 18px; align-items: baseline; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--c-border); }
.cv-abilities h3 { margin: 0; font-size: .96rem; font-weight: 640; white-space: nowrap; }
.cv-abilities p { margin: 0; color: var(--c-muted); font-size: .85rem; text-align: right; }

.cv-card-body .button { margin-top: auto; align-self: flex-start; }
.cv-card .button span { transition: transform .22s var(--ease); }
.cv-card:hover .button span { transform: translateX(4px); }

/* ---- common capabilities ---- */
.cv-common { padding: 56px 0 72px; }
.cv-common-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.cv-common-item { padding: 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; }
.cv-common-idx { display: block; margin-bottom: 16px; color: var(--c-faint); font: 600 .72rem/1 var(--font-tech); letter-spacing: .12em; }
.cv-common-item h3 { margin: 0 0 12px; font-size: 1.12rem; }
.cv-common-item p { margin: 0; color: var(--c-muted); font-size: .92rem; }
.cv-common-note { margin: 24px 0 0; color: var(--c-faint); font-size: .82rem; }

/* ---- conversion CTA (dark band, single lime action) ---- */
.cv-cta { padding: 8px 0 72px; }
.cv-cta-inner { padding: 56px; background: var(--c-night); border-radius: 26px; color: var(--c-night-text); }
.cv-cta-inner h2 { color: var(--c-night-text); }
.cv-cta-inner > p { max-width: 720px; margin: 18px 0 0; color: var(--c-night-muted); }
.cv-cta-inner .button-row { margin-top: 30px; }
.cv-cta-inner .button-primary { border-color: var(--c-lime); background: var(--c-lime); color: var(--on-accent-lime); }
.cv-cta-inner .button-primary:hover { border-color: var(--c-lime-strong); background: var(--c-lime-strong); color: var(--on-accent-lime); }
.cv-cta-note { margin: 20px 0 0; color: var(--c-night-muted); font-size: .8rem; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .cv-hero { padding: 40px 0 36px; }
  .cv-entries-grid { grid-template-columns: 1fr; }
  .cv-common-grid { grid-template-columns: 1fr; }
  .cv-card-body { padding: 24px 22px 22px; }
  .cv-abilities li { flex-direction: column; gap: 4px; align-items: flex-start; }
  .cv-abilities p { text-align: left; }
  .cv-cta-inner { padding: 34px 24px; }
}

/* ==========================================================================
   driver-monitoring.html — 驾驶员监测系统（DMS）详情页
   Light page. Lime = 正常/选中, amber = 观测受限, red = 提醒事件.
   Demo areas are dark rounded containers; the CTA closes on a dark band.
   ========================================================================== */

.page-dms {
  background: var(--c-page);
  color: var(--c-ink);
}
.page-dms :is(.dms-hero, .dms-value, .dms-features, .dms-flow, .dms-adapt, .dms-verify, .dms-faq, .dms-cta) { --container: 1240px; }

/* SVG figure primitives (value diagrams + adapt diagram + demo panels) */
.dms-line { fill: none; stroke: var(--c-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dms-line--lime { stroke: var(--c-lime-deep); }
.dms-line--amber { stroke: var(--c-amber); }
.dms-line--red { stroke: var(--c-red); }
.dms-dot { fill: var(--c-lime-deep); }
.dms-dot--red { fill: var(--c-red); }

/* ---- hero ---- */
.dms-hero { padding: 40px 0 64px; }
.dms-hero-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: center; }
.dms-hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--c-muted); font: 500 .72rem/1.1 var(--font-tech); letter-spacing: .14em; text-transform: uppercase; }
.dms-hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-lime); box-shadow: 0 0 0 3px var(--c-lime-soft); }
.dms-hero h1 { font-size: var(--step-h1); }
.dms-hero-lead { max-width: 560px; margin: 26px 0 0; color: var(--c-muted); font-size: 1.08rem; }
.dms-hero .button-row { margin-top: 30px; }
.dms-hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }
.dms-hero-tags li { padding: 7px 14px; border: 1px solid var(--c-border-strong); border-radius: 999px; color: var(--c-muted); font-size: .82rem; }

.dms-hero-media { position: relative; aspect-ratio: 16 / 10; background: var(--c-night); border-radius: 22px; overflow: hidden; }
.dms-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dms-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--c-video-scrim), transparent 48%); pointer-events: none; }
.dms-hero-media-tags { position: absolute; left: 24px; bottom: 22px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.dms-hero-media-tags span:first-child { color: var(--c-night-text); font: 650 .94rem/1.2 var(--font-tech); letter-spacing: .04em; }
.dms-hero-media-tags span:last-child { color: var(--c-lime); font: 500 .74rem/1.2 var(--font-tech); letter-spacing: .14em; text-transform: uppercase; }
.dms-hero-media-note { position: absolute; top: 16px; right: 18px; z-index: 2; color: var(--c-night-muted); font: 500 .7rem/1 var(--font-tech); letter-spacing: .08em; }

/* ---- value ---- */
.dms-value { padding: 24px 0 72px; }
.dms-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.dms-value-item { padding: 28px 28px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; }
.dms-value-diagram { display: block; width: 100%; height: 96px; margin-bottom: 20px; }
.dms-value-item h3 { margin: 0 0 12px; font-size: 1.12rem; }
.dms-value-item p { margin: 0; color: var(--c-muted); font-size: .92rem; }

/* ---- core features (tab demo) ---- */
.dms-features { padding: 8px 0 72px; }
.dms-features-layout { display: grid; grid-template-columns: 30% 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.dms-tabs { display: flex; flex-direction: column; gap: 10px; }
.dms-tab { position: relative; text-align: left; padding: 16px 18px 16px 20px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-white); color: var(--c-muted); font: 600 .98rem/1.3 var(--font-body); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.dms-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: transparent; }
.dms-tab:hover { border-color: var(--c-border-strong); color: var(--c-ink); }
.dms-tab.is-active { border-color: var(--c-lime-deep); background: var(--c-lime-soft); color: var(--c-ink); }
.dms-tab.is-active::before { background: var(--c-lime-deep); }

.dms-panels { min-width: 0; }
.dms-panel { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; overflow: hidden; }
.dms-panel[hidden] { display: none; }
.dms-panel-media { position: relative; aspect-ratio: 2 / 1; background: var(--c-night); overflow: hidden; }
.dms-panel-media svg { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 22px; }
.dms-panel-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dms-panel-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--c-video-scrim), transparent 48%); pointer-events: none; }
.dms-panel-media .dms-line { stroke: var(--c-night-text); }
.dms-panel-media .dms-line--lime { stroke: var(--c-lime); }
.dms-panel-media .dms-line--amber { stroke: var(--c-amber-bright); }
.dms-panel-media .dms-line--red { stroke: var(--c-red-bright); }
.dms-panel-media .dms-dot { fill: var(--c-lime); }
.dms-panel-media .dms-dot--red { fill: var(--c-red-bright); }
.dms-panel-tags { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: flex; gap: 12px; }
.dms-panel-tags span { font: 650 .8rem/1.2 var(--font-tech); letter-spacing: .08em; }
.dms-panel-tags .is-lime { color: var(--c-lime); }
.dms-panel-tags .is-amber { color: var(--c-amber-bright); }
.dms-panel-tags .is-red { color: var(--c-red-bright); }
.dms-panel-body { padding: 28px 30px 30px; }
.dms-panel-body h3 { margin: 0 0 12px; font-size: 1.3rem; }
.dms-panel-body > p { margin: 0; color: var(--c-muted); font-size: .98rem; }
.dms-panel-note { margin-top: 16px; padding: 12px 14px; border-left: 3px solid var(--c-lime-deep); background: var(--c-lime-soft); border-radius: 0 10px 10px 0; color: var(--c-muted); font-size: .86rem; }

/* ---- workflow ---- */
.dms-flow { padding: 8px 0 72px; }
.dms-flow-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 44px 0 0; padding: 0; }
.dms-flow-step { position: relative; padding: 24px 22px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 18px; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.dms-flow-step::after { content: ""; position: absolute; top: 50%; right: -15px; width: 14px; height: 14px; border-top: 2px solid var(--c-border-strong); border-right: 2px solid var(--c-border-strong); transform: translateY(-50%) rotate(45deg); }
.dms-flow-step:last-child::after { display: none; }
.dms-flow-step:hover { border-color: var(--c-lime-deep); transform: translateY(-3px); box-shadow: 0 12px 28px var(--c-shadow-soft); }
.dms-flow-idx { display: block; margin-bottom: 12px; color: var(--c-lime-deep); font: 650 .78rem/1 var(--font-tech); letter-spacing: .1em; }
.dms-flow-step h3 { margin: 0 0 10px; font-size: 1.02rem; }
.dms-flow-step p { margin: 0; color: var(--c-muted); font-size: .85rem; }
.dms-flow-code-block { display: flex; align-items: center; gap: 18px; margin-top: 30px; padding: 18px 22px; background: var(--c-night); border-radius: 16px; }
.dms-flow-code { margin: 0; flex: 1; color: var(--c-lime); font: 500 .86rem/1.6 var(--font-tech); letter-spacing: .03em; }
.dms-flow-code-note { color: var(--c-night-muted); font-size: .76rem; white-space: nowrap; }
.dms-flow-note { margin: 18px 0 0; color: var(--c-faint); font-size: .82rem; }

/* ---- engineering adaptation ---- */
.dms-adapt { padding: 8px 0 72px; }
.dms-adapt-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 44px; align-items: start; }
.dms-adapt-diagram { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; padding: 0; overflow: hidden; }
.dms-adapt-diagram img { display: block; width: 100%; height: auto; }
.dms-adapt-list { display: flex; flex-direction: column; gap: 12px; }
.dms-adapt-item { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; transition: border-color .2s var(--ease); }
.dms-adapt-item[open] { border-color: var(--c-border-strong); }
.dms-adapt-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-weight: 640; font-size: 1.02rem; list-style: none; }
.dms-adapt-item summary::-webkit-details-marker { display: none; }
.dms-adapt-item summary::after { content: "+"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--c-border-strong); border-radius: 6px; color: var(--c-muted); font: 400 1rem/1 var(--font-tech); transition: transform .2s var(--ease); }
.dms-adapt-item[open] summary::after { content: "−"; }
.dms-adapt-item summary + p { margin: 0; padding: 0 22px 22px; color: var(--c-muted); font-size: .92rem; }

/* ---- verification matrix ---- */
.dms-verify { padding: 8px 0 72px; }
.dms-verify-matrix { margin: 44px 0 0; padding: 0; }
.dms-verify-row { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: baseline; padding: 20px 6px; border-bottom: 1px solid var(--c-border); }
.dms-verify-row:first-child { border-top: 1px solid var(--c-border); }
.dms-verify-row dt { font-weight: 640; font-size: 1rem; }
.dms-verify-row dd { margin: 0; color: var(--c-muted); font-size: .95rem; }
.dms-verify-note { margin: 22px 0 0; padding: 14px 16px; border-left: 3px solid var(--c-amber); background: var(--c-amber-soft); border-radius: 0 10px 10px 0; color: var(--c-muted); font-size: .86rem; }

/* ---- FAQ ---- */
.dms-faq { padding: 8px 0 72px; }
.dms-faq-list { max-width: 860px; margin: 40px auto 0; }
.dms-faq-item { border: 1px solid var(--c-border); border-radius: 14px; margin-bottom: 12px; background: var(--c-white); }
.dms-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-weight: 640; font-size: 1.02rem; list-style: none; }
.dms-faq-item summary::-webkit-details-marker { display: none; }
.dms-faq-item summary::after { content: "+"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--c-border-strong); border-radius: 6px; color: var(--c-muted); font: 400 1rem/1 var(--font-tech); transition: transform .2s var(--ease); }
.dms-faq-item[open] summary::after { content: "−"; }
.dms-faq-item summary + p { margin: 0; padding: 0 22px 22px; color: var(--c-muted); font-size: .94rem; }

/* ---- CTA + form ---- */
.dms-cta { padding: 8px 0 72px; }
.dms-cta-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; background: var(--c-night); border-radius: 26px; padding: 56px; }
.dms-cta-copy h2 { color: var(--c-night-text); }
.dms-cta-copy > p { margin: 18px 0 0; color: var(--c-night-muted); }
.dms-cta-note { font-size: .82rem; }
.dms-form { display: flex; flex-direction: column; gap: 16px; padding: 30px; background: var(--c-white); border-radius: 18px; }
.dms-form-field label { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 640; color: var(--c-ink); }
.dms-form-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-page); color: var(--c-ink); font: 400 .94rem/1.4 var(--font-body); }
.dms-form-field input:focus { outline: none; border-color: var(--c-lime-deep); box-shadow: 0 0 0 3px var(--c-lime-soft); }
.dms-form .button-row { margin-top: 6px; }
.dms-related { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 22px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; }
.dms-related h3 { margin: 0; font-size: 1.02rem; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .dms-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .dms-features-layout { grid-template-columns: 1fr; }
  .dms-tabs { flex-direction: row; overflow-x: auto; }
  .dms-tab { flex: none; }
  .dms-flow-steps { grid-template-columns: 1fr; }
  .dms-flow-step::after { display: none; }
  .dms-adapt-layout { grid-template-columns: 1fr; }
  .dms-cta-layout { grid-template-columns: 1fr; padding: 36px 26px; }
  .dms-flow-code-block { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dms-flow-code-note { white-space: normal; }
}
@media (max-width: 560px) {
  .dms-hero { padding: 32px 0 48px; }
  .dms-value-grid { grid-template-columns: 1fr; }
  .dms-verify-row { grid-template-columns: 1fr; gap: 6px; }
  .dms-related { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   smart-welcome.html — 智能迎宾与座椅自适应详情页
   Light page. Lime = 识别/选中, amber = 观测/受限, 深色展示区为演示容器.
   ========================================================================== */

.page-welcome {
  background: var(--c-page);
  color: var(--c-ink);
}

/* dark demo container (reuses .dms-line SVG primitives on a night ground) */
.ws-media { position: relative; background: var(--c-night); border-radius: 18px; overflow: hidden; }
.ws-media svg { display: block; width: 100%; height: auto; padding: 22px; box-sizing: border-box; }
.ws-media img { display: block; width: 100%; height: auto; }
.ws-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--c-video-scrim), transparent 48%); pointer-events: none; }
.ws-media .dms-line { stroke: var(--c-night-text); }
.ws-media .dms-line--lime { stroke: var(--c-lime); }
.ws-media .dms-line--amber { stroke: var(--c-amber-bright); }
.ws-media .dms-dot { fill: var(--c-lime); }
.ws-media-tags { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: flex; gap: 12px; }
.ws-media-tags span { font: 650 .8rem/1.2 var(--font-tech); letter-spacing: .08em; }
.ws-media-tags .is-lime { color: var(--c-lime); }

/* ---- hero ---- */
.ws-hero { padding: 40px 0 64px; }
.ws-hero-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 56px; align-items: center; }
.ws-hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 18px; color: var(--c-muted); font: 500 .72rem/1.1 var(--font-tech); letter-spacing: .14em; text-transform: uppercase; }
.ws-hero-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-lime); box-shadow: 0 0 0 3px var(--c-lime-soft); }
.ws-hero h1 { font-size: var(--step-h1); }
.ws-hero-lead { max-width: 560px; margin: 26px 0 0; color: var(--c-muted); font-size: 1.08rem; }
.ws-hero .button-row { margin-top: 30px; }
.ws-hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; }
.ws-hero-tags li { padding: 7px 14px; border: 1px solid var(--c-border-strong); border-radius: 999px; color: var(--c-muted); font-size: .82rem; }

.ws-hero-media { position: relative; aspect-ratio: 16 / 10; background: var(--c-night); border-radius: 22px; overflow: hidden; }
.ws-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--c-video-scrim), transparent 48%); pointer-events: none; }
.ws-hero-media-tags { position: absolute; left: 24px; bottom: 22px; z-index: 2; display: flex; flex-direction: column; gap: 5px; }
.ws-hero-media-tags span:first-child { color: var(--c-night-text); font: 650 .94rem/1.2 var(--font-tech); letter-spacing: .04em; }
.ws-hero-media-tags span:last-child { color: var(--c-lime); font: 500 .74rem/1.2 var(--font-tech); letter-spacing: .14em; text-transform: uppercase; }
.ws-hero-media-note { position: absolute; top: 16px; right: 18px; z-index: 2; color: var(--c-night-muted); font: 500 .7rem/1 var(--font-tech); letter-spacing: .08em; }

/* ---- value ---- */
.ws-value { padding: 24px 0 72px; }
.ws-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.ws-value-item { padding: 28px 28px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; }
.ws-value-icon { display: block; width: 48px; height: 48px; margin-bottom: 20px; }
.ws-value-item h3 { margin: 0 0 12px; font-size: 1.12rem; }
.ws-value-item p { margin: 0; color: var(--c-muted); font-size: .92rem; }

/* ---- journey (4-step experience) ---- */
.ws-journey { padding: 8px 0 72px; }
.ws-journey-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; margin-top: 44px; align-items: start; }
.ws-journey-tabs { display: flex; flex-direction: column; gap: 10px; }
.ws-journey-tab { position: relative; text-align: left; padding: 16px 18px 16px 20px; border: 1px solid var(--c-border); border-radius: 14px; background: var(--c-white); color: var(--c-muted); font: 600 .98rem/1.3 var(--font-body); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.ws-journey-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: transparent; }
.ws-journey-tab:hover { border-color: var(--c-border-strong); color: var(--c-ink); }
.ws-journey-tab.is-active { border-color: var(--c-lime-deep); background: var(--c-lime-soft); color: var(--c-ink); }
.ws-journey-tab.is-active::before { background: var(--c-lime-deep); }
.ws-journey-panels { min-width: 0; }
.ws-journey-panel { display: flex; flex-direction: column; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; overflow: hidden; }
.ws-journey-panel[hidden] { display: none; }
.ws-panel-body { padding: 28px 30px 30px; }
.ws-panel-body h3 { margin: 0 0 12px; font-size: 1.3rem; }
.ws-panel-body > p { margin: 0; color: var(--c-muted); font-size: .98rem; }

/* ---- core algorithm ---- */
.ws-algo { padding: 8px 0 72px; }
.ws-map { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; margin: 44px 0 0; padding: 0; }
.ws-map li { position: relative; padding: 22px 20px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 14px; text-align: center; font-weight: 620; font-size: .94rem; }
.ws-map li::after { content: "\2192"; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); color: var(--c-lime-deep); font-weight: 400; }
.ws-map li:last-child::after { display: none; }
.ws-map-idx { display: block; margin-bottom: 8px; color: var(--c-faint); font: 600 .7rem/1 var(--font-tech); letter-spacing: .1em; }
.ws-algo-layout { margin-top: 34px; }
.ws-algo-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-algo-tab { padding: 11px 18px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-white); color: var(--c-muted); font-weight: 600; font-size: .92rem; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.ws-algo-tab.is-active { border-color: var(--c-lime-deep); background: var(--c-lime-soft); color: var(--c-ink); }
.ws-algo-panels { margin-top: 20px; }
.ws-algo-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; padding: 24px; }
.ws-algo-panel[hidden] { display: none; }
.ws-algo-panel .ws-panel-body { padding: 0; }

/* ---- welfare seat ---- */
.ws-welfare { padding: 8px 0 72px; }
.ws-welfare-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; margin-top: 44px; align-items: start; }
.ws-welfare-media svg { padding: 32px; }
.ws-welfare-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; }
.ws-welfare-item { padding: 22px 24px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; }
.ws-welfare-item h3 { margin: 0 0 10px; font-size: 1.05rem; }
.ws-welfare-item p { margin: 0; color: var(--c-muted); font-size: .92rem; }
.ws-welfare-note { margin: 20px 0 0; color: var(--c-faint); font-size: .82rem; }

/* ---- front / rear rows ---- */
.ws-rows { padding: 8px 0 72px; }
.ws-rows-layout { display: grid; grid-template-columns: 1.15fr 1fr; gap: 36px; margin-top: 44px; align-items: start; }
.ws-rows-media { background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; padding: 24px; }
.ws-rows-media img { display: block; width: 100%; height: auto; }
.ws-rows-tabs { display: flex; gap: 10px; margin-top: 18px; }
.ws-rows-tab { flex: 1; padding: 11px 16px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-page); color: var(--c-muted); font-weight: 600; font-size: .94rem; cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.ws-rows-tab.is-active { border-color: var(--c-lime-deep); background: var(--c-lime-soft); color: var(--c-ink); }
.ws-rows-panel h3 { margin: 0 0 12px; font-size: 1.2rem; }
.ws-rows-panel p { margin: 0; color: var(--c-muted); font-size: .95rem; }
.ws-rows-panel[hidden] { display: none; }
.ws-rows-note { margin: 20px 0 0; color: var(--c-faint); font-size: .82rem; }

/* ---- real-car case ---- */
.ws-case { padding: 8px 0 72px; }
.ws-case-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 44px; align-items: center; }
.ws-case-stats { margin: 0; }
.ws-case-stats > div { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--c-border); }
.ws-case-stats dt { font-weight: 640; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.ws-case-stats dd { margin: 0; color: var(--c-muted); font-size: .9rem; text-align: right; }
.ws-case-note { margin: 20px 0 0; padding: 14px 16px; border-left: 3px solid var(--c-amber); background: var(--c-amber-soft); border-radius: 0 10px 10px 0; color: var(--c-muted); font-size: .84rem; }
.ws-case-summary .button-row { margin-top: 22px; }

/* ---- delivery ---- */
.ws-delivery { padding: 8px 0 72px; }
.ws-delivery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; }
.ws-delivery-item { padding: 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 22px; }
.ws-delivery-item h3 { margin: 0 0 12px; font-size: 1.12rem; }
.ws-delivery-item p { margin: 0; color: var(--c-muted); font-size: .92rem; }
.ws-delivery-principle { margin: 26px 0 0; padding: 18px 22px; background: var(--c-lime-soft); border: 1px solid var(--c-lime-deep); border-radius: 14px; color: var(--c-ink); font-size: .98rem; }

/* ---- FAQ ---- */
.ws-faq { padding: 8px 0 72px; }
.ws-faq-list { max-width: 860px; margin: 40px auto 0; }
.ws-faq-item { border: 1px solid var(--c-border); border-radius: 14px; margin-bottom: 12px; background: var(--c-white); }
.ws-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; font-weight: 640; font-size: 1.02rem; list-style: none; }
.ws-faq-item summary::-webkit-details-marker { display: none; }
.ws-faq-item summary::after { content: "+"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--c-border-strong); border-radius: 6px; color: var(--c-muted); font: 400 1rem/1 var(--font-tech); transition: transform .2s var(--ease); }
.ws-faq-item[open] summary::after { content: "−"; }
.ws-faq-item summary + p { margin: 0; padding: 0 22px 22px; color: var(--c-muted); font-size: .94rem; }

/* ---- CTA + form ---- */
.ws-cta { padding: 8px 0 72px; }
.ws-cta-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; background: var(--c-night); border-radius: 26px; padding: 56px; }
.ws-cta-copy h2 { color: var(--c-night-text); }
.ws-cta-copy > p { margin: 18px 0 0; color: var(--c-night-muted); }
.ws-cta-note { font-size: .82rem; }
.ws-form { display: flex; flex-direction: column; gap: 16px; padding: 30px; background: var(--c-white); border-radius: 18px; }
.ws-form-field label { display: block; margin-bottom: 7px; font-size: .84rem; font-weight: 640; color: var(--c-ink); }
.ws-form-field input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--c-border-strong); border-radius: 10px; background: var(--c-page); color: var(--c-ink); font: 400 .94rem/1.4 var(--font-body); }
.ws-form-field input:focus { outline: none; border-color: var(--c-lime-deep); box-shadow: 0 0 0 3px var(--c-lime-soft); }
.ws-form .button-row { margin-top: 6px; }
.ws-related { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 22px 26px; background: var(--c-white); border: 1px solid var(--c-border); border-radius: 16px; }
.ws-related h3 { margin: 0; font-size: 1.02rem; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .ws-hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .ws-journey-layout { grid-template-columns: 1fr; }
  .ws-journey-tabs { flex-direction: row; overflow-x: auto; }
  .ws-journey-tab { flex: none; }
  .ws-map { grid-template-columns: 1fr; gap: 12px; }
  .ws-map li::after { display: none; }
  .ws-algo-panel { grid-template-columns: 1fr; }
  .ws-welfare-layout, .ws-rows-layout, .ws-case-layout { grid-template-columns: 1fr; }
  .ws-delivery-grid { grid-template-columns: 1fr; }
  .ws-cta-layout { grid-template-columns: 1fr; padding: 36px 26px; }
}
@media (max-width: 560px) {
  .ws-hero { padding: 32px 0 48px; }
  .ws-value-grid { grid-template-columns: 1fr; }
  .ws-related { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Blog — layout (page-blog / page-blog-post)
   ========================================================================== */

.page-blog .blog-hero { position: relative; padding: 128px 0 96px; overflow: hidden; }
.page-blog .blog-hero-deco { position: absolute; inset: 0; }
.page-blog .blog-hero-deco svg { width: 100%; height: 100%; display: block; }
.page-blog .blog-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.page-blog .blog-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; margin: 0 0 20px; }
.page-blog .blog-eyebrow span { width: 22px; height: 2px; display: inline-block; }
.page-blog .blog-hero h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.08; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; }
.page-blog .blog-hero-lead { font-size: 18px; line-height: 1.6; margin: 0; }

.page-blog .blog-list-section { padding: 64px 0 96px; }
.page-blog .blog-list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }

.page-blog .blog-banner { position: relative; border-radius: 16px; overflow: hidden; margin-bottom: 36px; }
.page-blog .blog-banner-slide {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 40px;
  min-height: 260px;
}
.page-blog .blog-banner-slide[hidden] { display: none; }
.page-blog .blog-banner-kicker { font-size: 13px; letter-spacing: .02em; margin: 0 0 10px; }
.page-blog .blog-banner-title { font-size: 26px; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
.page-blog .blog-banner-text { font-size: 15px; line-height: 1.6; margin: 0 0 18px; }
.page-blog .blog-banner-cta { font-size: 14px; font-weight: 600; }
.page-blog .blog-banner-cta i { font-style: normal; margin-left: 4px; }
.page-blog .blog-banner-art svg { width: 100%; height: auto; display: block; }
.page-blog .blog-banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}
.page-blog .blog-banner-prev { left: 16px; }
.page-blog .blog-banner-next { right: 16px; }
.page-blog .blog-banner-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 2; }
.page-blog .blog-banner-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; }
.page-blog .blog-banner-dot.is-active { width: 22px; border-radius: 4px; }

.page-blog .blog-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.page-blog .blog-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid; font-size: 14px; cursor: pointer; }
.page-blog .blog-pill-caret { transition: transform .2s; }
.page-blog .blog-pill[aria-expanded="true"] .blog-pill-caret { transform: rotate(180deg); }
.page-blog .blog-subfilter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.page-blog .blog-subfilter-label { font-size: 13px; margin-right: 6px; }
.page-blog .blog-subtag { padding: 6px 14px; border-radius: 999px; border: 1px solid; font-size: 13px; cursor: pointer; }

.page-blog .blog-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.page-blog .blog-item { border: 1px solid; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.page-blog .blog-item[hidden] { display: none; }
.page-blog .blog-item-body { display: block; text-decoration: none; }
.page-blog .blog-item-thumb { aspect-ratio: 256 / 152; overflow: hidden; }
.page-blog .blog-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-blog .blog-item-content { padding: 18px 20px 14px; }
.page-blog .blog-item-title { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0 0 8px; }
.page-blog .blog-item-summary { font-size: 14px; line-height: 1.6; margin: 0 0 12px; }
.page-blog .blog-item-date { font-size: 13px; margin: 0; }
.page-blog .blog-item-tags { padding: 0 20px 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.page-blog .blog-item-tag { padding: 4px 10px; border-radius: 6px; border: 0; font-size: 12px; cursor: pointer; }

.page-blog .blog-empty { margin: 0 0 28px; }
.page-blog .blog-list-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; }
.page-blog .blog-count { font-size: 14px; margin: 0; }
.page-blog .blog-pagination ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.page-blog .blog-pagination-item { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid; border-radius: 8px; font-size: 14px; }
.page-blog .blog-pagination-item.is-disabled { opacity: .4; }

.page-blog .blog-sidebar { display: flex; flex-direction: column; gap: 20px; }
.page-blog .blog-side-figure { border-radius: 12px; overflow: hidden; display: block; text-decoration: none; }
.page-blog .blog-side-figure-art { aspect-ratio: 300 / 202; }
.page-blog .blog-side-figure-art svg { width: 100%; height: 100%; display: block; }
.page-blog .blog-side-figure-copy { padding: 18px; }
.page-blog .blog-side-figure-copy strong { display: block; font-size: 16px; margin-bottom: 6px; }
.page-blog .blog-side-figure-copy span { font-size: 13px; line-height: 1.5; display: block; }
.page-blog .blog-side-card { border: 1px solid; border-radius: 12px; padding: 20px; }
.page-blog .blog-side-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.page-blog .blog-side-hot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.page-blog .blog-side-hot a { text-decoration: none; font-size: 14px; line-height: 1.5; display: flex; gap: 10px; align-items: baseline; }
.page-blog .blog-side-hot-rank { font-weight: 700; flex: none; }
.page-blog .blog-side-links { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.page-blog .blog-side-links a { text-decoration: none; font-size: 14px; }
.page-blog .blog-side-button { display: inline-block; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.page-blog .blog-side-contact { font-size: 13px; line-height: 1.6; margin: 12px 0 0; }

.page-blog-post .blog-post-banner { padding: 24px 0; }
.page-blog-post .blog-post-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; flex-wrap: wrap; }
.page-blog-post .blog-post-crumb a { text-decoration: none; }
.page-blog-post .blog-post-crumb-sep { opacity: .5; }
.page-blog-post .blog-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; padding: 48px 0 96px; }
.page-blog-post .blog-post-content { min-width: 0; }
.page-blog-post .blog-post-title { font-size: clamp(28px, 4.5vw, 40px); line-height: 1.2; font-weight: 700; letter-spacing: -.01em; margin: 0 0 16px; }
.page-blog-post .blog-post-meta { font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 24px; }
.page-blog-post .blog-post-rule { height: 1px; margin: 0 0 28px; }
.page-blog-post .blog-post-body { font-size: 16px; line-height: 1.8; }
.page-blog-post .blog-post-body h2 { font-size: 24px; line-height: 1.3; margin: 40px 0 16px; }
.page-blog-post .blog-post-body h3 { font-size: 18px; margin: 28px 0 12px; }
.page-blog-post .blog-post-body p { margin: 0 0 16px; }
.page-blog-post .blog-post-body ul, .page-blog-post .blog-post-body ol { margin: 0 0 16px; padding-left: 24px; }
.page-blog-post .blog-post-body li { margin: 0 0 8px; }
.page-blog-post .blog-post-body .article-lead { font-size: 17px; }
.page-blog-post .blog-post-body blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid; border-radius: 0 8px 8px 0; }
.page-blog-post .blog-post-body blockquote p { margin: 0; }
.page-blog-post .blog-post-body .figure-note { font-size: 14px; }
.page-blog-post .blog-post-body code { padding: 2px 6px; border-radius: 4px; font-family: var(--font-tech); font-size: .9em; }
.page-blog-post .blog-post-body pre { padding: 16px; border-radius: 8px; overflow-x: auto; }
.page-blog-post .blog-post-body pre code { background: transparent; padding: 0; }
.page-blog-post .blog-post-tags { display: flex; align-items: center; gap: 12px; margin: 28px 0; flex-wrap: wrap; }
.page-blog-post .blog-post-tags > span { font-size: 14px; }
.page-blog-post .blog-post-tags-list { display: flex; gap: 8px; flex-wrap: wrap; }
.page-blog-post .blog-post-tag { padding: 6px 14px; border-radius: 999px; border: 1px solid; font-size: 13px; text-decoration: none; }
.page-blog-post .blog-post-rel { font-size: 15px; margin: 0 0 10px; }
.page-blog-post .blog-post-rel span { margin-right: 6px; }
.page-blog-post .blog-post-rel a { text-decoration: none; font-weight: 500; }

.page-blog-post .blog-post-side { display: flex; flex-direction: column; gap: 20px; }
.page-blog-post .blog-post-side-card { border: 1px solid; border-radius: 12px; padding: 20px; }
.page-blog-post .blog-post-side-title { font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.page-blog-post .blog-post-hot { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.page-blog-post .blog-post-hot a { text-decoration: none; font-size: 14px; line-height: 1.5; display: block; }
.page-blog-post .blog-post-side-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.page-blog-post .blog-post-side-tag { padding: 5px 12px; border-radius: 999px; font-size: 12px; text-decoration: none; }
.page-blog-post .blog-post-side-products { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.page-blog-post .blog-post-side-products a { text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.page-blog-post .blog-post-side-products b { font-size: 14px; }
.page-blog-post .blog-post-side-products span { font-size: 12px; line-height: 1.5; }

@media (max-width: 900px) {
  .page-blog .blog-list-layout,
  .page-blog-post .blog-post-layout { grid-template-columns: 1fr; }
  .page-blog .blog-sidebar,
  .page-blog-post .blog-post-side { order: 2; }
  .page-blog .blog-list { grid-template-columns: 1fr; }
  .page-blog .blog-banner-slide { grid-template-columns: 1fr; padding: 28px; }
  .page-blog .blog-banner-art { display: none; }
}
@media (max-width: 560px) {
  .page-blog .blog-hero { padding: 104px 0 72px; }
  .page-blog .blog-list-footer { flex-direction: column; gap: 16px; align-items: flex-start; }
  .page-blog .blog-banner-arrow { display: none; }
}

/* New, case-led engineering workflow page. These selectors are isolated from existing pages. */
.page-engineering-workflows .workflow-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(34px, 6vw, 76px);
}

.page-engineering-workflows .workflow-hero-grid .tool-breadcrumb {
  margin-bottom: 30px;
}

.page-engineering-workflows h1,
.page-engineering-workflows h2,
.page-engineering-workflows h3,
.page-engineering-workflows h4 {
  font-family: "Noto Sans SC Local", "Inter Local", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}

.page-engineering-workflows .workflow-hero-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  box-shadow: var(--panel-shadow);
}

.page-engineering-workflows .workflow-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

.page-engineering-workflows .workflow-hero-media figcaption {
  padding: 14px 18px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: .8rem;
  line-height: 1.6;
}

.page-engineering-workflows .workflow-case-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0 74px;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-case-nav a {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  font-size: .85rem;
  line-height: 1.45;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}

.page-engineering-workflows .workflow-case-nav a:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}

.page-engineering-workflows .workflow-case-nav a > span {
  color: var(--accent-strong);
  font: 600 .7rem var(--font-tech);
}

.page-engineering-workflows .workflow-case-nav small {
  display: block;
  color: var(--fg-muted);
  font-size: .7rem;
}

.page-engineering-workflows .workflow-chapter {
  margin-top: 82px;
  scroll-margin-top: 100px;
}

.page-engineering-workflows .workflow-chapter-heading {
  max-width: 780px;
  margin-bottom: 30px;
}

.page-engineering-workflows .workflow-chapter-heading > p:first-child {
  margin-bottom: 12px;
}

.page-engineering-workflows .workflow-chapter-heading h2 {
  margin-bottom: 14px;
  color: var(--fg-strong);
  font-size: var(--step-h2);
}

.page-engineering-workflows .workflow-chapter-heading > p:last-child {
  color: var(--fg-muted);
  line-height: 1.8;
}

.page-engineering-workflows .workflow-case-list {
  display: grid;
  gap: 20px;
}

.page-engineering-workflows .workflow-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
  scroll-margin-top: 96px;
}

.page-engineering-workflows .workflow-case:nth-child(even) .workflow-case-media {
  order: 2;
}

.page-engineering-workflows .workflow-case-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  margin: 0;
  padding: 20px;
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-case-media-pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-engineering-workflows .workflow-case-media figure {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.page-engineering-workflows .workflow-case-media img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
}

.page-engineering-workflows .workflow-case-media figcaption {
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: .72rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-case-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(25px, 3.3vw, 42px);
}

.page-engineering-workflows .workflow-case-copy > .eyebrow {
  margin-bottom: 14px;
  font-size: .68rem;
}

.page-engineering-workflows .workflow-case-copy h3 {
  margin: 0 0 22px;
  color: var(--fg-strong);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.35;
}

.page-engineering-workflows .workflow-story-blocks {
  display: grid;
  gap: 16px;
}

.page-engineering-workflows .workflow-story-blocks > div {
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-story-blocks > div > span,
.page-engineering-workflows .workflow-case-boundary > b {
  display: block;
  margin-bottom: 6px;
  color: var(--fg-strong);
  font-size: .78rem;
  font-weight: 700;
}

.page-engineering-workflows .workflow-story-blocks p,
.page-engineering-workflows .workflow-case-boundary p {
  margin: 0;
  color: var(--fg-muted);
  font-size: .9rem;
  line-height: 1.78;
}

.page-engineering-workflows .workflow-case-boundary {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-pilot-note {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: .88rem;
  line-height: 1.7;
}

@media (max-width: 1040px) {
  .page-engineering-workflows .workflow-case-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.page-engineering-workflows .workflow-reuse-details {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.page-engineering-workflows .workflow-reuse-applications {
  margin-top: clamp(56px, 7vw, 84px);
  scroll-margin-top: 116px;
}

.page-engineering-workflows .workflow-reuse-block,
.page-engineering-workflows .workflow-reuse-economics {
  min-width: 0;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.page-engineering-workflows .workflow-reuse-heading {
  max-width: 840px;
  margin-bottom: 22px;
}

.page-engineering-workflows .workflow-reuse-heading .eyebrow {
  margin: 0 0 10px;
}

.page-engineering-workflows .workflow-reuse-heading h3,
.page-engineering-workflows .workflow-reuse-economics h3 {
  margin: 0 0 10px;
  color: var(--fg-strong);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.4;
}

.page-engineering-workflows .workflow-reuse-heading h4 {
  margin: 0 0 10px;
  color: var(--fg-strong);
  font-size: clamp(1.12rem, 1.65vw, 1.38rem);
  line-height: 1.45;
}

.page-engineering-workflows .workflow-reuse-heading > p:last-child,
.page-engineering-workflows .workflow-reuse-economics > div:first-child > p:last-child {
  margin: 0;
  color: var(--fg-muted);
  font-size: .9rem;
  line-height: 1.8;
}

.page-engineering-workflows .workflow-reuse-flow,
.page-engineering-workflows .workflow-reuse-costs,
.page-engineering-workflows .workflow-reuse-value-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.page-engineering-workflows .workflow-reuse-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-reuse-card h4 {
  margin: 6px 0 8px;
  color: var(--fg-strong);
  font-size: .98rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-reuse-card p {
  margin: 0;
  color: var(--fg-muted);
  font-size: .82rem;
  line-height: 1.75;
}

.page-engineering-workflows .workflow-reuse-index {
  color: var(--accent-strong);
  font: 600 .72rem var(--font-tech);
}

.page-engineering-workflows .workflow-reuse-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-reuse-steps li {
  display: flex;
  min-width: 0;
  gap: 11px;
  padding: 16px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-reuse-steps li > span {
  color: var(--accent-strong);
  font: 600 .72rem var(--font-tech);
}

.page-engineering-workflows .workflow-reuse-steps h4 {
  margin: 0 0 7px;
  color: var(--fg-strong);
  font-size: .86rem;
}

.page-engineering-workflows .workflow-reuse-steps p {
  margin: 0;
  color: var(--fg-muted);
  font-size: .77rem;
  line-height: 1.7;
}

.page-engineering-workflows .workflow-reuse-rationales {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: baseline;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-reuse-rationales h4 {
  margin: 0;
  color: var(--fg-strong);
  font-size: .86rem;
}

.page-engineering-workflows .workflow-reuse-rationales ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-reuse-rationales li,
.page-engineering-workflows .workflow-reuse-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--fg-muted);
  font-size: .7rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-reuse-capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.page-engineering-workflows .workflow-reuse-tag {
  padding: 0;
  background: transparent;
  color: var(--accent-strong);
  font-weight: 700;
}

.page-engineering-workflows .workflow-reuse-priority {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-reuse-priority span {
  color: var(--fg-muted);
  font-size: .76rem;
}

.page-engineering-workflows .workflow-reuse-priority b {
  color: var(--accent-strong);
  font-size: .92rem;
}

.page-engineering-workflows .workflow-reuse-economics {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr);
  gap: 20px 30px;
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-reuse-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
}

.page-engineering-workflows .workflow-reuse-metrics article {
  display: flex;
  min-height: 110px;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.page-engineering-workflows .workflow-reuse-metrics strong {
  color: var(--accent-strong);
  font: 600 clamp(1.25rem, 2.5vw, 1.9rem) var(--font-tech);
}

.page-engineering-workflows .workflow-reuse-metrics span {
  color: var(--fg-muted);
  font-size: .76rem;
  line-height: 1.6;
}

.page-engineering-workflows .workflow-reuse-assumptions,
.page-engineering-workflows .workflow-reuse-economics-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--fg-muted);
  font-size: .82rem;
  line-height: 1.75;
}

.page-engineering-workflows .workflow-reuse-assumptions b {
  margin-right: 12px;
  color: var(--fg-strong);
}

.page-engineering-workflows .workflow-reuse-audiences {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card > div {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card > div span {
  color: var(--fg-muted);
  font-size: .72rem;
}

.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card > div b {
  color: var(--fg-strong);
  font-size: .8rem;
  line-height: 1.65;
}

.page-engineering-workflows .workflow-reuse-common-entry,
.page-engineering-workflows .workflow-reuse-delivery-boundary {
  margin: 14px 0 0;
  color: var(--fg-muted);
  font-size: .8rem;
  line-height: 1.75;
}

.page-engineering-workflows .workflow-reuse-common-entry {
  padding: 13px 15px;
  border-left: 3px solid var(--accent);
  background: var(--bg-soft);
  color: var(--fg-strong);
}

@media (max-width: 1040px) {
  .page-engineering-workflows .workflow-reuse-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-engineering-workflows .workflow-reuse-capabilities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .page-engineering-workflows .workflow-reuse-flow,
  .page-engineering-workflows .workflow-reuse-costs,
  .page-engineering-workflows .workflow-reuse-value-grid,
  .page-engineering-workflows .workflow-reuse-capabilities,
  .page-engineering-workflows .workflow-reuse-audiences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-engineering-workflows .workflow-reuse-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-engineering-workflows .workflow-reuse-economics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .page-engineering-workflows .workflow-reuse-flow,
  .page-engineering-workflows .workflow-reuse-costs,
  .page-engineering-workflows .workflow-reuse-value-grid,
  .page-engineering-workflows .workflow-reuse-capabilities,
  .page-engineering-workflows .workflow-reuse-audiences,
  .page-engineering-workflows .workflow-reuse-steps,
  .page-engineering-workflows .workflow-reuse-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .page-engineering-workflows .workflow-hero-grid,
  .page-engineering-workflows .workflow-case {
    grid-template-columns: 1fr;
  }

  .page-engineering-workflows .workflow-case:nth-child(even) .workflow-case-media {
    order: 0;
  }

  .page-engineering-workflows .workflow-hero-media {
    max-width: 720px;
  }

  .page-engineering-workflows .workflow-case-media img {
    max-height: 360px;
  }
}

@media (max-width: 560px) {
  .page-engineering-workflows .workflow-case-nav {
    grid-template-columns: 1fr;
    margin-bottom: 56px;
  }

  .page-engineering-workflows .workflow-case-media-pair {
    grid-template-columns: 1fr;
  }

  .page-engineering-workflows .workflow-case-copy {
    padding: 24px;
  }
}

.page-engineering-workflows .workflow-value-section {
  background: var(--bg-soft);
  padding-bottom: clamp(32px, 4vw, 48px);
}

.page-engineering-workflows .workflow-cases-section {
  padding-top: clamp(32px, 4vw, 48px);
}

.page-engineering-workflows .workflow-demo-band {
  padding: clamp(22px, 3vw, 34px) 0;
}

.page-engineering-workflows .workflow-demo-action {
  display: flex;
  justify-content: center;
}

.page-engineering-workflows .workflow-demo-action .button {
  min-width: 156px;
  justify-content: center;
}

.page-engineering-workflows .workflow-value-heading {
  max-width: 900px;
  margin-bottom: 32px;
}

.page-engineering-workflows .workflow-value-heading h2 {
  margin-bottom: 8px;
  color: var(--fg-strong);
  font-size: var(--step-h2);
}

.page-engineering-workflows .workflow-value-heading .workflow-value-subtitle {
  margin: 0 0 18px;
  color: var(--accent-strong);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 650;
  line-height: 1.55;
}

.page-engineering-workflows .workflow-value-heading > p:last-child,
.page-engineering-workflows .workflow-value-subheading > p {
  color: var(--fg-muted);
  line-height: 1.85;
}

.page-engineering-workflows .workflow-value-contrast {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.page-engineering-workflows .workflow-value-contrast article {
  padding: clamp(24px, 3vw, 36px);
}

.page-engineering-workflows .workflow-value-human {
  border-right: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-value-kicker {
  margin: 0 0 13px;
  color: var(--fg-strong);
  font-size: .92rem;
  font-weight: 700;
}

.page-engineering-workflows .workflow-value-contrast article > p:last-child {
  margin: 0;
  color: var(--fg-muted);
  font-size: .92rem;
  line-height: 1.85;
}

.page-engineering-workflows .workflow-value-ai {
  background: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
}

.page-engineering-workflows .workflow-value-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 15px 24px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: .82rem;
  line-height: 1.65;
}

.page-engineering-workflows .workflow-value-data,
.page-engineering-workflows .workflow-value-roles {
  margin-top: clamp(54px, 7vw, 82px);
}

.page-engineering-workflows .workflow-value-subheading {
  max-width: 780px;
  margin-bottom: 24px;
}

.page-engineering-workflows .workflow-value-subheading h3 {
  margin: 0 0 10px;
  color: var(--fg-strong);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  line-height: 1.4;
}

.page-engineering-workflows .workflow-value-subheading > p {
  margin: 0;
}

.page-engineering-workflows .workflow-extract-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.page-engineering-workflows .workflow-extract-card,
.page-engineering-workflows .workflow-role-card {
  min-width: 0;
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
  box-shadow: var(--panel-shadow);
}

.page-engineering-workflows .workflow-value-index {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-bottom: 19px;
  border-radius: 50%;
  background: var(--bg-soft);
  color: var(--accent-strong);
  font: 600 .7rem var(--font-tech);
}

.page-engineering-workflows .workflow-extract-card h4,
.page-engineering-workflows .workflow-role-card h4 {
  margin: 0 0 10px;
  color: var(--fg-strong);
  font-size: 1.05rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-extract-summary {
  margin: 0 0 12px;
  color: var(--fg);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.7;
}

.page-engineering-workflows .workflow-extract-details {
  margin: 0;
  color: var(--fg-muted);
  font-size: .83rem;
  line-height: 1.78;
}

.page-engineering-workflows .workflow-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.page-engineering-workflows .workflow-role-card:last-child {
  grid-column: 1 / -1;
}

.page-engineering-workflows .workflow-role-name {
  margin: 0 0 12px;
  color: var(--accent-strong);
  font-size: .77rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.page-engineering-workflows .workflow-role-card > p:not(.workflow-role-name) {
  margin: 0;
  color: var(--fg-muted);
  font-size: .88rem;
  line-height: 1.8;
}

.page-engineering-workflows .workflow-role-output {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: baseline;
  margin-top: 19px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-size: .76rem;
  line-height: 1.6;
}

.page-engineering-workflows .workflow-role-output span {
  color: var(--fg-muted);
}

.page-engineering-workflows .workflow-role-output b {
  color: var(--fg-strong);
  font-weight: 600;
}

@media (max-width: 1040px) {
  .page-engineering-workflows .workflow-extract-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .page-engineering-workflows .workflow-value-contrast {
    gap: 0;
  }
}

@media (max-width: 620px) {
  .page-engineering-workflows .workflow-value-contrast,
  .page-engineering-workflows .workflow-extract-grid,
  .page-engineering-workflows .workflow-role-grid {
    grid-template-columns: 1fr;
  }

  .page-engineering-workflows .workflow-value-human {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .page-engineering-workflows .workflow-role-card:last-child,
  .page-engineering-workflows .workflow-value-note {
    grid-column: auto;
  }
}

.page-engineering-workflows .workflow-carousel {
  width: 100%;
  min-width: 0;
}

.page-engineering-workflows .workflow-carousel-viewport {
  position: relative;
  width: 100%;
  height: clamp(280px, 31vw, 390px);
  overflow: hidden;
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-viewport {
  height: clamp(330px, 36vw, 440px);
}

.page-engineering-workflows .workflow-carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.page-engineering-workflows .workflow-carousel-slide[hidden] {
  display: none !important;
}

.page-engineering-workflows .workflow-carousel-image {
  display: flex;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: var(--bg-soft);
  cursor: zoom-in;
}

.page-engineering-workflows .workflow-carousel-image:focus-visible,
.page-engineering-workflows .workflow-carousel-controls button:focus-visible,
.page-engineering-workflows .workflow-lightbox-close:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
}

.page-engineering-workflows .workflow-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.page-engineering-workflows .workflow-carousel-slide figcaption {
  display: -webkit-box;
  height: 50px;
  flex: 0 0 50px;
  overflow: hidden;
  padding: 10px 12px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: .76rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.page-engineering-workflows .workflow-carousel-controls {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding-top: 10px;
  color: var(--fg-muted);
  font: 600 .76rem var(--font-tech);
}

.page-engineering-workflows .workflow-carousel-controls button {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0 0 3px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--fg-strong);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.page-engineering-workflows .workflow-carousel-controls button:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-slide {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-slide img {
  max-height: none;
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-controls {
  padding: 8px 12px 14px;
}

.page-engineering-workflows .workflow-image-lightbox[hidden] {
  display: none !important;
}

.page-engineering-workflows .workflow-image-lightbox {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 34px);
}

.page-engineering-workflows .workflow-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(5 13 22 / 88%);
  cursor: zoom-out;
}

.page-engineering-workflows .workflow-lightbox-dialog {
  position: relative;
  z-index: 1;
  display: flex;
  width: fit-content;
  max-width: 96vw;
  max-height: 94vh;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 24%);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  box-shadow: 0 24px 90px rgb(0 0 0 / 40%);
}

.page-engineering-workflows .workflow-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(255 255 255 / 48%);
  border-radius: 50%;
  background: rgb(8 17 27 / 76%);
  color: #fff;
  font: 400 1.8rem/1 Arial, sans-serif;
  cursor: pointer;
}

.page-engineering-workflows .workflow-lightbox-dialog img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94vw;
  max-height: calc(94vh - 62px);
  object-fit: contain;
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-lightbox-dialog > p {
  width: 100%;
  margin: 0;
  padding: 12px 52px 13px 16px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-muted);
  font-size: .82rem;
  line-height: 1.5;
}

body.page-engineering-workflows.workflow-lightbox-open {
  overflow: hidden;
}

@media (max-width: 560px) {
  .page-engineering-workflows .workflow-carousel-viewport {
    height: clamp(250px, 72vw, 310px);
  }

  .page-engineering-workflows .workflow-carousel-hero .workflow-carousel-viewport {
    height: clamp(280px, 82vw, 340px);
  }

  .page-engineering-workflows .workflow-carousel-controls {
    gap: 13px;
  }

  .page-engineering-workflows .workflow-lightbox-dialog {
    max-width: 98vw;
    max-height: 96vh;
    border-radius: var(--radius);
  }

  .page-engineering-workflows .workflow-lightbox-dialog img {
    max-width: 96vw;
    max-height: calc(96vh - 58px);
  }
}

/* The hero uses the 1672 × 941 homepage image: let that image set its height,
   with the caption below it, so the bitmap fills the frame without letterboxing. */
.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-viewport {
  height: auto;
  overflow: visible;
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-slide {
  position: relative;
  inset: auto;
  display: flex;
  overflow: hidden;
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-image {
  display: block;
  flex: 0 0 auto;
  height: auto;
  aspect-ratio: 1672 / 941;
  background: var(--bg-raised);
}

.page-engineering-workflows .workflow-carousel-hero .workflow-carousel-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

/* Three-stage solution overview and scroll-linked navigation. */
.page-engineering-workflows .workflow-page-layout {
  display: grid;
  grid-template-columns: minmax(170px, 204px) minmax(0, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 44px);
  width: min(1640px, calc(100% - 40px));
  margin-inline: auto;
}

.page-engineering-workflows .workflow-page-content {
  min-width: 0;
}

.page-engineering-workflows .workflow-page-content .container {
  width: min(100%, var(--container));
}

.page-engineering-workflows .workflow-page-content > .section {
  padding-block: clamp(68px, 7.5vw, 108px);
}

.page-engineering-workflows .workflow-page-content > .workflow-overview-section {
  padding-top: 54px;
  padding-bottom: 66px;
}

.page-engineering-workflows .workflow-stage-rail {
  position: sticky;
  top: 124px;
  z-index: 5;
  align-self: start;
  height: max-content;
  margin-top: 84px;
  color: var(--fg-muted);
}

.page-engineering-workflows .workflow-stage-rail-heading {
  margin: 0 0 18px;
  color: var(--fg-faint);
  font: 600 .62rem var(--font-tech);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.page-engineering-workflows .workflow-stage-rail nav {
  position: relative;
}

.page-engineering-workflows .workflow-stage-rail ol {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-stage-track {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 11px;
  width: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--hairline);
}

.page-engineering-workflows .workflow-stage-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-strong);
  transform: scaleY(var(--workflow-progress, 0));
  transform-origin: top;
}

.page-engineering-workflows .workflow-stage-rail li a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 28px;
  align-items: start;
  gap: 11px;
  color: var(--fg-muted);
  font-size: .76rem;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 10px;
  transition: color .18s ease, background-color .18s ease;
}

.page-engineering-workflows .workflow-stage-node {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg-faint);
  font: 600 .62rem var(--font-tech);
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .18s ease;
}

.page-engineering-workflows .workflow-stage-rail li a:hover,
.page-engineering-workflows .workflow-stage-rail li a.is-active {
  color: var(--fg-strong);
}

.page-engineering-workflows .workflow-stage-rail li a:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 8%, transparent);
}

.page-engineering-workflows .workflow-stage-rail li a.is-active .workflow-stage-node {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.page-engineering-workflows .workflow-stage-rail li a:focus-visible,
.page-engineering-workflows .workflow-phase-card:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 4px;
}

.page-engineering-workflows .workflow-phase-map {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 38px;
}

.page-engineering-workflows .workflow-phase-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  min-height: 142px;
  padding: 20px 21px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
  color: var(--fg);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.page-engineering-workflows .workflow-phase-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-phase-number {
  color: var(--accent-strong);
  font: 600 .72rem var(--font-tech);
}

.page-engineering-workflows .workflow-phase-copy {
  display: grid;
  gap: 9px;
}

.page-engineering-workflows .workflow-phase-copy b {
  color: var(--fg-strong);
  font-size: .93rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-phase-copy small {
  color: var(--fg-muted);
  font-size: .76rem;
  line-height: 1.7;
}

.page-engineering-workflows .workflow-phase-arrow {
  position: absolute;
  top: 50%;
  right: -12px;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg-faint);
  font-size: .72rem;
  transform: translateY(-50%);
}

.page-engineering-workflows .workflow-stage-section,
.page-engineering-workflows #cases,
.page-engineering-workflows #pilot {
  scroll-margin-top: 116px;
}

.page-engineering-workflows .workflow-stage-heading {
  max-width: 860px;
  margin-bottom: 30px;
}

.page-engineering-workflows .workflow-stage-heading .eyebrow {
  margin: 0 0 12px;
}

.page-engineering-workflows .workflow-stage-heading h2 {
  margin: 0;
  color: var(--fg-strong);
  font-size: var(--step-h2);
  line-height: 1.25;
}

.page-engineering-workflows .workflow-stage-lead {
  max-width: 900px;
  margin: 0;
  padding: 3px 0 3px clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--accent-strong);
  color: var(--fg-muted);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.95;
}

.page-engineering-workflows .workflow-extraction-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: start;
  gap: clamp(24px, 4vw, 58px);
}

.page-engineering-workflows .workflow-extraction-copy {
  max-width: 690px;
}

.page-engineering-workflows .workflow-extraction-copy h3,
.page-engineering-workflows .workflow-value-heading h3,
.page-engineering-workflows .workflow-cases-section .section-intro h3,
.page-engineering-workflows .workflow-pilot-section h3 {
  margin: 0;
  color: var(--fg-strong);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.35;
}

.page-engineering-workflows .workflow-extraction-copy > p {
  max-width: 660px;
  margin-top: 22px;
  color: var(--fg-muted);
  line-height: 1.9;
}

.page-engineering-workflows .workflow-supported-inputs {
  /* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4. Existing page tokens. */
  min-width: 0;
  scroll-margin-top: 116px;
}

.page-engineering-workflows .workflow-supported-inputs > h2 {
  margin: 0;
  color: var(--fg-strong);
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  line-height: 1.4;
}

.page-engineering-workflows .workflow-support-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0;
  padding-bottom: 3px;
}

.page-engineering-workflows .workflow-support-tabs[hidden] {
  display: none;
}

.page-engineering-workflows .workflow-support-tabs button {
  min-width: 0;
  min-height: 46px;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg-muted);
  font: 500 .94rem/1.4 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 140ms ease;
}

.page-engineering-workflows .workflow-support-tabs button:hover {
  color: var(--fg-strong);
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-support-tabs button[aria-selected="true"] {
  color: var(--fg-strong);
  font-weight: 650;
}

.page-engineering-workflows .workflow-support-tabs button:active {
  transform: scale(.98);
}

.page-engineering-workflows .workflow-support-tabs button:focus-visible,
.page-engineering-workflows .workflow-support-panel:focus-visible {
  outline: 2px solid var(--fg-strong);
  outline-offset: 3px;
}

.page-engineering-workflows .workflow-support-indicator {
  position: absolute;
  inset: auto auto 0 0;
  width: calc(100% / 3);
  height: 2px;
  background: var(--fg-strong);
  transform: translateX(calc(var(--support-index, 0) * 100%));
  transition: transform 250ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.page-engineering-workflows .workflow-support-stage {
  margin-top: 16px;
  padding: clamp(20px, 2.5vw, 32px);
  border-radius: 16px;
  background: var(--bg-soft);
  touch-action: pan-y pinch-zoom;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-stage {
  display: grid;
  height: 320px;
  box-sizing: border-box;
  overflow: hidden;
}

.page-engineering-workflows .workflow-support-panel {
  min-width: 0;
  margin: 0;
  transition: none;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-panel {
  grid-area: 1 / 1;
  align-self: stretch;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-panel[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.page-engineering-workflows .workflow-support-fallback-heading {
  margin: 0 0 18px;
  color: var(--fg-muted);
  font: 600 1rem/1.5 var(--font-body);
}

.page-engineering-workflows .workflow-support-panel + .workflow-support-panel {
  margin-top: 32px;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-fallback-heading {
  display: none;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-panel + .workflow-support-panel {
  margin-top: 0;
}

.page-engineering-workflows .workflow-support-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-support-items li {
  min-width: 0;
  color: var(--fg-strong);
  font: 550 clamp(1.2rem, 2vw, 1.8rem)/1.35 var(--font-body);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}

.page-engineering-workflows .workflow-support-items--types li {
  font-size: clamp(1rem, 1.45vw, 1.25rem);
  line-height: 1.5;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-items {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  isolation: isolate;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-items::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70%;
  height: 72%;
  max-width: 380px;
  max-height: 200px;
  border: 1px solid rgb(0 0 0 / 5%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-items li {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(160px, 58%);
  margin: 0;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--bg-soft);
  text-align: center;
  white-space: normal;
  font-size: clamp(1.1rem, 2vw, 1.65rem);
  font-weight: 600;
  line-height: 1.25;
  transform-origin: center;
  transition: none;
}

.page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-items--types li {
  font-size: clamp(.95rem, 1.5vw, 1.2rem);
}

.page-engineering-workflows .workflow-supported-inputs .workflow-extraction-coverage {
  max-width: 100%;
  margin-top: 16px;
  font-size: .72rem;
  text-align: right;
  line-height: 1.7;
}

@media (max-width: 560px) {
  .page-engineering-workflows .workflow-support-tabs button {
    font-size: .88rem;
    padding-inline: 2px;
  }

  .page-engineering-workflows .workflow-support-stage {
    padding: 24px 18px;
  }

  .page-engineering-workflows .workflow-supported-inputs.is-enhanced .workflow-support-stage {
    height: 300px;
  }

  .page-engineering-workflows .workflow-support-items {
    gap: 20px 16px;
  }

  .page-engineering-workflows .workflow-support-items li {
    font-size: 1.2rem;
  }

  .page-engineering-workflows .workflow-support-items--types {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .page-engineering-workflows .workflow-support-items--types li {
    font-size: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-support-tabs button,
  .page-engineering-workflows .workflow-support-indicator {
    transition: none;
  }
}

.page-engineering-workflows .workflow-value-heading {
  margin-bottom: 30px;
}

.page-engineering-workflows .workflow-value-heading h3 {
  margin: 0 0 12px;
}

.page-engineering-workflows .workflow-value-roles {
  margin-top: 62px;
}

.page-engineering-workflows .workflow-asset-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-top: 54px;
}

.page-engineering-workflows .workflow-asset-step {
  min-width: 0;
  padding: 18px 17px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--bg-raised);
}

.page-engineering-workflows .workflow-asset-step > span {
  color: var(--accent-strong);
  font: 600 .68rem var(--font-tech);
}

.page-engineering-workflows .workflow-asset-step h4 {
  margin: 9px 0 7px;
  color: var(--fg-strong);
  font-size: .88rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-asset-step p {
  margin: 0;
  color: var(--fg-muted);
  font-size: .77rem;
  line-height: 1.7;
}

.page-engineering-workflows .workflow-demo-band {
  margin-top: 34px;
}

.page-engineering-workflows .workflow-cases-section {
  padding-top: 54px;
  padding-bottom: 54px;
}

.page-engineering-workflows .workflow-case-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-engineering-workflows .workflow-chapter-heading h4 {
  margin: 0 0 14px;
  color: var(--fg-strong);
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.4;
}

.page-engineering-workflows .workflow-case-copy h5 {
  margin: 0 0 22px;
  color: var(--fg-strong);
  font-size: clamp(1.25rem, 1.9vw, 1.65rem);
  line-height: 1.4;
}

.page-engineering-workflows .workflow-pilot-section {
  padding-top: 54px;
}

@media (max-width: 1100px) {
  .page-engineering-workflows .workflow-page-layout {
    grid-template-columns: 164px minmax(0, 1fr);
    gap: 22px;
  }

  .page-engineering-workflows .workflow-phase-map {
    gap: 9px;
  }

  .page-engineering-workflows .workflow-phase-card {
    gap: 10px;
    padding: 17px 15px;
  }
}

@media (max-width: 820px) {
  .page-engineering-workflows .workflow-page-layout {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    width: calc(100% - 24px);
  }

  .page-engineering-workflows .workflow-stage-rail {
    top: 98px;
    margin-top: 74px;
  }

  .page-engineering-workflows .workflow-stage-rail-heading,
  .page-engineering-workflows .workflow-stage-label {
    display: none;
  }

  .page-engineering-workflows .workflow-stage-rail li a {
    grid-template-columns: 24px;
  }

  .page-engineering-workflows .workflow-phase-map {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 28px;
  }

  .page-engineering-workflows .workflow-phase-card {
    min-height: 0;
    padding: 15px 16px;
  }

  .page-engineering-workflows .workflow-phase-arrow {
    display: none;
  }

  .page-engineering-workflows .workflow-extraction-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .page-engineering-workflows .workflow-supported-inputs {
    padding: 0;
    border-top: 0;
    border-left: 0;
  }

  .page-engineering-workflows .workflow-asset-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .page-engineering-workflows .workflow-page-layout {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    width: calc(100% - 16px);
  }

  .page-engineering-workflows .workflow-stage-node {
    width: 22px;
    height: 22px;
  }

  .page-engineering-workflows .workflow-stage-track {
    left: 10px;
  }

  .page-engineering-workflows .workflow-page-content .container {
    width: 100%;
  }

  .page-engineering-workflows .workflow-page-content > .workflow-overview-section {
    padding-top: 34px;
  }

  .page-engineering-workflows .workflow-phase-card {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .page-engineering-workflows .workflow-case-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-engineering-workflows .workflow-asset-flow {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-stage-track span,
  .page-engineering-workflows .workflow-phase-card,
  .page-engineering-workflows .workflow-stage-node {
    transition: none;
  }
}

/* Hierarchical stage and subsection navigation. */
.page-engineering-workflows .workflow-stage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 13px;
  margin: -7px 0 13px;
  color: var(--fg-faint);
  font-size: .65rem;
}

.page-engineering-workflows .workflow-stage-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.page-engineering-workflows .workflow-legend-stage {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--fg-muted);
  font: 600 .52rem var(--font-tech);
  font-style: normal;
}

.page-engineering-workflows .workflow-legend-section {
  width: 7px;
  height: 7px;
  margin-inline: 5px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--bg);
}

.page-engineering-workflows .workflow-stage-rail nav {
  max-height: calc(100vh - 176px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-strong) transparent;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-list,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-list {
  position: relative;
  gap: 14px;
}

.page-engineering-workflows .workflow-stage-track-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-list > li:not(.workflow-stage-track-shell) {
  position: relative;
  z-index: 1;
}

.page-engineering-workflows .workflow-stage-item {
  display: grid;
  gap: 4px;
}

.page-engineering-workflows .workflow-stage-rail .workflow-substage-list {
  gap: 2px;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  min-height: 24px;
  color: var(--fg-muted);
  text-decoration: none;
  border-radius: 10px;
  transition: color .18s ease, background-color .18s ease;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link {
  min-height: 28px;
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.45;
}

.page-engineering-workflows .workflow-stage-label,
.page-engineering-workflows .workflow-substage-label {
  min-width: 0;
  padding-top: 3px;
}

.page-engineering-workflows .workflow-substage-link {
  font-size: .68rem;
  line-height: 1.4;
}

.page-engineering-workflows .workflow-substage-label {
  padding-left: 4px;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link:hover,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link:hover,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link.is-active {
  color: var(--fg-strong);
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link:hover,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link:hover {
  background-color: color-mix(in srgb, var(--accent-strong) 8%, transparent);
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-label,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-label {
  transition: transform .18s ease;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link:hover .workflow-stage-label,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link:hover .workflow-substage-label {
  transform: translateX(3px);
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-node {
  width: 24px;
  height: 24px;
}

.page-engineering-workflows .workflow-substage-node {
  align-self: start;
  justify-self: center;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  background: var(--bg);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link.is-current-stage .workflow-stage-node,
.page-engineering-workflows .workflow-stage-rail .workflow-stage-link.is-active .workflow-stage-node {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: #fff;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link:hover .workflow-stage-node {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 14%, var(--bg));
  color: var(--fg-strong);
  transform: scale(1.06);
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link.is-current-stage:hover .workflow-stage-node,
.page-engineering-workflows .workflow-stage-rail .workflow-stage-link.is-active:hover .workflow-stage-node {
  background: var(--accent-strong);
  color: #fff;
}

.page-engineering-workflows .workflow-stage-rail .workflow-substage-link.is-active .workflow-substage-node {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  transform: scale(1.2);
}

.page-engineering-workflows .workflow-stage-rail .workflow-substage-link:hover .workflow-substage-node {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  transform: scale(1.25);
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link:focus-visible,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.page-engineering-workflows [data-workflow-progress-target],
.page-engineering-workflows .workflow-reuse-block,
.page-engineering-workflows .workflow-reuse-economics {
  scroll-margin-top: 116px;
}

.page-engineering-workflows .workflow-reuse-case {
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-reuse-case h4 {
  margin: 0 0 4px;
  color: var(--fg-strong);
  font-size: 1rem;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .page-engineering-workflows .workflow-stage-legend {
    display: none;
  }

  .page-engineering-workflows .workflow-stage-rail nav {
    max-height: calc(100vh - 116px);
  }

  .page-engineering-workflows .workflow-substage-label {
    display: none;
  }

  .page-engineering-workflows .workflow-stage-rail .workflow-substage-link {
    grid-template-columns: 24px;
    min-height: 20px;
  }

  .page-engineering-workflows .workflow-substage-node {
    margin-top: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-substage-node {
    transition: none;
  }
}

.page-engineering-workflows .workflow-extraction-details {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  margin-top: clamp(36px, 4vw, 56px);
}

.page-engineering-workflows .workflow-model-intro {
  max-width: 60rem;
  margin-bottom: 0;
}

.page-engineering-workflows #extraction-fields .workflow-extract-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .page-engineering-workflows #extraction-fields .workflow-extract-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.page-engineering-workflows .workflow-extraction-panel {
  min-width: 0;
  scroll-margin-top: 116px;
}

.page-engineering-workflows .workflow-extraction-panel-heading {
  max-width: 880px;
  margin: 0 0 22px;
}

.page-engineering-workflows .workflow-extraction-panel-heading h3 {
  margin: 0;
  color: var(--fg-strong);
  font-size: clamp(1.3rem, 1.9vw, 1.65rem);
  line-height: 1.4;
}

.page-engineering-workflows .workflow-extraction-panel-heading p {
  margin: 10px 0 0;
  color: var(--fg-muted);
  font-size: .91rem;
  line-height: 1.85;
}

.page-engineering-workflows .workflow-extraction-source-group h4 {
  margin: 0 0 14px;
  color: var(--fg-strong);
  font-size: 1rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-extraction-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-engineering-workflows .workflow-extraction-tags li {
  padding: 6px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--fg-muted);
  font-size: .75rem;
  line-height: 1.45;
}

.page-engineering-workflows .workflow-extraction-coverage {
  max-width: 34ch;
  margin: 18px 0 0;
  color: var(--fg-muted);
  font-size: .88rem;
  line-height: 1.75;
}

.page-engineering-workflows .workflow-extraction-source-group,
.page-engineering-workflows .workflow-extraction-panel .workflow-extract-card {
  height: 100%;
}

/* Page-only visual refinement: strengthen hierarchy and let the case content breathe. */
.page-engineering-workflows .workflow-page-content {
  font-size: 16px;
}

.page-engineering-workflows .workflow-page-content .eyebrow {
  width: fit-content;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--fg-muted);
  font: 600 13px/1.45 "Inter Local", "Noto Sans SC Local", sans-serif;
  letter-spacing: .045em;
  text-transform: none;
}

.page-engineering-workflows .workflow-page-content .eyebrow > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--accent-strong);
}

.page-engineering-workflows .workflow-overview-section {
  padding-bottom: 34px;
}

.page-engineering-workflows .workflow-overview-section .section-intro h1 {
  max-width: 540px;
  margin: 0;
  font-size: clamp(2.4rem, 4.6vw, 4.1rem);
  line-height: 1.13;
  letter-spacing: -.045em;
}


.page-engineering-workflows .workflow-overview-section h1 > span {
  display: block;
}

.page-engineering-workflows .workflow-opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
}

.page-engineering-workflows .workflow-opening-grid .section-intro {
  margin: 0;
  padding-bottom: 28px;
}

.page-engineering-workflows .workflow-phase-map {
  gap: clamp(18px, 2.5vw, 34px);
  margin-top: 32px;
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 22px;
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-phase-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: color .2s ease;
}

.page-engineering-workflows .workflow-phase-card:hover {
  transform: none;
  border-color: transparent;
  background: transparent;
  color: var(--accent-strong);
}

.page-engineering-workflows .workflow-phase-number {
  font: 600 1.65rem/1 "Inter Local", "Noto Sans SC Local", sans-serif;
}

.page-engineering-workflows .workflow-phase-copy {
  gap: 7px;
}

.page-engineering-workflows .workflow-phase-copy b {
  font-size: 1.05rem;
}

.page-engineering-workflows .workflow-phase-copy small {
  font-size: .94rem;
  line-height: 1.65;
}

.page-engineering-workflows .workflow-phase-arrow {
  right: calc(clamp(18px, 2.5vw, 34px) * -0.65);
  border: 0;
  background: var(--bg-soft);
  color: var(--accent-strong);
  font-size: 1rem;
}

.page-engineering-workflows .workflow-page-content > .workflow-stage-section {
  padding-block: clamp(56px, 6vw, 84px);
}

.page-engineering-workflows .workflow-stage-rail-heading {
  font: 600 12px/1.4 "Inter Local", "Noto Sans SC Local", sans-serif;
  letter-spacing: .02em;
  text-transform: none;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link {
  font-size: 13px;
  line-height: 1.45;
}

.page-engineering-workflows .workflow-stage-rail .workflow-substage-link {
  font-size: 13px;
  line-height: 1.45;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-node {
  font-family: "Inter Local", "Noto Sans SC Local", sans-serif;
}

.page-engineering-workflows .workflow-stage-legend {
  font-size: 13px;
}

.page-engineering-workflows .workflow-page-content .tool-breadcrumb {
  font-family: "Inter Local", "Noto Sans SC Local", sans-serif;
  font-size: 13px;
  letter-spacing: .01em;
}

.page-engineering-workflows .workflow-stage-node,
.page-engineering-workflows .workflow-phase-number,
.page-engineering-workflows .workflow-reuse-index,
.page-engineering-workflows .workflow-reuse-steps li > span,
.page-engineering-workflows .workflow-value-index,
.page-engineering-workflows .workflow-asset-step > span {
  font-family: "Inter Local", "Noto Sans SC Local", sans-serif;
  font-variant-numeric: tabular-nums;
}

.page-engineering-workflows .workflow-stage-heading h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  letter-spacing: -.035em;
}

.page-engineering-workflows .workflow-stage-lead,
.page-engineering-workflows .workflow-reuse-heading > p:last-child,
.page-engineering-workflows .workflow-extraction-copy > p,
.page-engineering-workflows .workflow-extraction-panel-heading p,
.page-engineering-workflows .workflow-value-heading > p:last-child,
.page-engineering-workflows .workflow-value-subheading > p,
.page-engineering-workflows .workflow-chapter-heading > p:last-child,
.page-engineering-workflows .workflow-case-copy > p,
.page-engineering-workflows .workflow-story-blocks p,
.page-engineering-workflows .workflow-case-boundary p {
  max-width: 54rem;
  font-size: 1rem;
  line-height: 1.85;
}

.page-engineering-workflows .workflow-reuse-block,
.page-engineering-workflows .workflow-reuse-economics,
.page-engineering-workflows .workflow-value-contrast {
  border: 0;
  border-radius: 22px;
  box-shadow: none;
}

.page-engineering-workflows .workflow-reuse-card,
.page-engineering-workflows .workflow-reuse-steps li,
.page-engineering-workflows .workflow-extract-card,
.page-engineering-workflows .workflow-role-card,
.page-engineering-workflows .workflow-asset-step {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-engineering-workflows .workflow-reuse-flow,
.page-engineering-workflows .workflow-reuse-costs,
.page-engineering-workflows .workflow-reuse-steps,
.page-engineering-workflows .workflow-asset-flow {
  gap: clamp(18px, 2vw, 28px);
  padding: 18px 22px;
  border-radius: 18px;
  background: var(--bg-soft);
}

.page-engineering-workflows .workflow-reuse-value-grid,
.page-engineering-workflows .workflow-reuse-capabilities,
.page-engineering-workflows .workflow-reuse-audiences,
.page-engineering-workflows .workflow-extract-grid,
.page-engineering-workflows .workflow-role-grid {
  gap: clamp(18px, 2vw, 28px);
  padding: 18px 0;
  border-radius: 0;
  background: transparent;
}

.page-engineering-workflows .workflow-reuse-card,
.page-engineering-workflows .workflow-reuse-steps li,
.page-engineering-workflows .workflow-extract-card,
.page-engineering-workflows .workflow-role-card,
.page-engineering-workflows .workflow-asset-step {
  padding: 8px 0;
}

.page-engineering-workflows .workflow-reuse-value-grid .workflow-reuse-card,
.page-engineering-workflows .workflow-reuse-capabilities .workflow-reuse-card,
.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card,
.page-engineering-workflows .workflow-extract-grid .workflow-extract-card,
.page-engineering-workflows .workflow-role-grid .workflow-role-card {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.page-engineering-workflows .workflow-reuse-card p,
.page-engineering-workflows .workflow-reuse-steps p,
.page-engineering-workflows .workflow-reuse-assumptions,
.page-engineering-workflows .workflow-reuse-economics-note,
.page-engineering-workflows .workflow-reuse-common-entry,
.page-engineering-workflows .workflow-reuse-delivery-boundary,
.page-engineering-workflows .workflow-extract-summary,
.page-engineering-workflows .workflow-extract-details,
.page-engineering-workflows .workflow-role-card > p:not(.workflow-role-name),
.page-engineering-workflows .workflow-asset-step p {
  font-size: .94rem;
  line-height: 1.75;
}

.page-engineering-workflows .workflow-reuse-rationales li,
.page-engineering-workflows .workflow-reuse-tag,
.page-engineering-workflows .workflow-reuse-priority span,
.page-engineering-workflows .workflow-reuse-metrics span,
.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card > div span,
.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card > div b,
.page-engineering-workflows .workflow-role-output,
.page-engineering-workflows .workflow-extraction-tags li {
  font-size: 13px;
}

.page-engineering-workflows .workflow-reuse-card h4,
.page-engineering-workflows .workflow-reuse-steps h4,
.page-engineering-workflows .workflow-asset-step h4 {
  font-size: 1rem;
}

.page-engineering-workflows .workflow-reuse-steps h4 {
  font-size: .98rem;
}

.page-engineering-workflows .workflow-reuse-metrics article {
  border: 0;
  background: var(--bg);
  box-shadow: none;
}

.page-engineering-workflows .workflow-value-index {
  width: auto;
  height: auto;
  justify-content: flex-start;
  margin-bottom: 12px;
  border-radius: 0;
  background: transparent;
  font-size: 1.2rem;
}

.page-engineering-workflows .workflow-reuse-rationales,
.page-engineering-workflows .workflow-reuse-priority,
.page-engineering-workflows .workflow-reuse-audiences .workflow-reuse-card > div,
.page-engineering-workflows .workflow-role-output {
  border-top: 0;
  padding-top: 0;
}

.page-engineering-workflows .workflow-case-nav a {
  min-height: 72px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--bg-soft);
  box-shadow: none;
}

.page-engineering-workflows .workflow-case-nav a:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg-soft));
}

.page-engineering-workflows .workflow-case-nav small {
  font-size: .84rem;
  line-height: 1.5;
}

.page-engineering-workflows .workflow-case {
  gap: clamp(30px, 5vw, 64px);
  padding: clamp(28px, 4vw, 48px) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.page-engineering-workflows .workflow-case-copy {
  padding: 0;
}

.page-engineering-workflows .workflow-case-copy > .eyebrow {
  font-size: 13px;
}

.page-engineering-workflows .workflow-case-copy h5 {
  max-width: 25ch;
  font-size: clamp(1.6rem, 2.3vw, 2rem);
  letter-spacing: -.025em;
}

.page-engineering-workflows .workflow-story-blocks {
  gap: 20px;
}

.page-engineering-workflows .workflow-story-blocks > div {
  padding-top: 0;
  border-top: 0;
}

.page-engineering-workflows .workflow-story-blocks > div > span,
.page-engineering-workflows .workflow-case-boundary > b,
.page-engineering-workflows .workflow-role-name {
  font-size: .84rem;
  letter-spacing: .01em;
}

.page-engineering-workflows .workflow-case-boundary {
  border-left-width: 3px;
  border-radius: 0 12px 12px 0;
  box-shadow: none;
}

.page-engineering-workflows .workflow-carousel-slide figcaption {
  font-size: .84rem;
}

/* Keep motion for chapter entrances and image changes; static data grids stay still. */
.page-engineering-workflows .workflow-overview-section .reveal,
.page-engineering-workflows .workflow-stage-heading.reveal,
.page-engineering-workflows .workflow-extraction-grid > .reveal,
.page-engineering-workflows .workflow-case.reveal {
  --reveal-y: 14px;
  --reveal-duration: 520ms;
}

.page-engineering-workflows .workflow-reuse-card.reveal,
.page-engineering-workflows .workflow-reuse-steps li.reveal,
.page-engineering-workflows .workflow-extract-card.reveal,
.page-engineering-workflows .workflow-role-card.reveal,
.page-engineering-workflows .workflow-asset-step.reveal,
.page-engineering-workflows .workflow-case-nav a.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .page-engineering-workflows .workflow-support-group.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
  }

  .js .page-engineering-workflows .workflow-support-group.reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-support-group.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 820px) {
  .page-engineering-workflows .workflow-opening-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .page-engineering-workflows .workflow-opening-grid .section-intro {
    padding-bottom: 0;
  }

  .page-engineering-workflows .workflow-page-content > .workflow-stage-section {
    padding-block: 60px;
  }

  .page-engineering-workflows .workflow-stage-rail .workflow-stage-list {
    gap: 10px;
  }
}

@media (max-width: 560px) {
  .page-engineering-workflows .workflow-page-layout {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 7px;
    width: calc(100% - 20px);
  }

  .page-engineering-workflows .workflow-overview-section {
    padding-bottom: 24px;
  }

  .page-engineering-workflows .workflow-overview-section .section-intro h1 {
    font-size: clamp(2.45rem, 10.5vw, 2.8rem);
  }

  .page-engineering-workflows .workflow-phase-map {
    gap: 16px;
    padding: 18px;
  }

  .page-engineering-workflows .workflow-phase-number {
    font-size: 1.35rem;
  }

  .page-engineering-workflows .workflow-phase-copy b {
    font-size: 1rem;
  }

  .page-engineering-workflows .workflow-phase-copy small {
    font-size: .9rem;
  }

  .page-engineering-workflows .workflow-case {
    padding-block: 30px;
  }

  .page-engineering-workflows .workflow-case-copy {
    padding: 0;
  }

  .page-engineering-workflows .workflow-reuse-flow,
  .page-engineering-workflows .workflow-reuse-costs,
  .page-engineering-workflows .workflow-reuse-steps,
  .page-engineering-workflows .workflow-asset-flow {
    padding: 16px 18px;
  }

  .page-engineering-workflows .workflow-reuse-value-grid,
  .page-engineering-workflows .workflow-reuse-capabilities,
  .page-engineering-workflows .workflow-reuse-audiences,
  .page-engineering-workflows .workflow-extract-grid,
  .page-engineering-workflows .workflow-role-grid {
    padding: 16px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-overview-section .reveal,
  .page-engineering-workflows .workflow-stage-heading.reveal,
  .page-engineering-workflows .workflow-extraction-grid > .reveal,
  .page-engineering-workflows .workflow-case.reveal {
    --reveal-y: 0;
    --reveal-duration: 0ms;
  }
}

/* Compact, hover-expandable chapter rail and fluid reading width. */
.page-engineering-workflows .workflow-page-layout {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(14px, 2vw, 28px);
  width: min(1640px, calc(100% - 48px));
}

.page-engineering-workflows .workflow-page-content .container {
  width: min(100%, var(--container));
  padding-inline: clamp(18px, 2.6vw, 38px);
}

.page-engineering-workflows .workflow-stage-rail {
  width: 78px;
  max-width: calc(100vw - 32px);
  margin-top: 78px;
  padding: 8px 12px 8px 0;
  overflow: visible;
  border-radius: 0 14px 14px 0;
  background: transparent;
  transition: width 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.page-engineering-workflows .workflow-stage-rail-heading,
.page-engineering-workflows .workflow-stage-legend {
  display: none;
}

.page-engineering-workflows .workflow-stage-rail nav {
  box-sizing: border-box;
  width: calc(100% + 8px);
  margin-left: -8px;
  padding-left: 8px;
  z-index: 1;
  max-height: calc(100dvh - 144px);
  overflow-x: hidden;
  overflow-y: auto;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-list {
  gap: 13px;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link,
.page-engineering-workflows .workflow-stage-rail .workflow-substage-link {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  box-sizing: border-box;
  width: calc(100% + 8px);
  margin-left: -8px;
  padding-left: 8px;
}

.page-engineering-workflows .workflow-stage-rail .workflow-stage-link {
  min-height: 32px;
}

.page-engineering-workflows .workflow-stage-rail .workflow-substage-link {
  min-height: 27px;
}

.page-engineering-workflows .workflow-stage-label,
.page-engineering-workflows .workflow-substage-label {
  display: block;
  min-width: 0;
  width: 0;
  height: 0;
  max-width: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  border-radius: 0;
  background: none;
  color: transparent;
  font-size: 0;
  line-height: 0;
  opacity: 0;
  text-overflow: clip;
  white-space: nowrap;
  filter: none;
  transition: max-width 220ms ease, opacity 180ms ease, color 180ms ease;
}

.page-engineering-workflows .workflow-stage-rail:hover,
.page-engineering-workflows .workflow-stage-rail:focus-within {
  width: min(164px, calc(100vw - 48px));
  background: transparent;
  box-shadow: none;
}

.page-engineering-workflows .workflow-stage-rail::before {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(100% + 80px);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--bg) 97%, transparent) 0%,
    color-mix(in srgb, var(--bg) 94%, transparent) 46%,
    color-mix(in srgb, var(--bg) 78%, transparent) 70%,
    color-mix(in srgb, var(--bg) 38%, transparent) 88%,
    transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, width 220ms ease;
}

.page-engineering-workflows .workflow-stage-rail:not(:hover):not(:focus-within) .workflow-stage-node {
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--fg-strong) 7%, transparent);
}

.page-engineering-workflows .workflow-stage-rail:not(:hover):not(:focus-within) .workflow-substage-node {
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--fg-strong) 6%, transparent);
}

.page-engineering-workflows .workflow-stage-rail:hover::before,
.page-engineering-workflows .workflow-stage-rail:focus-within::before {
  opacity: 1;
}

.page-engineering-workflows .workflow-stage-rail:hover .workflow-stage-label,
.page-engineering-workflows .workflow-stage-rail:hover .workflow-substage-label,
.page-engineering-workflows .workflow-stage-rail:focus-within .workflow-stage-label,
.page-engineering-workflows .workflow-stage-rail:focus-within .workflow-substage-label {
  width: auto;
  height: auto;
  max-width: 128px;
  margin-top: 0;
  padding: 0;
  padding-top: 3px;
  border-radius: 0;
  background: none;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.45;
  opacity: 1;
  filter: none;
}

.page-engineering-workflows .workflow-stage-rail:hover .workflow-stage-label,
.page-engineering-workflows .workflow-stage-rail:focus-within .workflow-stage-label {
  padding-top: 4px;
}

.page-engineering-workflows .workflow-stage-rail:hover nav,
.page-engineering-workflows .workflow-stage-rail:focus-within nav {
  overflow-x: hidden;
}

.page-engineering-workflows .workflow-page-content > .section {
  min-width: 0;
}

.page-engineering-workflows .workflow-page-content img,
.page-engineering-workflows .workflow-page-content figure {
  max-width: 100%;
}

@media (max-width: 820px) {
  .page-engineering-workflows .workflow-page-layout {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    width: calc(100% - 40px);
  }

  .page-engineering-workflows .workflow-stage-rail {
    top: 92px;
    width: 66px;
    margin-top: 68px;
  }

  .page-engineering-workflows .workflow-stage-label,
  .page-engineering-workflows .workflow-substage-label {
    display: block;
  }

  .page-engineering-workflows .workflow-page-content .container {
    width: 100%;
    padding-inline: clamp(16px, 3.5vw, 24px);
  }

  .page-engineering-workflows .workflow-page-content > .workflow-stage-section {
    padding-block: clamp(48px, 7vw, 64px);
  }
}

@media (max-width: 560px) {
  .page-engineering-workflows .workflow-page-layout {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 8px;
    width: calc(100% - 28px);
  }

  .page-engineering-workflows .workflow-stage-rail {
    top: 84px;
    width: 58px;
    max-width: calc(100vw - 28px);
    margin-top: 62px;
    padding-right: 6px;
  }

  .page-engineering-workflows .workflow-stage-rail:hover,
  .page-engineering-workflows .workflow-stage-rail:focus-within {
    width: min(164px, calc(100vw - 28px));
  }

  .page-engineering-workflows .workflow-stage-rail .workflow-stage-link,
  .page-engineering-workflows .workflow-stage-rail .workflow-substage-link {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
  }

  .page-engineering-workflows .workflow-stage-node {
    width: 24px;
    height: 24px;
  }

  .page-engineering-workflows .workflow-stage-track {
    left: 11px;
  }

  .page-engineering-workflows .workflow-page-content .container {
    padding-inline: clamp(12px, 4vw, 18px);
  }

  .page-engineering-workflows .workflow-page-content > .section {
    padding-block: 42px;
  }

  .page-engineering-workflows .workflow-page-content > .workflow-overview-section {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .page-engineering-workflows .workflow-overview-section .section-intro h1 {
    font-size: clamp(1.9rem, 8.2vw, 2.55rem);
    line-height: 1.24;
  }

  .page-engineering-workflows .workflow-opening-grid {
    gap: 22px;
  }

  .page-engineering-workflows .workflow-phase-map,
  .page-engineering-workflows .workflow-extraction-grid,
  .page-engineering-workflows .workflow-role-grid,
  .page-engineering-workflows .workflow-reuse-value-grid,
  .page-engineering-workflows .workflow-reuse-capabilities,
  .page-engineering-workflows .workflow-reuse-audiences,
  .page-engineering-workflows .workflow-case-nav {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-stage-rail,
  .page-engineering-workflows .workflow-stage-label,
  .page-engineering-workflows .workflow-substage-label {
    transition: none;
  }
}

.page-engineering-workflows .workflow-substage-list--children {
  gap: 1px;
  margin: 3px 0 5px 10px;
}

.page-engineering-workflows .workflow-substage-link--parent .workflow-substage-label {
  color: var(--fg);
  font-weight: 650;
}

.page-engineering-workflows .workflow-substage-link--parent .workflow-substage-node {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-width: 2px;
  border-color: var(--accent-strong);
}

.page-engineering-workflows .workflow-substage-link--child .workflow-substage-node {
  width: 6px;
  height: 6px;
  margin-top: 8px;
}

/* Extraction demo: fit the work surface and its action inside the first viewport. */
.page-tool-data-extract .tool-workbench {
  padding-top: clamp(12px, 2vh, 24px);
  padding-bottom: 24px;
}

.page-tool-data-extract .tool-workbench .workbench[data-extract] {
  margin-top: 0;
  height: min(790px, calc(100vh - var(--header-h) - 48px));
  height: min(790px, calc(100svh - var(--header-h) - 48px));
  min-height: 0;
  max-height: none;
}

.page-tool-data-extract .wb-result > .demo-tabs {
  flex-shrink: 0;
}

.page-tool-data-extract .ex-body:not(.is-video-mode) {
  grid-template-rows: minmax(0, 1fr);
}

.page-tool-data-extract .ex-drawing {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-tool-data-extract .ex-drawing-head,
.page-tool-data-extract .ex-cad-legend {
  flex-shrink: 0;
}

.page-tool-data-extract :is(.ex-cad-frame, .ex-compare-frame, .ex-link-frame) {
  flex: 1;
  min-height: 0;
  aspect-ratio: auto;
}

.page-tool-data-extract .ex-table {
  overflow: hidden;
}

.page-tool-data-extract .ex-run-action {
  background: var(--bg-raised);
}

@media (max-width: 620px) {
  .page-tool-data-extract .tool-workbench {
    padding-block: 12px;
  }

  .page-tool-data-extract .tool-workbench .workbench[data-extract] {
    height: min(790px, calc(100vh - var(--header-h) - 24px));
    height: min(790px, calc(100svh - var(--header-h) - 24px));
  }

  .page-tool-data-extract .ex-body:not(.is-video-mode) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(148px, .4fr) minmax(0, 1fr);
    overflow: hidden;
  }

  .page-tool-data-extract .ex-table {
    order: -1;
    padding: 10px 14px;
    border-bottom: 1px solid var(--hairline);
  }

  .page-tool-data-extract .ex-table > .mini-label {
    margin-bottom: 6px;
  }

  .page-tool-data-extract .ex-empty {
    padding-block: 8px;
  }

  .page-tool-data-extract .ex-run-action {
    padding-top: 8px;
  }

  .page-tool-data-extract .ex-drawing {
    padding: 12px 14px;
    border-right: 0;
  }

  .page-tool-data-extract .ex-drawing-head {
    flex-direction: row;
    align-items: center;
    margin-bottom: 8px;
  }
}

/* Roles: a stable reading panel with a selectable, timed index. */
.page-engineering-workflows .workflow-roles-display {
  margin-top: 28px;
}
.page-engineering-workflows .workflow-role-tabs[hidden] { display: none; }
.page-engineering-workflows .workflow-role-detail {
  min-width: 0;
  padding: clamp(24px, 3vw, 44px);
  background: var(--bg-soft);
  border-radius: 18px;
}
.page-engineering-workflows .workflow-role-detail + .workflow-role-detail { margin-top: 16px; }
.page-engineering-workflows .workflow-role-detail-name {
  margin: 0 0 24px;
  color: var(--fg-muted);
  font-size: .9rem;
}
.page-engineering-workflows .workflow-role-detail h4 {
  margin: 0;
  color: var(--fg-strong);
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.4;
}
.page-engineering-workflows .workflow-role-detail-text {
  max-width: 34em;
  margin: 18px 0 0;
  color: var(--fg-muted);
  font-size: 1rem;
  line-height: 1.8;
}
.page-engineering-workflows .workflow-role-deliverables {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.page-engineering-workflows .workflow-role-deliverables li {
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg);
  color: var(--fg-strong);
  font-size: .85rem;
  line-height: 1.6;
}
.page-engineering-workflows .workflow-roles-display.is-enhanced {
  display: grid;
  grid-template-columns: minmax(180px, .7fr) minmax(0, 2fr);
  gap: clamp(20px, 4vw, 52px);
}
.page-engineering-workflows .workflow-role-tabs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.page-engineering-workflows .workflow-role-tabs button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 14px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fg-muted);
  text-align: left;
  font: 500 1rem/1.4 var(--font-body);
  cursor: pointer;
  overflow: hidden;
  transition: background 180ms ease, color 180ms ease;
}
.page-engineering-workflows .workflow-role-tabs button:hover,
.page-engineering-workflows .workflow-role-tabs button[aria-selected="true"] {
  background: var(--bg-soft);
  color: var(--fg-strong);
}
.page-engineering-workflows .workflow-role-tabs button:focus-visible {
  outline: 2px solid var(--fg-strong);
  outline-offset: 3px;
}
.page-engineering-workflows .workflow-role-tabs button:active { background: var(--bg-raised); }
.page-engineering-workflows .workflow-role-tabs button > span:nth-child(2) {
  opacity: 0;
  transition: opacity 180ms ease;
}
.page-engineering-workflows .workflow-role-tabs button[aria-selected="true"] > span:nth-child(2),
.page-engineering-workflows .workflow-role-tabs button:hover > span:nth-child(2) { opacity: 1; }
.page-engineering-workflows .workflow-role-timer {
  position: absolute;
  inset: auto 12px 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}
.page-engineering-workflows .workflow-roles-display.is-enhanced .workflow-role-panels {
  display: grid;
  min-width: 0;
}
.page-engineering-workflows .workflow-roles-display.is-enhanced .workflow-role-detail {
  grid-area: 1 / 1;
  align-self: stretch;
  margin: 0;
  min-height: 340px;
  box-sizing: border-box;
}
.page-engineering-workflows .workflow-role-detail[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.page-engineering-workflows .workflow-roles-note {
  margin: 18px 0 0;
  color: var(--fg-muted);
  font-size: .85rem;
  line-height: 1.8;
}
@media (max-width: 620px) {
  .page-engineering-workflows .workflow-roles-display.is-enhanced { grid-template-columns: 1fr; gap: 16px; }
  .page-engineering-workflows .workflow-role-tabs { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  .page-engineering-workflows .workflow-role-tabs button { min-height: 44px; padding: 10px; font-size: .88rem; }
  .page-engineering-workflows .workflow-role-tabs button > span:nth-child(2) { display: none; }
  .page-engineering-workflows .workflow-roles-display.is-enhanced .workflow-role-detail { min-height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-engineering-workflows .workflow-role-tabs button,
  .page-engineering-workflows .workflow-role-tabs button > span { transition: none; }
}