/* TeleOp narrative refinement: compact presentation, existing visual language. */
.teleop-release .tele-refined > section:not(.cta-band) {
  padding-block: clamp(44px,4.7vw,68px);
}
.teleop-release .tele-refined .tele-section-head {
  margin-bottom: clamp(24px,2.5vw,34px);
  gap: clamp(24px,4vw,56px);
}
.teleop-release .tele-refined h2 {
  font-size: clamp(30px,3.4vw,48px);
  line-height: 1.16;
}
.teleop-release .tele-refined .tele-hero-film {
  max-width: 1060px;
  margin: 28px auto 0;
}
.teleop-release .tele-refined .tele-cross-film {
  max-width: 1060px;
  margin-inline: auto;
}
.teleop-release #control {border-top: 1px solid var(--ui-line,var(--vi-n217));}

/* Four short moments make setup visible without opening a large player. */
.teleop-release .tele-setup-section {background: var(--vi-n245);}
.teleop-release .tele-setup-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 16px;
}
.teleop-release .tele-setup-grid video {aspect-ratio: 16/9;}
.teleop-release .tele-refined .tele-setup-film figcaption {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--vi-n23);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
}
.teleop-release .tele-step {
  color: var(--vi-n92);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Keep the comparison readable while removing oversized empty card rows. */
.teleop-release #models .tele-product-options {gap: 16px; margin: 36px 0 0;}
.teleop-release #models .tele-product-option {padding: 22px;}
.teleop-release #models .tele-product-focus {margin: 8px 0 16px; min-height: 42px;}
.teleop-release #models .tele-product-option dl > div + div {margin-top: 16px;}
.teleop-release #models .tele-product-option dt {margin-bottom: 4px;}
.teleop-release #models .tele-product-option dd {line-height: 1.6;}
@media(min-width: 901px) {
  .teleop-release #models .tele-product-option dl > div:nth-child(-n+2) {min-height: 68px;}
}

/* Video on the left, control metrics and data capabilities on the right. */
.teleop-release #models .tele-control-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px,3.3vw,48px);
  align-items: start;
}
.teleop-release #models .tele-mapping-demo,
.teleop-release #models .tele-control-specs {min-width: 0; max-width: none; margin: 0;}
.teleop-release #models .tele-mapping-head {display: block; margin-bottom: 18px;}
.teleop-release #models .tele-mapping-head h3,
.teleop-release #models .tele-specs-head h3 {
  font-size: clamp(23px,2vw,28px);
  line-height: 1.25;
}
.teleop-release #models .tele-mapping-head p {margin-top: 12px; font-size: 15px;}
.teleop-release #models .tele-specs-head small {margin-top: 6px; font-size: 12px;}
.teleop-release #models .tele-system-metrics {display: block; margin: 16px 0 6px;}
.teleop-release #models .tele-system-metrics > div {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.teleop-release #models .tele-system-metrics > div + div {border-top: 0;}
.teleop-release #models .tele-system-metrics dt {min-height: 0; font-size: 14px;}
.teleop-release #models .tele-system-metrics dd {margin: 0; text-align: right; font-size: clamp(28px,2.6vw,36px);}
.teleop-release #models .tele-capability-table {font-size: 13px; line-height: 1.6;}
.teleop-release #models .tele-capability-table th {width: 34%; padding-right: 16px;}
.teleop-release #models .tele-capability-table :is(th,td) {padding-block: 11px;}
.teleop-release #models .tele-capability-note {margin-top: 12px;}
.teleop-release #models .tele-data {margin-top: 32px; padding-top: 28px;}
.teleop-release #models .tele-data h3 {font-size: clamp(23px,2.2vw,29px);}
.teleop-release #models .tele-dataflow {margin: 18px 0 14px;}
.teleop-release #models .tele-dataflow li {padding: 18px 20px; gap: 6px;}
.teleop-release .tele-long .tele-expand {margin-top: 20px; padding-top: 8px;}

@media(max-width: 900px) {
  .teleop-release #models .tele-control-layout {grid-template-columns: minmax(0,1fr); gap: 28px;}
  .teleop-release #models .tele-product-focus {min-height: 0; margin-bottom: 16px;}
  .teleop-release #models .tele-product-option dl > div + div {margin-top: 0;}
  .teleop-release .tele-setup-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 16px;}
}
@media(max-width: 600px) {
  .teleop-release .tele-refined > section:not(.cta-band) {padding-block: 40px;}
  .teleop-release .tele-refined .tele-hero {padding-top: 30px;}
  .teleop-release .tele-refined .tele-section-head {gap: 16px; margin-bottom: 24px;}
  .teleop-release .tele-refined h2 {font-size: clamp(28px,7.2vw,34px);}
  .teleop-release .tele-setup-grid {gap: 20px 12px;}
  .teleop-release .tele-refined .tele-setup-film figcaption {font-size: 13px; gap: 7px;}
  .teleop-release #models .tele-product-options {margin: 28px 0 0;}
  .teleop-release #models .tele-product-option {padding: 20px;}
  .teleop-release #models .tele-product-option dl > div + div {margin-top: 14px;}
  .teleop-release #models .tele-capability-table th {width: 36%; padding-right: 12px;}
  .teleop-release #models .tele-dataflow li {padding: 16px 18px;}
}


/* Align the introduction and demonstration like the EngramEgo product hero. */
.teleop-release .tele-refined > section.tele-hero {
  padding-block: clamp(40px, 5.5vw, 78px);
}
.teleop-release .tele-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(24px, 4vw, 58px);
}
.teleop-release .tele-hero-layout .tele-hero-intro {
  display: block;
  min-width: 0;
}
.teleop-release .tele-hero-layout h1 {
  font-size: clamp(36px, 3.65vw, 54px);
  max-width: 16ch;
  letter-spacing: -.035em;
}
.teleop-release .tele-hero-layout .lead {
  margin-top: 22px;
  max-width: 43ch;
}
.teleop-release .tele-hero-layout .cta-row {
  margin-top: 28px;
  gap: 12px 20px;
}
.teleop-release .tele-refined .tele-hero-layout .tele-hero-film {
  max-width: none;
  margin: 0;
}
.teleop-release .tele-hero-layout .tele-hero-film figcaption {
  margin-top: 11px;
  font-size: 13px;
  line-height: 1.55;
}
@media (max-width: 900px) {
  .teleop-release .tele-hero-layout {grid-template-columns: minmax(0, 1fr); gap: 28px;}
  .teleop-release .tele-hero-layout h1 {font-size: clamp(36px, 6.2vw, 52px); max-width: 20ch;}
  .teleop-release .tele-hero-layout .lead {max-width: 60ch;}
  .teleop-release .tele-refined .tele-hero-layout .tele-hero-film {max-width: 760px; width: 100%;}
}
@media (max-width: 720px) {
  .teleop-release .tele-refined > section.tele-hero {padding-block: 30px 34px;}
  .teleop-release .tele-hero-layout h1 {font-size: clamp(32px, 8.2vw, 43px);}
  .teleop-release .tele-hero-layout .lead {margin-top: 18px; font-size: 16px;}
}
