.floating-lines-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.floating-lines-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* design tokens for the dark-first rebuild, lime and green come from the site's brand variables */
.td-section {
  --td-bg: #021a16;
  --td-bg-2: #01332a;
  --td-green: #21a300;
  --td-lime: #c2ff26;
  --td-lime-soft: rgba(194, 255, 38, 0.12);
  --td-text: #e6efe9;
  --td-muted: #9fb5ad;
  --td-faint: rgba(230, 239, 233, 0.5);
  --td-line: rgba(255, 255, 255, 0.08);
  --td-line-strong: rgba(255, 255, 255, 0.14);
  --td-radius: 20px;
  --td-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* --td-section-bg goes transparent when a page level grainient sits behind everything */
  background: var(--td-section-bg, var(--td-bg));
  color: var(--td-text);
  font-family: inherit;
  /* every section pads both edges, so two in a row stack into double this, kept modest so the stacked gap doesn't read as dead space */
  padding: clamp(48px, 5.5vw, 80px) 0;
  -webkit-font-smoothing: antialiased;
}

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

.td-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* absolute layer for animated backgrounds, sits under the container */
.td-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* faint lime grid that fades out from the center through a radial mask */
.td-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(194, 255, 38, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(194, 255, 38, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}

/* top and bottom fades so neighboring sections blend into each other */
.td-fade-edges::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--td-fade-bg, var(--td-bg)) 0%, transparent 18%, transparent 82%, var(--td-fade-bg, var(--td-bg)) 100%);
}

/* section header */
.td-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 760px;
}

.td-header--center {
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

.td-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border: 1px solid rgba(194, 255, 38, 0.25);
  border-radius: 999px;
  background: rgba(194, 255, 38, 0.06);
  color: var(--td-lime);
  font-family: var(--td-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.td-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--td-lime);
  box-shadow: 0 0 12px var(--td-lime);
}

.td-h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 1.25rem + 3vw, 3.5rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.td-header--center .td-h2 {
  justify-content: center;
}

.td-lead {
  margin: 0;
  color: var(--td-muted);
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
}

.td-mono-label {
  font-family: var(--td-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--td-lime);
}

/* buttons */
.td-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.td-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.td-btn:hover {
  transform: translateY(-1px);
}

.td-btn--primary {
  background: var(--td-lime);
  color: #021a16;
  box-shadow:
    0 0 0 1px rgba(194, 255, 38, 0.5),
    0 10px 40px -10px rgba(194, 255, 38, 0.7);
}

.td-btn--primary:hover {
  background: #d4ff63;
  box-shadow:
    0 0 0 1px rgba(194, 255, 38, 0.7),
    0 14px 48px -10px rgba(194, 255, 38, 0.9);
}

.td-btn--ghost {
  border: 1px solid var(--td-line-strong);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
}

.td-btn--ghost:hover {
  border-color: rgba(194, 255, 38, 0.4);
  background: rgba(194, 255, 38, 0.06);
}

.td-btn svg {
  transition: transform 0.2s ease;
}

.td-btn:hover svg {
  transform: translateX(3px);
}

/* glass card with a cursor-following spotlight, position comes from --mx and --my set by useSpotlight */
.td-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--td-line);
  border-radius: var(--td-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}

.td-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(194, 255, 38, 0.12), transparent 45%);
  transition: opacity 0.3s ease;
}

.td-card:hover {
  border-color: rgba(194, 255, 38, 0.3);
}

.td-card:hover::before {
  opacity: 1;
}

.td-card > * {
  position: relative;
  z-index: 1;
}

.td-icon-tile {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(194, 255, 38, 0.25);
  border-radius: 12px;
  background: rgba(194, 255, 38, 0.07);
  color: var(--td-lime);
}

/* rotating conic beam around a frame, done with a spinning pseudo element since @property is ignored in shadow roots */
.td-beam-frame {
  position: relative;
  padding: 1px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--td-line-strong);
}

.td-beam-frame::before {
  content: '';
  position: absolute;
  inset: -60%;
  background: conic-gradient(from 0deg, transparent 0deg 290deg, rgba(194, 255, 38, 0.15) 310deg, var(--td-lime) 350deg, transparent 360deg);
  animation: td-spin 7s linear infinite;
}

.td-beam-frame__inner {
  position: relative;
  border-radius: 17px;
  overflow: hidden;
  background: var(--td-bg);
}

.td-beam-frame__inner img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes td-spin {
  to {
    transform: rotate(1turn);
  }
}

/* scroll reveal toggled by useReveal */
/* reveals start just before content reaches the screen, a shorter fade and stagger delays at 40% of what components pass keep the order but stop content from waiting on screen */
.td-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--td-delay, 0ms) * 0.4);
}

.td-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .td-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .td-beam-frame::before {
    animation: none;
  }
}

/* large screens step the layout up instead of leaving a small column in the middle of a wide monitor,
   text measure stays capped by the header and lead max-widths, backgrounds were already full bleed */
@media (min-width: 1680px) {
  .td-container {
    max-width: 1360px;
  }

  .td-header {
    max-width: 840px;
  }

  .td-h2 {
    font-size: 3.9rem;
  }

  .td-lead {
    font-size: 1.35rem;
  }
}

@media (min-width: 1920px) {
  .td-container {
    max-width: 1440px;
  }

  .td-h2 {
    font-size: 4.2rem;
  }
}

/* agent session card for the page hero, same palette and frame as the other cards with the transcript on the right */
.as {
  --as-lime: #c2ff26;
  --as-amber: #f2a33a;
  --as-text: #e6efe9;
  --as-muted: #9fb5ad;
  --as-line: rgba(255, 255, 255, 0.1);
  --as-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 36px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--as-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(33, 163, 0, 0.09), transparent 60%),
    #0a1411;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
  color: var(--as-text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14px;
  text-align: left;
}

:where(.as) :where(p, dl, dd) {
  margin: 0;
  padding: 0;
}

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

/* summary column */
.as__live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--as-muted);
  font-family: var(--as-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.as__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--as-lime);
  box-shadow: 0 0 8px rgba(194, 255, 38, 0.7);
}

.as__title {
  margin-top: 18px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.as__title em {
  color: var(--as-lime);
  font-style: normal;
}

.as__lead {
  margin-top: 16px;
  color: var(--as-muted);
  font-family: var(--as-mono);
  font-size: 13px;
  line-height: 1.65;
}

.as__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 22px;
  border-top: 1px solid var(--as-line);
}

.as__stats div {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--as-line);
}

.as__stats div:nth-child(odd) {
  padding-right: 14px;
  border-right: 1px solid var(--as-line);
}

.as__stats div:nth-child(even) {
  padding-left: 14px;
}

.as__stats dt {
  color: var(--as-muted);
  font-family: var(--as-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.as__stats dd {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
}

.as__stats .is-accent dd {
  color: var(--as-lime);
}

.as__client {
  margin-top: 16px;
  color: var(--as-muted);
  font-family: var(--as-mono);
  font-size: 11px;
}

/* the static build card drops the summary column and gets more air between blocks since it sits beside copy */
.as--single {
  grid-template-columns: minmax(0, 1fr);
  padding: 28px;
}

.as--single .as__log {
  gap: 20px;
}

.as--single .as__reply {
  line-height: 1.75;
}

.as :not(pre) > code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--as-text);
  font-family: var(--as-mono);
  font-size: 0.95em;
}

/* transcript, in the played version every piece is in the layout from the start and fades in when its beat is reached */
.as__log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.as--play :is(.as__prompt, .as__reply, .as__panel, .as__row, .as__tags) {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.as--play .as__log .is-in {
  opacity: 1;
  transform: none;
}

.as__prompt {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-left: 2px solid var(--as-lime);
  border-radius: 0 10px 10px 0;
  background: rgba(194, 255, 38, 0.05);
  font-family: var(--as-mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.as__chevron {
  color: var(--as-lime);
}

.as__ghost {
  color: transparent;
}

.as__caret {
  display: inline-block;
  width: 7px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: var(--as-lime);
}

.as__reply {
  position: relative;
  padding-left: 22px;
  color: var(--as-muted);
  font-family: var(--as-mono);
  font-size: 13px;
  line-height: 1.65;
}

.as__reply::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--as-lime);
}

.as__hl {
  color: var(--as-lime);
}

.as__panel {
  margin-left: 22px;
  overflow: hidden;
  border: 1px solid var(--as-line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-family: var(--as-mono);
  font-size: 12.5px;
}

.as__panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--as-line);
  color: var(--as-muted);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.as__kv div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--as-line);
}

.as__kv div:first-child {
  border-top: 0;
}

.as__kv dt {
  color: var(--as-muted);
}

.as__kv dd {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as__ok {
  color: var(--as-lime);
}

.as__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.6fr) 88px;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-top: 1px solid var(--as-line);
}

.as__grid > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.as__grid--head {
  border-top: 0;
  color: var(--as-muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.as__shape {
  color: var(--as-muted);
}

.as__row.is-hub {
  background: rgba(194, 255, 38, 0.05);
}

.as__row.is-hub .as__entity {
  color: var(--as-lime);
}

.as__bronze {
  justify-self: start;
  padding: 1px 7px;
  border: 1px solid var(--as-line);
  border-radius: 4px;
  color: var(--as-muted);
  font-size: 11px;
}

.as__bronze.is-append {
  border-color: rgba(242, 163, 58, 0.6);
  color: var(--as-amber);
}

.as__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-left: 22px;
  font-family: var(--as-mono);
  font-size: 11px;
}

.as__tags span {
  padding: 3px 8px;
  border: 1px solid var(--as-line);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
}

.as__tags .as__tags-label {
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  color: var(--as-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.as__tags .is-warn {
  border-color: rgba(242, 163, 58, 0.6);
  color: var(--as-amber);
}

/* generated code, scrolls sideways inside its panel rather than widening the card */
.as__code {
  margin: 0;
  padding: 14px;
  overflow-x: auto;
  color: var(--as-text);
  font-family: var(--as-mono);
  font-size: 12px;
  line-height: 1.65;
}

.as__tok-k {
  color: var(--as-lime);
}

.as__tok-t {
  color: #8fd3b6;
}

.as__tok-f {
  font-weight: 600;
}

.as__tok-s {
  color: #b8d4a8;
}

.as__layers div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-top: 1px solid var(--as-line);
}

.as__layers div:first-child {
  border-top: 0;
}

.as__layers span:first-child {
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.as__layers span:last-child {
  color: var(--as-muted);
  font-size: 11px;
  text-align: right;
}

.as__layers .is-live span:first-child {
  border-left-color: var(--as-lime);
}

.as__layers .is-live span:last-child {
  color: var(--as-lime);
}

@media (prefers-reduced-motion: reduce) {
  .as__prompt,
  .as__reply,
  .as__panel,
  .as__row,
  .as__tags {
    transition: none;
  }
}

/* narrower screens put the summary above the transcript */
@media (max-width: 900px) {
  .as {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* phones drop the pk and shape columns so entity names keep their room */
@media (max-width: 640px) {
  .as {
    padding: 16px;
    border-radius: 16px;
  }

  .as__title {
    font-size: 26px;
  }

  .as__prompt {
    padding: 10px 12px;
    font-size: 12.5px;
  }

  .as__reply {
    font-size: 12px;
  }

  .as__panel,
  .as__tags {
    margin-left: 0;
  }

  .as__kv div {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .as__grid {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .as__pk,
  .as__shape {
    display: none;
  }
}

/* lifecycle story cards, all three are agent transcripts (.as) so the story reads as one conversation about the same request */
.ds :where(ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* table rows in the schema scan and the duplication check */
.ds__tables > li {
  padding: 10px 14px;
  border-top: 1px solid var(--as-line);
}

.ds__tables > li:first-child {
  border-top: 0;
}

.ds__tables > li.is-match {
  background: rgba(194, 255, 38, 0.05);
}

.ds__table {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--as-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.is-match .ds__name {
  color: var(--as-text);
}

.ds__count {
  color: var(--as-muted);
  font-size: 11px;
  white-space: nowrap;
}

.ds__match {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(194, 255, 38, 0.14);
  color: var(--as-lime);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* a few real column names so it reads as a scan of the table, the pii tag in amber */
.ds__cols {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ds__cols li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--as-line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--as-text);
  font-size: 11.5px;
}

.ds__cols li span {
  color: var(--as-muted);
  font-size: 10px;
}

.ds__cols li.is-pii span {
  color: var(--as-amber);
}

/* duplication check status, a badge per table and a one line detail under it */
.ds__badge {
  padding: 2px 8px;
  border: 1px solid var(--as-line);
  border-radius: 999px;
  color: var(--as-muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ds__badge.is-reuse {
  border-color: transparent;
  background: rgba(194, 255, 38, 0.14);
  color: var(--as-lime);
}

.ds__detail {
  display: block;
  margin-top: 4px;
  color: var(--as-muted);
  font-size: 11px;
}

/* the agent offers an approve button under its last message, the person clicks it */
.ds__button {
  align-self: flex-start;
  padding: 8px 18px;
  border-radius: 9px;
  background: var(--as-lime);
  color: #021a16;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 0 22px rgba(194, 255, 38, 0.3);
}

/* stage 1 is just the request and the scan, the card is see-through so the section shows behind it and the panel sits flush under the prompt */
.ds--glass {
  background: rgba(10, 20, 17, 0.45);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.ds--glass .as__panel {
  margin-left: 0;
  background: rgba(255, 255, 255, 0.025);
}

/* stage 3 build plan, one row per medallion layer with its functions, the tables it produced and whether it's been checked */
.ds__plan li {
  padding: 10px 14px;
  border-top: 1px solid var(--as-line);
}

.ds__plan li:first-child {
  border-top: 0;
}

.ds__plan-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ds__layer {
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.25);
  color: var(--as-text);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.is-done .ds__layer {
  border-left-color: var(--as-lime);
}

.is-building .ds__layer {
  border-left-color: var(--as-amber);
}

.ds__fns {
  flex: 1;
  color: var(--as-muted);
  font-size: 11px;
}

.ds__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.is-done .ds__state {
  color: var(--as-lime);
}

.is-building .ds__state {
  color: var(--as-amber);
}

.ds__plan .ds__detail {
  padding-left: 12px;
}

/* the layer still being built gets a soft amber pulse */
.ds__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--as-amber);
  animation: ds-pulse 1.4s ease-in-out infinite;
}

@keyframes ds-pulse {
  50% {
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ds__pulse {
    animation: none;
  }
}

/* stage 4 diff, a few customer rows in v1 and v2, unchanged rows are dimmed and the changed ones carry an amber edge and value */
.ds__diff {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ds__diff th {
  padding: 8px 14px;
  color: var(--as-muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-align: right;
  text-transform: uppercase;
}

.ds__diff td {
  padding: 9px 14px;
  border-top: 1px solid var(--as-line);
  color: var(--as-muted);
  text-align: right;
}

.ds__diff :is(th, td):first-child {
  text-align: left;
}

.ds__diff tr.is-changed td {
  background: rgba(242, 163, 58, 0.06);
  color: var(--as-text);
}

.ds__diff tr.is-changed td:first-child {
  box-shadow: inset 2px 0 0 var(--as-amber);
}

.ds__diff tr.is-changed td:last-child {
  color: var(--as-amber);
}

.td-lifecycle {
  background:
    radial-gradient(ellipse 70% 40% at 50% 35%, rgba(1, 51, 42, 0.9), transparent 70%),
    var(--td-section-bg, var(--td-bg));
}

.td-lifecycle__lines {
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 55%, transparent 90%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 25%, #000 55%, transparent 90%);
}

.td-lifecycle__track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--td-steps), 1fr);
  gap: 20px;
  margin-top: clamp(56px, 7vw, 88px);
}

/* horizontal rail through the node centers, the pulse is a lime gradient sliding across it */
.td-lifecycle__line {
  position: absolute;
  top: 22px;
  left: calc(100% / var(--td-steps) / 2);
  right: calc(100% / var(--td-steps) / 2);
  height: 1px;
  overflow: hidden;
  background: linear-gradient(to right, rgba(194, 255, 38, 0.15), rgba(194, 255, 38, 0.35), rgba(194, 255, 38, 0.15));
}

.td-lifecycle__pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 22%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--td-lime), transparent);
  box-shadow: 0 0 12px var(--td-lime);
  animation: td-pulse 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes td-pulse {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(460%);
  }
}

.td-lifecycle__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* numbered node glows in sequence, timed against the pulse with --td-i */
.td-lifecycle__node {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(194, 255, 38, 0.4);
  border-radius: 12px;
  background: #062a22;
  color: var(--td-lime);
  font-family: var(--td-mono);
  font-size: 13px;
  font-weight: 500;
  animation: td-node 3.6s ease-in-out infinite;
  animation-delay: calc(var(--td-i) * 0.8s);
}

@keyframes td-node {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(194, 255, 38, 0);
  }
  12% {
    box-shadow: 0 0 0 6px rgba(194, 255, 38, 0.12), 0 0 24px rgba(194, 255, 38, 0.5);
  }
  30% {
    box-shadow: 0 0 0 0 rgba(194, 255, 38, 0);
  }
}

.td-lifecycle__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 28px 24px;
  background: linear-gradient(180deg, rgba(1, 51, 42, 0.55), rgba(2, 26, 22, 0.4));
  backdrop-filter: blur(8px);
}

.td-lifecycle__card .td-mono-label {
  margin-top: 8px;
}

.td-lifecycle__title {
  margin: 0;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.td-lifecycle__body {
  margin: 0;
  color: var(--td-muted);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 1023px) {
  .td-lifecycle__track {
    grid-template-columns: 1fr 1fr;
  }
  .td-lifecycle__line {
    display: none;
  }
}

@media (max-width: 640px) {
  .td-lifecycle__track {
    grid-template-columns: 1fr;
  }
  .td-lifecycle__step {
    align-items: flex-start;
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-lifecycle__pulse,
  .td-lifecycle__node {
    animation: none;
  }
}

/* sticky needs no scroll container between it and the viewport, overflow hidden on .td-section makes one, clip trims the same overflow without it */
.td-section.td-story {
  overflow: visible;
  overflow: clip;
}

/* the header is inside the pin on desktop, this copy only shows on phones */
.td-story__head {
  display: none;
}

.td-story__track {
  position: relative;
}

/* header, text and card all live in the pin, which is only as tall as its content, it sticks under the nav (or centered on tall screens, set from js) so they stay locked together and only cross-fade between stages */
.td-story__pin {
  position: sticky;
  top: var(--td-pin-top, 88px);
}

/* the scrolling the pin holds for, 60vh per stage, the pin lets go as soon as this runs out so the next section follows straight after */
.td-story__spacer {
  height: calc(var(--td-stages, 4) * 60vh);
}

.td-story__stage {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 6vw, 96px);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.td-story__ticks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 28px;
}

/* the bars are buttons with a taller hit area than the 3px line they draw */
.td-story__ticks button {
  position: relative;
  width: 32px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.td-story__ticks button::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.td-story__ticks button:hover::before {
  background: rgba(255, 255, 255, 0.3);
}

.td-story__ticks .is-done::before {
  background: rgba(194, 255, 38, 0.4);
}

.td-story__ticks .is-active::before {
  background: var(--td-lime);
  box-shadow: 0 0 10px rgba(194, 255, 38, 0.5);
}

.td-story__ticks button:focus-visible {
  outline: 2px solid var(--td-lime);
  outline-offset: 2px;
  border-radius: 4px;
}

.td-story__count {
  margin-left: 10px;
  color: var(--td-faint);
  font-family: var(--td-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* every stage's text and every card sit in one shared grid cell, only the active ones show */
.td-story__texts,
.td-story__frames {
  display: grid;
}

.td-story__text,
.td-story__frame {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    visibility 0s linear 0.4s;
}

/* text and cards both keep the same top edge under the header, so the gap below the title never changes between stages */
.td-story__text,
.td-story__frame {
  align-self: start;
}

.td-story__text.is-active,
.td-story__frame.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.td-story__num {
  color: var(--td-lime);
  font-family: var(--td-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.td-story__title {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.td-story__body {
  max-width: 520px;
  margin: 16px 0 0;
  color: var(--td-muted);
  font-size: 16px;
  line-height: 1.65;
}

/* phone list, no pin */
.td-story__list {
  display: none;
}

.td-story__list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.td-story__item {
  padding: 28px 0;
}

.td-story__inline {
  margin-top: 24px;
}

@media (max-width: 960px) {
  .td-story__head {
    display: block;
  }

  .td-story__track {
    display: none;
  }

  .td-story__list {
    display: block;
    margin-top: clamp(16px, 4vw, 32px);
  }
}

/* laptop height screens tighten the pinned header so the tallest stage still fits under it */
@media (min-width: 961px) and (max-height: 860px) {
  .td-story__pin .td-h2 {
    font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.4rem);
  }

  .td-story__stage {
    margin-top: 36px;
  }
}

/* short desktop screens trim the type so the pinned stage still fits */
@media (min-width: 961px) and (max-height: 760px) {
  .td-story__body {
    font-size: 15px;
    line-height: 1.55;
  }

  .td-story__ticks {
    margin-bottom: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .td-story__text,
  .td-story__frame {
    transition: none;
  }
}

/* the story's agent cards read as a chat, the person's messages are bubbles on the right and the agent's replies are bubbles on the left, both capped well short of full width so the two sides sit offset like imessage
   panels and the approve bar are the agent's output, so they sit left and lose the reply indent, scoped to the story so the agent page keeps its transcript look */
.td-story :is(.td-story__frame, .td-story__inline) .as__prompt {
  align-self: flex-end;
  max-width: 72%;
  padding: 10px 14px;
  border: 1px solid rgba(194, 255, 38, 0.32);
  border-left: 1px solid rgba(194, 255, 38, 0.32);
  border-radius: 16px 16px 4px 16px;
  background: rgba(194, 255, 38, 0.12);
  color: var(--as-text);
}

.td-story :is(.td-story__frame, .td-story__inline) .as__chevron {
  display: none;
}

.td-story :is(.td-story__frame, .td-story__inline) .as__reply {
  align-self: flex-start;
  max-width: 75%;
  padding: 10px 14px;
  border: 1px solid var(--as-line);
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--as-text);
}

.td-story :is(.td-story__frame, .td-story__inline) .as__reply::before {
  display: none;
}

/* agent panels stop short of the right edge so the left and right sides stay offset like a messaging app */
.td-story :is(.td-story__frame, .td-story__inline) .as__panel {
  align-self: flex-start;
  width: 88%;
  margin-left: 0;
}

/* phones have less width to give up, so the offset shrinks but stays */
@media (max-width: 640px) {
  .td-story :is(.td-story__frame, .td-story__inline) .as__prompt {
    max-width: 85%;
  }

  .td-story :is(.td-story__frame, .td-story__inline) .as__reply {
    max-width: 88%;
  }

  .td-story :is(.td-story__frame, .td-story__inline) .as__panel {
    width: 94%;
  }
}

/* large screens, a touch more size for the stage copy */
@media (min-width: 1680px) {
  .td-story__body {
    max-width: 580px;
    font-size: 17px;
  }
}