/* NSA800 technology narrative, preview v1. */
.nsa-overview .hero .product-visual { background: #050607; }
.nsa-overview .hero .product-visual img { width: 100%; height: auto; object-fit: contain; }
.nsa-tech-intro .nsa-feature-copy { max-width: 850px; }
.nsa-tech-image { margin: 48px 0 0; }
.nsa-tech-image img { display: block; width: 100%; height: auto; }
.nsa-tech-image figcaption { margin-top: 12px; color: var(--muted); font-size: 12px; }
.nsa-tech-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nsa-tech-links a { padding: 12px 26px; border: 1px solid #42464a; border-radius: 999px; color: #e8ecec; text-decoration: none; font: 500 16px/1.4 var(--font-latin); transition: border-color .2s, background .2s; }
.nsa-tech-links a:hover { border-color: #a7c6bd; background: #202b27; }
.nsa-tech-links a:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.nsa-tech-section { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 36px 64px; align-items: center; }
.nsa-tech-section > .nsa-tech-image { grid-column: 1 / -1; margin-top: 8px; }
.nsa-tech-section .nsa-metric strong { font-size: clamp(32px,4vw,64px); }
.nsa-tech-section .nsa-feature-tags { justify-content: flex-start; }
@media (max-width: 800px) {
 .nsa-tech-section { grid-template-columns: minmax(0,1fr); gap: 28px; }
 .nsa-tech-image { margin-top: 32px; }
 .nsa-tech-section .nsa-metrics { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .nsa-tech-links { gap: 10px; }
 .nsa-tech-links a { padding: 10px 20px; }
}

/* Explicit pairing between technology labels and sections. */
.nsa-tech-links { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.nsa-tech-links a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 22px; border-radius: 8px; }
.nsa-tech-links strong { font-size: 20px; font-weight: 500; }
.nsa-tech-links span { color: var(--muted); font-size: 14px; line-height: 1.5; }
@media(max-width:600px) { .nsa-tech-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .nsa-tech-links a { padding: 16px; } }

/* Reduce technical illustrations; PCB uses half the previous width. */
.nsa-overview .nsa-tech-image { width: 75%; margin-left: auto; margin-right: auto; }
.nsa-overview #capture > .nsa-tech-image { width: 50%; }

.nsa-beam-visuals { grid-column: 1 / -1; width: 90%; max-width: 1120px; margin: 8px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.nsa-beam-visuals figure { min-width: 0; margin: 0; }
.nsa-beam-visuals img { display: block; width: 100%; height: auto; }
.nsa-beam-visuals figcaption { margin-top: 14px; color: var(--muted); font-size: 13px; }
.nsa-beam-visuals p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
@media(max-width:800px) { .nsa-beam-visuals { width: 100%; grid-template-columns: 1fr; gap: 28px; } }

/* Bare beam diagram at left; equal-height image frames. */
.nsa-beam-visuals img { aspect-ratio: 16 / 9; height: auto; object-fit: contain; }

/* MEMS: full PCB at left, microphone macro at right, matching Beam layout. */
.nsa-mems-visuals { grid-column: 1 / -1; width: 90%; max-width: 1120px; margin: 8px auto 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; align-items: start; }
.nsa-mems-visuals figure { min-width: 0; margin: 0; }
.nsa-mems-visuals img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; }
@media(max-width:800px) { .nsa-mems-visuals { width: 100%; grid-template-columns: 1fr; gap: 28px; } }

/* Refined proportions, restored captions and feathered photo edges. */
.nsa-mems-visuals .nsa-pair-image { aspect-ratio: 16 / 10.8; display: flex; align-items: center; justify-content: center; }
.nsa-mems-visuals figure:first-child img { width: 120%; max-width: none; flex: 0 0 120%; }
.nsa-mems-visuals figure:last-child img { width: 85%; }
.nsa-mems-visuals figcaption, .nsa-beam-visuals figcaption { margin: 20px 0 0; color: var(--muted); font-size: 13px; line-height: 1.65; text-align: center; }
.nsa-beam-visuals { column-gap: clamp(64px, 7vw, 104px); }
.nsa-mems-visuals figure:last-child img, .nsa-beam-visuals figure:last-child img {
 -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
 -webkit-mask-composite: source-in;
 mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
 mask-composite: intersect;
}
@media(max-width:800px) { .nsa-mems-visuals, .nsa-beam-visuals { row-gap: 36px; } }

/* Replace alpha feathering with a 10px black edge overlay on these two photos. */
.nsa-mems-visuals figure:last-child img, .nsa-beam-visuals figure:last-child img {
 -webkit-mask-image: none;
 mask-image: none;
}
.nsa-photo-edge { position: relative; display: block; width: 100%; line-height: 0; }
.nsa-mems-visuals figure:last-child .nsa-photo-edge { width: 85%; }
.nsa-mems-visuals figure:last-child .nsa-photo-edge img { width: 100%; }

/* The overlay itself uses the same viewport-aligned charcoal as the section.
   Only this overlay is masked; the photograph remains fully opaque. */
.nsa-photo-edge::after {
 content: ""; position: absolute; inset: 0; pointer-events: none;
 background: var(--site-charcoal);
 background-attachment: fixed;
 background-size: 100vw 100vh;
 background-position: 0 0;
 -webkit-mask-image: linear-gradient(to right, #000, transparent 10px, transparent calc(100% - 10px), #000), linear-gradient(to bottom, #000, transparent 10px, transparent calc(100% - 10px), #000);
 -webkit-mask-composite: source-over;
 mask-image: linear-gradient(to right, #000, transparent 10px, transparent calc(100% - 10px), #000), linear-gradient(to bottom, #000, transparent 10px, transparent calc(100% - 10px), #000);
 mask-composite: add;
}

/* Exterior 6px frame: dark green directly into the section's charcoal.
   No stacked shadows or black color stops. The photo remains unmasked. */
.nsa-mems-visuals .nsa-photo-edge { box-shadow: none; isolation: isolate; }
.nsa-mems-visuals .nsa-photo-edge::after { content: none; }
.nsa-mems-visuals .nsa-photo-edge::before {
 content: ""; position: absolute; inset: -6px; padding: 6px; pointer-events: none;
 background:
 linear-gradient(to bottom, rgba(16,61,43,0), #103d2b) top / 100% 6px no-repeat,
 linear-gradient(to top, rgba(16,61,43,0), #103d2b) bottom / 100% 6px no-repeat,
 linear-gradient(to right, rgba(16,61,43,0), #103d2b) left / 6px 100% no-repeat,
 linear-gradient(to left, rgba(16,61,43,0), #103d2b) right / 6px 100% no-repeat,
 var(--site-charcoal);
 background-attachment: scroll, scroll, scroll, scroll, fixed;
 background-size: 100% 6px, 100% 6px, 6px 100%, 6px 100%, 100vw 100vh;
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
}

.nsa-beam-visuals .nsa-photo-edge { --photo-frame-color: #343630; --photo-frame-clear: rgba(52,54,48,0); }
.nsa-ceiling-edge { --photo-frame-color: #777976; --photo-frame-clear: rgba(119,121,118,0); }
/* Exterior 6px frame: dark green directly into the section's charcoal.
   No stacked shadows or black color stops. The photo remains unmasked. */
.nsa-beam-visuals .nsa-photo-edge, .nsa-ceiling-edge { box-shadow: none; isolation: isolate; }
.nsa-beam-visuals .nsa-photo-edge::after, .nsa-ceiling-edge::after { content: none; }
.nsa-beam-visuals .nsa-photo-edge::before, .nsa-ceiling-edge::before {
 content: ""; position: absolute; inset: -6px; padding: 6px; pointer-events: none;
 background:
 linear-gradient(to bottom, var(--photo-frame-clear), var(--photo-frame-color)) top / 100% 6px no-repeat,
 linear-gradient(to top, var(--photo-frame-clear), var(--photo-frame-color)) bottom / 100% 6px no-repeat,
 linear-gradient(to right, var(--photo-frame-clear), var(--photo-frame-color)) left / 6px 100% no-repeat,
 linear-gradient(to left, var(--photo-frame-clear), var(--photo-frame-color)) right / 6px 100% no-repeat,
 var(--site-charcoal);
 background-attachment: scroll, scroll, scroll, scroll, fixed;
 background-size: 100% 6px, 100% 6px, 6px 100%, 6px 100%, 100vw 100vh;
 -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
}

/* DSP illustration: 90% of its previous 75% container width. */
.nsa-overview #processing > .nsa-tech-image { width: 67.5%; }

/* Installation close-up: 70% of its previous full width, centred and proportional. */
.nsa-overview #space > .nsa-room-image { width: 70%; margin-inline: auto; }
.nsa-overview #space .nsa-room-image img { height: auto; aspect-ratio: auto; object-fit: contain; }