/* ===========================================================================
   nonpilot — shared across the landing page and the four app pages.
   Tactical telemetry: dark substrate, monospace metadata, hazard red, 90 degree
   corners, hairlines produced by a 1px grid gap rather than borders.
   ========================================================================= */
:root {
  --bg:#0B0B0D; --panel:#101014; --ink:#EAEAEA; --ink-dim:#8A8D93;
  --hair:#26272C; --red:#FF2A2A;
  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gut: clamp(1rem, 3.5vw, 3rem);
  --sc-canvas:var(--bg); --sc-ink:var(--ink); --sc-ink-soft:var(--ink-dim);
  --sc-accent:var(--red); --sc-accent-ink:var(--bg);
  --sc-font-display:var(--display); --sc-font-text:var(--display); --sc-font-mono:var(--mono);
  --sc-r-sm:0; --sc-r-md:0; --sc-r-lg:0; --sc-r-pill:0;
}
html, body { background: var(--bg); }
body { color: var(--ink); font-family: var(--display); }

.sc-grain { opacity: 0.05; }
.scan { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.34;
        background: repeating-linear-gradient(0deg, transparent 0 2px, rgb(0 0 0 / 0.16) 2px 4px); }
@media (prefers-reduced-motion: reduce) { .scan { opacity: 0.22; } }

.shell { max-width: 82rem; margin-inline: auto; border-inline: 1px solid var(--hair); }

/* ------------------------------------------------------------ index strip */
.strip { display: flex; align-items: stretch; justify-content: space-between;
         border-bottom: 1px solid var(--hair); font-family: var(--mono); font-size: 0.6875rem;
         font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-dim); }
.strip > * { padding: 0.75rem var(--gut); }
.strip .who { color: var(--ink); display: flex; align-items: center; gap: 0.55rem;
              border-right: 1px solid var(--hair); text-decoration: none; }
.strip .who b { width: 9px; height: 9px; background: var(--red); display: block; }
.strip .rt { border-left: 1px solid var(--hair); }
a.strip__back { color: var(--ink-dim); text-decoration: none; }
a.strip__back:hover { color: var(--red); }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; overflow: clip;
        padding: clamp(2.6rem,8vh,5.5rem) var(--gut) clamp(2.2rem,6vh,4rem);
        min-height: clamp(20rem,52vh,30rem); display: flex; align-items: center; }
.hero__say { position: relative; z-index: 2; }
.hero h1 { margin: 0; font-weight: 900; text-transform: uppercase;
           font-size: clamp(2.2rem,7vw,5.4rem); line-height: 0.9; letter-spacing: -0.045em; text-wrap: balance; }
.hero h1 span { color: var(--red); }
.hero p { margin: clamp(1.2rem,3vh,2rem) 0 0; max-width: 46ch; line-height: 1.55;
          font-size: clamp(0.98rem,1.5vw,1.1rem); color: var(--ink-dim); text-wrap: pretty; }

/* The film's ground is the same near-black as the page, so screen blending
   drops it out entirely and leaves only the hairlines and the red square. Alpha
   without shipping a second HEVC-with-alpha and WebM encode of the same thing. */
.mark-film {
  position: absolute; z-index: 1; pointer-events: none;
  top: 50%; right: calc(var(--gut) * -1.2); translate: 0 -50%;
  height: 150%; width: auto; aspect-ratio: 1; max-width: none;
  mix-blend-mode: screen; opacity: 0.85;
  /* Dissolve toward the headline instead of ending on a hard edge, so the film
     is a ground the type sits on rather than a panel butted against it. */
  -webkit-mask-image: linear-gradient(to left, #000 0 46%, transparent 92%);
  mask-image: linear-gradient(to left, #000 0 46%, transparent 92%);
}
@media (max-width: 64rem) {
  .mark-film { right: 50%; translate: 50% -50%; height: auto; width: 150%; opacity: 0.38;
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 92%);
    mask-image: radial-gradient(closest-side, #000 30%, transparent 92%); }
}
.mark-note { position: absolute; z-index: 2; right: var(--gut); bottom: 0.9rem; margin: 0;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 64rem) { .mark-note { left: var(--gut); right: auto; } }

/* ------------------------------------------------------------------- band */
.band { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
        background: var(--hair); border-block: 1px solid var(--hair); }
.band > div { background: var(--bg); padding: clamp(1rem,2.6vw,1.7rem) var(--gut); }
.band data { display: block; font-weight: 900; font-size: clamp(2rem,5.4vw,3.6rem);
             line-height: 0.9; letter-spacing: -0.045em; }
.band .z { color: var(--red); }
.band span { display: block; margin-top: 0.55rem; font-family: var(--mono); font-size: 0.66rem;
             letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.5; }

/* -------------------------------------------------------- mechanics films */
.mech { border-top: 1px solid var(--hair); }
.mech__head { margin: 0; padding: 1rem var(--gut); display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); }
.mech__head b { color: var(--ink); font-weight: 500; }
.films { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px;
         background: var(--hair); border-top: 1px solid var(--hair); }
@media (min-width: 60rem) { .films { grid-template-columns: repeat(4,1fr); } }
.film { position: relative; z-index: 6; margin: 0; background: var(--bg); }
.film video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #000; }
.film figcaption { padding: 0.6rem var(--gut) 0.9rem; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); line-height: 1.5; }
.film figcaption b { color: var(--red); font-weight: 500; }

/* ------------------------------------------------------- units (icon grid) */
.units { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--hair); }
@media (min-width: 60rem) { .units { grid-template-columns: 1fr 1fr; } }
.unit { position: relative; background: var(--bg); display: grid; gap: clamp(1rem,2.4vw,1.6rem);
        grid-template-columns: minmax(0,9rem) 1fr; align-items: start;
        padding: var(--gut); text-decoration: none; color: inherit;
        transition: background-color 180ms cubic-bezier(0.23,1,0.32,1); }
@media (max-width: 34rem) { .unit { grid-template-columns: minmax(0,6.5rem) 1fr; } }
@media (hover: hover) and (pointer: fine) { .unit:hover { background: #101014; } }
.unit:hover .unit__go { color: var(--red); }
.unit:hover .icon img { opacity: 0.86; }

.icon { position: relative; z-index: 6; width: 100%; aspect-ratio: 1; display: block; }
.icon img { width: 100%; height: 100%; object-fit: cover; display: block;
            clip-path: inset(0 round 22.37%); transition: opacity 180ms; }

.unit__id { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--red); margin: 0; }
.unit h2 { margin: 0.5rem 0 0; font-weight: 800; text-transform: uppercase;
           font-size: clamp(1.35rem,2.6vw,1.9rem); line-height: 0.95; letter-spacing: -0.04em; }
.unit .say { margin: 0.7rem 0 0; font-size: 0.95rem; line-height: 1.45; letter-spacing: -0.01em;
             color: var(--ink-dim); text-wrap: pretty; max-width: 40ch; }
.unit__meta { margin: 0.9rem 0 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.unit__go { margin: 0.9rem 0 0; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--ink); transition: color 180ms; }

/* ---------------------------------------------------------------- company */
.about { border-top: 1px solid var(--hair); padding: clamp(2.4rem,7vh,4.5rem) var(--gut); }
.about__k { margin: 0 0 clamp(1.2rem,3vh,2rem); font-family: var(--mono); font-size: 0.66rem;
            letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); }
.about p { margin: 0 0 1.1rem; max-width: 54ch; font-size: clamp(1.02rem,1.7vw,1.28rem);
           line-height: 1.5; letter-spacing: -0.015em; text-wrap: pretty; }
.about p:last-child { margin-bottom: 0; }
.about .lede { font-weight: 900; font-size: clamp(1.7rem,4.6vw,3.4rem); line-height: 1.0;
               letter-spacing: -0.045em; max-width: 16ch; text-transform: uppercase;
               margin-bottom: clamp(1.4rem,3vh,2.2rem); }
.about em { font-style: normal; color: var(--red); }
.about .dim { color: var(--ink-dim); }

/* ----------------------------------------------------------- app page bits */
.app-head { padding: clamp(2rem,5vh,3.4rem) var(--gut) clamp(1.5rem,3vh,2.2rem);
            display: grid; gap: clamp(1.2rem,3vw,2.2rem); align-items: end; }
@media (min-width: 52rem) { .app-head { grid-template-columns: minmax(0,10rem) 1fr; } }
.app-head .icon { max-width: 10rem; }
.app-head h1 { margin: 0.6rem 0 0; font-weight: 900; text-transform: uppercase;
               font-size: clamp(2.2rem,7vw,4.6rem); line-height: 0.88; letter-spacing: -0.045em; }
.app-head .tag { margin: 0.8rem 0 0; max-width: 40ch; font-size: clamp(1.05rem,2vw,1.4rem);
                 line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); }

.app-body { display: grid; gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); }
@media (min-width: 60rem) { .app-body { grid-template-columns: minmax(0,20rem) 1fr; } }
.app-shot { background: var(--bg); padding: var(--gut); }
.app-shot .frame { position: relative; z-index: 6; width: 100%; aspect-ratio: 430/932;
                   background: #000; border: 1px solid var(--hair); }
.app-shot .frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-shot figcaption { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.app-copy { background: var(--bg); padding: var(--gut); }
.app-copy h2 { margin: 0 0 0.7rem; font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
               letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); }
.app-copy p { margin: 0 0 1rem; max-width: 60ch; font-size: 1rem; line-height: 1.6;
              color: var(--ink); text-wrap: pretty; }
.app-copy p.dim { color: var(--ink-dim); }
.app-copy .rule { height: 1px; background: var(--hair); border: 0; margin: clamp(1.4rem,3vh,2.2rem) 0; }

.spec { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.spec dt, .spec dd { border-top: 1px solid var(--hair); padding: 0.38rem 0;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; line-height: 1.6; }
.spec dt { color: var(--ink-dim); text-transform: uppercase; padding-right: 1.2rem; white-space: nowrap; }
.spec dd { margin: 0; color: var(--ink); }
.spec dd.live { color: var(--red); }
.spec dd a { color: var(--red); }

/* get-it row */
.get { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin-top: clamp(1.4rem,3vh,2.2rem); }
.btn { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.4rem;
       background: var(--red); color: #fff; font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
       letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--red);
       transition: background-color 160ms, color 160ms; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: transparent; color: var(--red); } }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hair); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: transparent; color: var(--red); border-color: var(--red); } }
.get .note { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
             text-transform: uppercase; color: var(--ink-dim); }

/* ----------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--hair); padding: 1rem var(--gut) clamp(2.5rem,6vh,4rem);
        display: flex; flex-wrap: wrap; gap: 0.55rem 2.5rem; font-family: var(--mono);
        font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); }
.foot a { color: var(--ink-dim); }
.foot a:hover { color: var(--red); }

/* Entrance. Visible by default; JS opts elements into being hidden, so any
   failure of the observer leaves real content on screen. */
.unit.pre, .app-shot.pre { opacity: 0; transform: translate3d(0,10px,0); }
.unit, .app-shot { transition: opacity 520ms cubic-bezier(0.23,1,0.32,1), transform 520ms cubic-bezier(0.23,1,0.32,1); }
@media (prefers-reduced-motion: reduce) {
  .unit.pre, .app-shot.pre { opacity: 1; transform: none; }
  .unit, .app-shot { transition: none; }
}