/* ==========================================================================
   Comparison table  —  Figma "Smart Search" frame (912:7059), the reworked
   layout. 1920 x 1348 at y 5252, on Mono/Dark.

   Same nine rows and the same values as before; the layout changed.

   Geometry from Figma:
     headline        x 48, y 64, 747 wide (two 77px lines: 64 and 141)
     "Traditional"   x 1198, y 318, 32px
     OcularAI logo   x 1555, y 321, 162.633 x 40
     rules           x 202 -> 1871 (1669 wide), y 401 + 100n, nine of them
     row label       x 266, y 434 + 100n
     row number      x  48, y 440 + 100n
     Traditional col x 1232 (the Yes/No text lands at 1266 either way)
     OcularAI col    x 1600

   There are NO vertical rules in this cut — the redesign drops them, so the
   vertical grow that used to animate no longer has anything to animate.
   Everything else is as it was:
     both headline lines  translateY +70 -> 0
     horizontal rules     width 70 -> 1669 (grow rightward, staggered by row)
     "Traditional"        translateY +40 -> 0
     OcularAI logo        rises by its own height
     row number           translateY +20 -> 0
     row label / value    translateY +30 -> 0
   ========================================================================== */

.tech-table {
  top: calc(5252 * var(--s));
  height: calc(1348 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  z-index: 2;
}

.tech-table__h {
  position: absolute;
  left: calc(48 * var(--s));
  height: calc(77 * var(--s));
}
.tech-table__h--1 { top: calc(64 * var(--s));  width: calc(747 * var(--s)); }
.tech-table__h--2 { top: calc(141 * var(--s)); width: calc(560 * var(--s)); }
.tech-table__h h2,
.tech-table__h span {
  display: block;
  font-weight: 300;
  font-size: calc(64 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-2.56 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}

/* --- column headers, above the grid ------------------------------------- */

.tech-table__colname,
.tech-table__colmark { position: absolute; display: block; }

.tech-table__colname {
  left: calc(1198 * var(--s));
  top: calc(318 * var(--s));
  height: calc(45 * var(--s));
}
.tech-table__colmark {
  left: calc(1555 * var(--s));
  top: calc(321 * var(--s));
  width: calc(162.633 * var(--s));
  height: calc(40 * var(--s));
}
.tech-table__colmark img { display: block; width: 100%; height: 100%; }

/* --- the grid ------------------------------------------------------------ */

.tech-table__grid {
  position: absolute;
  left: calc(202 * var(--s));
  top: calc(401 * var(--s));
  width: calc(1669 * var(--s));
  --line: rgba(236, 247, 255, 0.15);
}

.tech-table__row {
  position: relative;
  display: flex;
  align-items: center;
  height: calc(100 * var(--s));
}

/* Rules are drawn as pseudo-elements rather than borders so they can grow
   from 70px to full width, the way Figma animates them. */
.tech-table__row::before {
  content: "";
  position: absolute;
  left: 0;
  height: 1px;
  background: var(--line);
  width: calc(70 * var(--s));
  transition: width calc(var(--rv-dur) * 1.1) var(--rv-ease);
  transition-delay: calc(var(--r, 0) * 40ms);
}
.tech-table__row::before { top: 0; }

.tech-table.is-in .tech-table__row::before { width: 100%; }

.tech-table__cell {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  height: 100%;
}
/* Column widths derived from the Figma verticals, relative to x 182. */
.tech-table__cell--label { width: calc(1030 * var(--s)); }   /* 202 -> 1232 */
.tech-table__cell--trad  { width: calc(368 * var(--s)); }    /* 1232 -> 1600 */
.tech-table__cell--ours  { width: calc(271 * var(--s)); }    /* 1600 -> 1871 */

.tech-table__cell--label { padding-left: calc(64 * var(--s)); }  /* x 266 */

.tech-table__num {
  position: absolute;
  left: calc(-154 * var(--s));      /* 202 - 154 = x 48 in section space */
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.2;
  color: var(--c-accent-yellow);
  white-space: nowrap;
}
.tech-table__num .kern { letter-spacing: calc(1.6 * var(--s)); }

.tech-table__label {
  font-weight: 300;
  font-size: calc(24 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.72 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}

.tech-table__val.mask { display: block; }
.tech-table__val .rv,
.tech-table__val {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--s));
  font-size: calc(24 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.72 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}
/* Figma nudges the No rows 7px right so both labels land at x 1266. A fixed
   26-wide slot does the same thing without per-row offsets. */
.tech-table__ico {
  flex: none;
  display: flex;
  align-items: center;
  width: calc(26 * var(--s));
  height: calc(20 * var(--s));
}
.tech-table__val img { flex: none; height: 100%; width: auto; }

/* Header labels */
.tech-table__num.mask { display: block; }

.tech-table__colname {
  font-size: calc(32 * var(--s));
  line-height: 1.4;
  letter-spacing: calc(-0.96 * var(--s));
  color: var(--c-mono-light);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .tech-table__row::before { width: 100%; transition: none; }
}

@media (max-width: 1400px) {
  .tech-table__label { font-size: calc(20 * var(--s)); }
  .tech-table__val { font-size: calc(20 * var(--s)); }
}

/* ==========================================================================
   Reflow — the three columns stack into a label + two labelled values.
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .tech-table { height: auto; padding: 48px 20px 56px; }
  .tech-table__h { position: static; width: auto; height: auto; }
  .tech-table__h h2,
  .tech-table__h span { font-size: clamp(30px, 8vw, 44px); white-space: normal; }

  .tech-table__grid { position: static; width: auto; margin-top: 28px; }
  .tech-table__row::before,
  .tech-table.is-in .tech-table__row::before { width: 100%; }
  .tech-table__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    height: auto;
    padding: 16px 0;
    align-items: start;
  }
  .tech-table__cell { width: auto !important; border: 0 !important; padding: 0 !important; height: auto; }
  .tech-table__ico { width: auto; }
  .tech-table__num { position: static; display: block; margin-bottom: 6px; }
  .tech-table__label { font-size: 15px; white-space: normal; }
  .tech-table__val { font-size: 15px; }
  .tech-table__val img { height: 14px; }
  .tech-table__cell--trad::before,
  .tech-table__cell--ours::before {
    content: attr(data-col);
    font-family: var(--f-tech);
    font-size: 10px;
    color: #767676;
    margin-right: 6px;
  }
  .tech-table__colname, .tech-table__colmark { display: none; }
}