/* Homepage layout: one spacing system, shared by all viewport sizes.
   The hero absorbs spare height; the logos and footer keep their own spacing. */
#dc-root {
  --page-width: 1180px;
  --page-gutter: clamp(18px, 3vw, 36px);
  --section-space: 32px;
  --content-gap: 24px;
  --footer-top: 56px;
  --footer-bottom: 22px;
}
#dc-root *, #dc-root *::before, #dc-root *::after { box-sizing: border-box; }
#dc-root > .sc-host {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
}
.aran-hero-inner, .aran-section-inner {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.mk-hero { position: relative; z-index: 20; min-height: auto; display: grid; align-items: center; overflow: visible; }
.aran-hero-inner { position: relative; padding-block: var(--section-space); }
.aran-term__body { position: relative; z-index: 2; padding: var(--section-space) clamp(20px, 3vw, 36px); }
.native-body { gap: var(--content-gap); }
.aran-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--content-gap); }
.aran-field { min-width: 0; display: flex; flex-direction: column; }
.aran-field__label, .aran-stat__label { font: 11px/1.4 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--fg-3); }
.aran-field__label { margin-bottom: 10px; }
.aran-dd { position: relative; flex: 1; }
/* Overlaid, invisible options reserve the tallest label at every screen width. */
.aran-dd-box { height: 100%; }
.aran-dd-value { display: grid; flex: 1; min-width: 0; align-items: center; overflow-wrap: anywhere; }
.aran-dd-value > span { grid-area: 1 / 1; }
.aran-dd-sizer { visibility: hidden; pointer-events: none; }
.aran-dd-box > span:last-child { flex-shrink: 0; }
.aran-term__menu { max-height: min(340px, 40svh); }
.aran-deliver-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--content-gap); border-top: 1px dashed var(--phosphor-600); padding-top: var(--content-gap); }
.aran-stat { display: flex; flex: 1 0 130px; flex-direction: column; gap: 10px; }
.aran-exec { flex: none; align-self: center; }

/* The caption always sits above the same four-column logo row. */
.aran-lineage, .aran-footer-links { position: relative; z-index: 1; border-top: 1px solid var(--rule-1); }
.aran-lineage { padding-block: var(--section-space); background: var(--bg-void); }
.aran-lineage .mk-eyebrow { justify-content: center; margin-bottom: var(--content-gap); font-size: 10px; letter-spacing: .14em; }
.aran-logo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: var(--content-gap); }
.aran-logo-grid img { display: block; width: 100%; height: clamp(104px, 8.5vw, 136px); object-fit: contain; filter: drop-shadow(0 0 9px #33ff668c) drop-shadow(0 0 2px #d8ffe2d9); }
.aran-footer-links { padding-top: var(--footer-top); padding-bottom: var(--footer-bottom); }
.aran-footer-links .aran-section-inner { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; }

.analog-filter-defs { position: absolute; pointer-events: none; overflow: hidden; }

/* After shutdown, let the brand and remaining actions carry the phosphor glow.
   Scale is visual only, so the reserved layout never shifts. */
/* Keep SVG noise and glow static: animate the composited logo, not its filter. */
body:has(#configurator) :is(.aran-header, .aran-footer-links) .mk-btn {
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease;
}
.configurator-closed :where(.aran-wm, .aran-logo-grid img, .aran-header .mk-btn, .aran-footer-links .mk-btn) {
  --rest-scale: 1.035;
  --crest-scale: 1.043;
  animation: logo-arrive 1100ms both;
}
.configurator-closed :is(.aran-wm, .aran-logo-grid img) {
  animation: logo-arrive 1100ms both, logo-shimmer 6800ms 1100ms ease-in-out infinite;
}
@keyframes logo-arrive {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(.16, .8, .24, 1); }
  68% { transform: scale(var(--crest-scale)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  100% { transform: scale(var(--rest-scale)); }
}
@keyframes logo-shimmer {
  0%, 100% { opacity: 1; }
  48% { opacity: .965; }
  73% { opacity: .99; }
}
.configurator-closed .aran-wm {
  transform-origin: left center;
  filter: url("#logo-analog") drop-shadow(0 0 10px #33ff6699) drop-shadow(0 0 24px #33ff664d);
}
.configurator-closed .aran-logo-grid img {
  --rest-scale: 1.06;
  --crest-scale: 1.073;
  filter: url("#logo-analog") drop-shadow(0 0 12px #33ff66bf) drop-shadow(0 0 28px #33ff6659) drop-shadow(0 0 3px #d8ffe2e6);
}
.configurator-closed :is(.aran-header, .aran-footer-links) .mk-btn {
  border-color: var(--phosphor-300);
  box-shadow: 0 0 0 1px #33ff6626, 0 0 24px #33ff6680, 0 0 48px #33ff6633;
}
.configurator-closed .aran-footer-links .mk-btn:not(.mk-btn--primary) {
  color: var(--phosphor-100);
  text-shadow: var(--glow-sm);
}
.configurator-closed :is(.aran-header, .aran-footer-links) .mk-btn:is(:hover, :focus-visible) {
  box-shadow: 0 0 0 1px #33ff6640, 0 0 28px #33ff66a6, 0 0 56px #33ff664d;
}
@media (prefers-reduced-motion: reduce) {
  body:has(#configurator) :is(.aran-wm, .aran-logo-grid img, .aran-header .mk-btn, .aran-footer-links .mk-btn) {
    transition: none;
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* Window states share the normal layout; the script reserves its footprint. */
.aran-term--min .aran-term__body, .aran-term--closed { display: none; }
.aran-fs-backdrop { display: none; }
.aran-fs-backdrop--full { display: block; position: fixed; inset: 0; z-index: 1; background: var(--grid-coarse), var(--bg-void); }
.mk-hero.aran-hero--full { z-index: 9999; }
.aran-term--full {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1108px, calc(100vw - 2 * var(--page-gutter)));
  max-height: calc(100svh - 2 * var(--page-gutter));
  z-index: 10000; display: flex; flex-direction: column;
}
.aran-term--full .aran-term__body { flex: 1; overflow: auto; }
.aran-hero--full ~ .aran-lineage { visibility: hidden; }

/* Only small-screen controls change; section spacing remains identical. */
@media (max-width: 640px) {
  .native-controls { gap: 2px; }
  .native-titlebar { padding: 10px 12px; }
  .native-titlebar h1 { font-size: 9px; letter-spacing: .12em; }
  .aran-hints { display: none; }
}