:root {
  --standalone-ink: var(--mhk-sky-ink);
  --standalone-paper: var(--mhk-ivory);
  --standalone-accent: var(--mhk-gold);
  --standalone-gutter: clamp(1.25rem,5vw,6rem);
  --product-ink: var(--standalone-ink);
  --product-ink-deep: #04131f;
  --product-paper: var(--standalone-paper);
  --product-gold: var(--standalone-accent);
  --product-gold-dark: var(--mhk-gold-on-light);
  --product-fog: #aebbc1;
  --product-rule: rgba(201,154,74,.28);
  --product-gutter: var(--standalone-gutter);
}

html { scroll-behavior: smooth; }
.static-page { color: var(--product-ink); background: var(--product-paper); }
.static-page .page-header { position: sticky; top: 0; z-index: 20; color: #f4f0e7; background: rgba(4,19,31,.92); border-color: rgba(255,255,255,.13); backdrop-filter: blur(18px); }
.static-page .page-brand img { filter: brightness(0) invert(1); }
.static-page .page-nav a[aria-current="page"] { color: var(--product-gold); }
.static-page .page-cta { border-color: var(--product-gold); }
.standalone-section { padding-inline: var(--standalone-gutter); }
.standalone-heading { font-family: var(--mhk-display-serif); text-wrap: balance; }
.standalone-copy { font-family: var(--mhk-support-font); }
.primary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .95rem 1.25rem; color: var(--product-ink-deep); background: var(--product-gold); text-decoration: none; font: 750 .68rem/1 var(--mhk-support-font); letter-spacing: .12em; text-transform: uppercase; transition: background .2s ease, transform .2s ease; }
.primary-action:hover { background: #ddb46e; transform: translateY(-2px); }
.primary-action:focus-visible, .quiet-action:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

.product-opening { min-height: calc(100svh - 5.2rem); display: grid; grid-template-columns: minmax(32rem,.86fr) minmax(0,1.14fr); color: #f4f0e7; background: var(--product-ink-deep); overflow: hidden; }
.opening-copy { position: relative; z-index: 2; align-self: center; padding: clamp(5rem,8vw,9rem) var(--product-gutter); }
.opening-copy h1 { max-width: 11ch; margin: 0; font: 400 clamp(3.5rem,5.6vw,6rem)/.94 var(--mhk-display-serif); letter-spacing: -.035em; text-wrap: balance; }
.opening-lede { max-width: 42rem; margin: 2rem 0 0; color: #c9d2d5; font: 400 clamp(1rem,1.25vw,1.2rem)/1.62 var(--mhk-support-font); }
.opening-actions { display: flex; align-items: center; gap: 1.6rem; margin-top: 2.2rem; }
.quiet-action { display: inline-flex; align-items: center; gap: .65rem; padding: .6rem 0; color: #f4f0e7; border-bottom: 1px solid var(--product-rule); text-decoration: none; font: 700 .66rem/1 var(--mhk-support-font); letter-spacing: .12em; text-transform: uppercase; }
.down-mark { position: relative; width: .7rem; height: .85rem; border-left: 1px solid currentColor; }
.down-mark::after { content: ''; position: absolute; bottom: 0; left: -.19rem; width: .36rem; height: .36rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }

.product-stage { position: relative; min-height: 44rem; margin: 0; isolation: isolate; background: radial-gradient(circle at 55% 48%,rgba(31,70,92,.55),transparent 38%),linear-gradient(135deg,#08273b,#04131f 72%); }
.product-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(4,19,31,.88),transparent 18%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size: auto,5rem 5rem,5rem 5rem; mask-image: linear-gradient(to bottom,transparent,#000 14%,#000 86%,transparent); }
.product-device-image { position: absolute; z-index: 3; width: min(72%,44rem); height: auto; left: 50%; top: 52%; transform: translate(-50%,-50%); filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.58)); }
.camera-feed { position: absolute; z-index: 1; width: 12rem; aspect-ratio: 16/10; padding: .75rem; border: 1px solid rgba(201,154,74,.34); color: rgba(244,240,231,.62); background: rgba(5,28,44,.55); font: 650 .55rem/1 var(--mhk-support-font); letter-spacing: .12em; }
.camera-feed::after { content: ''; position: absolute; inset: 1.8rem .7rem .7rem; opacity: .65; background: linear-gradient(145deg,transparent 42%,rgba(201,154,74,.17) 42% 44%,transparent 44%),linear-gradient(35deg,transparent 50%,rgba(255,255,255,.08) 50% 52%,transparent 52%); }
.camera-feed span,.camera-feed b { position: relative; z-index: 1; }
.camera-feed b { float: right; font-weight: 650; }
.feed-one { top: 14%; right: 10%; transform: rotate(2deg); }
.feed-two { bottom: 16%; left: 7%; transform: rotate(-2deg); }
.signal-line { position: absolute; z-index: 2; width: 13rem; height: 1px; background: linear-gradient(90deg,transparent,var(--product-gold)); transform-origin: right; opacity: .65; }
.signal-one { top: 31%; right: 23%; transform: rotate(146deg); }
.signal-two { bottom: 31%; left: 21%; transform: rotate(-23deg); }
.product-stage figcaption { position: absolute; z-index: 4; right: var(--product-gutter); bottom: 2rem; left: var(--product-gutter); display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.2); color: rgba(244,240,231,.62); font: 700 .55rem/1 var(--mhk-support-font); letter-spacing: .14em; }
.product-stage figcaption span:nth-child(2) { color: var(--product-gold); }

.mechanism-section { padding: clamp(6rem,10vw,11rem) var(--product-gutter); color: #f4f0e7; background: var(--product-ink); }
.section-intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(24rem,.85fr); gap: clamp(3rem,8vw,9rem); align-items: end; }
.section-intro h2,.attention-copy h2,.placement-copy h2,.owner-close h2 { margin: 0; font: 400 clamp(3rem,5vw,5.6rem)/.98 var(--mhk-display-serif); letter-spacing: -.035em; text-wrap: balance; }
.section-intro p,.attention-copy p,.placement-copy p,.close-copy { max-width: 48rem; margin: 0; color: #c3ced2; font: 400 clamp(1rem,1.18vw,1.15rem)/1.68 var(--mhk-support-font); }
.signal-path { position: relative; display: grid; grid-template-columns: repeat(3,1fr); margin-top: clamp(5rem,8vw,8rem); border-top: 1px solid var(--product-rule); }
.signal-path::before { content: ''; position: absolute; top: -2px; left: 0; width: 66.66%; height: 3px; background: linear-gradient(90deg,var(--product-gold),rgba(201,154,74,.12)); }
.path-step { min-width: 0; padding: 2.5rem clamp(1.5rem,3vw,3.4rem) 1rem 0; }
.path-step + .path-step { padding-left: clamp(1.5rem,3vw,3.4rem); border-left: 1px solid rgba(255,255,255,.12); }
.path-step h3 { margin: 2rem 0 .9rem; font: 400 clamp(1.6rem,2.2vw,2.25rem)/1.08 var(--mhk-display-serif); }
.path-step p { max-width: 35rem; margin: 0; color: #afbec4; font: 400 .98rem/1.63 var(--mhk-support-font); }
.step-visual { position: relative; height: 10rem; color: var(--product-gold); }
.camera-pair i { position: absolute; top: 2rem; width: 5.2rem; height: 4rem; border: 1px solid currentColor; border-radius: .55rem; }
.camera-pair i::before { content: ''; position: absolute; top: 50%; width: 1.5rem; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; transform: translateY(-50%); }
.camera-pair i:first-child { left: 4%; transform: rotate(-7deg); }.camera-pair i:first-child::before { right: .7rem; }
.camera-pair i:nth-child(2) { right: 8%; transform: rotate(7deg); }.camera-pair i:nth-child(2)::before { left: .7rem; }
.camera-pair span { position: absolute; top: 4rem; left: 25%; right: 25%; height: 1px; background: currentColor; opacity: .55; }
.device-core { display: grid; place-items: center; }
.device-core span { position: relative; z-index: 1; display: grid; place-items: center; width: 9rem; height: 6rem; padding: .8rem; border: 1px solid currentColor; border-radius: .8rem; font: 700 .58rem/1.35 var(--mhk-support-font); letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.device-core i { position: absolute; width: 12rem; aspect-ratio: 1; border: 1px solid rgba(201,154,74,.16); border-radius: 50%; box-shadow: 0 0 0 2.2rem rgba(201,154,74,.035); }
.daily-record { display: flex; flex-direction: column; justify-content: center; gap: .65rem; max-width: 15rem; margin-inline: auto; padding: 1.2rem; border: 1px solid rgba(201,154,74,.5); }
.daily-record span { font: 700 .58rem/1 var(--mhk-support-font); letter-spacing: .14em; }
.daily-record i { display: block; height: .55rem; background: linear-gradient(90deg,currentColor var(--w,72%),rgba(255,255,255,.08) var(--w,72%)); }
.daily-record i:nth-of-type(2) { --w: 48%; }.daily-record i:nth-of-type(3) { --w: 84%; }

.attention-section { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem,9vw,10rem); align-items: center; padding: clamp(6rem,10vw,11rem) var(--product-gutter); color: var(--product-ink); background: var(--product-paper); }
.attention-copy { max-width: 48rem; }
.attention-copy p { color: #41515a; }
.attention-copy h2 + p { margin-top: 2rem; }
.attention-copy p + p { margin-top: 1.2rem; }
.record-proof { color: #eff2ef; background: var(--product-ink); box-shadow: 0 2.5rem 5rem rgba(7,29,45,.19); }
.record-proof header { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,.13); font: 700 .58rem/1 var(--mhk-support-font); letter-spacing: .13em; }
.record-proof header strong { color: var(--product-gold); font-size: .72rem; }.record-proof header span:last-child { text-align: right; }
.record-routine,.record-moment { padding: 1.6rem; }
.record-routine { border-bottom: 1px solid rgba(255,255,255,.13); }
.record-routine span,.record-moment span { color: var(--product-gold); font: 700 .58rem/1 var(--mhk-support-font); letter-spacing: .14em; }
.record-routine p { margin: .8rem 0 0; font: 400 clamp(1.45rem,2vw,2.2rem)/1.2 var(--mhk-display-serif); }
.record-moment { position: relative; min-height: 15rem; overflow: hidden; }
.record-moment::after { content: ''; position: absolute; right: -12%; bottom: -55%; width: 65%; aspect-ratio: 1; border: 1px solid rgba(201,154,74,.28); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(201,154,74,.04),0 0 0 6rem rgba(201,154,74,.025); }
.record-moment strong { position: relative; z-index: 1; display: block; max-width: 17ch; margin-top: 1rem; font: 400 clamp(1.65rem,2.8vw,3.1rem)/1.05 var(--mhk-display-serif); }
.record-proof footer { padding: 1rem 1.2rem; color: #aebbc1; border-top: 1px solid rgba(255,255,255,.13); font: 650 .64rem/1.4 var(--mhk-support-font); }

.placement-section { padding: clamp(6rem,10vw,11rem) var(--product-gutter); color: #f4f0e7; background: var(--product-ink-deep); }
.placement-copy { display: grid; grid-template-columns: 1fr minmax(24rem,.78fr); gap: clamp(3rem,8vw,9rem); align-items: end; }
.placement-copy p + p { margin-top: 1.2rem; }
.installation-drawings { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: clamp(4rem,7vw,7rem); background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); }
.installation-drawing { min-width: 0; background: #082438; }
.installation-drawing > header { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: baseline; padding: 1.15rem 1.3rem; border-bottom: 1px solid rgba(255,255,255,.13); }
.installation-drawing header strong { color: var(--product-gold); font: 400 1.25rem/1 var(--mhk-display-serif); }
.installation-drawing header span,.installation-drawing header small { color: #aebbc1; font: 650 .57rem/1 var(--mhk-support-font); letter-spacing: .12em; text-transform: uppercase; }
.installation-drawing svg { display: block; width: 100%; height: auto; padding: 1rem; }
.installation-drawing svg path,.installation-drawing svg rect,.installation-drawing svg circle { vector-effect: non-scaling-stroke; }
.structure { fill: none; stroke: #eae5da; stroke-width: 2; }.stall-lines { fill: none; stroke: rgba(234,229,218,.28); stroke-width: 1; }
.diagram-camera rect,.diagram-camera circle { fill: #082438; stroke: var(--product-gold); stroke-width: 1.5; }.diagram-camera path { fill: none; stroke: var(--product-gold); stroke-width: 1.5; }
.coverage { fill: rgba(201,154,74,.07); stroke: rgba(201,154,74,.52); stroke-width: 1; stroke-dasharray: 5 6; }.coverage-overlap { fill: rgba(201,154,74,.14); stroke: none; }
.diagram-device { fill: rgba(201,154,74,.16); stroke: var(--product-gold); stroke-width: 1.5; }.signal { fill: none; stroke: rgba(201,154,74,.72); stroke-width: 1; stroke-dasharray: 3 6; }
.annotation { fill: none; stroke: var(--product-gold); stroke-width: 1; }.installation-drawing text { fill: #aebbc1; font: 650 12px var(--mhk-support-font); letter-spacing: .7px; }.installation-drawing .area-label { fill: var(--product-gold); font-size: 13px; }
.installation-drawing > p { min-height: 4.6rem; margin: 0; padding: 1rem 1.3rem; color: #aebbc1; border-top: 1px solid rgba(255,255,255,.13); font: 400 .88rem/1.55 var(--mhk-support-font); }
.installation-note { margin: 1rem 0 0; color: #93a3aa; font: 650 .66rem/1.5 var(--mhk-support-font); }

.owner-close { padding: clamp(7rem,12vw,13rem) var(--product-gutter); color: var(--product-ink); background: var(--product-gold); }
.owner-close h2 { max-width: 12ch; }
.owner-close .close-copy { max-width: 43rem; margin: 2rem 0; color: rgba(7,29,45,.78); }
.owner-close .primary-action { color: #f4f0e7; background: var(--product-ink); }
.static-page .page-footer { color: #d5dee0; background: var(--product-ink-deep); border-color: rgba(255,255,255,.13); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.primary-action { transition: none; } }

@media (max-width: 800px) {
  .static-page .page-header { height: 4.4rem; }
  .product-opening { grid-template-columns: 1fr; }
  .opening-copy { min-height: 38rem; padding-top: 5rem; }
  .opening-copy h1 { font-size: clamp(3.15rem,13.6vw,4.25rem); line-height: .96; }
  .opening-lede { font-size: 1rem; line-height: 1.58; }
  .opening-actions { align-items: flex-start; flex-direction: column; gap: .85rem; }
  .product-stage { min-height: 30rem; }
  .product-device-image { width: 94%; top: 51%; }
  .camera-feed { width: 7.2rem; font-size: .43rem; }.feed-one { top: 9%; right: 4%; }.feed-two { bottom: 16%; left: 3%; }
  .signal-line { display: none; }
  .product-stage figcaption { flex-direction: column; gap: .45rem; }
  .section-intro,.attention-section,.placement-copy { grid-template-columns: 1fr; }
  .section-intro h2,.attention-copy h2,.placement-copy h2,.owner-close h2 { font-size: clamp(2.7rem,12vw,4rem); }
  .section-intro { align-items: start; }
  .section-intro p,.attention-copy p,.placement-copy p,.close-copy { font-size: .96rem; line-height: 1.62; }
  .signal-path { grid-template-columns: 1fr; }
  .signal-path::before { width: 100%; }
  .path-step { padding: 2.5rem 0; }
  .path-step + .path-step { padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .step-visual { height: 8rem; }
  .attention-section { gap: 4rem; }
  .installation-drawings { grid-template-columns: 1fr; }
  .installation-drawing > header { grid-template-columns: auto 1fr; }.installation-drawing header small { grid-column: 1/-1; }
  .installation-drawing svg { padding: .35rem; }
  .installation-drawing text { font-size: 20px; letter-spacing: .3px; }
  .installation-drawing .area-label { font-size: 21px; }
  .installation-drawing .annotation { display: none; }
  .installation-drawing svg text:not(.area-label) { paint-order: stroke; stroke: #082438; stroke-width: 3px; }
  .owner-close { padding-top: 6rem; padding-bottom: 6rem; }
}