/* The products page wearing the site: the V4 header, the hero's light and
   the arrival. The header's rules are datum.css's own, scoped to .nav so
   they cannot touch the story's styles (the page does not load datum.css:
   its script would start a second smooth scroll). Keep in step with
   site/assets/datum.css. */

.nav {
  --ink-nav: #d6d0c9; --rule: rgba(255,255,255,.11); --rule-2: rgba(255,255,255,.13);
  --brand: "Michroma", "Arial Black", sans-serif; --ease-leave: cubic-bezier(.42, 0, .32, 1); --max: 1240px;
  --nav-shade: 0;
  position: fixed; inset: 0 0 auto; z-index: 40; padding-block: 24px; pointer-events: none; isolation: isolate;
  font-family: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  transform: translate3d(0, 0, 0); transition: transform .56s var(--ease);
}
.nav a { color: inherit; text-decoration: none; pointer-events: auto; }
.nav[data-away="1"] { transform: translate3d(0, -130%, 0); transition: transform .6s var(--ease-leave); }
.nav::before {
  content: ""; position: absolute; z-index: 0; inset: -1px 0 auto; height: clamp(96px, 10vw, 132px); pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.62) 52%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 100%);
  opacity: var(--nav-shade); transition: opacity .12s linear;
}
.nav .wrap { position: relative; z-index: 1; width: min(var(--max), calc(100% - 2 * var(--gutter))); margin-inline: auto; min-width: 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand { display: flex; align-items: center; gap: 14px; width: fit-content; color: var(--ink); }
.brand span { font-family: "Michroma", "Arial Black", sans-serif; font-size: 13px; letter-spacing: .42em; padding-left: .1em; }
.brand .markmark { width: 40px; height: auto; display: block; }
.brand .markmark polygon { fill: var(--ink); opacity: .16; animation: mark-on .5s var(--ease) forwards; }
.brand .markmark .s1 { fill: var(--orange, var(--orange, #f46b01)); animation-delay: .47s; }
.brand .markmark .s2 { animation-delay: .35s; }
.brand .markmark .s3 { animation-delay: .25s; }
.brand .markmark .s4 { animation-delay: .15s; }
@keyframes mark-on { to { opacity: 1; } }
.nav .brand { justify-self: start; }
.nav .pill { justify-self: end; display: inline-flex; align-items: center; justify-content: center; min-width: max-content; padding: 11px 20px; border: 0; border-radius: 999px;
  background: var(--ink); color: #050505; font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .35s var(--ease); }
.nav .pill:hover { background: #fff; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.nav-links a { font-size: 13.5px; color: var(--ink-nav); transition: color .35s var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
@media (max-width: 900px) { .nav .wrap { display: flex; justify-content: space-between; } .nav-links { display: none; } }
@media (max-width: 600px) { .nav { padding-block: 18px; } .nav .brand span { display: none; } }

/* ---------- the hero's light: datum.js's painter, over the aircraft ----------
   Screened onto the stage, so it lights the black around the plane the way it
   lights the other pages' heroes, and leaves as the story starts. */
.glow-wrap { position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; }
.hero-glow { --gw: min(118vw, 2100px); position: absolute; left: calc(50% - var(--gw) / 2); top: 0; width: var(--gw); height: 68vh;
  background: radial-gradient(ellipse 46% 62% at 50% 0%, rgba(255,112,8,.30), transparent 74%); opacity: 0; animation: glow-in 2.8s var(--ease) .15s forwards; }
.hero-glow.painted { background: none; }
.hero-glow canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@keyframes glow-in { to { opacity: 1; } }
html.is-loading .hero-glow { animation-play-state: paused; }
@media (max-width: 860px) { .hero-glow { --gw: 175vw; } }

/* ---------- the arrival ----------
   The header's mark, larger, in the middle of the dark: dim, with a band of
   light crossing it while the page loads; lit whole when the story is ready,
   then flown to its place in the header as the dark lifts. Only transforms
   and opacity move, so it runs smoothly while the 3D is being prepared. */
.intro { position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.intro-bg { position: absolute; inset: 0; background: var(--ground, #050403); transition: opacity .8s var(--ease-leave, cubic-bezier(.42, 0, .32, 1)); }
.intro-mark { position: fixed; transform-origin: 0 0; will-change: transform; }
.intro-mark .brand { margin: 0; }
.intro-mark { transition: opacity .35s ease; }
.intro-mark.wait { opacity: 0; }
/* phones: the header shows the mark alone (its wordmark hides under 600px and the mark is 64px wide), so the
   loading mark does too. It is measured against the header's and flies to it; with the wordmark it came out
   wider than measured and ran off the right edge (2026-10-18) */
@media (max-width: 600px) {
  .intro-mark .brand .wordmark[data-logo] { display: none; }
  .intro-mark .brand .markmark[data-logo] { width: 64px; height: 33.37px; }
}
.im-base { opacity: .2; transition: opacity .5s var(--ease); }
/* the band: a soft-edged window that crosses the mark while the bright copy
   inside it moves the other way by the same amount, so the light stays on
   the letters and only the window travels. Same timing for both. */
.im-band { position: absolute; left: 0; top: 0; bottom: 0; width: 42%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent); mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
  animation: im-band 1.9s cubic-bezier(.45, 0, .4, 1) infinite; transition: opacity .35s ease; }
.im-lit { position: absolute; left: 0; top: 0; width: calc(100% / .42); animation: im-lit 1.9s cubic-bezier(.45, 0, .4, 1) infinite; }
@keyframes im-band { 0% { transform: translateX(-100%); } 72%, 100% { transform: translateX(238.1%); } }
@keyframes im-lit { 0% { transform: translateX(42%); } 72%, 100% { transform: translateX(-100%); } }
.intro.ready .im-base { opacity: 1; }
.intro.ready .im-band { opacity: 0; }
.intro.leaving .intro-bg { opacity: 0; }
.intro.gone { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .copy .lead, html.is-loading .copy .acts, html.is-loading .copy .quick { animation-play-state: paused; }
html.is-loading .nav .brand { visibility: hidden; }

/* ---------- the logo: the finished artwork (2026-10-17) ----------
   The product team's logo, traced to vectors: the mark, then DATUM, spaced and sized as their horizontal
   lockup (38px tall in the nav, 36px in the footer; their minimum is 30, but at 30 the strokes' fine tails
   drop below a pixel and read as cut off). Its orange is the logo's own and never
   follows the accent. */
.brand:has([data-logo]) { gap: 14.67px; }
.brand .markmark[data-logo] { width: 72.88px; height: 38px; flex: none; }
.brand .markmark[data-logo] .s1 { fill: #ff6a1a; }
.brand .wordmark[data-logo] { display: block; width: 115.11px; height: 10.41px; flex: none; fill: var(--ink, #f5f2ef); }
.footer .brand:has([data-logo]) { gap: 13.89px; }
.footer .brand .markmark[data-logo] { width: 69.05px; height: 36px; }
.footer .brand .wordmark[data-logo] { width: 109.05px; height: 9.86px; }
/* phones: the mark alone, at the brand's smallest for it (64px wide), as the nav had it: the whole lockup crowds the buttons */
@media (max-width: 600px) { .nav .brand .wordmark[data-logo] { display: none; } .nav .brand .markmark[data-logo] { width: 64px; height: 33.37px; } }