/* Selected Campo direction: industrial scene first, original pilot story below. */
:root { --sky-0: #101517; --sky-1: #172024; --sky-2: #253236; --haze: #4b5a61; --ground: #090e11; }
.field-hero { min-height: 780px; min-height: max(780px, 90svh); background: var(--sky-0); padding-block: 8rem 5rem; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); }
.field-hero h1 { max-width: 12ch; }
.field-hero .lede { max-width: 36ch; }
.field-hero .hero-access { max-width: 30rem; }
.field-hero .hero-access__secondary { flex-basis: 100%; }
.field-hero__image { position: relative; margin: 0; min-width: 0; }
.field-hero__image img { display: block; width: 100%; height: auto; aspect-ratio: 6 / 5; object-fit: cover; object-position: 75% center; }
.field-hero__image figcaption { font-size: .8rem; color: var(--text-2); margin-top: .75rem; }
.how__layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(2rem,5vw,5rem); align-items: center; }
.how__scene { position: relative; min-width: 0; overflow: hidden; background: var(--sky-1); }
.how__photo { display: block; }
.how__photo img { display: block; width: 100%; height: auto; object-fit: contain; object-position: center; }
.how__scene .lens { position: relative; inset: auto; width: auto; max-width: none; margin: 0; padding: 1.25rem; }
.how__scene .panel { aspect-ratio: auto; padding: 1.5rem; background: rgb(4 11 17 / .85); }
.how__scene .panel__title { font-size: 1.5rem; }
.how__scene .num { font-size: 1.7rem; }
.how__scene .lens figcaption { font-size: .75rem; line-height: 1.5; max-width: 42ch; }
.how__layout .chain { display: flex; flex-direction: column; margin: 0; gap: 2rem; }
.how__layout .chain li { max-width: 42ch; }
.how__layout .chain h3::before { content: none; }
.how__layout .chain svg { width: 36px; height: 36px; }
@media (max-width: 900px) {
 .field-hero { grid-template-columns: 1fr; min-height: 0; padding-block: 7rem 3.5rem; gap: 2.5rem; }
 .field-hero .view__copy { max-width: 38rem; }
 .field-hero__image img { aspect-ratio: 3 / 2; object-position: center; }
 .how__layout { grid-template-columns: 1fr; }
 .how__photo img { height: auto; }
 .how__layout .chain { gap: 1.75rem; }
}
@media (max-width: 480px) {
 .how__scene .lens { padding: .9rem; }
 .how__scene .panel { padding: 1rem; }
 .how__scene .panel__title { font-size: 1.25rem; }
 .how__scene .num { font-size: 1.45rem; }
}

.how__layout .chain li::after { content: none; }

/* Blend the photographic edges into the same surface as the copy. */
.field-hero__image picture, .how__photo { display: block; position: relative; isolation: isolate; }
.field-hero__image picture::after, .how__photo::after {
 content: ""; position: absolute; inset: -1px; pointer-events: none;
 background: linear-gradient(90deg, var(--sky-0), transparent 12%, transparent 94%, var(--sky-0)),
             linear-gradient(180deg, var(--sky-0), transparent 12%, transparent 65%, var(--sky-0));
}
.field-hero__image picture::after { background: linear-gradient(90deg, var(--sky-0), transparent 16%, transparent 93%, var(--sky-0)), linear-gradient(180deg, var(--sky-0), transparent 10%, transparent 72%, var(--sky-0)); }
.field-hero__image figcaption { margin-top: .25rem; padding-inline: 1rem; }
.how__scene { overflow: visible; background: transparent; }
.how__scene .lens { margin-top: -2rem; z-index: 1; }
.how__scene .panel { background: linear-gradient(145deg, #19252b, #0b1318 78%); box-shadow: 0 18px 38px rgb(0 0 0 / .28); }
.individual-access { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.individual-access h2, .individual-access > p { margin: 0; }
.individual-access .button { display: inline-flex; align-items: center; justify-content: center; margin: .25rem 0; min-height: 48px; line-height: 1.4; }
@media (max-width: 480px) {
 .field-hero__image picture::after { background: linear-gradient(90deg, var(--sky-0), transparent 8%, transparent 96%, var(--sky-0)), linear-gradient(180deg, var(--sky-0), transparent 10%, transparent 72%, var(--sky-0)); }
 .individual-access .button { width: 100%; }
}

/* Wearer view: messages occupy a compact display area, not the outer glass. */
#alerts { background: linear-gradient(180deg, #1d272c, var(--sky-0) 30rem); }
#alerts::after { opacity: .35; }
.optical-preview { isolation: isolate; background: var(--sky-0); aspect-ratio: 3 / 2; }
.optical-preview__scene { display: block; width: 100%; height: 100%; object-fit: cover; }
.optical-preview::after { content: ""; position: absolute; inset: -1px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .65)), linear-gradient(90deg, var(--sky-0), transparent 5%, transparent 96%, var(--sky-0)); }
.optical-preview .panel--optical { z-index: 2; inset: auto 6% 9% auto; width: 42%; padding: 0; background: transparent; text-shadow: 0 1px 3px #000; color: #fff; font-family: system-ui, sans-serif; }
.panel--optical .panel__title { font: 600 clamp(1.1rem,1.5vw,1.5rem)/1.2 system-ui,sans-serif; color: #fff; margin-bottom: .7rem; }
.panel--optical .panel__line { font: 400 .9rem/1.45 system-ui,sans-serif; color: #fff; margin-top: .35rem; }
.panel--optical .panel__detail { margin-bottom: .6rem; }
.panel--optical .num { font: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.optical-ask { display: block; width: fit-content; padding: .3rem .8rem; border: 1px solid rgb(255 255 255 / .65); border-radius: 24px; margin-top: 1rem; font: 500 .8rem/1.4 system-ui,sans-serif; }
.optical-caption { margin-top: .8rem; color: var(--text-2); font-size: .8rem; max-width: 65ch; }
.optical-product { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 1.5rem; margin-top: 1.5rem; }
.optical-product img { display: block; width: 100%; height: auto; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.optical-product p { color: var(--text-2); font-size: .875rem; max-width: 38ch; }
@media (max-width: 600px) {
 .optical-preview { aspect-ratio: 3 / 4; }
 .optical-preview__scene { object-position: 25% center; }
 .optical-preview .panel--optical { inset: auto 8% 8% auto; width: 72%; }
 .panel--optical .panel__title { font-size: 1.1rem; }
 .panel--optical .panel__line { font-size: .875rem; }
 .optical-product { grid-template-columns: 1fr; gap: .5rem; }
 .optical-product img { max-width: 22rem; }
}
@media (max-width: 360px) {
 .bar { gap: .4rem; }
 .bar .mark { font-size: 1rem; gap: .3rem; }
 .bar .mark img { height: 1.4rem; }
 .bar nav { gap: .25rem; }
 .bar nav .bar__cta { font-size: .8rem; padding: .45rem; }
 .bar .lang summary { font-size: .8rem; padding-inline: .25rem; }
}

/* Compact alert showcase, with the photographic surface dissolving at its edges. */
#alerts { padding-block: clamp(3rem,5vw,4.5rem); background: var(--sky-0); }
#alerts .section-head { margin-bottom: 2rem; gap: 1.25rem 3rem; }
#alerts .section-head h2 { font-size: clamp(2rem,3.5vw,3.25rem); }
#alerts .section-head > p { font-size: 1rem; }
#alerts .switcher { gap: 1.5rem 3rem; }
#alerts .note { margin-top: .75rem; font-size: .825rem; }
#alerts .trigger { margin-top: .75rem; font-size: .9rem; }
.optical-preview { aspect-ratio: 16 / 9; overflow: visible; }
.optical-preview__scene { mask-image: linear-gradient(180deg, transparent, #000 12%, #000 80%, transparent); }
.optical-preview::after { background: linear-gradient(180deg, var(--sky-0), transparent 14%, rgb(16 21 23 / .25) 45%, var(--sky-0)), linear-gradient(90deg, var(--sky-0), transparent 10%, transparent 90%, var(--sky-0)); }
.optical-product { gap: 1rem; margin-top: .75rem; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.optical-product img { max-height: 150px; object-fit: contain; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 85%, transparent), linear-gradient(180deg, transparent, #000 15%, #000 75%, transparent); mask-composite: intersect; }
.optical-product p { font-size: .8rem; line-height: 1.5; }
.optical-caption { margin-top: .3rem; }
.alert-details { margin-top: .5rem; color: var(--text-2); font-size: .85rem; }
.alert-details summary { cursor: pointer; min-height: 44px; align-content: center; }
.alert-details .note { margin-block: .25rem .5rem; }
@media (max-width: 600px) {
 #alerts .section-head { gap: .8rem; margin-bottom: 1.25rem; }
 #alerts .switcher__tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
 #alerts .switcher__tabs [role=tab] { min-height: 48px; font-size: .825rem; padding: .5rem; gap: .5rem; }
 .optical-preview { aspect-ratio: 1; }
 .optical-preview .panel--optical { width: 74%; inset: auto 7% 8% auto; }
 .panel--optical .panel__title { font-size: 1rem; margin-bottom: .5rem; }
 .panel--optical .panel__line { font-size: .8rem; line-height: 1.35; margin-top: .25rem; }
 .panel--optical .panel__detail { margin-bottom: .4rem; }
 .optical-ask { margin-top: .6rem; padding: .2rem .7rem; }
 .optical-product { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
}

.optical-preview__scene { position: absolute; inset: 0; }
/* Galaxy Ultra-inspired handset: full capture, native system chrome covered only. */
.phone { padding: 6px; border: 0; border-radius: 32px; background: linear-gradient(90deg, #555e66, #c8cdd1 1.2%, #363c43 2.8%, #20252b 97%, #a4adb5 99%, #4d555e); box-shadow: 0 28px 55px -18px rgb(0 0 0 / .65), inset 0 1px 1px rgb(255 255 255 / .6); }
.phone::before { z-index: 4; top: 18px; left: calc(50% - 4px); width: 8px; height: 8px; background: #020508; box-shadow: inset 0 0 0 1px #303840; }
.phone::after { right: -3px; top: 23%; width: 3px; height: 38px; background: linear-gradient(180deg, #a4adb5, #505b66); box-shadow: 0 -50px 0 #626c75; }
.phone__display { aspect-ratio: 1440 / 3120; border-radius: 26px; background: #081521; }
.phone__display img { position: static; width: 100%; height: 100%; object-fit: contain; }
.phone__display::before { content: ""; position: absolute; z-index: 2; inset: 0 0 auto; height: 4.487179%; background: #081521; pointer-events: none; }
.phone__display::after { inset: auto 0 0; height: 5.769231%; border: 0; border-radius: 0; background: #081521; z-index: 2; }

#alerts::after { opacity: 0; }
.optical-product img { width: min(100%,225px); height: auto; max-height: none; justify-self: center; }