@font-face {
  font-family: Fraunces;
  src: url('/assets/fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --ink: #004752;
  --muted: #426d74;
  --soft: #47a39e;
  --mist: #b0dbd9;
  --ocean: #0091a8;
  --cyan: #41fff6;
  --line: #d5ecea;
  --card: #ffffff;
  --shadow: #b0dbd9;
  --focus: #0091a8;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  /* Sine in-out: for ambient loops that must never look like they stop. */
  --ease-sine: cubic-bezier(0.37, 0, 0.63, 1);
  --display: Fraunces, 'Iowan Old Style', 'Palatino Linotype', Palatino, serif;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  timeline-scope: --hero, --agents, --shift;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 430;
  letter-spacing: -0.011em;
}

strong {
  font-weight: 660;
  font-style: normal;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  z-index: 30;
  padding: 0.4rem 0.7rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-150%);
}

.skip:focus {
  transform: none;
}

.page {
  display: flex;
  flex-direction: column;
  width: min(72rem, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 4rem 0 1.75rem;
}

.mast {
  position: sticky;
  top: 1.15rem;
  z-index: 20;
  width: min(72rem, calc(100% - 2.5rem));
  margin: 1.15rem auto -5rem;
  padding: 0.55rem 0.95rem;
  border: 1px solid rgb(255 255 255 / 0.58);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  box-shadow: 0 10px 28px rgb(0 71 82 / 0.07);
  backdrop-filter: blur(36px) saturate(1.3);
  -webkit-backdrop-filter: blur(36px) saturate(1.3);
}

@supports (animation-timeline: view()) {
  .mast {
    animation-name: mast-fade-back;
    animation-timing-function: ease-out;
    animation-fill-mode: none;
    animation-timeline: --agents;
    animation-range: exit 0% exit 32%;
  }

  .mast nav a::before {
    animation-name: mast-nav-pill-on-paper;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --hero;
    animation-range: exit 88% exit 100%;
  }
}

@keyframes mast-fade-back {
  0% {
    opacity: 0;
    visibility: hidden;
  }

  100% {
    opacity: 1;
    visibility: visible;
  }
}

@keyframes mast-nav-pill-on-paper {
  0% {
    background-color: rgb(255 255 255 / 0.36);
  }

  100% {
    background-color: rgb(0 71 82 / 0.18);
  }
}

.mast-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem 1rem;
  width: 100%;
}

.mast-end {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 0.55rem;
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0.12rem;
  border: 1px solid rgb(0 71 82 / 0.16);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.42);
}

.lang-switch button {
  appearance: none;
  min-width: 2.05rem;
  height: 1.85rem;
  padding: 0 0.42rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 620;
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
}

.lang-switch button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--paper);
}

.lang-switch button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 112vh;
  min-height: 112dvh;
  margin-top: 0;
  padding: 10.25rem 1.5rem 2.75rem;
  overflow: hidden;
  view-timeline-name: --hero;
  view-timeline-axis: block;
  view-timeline-inset: 5.5rem 0;
}

.hero-media {
  position: absolute;
  inset: -1.5rem;
  z-index: -1;
}

.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  filter: blur(4px) saturate(1.03);
  transform: scale(1.04);
}

.hero-inner {
  width: min(56rem, 100%);
  margin: 7vh auto 0;
  margin-top: 7dvh;
}

.hero h1 {
  margin: 0 auto;
  max-width: 16ch;
  color: #ffffff;
  text-align: center;
  font-size: clamp(3.1rem, 8.8vw, 5.95rem);
  text-shadow: 0 1px 18px rgb(0 40 48 / 0.28);
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  margin-top: auto;
  margin-bottom: 15vh;
  margin-bottom: 15dvh;
  text-align: center;
}

.hero-cta h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 530;
  letter-spacing: -0.02em;
  text-transform: none;
}

.waitlist-note {
  margin: 0;
  max-width: 28ch;
  color: rgb(255 255 255 / 0.84);
  font-size: 0.92rem;
  line-height: 1.4;
}

#waitlist-thanks {
  scroll-margin-top: 5.5rem;
}

.waitlist-thanks {
  display: none;
  margin: 0;
  max-width: 32ch;
  color: rgb(255 255 255 / 0.92);
  font-size: 0.92rem;
  line-height: 1.4;
}

#waitlist-thanks:target .waitlist-form,
#waitlist-thanks:target .waitlist-note {
  display: none;
}

#waitlist-thanks:target .waitlist-thanks {
  display: block;
}

.brand {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-family: var(--sans);
  font-size: 1.45rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
  text-decoration: none;
}

.brand:hover {
  text-decoration: none;
}

.mast nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.92rem;
}

.mast nav a {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 5.25rem;
  height: 2.25rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  text-decoration: none;
  background: transparent;
}

.mast nav a span {
  position: relative;
  z-index: 1;
}

.mast nav a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background-color: rgb(0 71 82 / 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

.mast nav a:hover::before,
.mast nav a:focus-visible::before {
  opacity: 1;
}

.mast-cta {
  --mast-cta-max: 11.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  max-width: 0;
  margin-left: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.92rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.mast-cta.is-in {
  animation:
    mast-cta-shape 0.6s var(--ease-sine) both,
    mast-cta-fade 0.3s var(--ease-sine) both;
}

.mast-cta:hover,
.mast-cta:focus-visible {
  color: var(--paper);
  text-decoration: none;
  background: #003840;
}

@keyframes mast-cta-shape {
  0% {
    max-width: 0;
    margin-left: 0;
    padding: 0;
    pointer-events: none;
  }

  40% {
    max-width: 11.5rem;
    margin-left: 0.85rem;
    padding: 0 0.85rem;
    pointer-events: none;
  }

  100% {
    max-width: var(--mast-cta-max);
    margin-left: 0.85rem;
    padding: 0 0.85rem;
    pointer-events: auto;
  }
}

@keyframes mast-cta-fade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

html[data-lang='nb'] .mast-cta {
  --mast-cta-max: 12.5rem;
}

h1 {
  margin: 0 0 1.35rem;
  max-width: 16ch;
  font-family: var(--display);
  font-size: clamp(2.6rem, 7vw, 4.65rem);
  line-height: 0.96;
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 30,
    'WONK' 1;
  letter-spacing: -0.03em;
}

.lede {
  margin: 0 0 3rem;
  max-width: 42ch;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.45;
  font-weight: 430;
}

h2 {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-size: clamp(2.35rem, 5vw, 3.5rem);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 30,
    'WONK' 1;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
  color: var(--ink);
}

p {
  margin: 0 0 1.15rem;
  max-width: 62ch;
}

.stack {
  display: grid;
  gap: 4.25rem;
  width: min(46rem, 100%);
  margin-inline: auto;
}

.stack-company {
  gap: 7.5rem;
}

.shift {
  margin: 2rem 0 2.5rem;
}

.shift-lede {
  margin: 0 0 1.35rem;
  max-width: 58ch;
  color: var(--muted);
}

.shift-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  align-items: stretch;
}

.shift-card {
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  align-items: center;
  margin: 0;
  padding: 0.35rem 0.2rem 0.85rem;
  background: var(--paper);
}

.shift-graph {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  justify-self: center;
  align-self: center;
}

.shift-graph-pyramid {
  position: relative;
  width: 118%;
  margin-inline: -9%;
  aspect-ratio: 1;
  overflow: visible;
  view-timeline-name: --shift;
  view-timeline-axis: block;
}

.shift-graph-drop {
  width: 84%;
  overflow: visible;
}

.shift-slice {
  position: absolute;
  inset: 0;
  transform-origin: 50% 78%;
}

.shift-slice svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.shift-slice-base {
  z-index: 1;
}
.shift-slice-mid {
  z-index: 2;
}
.shift-slice-top {
  z-index: 3;
}

.shift-slice path {
  stroke: none;
  shape-rendering: geometricPrecision;
}

@supports (animation-timeline: view()) {
  .shift-slice-top,
  .shift-slice-mid {
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --shift;
    animation-range: cover 22% cover 78%;
  }

  .shift-slice-top {
    animation-name: shift-slice-top;
  }
  .shift-slice-mid {
    animation-name: shift-slice-mid;
  }
}

.shift-drop {
  transform-box: fill-box;
  transform-origin: center;
  animation: shift-drop-float 5.5s var(--ease-in-out) infinite;
  filter: none;
}

.shift-drop-shape {
  animation: shift-drop-morph 8s linear infinite;
}

.shift-drop foreignObject {
  display: none;
}

.shift-drop-3d {
  position: relative;
  width: 240px;
  height: 240px;
  overflow: hidden;
  background: transparent;
}

.shift-drop-iris-wrap {
  position: absolute;
  inset: 0;
  width: 240px;
  height: 240px;
  opacity: 0.28;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(circle at 42% 38%, transparent 34%, #000 52%, #000 72%, transparent 90%);
  mask-image: radial-gradient(circle at 42% 38%, transparent 34%, #000 52%, #000 72%, transparent 90%);
}

.shift-drop-iris {
  transform-origin: 120px 120px;
  transform-box: fill-box;
  animation: shift-drop-iris 11s linear infinite;
}

.shift-drop-iris-wrap .shift-drop-iris {
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    #41fff6,
    #004752,
    #47a39e,
    #e7ef7a,
    #41fff6,
    #8ec5e8,
    #c9a3d4,
    #004752,
    #41fff6
  );
  filter: blur(18px);
}

.shift-drop-tint-a,
.shift-drop-tint-b,
.shift-drop-tint-c,
.shift-drop-spec,
.shift-drop-glint,
.shift-drop-light,
.shift-drop-light-drift,
.shift-drop-light-surface,
.shift-drop-core {
  transform-box: fill-box;
  transform-origin: center;
}

.shift-drop-tint-a {
  animation: shift-drop-tint-a 8s var(--ease-in-out) infinite;
}
.shift-drop-tint-b {
  animation: shift-drop-tint-b 9.5s var(--ease-in-out) infinite;
}
.shift-drop-tint-c {
  animation: shift-drop-tint-c 7.5s var(--ease-in-out) infinite;
}
/* The highlight is one light source. Sheen and core ride the same drift:
   two alternating sine sweeps with different periods (x on the outer
   group, y on the inner) trace a slow, continuous curve, so the light
   never parks on a pose and lurches to the next. */
.shift-drop-light {
  animation: shift-drop-light-x 9s var(--ease-sine) infinite alternate;
}
.shift-drop-light-drift {
  /* Offset so the two sweeps never reach their turning points together:
     the light is already moving on load and never fully stops. */
  animation: shift-drop-light-y 7s var(--ease-sine) -3.5s infinite alternate;
}
/* Inside the drift, the light is glued to the surface: this runs on the
   same 8s linear clock as shift-drop-morph, and each keyframe is derived
   from the outline right above the highlight in that morph keyframe
   (tangent angle, radius of curvature, position). Where the drop
   flattens the reflection stretches along the tangent and slides with
   the surface; where it bulges it tightens. */
.shift-drop-light-surface {
  animation: shift-drop-light-surface 8s linear infinite;
}
/* Both ellipses lie along the surface tangent at the morph's rest pose. */
.shift-drop-spec,
.shift-drop-glint {
  transform: rotate(-45deg);
}
.shift-drop-core {
  animation: shift-drop-core 10s var(--ease-in-out) infinite;
}

.shift-card figcaption {
  align-self: end;
  margin: 0.55rem 0 0;
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
}

@keyframes shift-slice-top {
  0%,
  38% {
    transform: translateY(0);
  }
  54% {
    transform: translateY(5%);
  }
  72%,
  100% {
    transform: translateY(10%);
  }
}

@keyframes shift-slice-mid {
  0%,
  52% {
    transform: translateY(0);
  }
  72%,
  100% {
    transform: translateY(5%);
  }
}

@keyframes shift-drop-morph {
  0%,
  100% {
    d: path('M120 30C175 38 214 80 206 128C198 178 150 214 108 208C58 200 28 154 40 108C52 62 70 22 120 30Z');
  }
  16.67% {
    d: path('M124 35C172 33 216 83 208 131C200 182 146 216 102 204C55 191 26 151 38 105C50 59 77 37 124 35Z');
  }
  33.33% {
    d: path('M128 40C168 28 218 86 210 134C202 186 142 218 96 200C52 182 24 148 36 102C48 56 84 52 128 40Z');
  }
  50% {
    d: path('M120 38C164 38 213 78 205 127C197 179 155 217 107 206C59 195 23 158 34 110C45 63 74 38 120 38Z');
  }
  66.67% {
    d: path('M112 36C160 48 208 70 200 120C192 172 168 216 118 212C66 208 22 168 32 118C42 70 64 24 112 36Z');
  }
  83.33% {
    d: path('M116 33C168 43 211 75 203 124C195 175 159 215 113 210C62 204 25 161 36 113C47 66 67 23 116 33Z');
  }
}

@keyframes shift-drop-float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(5px) scale(1.03);
  }
}

@keyframes shift-drop-iris {
  to {
    transform: rotate(1turn);
  }
}

@keyframes shift-drop-tint-a {
  0%,
  100% {
    d: path('M118 54C156 50 186 88 180 128C174 166 138 188 104 176C70 164 52 128 60 92C68 58 86 58 118 54Z');
    transform: translate(0, 0);
  }
  40% {
    d: path('M132 48C172 36 198 90 186 132C174 174 128 196 90 178C54 160 46 116 62 82C78 48 98 60 132 48Z');
    transform: translate(5px, -6px);
  }
  70% {
    d: path('M104 60C144 44 176 86 172 128C168 170 132 194 96 180C62 166 44 128 52 94C60 62 72 74 104 60Z');
    transform: translate(-4px, 5px);
  }
}

@keyframes shift-drop-tint-b {
  0%,
  100% {
    d: path('M92 118C120 96 162 108 172 142C182 174 154 198 118 196C82 194 54 168 56 138C58 110 70 136 92 118Z');
    transform: translate(0, 0);
  }
  45% {
    d: path('M78 128C112 100 164 118 176 154C188 190 148 208 108 198C68 188 42 160 48 132C54 106 50 152 78 128Z');
    transform: translate(-6px, 4px);
  }
  75% {
    d: path('M108 108C140 92 176 120 174 154C172 188 138 204 104 192C70 180 58 148 70 124C82 102 82 122 108 108Z');
    transform: translate(5px, -3px);
  }
}

@keyframes shift-drop-tint-c {
  0%,
  100% {
    d: path('M148 108C176 96 198 128 190 158C182 188 148 198 122 184C96 170 90 140 104 122C118 104 126 118 148 108Z');
    transform: translate(0, 0);
  }
  35% {
    d: path('M160 96C192 88 214 128 200 162C186 196 146 204 118 186C90 168 88 132 108 112C128 92 134 104 160 96Z');
    transform: translate(4px, -5px);
  }
  68% {
    d: path('M136 118C164 102 192 136 186 166C180 196 144 204 118 188C92 172 86 146 100 128C114 110 114 132 136 118Z');
    transform: translate(-3px, 6px);
  }
}

@keyframes shift-drop-light-x {
  from {
    transform: translateX(-5px);
  }
  to {
    transform: translateX(7px);
  }
}

@keyframes shift-drop-light-y {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(6px);
  }
}

/* rotate(tangent) scale(along, across) rotate(-tangent0): the stretch is
   applied along the surface tangent, and the rest pose is the identity. */
@keyframes shift-drop-light-surface {
  0%,
  100% {
    transform: translate(0px, 0px) rotate(-45.1deg) scale(1, 1) rotate(45.1deg);
  }
  16.67% {
    transform: translate(2.1px, 3.1px) rotate(-33.9deg) scale(1.088, 1.052) rotate(45.1deg);
  }
  33.33% {
    transform: translate(4.3px, 6.4px) rotate(-22.9deg) scale(1.25, 1.15) rotate(45.1deg);
  }
  50% {
    transform: translate(2.1px, 3.2px) rotate(-31.1deg) scale(1.095, 1.056) rotate(45.1deg);
  }
  66.67% {
    transform: translate(-0.4px, -0.6px) rotate(-36.8deg) scale(0.928, 0.956) rotate(45.1deg);
  }
  83.33% {
    transform: translate(-0.2px, -0.4px) rotate(-41.1deg) scale(0.964, 0.978) rotate(45.1deg);
  }
}

@keyframes shift-drop-core {
  0%,
  100% {
    transform: translate(0, 0) scale(1, 1);
  }
  50% {
    transform: translate(-4px, 3px) scale(1.06, 0.92);
  }
}

#challenge,
#product,
#team,
#content,
#shift {
  scroll-margin-top: 5.5rem;
}

#agents {
  scroll-margin-top: 0;
}

.agents-stage {
  --agents-deep: #051d2e;
  position: relative;
  z-index: 25;
  isolation: isolate;
  width: 100vw;
  margin: 2.5rem 0 3.5rem;
  margin-inline: calc(50% - 50vw);
  background: var(--agents-deep);
  color: #eef6f7;
  view-timeline-name: --agents;
  view-timeline-axis: block;
}

.agents-frame {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, auto);
  column-gap: clamp(1.25rem, 3vw, 3rem);
  align-items: stretch;
  height: auto;
  width: min(94rem, calc(100% - 2.5rem));
  margin-inline: auto;
  padding: 3rem 0 3.75rem;
}

.agents-title {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 5;
  margin: 0;
  padding-left: clamp(1.25rem, 3.5vw, 2.5rem);
  text-align: left;
  font-family: var(--display);
  font-size: clamp(2.35rem, 5vw, 3.5rem);
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 30,
    'WONK' 1;
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: none;
  color: #f4fbfb;
}

/* --- Left rail: all Step labels stay visible; only the current body expands --- */

.agents-rail {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.35rem;
  width: min(19rem, 34%);
  overflow: auto;
  padding-left: clamp(1.25rem, 3.5vw, 2.5rem);
}

.agents-step {
  color: #7d9ea4;
  transition: color 480ms var(--ease-out);
}

.agents-step-hit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.agents-step-hit:hover .agents-step-label,
.agents-step-hit:focus-visible .agents-step-label {
  color: #d8e8ea;
}

.agents-step-hit:focus-visible {
  outline: 1px solid rgb(238 246 246 / 0.45);
  outline-offset: 0.2rem;
}

[data-step='1'] .agents-step-1,
[data-step='2'] .agents-step-2,
[data-step='3'] .agents-step-3,
[data-step='4'] .agents-step-4,
[data-step='5'] .agents-step-5 {
  color: #c5d6d8;
}

.agents-step-label {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}

.agents-step-copy {
  display: block;
  max-height: 0;
  margin: 0;
  max-width: 24ch;
  overflow: hidden;
  opacity: 0;
  font-size: 1.35rem;
  line-height: 1.35;
  color: #eef6f6;
  transition:
    max-height 700ms var(--ease-out),
    opacity 480ms var(--ease-out),
    margin 480ms var(--ease-out);
}

[data-step='1'] .agents-step-1 .agents-step-copy,
[data-step='2'] .agents-step-2 .agents-step-copy,
[data-step='3'] .agents-step-3 .agents-step-copy,
[data-step='4'] .agents-step-4 .agents-step-copy,
[data-step='5'] .agents-step-5 .agents-step-copy {
  max-height: 14rem;
  margin-top: 0.35rem;
  opacity: 1;
}

/* --- Visual column --- */

.agents-visual {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 0;
}

/* Canvas: no border, no background. Taller than the org-chart box. */
.agents-canvas {
  position: relative;
  width: 100%;
  flex: none;
  aspect-ratio: 64 / 55.5;
  max-height: 55.5rem;
  height: auto;
  min-height: 0;
  margin-top: 0.5rem;
}

/* The org chart is laid out in a fixed design box, scaled to fit via
   --org-scale (set by JS) and centered vertically in the canvas. */
.org-chart {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64rem;
  height: 39.5rem;
  transform: translate(-50%, -50%) scale(var(--org-scale, 1));
  transform-origin: center center;
  z-index: 3;
}

/* --- Agent cards: exact match of AgentNode on the customer page --- */

.agent-card {
  position: relative;
  display: flex;
  width: 9rem;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  border-radius: 0.65rem;
  border: 2px solid rgb(230 231 239 / 0.6);
  background: #ffffff;
  padding: 0.5rem 0.65rem;
  text-align: center;
  color: #18181b;
  font-family: var(--sans);
  z-index: 2;
}

.agent-icon {
  display: flex;
  width: 2.4rem;
  height: 2.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  border: 1px solid rgb(230 231 239 / 0.6);
  background: #fafafc;
}

.agent-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* Tailwind 500-series text colors, as on the customer page */
.agent-icon-teal {
  color: #14b8a6;
}
.agent-icon-cyan {
  color: #06b6d4;
}
.agent-icon-indigo {
  color: #6366f1;
}
.agent-icon-violet {
  color: #8b5cf6;
}
.agent-icon-amber {
  color: #f59e0b;
}
.agent-icon-orange {
  color: #f97316;
}
.agent-icon-rose {
  color: #f43f5e;
}
.agent-icon-sky {
  color: #0ea5e9;
}

.agent-name {
  margin-top: 0.15rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: #18181b;
}

.agent-role {
  font-size: 0.75rem;
  line-height: 1.3;
  color: #71717a;
}

.agent-status-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.125rem;
}

.status-dot {
  position: relative;
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #d4d4d8;
  flex-shrink: 0;
}

.status-dot-ping {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgb(16 185 129 / 0.6);
  opacity: 0;
}

.status-label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  color: #71717a;
}

/* Agent states */
[data-agent-state='active'] .status-dot {
  background: #10b981;
}
[data-agent-state='active'] .status-dot-ping {
  animation: agent-pulse 1.8s ease-out infinite;
}
[data-agent-state='active'] .status-label {
  color: #059669;
}

[data-agent-state='done'] .status-dot {
  background: #10b981;
}
[data-agent-state='done'] .status-label {
  color: #059669;
}
[data-agent-state='done'] {
  border-color: #10b981;
  box-shadow: 0 0 0 2px #10b981;
}

/* Matches sidebarAgentPulse in the customer app */
@keyframes agent-pulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(2.4);
  }
}

/* Think spinner: two-arrow icon in the top right corner of each card */
.think-spinner {
  display: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.05rem;
  height: 1.05rem;
  color: #a1a1aa;
  z-index: 1;
}

.think-spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}

[data-agent-state='active'] .think-spinner {
  display: block;
  animation: spin-think 1.2s linear infinite;
}

@keyframes spin-think {
  to {
    transform: rotate(360deg);
  }
}

/* --- Card positions within the compact design box --- */

.agent-card-ceo {
  position: absolute;
  top: 8.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.coding-team {
  position: absolute;
  top: 22.3rem;
  left: 4.5rem;
  display: grid;
  grid-template-columns: 9rem 9rem;
  grid-template-rows: auto auto;
  column-gap: 2.15rem;
  row-gap: 2.6rem;
}

.agent-card-developer {
  grid-column: 1;
  grid-row: 1;
}
.agent-card-reviewer {
  grid-column: 2;
  grid-row: 1;
}
.agent-card-designer {
  grid-column: 1;
  grid-row: 2;
}

.sales-team {
  position: absolute;
  top: 22.3rem;
  right: 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.99rem;
}

.sales-associates {
  display: flex;
  gap: 2.15rem;
}

/* Chat panel starts centered, then shrinks up over the AgentOS title. */
.chat-view {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(36rem, calc(100% - 2rem));
  height: 22rem;
  overflow: hidden;
  border-radius: 1.25rem;
  background: #ffffff;
  box-shadow: 0 8px 32px rgb(0 0 0 / 0.28);
  z-index: 6;
  opacity: 0;
  visibility: hidden;
}
.chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.7rem;
  min-height: 0;
  padding: 0.9rem 1rem 0.35rem;
  overflow: hidden;
}

.chat-bubble {
  max-width: 92%;
  opacity: 0;
}

.chat-bubble-user {
  align-self: flex-end;
  transform: translateY(-7px);
}

.chat-bubble-user .chat-bubble-text {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: 1rem 1rem 0.3rem 1rem;
  background: #0d1a26;
  color: #f4fbfb;
  font-size: 0.95rem;
  line-height: 1.4;
  font-family: var(--sans);
}

.chat-bubble-ceo {
  display: none;
  align-self: flex-start;
}

.chat-working {
  display: none;
  align-self: flex-start;
  align-items: center;
  gap: 0.55rem;
  color: #4b6268;
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.25;
}

.chat-working-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.chat-working-copy > span {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
}

.chat-working-copy strong {
  color: #0d7377;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chat-working-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.18rem;
}

.chat-working-dots i {
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 999px;
  background: currentColor;
  animation: chat-working-dot 1.1s ease-in-out infinite;
}

.chat-working-dots i:nth-child(2) {
  animation-delay: 0.14s;
}
.chat-working-dots i:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes chat-working-dot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-0.2rem);
  }
}

.chat-bubble-who {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.3rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0d7377;
  font-family: var(--sans);
}

.chat-bubble-avatar {
  display: flex;
  width: 1.15rem;
  height: 1.15rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #e6f4f4;
  color: #14b8a6;
}

.chat-bubble-avatar svg {
  width: 0.7rem;
  height: 0.7rem;
}

.chat-bubble-ceo .chat-bubble-text {
  display: block;
  padding: 0.65rem 1rem;
  border-radius: 0.3rem 1rem 1rem 1rem;
  background: #eef6f7;
  color: #18181b;
  font-size: 0.95rem;
  line-height: 1.4;
  font-family: var(--sans);
}

.chat-tool-link {
  display: block;
  width: fit-content;
  margin-top: 0.45rem;
  color: #1677c8;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  cursor: default;
  pointer-events: none;
  opacity: 0;
}

/* Composer sits at the bottom of the chat panel */
.composer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.2rem;
  border-top: 1px solid rgb(230 231 239 / 0.8);
  background: #ffffff;
  color: #18181b;
  font-size: 1rem;
  line-height: 1.45;
  font-family: var(--sans);
  flex-shrink: 0;
}

.composer-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.composer-text:empty::before {
  content: 'Give your company a goal';
  color: #9ca3af;
}

html[data-lang='nb'] .composer-text:empty::before {
  content: 'Gi selskapet ditt et mål';
}

.composer-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  margin-left: auto;
  border-radius: 999px;
  background: #0d1a26;
  color: #ffffff;
}

.composer-send svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* --- Envelope chips: messages traveling along the org-chart lines --- */
.mail-chip {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.65rem;
  border: 1px solid rgb(230 231 239 / 0.8);
  background: #ffffff;
  color: #0d7377;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.16);
}

.mail-chip svg {
  width: 1.2rem;
  height: 1.2rem;
}

.message-preview {
  position: absolute;
  max-width: 15rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.3rem 0.85rem 0.85rem 0.85rem;
  background: #ffffff;
  color: #18181b;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 550;
  line-height: 1.35;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 12px rgb(0 0 0 / 0.2);
}

.message-preview::before {
  position: absolute;
  top: 0.55rem;
  right: 100%;
  width: 0;
  height: 0;
  border-top: 0.32rem solid transparent;
  border-right: 0.4rem solid #ffffff;
  border-bottom: 0.32rem solid transparent;
  content: '';
}

/* --- Connectors SVG overlay --- */
.connectors-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.connectors-svg path {
  stroke: rgb(230 231 239 / 0.6);
  stroke-width: 1.5;
  stroke-linecap: round;
  fill: none;
}

/* --- Company brain: deformed ring of neurons (mesh generated in JS) --- */
.company-brain {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36rem;
  height: 36rem;
  margin-top: -18rem;
  margin-left: -18rem;
  opacity: 0;
  z-index: 3;
}

.brain-graph,
.brain-sphere {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.brain-sphere {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

/* Obsidian-style graph: faint links, muted leaves, brighter hubs. */
#brain-mesh line.mesh-edge {
  stroke: #7fb0ba;
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 0;
}

#brain-mesh circle.mesh-node {
  fill: #8db8c3;
  opacity: 0;
}

#brain-mesh circle.mesh-node.is-hub {
  fill: #b9e2ea;
}

#brain-mesh circle.mesh-node.is-knowledge {
  fill: #41fff6;
  filter: drop-shadow(0 0 3px rgb(65 255 246 / 0.6));
}

.waitlist-form {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 18rem);
  margin: 0 auto;
}

.field-group,
.field {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.waitlist-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.input-group {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.28rem 0.28rem 0.28rem 0.9rem;
  border: 1px solid rgb(255 255 255 / 0.92);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.9);
  box-shadow: none;
  transition:
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

.input-group:focus-within {
  border-color: #ffffff;
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.16);
}

#waitlist,
#waitlist-email {
  scroll-margin-top: 0;
}

.hero:target,
#waitlist-email:target {
  outline: none;
}

/* The glow is driven only by clicking a waitlist link (is-highlighted). It is
   deliberately not tied to :target so a refresh on #waitlist never shows it. */
.input-group.is-highlighted {
  border-color: #ffffff;
  box-shadow:
    0 0 18px 6px rgb(48 210 208 / 0.42),
    0 0 44px 18px rgb(48 210 208 / 0.2),
    0 10px 28px rgb(0 40 48 / 0.22);
}

.input-group-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2rem;
  margin: 0;
  padding: 0.25rem 0.35rem 0.25rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
}

.input-group-input::placeholder {
  color: rgb(66 109 116 / 0.55);
  opacity: 1;
}

.input-group-input:focus {
  outline: none;
}

.input-group-addon[data-align='inline-end'] {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.input-group-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2rem;
  min-height: 2rem;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.input-group-button:hover {
  background: #003840;
}

.input-group-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* (orb keyframes removed — replaced by agent card demo) */

main {
  flex: 1 0 auto;
}

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1.35rem;
}

.person {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.25rem 0.5rem;
  color: inherit;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
}

.person:hover {
  color: inherit;
}

.person:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 6px;
  border-radius: 4px;
}

.person img {
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  object-fit: cover;
  background: var(--mist);
  filter: grayscale(1);
}

.proof {
  text-align: center;
}

.proof h2 {
  margin-top: -7px;
}

.proof-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem 9rem;
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.proof-logos a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.proof-logos a:hover {
  text-decoration: none;
}

.proof-logos a:hover img,
.proof-logos a:focus-visible img {
  opacity: 1;
  filter: grayscale(1) brightness(0) invert(19%) sepia(28%) saturate(2200%) hue-rotate(151deg) brightness(0.92);
}

.proof-logos img {
  display: block;
  height: 3.25rem;
  width: auto;
  max-width: 16rem;
  object-fit: contain;
  object-position: center;
  filter: grayscale(1);
  opacity: 0.68;
  transition:
    opacity 0.3s var(--ease-out),
    filter 0.3s var(--ease-out);
}

.proof-logos img[alt='6AM'] {
  height: 3.5rem;
}

.proof-logos img[alt='Innovasjon Norge'] {
  height: 4.25rem;
}

.person-linkedin {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0.85rem 0 0.35rem;
  color: var(--muted);
}

.person-linkedin svg {
  width: 1.35rem;
  height: 1.35rem;
}

.person h3 {
  margin: 0;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 400;
  font-optical-sizing: auto;
  font-variation-settings:
    'opsz' 144,
    'SOFT' 30,
    'WONK' 1;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.person-role {
  margin: 0.35rem 0 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.person-meta {
  margin: 0.4rem 0 0;
  max-width: 22ch;
  font-size: 0.92rem;
  line-height: 1.35;
  color: var(--muted);
}

footer {
  margin-top: auto;
  padding: 8.5rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}

.legal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  gap: 0.7rem;
  margin: 0;
}

.legal img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Below a 32" wide display, sit the demo slightly right of center. */
@media (min-width: 721px) and (max-width: 2560px) {
  .org-chart,
  .chat-view {
    left: 55%;
  }
}

.mast-toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.mast-toggle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.mast-toggle-bars {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 17px;
}

.mast-toggle-bars span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition:
    transform 0.28s var(--ease-out),
    opacity 0.28s var(--ease-out);
}

.mast.is-open .mast-toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mast.is-open .mast-toggle-bars span:nth-child(2) {
  opacity: 0;
}

.mast.is-open .mast-toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 721px) {
  .chat-log-mobile {
    display: none !important;
  }

  .mast-toggle {
    display: none;
  }
}

@media (max-width: 720px) {
  html {
    overflow-x: clip;
    background: #317b91;
  }

  /* Safari fills the status-bar strip with the page background; page pixels
     cannot paint there in portrait browsing. #317b91 is the sampled average
     of the hero photo's visible top edge, so the strip blends into the image
     instead of reading as a band. */
  body {
    overflow-x: clip;
    min-height: 100%;
    min-height: 100dvh;
    background: #317b91;
  }

  .page {
    width: 100%;
    padding: 3rem 1rem 1.75rem;
    background: var(--paper);
  }

  .agents-stage {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-inline: 0;
    margin-block: 0;
    padding-top: max(1.5rem, env(safe-area-inset-top, 0px));
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
    /* The large viewport, not dvh: iOS Safari can leave dvh at the small
       viewport, which showed a toolbar-height white band under the stage. */
    min-height: 100vh;
    min-height: 100lvh;
    box-sizing: border-box;
  }

  .agents-frame {
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(94rem, calc(100% - 1.25rem));
    min-height: 0;
    height: 100%;
    padding: 1.35rem 0 1.15rem;
    row-gap: 1.7rem;
  }

  .agents-title {
    grid-column: 1;
    grid-row: 1;
    padding-left: 0.25rem;
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }

  .agents-visual {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }

  .agents-rail {
    position: relative;
    inset: auto;
    grid-column: 1;
    grid-row: 3;
    width: auto;
    height: auto;
    padding-left: 0.25rem;
  }

  .agents-canvas {
    aspect-ratio: auto;
    flex: 1 1 auto;
    height: 100%;
    max-height: none;
    min-height: 0;
    margin-top: 0;
  }

  .agent-card-ceo,
  .coding-team,
  .sales-team,
  .connectors-svg,
  .mail-chip,
  .message-preview {
    display: none !important;
  }

  .org-chart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }

  .chat-view {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    min-height: 12rem;
    justify-self: stretch;
    align-self: stretch;
  }

  .chat-thread {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .chat-bubble-ceo .chat-bubble-text,
  .chat-bubble-user .chat-bubble-text {
    font-size: 0.88rem;
  }

  .company-brain {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: 100%;
    max-width: 22rem;
    max-height: 22rem;
    margin: 0;
    flex: none;
  }

  .agents-step-copy {
    max-width: 36ch;
    font-size: 1.05rem;
  }

  .mast {
    top: max(0.55rem, env(safe-area-inset-top, 0px));
    width: min(72rem, calc(100% - 1rem));
    margin: 0 auto -4.25rem;
    padding: 0.4rem 0.65rem;
    pointer-events: auto;
  }

  .mast-inner {
    flex-wrap: nowrap;
    gap: 0.45rem 0.55rem;
  }

  .mast-toggle {
    display: inline-flex;
    position: relative;
    z-index: 3;
  }

  .mast.is-open {
    background: var(--paper);
  }

  .mast-end {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    right: 0;
    z-index: 2;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem 0.7rem;
    border: 1px solid rgb(0 71 82 / 0.12);
    border-radius: 1.25rem;
    background: var(--paper);
    box-shadow: 0 10px 28px rgb(0 71 82 / 0.07);
    backdrop-filter: blur(36px) saturate(1.3);
    -webkit-backdrop-filter: blur(36px) saturate(1.3);
  }

  .mast.is-open .mast-end {
    display: flex;
  }

  .shift-graph-pyramid {
    width: 100%;
    margin-inline: 0;
  }

  .brand {
    font-size: 1.05rem;
  }

  .mast nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    width: 100%;
  }

  .mast nav a {
    min-width: 0;
    width: 100%;
    height: 2.35rem;
    justify-content: flex-start;
    padding: 0 0.7rem;
    font-size: 0.95rem;
  }

  .lang-switch {
    align-self: flex-start;
    margin-left: 0.2rem;
  }

  .lang-switch button {
    min-width: 1.75rem;
    height: 1.6rem;
    padding: 0 0.28rem;
    font-size: 0.68rem;
  }

  .mast-cta,
  .mast.is-open .mast-cta {
    height: 2.35rem;
    max-width: none;
    width: 100%;
    margin-left: 0;
    padding: 0 0.7rem;
    font-size: 0.95rem;
    opacity: 1;
    pointer-events: auto;
  }

  .hero {
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100svh;
    min-height: 100dvh;
    margin-top: 0;
    padding: calc(6.5rem + env(safe-area-inset-top, 0px)) 1rem max(1.75rem, env(safe-area-inset-bottom, 0px));
  }

  .hero-media {
    inset: 0;
  }

  /* The iOS status-bar strip above the page can only show a solid color
     (the body background, #317b91). Fading the photo's top edge into that
     same color removes the visible seam between the strip and the image. */
  .hero-media::after {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4.5rem;
    background: linear-gradient(to bottom, #317b91, rgb(49 123 145 / 0));
  }

  .hero-inner {
    margin-top: 1.75rem;
  }

  .hero h1 {
    font-size: clamp(1.85rem, 8.6vw, 2.55rem);
    max-width: 14ch;
  }

  .hero-cta {
    margin-bottom: 2.25rem;
  }

  .waitlist-form {
    width: min(100%, 20.5rem);
  }

  h1 {
    font-size: clamp(2rem, 9vw, 3.1rem);
  }

  h2 {
    font-size: clamp(1.85rem, 7vw, 2.6rem);
  }

  .shift-pair {
    grid-template-columns: 1fr;
  }

  .shift-card {
    overflow: visible;
  }

  #team {
    text-align: center;
  }

  .people {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .person {
    max-width: 20rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }

  .mast-cta {
    max-width: var(--mast-cta-max);
    margin-left: 0.85rem;
    padding: 0 0.85rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .agents-step {
    transition: none !important;
  }
}