/* sleds.ai — site stylesheet. Fonts, then the ground layer (alt.css) and the layout layer (mid.css).
   The previous stylesheet is kept as site-v3.css for /old. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Fragment+Mono:ital@0;1&display=swap");

/* sleds — alternate direction ("Night Run, unlit"). Standalone: does not load design.css or site.css.
   Near-black ground, one enormous word per screen, tilted product panels, one citron per screen. */

:root {
  --ground: #000000;
  --ink-950: #0b0d11;
  --ink-900: #0f1116;
  --ink-850: #14171e;
  --ink-800: #1a1e26;
  --ink-700: #242936;
  --ink-600: #2a2e38;
  --ink-500: #3a4050;
  --fg-1: #f4f5f2;
  --fg-2: #9aa0ad;
  --fg-3: #6b6f7b;
  --volt: #d9dd45;
  --peri: #8b90ff;
  --success: #55e08c;
  --warning: #ffb02e;
  --accent-text: var(--volt);
  --shadow-panel: 0 80px 140px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --ui: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 5vw, 72px);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--ground);
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--fg-1);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 4px;
}
::selection {
  background: var(--volt);
  color: var(--ink-900);
}
.volt {
  color: var(--accent-text);
}
.peri {
  color: var(--peri);
}
.ok {
  color: var(--success);
}
.warn {
  color: var(--warning);
}
.dim {
  color: var(--fg-3);
}

/* page enter */
@media (prefers-reduced-motion: no-preference) {
  body {
    animation: enter .9s ease both;
  }
  @keyframes enter {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* atmosphere */
#atmo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* chrome */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -48px;
  background: linear-gradient(var(--ground), transparent);
  pointer-events: none;
  z-index: -1;
}
.nav .mark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fg-1);
}
.nav .mark svg {
  width: 22px;
  height: 22px;
}
.nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav a {
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--fg-1);
  border-color: var(--fg-1);
}
.nav .cta {
  color: var(--ink-900);
  background: var(--fg-1);
  padding: 8px 14px;
  border-radius: 2px;
  border: 0;
}
.nav .cta:hover {
  background: var(--volt);
  color: var(--ink-900);
}
.nav .burger {
  display: none;
}
@media (max-width: 860px) {
  .nav ul {
    gap: 14px;
  }
  .nav ul li:not(:last-child) {
    display: none;
  }
  .nav ul.open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--ground);
    padding: 12px var(--gutter) 24px;
    gap: 8px;
    border-bottom: 1px solid var(--ink-700);
  }
  .nav ul.open li {
    display: block;
  }
  .nav .burger {
    display: inline-block;
    background: none;
    border: 0;
    color: var(--fg-1);
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
    padding: 6px 0;
  }
}

main {
  position: relative;
  z-index: 2;
}

/* the big word */
.word {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 20vh var(--gutter) 12vh;
  position: relative;
}
.word.short {
  min-height: 70vh;
  padding-bottom: 8vh;
}
.word h1,
.word h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 0.92;
  margin: 0;
  text-wrap: balance;
  font-size: clamp(64px, 15vw, 232px);
  color: var(--fg-1);
}
.word h1.mid {
  font-size: clamp(52px, 11vw, 168px);
}
.word .sub {
  max-width: 34em;
  margin: 32px auto 0;
  color: var(--fg-2);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.55;
  text-wrap: balance;
}
.word .facts {
  display: flex;
  justify-content: center;
  gap: 28px 40px;
  flex-wrap: wrap;
  margin-top: 40px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.word .facts b {
  font-weight: 400;
  color: var(--fg-1);
}
.word .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 28px;
  display: block;
}
.word .eyebrow b {
  color: var(--accent-text);
  font-weight: 400;
}

/* word cycle (hero) */
.cycle {
  display: inline-grid;
  text-align: left;
}
.cycle > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(.35em);
  transition: opacity .6s cubic-bezier(0.2, 0.7, 0.2, 1), transform .6s
    cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.cycle > span.on {
  opacity: 1;
  transform: none;
}
.cycle > span.off {
  opacity: 0;
  transform: translateY(-.35em);
}
@media (prefers-reduced-motion: reduce) {
  .cycle > span {
    transition: none;
  }
}

/* reveal */
.rv {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rv {
    transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.1s
      cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .rv.wait {
    opacity: 0;
    transform: translateY(28px);
  }
  .word h1 .l {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .04em;
  }
  .word h1 .l > span {
    display: inline-block;
    transform: translateY(110%);
    animation: rise 1.2s cubic-bezier(0.2, 0.7, 0.1, 1) forwards;
  }
  .word h1 .l:nth-child(2) > span {
    animation-delay: .12s;
  }
  .word h1 .l:nth-child(3) > span {
    animation-delay: .24s;
  }
  .word h1 .l:nth-child(4) > span {
    animation-delay: .36s;
  }
  @keyframes rise {
    to {
      transform: none;
    }
  }
}

/* tilted product panels */
.stagepanel {
  perspective: 1600px;
  perspective-origin: 50% 30%;
  padding: 0 var(--gutter) 22vh;
  display: grid;
  place-items: center;
}
.panel {
  width: min(1040px, 100%);
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: 10px;
  box-shadow: var(--shadow-panel);
  transform: none;
  position: relative;
  overflow: hidden;
}
/* square at rest; settles in from a slight tilt as it enters */
@media (prefers-reduced-motion: no-preference) {
  .panel.rv {
    transition: opacity 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.2s
      cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .panel.rv.wait {
    opacity: 0;
    transform: rotateX(12deg) translateY(48px);
  }
}
.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0.05),
    transparent 40%,
    transparent 70%,
    rgba(139, 144, 255, 0.05)
  );
  pointer-events: none;
}
.panel .bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-600);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: .04em;
}
.panel .bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-500);
  display: inline-block;
}
.panel .bar i.v {
  background: var(--volt);
}
.panel .bar .t {
  margin-left: auto;
}
.float {
  width: min(560px, 100%);
  --rx: 12deg;
  --ry: 10deg;
}
.wide {
  width: min(760px, 100%);
}
@media (max-width: 760px) {
  .panel {
    --rx: 8deg;
    --ry: -3deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transform: none !important;
    transition: none;
  }
}

.rows {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rows th {
  text-align: left;
  font-weight: 400;
  color: var(--fg-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--ink-600);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
}
.rows td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-700);
  color: var(--fg-2);
  white-space: nowrap;
}
.rows tr:last-child td {
  border-bottom: 0;
}
.rows td.ask {
  color: var(--fg-1);
  font-family: var(--ui);
  font-size: 14px;
  white-space: normal;
  min-width: 240px;
}
.rows tr.take td {
  background: rgba(217, 221, 69, 0.06);
}
.size {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ink-500);
  border-radius: 4px;
  font-family: var(--display);
  font-size: 16px;
  color: var(--fg-1);
}
.size.v {
  border-color: var(--volt);
  color: var(--accent-text);
}
.worth.hi {
  color: var(--warning);
}
.who .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 8px;
  vertical-align: middle;
}
.who .dot.ai {
  background: var(--peri);
}
.tablewrap {
  overflow-x: auto;
}

.brief {
  padding: 22px 24px;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
}
.brief dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 16px;
}
.brief dt:first-of-type {
  margin-top: 0;
}
.brief dd {
  margin: 4px 0 0;
  color: var(--fg-1);
}
.brief dd.q {
  color: var(--fg-2);
  font-style: italic;
}
.brief .from {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.brief .from b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink-700);
  display: grid;
  place-items: center;
  color: var(--fg-1);
  font-weight: 500;
  font-family: var(--ui);
  font-size: 11px;
}

.term {
  padding: 20px 22px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-2);
  white-space: pre;
  overflow-x: auto;
  margin: 0;
}
.term .k {
  color: var(--accent-text);
}
.term .g {
  color: var(--success);
}
.term .d {
  color: var(--fg-3);
}
.term .w {
  color: var(--fg-1);
}
.term .p {
  color: var(--peri);
}

/* chat panel */
.chat {
  padding: 18px 20px;
  display: grid;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.5;
}
.chat .m {
  max-width: 92%;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ink-800);
  color: var(--fg-1);
}
.chat .m.me {
  background: var(--ink-700);
  justify-self: end;
}
.chat .m small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.chat .m.sleds {
  border-left: 2px solid var(--volt);
}

/* verb sections (word + panel) */
.verb {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 40px;
  padding: 14vh var(--gutter);
}
.verb .lab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.verb h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(72px, 17vw, 260px);
  line-height: 0.88;
  margin: 0;
  letter-spacing: .01em;
}
.verb h2.mid {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.95;
}
.verb p {
  max-width: 30em;
  color: var(--fg-2);
  font-size: clamp(16px, 1.35vw, 20px);
  margin: 0;
}
.verb .grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.verb.right .grid {
  grid-template-columns: .9fr 1.1fr;
}
.verb.right .grid .copy {
  order: 2;
}
.verb .copy {
  display: grid;
  gap: 24px;
}
.verb .stagepanel {
  padding: 0;
}
@media (max-width: 900px) {
  .verb .grid,
  .verb.right .grid {
    grid-template-columns: 1fr;
  }
  .verb.right .grid .copy {
    order: 0;
  }
}

/* numbers */
.figures {
  padding: 16vh var(--gutter);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}
.figures div {
  border-top: 1px solid var(--ink-600);
  padding-top: 22px;
}
.figures .n {
  font-family: var(--display);
  font-size: clamp(56px, 7vw, 112px);
  line-height: 1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.figures .n small {
  font-size: .4em;
  color: var(--fg-3);
  font-family: var(--ui);
}
.figures p {
  margin: 10px 0 0;
  color: var(--fg-2);
  font-size: 15px;
  max-width: 22em;
}
@media (max-width: 760px) {
  .figures {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* statement */
.statement {
  padding: 18vh var(--gutter);
  max-width: 1100px;
  margin: 0 auto;
}
.statement h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(38px, 6.4vw, 96px);
  line-height: 1;
  margin: 0;
  letter-spacing: .01em;
  text-wrap: balance;
}
.statement p {
  max-width: 36em;
  color: var(--fg-2);
  font-size: clamp(16px, 1.4vw, 21px);
  margin: 32px 0 0;
}
.statement.center {
  text-align: center;
}
.statement.center p {
  margin-inline: auto;
}

/* people / lists */
.people {
  padding: 10vh var(--gutter) 20vh;
  max-width: 1100px;
  margin: 0 auto;
}
.people h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 1;
  margin: 0 0 48px;
  letter-spacing: .01em;
}
.people ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.people li {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--ink-600);
  color: var(--fg-2);
  font-size: clamp(16px, 1.4vw, 21px);
}
.people li:last-child {
  border-bottom: 1px solid var(--ink-600);
}
.people .who {
  color: var(--fg-1);
  font-family: var(--display);
  font-size: 1.4em;
  letter-spacing: .01em;
}
.people .who small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-top: 4px;
}
.people .k {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: .06em;
}
@media (max-width: 760px) {
  .people li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* columns of short defs */
.cols {
  padding: 12vh var(--gutter) 18vh;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.cols.three {
  grid-template-columns: repeat(3, 1fr);
}
.cols h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(34px, 4vw, 64px);
  margin: 0 0 14px;
  line-height: 1;
  letter-spacing: .01em;
}
.cols h3 em {
  font-style: normal;
  color: var(--accent-text);
}
.cols p {
  margin: 0;
  color: var(--fg-2);
  font-size: 15px;
}
.cols > div {
  border-top: 1px solid var(--ink-600);
  padding-top: 22px;
}
.cols .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  .cols,
  .cols.three {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .cols,
  .cols.three {
    grid-template-columns: 1fr;
  }
}

/* full-bleed field (photograph or generated) */
.field {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: end start;
  overflow: hidden;
  isolation: isolate;
}
.field img,
.field canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.field img.light {
  display: none;
}
.field::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    var(--ground) 0%,
    var(--ground) 6%,
    rgba(7, 8, 11, 0.15) 32%,
    rgba(7, 8, 11, 0.1) 60%,
    var(--ground) 100%
  );
}
.field .cap {
  padding: 0 var(--gutter) 14vh;
  max-width: 900px;
}
.field .cap h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 10vw, 160px);
  line-height: 0.9;
  margin: 0;
  letter-spacing: .01em;
}
.field .cap p {
  color: var(--fg-2);
  font-size: clamp(16px, 1.4vw, 20px);
  max-width: 30em;
  margin: 24px 0 0;
}
.field .cap .k {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 20px;
}

/* ledger table (plain, wide) */
.ledger {
  padding: 6vh var(--gutter) 18vh;
  max-width: 1200px;
  margin: 0 auto;
}
.ledger table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.ledger th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--ink-500);
}
.ledger td {
  padding: 18px 12px 18px 0;
  border-bottom: 1px solid var(--ink-700);
  color: var(--fg-2);
  vertical-align: top;
}
.ledger td:first-child {
  color: var(--fg-1);
  font-family: var(--display);
  font-size: 1.3em;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ledger td .m {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-2);
}
.ledger .note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  margin-top: 18px;
  letter-spacing: .04em;
}

/* pricing plans */
.plans {
  padding: 6vh var(--gutter) 16vh;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.plan {
  border-top: 1px solid var(--ink-500);
  padding-top: 26px;
  display: grid;
  gap: 18px;
  align-content: start;
}
.plan .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.plan h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 5vw, 88px);
  line-height: 0.95;
  margin: 0;
  letter-spacing: .01em;
}
.plan h3 small {
  display: block;
  font-family: var(--ui);
  font-size: 17px;
  color: var(--fg-2);
  margin-top: 10px;
  letter-spacing: 0;
}
.plan ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  color: var(--fg-2);
  font-size: 15px;
}
.plan ul li {
  padding-left: 18px;
  position: relative;
}
.plan ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 1px;
  background: var(--fg-3);
}
.plan .btn {
  justify-self: start;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--ink-500);
  border-radius: 2px;
  color: var(--fg-1);
}
.plan .btn.v {
  background: var(--volt);
  color: var(--ink-900);
  border-color: var(--volt);
}
.plan .btn:hover {
  border-color: var(--fg-1);
}
@media (max-width: 900px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* close */
.close {
  min-height: 90vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16vh var(--gutter);
}
.close.short {
  min-height: 60vh;
}
.close h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 170px);
  line-height: 0.92;
  margin: 0;
  letter-spacing: .01em;
}
.close .cmd {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  margin-top: 44px;
  padding: 16px 22px;
  border: 1px solid var(--ink-500);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-1);
  background: rgba(15, 17, 22, 0.6);
  max-width: 100%;
  overflow-x: auto;
}
.close .cmd .d {
  color: var(--fg-3);
}
.close .cmd .v {
  color: var(--accent-text);
}
.close .after {
  margin-top: 22px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* marquee */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
  padding: 18px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}
.marquee span {
  display: inline-block;
  padding-right: 48px;
  animation: slide 40s linear infinite;
}
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee span {
    animation: none;
  }
}

footer {
  position: relative;
  z-index: 2;
  padding: 48px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  letter-spacing: .06em;
  border-top: 1px solid var(--ink-700);
}
footer nav {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
footer a:hover {
  color: var(--fg-1);
}
@media (max-width: 640px) {
  footer {
    grid-template-columns: 1fr;
  }
}

/* ---- light register (data-theme="light" on <html>; toggle in the nav) ---- */
[data-theme="light"] {
  --ground: #f4f3ee;
  --ink-950: #eceae3;
  --ink-900: #ffffff;
  --ink-850: #fbfaf7;
  --ink-800: #f1f0ea;
  --ink-700: #e6e4dc;
  --ink-600: #dcdad0;
  --ink-500: #c3c1b5;
  --fg-1: #16181d;
  --fg-2: #5c5f66;
  --fg-3: #8a8d94;
  --success: #1f9d5a;
  --warning: #b8780a;
  --peri: #5a5fd6;
  --accent-text: #8f931f;
  --shadow-panel: 0 1px 2px rgba(16, 17, 23, 0.06), 0 40px 80px -30px rgba(16, 17, 23, 0.25);
}
[data-theme="light"] .grain {
  opacity: 0.35;
  mix-blend-mode: multiply;
}
[data-theme="light"] .nav .cta {
  background: var(--fg-1);
  color: var(--ground);
}
[data-theme="light"] .nav .cta:hover {
  background: var(--volt);
  color: #16181d;
}
[data-theme="light"] ::selection {
  background: var(--volt);
  color: #16181d;
}
[data-theme="light"] .field img.dark {
  display: none;
}
[data-theme="light"] .field img.light {
  display: block;
}
[data-theme="light"] .field::after {
  background: linear-gradient(
    180deg,
    var(--ground) 0%,
    var(--ground) 6%,
    rgba(244, 243, 238, 0.1) 32%,
    rgba(244, 243, 238, 0.05) 60%,
    var(--ground) 100%
  );
}
[data-theme="light"] .panel::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.4), transparent 40%);
}
[data-theme="light"] .rows tr.take td {
  background: rgba(217, 221, 69, 0.18);
}
[data-theme="light"] .close .cmd {
  background: rgba(255, 255, 255, 0.7);
}
.nav .theme {
  background: none;
  border: 1px solid var(--ink-500);
  border-radius: 999px;
  color: var(--fg-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  padding: 6px 12px;
}
.nav .theme:hover {
  color: var(--fg-1);
  border-color: var(--fg-1);
}

/* layer tokens: width, depth, chips, bands */
:root {
  --maxw: 1680px;
  --gutter: clamp(20px, 4vw, 96px);
  --band: #0b0d12;
  --chip: rgba(217, 221, 69, 0.12);
  --chip-fg: var(--volt);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.7);
  --shadow-band: none;
}
[data-theme="light"] {
  --band: #eceae3;
  --chip: rgba(143, 147, 31, 0.14);
  --chip-fg: #6f7318;
  --shadow-card: 0 1px 2px rgba(16, 17, 23, 0.05), 0 12px 32px -14px rgba(16, 17, 23, 0.18);
  --shadow-band: none;
}
/* pure white register: white ground, white cards lifted by shadow, warm-grey bands */
[data-theme="white"] {
  --ground: #ffffff;
  --ink-950: #f4f4f6;
  --ink-900: #ffffff;
  --ink-850: #f8f8fa;
  --ink-800: #f1f1f4;
  --ink-700: #e9e9ee;
  --ink-600: #e4e4ea;
  --ink-500: #cfcfd8;
  --fg-1: #101116;
  --fg-2: #55586a;
  --fg-3: #8b8e9c;
  --success: #1f9d5a;
  --warning: #b8780a;
  --peri: #5a5fd6;
  --accent-text: #8a8e1c;
  --band: #f4f4f6;
  --chip: rgba(217, 221, 69, 0.28);
  --chip-fg: #6f7318;
  --shadow-panel: 0 1px 2px rgba(16, 17, 23, 0.06), 0 30px 60px -28px rgba(16, 17, 23, 0.25);
  --shadow-card: 0 1px 2px rgba(16, 17, 23, 0.04), 0 14px 36px -16px rgba(16, 17, 23, 0.16);
  --shadow-band: 0 1px 0 rgba(16, 17, 23, 0.03) inset;
}
[data-theme="white"] .grain {
  opacity: 0.22;
  mix-blend-mode: multiply;
}
[data-theme="white"] .nav .cta {
  background: var(--fg-1);
  color: #ffffff;
}
[data-theme="white"] .nav .cta:hover {
  background: var(--volt);
  color: #16181d;
}
[data-theme="white"] ::selection {
  background: var(--volt);
  color: #16181d;
}
[data-theme="white"] .field img.dark {
  display: none;
}
[data-theme="white"] .field img.light {
  display: block;
}
[data-theme="white"] .rows tr.take td {
  background: rgba(217, 221, 69, 0.2);
}
[data-theme="white"] .tbl tr.us td {
  background: rgba(217, 221, 69, 0.16);
}
[data-theme="white"] .panel::after {
  background: none;
}
[data-theme="white"] #atmo {
  opacity: 0.55;
}

/* sleds — "meet in the middle" layer on top of alt.css: the v3 site's density and organisation
   with the alt direction's ground, type and motion. Loaded after alt.css by the *2.html pages. */

/* hero: left-aligned, smaller, with three numbered claims */
.hero2 {
  min-height: 0;
  padding: 16vh var(--gutter) 6vh;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: end;
}
.hero2 h1 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.96;
  margin: 0;
  font-size: clamp(44px, 6vw, 92px);
  text-wrap: balance;
}
.hero2 .eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 22px;
}
.hero2 .eyebrow b {
  color: var(--accent-text);
  font-weight: 400;
}
.hero2 .lede {
  color: var(--fg-2);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
  max-width: 34em;
  margin: 22px 0 0;
}
.hero2 .ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.btn2 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: 1px solid var(--ink-500);
  border-radius: 2px;
  color: var(--fg-1);
  background: transparent;
  display: inline-block;
}
.btn2.v {
  background: var(--volt);
  color: #16181d;
  border-color: var(--volt);
}
.btn2:hover {
  border-color: var(--fg-1);
}
.hero2 .cmd {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 26px;
  padding: 13px 16px;
  border: 1px solid var(--ink-500);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-1);
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
  max-width: 100%;
  overflow-x: auto;
}
.hero2 .cmd .d {
  color: var(--fg-3);
}
.hero2 .after {
  margin-top: 12px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero2 .after b {
  color: var(--fg-1);
  font-weight: 400;
}
.claims {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--ink-600);
}
.claims div {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-600);
  color: var(--fg-2);
  font-size: 15px;
}
.claims div b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-text);
  letter-spacing: 0.01em;
}
.claims div strong {
  display: block;
  color: var(--fg-1);
  font-weight: 500;
  margin-bottom: 2px;
}
@media (max-width: 900px) {
  .hero2 {
    grid-template-columns: 1fr;
    padding-top: 14vh;
  }
}

/* section shell: title row + content, denser than .verb */
.sec {
  padding: 8vh var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}
.sec.tight {
  padding-block: 6vh;
}
.sec .head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-600);
  margin-bottom: 28px;
}
.sec h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 64px);
  line-height: 1;
  margin: 0;
  letter-spacing: 0.01em;
  text-wrap: balance;
  max-width: 18em;
}
.sec .intro {
  color: var(--fg-2);
  font-size: clamp(15px, 1.2vw, 18px);
  max-width: 46em;
  margin: 18px 0 0;
}
.sec .intro + .intro {
  margin-top: 12px;
}
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 32px;
}
.two.wideright {
  grid-template-columns: 0.8fr 1.2fr;
}
@media (max-width: 900px) {
  .two,
  .two.wideright {
    grid-template-columns: 1fr;
  }
}

/* inset tinted band (Apollo-style) */
.sec.tint {
  background: var(--band);
  border-radius: 18px;
  padding: 7vh clamp(20px, 3.5vw, 56px);
  margin-inline: auto;
  width: calc(100% - 2 * var(--gutter));
  box-shadow: var(--shadow-band);
}
.sec.tint + .sec.tint {
  margin-top: 4vh;
}

/* icon chips */
.ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--chip-fg);
  display: grid;
  place-items: center;
  flex: none;
}
.ic svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.claims div .ic {
  width: 36px;
  height: 36px;
}
.defs2 .ic,
.roles .ic,
.heads .ic {
  margin-bottom: 12px;
}

/* tabs (walkthrough) */
.tabs {
  margin-top: 32px;
}
.tabbar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ink-600);
  overflow-x: auto;
}
.tabbar button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 18px 14px 0;
  margin-right: 18px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}
.tabbar button[aria-selected="true"] {
  color: var(--fg-1);
  border-bottom-color: var(--volt);
}
.tabbar button .n {
  color: var(--accent-text);
  margin-right: 8px;
}
.tabbar button .bar {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--volt);
  opacity: 0.5;
}
.tabbar button[aria-selected="true"] .bar {
  animation: fill var(--every, 7s) linear forwards;
}
@keyframes fill {
  to {
    width: calc(100% - 18px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tabbar button .bar {
    display: none;
  }
}
.tabpanel {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  align-items: center;
  padding-top: 32px;
}
.tabpanel[hidden] {
  display: none;
}
.tabpanel h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  margin: 0 0 14px;
  letter-spacing: 0.01em;
}
.tabpanel p {
  color: var(--fg-2);
  margin: 0;
  font-size: 15.5px;
}
.tabpanel p + p {
  margin-top: 10px;
}
.tabpanel .panel {
  width: 100%;
}
@media (max-width: 900px) {
  .tabpanel {
    grid-template-columns: 1fr;
  }
}

/* four side-by-side windows: "where the work is" */
.wins {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.win {
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  box-shadow: var(--shadow-panel);
}
.win .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-600);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: 0.06em;
}
.win .bar .logo {
  width: 14px;
  height: 14px;
}
.win .body {
  padding: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
.win .body b {
  color: var(--fg-1);
  font-weight: 500;
}
.win .body .who {
  font-family: var(--display);
  font-size: 15px;
  color: var(--fg-1);
  letter-spacing: 0.02em;
  display: block;
  margin-bottom: 6px;
}
.win .body .m {
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--ink-800);
  margin-top: 8px;
}
.win .body .m.s {
  border-left: 2px solid var(--volt);
}
.win .body pre {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  white-space: pre-wrap;
  color: var(--fg-2);
}
@media (max-width: 1000px) {
  .wins {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .wins {
    grid-template-columns: 1fr;
  }
}

/* full-colour logo grid (always visible, no hover) */
.logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  background: var(--c, var(--fg-1));
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  flex: none;
}
img.logo {
  background: none;
  -webkit-mask: none;
  mask: none;
  object-fit: contain;
  border-radius: 6px;
}
.lgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.lcard {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  background: var(--ink-900);
  color: inherit;
}
a.lcard:hover {
  border-color: var(--ink-500);
}
.lcard .logo {
  width: 34px;
  height: 34px;
  margin-top: 2px;
}
.lcard .name {
  color: var(--fg-1);
  font-weight: 500;
  font-size: 15px;
}
.lcard .tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-left: 8px;
}
.lcard .tag.live {
  color: var(--success);
}
.lcard p {
  margin: 4px 0 0;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.45;
}
@media (max-width: 1000px) {
  .lgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .lgrid {
    grid-template-columns: 1fr;
  }
}

/* brand colours (Simple Icons brand hexes; near-black brands go paper on ink, ink on paper) */
.c-linear {
  --c: #5e6ad2;
}
.c-jira {
  --c: #0052cc;
}
.c-github {
  --c: var(--fg-1);
}
.c-gitlab {
  --c: #fc6d26;
}
.c-claude {
  --c: #d97757;
}
.c-claude-code {
  --c: #d97757;
}
.c-cowork {
  --c: #d97757;
}
.c-openai {
  --c: var(--fg-1);
}
.c-codex {
  --c: var(--fg-1);
}
.c-cursor {
  --c: var(--fg-1);
}
.c-copilot {
  --c: var(--fg-1);
}
.c-devin {
  --c: #1d9bf0;
}
.c-factory {
  --c: var(--fg-1);
}
.c-slack {
  --c: #e01e5a;
}
.c-openrouter {
  --c: #6467f2;
}
.c-bedrock {
  --c: #ff9900;
}
.c-litellm {
  --c: #6da7da;
}
.c-workos {
  --c: #6363f1;
}
.c-orca {
  --c: #35c9c1;
}
[data-theme="light"] .c-jira {
  --c: #0052cc;
}

/* four columns: roles */
.roles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 32px;
}
.roles div {
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  padding: 20px;
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
}
.roles h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.roles .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: block;
  margin-bottom: 12px;
}
.roles p {
  margin: 0;
  color: var(--fg-2);
  font-size: 14.5px;
}
.roles a {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
}
.roles a:hover {
  color: var(--fg-1);
}
@media (max-width: 900px) {
  .roles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .roles {
    grid-template-columns: 1fr;
  }
}

/* easy tables */
.tbl {
  margin-top: 28px;
  overflow-x: auto;
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
}
.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
.tbl th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-600);
  background: var(--ink-850);
  white-space: nowrap;
}
.tbl td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ink-700);
  color: var(--fg-2);
  vertical-align: top;
  line-height: 1.45;
}
.tbl tr:last-child td {
  border-bottom: 0;
}
.tbl td:first-child {
  color: var(--fg-1);
  font-weight: 500;
  white-space: nowrap;
}
.tbl td.m,
.tbl td .m {
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tbl tr.us td {
  background: rgba(217, 221, 69, 0.06);
}
.tbl tr.us td:first-child {
  color: var(--accent-text);
}
.tbl .note {
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
  border-top: 1px solid var(--ink-600);
}

/* say → get back list */
.say {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 32px;
}
.say div {
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  padding: 14px 16px;
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
}
.say .q {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg-1);
}
.say .q::before {
  content: "› ";
  color: var(--accent-text);
}
.say .a {
  color: var(--fg-2);
  font-size: 13.5px;
  margin-top: 6px;
}
@media (max-width: 760px) {
  .say {
    grid-template-columns: 1fr;
  }
}

/* stat row */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.stats div {
  border-top: 1px solid var(--ink-600);
  padding-top: 14px;
}
.stats .n {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  color: var(--fg-1);
  font-variant-numeric: tabular-nums;
}
.stats small {
  display: block;
  color: var(--fg-2);
  font-size: 13.5px;
  margin-top: 8px;
}
@media (max-width: 760px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* def grid (v3's .defs) */
.defs2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 28px;
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
}
.defs2 > div {
  padding: 18px 20px;
  border-left: 1px solid var(--ink-600);
  border-top: 1px solid var(--ink-600);
  margin-top: -1px;
}
.defs2 > div:first-child {
  border-left: 0;
}
.defs2 .t {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.01em;
  display: block;
}
.defs2 .d {
  margin: 6px 0 0;
  color: var(--fg-2);
  font-size: 14px;
}

/* four heads */
.heads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 28px;
}
.heads div {
  border: 1px solid var(--ink-600);
  border-radius: 12px;
  padding: 18px;
  background: var(--ink-900);
  box-shadow: var(--shadow-card);
}
.heads .logo {
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
}
.heads b {
  display: block;
  color: var(--fg-1);
  font-weight: 500;
}
.heads p {
  margin: 4px 0 0;
  color: var(--fg-2);
  font-size: 13.5px;
}
.heads code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-1);
}
@media (max-width: 900px) {
  .heads {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* compact close */
.close2 {
  padding: 10vh var(--gutter) 12vh;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  border-top: 1px solid var(--ink-700);
}
.close2 h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.95;
  margin: 0;
  letter-spacing: 0.01em;
}
.close2 .cmd {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--ink-500);
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--fg-1);
  background: rgba(15, 17, 22, 0.6);
  max-width: 100%;
  overflow-x: auto;
}
[data-theme="light"] .close2 .cmd {
  background: rgba(255, 255, 255, 0.7);
}
.close2 .cmd .d {
  color: var(--fg-3);
}
.close2 .after {
  margin-top: 14px;
  color: var(--fg-3);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 800px) {
  .close2 {
    grid-template-columns: 1fr;
  }
}

/* in this layer, code inline */
code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--fg-1);
}

/* wide screens: the hero sled panel runs the content width */
.stagepanel .panel {
  width: min(var(--maxw), 100%);
}

/* nav: the live site's wordmark and sans links */
.nav .mark {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.01em;
  text-transform: none;
  gap: 10px;
}
.nav .mark svg {
  width: 26px;
  height: 26px;
  border-radius: 6px;
}
.nav ul li > a:not(.cta) {
  font-family: var(--ui);
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-2);
}
.nav ul li > a:not(.cta):hover,
.nav ul li > a[aria-current="page"]:not(.cta) {
  color: var(--fg-1);
  border-color: var(--fg-1);
}

/* footer: the live site's four columns, the giant mark, the legal row */
footer.foot {
  display: block;
  padding: 64px 0 0;
  border-top: 1px solid var(--ink-700);
  font-family: var(--ui);
  letter-spacing: 0;
  overflow: hidden;
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(4, minmax(0, 1fr));
  gap: 40px;
  padding: 32px var(--gutter) 64px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.foot-brand svg {
  width: clamp(120px, 14vw, 200px);
  height: auto;
  color: var(--ink-500);
  display: block;
}
.foot .meta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.foot-brand .meta {
  display: block;
  margin-top: 28px;
}
.foot-col h4 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-1);
}
.foot-col a {
  display: block;
  color: var(--fg-2);
  font-size: 14px;
  padding: 5px 0;
  transition: color 140ms;
}
.foot-col a:hover {
  color: var(--fg-1);
}
.foot-mark {
  font-family: var(--display);
  font-size: 34vw;
  letter-spacing: 0.01em;
  line-height: 0.82;
  text-align: center;
  color: var(--ink-500);
  user-select: none;
  padding: 24px 0 0;
  white-space: nowrap;
}
.foot-legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter) 22px;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-700);
  max-width: var(--maxw);
  margin: 0 auto;
}
.foot-legal nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.foot-legal a:hover {
  color: var(--fg-1);
}
@media (max-width: 1024px) {
  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 520px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- site-only additions ---- */
.cur {
  color: var(--accent-text);
}
.term pre {
  margin: 0;
  font: inherit;
  white-space: pre;
}
.creed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: creed;
}
.creed li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-600);
  counter-increment: creed;
}
.creed li::before {
  content: counter(creed, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--accent-text);
  padding-top: 6px;
}
.creed li b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--fg-1);
}
.creed li p {
  margin: 8px 0 0;
  color: var(--fg-2);
  font-size: 15.5px;
  max-width: 48em;
}
.logo.c-github,
.logo.c-openai,
.logo.c-codex,
.logo.c-cursor,
.logo.c-copilot,
.logo.c-factory {
  --c: var(--fg-1);
}

/* ---- hero stage: one frame, five scenes on a loop ---- */
.stage .scenes {
  display: grid;
  min-height: 380px;
}
.stage .scene {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(14px) scale(0.995);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s
    cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
.stage .scene.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.stage .scene.off {
  opacity: 0;
  transform: translateY(-14px) scale(0.995);
}
.stage .stage-title {
  transition: opacity 0.3s;
}
.stage .stage-title.swap {
  opacity: 0;
}
.stage-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.stage-dots b {
  width: 18px;
  height: 3px;
  border-radius: 2px;
  background: var(--ink-500);
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.stage-dots b::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--volt);
}
.stage-dots b.on::after {
  animation: dotfill var(--every, 4.2s) linear forwards;
}
@keyframes dotfill {
  to {
    width: 100%;
  }
}
.stage .chat.two-col {
  padding: 26px 28px;
  gap: 12px;
  font-size: 15px;
  max-width: 900px;
}
.stage .term.big {
  padding: 26px 28px;
  font-size: 14px;
  line-height: 1.75;
}
@media (max-width: 760px) {
  .stage .scenes {
    min-height: 300px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .stage .scene {
    transition: none;
  }
  .stage-dots b.on::after {
    animation: none;
    width: 100%;
  }
}

/* ticker under the hero */
.ticker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  justify-content: center;
  padding: 0 var(--gutter) 6vh;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.ticker b {
  color: var(--fg-1);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* window loops: steps appear one by one */
.win [data-loop] .step,
.win.loop .step {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.win .step.on {
  opacity: 1;
  transform: none;
}
.win .step.s.on b {
  color: var(--accent-text);
}

/* Jake's meter */
.meter {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-2);
  margin-top: 10px;
}
.mbar {
  height: 6px;
  border-radius: 3px;
  background: var(--ink-700);
  overflow: hidden;
}
.mbar i {
  display: block;
  height: 100%;
  background: var(--success);
  transition: width 0.1s linear, background 0.3s;
}
.meter.amber .mbar i {
  background: var(--warning);
}
.meter.red .mbar i {
  background: #ff5c47;
}
.meter.amber .mpct {
  color: var(--warning);
}
.meter.red .mpct {
  color: #ff5c47;
}
.win .body pre .mline {
  transition: color 0.3s;
}
.win .body pre .mline.warn {
  color: var(--warning);
}

/* grid children may shrink below their content width; scrolling happens inside .term/.tablewrap */
.two > *,
.tabpanel > *,
.hero2 > *,
.wins > *,
.stage .scene {
  min-width: 0;
}

/* phone nav: Install stays in the bar; the menu is a full-width sheet with big targets */
@media (max-width: 860px) {
  .nav {
    padding: 14px var(--gutter);
    gap: 12px;
  }
  .nav .mark {
    font-size: 20px;
  }
  .nav .mark svg {
    width: 24px;
    height: 24px;
  }
  .nav .burger {
    order: 3;
    padding: 8px 10px;
    border: 1px solid var(--ink-500);
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.1em;
  }
  .nav ul {
    order: 2;
    gap: 10px;
    margin-left: auto;
  }
  .nav ul li:not(:last-child) {
    display: none;
  }
  .nav ul li:last-child .cta {
    padding: 8px 12px;
  }
  .nav ul.open {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--ground);
    padding: 12px var(--gutter) 32px;
    gap: 0;
    border-top: 1px solid var(--ink-700);
    overflow-y: auto;
    z-index: 30;
  }
  .nav ul.open li {
    display: block;
  }
  .nav ul.open li > a:not(.cta) {
    display: block;
    font-family: var(--display);
    font-size: 30px;
    letter-spacing: 0.01em;
    line-height: 1.1;
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-700);
    color: var(--fg-1);
  }
  .nav ul.open li:nth-last-child(2) {
    padding-top: 18px;
  }
  .nav ul.open li:last-child {
    padding-top: 12px;
  }
  .nav ul.open li:last-child .cta {
    display: block;
    text-align: center;
    padding: 14px;
    font-size: 13px;
  }
  .nav ul.open .theme {
    padding: 10px 16px;
  }
}
/* phone type and spacing */
@media (max-width: 640px) {
  .hero2 {
    padding-top: 110px;
  }
  .hero2 h1 {
    font-size: clamp(40px, 12vw, 56px);
  }
  .sec h2 {
    font-size: clamp(28px, 8vw, 40px);
  }
  .sec.tint {
    width: calc(100% - 2 * var(--gutter));
    padding: 6vh 18px;
    border-radius: 14px;
  }
  .stage .scenes {
    min-height: 260px;
  }
  .ticker {
    gap: 8px 18px;
    font-size: 11px;
  }
  .foot-mark {
    font-size: 30vw;
  }
  .close2 h2 {
    font-size: clamp(36px, 11vw, 56px);
  }
}