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

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

.logoloop {
  --logoloop-gap: 32px;
  --logoloop-logoHeight: 28px;
  --logoloop-pad: 0px;
  position: relative;
  overflow: hidden;
  overflow: clip;
  padding-top: var(--logoloop-pad);
  padding-bottom: var(--logoloop-pad);
  -webkit-tap-highlight-color: transparent;
}

.logoloop--vertical {
  display: inline-block;
  height: 100%;
  padding: 0 var(--logoloop-pad);
}

.logoloop[data-draggable] {
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}

.logoloop--vertical[data-draggable] {
  touch-action: pan-x pinch-zoom;
}

.logoloop[data-dragging],
.logoloop[data-dragging] * {
  cursor: grabbing;
}

.logoloop__track {
  position: relative;
  z-index: 0;
  display: flex;
  width: max-content;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

.logoloop--vertical .logoloop__track {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

.logoloop__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.logoloop--vertical .logoloop__list {
  flex-direction: column;
}

.logoloop__item {
  position: relative;
  flex: 0 0 auto;
  margin-right: var(--logoloop-gap);
  font-size: var(--logoloop-logoHeight);
  line-height: 1;
}

.logoloop--vertical .logoloop__item {
  margin-right: 0;
  margin-bottom: var(--logoloop-gap);
}

.logoloop[data-intro] .logoloop__item {
  opacity: 0;
}

.logoloop__content {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logoloop-logoHeight) * 0.3);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  transition:
    opacity 0.35s ease,
    filter 0.35s ease,
    color 0.35s ease;
}

.logoloop[data-labels='below'] .logoloop__content {
  flex-direction: column;
  gap: calc(var(--logoloop-logoHeight) * 0.22);
}

.logoloop__content:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.logoloop__node {
  display: inline-flex;
  align-items: center;
}

.logoloop__item img {
  display: block;
  width: auto;
  height: var(--logoloop-logoHeight);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  -webkit-user-drag: none;
  pointer-events: none;
}

.logoloop__node,
.logoloop__item img {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logoloop--scale-hover .logoloop__item:hover img,
.logoloop--scale-hover .logoloop__item:hover .logoloop__node {
  transform: scale(1.2);
}

.logoloop__label {
  font-size: max(12px, calc(var(--logoloop-logoHeight) * 0.5));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.logoloop[data-labels='below'] .logoloop__label {
  font-size: max(11px, calc(var(--logoloop-logoHeight) * 0.26));
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.72;
}

.logoloop__tip {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: calc(var(--logoloop-logoHeight) * 0.2);
  font-size: max(11px, calc(var(--logoloop-logoHeight) * 0.26));
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  translate: -50% 4px;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    translate 0.25s ease;
}

.logoloop--vertical .logoloop__tip {
  top: 50%;
  left: 100%;
  margin-top: 0;
  margin-left: calc(var(--logoloop-logoHeight) * 0.25);
  translate: 4px -50%;
}

.logoloop__item:hover .logoloop__tip,
.logoloop__item:focus-within .logoloop__tip,
.logoloop__item[data-active] .logoloop__tip {
  opacity: 0.8;
  translate: -50% 0;
}

.logoloop--vertical .logoloop__item:hover .logoloop__tip,
.logoloop--vertical .logoloop__item:focus-within .logoloop__tip,
.logoloop--vertical .logoloop__item[data-active] .logoloop__tip {
  translate: 0 -50%;
}

.logoloop[data-muted] .logoloop__content {
  filter: grayscale(var(--logoloop-gray, 1));
  opacity: var(--logoloop-dim, 0.5);
}

.logoloop[data-muted] .logoloop__item:hover .logoloop__content,
.logoloop[data-muted] .logoloop__item:focus-within .logoloop__content,
.logoloop[data-muted] .logoloop__item[data-active] .logoloop__content {
  filter: none;
  opacity: 1;
}

.logoloop__item[data-color]:hover .logoloop__content,
.logoloop__item[data-color]:focus-within .logoloop__content,
.logoloop__item[data-color][data-active] .logoloop__content {
  color: var(--logoloop-item-color);
}

.logoloop:not([data-muted]) .logoloop__item:not([data-color]) a.logoloop__content:hover {
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .logoloop__content,
  .logoloop__node,
  .logoloop__item img,
  .logoloop__tip {
    transition: none;
  }
}

/* hero execution graph, no backdrop so it floats on the grainient */
.eg {
  --eg-mono: var(--td-mono, 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace);
  --eg-lime: #c2ff26;
  --eg-amber: #f2a33a;
  position: relative;
  width: 100%;
}

.eg svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* backdrop fills its parent and its viewBox matches the measured box, so nothing scales or crops */
.eg--backdrop {
  position: absolute;
  inset: 0;
}

.eg--backdrop svg {
  height: 100%;
}

/* 1px so a snapped edge lands exactly on the 1px css grid line under it */
.eg--backdrop .eg__edge {
  stroke-width: 1;
}

.eg__head {
  font-family: var(--eg-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: rgba(230, 239, 233, 0.36);
}

.eg__edge {
  fill: none;
  stroke: rgba(230, 239, 233, 0.14);
  stroke-width: 1.2;
  transition: stroke 0.6s ease;
}

/* source and destination stubs are dashed so they read as outside the graph */
.eg__edge--io {
  stroke-dasharray: 3 4;
}

.eg__edge.is-live {
  stroke: rgba(194, 255, 38, 0.5);
  transition-duration: 0.25s;
}

.eg__port {
  fill: none;
  stroke: rgba(230, 239, 233, 0.3);
  stroke-width: 1.2;
}

.eg__box {
  stroke-width: 1.2;
  transition: stroke 0.5s ease, fill 0.5s ease;
}

.eg__halo {
  fill: none;
  stroke-width: 8;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.eg__node.is-hit .eg__halo {
  opacity: 1;
  transition-duration: 0.15s;
}

.eg__node.is-hit .eg__box {
  transition-duration: 0.15s;
}

.eg__label {
  font-family: var(--eg-mono);
  font-size: 12px;
  fill: rgba(230, 239, 233, 0.82);
}

/* functions, publishers, transformers and subscribers share the dark green box */
.eg__node--fn .eg__box {
  fill: #0d2620;
  stroke: rgba(194, 255, 38, 0.26);
}

.eg__node--fn .eg__halo {
  stroke: rgba(194, 255, 38, 0.16);
}

.eg__node--fn.is-hit .eg__box {
  fill: #12332a;
  stroke: rgba(194, 255, 38, 0.85);
}

/* tables are amber, matching the deploy card graph */
.eg__node--table .eg__box {
  fill: #1d2215;
  stroke: rgba(242, 163, 58, 0.55);
}

.eg__layer {
  fill: #141a12;
  stroke: rgba(242, 163, 58, 0.2);
  stroke-width: 1;
}

.eg__node--table .eg__halo {
  stroke: rgba(242, 163, 58, 0.18);
}

.eg__node--table.is-hit .eg__box {
  fill: #2a2614;
  stroke: var(--eg-amber);
}

.eg__node--table .eg__label {
  fill: #f6c27a;
}

.eg__version {
  font-family: var(--eg-mono);
  font-size: 10px;
  text-anchor: end;
  fill: rgba(246, 194, 122, 0.55);
}

.eg__packet-core {
  fill: var(--eg-lime);
}

/* standalone wrapper used when the view is placed on its own outside the hero */
.mf-section {
  padding: clamp(48px, 7vw, 96px) 24px;
  background: #021a16;
}

.mf-section .mf {
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}

/* medallion dataflow view, tokens are redeclared so the view also renders outside a td-section */
.mf {
  --td-lime: #c2ff26;
  --td-text: #e6efe9;
  --td-muted: #9fb5ad;
  --td-line: rgba(255, 255, 255, 0.08);
  --td-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 22px 22px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(33, 163, 0, 0.09), transparent 60%),
    #0a1411;
  color: var(--td-text, #e6efe9);
  text-align: left;
}

.mf__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.mf__date {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--td-lime, #c2ff26);
  font-family: var(--td-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}

.mf__date svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.mf__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 0.85rem + 0.8vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.mf__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(150px, 1.3fr);
  overflow: hidden;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
}

.mf__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-right: 1px solid var(--td-line);
}

.mf__stat-label {
  color: var(--td-muted);
  font-family: var(--td-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mf__stat-value {
  color: #fff;
  font-size: 1.12rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mf__stat-value small {
  color: var(--td-muted);
  font-size: 0.78em;
  font-weight: 400;
}

.mf__stat-note {
  color: rgba(159, 181, 173, 0.75);
  font-size: 12px;
}

.mf__stat.is-error .mf__stat-value {
  color: #ff6b6b;
}

/* committed vs error split, the error sliver keeps a minimum width so it stays visible */
.mf__progress {
  display: flex;
  align-self: center;
  height: 10px;
  margin: 0 18px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.mf__progress-ok {
  width: 98.8%;
  background: linear-gradient(90deg, #21a300, #c2ff26);
  box-shadow: 0 0 14px rgba(194, 255, 38, 0.45);
}

.mf__progress-err {
  flex: 1;
  min-width: 4px;
  background: #ff5a5a;
}

.mf__chart {
  overflow-x: auto;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(rgba(194, 255, 38, 0.13) 1px, transparent 1.3px);
  background-size: 22px 22px;
}

.mf__chart svg {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}

/* svg text, sizes are viewBox units */
.mf__name {
  fill: #fff;
  font-size: 16px;
  font-weight: 500;
}

.mf__meta {
  fill: var(--td-muted);
  font-family: var(--td-mono);
  font-size: 13px;
}

.mf__tier {
  fill: #fff;
  font-family: var(--td-mono);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.mf__tier.is-bronze .mf__medal {
  fill: #d08b4f;
}

.mf__tier.is-silver .mf__medal {
  fill: #d7e1dd;
}

.mf__tier.is-gold .mf__medal {
  fill: #f0c44c;
}

.mf__label.is-unused .mf__tier {
  fill: #e8be46;
  font-size: 12.5px;
}

.mf__delta {
  fill: var(--td-lime);
  font-family: var(--td-mono);
  font-size: 12.5px;
}

.mf__error path {
  fill: rgba(255, 90, 90, 0.15);
  stroke: #ff5a5a;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.mf__error text {
  fill: #ff6b6b;
  font-family: var(--td-mono);
  font-size: 11.5px;
  text-decoration: underline;
}

.mf__bar {
  fill: #e6efe9;
}

.mf__node.is-layer .mf__bar {
  fill: #fff;
  filter: drop-shadow(0 0 6px rgba(194, 255, 38, 0.55));
}

.mf__node.is-unused .mf__bar {
  fill: #e8be46;
}

.mf__icon-bg {
  fill: #0f2a1d;
  stroke: rgba(194, 255, 38, 0.45);
  stroke-width: 1.5;
}

.mf__icon g {
  fill: none;
  stroke: var(--td-lime);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* phone version, the same sankey turned to run top to bottom, hidden until the wide one would need sideways scrolling */
.mf__vchart {
  display: none;
  border: 1px solid var(--td-line);
  border-radius: 14px;
  background-color: rgba(0, 0, 0, 0.2);
  background-image: radial-gradient(rgba(194, 255, 38, 0.13) 1px, transparent 1.3px);
  background-size: 22px 22px;
}

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

/* vertical chart text, sizes are viewBox units which land close to css pixels at phone width */
.mf__vname {
  fill: var(--td-text);
  font-size: 10.5px;
  font-weight: 600;
  text-anchor: middle;
}

.mf__vmeta,
.mf__vdelta,
.mf__verror,
.mf__vunused {
  font-family: var(--td-mono);
  font-size: 9.5px;
}

.mf__vmeta {
  fill: var(--td-muted);
}

.mf__vtier {
  font-size: 11px;
}

.mf__vdelta {
  fill: var(--td-lime);
}

.mf__verror {
  fill: #ff6b6b;
}

.mf__vunused {
  fill: #e8be46;
  text-anchor: end;
}

@media (max-width: 640px) {
  .mf__chart {
    display: none;
  }
  .mf__vchart {
    display: block;
  }
}

@media (max-width: 860px) {
  .mf__head {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .mf__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mf__stat {
    border-bottom: 1px solid var(--td-line);
  }
  .mf__progress {
    grid-column: 1 / -1;
    margin: 14px 16px;
  }
}

.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;
  }
}

.td-hero {
  padding-top: clamp(120px, 14vw, 180px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

.td-hero__bg {
  /* with the page level grainient on, the hero's own one fades out at the bottom so it blends into the fainter page one */
  -webkit-mask-image: var(--td-own-grain-mask, none);
  mask-image: var(--td-own-grain-mask, none);
  opacity: 0.85;
}

/* darkens the edges and the bottom so the next section starts on the base color */
.td-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, transparent 0%, rgba(2, 26, 22, 0.55) 70%, rgba(2, 26, 22, 0.9) 100%),
    linear-gradient(to bottom, transparent 55%, var(--td-fade-bg, var(--td-bg)) 100%);
  /* with the page grainient on, the dark vignette fades out toward the bottom so the hero meets the next section at the same brightness instead of a hard line */
  -webkit-mask-image: var(--td-vignette-mask, none);
  mask-image: var(--td-vignette-mask, none);
}

.td-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.td-hero__title {
  margin: 28px 0 0;
  max-width: 1000px;
  color: #fff;
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.td-hero__accent {
  color: var(--td-lime);
  text-shadow: 0 0 40px rgba(194, 255, 38, 0.35);
}

.td-hero__body {
  max-width: 720px;
  margin-top: 28px;
}

.td-hero__actions {
  justify-content: center;
  margin-top: 36px;
}

.td-hero__shot {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-top: clamp(56px, 7vw, 88px);
}

/* lime bloom under the product window */
.td-hero__glow {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  bottom: -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(194, 255, 38, 0.28), rgba(33, 163, 0, 0.12) 55%, transparent 100%);
  filter: blur(40px);
}

.td-hero__window {
  background: #0b1210;
}

/* static rim light instead of the spinning beam, the product view stays still */
.td-hero__shot .td-beam-frame::before {
  animation: none;
}

/* flat stage with depth from layered shadows and a soft floor glow under the window */
.td-hero__shot.is-tilted .td-beam-frame {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.85),
    0 90px 140px -60px rgba(33, 163, 0, 0.35);
}

.td-hero__floor {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -46px;
  z-index: -1;
  height: 90px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(194, 255, 38, 0.18), transparent 70%),
    radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent 100%);
  filter: blur(14px);
}

.td-hero__chrome {
  display: flex;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--td-line);
  background: rgba(255, 255, 255, 0.03);
}

.td-hero__chrome span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

/* headline block, its own stacking context so the background graph can sit under the text but over the grainient */
.td-hero__head {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* graph mode runs the execution backdrop faintly behind the headline, from the top of the hero down to the buttons and edge to edge
   two masks are unioned, the side columns run the full height and a band runs across the top above the eyebrow, so no node lands under the text */
.td-hero__graph-bg {
  --td-graph-sides: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 19%,
    transparent 31%,
    transparent 69%,
    #000 81%,
    #000 94%,
    transparent 100%
  );
  --td-graph-top: linear-gradient(to bottom, transparent 0%, #000 11%, #000 19%, transparent 28%);
  position: absolute;
  top: calc(clamp(120px, 14vw, 180px) * -1);
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.42;
  -webkit-mask-image: var(--td-graph-sides), var(--td-graph-top);
  mask-image: var(--td-graph-sides), var(--td-graph-top);
  mask-composite: add;
  animation: td-hero-graph-in 1.6s ease 0.4s both;
}

@keyframes td-hero-graph-in {
  from {
    opacity: 0;
  }
}

/* on small screens the headline fills the width so there are no side columns to show through,
   instead the whole graph sits faintly behind the text and the band above the eyebrow shows at full strength */
@media (max-width: 860px) {
  .td-hero__graph-bg {
    --td-graph-sides: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    --td-graph-top: linear-gradient(to bottom, transparent 0%, #000 8%, #000 16%, transparent 26%);
  }
}

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

.td-hero__logos {
  width: 100%;
  margin-top: clamp(56px, 6vw, 80px);
}

/* large screens, the headline, body and product window grow with the wider container */
@media (min-width: 1680px) {
  .td-hero__title {
    max-width: 1120px;
    font-size: 6.5rem;
  }

  .td-hero__body {
    max-width: 800px;
  }

  .td-hero__shot {
    max-width: 1240px;
  }
}

@media (min-width: 1920px) {
  .td-hero__title {
    font-size: 7rem;
  }

  .td-hero__shot {
    max-width: 1320px;
  }
}