/* ============================================================
   HOME V2 — THREE WAYS TO GET FENIEX. Rendered by
   //site/_home_v2_three_ways.php. The live section's language (the lane
   NAME is the display type, one support line, the whole lane is the link)
   on plain black, sized so the whole section lands inside screen three.

   Round 1 against the bar (2026-09-03): the lane is now TWO ROWS — the plate
   whole and uncropped on top, the copy on plain black underneath — instead
   of copy laid over the plate behind a scrim. The scrim is gone, so the
   screens read at full brightness; the copy never lands on the page it is
   describing; and the CTAs are the page's buttons (base.css .hv2-btn) with
   one solid red primary on the buy lane. Title left-aligned at the shared
   inset, same edge as every lane's copy.

   px only (styles_v3 sets html font-size 62.5%); every class hv2-tw-.
   ============================================================ */

.hv2-tw {
  position: relative;
  background: #000;
  border-top: 1px solid var(--hv2-line);
  padding: 40px 0 40px;
  /* One left edge shared by the title, the lane numbers and the lane copy. */
  --hv2-tw-inset: 28px;
}
.hv2-tw-head {
  margin: 0 0 18px;
  padding: 0 var(--hv2-tw-inset);
}
/* Same size as the page's h2 vocabulary (base.css .hv2-h2) so the section
   titles read as one system; weight 600 like the live section. */
.hv2-tw-title {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--hv2-ink);
}

/* ---- Lanes ------------------------------------------------------------ */

.hv2-tw-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hv2-line);
  border-bottom: 1px solid var(--hv2-line);
}
/* Two rows: the plate sizes itself (10:7, whole), the copy sits under it. */
.hv2-tw-lane {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--hv2-ink);
  background: #000;
  isolation: isolate;
}
.hv2-tw-lane + .hv2-tw-lane { border-left: 1px solid var(--hv2-line); }

/* Red hairline that grows from the left on hover — the lane's "live" tell. */
.hv2-tw-lane::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--hv2-accent-soft), var(--hv2-accent));
  box-shadow: 0 0 14px var(--hv2-accent);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.hv2-tw-lane:hover::before,
.hv2-tw-lane:focus-visible::before { width: 100%; }

/* The plate, whole: width 100%, height from its own 10:7 ratio, never
   object-fit: cover. The stage's red floor glow runs to the JPG's bottom
   edge (the screens end by 81% of the plate's height), so a mask fades the
   bottom 18% into the black the copy sits on — a CSS mask, the JPG is
   untouched — and a 4% fade on top softens the glow's edge under the
   hairline. No scale on hover: a scaled plate is a cropped plate. */
.hv2-tw-img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4%, #000 82%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 4%, #000 82%, rgba(0,0,0,0) 100%);
  transition: filter 0.5s ease;
  z-index: 0;
}
.hv2-tw-lane:hover .hv2-tw-img,
.hv2-tw-lane:focus-visible .hv2-tw-img { filter: brightness(1.08); }

/* Lane number: a mono tag in the plate's top-left corner (the plate's
   corners are void, so nothing sits under it). It lives in the copy block
   in the markup so phones can show it inline — see the 768px rule. */
.hv2-tw-num {
  position: absolute;
  top: 16px;
  left: var(--hv2-tw-inset);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--hv2-muted);
  z-index: 2;
  transition: color 0.4s ease;
}
.hv2-tw-lane:hover .hv2-tw-num { color: var(--hv2-accent); }

/* ---- Copy ------------------------------------------------------------- */

.hv2-tw-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 6px var(--hv2-tw-inset) 24px;
  z-index: 2;
}
/* The decision itself is the biggest thing in the lane. */
.hv2-tw-name {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.015em;
}
.hv2-tw-state {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--hv2-muted);
  max-width: 30ch;
}
/* The CTA is a base.css button (inline-flex here so the arrow rides the
   label). Lane 01 wears the solid red — the one buy door on this screen;
   02 and 03 are ghosts. The whole lane is the link, so the lane's hover
   has to light the button: the two rules below mirror .hv2-btn:hover and
   .hv2-btn-ghost:hover from base.css. */
.hv2-tw-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  white-space: nowrap;
}
.hv2-tw-btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hv2-tw-lane:hover .hv2-tw-btn,
.hv2-tw-lane:focus-visible .hv2-tw-btn {
  background: var(--hv2-accent-soft);
  border-color: var(--hv2-accent-soft);
  color: #fff;
  transform: translateY(-2px);
}
.hv2-tw-lane:hover .hv2-tw-btn.hv2-btn-ghost,
.hv2-tw-lane:focus-visible .hv2-tw-btn.hv2-btn-ghost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.6);
}
.hv2-tw-lane:hover .hv2-tw-btn svg,
.hv2-tw-lane:focus-visible .hv2-tw-btn svg { transform: translateX(4px); }
.hv2-tw-lane:focus-visible { outline: 2px solid var(--hv2-accent); outline-offset: -2px; }

/* ---- Responsive ------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Narrow columns: tighter inset, smaller buttons so "Start your upfit"
     stays on one line at 256px. */
  .hv2-tw { --hv2-tw-inset: 20px; }
  .hv2-tw-num { top: 12px; }
  .hv2-tw-body { padding: 4px var(--hv2-tw-inset) 20px; }
  .hv2-tw-btn.hv2-btn-sm { padding: 11px 16px; font-size: 13px; letter-spacing: 0.08em; }
}
@media (max-width: 768px) {
  /* Phones: one lane per row, copy on the left and the plate on the right
     (the page's text-left / art-right rule), so three lanes stay under one
     screen of scroll instead of three stacked plates. */
  .hv2-tw { padding: 36px 0 32px; }
  .hv2-tw-head { margin-bottom: 14px; }
  .hv2-tw-lanes { grid-template-columns: minmax(0, 1fr); }
  .hv2-tw-lane {
    grid-template-columns: minmax(0, 1fr) 42%;
    grid-template-rows: auto;
    align-items: center;
    column-gap: 14px;
    padding: 18px var(--hv2-tw-inset) 20px;
  }
  .hv2-tw-lane + .hv2-tw-lane { border-left: 0; border-top: 1px solid var(--hv2-line); }
  .hv2-tw-img { grid-column: 2; grid-row: 1; }
  .hv2-tw-body { grid-column: 1; grid-row: 1; padding: 0; }
  /* The number becomes the first line of the copy. */
  .hv2-tw-num { position: static; margin-bottom: 2px; }
  .hv2-tw-name { font-size: 24px; }
  .hv2-tw-state { font-size: 14px; }
  .hv2-tw-btn.hv2-btn-sm { margin-top: 10px; padding: 10px 14px; font-size: 12.5px; letter-spacing: 0.06em; }
}
@media (max-width: 420px) {
  /* The arrow is the first thing to go when "Start your upfit" would wrap. */
  .hv2-tw-btn svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hv2-tw-lane::before, .hv2-tw-img, .hv2-tw-btn, .hv2-tw-btn svg { transition: none; }
  .hv2-tw-lane:hover .hv2-tw-btn { transform: none; }
}

/* ============================================================
   PHONES (≤768px) — phone round 1, 2026-09-03. The section's own first
   screen: 86px of top air clears the sticky header (70px once scrolled —
   the phone captures put the section's top edge at the window's), then
   the title (two lines at 34px), then the three copy-left / plate-right
   lanes of the ≤768px block above, all inside one 844px window. The
   shared inset moves to 22px — the page's phone edge, the one the fold,
   the beats and the products section set — so the title, the lane
   numbers and the lane copy sit on the same line as the hero's text; and
   the lane name steps up to 26px, the display type it is (FIND A DEALER
   is ~159px against the copy column's ~189px).
   ============================================================ */
@media (max-width: 768px) {
  .hv2-tw { padding: 86px 0 44px; --hv2-tw-inset: 22px; }
  .hv2-tw-head { margin-bottom: 20px; }
  .hv2-tw-title { font-size: clamp(30px, 8.7vw, 40px); }
  .hv2-tw-name { font-size: 26px; }
}

/* ============================================================
   PHONES (≤768px) — phone round 4, 2026-09-03: tap targets and the
   support line. The lane buttons were 34px tall (10px of padding on
   12.5px type) — under the 44px a thumb needs, and the smallest buttons
   on the page; 15px of padding on 13px type is 45px, and START YOUR UPFIT
   (~121px at 13px) still fits the ~187px copy column beside the plate.
   The support line steps up to 15px, the phone's body size, and each
   still holds two lines in that column. The three lanes stay inside one
   844px window: the round-3 capture had the last button ending at 708,
   and this adds ~13px a lane.
   ============================================================ */
@media (max-width: 768px) {
  .hv2-tw-state { font-size: 15px; }
  .hv2-tw-btn.hv2-btn-sm { padding: 15px 16px; font-size: 13px; }
}