/* Visual enrichment only. The approved VI and interaction stylesheet stay intact. */
.graphic-icon, .heading-icon, .row-icon, .brief-icon, .stat-icon, .qc-icon,
.step-icon, .family-icon, .timing-icon { flex: none; object-fit: contain; }
.visual-enriched svg { max-width: 100%; }
.graphic-icon { width: 48px; height: 48px; margin-bottom: 1rem; }
.heading-icon { display: inline-block; width: 32px; height: 32px; vertical-align: middle; margin-right: .65rem; }
.banner-icon { width: 48px; height: 48px; display: block; margin-bottom: 1.25rem; }
.graphic-section { position: relative; }
.graphic-section::after { content: ''; display: block; position: absolute; height: 16px; width: min(38rem, 80%); bottom: 0; left: 50%; transform: translateX(-50%); background: url('graphics/section-rail.svg') center / 100% 100% no-repeat; pointer-events: none; }
.blueprint-hero { position: relative; isolation: isolate; }
.blueprint-hero::before { content: ''; position: absolute; z-index: -1; top: 0; right: 0; width: 62%; height: 100%; background: url('graphics/industrial-grid.svg') center / cover no-repeat; opacity: .55; pointer-events: none; }
.blueprint-banner { background: url('graphics/industrial-grid.svg') right center / auto 100% no-repeat; }
.blueprint-banner .page-banner-grid { position: relative; }
.blueprint-banner .page-banner-grid > p { background: var(--vi-surface); padding: .5rem; }
.buyer-point { display: grid; align-content: start; gap: .5rem; padding-block: 1.75rem; }
.buyer-point .graphic-icon { width: 40px; height: 40px; margin: 0 0 .25rem; }
.buyer-point strong { font-size: clamp(1.35rem, 1.6vw, 1.75rem); font-variant-numeric: tabular-nums; line-height: 1.2; }
.buyer-point span { margin: 0; }
.family-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--vi-border); border-left: 1px solid var(--vi-border); }
.family-entry { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.5rem; border-bottom: 1px solid var(--vi-border); border-right: 1px solid var(--vi-border); text-decoration: none; color: var(--vi-heading); font-weight: 600; line-height: 1.35; transition: background-color var(--vi-motion); }
.family-entry:hover { background: var(--vi-section-tint); }
.family-icon { width: 56px; height: 56px; }
.family-arrow { color: var(--vi-green-700); font-weight: 400; }
.family-heading-icon { width: 40px; height: 40px; }
.family-entry:nth-child(2) { background: var(--vi-green-050); }
.decision .graphic-icon { margin-bottom: .5rem; }
.decision .num { display: block; }
.application .graphic-icon { float: right; margin: 0 0 .5rem 1rem; }
.diagram-steps { list-style: none; padding: 0; margin: 0; gap: 1.5rem; }
.diagram-steps .order-step { position: relative; border: 0; padding-top: 0; }
.step-icon { width: 64px; height: 64px; display: block; margin-bottom: 1.25rem; padding: .5rem; background: var(--vi-surface); border: 1px solid var(--vi-border); position: relative; z-index: 1; }
.diagram-steps .order-step:not(:last-child)::after { content: ''; position: absolute; top: 32px; height: 2px; left: 64px; right: -1.5rem; background: var(--vi-border); }
.diagram-steps .order-step:not(:last-child)::before { content: ''; position: absolute; top: 29px; right: 0; width: 7px; height: 7px; border-top: 2px solid var(--vi-primary); border-right: 2px solid var(--vi-primary); transform: rotate(45deg); }
.diagram-steps .order-step h3 { max-width: 16ch; }
.structure-figure { margin: 1.5rem 0 0; border: 1px solid var(--vi-border); background: var(--vi-section-tint); padding: 1.25rem; }
.structure-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .35rem .75rem; }
.structure-figure figcaption > .eyebrow { flex-basis: 100%; margin: 0 0 .25rem; }
.structure-figure figcaption strong { font-size: var(--vi-text-lg); color: var(--vi-heading); }
.illustration-label { font-size: var(--vi-text-xs); padding: .15rem .5rem; border: 1px solid var(--vi-green-700); color: var(--vi-green-700); background: var(--vi-green-050); }
.structure-drawing { width: 100%; height: auto; max-height: 230px; display: block; margin-block: .5rem; }
.structure-key { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--vi-text-xs); color: var(--vi-heading); }
.structure-key li { display: flex; align-items: center; gap: .4rem; }
.key-marker { width: 14px; height: 2px; background: var(--vi-green-700); }
.structure-disclaimer { margin: .75rem 0 0; font-size: var(--vi-text-xs); line-height: 1.5; color: var(--vi-text-muted); }
.detail-note { border: 1px solid var(--vi-border); background: var(--vi-section-tint); padding: 1.5rem; }
.detail-note:nth-child(3) { background: var(--vi-green-050); }
.row-icon { display: inline-block; width: 28px; height: 28px; vertical-align: middle; margin: 0 .6rem .3rem 0; }
.supply-graphic { background: var(--vi-surface-subtle); }
.stat-icon { display: block; width: 40px; height: 40px; margin-bottom: .75rem; }
.factory-feature { grid-template-columns: 1.4fr 1fr; }
.factory-feature > figure { align-self: stretch; display: flex; align-items: center; }
.fact { min-width: 0; }
.fact strong { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.fact:nth-child(4) { background: var(--vi-green-050); }
.production-diagram { margin: 2rem 0 0; padding: 1.5rem 2rem; background: var(--vi-section-tint); border: 1px solid var(--vi-border); }
.production-diagram figcaption strong, .production-diagram figcaption > span { display: block; }
.production-diagram figcaption strong { color: var(--vi-heading); font-size: var(--vi-text-lg); }
.production-diagram figcaption > span:last-child { color: var(--vi-text-muted); font-size: var(--vi-text-sm); margin-block: .25rem 1.5rem; }
.production-stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.5rem; }
.production-stages li { position: relative; min-width: 0; font-weight: 600; color: var(--vi-heading); }
.production-stages .step-icon { margin-bottom: .75rem; }
.production-stages li:not(:last-child)::after { content: ''; position: absolute; top: 32px; left: 64px; right: -1.5rem; border-top: 2px solid var(--vi-border); }
.qc-list { border: 0; }
.qc-item { position: relative; grid-template-columns: 56px minmax(0,1fr); border: 0; padding-top: 0; padding-bottom: 2rem; }
.qc-item::before { display: none; }
.qc-item:not(:last-child)::after { content: ''; position: absolute; width: 2px; left: 27px; top: 56px; bottom: 0; background: var(--vi-border); }
.qc-icon { width: 56px; height: 56px; padding: .35rem; border: 1px solid var(--vi-border); background: var(--vi-section-tint); }
.timing-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 1.25rem; }
.timing-card { grid-column: span 2; min-width: 0; padding: 1.5rem; border: 1px solid var(--vi-border); background: var(--vi-section-tint); }
.timing-card:nth-last-child(-n+2) { grid-column: span 3; background: var(--vi-surface-subtle); }
.timing-icon { width: 48px; height: 48px; margin-bottom: 1rem; }
.timing-card h3 { font-size: var(--vi-text-lg); }
.timing-value { display: block; font-size: 2rem; line-height: 1.2; color: var(--vi-primary); margin-block: 1rem; font-variant-numeric: tabular-nums; }
.timing-card p { font-size: var(--vi-text-sm); color: var(--vi-text-muted); margin: 0; }
.brief li { display: flex; align-items: center; gap: .8rem; }
.brief li::before { display: none; }
.brief-icon { width: 32px; height: 32px; }
.faq-list summary .heading-icon { width: 28px; height: 28px; }
@media (max-width: 64rem) {
  .family-entry { padding: 1.25rem; grid-template-columns: 48px minmax(0,1fr) auto; gap: .75rem; }
  .family-icon { width: 48px; height: 48px; }
  .diagram-steps { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1rem; }
  .diagram-steps .order-step h3 { font-size: 1rem; }
  .factory-feature { grid-template-columns: 1fr; }
  .blueprint-banner { background-size: 70% auto; }
}
@media (max-width: 48rem) {
  .family-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .family-entry:last-child { grid-column: 1/-1; }
  .diagram-steps { grid-template-columns: 1fr; gap: 0; }
  .diagram-steps .order-step { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: .4rem 1.25rem; padding-bottom: 1.75rem; }
  .diagram-steps .step-icon { grid-column: 1; grid-row: 1/4; margin: 0; }
  .diagram-steps .order-step b, .diagram-steps .order-step h3, .diagram-steps .order-step p { grid-column: 2; margin: 0; max-width: none; }
  .diagram-steps .order-step h3 { font-size: var(--vi-text-lg); }
  .diagram-steps .order-step:not(:last-child)::after { top: 64px; bottom: 0; height: auto; left: 31px; right: auto; width: 2px; }
  .diagram-steps .order-step:not(:last-child)::before { display: none; }
  .timing-grid { grid-template-columns: 1fr 1fr; }
  .timing-card, .timing-card:nth-last-child(-n+2) { grid-column: auto; }
  .timing-card:last-child { grid-column: 1/-1; }
  .production-stages { grid-template-columns: 1fr 1fr; }
  .production-stages li:nth-child(2)::after { display: none; }
}
@media (max-width: 40rem) {
  .family-entry { padding: 1rem; gap: .6rem; grid-template-columns: 40px minmax(0,1fr); font-size: var(--vi-text-sm); }
  .family-icon { width: 40px; height: 40px; }
  .family-arrow { display: none; }
  .blueprint-hero::before { width: 100%; height: 40%; opacity: .35; }
  .blueprint-banner { background-size: auto 70%; background-position: right top; }
  .blueprint-banner .page-banner-grid > p { padding: 0; }
  .buyer-point strong { font-size: 1.35rem; }
  .detail-note { padding: 1.25rem; }
  .timing-grid { grid-template-columns: 1fr; }
  .timing-card:last-child { grid-column: auto; }
  .timing-card { display: grid; grid-template-columns: 48px minmax(0,1fr); gap: .5rem 1rem; padding: 1.25rem; }
  .timing-icon { grid-row: 1/4; margin: 0; }
  .timing-card h3, .timing-value, .timing-card p { grid-column: 2; margin: 0; }
  .timing-value { font-size: 1.75rem; }
  .production-diagram { padding: 1.25rem; }
  .qc-grid { gap: 2rem; }
}