/* Branded product/architecture names — rendered in Sora, uppercased. */
.inf {
  font-family: 'Sora', system-ui, sans-serif;
  text-transform: uppercase
}

:root {
  --bg: #000000;
  --text: #f3f7fb;
  --dim: rgba(243, 247, 251, 0.72);
  --dimmer: rgba(243, 247, 251, 0.55);
  --accent: #ff8c25;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  /* slim viewport gutter (spacex.com-like margins): with the sections' own
     padding, content sits ~100px from the edge at 1440 */
  --frame-gutter: clamp(0px, 2.5vw, 3rem);
  /* the sticky nav's height: its vertical padding plus the logo mark */
  --nav-h: calc(2 * clamp(1rem, 2.2vw, 1.3rem) + 2rem);   /* nav padding + the mark (taller than the wordmark line box) */
  --headline-bits-font: 'Sora', system-ui, sans-serif;
  --headline-decoded-font: 'Sora', system-ui, sans-serif
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 4.5rem
}

/* The hidden attribute must win over any display rule on the element. */
[hidden] {
  display: none !important
}

body {
  font-family: 'Sora';
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden
}

/* Framed page: content column padded in from both edges. Wide screens only —
   full-bleed below 1024px. */
@media (min-width: 1024px) {
  body {
    padding-inline: var(--frame-gutter)
  }

  /* the nav bar and footer span the viewport, outside the page gutter */
  nav,
  footer {
    margin-inline: calc(-1 * var(--frame-gutter))
  }

  /* The 1px frame rules that used to run down both gutters were removed at user
     request (2026-08-01). The gutter itself (body padding-inline) stays. */
}

.content {
  position: relative;
  z-index: 2
}

/* Every page shares the homepage's margins: content starts the same distance
   from the viewport edge on the product and company pages. */

/* Nav is anchored at the top of the page and scrolls away with the content —
   it does not follow. Etched-style styling: transparent, no border. */
nav {
  /* Follows the scroll (terafab.ai pattern). Sticky, not fixed: it stays in flow,
     so it keeps the frame-gutter alignment and the page needs no top padding. */
  position: sticky;
  top: 0;
  z-index: 100;
  /* spacex-like placement: the logo sits ~40px from the viewport edge at
     desktop widths, ~24px on phones, with the bar's own padding doing it */
  padding: clamp(1rem, 2.2vw, 1.3rem) clamp(1.5rem, 2.8vw, 2.5rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border-bottom: 0;
  transition: color 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease
}

.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center
}

.nav-links a {
  font-family: var(--headline-decoded-font);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.9);
  text-decoration: none;
  transition: color 0.3s
}

.nav-links a:hover {
  color: #f3f7fb
}

/* Homepage panels: one product per viewport, spacex.com's rhythm without the
   video. The figure fills the panel and the copy sits in the lower-left
   corner; .panel-alt mirrors it, figure left and copy lower-right. */
.panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 44%) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(2rem, 5vw, 5rem);
  padding-block: clamp(3rem, 7vh, 5.5rem)
}

/* copy left, figure right; .panel-alt mirrors it */
.panel-copy {
  order: -1;
  position: relative;
  z-index: 1;
  max-width: 30rem
}

.panel-alt {
  grid-template-columns: minmax(0, 1fr) minmax(0, 44%)
}

.panel-alt .panel-copy {
  order: 0;
  justify-self: start
}

.panel-fig {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none
}

.panel-alt .panel-fig {
  justify-content: flex-start
}

.panel-fig svg,
.panel-fig img {
  display: block;
  width: min(100%, 600px);
  max-height: 70vh;
  height: auto
}

.panel-fig .d2d-svg { width: min(100%, 640px) }
.panel-fig .rack-teaser-img { width: min(100%, 540px) }
.panel-fig .phase-svg { width: min(100%, 760px) }

.panel-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim)
}

.panel-title {
  margin: 0.7rem 0 1rem;
  font-family: var(--headline-decoded-font);
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em
}

.panel-line {
  font-size: clamp(1.02rem, 1.2vw, 1.1rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--dim)
}

.panel-meta {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--dim)
}

.panel-meta strong {
  color: var(--text);
  font-weight: 600
}

.panel-cta,
.panel-tag {
  margin-top: 1.6rem
}

.panel-tag {
  display: inline-block
}

/* Outlined button in the spacex idiom: mono caps, hairline border, arrow. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  height: 3rem;
  padding: 0 1.3rem;
  border: 1px solid rgba(243, 247, 251, 0.35);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s
}

.btn-outline:hover {
  border-color: rgba(243, 247, 251, 0.8);
  background: rgba(255, 255, 255, 0.05)
}

.btn-outline svg {
  width: 0.9rem;
  height: 0.9rem
}

/* The hero keeps its own headline measure. */
.hero .panel-copy {
  max-width: none
}

@media (max-width: 900px) {
  .panel,
  .panel-alt {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2.2rem;
    padding-block: 3rem
  }

  .panel-copy,
  .panel-alt .panel-copy {
    order: -1
  }

  .panel-fig,
  .panel-alt .panel-fig {
    justify-content: center
  }

  .panel-fig svg,
  .panel-fig img,
  .panel-fig .d2d-svg,
  .panel-fig .rack-teaser-img,
  .panel-fig .phase-svg {
    width: min(100%, 440px);
    max-height: none
  }

  .panel-copy {
    max-width: none
  }
}

/* "Explore <product>" link closing each homepage product section, pointing at
   that product's own page. */
.sec-more {
  margin-top: clamp(1.5rem, 3vw, 2.25rem)
}

.sec-more a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3f7fb;
  text-decoration: none;
  border-bottom: 1px solid rgba(243, 247, 251, 0.35);
  padding-bottom: 0.35rem;
  transition: border-color 0.25s ease, gap 0.25s ease
}

.sec-more a:hover {
  gap: 0.85rem;
  border-color: #f3f7fb
}

.sec-more svg {
  width: 0.85rem;
  height: 0.85rem;
  flex: 0 0 auto
}

/* Product mega-dropdown, following lightmatter.co: a full-width band under the
   nav rather than a card, columns spread across it, each column an accent-ruled
   list. Hover opens after a beat and closes after a slightly longer one so
   crossing the nav diagonally doesn't flicker it. */
.nav-drop {
  position: relative;
  display: flex;
  align-items: center
}

/* A <button>, not a link: the trigger only reveals the list, it never navigates.
   Native button chrome reset so it matches the sibling nav links; a small
   chevron after the label, as on spacex.com. */
.nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--headline-decoded-font);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.9);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.3s
}

.nav-drop-trigger::after {
  content: '';
  width: 0.36em;
  height: 0.36em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 0.22s ease
}

.nav-drop.open .nav-drop-trigger::after {
  transform: translateY(0.1em) rotate(225deg)
}

.nav-drop-trigger:hover,
.nav-drop.open .nav-drop-trigger {
  color: #f3f7fb
}

/* The list drops straight under the trigger: plain links, no panel surface,
   a short fade and slide (the spacex.com dropdown). */
.nav-drop-menu {
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 11rem;
  padding-top: 1.05rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.3rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s
}

/* The last dropdown (Company) sits at the right end of the bar, so its panel hangs
   from the trigger's right edge and its items align right, instead of running
   past the viewport. */
.nav-links .nav-drop:last-child .nav-drop-menu { left: auto; right: 0 }
.nav-links .nav-drop:last-child .nav-drop-item { text-align: right }

.nav-drop.open .nav-drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.nav-drop-inner {
  display: flex;
  flex-direction: column;
  gap: 0.85rem
}

.nav-drop-item {
  display: block;
  text-decoration: none;
  white-space: nowrap;
  outline: none
}

.nav-drop-name {
  font-family: var(--headline-decoded-font);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.78);
  transition: color 0.2s ease
}

.nav-drop-item:hover .nav-drop-name,
.nav-drop-item:focus-visible .nav-drop-name {
  color: #ffffff
}

/* the one-line descriptors belong to the old panel; the list is names only */
.nav-drop-desc {
  display: none
}

@media (max-width: 1279px) {
  .nav-drop-inner {
    grid-template-columns: repeat(2, 1fr)
  }

  .nav-drop-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08)
  }

}

.logo {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.6rem;
  line-height: 0;
  margin: 0;
  text-decoration: none;
  opacity: 1;
  position: relative
}

.logo img,
.logo svg {
  display: block;
  height: 2rem;
  width: auto
}

.logo-wordmark {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  color: #f3f7fb;
  /* terafab-style retract: the span is its own overflow-hidden track, and the
     scrolled state collapses it to width 0 so the wordmark slides away while
     the logo mark stays put (timings lifted from terafab.ai). */
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 160px;
  /* overflow:hidden clips at the padding box, and with line-height:1 the "g"
     descender falls outside it — grow the box symmetrically and cancel the
     growth with negative margins so nothing moves. */
  padding-block: 0.35em;
  margin-block: -0.35em;
  transition: max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1)
}

nav.nav-scrolled .logo-wordmark {
  max-width: 0;
  opacity: 0
}

/* Scrolled nav gets a floor so the links stay readable over figures — terafab
   stays fully transparent, but their pages are light; over this site's dense
   dark artwork the links would collide with content. */
nav.nav-scrolled {
  background: rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px)
}

.pad {
  padding: 0 clamp(1.5rem, 5vw, 4rem)
}

.hero {
  position: relative;
  /* fills the first screen below the nav, so the scroll cue at its foot is
     on screen at load */
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  /* A full-viewport panel like the ones below it; the copy sits mid-left. */
  padding: clamp(6rem, 12vh, 9rem) clamp(1.5rem, 5vw, 4rem) clamp(4rem, 10vh, 7rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  background: transparent;
  color: #f3f7fb
}

/* Mobile navigation: below 480px the desktop links are hidden, so a hamburger
   opens a solid panel under the nav with the product + company links. */
.nav-menu-btn {
  display: none;
  background: none;
  border: 0;
  padding: 0.45rem;
  margin: 0;
  color: rgba(243, 247, 251, 0.9);
  cursor: pointer
}

.nav-menu-btn svg {
  display: block;
  width: 1.25rem;
  height: auto
}

.nav-mobile {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  display: none;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14)
}

nav.nav-open .nav-mobile {
  display: flex
}

.nav-mobile a {
  font-family: var(--headline-decoded-font);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.9);
  text-decoration: none;
  padding: 0.95rem clamp(1.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07)
}

.nav-mobile a:last-child {
  border-bottom: 0
}

.nav-mobile a:active {
  background: rgba(255, 255, 255, 0.05)
}

.js .nav-menu-btn {
  opacity: 0;
  transform: translateY(6px)
}

nav.nav-links-in .nav-menu-btn {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s
}

@media (max-width: 480px) {
  .nav-menu-btn {
    display: flex
  }
}

/* Narrative trio spacing: sections that continue an argument sit closer
   together than independent sections do. .sec-lead trims a section's bottom
   padding, .sec-flow trims the next one's top — half-rhythm seams. */
.sec.sec-lead {
  padding-bottom: clamp(2.25rem, 4.5vw, 4rem)
}

.sec.sec-flow {
  padding-top: clamp(2.25rem, 4.5vw, 4rem)
}

/* Inside a flowing story the chapter headings step down from the page title. */
.sec-flow h2.bit-headline {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem)
}

/* Scroll cue: a floating chevron, bottom-centre of the hero. Hidden until the
   load sequence finishes (.cue-in), gone for good on the first scroll
   (.cue-done). Clicking it scrolls to the product index. */
.hero-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  transform: translate(-50%, 0);
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: rgba(243, 247, 251, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease, color 0.2s ease
}

.hero-scroll-cue svg {
  width: 1.2rem;
  height: 1.2rem
}

.hero-scroll-cue.cue-in {
  opacity: 1;
  pointer-events: auto;
  animation: cueFloat 2.2s ease-in-out infinite
}

.hero-scroll-cue:hover {
  color: #ffffff
}

.hero-scroll-cue.cue-done {
  opacity: 0;
  pointer-events: none
}

@keyframes cueFloat {
  0%, 100% { transform: translate(-50%, 0) }
  50% { transform: translate(-50%, 7px) }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-cue.cue-in {
    animation: none
  }
}

/* Load sequence, terafab.ai's boot: logo -> hero copy -> grid intro.
   Initial hidden states are gated behind html.js (set by a one-line inline
   script in <head>) so nothing is hidden without JavaScript. Timings and the
   blur-drift keyframe are lifted from terafab's styles.css. */
@keyframes heroLineIn {
  from {
    opacity: 0;
    filter: blur(11px);
    transform: translate3d(0, 18%, 0)
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0)
  }
}

/* Logo entrance in two steps: the mark rises first, then the wordmark slides
   out of its retract track (same property the scroll retract animates).
   :not(.nav-scrolled) keeps the scrolled retract authoritative afterwards. */
.js nav .logo-mark {
  opacity: 0;
  transform: translateY(8px)
}

nav.nav-logo-in .logo-mark {
  opacity: 1;
  transform: none;
  transition: opacity 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
              transform 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.06s
}

.js nav:not(.nav-logo-in) .logo-wordmark {
  max-width: 0;
  opacity: 0
}

nav.nav-logo-in:not(.nav-scrolled) .logo-wordmark {
  transition: max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.32s,
              opacity 0.42s cubic-bezier(0.4, 0, 0.2, 1) 0.32s
}

.hero-line {
  display: block
}

/* per-line hidden states: headline lines, sub words (grouped into visual
   lines by JS, each group sharing one delay), and the nav links, which
   close the sequence */
/* pre-split guard: the sub is hidden as a whole until JS wraps its words
   (the split hands visibility back via an inline opacity) — otherwise the
   full text flashes for the ~300ms before hero-ready */
.js .hero .hero-sub-seq {
  opacity: 0
}

.js .hero .hero-line,
.js .hero .sub-seq-word {
  opacity: 0;
  filter: blur(11px);
  transform: translate3d(0, 18%, 0);
  will-change: opacity, filter, transform
}

.sub-seq-word {
  display: inline-block
}

.hero.hero-ready .hero-line,
.hero.hero-ready .sub-seq-word {
  animation: heroLineIn 0.82s cubic-bezier(0.22, 1, 0.36, 1) var(--seq-delay, 0.08s) forwards
}

.hero.hero-ready .hero-line:nth-child(1) { --seq-delay: 0.08s }
.hero.hero-ready .hero-line:nth-child(2) { --seq-delay: 0.22s }

.js .nav-links {
  opacity: 0;
  transform: translateY(6px)
}

nav.nav-links-in .nav-links {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.05s
}

@media (prefers-reduced-motion: reduce) {
  .js nav .logo-mark,
  .js nav:not(.nav-logo-in) .logo-wordmark,
  .js .nav-links,
  .js .hero .hero-sub-seq,
  .js .hero .hero-line,
  .js .hero .sub-seq-word {
    opacity: 1;
    filter: none;
    transform: none;
    animation: none
  }

  .js nav:not(.nav-logo-in) .logo-wordmark {
    max-width: 160px
  }
}

/* Hero background: the photonic die, barely there. site.js's initDieField
   draws a zoomed Mach-Zehnder mesh in near-black hairlines on this canvas and
   sends a few photons along its waveguides; their light is what shows the
   cells around them. Reaches up behind the transparent nav so the field spans
   the whole first screen, and fades in when the load sequence arms it. */
.hero-die-fx {
  position: absolute;
  left: 0;
  top: calc(-1 * var(--nav-h));
  z-index: -1;
  display: block;
  width: 100%;
  height: calc(100% + var(--nav-h));
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease
}

.hero-die-fx.on {
  opacity: 1
}

@media (prefers-reduced-motion: reduce) {
  .hero-die-fx {
    transition: none
  }
}

/* Like the CTA field below, the hero field bleeds past the frame gutter to
   the viewport edges at desktop widths. */
@media (min-width: 1024px) {
  .hero-die-fx {
    left: calc(-1 * var(--frame-gutter));
    width: calc(100% + 2 * var(--frame-gutter))
  }
}

/* CTA dot-grid field (terafab footer preset) — same stacking recipe as the hero's. */
.cta-grid-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none
}

/* The CTA dot field bleeds past the frame gutter to the viewport edges (the
   section itself stays gutter-bound; only the field extends). Below 1024px
   there is no gutter and the sections are already full-bleed. */
@media (min-width: 1024px) {
  .cta-grid-fx {
    /* canvas is a replaced element: width:auto would collapse to the buffer's
       intrinsic size, so size it explicitly — section width plus both gutters */
    left: calc(-1 * var(--frame-gutter));
    right: auto;
    width: calc(100% + 2 * var(--frame-gutter))
  }
}

/* Hero hardware figure: the rack-scale system elevation from the whitepaper,
   kept in its native dark drawing style inside a black panel (etched-style
   "the hardware is the hero"). */
.hero-rack {
  /* align-self only applies to flex/grid items; the section is a block
     container, so the capped figure needs auto inline margins to centre. */
  align-self: center;
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  margin-bottom: clamp(2.8rem, 6vw, 4.5rem)
}

.hero-rack-panel {
  background: transparent;
  padding: clamp(1.1rem, 2.5vw, 1.8rem) clamp(0.9rem, 2.2vw, 1.6rem) clamp(0.8rem, 2vw, 1.3rem)
}

.hero-rack-h {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.9rem
}

.hero-rack-panel svg,
.hero-rack-panel .hero-rack-img {
  display: block;
  width: 100%;
  max-width: 820px;
  height: auto;
  margin-inline: auto
}


.hero-rack-panel svg text {
  font-family: 'Sora', system-ui, sans-serif
}

.hero-rack-cap {
  margin-top: 0.9rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--dim)
}

.hero h1,
.hero .hero-headline,
.hero .sub {
  margin-left: 0;
  margin-right: 0
}

.hero .sub {
  max-width: 580px
}

.hero h1,
.hero .hero-headline {
  font-size: clamp(1.85rem, 5.1vw, 3.9rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 18ch;
  font-family: var(--headline-decoded-font);
  text-wrap: balance
}

.bit-headline {
  position: relative;
  text-transform: capitalize
}

.bit-headline .headline-source {
  transition: none
}

.bit-headline.is-encoded .headline-source {
  opacity: 0
}

.bit-headline.is-decoded .headline-source {
  opacity: 1
}

.bit-headline .headline-bits-overlay {
  /* capitalization is baked per-character in JS — see buildBitOverlay */
  text-transform: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: none;
  white-space: pre;
  font-family: var(--headline-decoded-font);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-size: inherit;
  font-weight: inherit;
  font-style: normal;
  line-height: inherit;
  letter-spacing: inherit
}

.bit-headline.is-decoded .headline-bits-overlay {
  opacity: 0
}

.bit-headline .headline-bits-line {
  display: block
}

/* Mid-decode, the wider bit glyphs can run a few px past the viewport on phones;
   clip the headline's own overflow so nothing can pan sideways. */
.bit-headline {
  overflow-x: clip
}

.bit-headline .headline-bit-char {
  display: inline;
  color: currentColor;
  transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease
}

.bit-headline .headline-bit-char.is-bit {
  opacity: 0.82;
  letter-spacing: -0.1em
}

.bit-headline .headline-bit-char.is-accent {
  color: #f3f7fb;
  font-weight: 300;
}

.bit-headline .headline-bit-char.is-accent.is-bit {
  opacity: 0.92
}

.bit-headline .headline-bit-char.is-final {
  filter: none;
  opacity: 1
}

.bit-headline .headline-bit-char.is-caps {
  text-transform: uppercase
}

.bit-headline .headline-bit-char.is-super.is-final {
  font-size: 0.52em;
  vertical-align: super;
  line-height: 0
}

.hero h1 em,
.hero .hero-headline em {
  font-weight: 300;
  color: inherit
}

.hero h1 em,
.hero .hero-headline em,
.sec h2 em,
.sec h1 em,
.cta-end h2 em {
  font-style: normal;
  font-weight: 300;
  color: inherit;
}

.hero .sub {
  margin-top: 1.6rem;
  font-size: clamp(1.12rem, 1.48vw, 1.28rem);
  font-weight: 300;
  color: rgba(243, 247, 251, 0.78);
  max-width: 540px;
  line-height: 1.75
}

.hero .cta-wrap {
  margin-top: 2.5rem
}

.cta-end .cta-wrap {
  margin-top: 2.5rem
}

/* Etched-style CTA: solid rectangular block, monospace label — white on the black theme. */
/* Contact CTA, terafab.ai's .link-cta idiom (their "View Jobs" button): a quiet
   text button — medium weight, dimmed white, chevron arrow — that lifts to full
   white on hover. Replaces the old bordered mono box. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--headline-decoded-font);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  color: rgba(243, 247, 251, 0.62);
  text-decoration: none;
  padding: 6px 2px 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: color 0.22s ease
}

.btn:hover {
  color: #ffffff
}

.btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px
}

.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  margin-right: -1px;
  transition: transform 0.22s ease
}

.btn-arrow svg {
  display: block;
  width: 100%;
  height: 100%
}

.btn:hover .btn-arrow {
  transform: translateX(2px)
}

.btn-solid {
  background: rgba(255, 140, 37, 0.12);
  border-color: rgba(255, 140, 37, 0.4)
}

/* Full-bleed content sections escape the parent padding, then reapply the
   same inset internally so the content stays on the main reading column. */
.sec {
  --panel-bg: transparent;
  --panel-text: #f3f7fb;
  --panel-surface: rgba(255, 255, 255, 0.05);
  --panel-surface-hover: rgba(255, 255, 255, 0.08);
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-divider: rgba(255, 255, 255, 0.08);
  position: relative;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--panel-bg);
  color: var(--panel-text)
}


.sec h2,
.sec h1 {
  font-family: var(--headline-decoded-font);
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  max-width: 16ch;
  margin-bottom: 1.8rem;
  transition: color 0.4s
}

.sec h2 em,
.sec h1 em {
  font-weight: 300;
  color: inherit;
  transition: color 0.4s
}

.sec .prose {
  font-size: clamp(1.1rem, 1.46vw, 1.24rem);
  font-weight: 300;
  line-height: 1.8;
  max-width: 580px;
  transition: color 0.4s
}

.sec .prose+.prose {
  margin-top: 0.9rem
}

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem
}

.group-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-top: 4.25rem
}

.group-label+.card-row {
  margin-top: 1.2rem
}

/* Roster rows (leadership + advisors): keep cards at their natural width and
   left-aligned instead of stretching to fill the row (auto-fill preserves
   empty tracks), so both people rows share one consistent card width. */
.card-row.roster-row {
  /* capped max (not 1fr): cards keep a fixed, slightly smaller width instead
     of stretching, which sizes the avatars down with them */
  grid-template-columns: repeat(auto-fill, minmax(220px, 240px))
}

/* Team leads: the same card size and wrapping as every other roster row
   (user 2026-10-28: no smaller photos). With three visible they behave
   exactly like the Leadership row. */

/* Phones: two photos per line instead of one narrow column. */
@media (max-width: 560px) {
  .card-row.roster-row,
  .card-row.roster-row.roster-leads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1rem
  }
}

/* Company page opening: the headline runs the full band (two lines at
   desktop widths) and the intro sits beneath it at a generous measure. */
#company > h1 {
  /* breaks as "…intersection of / photonics and computing" at desktop widths */
  max-width: 25ch
}

#company > .prose {
  max-width: 70ch
}

/* Company page rhythm: one large gap between groups, a small one between a
   label and its row, the backers note tucked under the board as a footnote. */
#company .group-label {
  margin-top: clamp(4.5rem, 7vw, 5.5rem)
}

#company > .prose + .group-label {
  margin-top: clamp(5rem, 8vw, 6.5rem)
}

#company .group-label + .hair-grid {
  margin-top: 1.2rem
}

#company .backers-note {
  margin-top: 1.6rem
}

/* Hairline columns: an editorial table instead of boxed cards. Each item is a
   column under a hairline, mono label on top, text beneath (company
   partnerships, the switch trio). */
.hair-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: 2.5rem
}

.hair-col {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12)
}

.hair-col h3 {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 0.7rem
}

.hair-col p {
  font-size: 1.04rem;
  line-height: 1.65;
  font-weight: 300
}

@media (max-width: 768px) {
  .hair-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.5rem
  }
}

@media (max-width: 480px) {
  .hair-grid {
    grid-template-columns: minmax(0, 1fr)
  }
}

/* Board and Advisors share one line: two groups side by side, the advisor card
   landing where a third roster card would (three cards need ~760px of
   content, which 900px viewports have). Stacks again on narrower bands.
   .roster-two / .roster-one say how many cards a group shows, so a hidden
   card never reserves an empty track. */
@media (min-width: 900px) {
  .roster-split {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 1.25rem
  }

  .roster-split .roster-two .roster-row {
    grid-template-columns: repeat(2, minmax(220px, 240px))
  }

  .roster-split .roster-one .roster-row {
    grid-template-columns: minmax(220px, 240px)
  }
}

/* Two-column feature pattern. */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem
}

@media (max-width: 768px) {
  nav {
    top: 0;
    gap: 1.25rem
  }

  .logo {
    min-width: 0;
    flex: 0 1 auto
  }

  nav .logo img,
  nav .logo svg {
    /* definite height, like the desktop rule: with height:auto + max-height,
       the SVG mark (no intrinsic px size) contributes ZERO intrinsic width,
       undersizing the logo's flex chain by one mark and clipping the
       wordmark's overflow-hidden track */
    height: 2rem;
    width: auto
  }

  .footer-logo img,
  .footer-logo svg {
    height: 2rem
  }

  .nav-links {
    flex: 0 0 auto;
    gap: 1rem
  }

  .nav-links a {
    font-size: 0.78rem;
    letter-spacing: 0.06em
  }

  .two-col {
    grid-template-columns: 1fr
  }
}

@media (max-width: 480px) {
  .nav-links {
    display: none
  }

  nav .logo img,
  nav .logo svg {
    height: 2rem
  }
}

.two-col .col-card {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  padding: clamp(1.8rem, 3vw, 2.5rem);
  transition: border-color 0.3s ease, background 0.3s ease
}

.two-col .col-card:hover {
  border-color: rgba(255, 140, 37, 0.28);
  background: transparent
}

.two-col .col-card h3 {
  font-family: var(--headline-decoded-font);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  transition: color 0.4s
}

.two-col .col-card p {
  font-size: clamp(1.1rem, 1.46vw, 1.22rem);
  line-height: 1.75;
  font-weight: 300
}

/* Numbered list pattern. */
.numbered-list {
  margin-top: 2rem
}

.numbered-block {
  display: grid;
  grid-template-columns: minmax(4rem, 6rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(2.2rem, 4vw, 3.2rem) 0
}

.numbered-block:first-child {
  padding-top: 0
}

.numbered-block-num {
  font-family: var(--mono);
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 400;
  color: #f3f7fb;
  letter-spacing: 0.08em;
  line-height: 1.4;
  opacity: 0.9
}

.numbered-block h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
  max-width: none
}

@media (max-width: 640px) {
  .numbered-block {
    grid-template-columns: 1fr;
    gap: 0.5rem
  }
}

.card {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 0;
  padding: 1.6rem 1.8rem;
  position: relative;
  transition: border-color 0.3s ease, background 0.3s ease
}

.card:hover {
  border-color: rgba(255, 140, 37, 0.28);
  background: transparent
}

.card h3 {
  font-family: var(--headline-decoded-font);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
  transition: color 0.4s
}

.card p {
  font-size: 1.04rem;
  line-height: 1.65;
  font-weight: 300;
  transition: color 0.4s
}

.product-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2rem;
  padding: clamp(1.9rem, 3.4vw, 2.8rem);
  border: 1px solid var(--panel-border);
  border-radius: 0;
  background: transparent;
  align-items: start
}

.product-panel-solo {
  grid-template-columns: 1fr
}

/* Ruled variant: no box, a single hairline across the top like the other
   sections (the switch page). */
.product-panel.product-panel-rule {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: clamp(1.8rem, 3.2vw, 2.6rem) 0 0;
  margin-top: clamp(2.4rem, 4.5vw, 3.5rem)
}

/* Borderless panel: same grid, no box — the copy sits directly on the page. */
.product-panel-plain {
  border: 0;
  padding: 0;
  /* the sub-headline sits close to its paragraphs, not a panel-gap away */
  row-gap: 0.9rem;
  background: transparent;
  /* without the box, the headline needs more air above the panel copy */
  margin-top: clamp(2.8rem, 5.5vw, 4.5rem)
}

.product-panel-plain .product-panel-copy {
  max-width: none
}

/* In the borderless variant the heading joins the page's editorial voice:
   light weight like every other heading, sized as a sub-headline. */
.product-panel.product-panel-plain h3 {
  margin-top: 0;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.02em
}

.product-panel-plain .product-panel-copy p {
  font-size: clamp(1.1rem, 1.46vw, 1.24rem);
  line-height: 1.8
}

/* All-black theme: sections are natively dark, so .sec-dark no longer needs
   the backdrop-filter invert trick — it just re-asserts the shared palette. */
.sec-dark {
  --panel-bg: transparent;
  --panel-text: #f3f7fb;
  --panel-surface: rgba(255, 255, 255, 0.05);
  --panel-surface-hover: rgba(255, 255, 255, 0.08);
  --panel-border: rgba(255, 255, 255, 0.14);
  --panel-divider: rgba(255, 255, 255, 0.08);
  --text: #f3f7fb;
  --dim: rgba(243, 247, 251, 0.75);
  --dimmer: rgba(243, 247, 251, 0.6);
}

.dark-block {
  position: relative;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}

.dark-block > .sec {
  margin-inline: 0;
  padding-inline: 0
}

.product-panel-copy {
  max-width: 720px
}

.product-panel-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(255, 140, 37, 0.32);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f3f7fb
}

.product-panel h3 {
  margin-top: 1rem;
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.75rem, 4vw, 2.7rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em
}

.product-panel-copy p {
  margin-top: 1rem;
  font-size: clamp(1.06rem, 1.42vw, 1.18rem);
  line-height: 1.75;
  font-weight: 300;
  color: var(--text)
}

.product-panel-meta {
  display: grid;
  gap: 1rem
}

.product-panel-stat {
  padding-top: 0.7rem;
  border-top: 1px solid var(--panel-border)
}

.product-panel-stat:first-child {
  border-top: 0;
  padding-top: 0
}

.product-panel-stat > span {
  display: block;
  margin-bottom: 0.28rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dimmer)
}

.product-panel-stat strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text)
}

/* Model availability uses a native table so each status stays tied to its SKU. */
.scale-models {
  margin-top: clamp(2.5rem, 5vw, 4rem)
}

.scale-models table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.6
}

.scale-models caption {
  margin-bottom: 1.2rem;
  text-align: left;
  font-family: var(--headline-decoded-font);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.02em
}

.scale-models th,
.scale-models td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--panel-border);
  font-weight: 400
}

.scale-models thead th {
  border-top: 1px solid var(--panel-border);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dimmer)
}

.scale-models th:first-child { padding-left: 0 }
.scale-models th:last-child,
.scale-models td:last-child { padding-right: 0; text-align: right }
.scale-models td { color: var(--dim) }
.scale-models .model-ready { color: var(--accent) }

.model-expanded .model-summary th { color: var(--accent) }
.model-expanded .model-summary > * { border-bottom-color: transparent }
.scale-models .model-details-row > td { padding: 0 0 1.25rem; text-align: left }

.model-components {
  padding: 1.2rem 1.4rem;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.025)
}

.model-component-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--dim);
  overflow-wrap: anywhere
}

.model-component-list li:first-child { grid-column: 1 / -1; color: var(--text) }

@media (max-width: 600px) {
  .model-components { padding: 1rem }
  .model-component-list { grid-template-columns: minmax(0, 1fr); gap: 0.65rem }
}

@media (max-width: 480px) {
  .scale-models table { font-size: 0.68rem }
  .scale-models th,
  .scale-models td { padding: 0.85rem 0.35rem }
  .scale-models thead th { font-size: 0.6rem; letter-spacing: 0.04em }
}

.scale-mark {
  text-transform: uppercase;
  color: inherit
}

.scale-mark sup {
  font-size: 0.52em;
  line-height: 0;
  vertical-align: super;
  position: relative;
  top: -0.02em
}

@media (max-width: 768px) {
  .product-panel {
    grid-template-columns: 1fr
  }
}

.cta-end {
  position: relative;
  text-align: left;
  margin-inline: calc(-1 * clamp(1.5rem, 5vw, 4rem));
  margin-bottom: -1px;
  padding: clamp(5rem, 10vw, 9rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--panel-bg, rgba(255, 255, 255, 0.62));
  color: var(--panel-text, #0f1b2b)
}

.cta-end h2 {
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.85rem, 5.1vw, 3.9rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-left: 0;
  margin-right: 0;
  max-width: 550px;
  transition: color 0.4s
}

.cta-end h2 em {
  color: inherit;
  transition: color 0.4s
}

.cta-end .prose {
  margin-left: 0;
  margin-right: 0;
  margin-top: 1.2rem;
  max-width: 460px;
  transition: color 0.4s
}

footer {
  /* same side padding as the nav, so the footer logo sits under the nav logo */
  padding: 2.6rem clamp(1.5rem, 2.8vw, 2.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #000;
  border-top: 1px solid rgba(243, 247, 251, 0.08);
  position: relative;
  z-index: 2;
  gap: 0.9rem;
  --dimmer: rgba(243, 247, 251, 0.55)
}

.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 0;
  text-decoration: none
}

.footer-wordmark {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
  color: #f3f7fb
}

.footer-logo img,
.footer-logo svg {
  display: block;
  height: 2rem;
  width: auto
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem
}

.footer-address {
  font-style: normal;
  font-size: 0.86rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.55)
}

.footer-subs {
  display: flex;
  flex-direction: column;
  gap: 0.18rem
}

.footer-subs-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.5);
  margin-bottom: 0.22rem
}

.footer-subs span:not(.footer-subs-label) {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.82)
}

footer span {
  font-size: 0.78rem;
  color: var(--dimmer);
  letter-spacing: 0.05em
}

.footer-top {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.5rem 4rem
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 1.8rem 4rem
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.62rem
}

.footer-col h4 {
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(243, 247, 251, 0.5)
}

.footer-col a {
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.82);
  text-decoration: none;
  transition: color 0.25s
}

.footer-col a:hover {
  color: #f3f7fb
}

.footer-col a sup {
  font-size: 0.62em;
  vertical-align: 0.42em
}

.footer-legal {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(243, 247, 251, 0.08)
}

@media (max-width: 720px) {
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 2rem
  }
}

.footer-fine {
  font-size: 0.72rem;
  color: rgba(243, 247, 251, 0.4)
}

.footer-fine sup {
  font-size: 0.7em;
  vertical-align: 0.4em
}

/* Small gray note under the advisors grid (unnamed backers). */
.backers-note {
  margin-top: 2.2rem;
  font-family: var(--mono);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--dim);
  line-height: 1.65
}

.fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1)
}

.fade.vis {
  opacity: 1;
  transform: translateY(0)
}

.fade.d1 {
  transition-delay: 0.1s
}

.fade.d2 {
  transition-delay: 0.2s
}

.sub.fade,
.prose.fade,
.card-row.fade {
  filter: blur(10px);
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s cubic-bezier(0.16, 1, 0.3, 1)
}

.sub.fade.vis,
.prose.fade.vis,
.card-row.fade.vis {
  filter: none;
  transform: translateY(0)
}

.sec h2.fade+.prose.fade,
.sec h1.fade+.prose.fade,
.cta-end h2.fade+.prose.fade {
  transition-delay: 0.12s
}

.sec .prose.fade+.prose.fade {
  transition-delay: 0.2s
}

.sec .prose.fade+.card-row.fade {
  transition-delay: 0.26s
}

/* Team cells, etched-style: large square photo, name, monospace role.
   No card chrome — the photo carries the cell. */
.card.person {
  text-align: left;
  padding: 0;
  border: 0;
  background: transparent
}

.card.person:hover {
  background: transparent
}

.card.person .avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  object-fit: cover;
  object-position: center 32%;
  display: block;
  margin: 0 0 0.9rem;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.4s ease
}

.card.person:hover .avatar {
  border-color: rgba(255, 140, 37, 0.4)
}

.card.person h3 {
  font-size: 1.02rem;
  margin-bottom: 0.3rem;
  text-wrap: balance
}

/* balance: a role that wraps splits evenly ("Optical / Architecture Lead")
   instead of stranding its last word */
.card.person p {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.6;
  text-wrap: balance
}

/* Animated SVG primitives shared by the technology figures: flowing dashed paths and pulsing rings. */
.xp-flow {
  animation: xpFlow 1s linear infinite;
  will-change: stroke-dashoffset
}

.xp-flow-slow {
  animation: xpFlow 2.4s linear infinite;
  will-change: stroke-dashoffset
}

@keyframes xpFlow {
  to {
    stroke-dashoffset: -72
  }
}

.xp-ring {
  animation: xpRing 1.4s ease-in-out infinite
}

@keyframes xpRing {
  0%, 100% {
    opacity: 0.5
  }
  50% {
    opacity: 1
  }
}

/* Top-down fabric: alternate which destination port the route is gated to. */
.route-a { animation: routeA 3s ease-in-out infinite }
.route-b { animation: routeB 3s ease-in-out infinite }

@keyframes routeA {
  0%, 42% { opacity: 1 }
  58%, 100% { opacity: 0.1 }
}

@keyframes routeB {
  0%, 42% { opacity: 0.1 }
  58%, 100% { opacity: 1 }
}

/* Pause the looping SVG diagram animations while their host is off-screen (perf). */
.anim-paused .xp-flow,
.anim-paused .xp-flow-slow,
.anim-paused .xp-ring,
.anim-paused .route-a,
.anim-paused .route-b {
  animation-play-state: paused
}

/* Side-by-side switch visuals: any-to-any port view + top-down fabric. */
.scale-vis-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: center
}

/* Cells of unequal height: stretch both to the row height so their captions sit on
   one line (plain centring drops the shorter cell's caption by half the difference),
   then the shorter figure centres itself in its leftover space via `margin: auto`,
   lining its middle up with the taller figure's. */
.scale-vis-row.scale-vis-aligned {
  align-items: stretch
}

.scale-vis-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* grid items default to min-width:auto and can be blown out by wide
     intrinsic content (the topology zoo's auto-fit grid); let them shrink */
  min-width: 0
}

.scale-vis-cell .fab-h {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem
}

/* Matched to .tile-svg so the two switch figures share a width in their row. */
.scale-vis-cell .fab-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: auto
}

.scale-vis-cell .fab-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* 1U chassis front/rear schematics (side-by-side cells). */
.scale-vis-cell .chassis-svg {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: 0 auto
}

/* A cell holding a front and a rear panel stacked: space the second pair. */
.scale-vis-cell .chassis-svg + .fab-h {
  margin-top: clamp(1.6rem, 3vw, 2.4rem)
}

.scale-vis-cell .chassis-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* interconnect package tile: one photonic core die + four bonded chiplets. */
.scale-vis-cell .tile-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  margin: auto
}

.scale-vis-cell .tile-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* Full-line statement band: the heading spans the whole line and the copy
   flows under it at full width (overrides the 16ch/580px readability caps). */
.sec-full h2 {
  max-width: none
}

.sec-full .prose {
  /* full-width sections still keep a readable measure */
  max-width: 78ch
}

/* fabric page figures: the topology zoo strip and the reshape-per-phase
   timeline. */
.scale-vis-cell .zoo-svg,
.scale-vis-cell .phase-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: auto
}

.scale-vis-cell .phase-svg { max-width: 800px }
.scale-vis-cell .d2d-svg { max-width: 720px }
.scale-vis-cell .decode-svg,
.scale-vis-cell .scaling-svg,
.scale-vis-cell .energy-svg,
.scale-vis-cell .reach-svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto }

/* A chart and its heading form one block the width of the chart, with the heading
   on the frame's left edge, where the chart's labels and caption also start. */
.chart-cell {
  width: 100%;
  max-width: 600px;
  margin: 0 auto
}

.scale-vis-cell .chart-cell .fab-h {
  text-align: left;
  padding-left: 2.14%;
  margin-bottom: 0.6rem
}

/* "Route a GPU through any topology" — the interactive fabric widget on the
   fabric intro. Chips pick a shape; the nodes morph in place. */
.topo-route {
  width: 100%;
  max-width: 640px;
  margin: clamp(1.6rem, 3.2vw, 2.6rem) auto 0
}

.topo-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem
}

.topo-chip {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.38rem 0.7rem;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 0;
  color: rgba(243, 247, 251, 0.6);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color 0.2s ease, border-color 0.2s ease
}

.topo-chip:hover {
  color: #f3f7fb;
  border-color: rgba(255, 255, 255, 0.4)
}

.topo-chip.active {
  color: #ff8c25;
  border-color: rgba(255, 140, 37, 0.55)
}

.route-svg {
  display: block;
  width: 100%;
  height: auto
}

/* The topology zoo, ported from the whitepaper: a fluid grid of thirteen
   cells — mini graph, name, diameter/degree stats. */
.scale-vis-cell .zoo {
  /* flex, not grid: incomplete rows (13 cells) centre instead of ragging left */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.4rem 1rem;
  width: 100%;
  max-width: 940px;
  margin: auto
}

.zoo-cell {
  flex: 0 0 auto;
  width: 100px
}

.zoo-cell svg {
  display: block;
  margin: 0 auto 0.5rem
}

.zoo-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: #f3f7fb
}

/* ORV3 three-view rack drawing on the Pod page. */
.scale-vis-cell .orv3-svg {
  display: block;
  width: 100%;
  max-width: 720px;
  height: auto;
  margin: auto
}

.scale-vis-cell .orv3-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* Exploded blind-mate assembly view on the Pod page. */
.scale-vis-cell .orv3x-svg {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin: auto
}

.scale-vis-cell .orv3x-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* Full-width solo figure row: the pod isometric. */
.scale-vis-row.scale-vis-solo {
  grid-template-columns: 1fr
}

.scale-vis-cell .pod-svg,
.scale-vis-cell .pod-img,
.scale-vis-cell .rack-teaser-img {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: 0 auto
}


.scale-vis-cell .pod-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

@media (max-width: 768px) {
  .scale-vis-row {
    grid-template-columns: 1fr;
    gap: 1.5rem
  }
}

/* fabric stack diagram: 3-level layout (developer code → fabric → switching + compute),
   reusing the xp-flow keyframe for the orange connecting lines. */
.photon-grid-svg {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto
}

.photon-grid-svg text {
  font-family: 'Sora', system-ui, sans-serif
}

/* interconnect chip animation: square aspect ratio, slightly smaller max-width
   so the square doesn't overpower the text column beside it. */
.photon-grid-svg {
  max-width: 300px
}

@media (max-width: 768px) {
  .photon-grid-svg {
    margin-top: 1.6rem
  }
}

/* Hide-on-scroll: while the visitor scrolls down the whole bar steps out of the
   way (logo, links, menu button and backdrop fade). Scrolling up, or the top
   of the page, restores it. */
nav.nav-hidden {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  pointer-events: none
}

nav.nav-hidden .logo,
nav.nav-links-in.nav-hidden .nav-links,
nav.nav-links-in.nav-hidden .nav-menu-btn {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease
}

/* Vision page (vision/index.html): an eyebrow at the very top, a longer lede, product cards that are links, a strip of four figures, and the staged roadmap. */
.vision-eyebrow { margin-top: 0; margin-bottom: 1.4rem }

.vision-lede {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.65;
  max-width: 62ch
}


.sec .two-col + .prose { margin-top: 2.5rem }

/* On the vision page the cards are lines, not boxes: one hairline above each item,
   like the stats strip and the roadmap, with the box border and padding gone. A
   hovered product card tints its line the way a boxed card tints its border. */
.hair-row .card,
.hair-row .col-card {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 1.1rem 0 0;
  background: transparent
}

.hair-row .card:hover,
.hair-row .col-card:hover { background: transparent }

.hair-row .vision-card:hover { border-top-color: rgba(255, 140, 37, 0.45) }

.card-row .vision-card {
  display: block;
  color: inherit;
  text-decoration: none
}

.card .panel-label {
  display: block;
  margin-bottom: 0.9rem
}

.vision-card-more {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.2rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid rgba(243, 247, 251, 0.35);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f3f7fb;
  transition: gap 0.3s ease, border-color 0.3s ease
}

.vision-card:hover .vision-card-more { gap: 0.85rem; border-color: #f3f7fb }

.vision-card-more svg { width: 0.8rem; height: 0.8rem }

.vision-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.5rem;
  margin-top: clamp(2.5rem, 5vw, 4rem)
}

.vision-stat {
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12)
}

.vision-stat > strong {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1
}

.vision-stat > span {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1.7
}

.roadmap {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0
}

.roadmap li {
  display: grid;
  grid-template-columns: minmax(4rem, 7rem) 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12)
}

.roadmap-stage {
  padding-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dim)
}

.roadmap h3 {
  margin: 0 0 0.6rem;
  font-family: var(--headline-decoded-font);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 300;
  letter-spacing: -0.02em
}

.roadmap p {
  max-width: 62ch;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.75;
  font-weight: 300
}

.vision-cta .cta-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.8rem
}

@media (max-width: 768px) {
  .vision-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 1.4rem
  }

  .roadmap li {
    grid-template-columns: 1fr;
    gap: 0.6rem
  }
}

/* Brand mark (inline SVG from _brand.js): two photons, in the ink white like the
   wordmark. */
.logo-mark .mark-photon,
.footer-mark .mark-photon {
  fill: #f3f7fb
}

/* Footer brand block without a mark: a one-line tagline and the contact address. */
.footer-tagline,
.footer-mail {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.55);
  text-decoration: none
}

.footer-mail:hover {
  color: #f3f7fb
}

/* Single-screen homepage: the hero is the whole page, so the legal line lives at its
   foot (where the scroll cue used to sit) and the main wrapper adds no scroll. */
.hero-only {
  padding-bottom: 0
}

.hero-foot {
  position: absolute;
  left: clamp(1.5rem, 5vw, 4rem);
  right: clamp(1.5rem, 5vw, 4rem);
  bottom: 1.4rem;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  font-size: 0.78rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(243, 247, 251, 0.45)
}

.hero-foot a {
  color: inherit;
  text-decoration: none;
  transition: color 0.22s ease
}

.hero-foot a:hover {
  color: #f3f7fb
}