/* ==========================================================================
   FONTS — self-hosted. No third-party requests, no FOUT from a CDN,
   and the width axis is guaranteed to be there (it is the whole identity).
   Archivo Variable: wght 100–900, wdth 62%–125%.
   ========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/assets/fonts/archivo-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-display: swap; font-weight: 400;
  src: url('/assets/fonts/jbmono-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-display: swap; font-weight: 500;
  src: url('/assets/fonts/jbmono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   ECOM BRANDS LLC — visual system
   Concept: "The Operating System"
   Instrument-grade grid, mono annotation layer, expanded grotesk display.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */

:root {
  /* dark canvas */
  --black:      #060607;
  --ink-1:      #0B0B0D;
  --ink-2:      #121215;
  --ink-3:      #191920;

  --fg:         #F2F1ED;
  --fg-mid:     rgba(242, 241, 237, .60);
  --fg-low:     rgba(242, 241, 237, .34);
  --fg-faint:   rgba(242, 241, 237, .16);

  --line:       rgba(242, 241, 237, .13);
  --line-soft:  rgba(242, 241, 237, .065);

  /* light finish */
  --bone:       #E9E6DF;
  --paper:      #F3F1EB;
  --l-fg:       #121214;
  --l-fg-mid:   rgba(18, 18, 20, .62);
  --l-fg-low:   rgba(18, 18, 20, .40);
  --l-line:     rgba(18, 18, 20, .16);
  --l-line-soft:rgba(18, 18, 20, .08);

  /* one signal colour, used sparingly */
  --signal:     #FF3D00;
  --signal-l:   #D63200;

  /* metrics */
  --gut:        clamp(20px, 5vw, 64px);
  --maxw:       1440px;
  --rule:       1px;
  --nav-h:      64px;

  --ease:       cubic-bezier(.22, .61, .21, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* --- 2. RESET ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100, "wght" 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--signal); color: #fff; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

/* --- 3. LAYOUT PRIMITIVES ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

section { position: relative; }

.band { padding-block: clamp(72px, 11vw, 148px); }
.band--tight { padding-block: clamp(52px, 7vw, 88px); }

.hr { height: var(--rule); background: var(--line); border: 0; margin: 0; }

/* light-finish inversion */
.invert {
  background: var(--bone);
  color: var(--l-fg);
  --fg: var(--l-fg);
  --fg-mid: var(--l-fg-mid);
  --fg-low: var(--l-fg-low);
  --fg-faint: rgba(18,18,20,.16);
  --line: var(--l-line);
  --line-soft: var(--l-line-soft);
  --signal: var(--signal-l);
}

/* the visible grid — the spine of the whole identity */
.gridlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.gridlines i { border-left: var(--rule) solid var(--line-soft); }
.gridlines i:first-child { border-left-color: transparent; }
@media (min-width: 900px) { .gridlines { grid-template-columns: repeat(6, 1fr); } }

.above { position: relative; z-index: 1; }

/* --- 4. TYPOGRAPHY ------------------------------------------------------- */

/* Expanded grotesk display — the signature move.
   Width axis animates on reveal: type opens up into place. */
.display {
  font-family: var(--sans);
  font-variation-settings: "wdth" 116, "wght" 700;
  font-size: clamp(2.6rem, 8.4vw, 7.4rem);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 0;
}
.display--xl { font-size: clamp(3rem, 11.5vw, 10.5rem); }
.display--sm { font-size: clamp(2rem, 5.4vw, 4.1rem); }

.h2 {
  font-variation-settings: "wdth" 112, "wght" 650;
  font-size: clamp(1.7rem, 4.1vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  text-transform: uppercase;
  margin: 0;
}
.h3 {
  font-variation-settings: "wdth" 104, "wght" 620;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  line-height: 1.18;
  letter-spacing: -.017em;
  margin: 0;
}

.lede {
  font-size: clamp(1.06rem, 1.75vw, 1.44rem);
  line-height: 1.42;
  letter-spacing: -.016em;
  color: var(--fg);
  font-variation-settings: "wdth" 100, "wght" 400;
  max-width: 26ch;
  margin: 0;
}
.lede--wide { max-width: 40ch; }

.body   { font-size: 1rem; line-height: 1.62; color: var(--fg-mid); margin: 0; }
.body p + p { margin-top: 1em; }
.body--fg { color: var(--fg); }
.body strong { color: var(--fg); font-variation-settings: "wght" 600; }

/* mono annotation layer */
.mono {
  font-family: var(--mono);
  font-size: .645rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--fg-low);
  font-weight: 500;
  line-height: 1.4;
}
.mono--sig { color: var(--signal); }
.mono--mid { color: var(--fg-mid); }
.mono--lg  { font-size: .72rem; letter-spacing: .15em; }

/* section marker: 01 / TITLE with a rule */
.marker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: var(--rule) solid var(--line);
  margin-bottom: clamp(28px, 4vw, 56px);
}
.marker .num { color: var(--signal); }
.marker .fill { flex: 1; }
.marker .end { color: var(--fg-low); }

/* --- 5. HEADER ----------------------------------------------------------- */

.hdr {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: var(--rule) solid transparent;
}
.hdr::after { /* scroll progress signal */
  content: "";
  position: absolute; left: 0; bottom: -1px;
  height: 1px; width: var(--sp, 0%);
  background: var(--signal);
  transition: width .08s linear;
}
.hdr.is-stuck {
  background: rgba(6, 6, 7, .78);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(242, 241, 237, .1);
}

.hdr .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand img { height: 20px; width: auto; }
.brand .tag {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(242,241,237,.42);
  padding-left: 12px;
  border-left: 1px solid rgba(242,241,237,.16);
  white-space: nowrap;
}
@media (max-width: 720px) { .brand .tag { display: none; } }

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  font-family: var(--mono);
  font-size: .655rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(242,241,237,.58);
  padding: 8px 13px;
  position: relative;
  transition: color .25s var(--ease);
}
.nav a:hover { color: #F2F1ED; }
.nav a[aria-current="page"] { color: #F2F1ED; }
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute; left: 13px; right: 13px; bottom: 2px;
  height: 1px; background: var(--signal);
}
@media (max-width: 900px) { .nav { display: none; } }

.nav-cta {
  font-family: var(--mono);
  font-size: .655rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #060607;
  background: #F2F1ED;
  padding: 9px 15px;
  margin-left: 10px;
  transition: background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.nav-cta:hover { background: var(--signal); color: #fff; }
@media (max-width: 900px) { .nav-cta { display: none; } }

/* mobile menu */
.burger {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid rgba(242,241,237,.2);
  padding: 9px 13px;
  font-family: var(--mono);
  font-size: .645rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #F2F1ED;
  cursor: pointer;
}
@media (max-width: 900px) { .burger { display: block; } }

.sheet {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 99;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 24px) var(--gut) 32px;
  opacity: 0; visibility: hidden;
  transition: opacity .32s var(--ease), visibility .32s;
}
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(242,241,237,.1);
  font-variation-settings: "wdth" 110, "wght" 650;
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.028em;
  text-transform: uppercase;
  color: #F2F1ED;
}
.sheet a span { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; color: var(--signal); font-variation-settings: normal; }
.sheet .foot { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; }

/* --- 6. HERO ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: 40px;
  overflow: hidden;
}
.hero--page { min-height: 62svh; }

#dots {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: .9;
}
.hero-veil {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255,61,0,.10), transparent 62%),
    linear-gradient(to bottom, rgba(6,6,7,.86) 0%, rgba(6,6,7,0) 34%, rgba(6,6,7,0) 62%, rgba(6,6,7,.92) 100%);
  pointer-events: none;
}

/* status rail — the "instrument" cue */
.rail {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: clamp(28px, 5vw, 56px);
  border-bottom: var(--rule) solid var(--line);
}
.rail .dot {
  width: 5px; height: 5px;
  background: var(--signal);
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity:1; transform:scale(1);} 50% { opacity:.35; transform:scale(.7);} }
.rail .sp { flex: 1; }
@media (max-width: 760px) { .rail .sp { display: none; } .rail { gap: 8px 18px; } }

/* display reveal: width axis opens */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  font-variation-settings: "wdth" 66, "wght" 700;
  opacity: 0;
  transform: translateY(0.9em);
  transition:
    font-variation-settings 1.15s var(--ease-out),
    opacity .8s var(--ease-out),
    transform 1.05s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 105ms);
}
.is-lit .reveal-line > span {
  font-variation-settings: "wdth" 118, "wght" 700;
  opacity: 1;
  transform: translateY(0);
}
.reveal-line .pd { color: var(--signal); }

@media (prefers-reduced-motion: reduce) {
  .reveal-line > span { transition: none; opacity: 1; transform: none; font-variation-settings: "wdth" 118, "wght" 700; }
}

.hero-foot {
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: 1fr;
  margin-top: clamp(30px, 5vw, 54px);
  padding-top: 22px;
  border-top: var(--rule) solid var(--line);
  align-items: start;
}
@media (min-width: 900px) { .hero-foot { grid-template-columns: 1.15fr .85fr auto; } }

/* --- 7. BUTTONS ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: .69rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 15px 22px;
  border: var(--rule) solid var(--fg);
  background: var(--fg);
  color: var(--black);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color .34s var(--ease), border-color .34s var(--ease);
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--signal);
  transform: translateY(101%);
  transition: transform .42s var(--ease);
  z-index: 0;
}
.btn:hover { color: #fff; border-color: var(--signal); }
.btn:hover::before { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--fg); border-color: var(--line); }
.btn--ghost:hover { color: #fff; border-color: var(--signal); }

.arrow { transition: transform .34s var(--ease); display: inline-block; }
.btn:hover .arrow { transform: translateX(5px); }

.link {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--fg);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--fg-faint);
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.link:hover { border-color: var(--signal); color: var(--signal); }
.link:hover .arrow { transform: translateX(5px); }

/* --- 8. MODULE RACK (home centrepiece) ----------------------------------- */

.rack {
  display: flex;
  border: var(--rule) solid var(--line);
  min-height: 460px;
  background: var(--ink-1);
}
.bay {
  flex: 1 1 0;
  min-width: 0;
  border-left: var(--rule) solid var(--line);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  background: transparent;
  text-align: left;
  padding: 0;
  border-top: 0; border-right: 0; border-bottom: 0;
  transition: flex-grow .62s var(--ease), background .5s var(--ease);
}
.bay:first-child { border-left: 0; }
.bay.is-on { flex-grow: 3.1; background: var(--ink-2); }
.rack:hover .bay:not(.is-on) { background: transparent; }

.bay-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 0;
}
.bay-num { font-family: var(--mono); font-size: .645rem; letter-spacing: .14em; color: var(--fg-low); transition: color .4s var(--ease); }
.bay.is-on .bay-num { color: var(--signal); }
.bay-led {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-faint);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.bay.is-on .bay-led { background: var(--signal); box-shadow: 0 0 0 4px rgba(255,61,0,.16); }

.bay-title {
  margin-top: auto;
  padding: 16px;
  font-variation-settings: "wdth" 108, "wght" 650;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-mid);
  transition: color .4s var(--ease);
}
.bay.is-on .bay-title { color: var(--fg); }

.bay-body {
  padding: 0 16px 20px;
  max-width: 34ch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .42s var(--ease) .1s, transform .42s var(--ease) .1s;
  pointer-events: none;
}
.bay.is-on .bay-body { opacity: 1; transform: none; }
.bay-body p { font-size: .935rem; line-height: 1.55; color: var(--fg-mid); margin: 0 0 14px; }
.bay-io { display: grid; gap: 4px; }
.bay-io b { font-variation-settings: "wght" 400; color: var(--fg); }

@media (max-width: 900px) {
  .rack { flex-direction: column; min-height: 0; }
  .bay { border-left: 0; border-top: var(--rule) solid var(--line); }
  .bay:first-child { border-top: 0; }
  .bay.is-on { flex-grow: 1; }
  .bay-title { margin-top: 0; padding-top: 10px; }
  .bay-body { max-height: 0; overflow: hidden; padding-bottom: 0; transition: max-height .5s var(--ease), opacity .3s var(--ease), padding-bottom .5s var(--ease); }
  .bay.is-on .bay-body { max-height: 360px; padding-bottom: 20px; }
}

/* loop return path under the rack */
.loopline {
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px;
}
.loopline .seg { flex: 1; height: 1px; background: var(--line); position: relative; }
.loopline .seg::after {
  content: ""; position: absolute; top: 0; left: 0;
  height: 1px; width: 22%;
  background: linear-gradient(90deg, transparent, var(--signal), transparent);
  animation: travel 4.6s linear infinite;
}
@keyframes travel { from { transform: translateX(-30%); } to { transform: translateX(480%); } }
@media (prefers-reduced-motion: reduce) { .loopline .seg::after { animation: none; opacity: .4; } }

/* --- 9. SHELF → FEED MORPH ---------------------------------------------- */

.morph-sticky { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.morph-stage {
  position: relative;
  width: 100%;
  height: clamp(340px, 58vh, 620px);
}
.cell {
  position: absolute;
  top: 0; left: 0;
  border: var(--rule) solid var(--line);
  background: var(--ink-1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  will-change: transform, width, height;
  overflow: hidden;
}
.cell .code { font-family: var(--mono); font-size: .54rem; letter-spacing: .14em; color: var(--fg-low); }
.cell .form-abs {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.cell .form-abs > i {
  display: block;
  background: rgba(242,241,237,.13);
  border: 1px solid rgba(242,241,237,.10);
}
.cell .bar { position: absolute; left: 10px; bottom: 10px; height: 5px; width: 34%; background: var(--fg-faint); }
.cell.is-hot { border-color: rgba(255,61,0,.55); }
.cell.is-hot .form-abs > i { background: rgba(255,61,0,.20); border-color: rgba(255,61,0,.4); }

.morph-labels { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: space-between; }

/* --- 10. FLOW RAIL (discovery → purchase) -------------------------------- */

.flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: var(--rule) solid var(--line);
  border-left: var(--rule) solid var(--line);
}
@media (min-width: 820px) { .flow { grid-template-columns: repeat(4, 1fr); } }
.flow > div {
  border-right: var(--rule) solid var(--line);
  border-bottom: var(--rule) solid var(--line);
  padding: 22px 18px 26px;
  position: relative;
  min-height: 190px;
  display: flex; flex-direction: column;
}
.flow > div::before {
  content: "";
  position: absolute; top: 0; left: 0; height: 2px; width: 0;
  background: var(--signal);
  transition: width .7s var(--ease);
}
.flow > div.in::before { width: 100%; transition-delay: calc(var(--i) * 140ms); }
.flow h4 {
  margin: 26px 0 8px;
  font-variation-settings: "wdth" 106, "wght" 650;
  font-size: 1.12rem; text-transform: uppercase; letter-spacing: -.012em;
}
.flow p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--fg-mid); }

/* --- 11. SPEC SHEET ------------------------------------------------------ */

.spec { border-top: var(--rule) solid var(--line); }
.spec dl { display: grid; margin: 0; }
.spec .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: var(--rule) solid var(--line);
}
@media (min-width: 720px) { .spec .row { grid-template-columns: 220px 1fr; gap: 24px; align-items: baseline; } }
.spec dt { font-family: var(--mono); font-size: .645rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-low); }
.spec dd { margin: 0; font-size: 1rem; color: var(--fg); line-height: 1.5; }

/* --- 12. MARQUEE --------------------------------------------------------- */

.marq {
  overflow: hidden;
  border-block: var(--rule) solid var(--line);
  padding-block: 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marq-in { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marq:hover .marq-in { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marq-in span {
  font-family: var(--mono); font-size: .69rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-mid);
  padding-inline: 22px;
  display: inline-flex; align-items: center; gap: 22px;
  white-space: nowrap;
}
.marq-in span::after { content: ""; width: 4px; height: 4px; background: var(--signal); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .marq-in { animation: none; } }

/* --- 13. UTC / GLOBAL BAND ---------------------------------------------- */

.utc { border-top: var(--rule) solid var(--line); padding-top: 18px; }
.utc-scale {
  display: flex; align-items: flex-end;
  height: 56px; gap: 2px;
}
.utc-scale i {
  flex: 1;
  background: var(--fg-faint);
  height: 30%;
  transition: height .7s var(--ease), background .7s var(--ease);
}
.utc-scale i.tall { height: 100%; }
.utc-scale i.on { background: var(--signal); }
.utc-marks { display: flex; justify-content: space-between; padding-top: 8px; }

/* --- 14. EDITORIAL ------------------------------------------------------- */

.piece { border-top: var(--rule) solid var(--line); padding-block: clamp(34px, 5vw, 64px); }
.piece-grid { display: grid; gap: clamp(18px, 3vw, 48px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .piece-grid { grid-template-columns: 300px 1fr; } }
.piece-body { max-width: 62ch; }
.piece-body p { font-size: clamp(1rem, 1.28vw, 1.1rem); line-height: 1.66; color: var(--fg-mid); margin: 0 0 1.05em; }
.piece-body p:last-child { margin-bottom: 0; }
.piece-body p:first-child { color: var(--fg); font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.48; letter-spacing: -.013em; }
.pull {
  margin: clamp(22px, 3vw, 34px) 0;
  padding: 22px 0 22px 24px;
  border-left: 2px solid var(--signal);
  font-variation-settings: "wdth" 104, "wght" 500;
  font-size: clamp(1.18rem, 2.2vw, 1.72rem);
  line-height: 1.24; letter-spacing: -.022em;
  color: var(--fg);
}

/* --- 15. MODULE SPEC (how-we-build) ------------------------------------- */

.mspec { border-top: var(--rule) solid var(--line); }
.mspec-row {
  display: grid; gap: clamp(16px, 2.6vw, 40px);
  grid-template-columns: 1fr;
  padding-block: clamp(34px, 5vw, 62px);
  border-bottom: var(--rule) solid var(--line);
  position: relative;
}
@media (min-width: 900px) { .mspec-row { grid-template-columns: 90px 1fr 300px; } }
.mspec-row:hover .mspec-n { color: var(--signal); }
.mspec-n { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--fg-low); transition: color .4s var(--ease); }
.mspec-main { max-width: 52ch; }
.mspec-main h3 { margin: 0 0 14px; }
.io { display: grid; gap: 10px; align-content: start; }
.io-block { border-top: var(--rule) solid var(--line); padding-top: 10px; }
.io-block ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.io-block li { font-size: .88rem; color: var(--fg-mid); line-height: 1.45; }
.io-block li::before { content: "— "; color: var(--fg-low); }

/* --- 16. FORM ------------------------------------------------------------ */

.form { display: grid; gap: 0; border-top: var(--rule) solid var(--line); }
.field { border-bottom: var(--rule) solid var(--line); position: relative; }
.field label {
  display: block;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-low);
  padding-top: 16px;
  transition: color .3s var(--ease);
}
.field:focus-within label { color: var(--signal); }
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 6px 0 16px;
  font-size: 1.04rem;
  color: var(--fg);
  font-variation-settings: "wdth" 100, "wght" 400;
  outline: none;
  border-radius: 0;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-faint); }
.field select { appearance: none; cursor: pointer; }
.field.sel::after {
  content: "";
  position: absolute; right: 2px; bottom: 26px;
  width: 7px; height: 7px;
  border-right: 1.5px solid var(--fg-low);
  border-bottom: 1.5px solid var(--fg-low);
  transform: rotate(45deg);
  pointer-events: none;
}
.field select option { background: #0B0B0D; color: #F2F1ED; }
.invert .field select option { background: #E9E6DF; color: #121214; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 16px; }
.chip {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  padding: 9px 14px;
  border: var(--rule) solid var(--line);
  background: transparent; color: var(--fg-mid);
  cursor: pointer;
  transition: all .26s var(--ease);
}
.chip:hover { border-color: var(--fg-low); color: var(--fg); }
.chip.on { background: var(--fg); border-color: var(--fg); color: var(--black); }
.invert .chip.on { background: var(--l-fg); color: var(--bone); }

.form-note { padding-top: 18px; }
.sent {
  display: none;
  border: var(--rule) solid var(--signal);
  padding: 26px;
  margin-top: 22px;
}
.sent.show { display: block; }

/* --- 17. CTA BAND -------------------------------------------------------- */

.cta-band { position: relative; overflow: hidden; }
.cta-band .display { margin-bottom: 28px; }

/* --- 18. FOOTER ---------------------------------------------------------- */

.ftr { background: var(--black); color: var(--fg); border-top: var(--rule) solid rgba(242,241,237,.13); }
.ftr-top {
  display: grid; gap: 34px;
  grid-template-columns: 1fr;
  padding-block: clamp(44px, 6vw, 76px);
}
@media (min-width: 820px) { .ftr-top { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } }
.ftr h5 { margin: 0 0 14px; font-family: var(--mono); font-size: .62rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(242,241,237,.34); font-weight: 500; }
.ftr ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ftr ul a, .ftr address a { font-size: .93rem; color: rgba(242,241,237,.62); transition: color .25s var(--ease); font-style: normal; }
.ftr ul a:hover, .ftr address a:hover { color: #F2F1ED; }
.ftr address { font-style: normal; font-size: .93rem; color: rgba(242,241,237,.62); line-height: 1.7; }
.ftr img.mark { height: 24px; width: auto; margin-bottom: 16px; }
.ftr-bot {
  display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
  padding-block: 20px;
  border-top: var(--rule) solid rgba(242,241,237,.09);
}

/* --- 19. REVEALS --------------------------------------------------------- */

.up { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.up.in { opacity: 1; transform: none; }
.up[data-d="1"] { transition-delay: .09s; }
.up[data-d="2"] { transition-delay: .18s; }
.up[data-d="3"] { transition-delay: .27s; }
.up[data-d="4"] { transition-delay: .36s; }
.up[data-d="5"] { transition-delay: .45s; }

.wipe { position: relative; overflow: hidden; }
.wipe::after {
  content: ""; position: absolute; inset: 0;
  background: var(--black);
  transform: translateX(0);
  transition: transform 1s var(--ease-out);
}
.invert .wipe::after { background: var(--bone); }
.wipe.in::after { transform: translateX(101%); }

@media (prefers-reduced-motion: reduce) {
  .up { opacity: 1; transform: none; transition: none; }
  .wipe::after { display: none; }
}

/* --- 20. UTILITIES ------------------------------------------------------- */

.cols-2 { display: grid; gap: clamp(22px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 820px) { .cols-2 { grid-template-columns: 1fr 1fr; } }
.cols-sp { display: grid; gap: clamp(22px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cols-sp { grid-template-columns: 1fr 1.35fr; } }
.stack { display: grid; gap: 18px; align-content: start; }
.stack-sm { display: grid; gap: 10px; align-content: start; }
.mt-l { margin-top: clamp(28px, 4vw, 54px); }
.mt-m { margin-top: clamp(18px, 2.5vw, 30px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* --- 21. MORPH SCENE HEADINGS ------------------------------------------- */

.morph-head { position: relative; height: 88px; margin-bottom: 18px; }
.mlbl {
  position: absolute; inset: 0;
  display: grid; align-content: start; gap: 10px;
  transition: opacity .3s linear;
}
.mlbl h3 {
  margin: 0;
  font-variation-settings: "wdth" 106, "wght" 620;
  font-size: clamp(1.05rem, 2.5vw, 1.9rem);
  line-height: 1.05; letter-spacing: -.022em;
  text-transform: uppercase;
}
.mlbl[data-lbl="feed"] h3 { color: var(--signal); }
@media (max-width: 720px) { .morph-head { height: 104px; } }

.morph-scene { position: relative; }
.scroll-hint {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px;
}
.scroll-hint i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--signal), transparent);
}

/* --- 22. BAY INTERNALS (button can only hold phrasing content) ----------- */
.bay-top, .bay-title, .bay-body, .bay-io, .bay-io > span, .bay-body .bp { display: block; }
.bay-top { display: flex; }
.bay-body .bp { font-size: .935rem; line-height: 1.55; color: var(--fg-mid); margin: 0 0 14px; }
.bay-io { display: grid; gap: 4px; }
.bay-io > span { font-size: inherit; }

/* --- 23. CORRECTIONS ----------------------------------------------------- */

/* the signature full stop: <i> must not be synthesised into an oblique */
.pd, .display i, .h2 i { font-style: normal; }

/* nav CTA needs to beat `.nav a` */
.nav a.nav-cta { color: #060607; }
.nav a.nav-cta:hover { color: #fff; }

/* hero display: must clear the fold on a 900px-tall laptop */
.display--xl { font-size: clamp(2.65rem, 9vw, 8.4rem); line-height: .9; }

/* rack: inactive bays wear their name vertically, like a real module rack */
@media (min-width: 901px) {
  .bay-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    padding: 16px 15px;
  }
  .bay.is-on .bay-title {
    writing-mode: horizontal-tb;
    transform: none;
    padding: 16px;
  }
}

/* morph stage: a feed clips — that is the point */
.morph-stage { overflow: hidden; height: clamp(300px, 62vh, 560px); }
.cell { background: var(--ink-2); border-color: rgba(242,241,237,.16); }
.cell .form-abs > i { background: rgba(242,241,237,.17); }

.loopline { flex-wrap: wrap; }
.loopline .mono--sig { white-space: nowrap; }
.loopline > .mono:last-child { flex: 1 1 260px; min-width: 0; }
.loopline .seg { min-width: 60px; }

.hide-sm { display: inline; }
@media (max-width: 680px) { .hide-sm { display: none; } }

/* --- 24. MORPH CONTRAST -------------------------------------------------- */
.morph-stage .cell { background: #16161A; border-color: rgba(242,241,237,.20); }
.morph-stage .cell .form-abs > i { background: rgba(242,241,237,.20); border-color: rgba(242,241,237,.14); }
.morph-stage .cell .code { color: rgba(242,241,237,.45); }
.morph-stage .cell.is-hot { border-color: var(--signal); background: #1B1210; }
.morph-stage .cell.is-hot .code { color: var(--signal); }
.morph-stage .cell.is-hot .form-abs > i { background: rgba(255,61,0,.38); border-color: rgba(255,61,0,.6); }
.morph-stage .cell.is-hot .bar { background: var(--signal); width: 62%; }

/* --- 25. RACK: collapsed bays give their space back ---------------------- */
@media (min-width: 901px) {
  .bay:not(.is-on) .bay-body { display: none; }
  .rack { min-height: 420px; }
}

/* --- 26. MORPH / MOBILE POLISH ------------------------------------------ */
.morph-sticky { padding-top: var(--nav-h); }

@media (max-width: 720px) {
  .morph-head { height: 100px; }
  .mlbl h3 { font-size: clamp(.95rem, 4.1vw, 1.3rem); }
  .marker .end { display: none; }
  .marker { gap: 10px; }
  .flow > div { min-height: 168px; padding: 18px 14px 22px; }
  .flow h4 { margin-top: 18px; font-size: 1rem; }
  .morph-stage { height: clamp(300px, 56vh, 520px); }
  .rail { gap: 6px 16px; }
}
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* --- 27. SAFE AREA (iPhone, notch + home indicator) ---------------------- */
.hdr { height: auto; min-height: var(--nav-h); padding-top: env(safe-area-inset-top, 0px); }
.sheet { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 24px); padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
.hero { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 40px); }

/* ==========================================================================
   ITERATION 02 — stakeholder feedback
   (1) grid overlay must never compete with type
   (2) vertical rhythm was too loose — gaps read as missing content
   (3) an adhoc vector layer so the page is not a wall of text
   ========================================================================== */

/* --- 28. GRID OVERLAY: registration ticks, not full-height rules ---------
   The pattern now fades out across the middle 56% of every section, so it
   frames the content instead of running behind the letterforms. On the bone
   form section it is lighter again, because dark-on-light reads much hotter
   than light-on-dark at the same alpha.                                    */

:root { --line-soft: rgba(242, 241, 237, .055); }
.invert { --line-soft: rgba(18, 18, 20, .05); }

.gridlines {
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0, #000 9%, transparent 23%, transparent 77%, #000 91%, #000 100%);
  mask-image: linear-gradient(to bottom,
      #000 0, #000 9%, transparent 23%, transparent 77%, #000 91%, #000 100%);
}
/* content always wins */
.above { position: relative; z-index: 2; }
.hdr, .sheet { z-index: 100; }

/* the form is the one place where absolute legibility is non-negotiable */
.invert .form,
.invert .form * { position: relative; z-index: 3; }

/* --- 29. VERTICAL RHYTHM -------------------------------------------------
   Every value below is a reduction. The old scale left voids big enough to
   read as a loading error, especially where two sections shared a ground.  */

.band        { padding-block: clamp(58px, 7.4vw, 104px); }
.band--tight { padding-block: clamp(44px, 5.2vw, 72px); }
.marker      { margin-bottom: clamp(24px, 3vw, 40px); }
.mt-l        { margin-top: clamp(24px, 3vw, 40px); }
.mt-m        { margin-top: clamp(16px, 2vw, 24px); }

/* last band before the footer: the doubled padding was the worst offender */
.cta-band    { padding-bottom: clamp(46px, 5.6vw, 76px); }
.ftr-top     { padding-block: clamp(34px, 4.2vw, 58px); }
.ftr-bot     { padding-block: 16px; }

/* the rack sized itself by its emptiest state */
.rack        { min-height: 0; }
@media (min-width: 901px) { .rack { min-height: 352px; } }

.hero-foot   { margin-top: clamp(24px, 3.6vw, 42px); }
.piece       { padding-block: clamp(30px, 4vw, 52px); }
.mspec-row   { padding-block: clamp(28px, 3.8vw, 48px); }

/* --- 30. MSPEC SPINE -----------------------------------------------------
   The numbered steps were a stack of paragraphs. A node rail turns them into
   a sequence you can read at a glance, and costs nothing but a pseudo.     */

@media (min-width: 900px) {
  .mspec-row { position: relative; }
  .mspec-row::before {
    content: ""; position: absolute; left: 3px; top: 0; bottom: 0;
    width: 1px; background: var(--line);
  }
  .mspec-row:first-child::before { top: clamp(28px, 3.8vw, 48px); }
  .mspec-row:last-child::before  { bottom: auto; height: calc(clamp(28px, 3.8vw, 48px) + .6em); }
  .mspec-n { position: relative; padding-left: 20px; display: block; }
  .mspec-n::before {
    content: ""; position: absolute; left: 0; top: .34em;
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--fg-faint);
    transition: background .35s var(--ease), box-shadow .35s var(--ease);
  }
  .mspec-row:hover .mspec-n::before {
    background: var(--signal);
    box-shadow: 0 0 0 4px rgba(255, 61, 0, .14);
  }
}

/* --- 31. ADHOC VECTOR LAYER ---------------------------------------------
   Line-drawn marks that describe the actual mechanism of each concept.
   Stroke inherits the card's colour; the accent is baked into the symbol.  */

.gx {
  display: block;
  width: clamp(44px, 4.4vw, 56px);
  height: clamp(44px, 4.4vw, 56px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  color: var(--fg-low);
  margin-top: 18px;
  overflow: visible;
  transition: color .4s var(--ease), transform .5s var(--ease);
}
.flow > div { padding-top: 20px; }
.flow > div .gx { margin-top: 16px; }
.flow h4 { margin-top: 16px; }
.flow > div:hover .gx { color: var(--fg); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .gx, .flow > div:hover .gx { transition: none; transform: none; }
}

/* --- 32. RESPONSIVE PASS ------------------------------------------------- */

@media (max-width: 900px) {
  .hero--page { min-height: 52svh; }
  .hero-foot { grid-template-columns: 1fr; gap: 18px; }
  .cols-2, .cols-sp { gap: 26px; }
}

@media (max-width: 680px) {
  :root { --gut: 20px; }
  .band { padding-block: clamp(48px, 9vw, 72px); }
  .band--tight { padding-block: 40px; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow > div { min-height: 0; padding: 16px 13px 20px; }
  .flow > div .gx { width: 40px; height: 40px; margin-top: 12px; }
  .flow h4 { margin-top: 12px; font-size: .96rem; }
  .flow p { font-size: .84rem; line-height: 1.45; }
  .marker { flex-wrap: wrap; }
  .spec .row { padding-block: 13px; }
  .ftr-top { gap: 26px; }
  .piece-grid { gap: 14px; }
  .pull { padding-left: 16px; margin-block: 20px; }
  .btn { width: 100%; justify-content: space-between; }
  .hero-foot .btn { width: auto; }
}

@media (max-width: 420px) {
  .flow { grid-template-columns: 1fr; }
  .flow > div { min-height: 0; }
}

/* --- 33. SECTION-TO-SECTION COLLAPSE -------------------------------------
   Two stacked bands used to sum their padding into a ~210px void that read
   as missing content. Consecutive bands now share a single breathing space. */
.band + .band,
.band + .band--tight,
.band--tight + .band { padding-top: clamp(40px, 4.6vw, 64px); }

/* the marker rule and the spec rule were stacking into a double hairline */
.marker + .mspec, .marker + .spec { border-top: 0; }

/* --- 34. VECTOR LAYER, SECOND PASS --------------------------------------
   First render was too small and too faint — the marks read as smudges next
   to 3.1rem headlines. Larger, heavier stroke, and a mid-tone resting state
   so the drawing is legible before you hover it.                          */
.gx {
  width: clamp(52px, 5vw, 66px);
  height: clamp(52px, 5vw, 66px);
  stroke-width: 1.7;
  color: var(--fg-mid);
}
.flow > div .gx { margin-top: 18px; }
.flow > div:hover .gx { color: var(--fg); }

/* the four accent bars were shouting over the marks they sit above */
.flow > div::before { height: 1px; opacity: .62; }

/* trim the seam between stacked sections one more notch */
.band + .band,
.band + .band--tight,
.band--tight + .band { padding-top: clamp(36px, 4vw, 56px); }

@media (max-width: 680px) {
  .flow > div .gx { width: 46px; height: 46px; margin-top: 14px; }
}

/* --- 35. GRID OVERLAY, FINAL --------------------------------------------
   A percentage fade scaled with the section, so on a tall section (the form
   page on a phone) the "tick" was 200px long and still crossed body copy.
   Fixed pixel ticks instead: the mark is always ~26px, never near the type. */
.gridlines {
  -webkit-mask-image: linear-gradient(to bottom,
      #000 0, #000 26px, transparent 74px,
      transparent calc(100% - 74px), #000 calc(100% - 26px), #000 100%);
  mask-image: linear-gradient(to bottom,
      #000 0, #000 26px, transparent 74px,
      transparent calc(100% - 74px), #000 calc(100% - 26px), #000 100%);
}
/* on the hero the grid is the backdrop, not an annotation — let it run */
.hero .gridlines {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0, #000 46%, transparent 78%);
}

/* ==========================================================================
   ITERATION 03 — the shelf cells earn their place
   The grey blobs read as broken images. Each cell now holds a generic
   packaging archetype plus two sets of furniture: a shelf-edge label and
   feed furniture. They cross-fade against --pm, the same scroll progress
   that drives the morph — so the identical object is described first by a
   retail system and then by a feed. No products, no invented brands.
   ========================================================================== */

/* --- 36. CELL STRUCTURE -------------------------------------------------- */

.morph-stage .cell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  padding: 9px 10px;
  align-content: stretch;
}
.c-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.c-pos { opacity: .55; }

.px {
  width: 100%;
  height: 100%;
  max-width: 190px;
  max-height: 190px;
  min-height: 0;
  justify-self: center;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linejoin: round;
  color: rgba(242, 241, 237, .44);
  transition: color .5s var(--ease);
}

/* --- 37. DUAL FURNITURE, DRIVEN BY SCROLL PROGRESS ----------------------- */

.c-foot { display: grid; min-height: 13px; align-items: center; }
.cf { grid-area: 1 / 1; display: flex; align-items: center; gap: 7px; }
.cf--shelf { opacity: calc(1 - var(--pm, 0) * 2.4); }
.cf--feed  { opacity: calc((var(--pm, 0) - .62) * 2.8); }

/* a shelf edge: price block + barcode. This is what a retailer sees. */
.cf--shelf .tag {
  flex: none; width: 22px; height: 11px;
  border: 1px solid rgba(242, 241, 237, .34);
}
.cf--shelf .bc {
  flex: 1; height: 9px;
  background-image: repeating-linear-gradient(90deg,
      rgba(242, 241, 237, .34) 0 1px, transparent 1px 3px);
}

/* a feed card: a play mark and how far through it someone got. */
.cf--feed .pl {
  flex: none; width: 0; height: 0;
  border-left: 7px solid rgba(242, 241, 237, .5);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}
.cf--feed .pb { flex: 1; height: 2px; background: rgba(242, 241, 237, .16); display: block; }
.cf--feed .pb b {
  display: block; height: 100%; width: 34%;
  background: rgba(242, 241, 237, .5);
  transition: width .6s var(--ease);
}

/* the one that catches — the only orange in the field */
.morph-stage .cell.is-hot .px { color: var(--signal); }
.morph-stage .cell.is-hot .code { color: var(--signal); }
.morph-stage .cell.is-hot .cf--shelf .tag { border-color: var(--signal); }
.morph-stage .cell.is-hot .cf--feed .pl { border-left-color: var(--signal); }
.morph-stage .cell.is-hot .cf--feed .pb b { width: 86%; background: var(--signal); }

/* --- 38. READOUT SWAP ---------------------------------------------------- */

.morph-rail .swap {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 9px;
  min-width: 0;
}
.morph-rail .swap .dot { grid-column: 1; grid-row: 1; margin: 0; }
.morph-rail .swap b {
  grid-column: 2; grid-row: 1;
  font-family: var(--mono); font-size: .645rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--fg-mid);
}
.morph-rail .swap b.cf--feed { color: var(--signal); }

@media (max-width: 720px) {
  .morph-stage .cell { padding: 7px 8px; gap: 4px; }
  .px { max-width: 120px; max-height: 120px; stroke-width: 2; }
  .c-pos { display: none; }
  .cf--shelf .tag { width: 16px; height: 9px; }
  .morph-rail .swap b { font-size: .58rem; letter-spacing: .13em; }
}

/* --- 39. FEED STATE: the card is the whole frame -------------------------
   In shelf mode the product is one of twelve facings, so it is small. In
   feed mode it is the only thing on screen, so it grows into the card. Both
   sizes come off the same --pm, so it scales with the morph.              */
.px {
  max-width:  calc(180px + var(--pm, 0) * 110px);
  max-height: calc(180px + var(--pm, 0) * 110px);
}
.morph-stage .cell { background: #17171C; }

@media (max-width: 720px) {
  .px {
    max-width:  calc(110px + var(--pm, 0) * 80px);
    max-height: calc(110px + var(--pm, 0) * 80px);
  }
}

/* ==========================================================================
   ITERATION 04 — the diagram becomes the argument
   The grid of product cards illustrated neither model. The headline promised
   a four-step chain and showed twelve thumbnails. Replaced with a station
   diagram that literally draws Model A and then re-wires itself into Model B.
   ========================================================================== */

/* --- 40. THE CHAIN ------------------------------------------------------- */

.morph-stage {
  overflow: visible;
  height: clamp(272px, 38vh, 344px);
}
.chain {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* stations */
.ch-node { color: rgba(242, 241, 237, .52); transition: color .5s var(--ease); }
.ch-node.sig { color: var(--signal); }
.ch-node .fr {
  fill: #101014;
  stroke: rgba(242, 241, 237, .22);
  stroke-width: 1;
  transition: stroke .5s var(--ease);
}
.ch-node.sig .fr { stroke: var(--signal); fill: #1B1210; }
.ch-node use { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }

.chain text {
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 500;
  pointer-events: none;
}
.chain .la, .chain .lb {
  font-size: 11px;
  letter-spacing: .17em;
  fill: rgba(242, 241, 237, .78);
}
.ch-node.sig .lb { fill: var(--signal); }
.chain .ix {
  font-size: 9px;
  letter-spacing: .15em;
  fill: rgba(242, 241, 237, .32);
}

/* model A — one rail, three chevrons. Entirely neutral: the old world has
   no signal in it. Orange only exists once the new model appears.          */
.chain .rail { fill: none; stroke: rgba(242, 241, 237, .26); stroke-width: 1; }
.chain .chev { fill: none; stroke: rgba(242, 241, 237, .42); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* model B — a broadcast that narrows */
.chain .ray  { fill: none; stroke: rgba(242, 241, 237, .13); stroke-width: 1; }
.chain .ray.live { stroke: rgba(242, 241, 237, .42); }
.chain .ray.sig,
.chain .thr.sig { stroke: var(--signal); stroke-width: 1.3; }
.chain .rdot { fill: rgba(242, 241, 237, .20); }
.chain .thr  { fill: none; stroke: rgba(242, 241, 237, .34); stroke-width: 1; }

@media (max-width: 820px) {
  .morph-stage { height: clamp(420px, 64vh, 560px); }
  .chain .la, .chain .lb { font-size: 10px; letter-spacing: .14em; }
  .chain .ix { font-size: 8px; }
}


/* ==========================================================================
   ITERATION 05
   (a) the pinned scene was a 900px box holding a 500px diagram, so 335px of
       it were empty — half of that read as a gap the moment the scene ended.
       The sticky box now fits its content and pins with a top offset instead.
   (b) the four flow cards under the diagram repeated four of its five
       stations, same icons, same words. Replaced with the comparison that
       gives Model A real weight instead of one glance during a scroll.
   ========================================================================== */

/* --- 41. PINNED SCENE FITS ITS CONTENT ---------------------------------- */
.morph-sticky {
  position: sticky;
  top: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
  height: auto;
  min-height: 0;
  display: block;
  padding-top: clamp(20px, 5vh, 56px);
  padding-bottom: clamp(20px, 4vh, 40px);
}

/* --- 42. THE TWO MODELS, SIDE BY SIDE ----------------------------------- */
.cmp { border-top: var(--rule) solid var(--line); }
.cmp-head, .cmp-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 30px;
  padding-block: 17px;
  border-bottom: var(--rule) solid var(--line);
}
@media (min-width: 880px) {
  .cmp-head, .cmp-row { grid-template-columns: 236px 1fr 1fr; align-items: baseline; }
}
.cmp-row .k { color: var(--fg-low); }
.cmp-row p { margin: 0; font-size: .98rem; line-height: 1.52; }
.cmp-row .a { color: var(--fg-mid); }
.cmp-row .b { color: var(--fg); }

/* one faint orange rule running the length of the new model */
@media (min-width: 880px) {
  .cmp-head .b, .cmp-row .b {
    border-left: 1px solid rgba(255, 61, 0, .30);
    padding-left: 22px;
  }
}
@media (max-width: 879px) {
  .cmp-head { display: none; }
  .cmp-row .a::before, .cmp-row .b::before {
    font-family: var(--mono); font-size: .58rem; letter-spacing: .16em;
    text-transform: uppercase; margin-right: 8px;
  }
  .cmp-row .a::before { content: "Then"; color: var(--fg-low); }
  .cmp-row .b::before { content: "Now";  color: var(--signal); }
}

/* --- 43. ANCHOR LANDING --------------------------------------------------
   Any element an anchor targets has to clear the fixed header, otherwise it
   lands under it and reads as "the button did nothing".                    */
[id] { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 20px); }

/* ==========================================================================
   ITERATION 07
   (a) .btn painted its background from --fg but hard-coded its text to
       --black. On .invert sections --fg flips to near-black, so the label
       was black on black — invisible until the orange hover fill arrived.
       The label now takes a token that flips with the surface.
   (b) the module rack auto-advanced every 3.4s, faster than a bay can be
       read. It now opens only on hover, tap or keyboard focus.
   ========================================================================== */

/* --- 44. BUTTON LABEL ALWAYS READS -------------------------------------- */
:root   { --btn-fg: var(--black); }   /* light button on a dark ground */
.invert { --btn-fg: #F5F4F0; }        /* dark button on a light ground  */

.btn { color: var(--btn-fg); }
.btn:hover,
.btn:focus-visible { color: #FFFFFF; }   /* orange fill, white label, both grounds */

/* the arrow is part of the label, not decoration — keep it in step */
.btn .arrow { color: inherit; }

/* --- 45. RACK: NO AUTO-ADVANCE, SO THE AFFORDANCE HAS TO BE VISIBLE ------ */
@media (min-width: 901px) {
  .bay:not(.is-on):hover { background: rgba(242, 241, 237, .035); }
  .bay:not(.is-on):hover .bay-title { color: var(--fg); }
  .bay:not(.is-on):hover .bay-led { background: var(--fg-low); }
}

/* white on #FF3D00 is 3.5:1 — under AA for an 11px label. The deeper accent
   already in the palette gets it to 4.9:1, and the hue shift is invisible.  */
.btn::before { background: var(--signal-l); }

/* ==========================================================================
   ITERATION 08 — the form actually sends now
   ========================================================================== */

/* --- 46. HONEYPOT --------------------------------------------------------
   Off-screen rather than display:none — some bots skip hidden inputs but
   fill positioned ones. Never focusable, never announced.                  */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --- 47. SUBMIT STATES --------------------------------------------------- */
.btn[disabled] { opacity: .55; cursor: progress; pointer-events: none; }
.btn[aria-busy="true"] span:first-child::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .btn[aria-busy="true"] span:first-child::after { animation: none; content: "…"; } }

.form-err {
  display: none;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--signal);
  background: rgba(214, 50, 0, .07);
  color: var(--fg);
  line-height: 1.6;
  max-width: 46ch;
  letter-spacing: .1em;
}
.form-err.show { display: block; }

/* once it has sent, the fields are history — stop inviting edits */
.form.is-done { opacity: .42; pointer-events: none; }
.sent:focus { outline: none; }