/* ============================================================
   HOME V2 — THE FOLD: what is PINNED while the film plays. Rendered by
   //site/_home_v2_fold.php (identity block, proof strip, skip). The
   identity block never fades — the engine never touches it — and its
   button takes clicks from the first frame to the last. The proof strip
   floats above the consent bar's 132px (--hv2-cookie-safe, base.css) so a
   first-time visitor sees it with the prompt up.

   Gauntlet round 1 (2026-09-03, screen one vs Apple's iPhone 17 Pro hero):
   what Apple's fold does for a buyer that ours did not was a price under the
   button and a category line loud enough to read. So: the h1 grew from 17px
   to 20px and went near-white, the headline took one step up, a price line
   (.hv2-from) sits between the h1 and the button row, and the skip pill went
   quiet so the headline is the eye's first landing. At 1280x720 the words
   end above the film's keypad edge (about y=258 of 720) and only the opaque
   button straddles it.

   Gauntlet round 2 (2026-09-03): the blind critic's one remaining gap was
   noise — two equal-weight buttons, a skip chip and four badge tiles
   stacked on the collage, with the consent bar under it all. Apple's
   screen has one button and nothing else to click. So: the store door
   became a quiet text link on the price row and Explore SynQ the only
   button, alone on the block's last row; the skip went to bare text, no
   pill; the proof strip lost its boxed icon tiles (bare glyphs, a shorter
   bar) and moved 10px further off the consent bar.

   Gauntlet round 3 (2026-09-03): the critic saw round 2 and still counted
   the fold's signals — a red button, a "Shop all" link, a skip control, a
   four-cell band, the collage, the prompt — and said the buyer's next
   action never reads as obvious. Apple's screen has ONE thing to click and
   nothing drawn in a box. So the fold now has one click: the store door
   left the identity block (PRODUCTS is the header's first item on this same
   screen, and the shelf keeps the page's own "All products" door; the price
   line stands alone), the skip is off the screen at rest and arrives with
   the first notches of scroll — the intro has to be running before there
   is an intro to skip (.hv2-skip-in) — and the proof strip stopped being a
   card: no box, no border, no glyphs, no rules between the cells; four
   left-aligned columns on the identity block's 40px grid, readable over
   the keypads thanks to a feathered scrim, so the four proofs read as the
   frame's caption line instead of a fifth thing to look at. Copy and the
   two clicks that remain (the button, the skip) are unchanged. The stacked
   column (phones, reduced motion) keeps its card and its glyphs.

   Gauntlet round 4 (2026-09-03): the critic saw round 3 and named the
   frame itself — the film's opening shot crams three overlapping
   controllers and a circuit-board panel into one picture, so a buyer
   cannot tell what ONE SynQ product is or which one the $1,099 buys.
   Apple's fold is one product on black, named by the words. The frames
   are the film's (film.css, the engine), not the fold's to recut, so the
   fold now paints its OWN first frame over the canvas at rest: THE STILL
   (.hv2-still) — a black cover carrying the SynQ-S Solid Black master,
   alone, on the right, at the 2x cap — which holds while the panel is
   parked and dissolves across the film's first 110px of runway on the
   same scroll-driven animation the skip's reveal rides, handing the frame
   to the film with the family already sliding and leaving in the same
   breath as the identity words.
   The price line that named that product ("SynQ-S siren controller from
   $1,099") is GONE since 2026-09-06 (Hamza): the button stands where it
   stood, straight under the h1. Nothing else on the screen moved:
   headline, h1, the one red button, the strip's columns and the scrim
   are round 3's. The button also leaves with the words now — the engine
   fades the whole block in the hand-off (js/concept-home-v2.js).
   ============================================================ */

/* ---- the identity block (pinned) ------------------------------------ */
.hv2-identity {
  position: absolute;
  left: 40px;
  top: 22px;
  max-width: min(58vw, 780px);
  pointer-events: auto;
}
.hv2-headline {
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  /* 46px at 1280 (was 42): Apple's product name owns its screen; the
     headline is ours. One step, not a leap — the block must clear the art. */
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8);
}
.hv2-headline b { color: var(--hv2-accent); }
/* The page's one h1: the category sentence — the one line that tells a
   stranger what Feniex makes and where. 20px near-white at 1280 (was 17px at
   82%): it was the quietest text on the screen and it carries the most. No
   ch cap — the block's own width holds it to one line down to ~1000px. */
.hv2-category {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: clamp(15px, 1.55vw, 21px);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: rgba(244, 245, 247, 0.92);
  margin: 10px 0 0;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.9);
}
/* One button on this row, straight under the h1 — the block's last word,
   in the spot the price line held until 2026-09-06 (.hv2-from and its
   rules left with it, here and in the phone blocks below): 18px, not
   base.css's 26 — the block should end well above the frame's middle,
   where the still's keypad sits at the right. */
.hv2-identity .hv2-cta-row { margin-top: 18px; }

/* ---- skip (top-right, never under the consent bar) ------------------- */
/* Bare text, no pill (round 2 — the critic counted the chip as one more
   thing on the screen). It shares the headline's row, and a first-time
   visitor should land on the headline, not on a control; it wakes to white
   on hover. Right-aligned to the identity block's 40px so the row's two
   ends match. The opacity transition is for the engine, which writes this
   button's opacity inline to fade the control out once the film has
   scrolled past. */
.hv2-skip {
  position: absolute;
  top: 33px;
  right: 40px;
  z-index: 12;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 0;
  padding: 6px 0 6px 8px;
  cursor: pointer;
  transition: color 0.2s, opacity 0.3s;
}
.hv2-skip:hover,
.hv2-skip:focus-visible { color: #fff; }
/* Round 3: not on the screen at rest. Nothing plays until the visitor
   scrolls, so there is no intro to skip yet — and a first-time visitor's
   first seconds belong to the headline, the h1 and the one button. The
   label fades in across the first 160px of scroll, once the film is
   running, on a scroll-driven animation (Chrome 115+, Safari 26; an engine
   without it shows the control from the start, as before). It rides the
   inner span (.hv2-skip-in, _home_v2_fold.php), not the button: the engine
   sets the BUTTON's opacity inline at the film's end, and an animation on
   that same element would beat the inline value — on the span the two
   simply multiply. Keyboard focus shows it regardless, so a tabbing visitor
   never lands on an invisible control. `animation-timeline` and
   `animation-range` come after the shorthand, which would otherwise reset
   them. */
@supports (animation-timeline: scroll()) {
  .hv2-skip-in {
    opacity: 0;
    animation: hv2-skip-in linear both;
    animation-timeline: scroll(root);
    animation-range: 20px 160px;
  }
  .hv2-skip:focus-visible .hv2-skip-in { animation: none; opacity: 1; }
  @keyframes hv2-skip-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ---- the proof strip: the frame's caption line ------------------------ */
/* Round 3: four columns of words on the identity block's 40px grid — the
   value in Oswald, its proof in mono beneath — with nothing drawn around
   them: no box, no border, no radius, no rules between the cells and no
   glyphs (round 2's flag and three line icons were four more marks; the
   words carry each cell). What keeps the words readable over the keypads
   is the scrim below, not a panel. Still 10px further off the consent bar
   than --hv2-cookie-safe asks (round 2), so the harness's line — the bar's
   top edge — clears with the same room as before. */
/* THE CAPSULE (Hamza, 2026-09-04): three proofs — Made in America, 10 Year
   Warranty, 100,000 Vehicles — as ONE centered object, not a row of four
   across the stage. A rounded dark-glass bar, three equal segments divided
   by hairlines, value over proof centered in each; the film's progress
   hairline runs along its top edge so the fold line still doubles as the
   timeline. Bottom edge 10px above --hv2-cookie-safe (570 at 1280x720, the
   consent bar's top at 588), width capped so it never spans the frame. */
.hv2-proof {
  position: absolute;
  left: 50%;
  /* 76px off the fold (Hamza, 2026-09-04: "lower, closer to the bottom, not
     too close to the fold line — the middle between where it was and the
     fold"). It sat at --hv2-cookie-safe + 10 = 150px, the height of the
     consent bar plus air; halfway to the fold is 75. */
  bottom: 76px;
  transform: translateX(-50%);
  transition: bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(840px, calc(100% - 80px));
  background: rgba(8, 8, 8, 0.6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  overflow: hidden;
}
/* THE SCRIM — a feathered dark band the full width of the stage, behind
   the caption line only: 40px of fade above the words, the flat 84% under
   them, 44px of fade below (under the consent bar while the prompt is up).
   A band, not a floor: the frames' reflections below the strip and the
   module band above it (film.css measured the strip's top at y 432 of the
   panel) keep their light; only the rows right behind the words go dark.
   The strip's own ::before paints it, so the strip's box — the rect the
   harness measures — is unchanged; z-index -1 puts it under the words
   inside the strip's stacking context (z-index 13), never under the canvas.
   No backdrop blur: the old 63px box blurred every frame under
   --disable-gpu; a 150px band would have cost four times that. */
/* The round-3 full-width scrim band is gone with the row: the capsule's own
   glass carries the words. */
/* THE CONSENT-BAR LIFT. At 76px the capsule would sit under CookieYes' 132px
   bar on a first visit — the one screen the proof exists for. While that bar
   is on screen (CookieYes appends .cky-consent-container to <body> and marks
   it .cky-hide once answered) the capsule rides back up to its old seat,
   then glides down 0.45s after the visitor answers. :has() is the only way a
   sibling's state reaches this rule from CSS; browsers without it (none in
   this store's traffic worth naming) simply keep the capsule at 76px. The
   measurement harness's stand-in carries the same class so the first-visit
   capture shows the lifted state. */
body:has(.cky-consent-container:not(.cky-hide)) .hv2-proof {
  bottom: calc(var(--hv2-cookie-safe) + 10px);
}
/* The film's progress runs along the caption line's top edge: 0 wide at
   rest (nothing to see on screen one), a red hairline growing across the
   strip's width while the film plays. It is the strip's FIRST child, which
   the 2x2 card's nth-child rules below count on. */
.hv2-progress {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 2;
}
.hv2-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--hv2-accent-soft), var(--hv2-accent));
  box-shadow: 0 0 14px var(--hv2-accent);
}
/* A block, value over proof (the markup has no wrapper between them). */
.hv2-proof-cell {
  min-width: 0;
  padding: 13px 18px 12px;
  text-align: center;
}
.hv2-proof-cell + .hv2-proof-cell { border-left: 1px solid rgba(255, 255, 255, 0.1); }
/* 16px at 1280 (was 18 at 700 weight): a caption under the frame, not a
   second headline — the h1 above is the screen's sentence. Left-aligned
   with the headline, so the strip's first word sits on the same 40px line
   as SYNCHRONIZE. */
.hv2-proof-v {
  font-family: "Oswald", sans-serif;
  font-weight: 600;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(244, 245, 247, 0.94);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8);
}
/* 10px at 58% (round 1 raised it from 9px at 55%): "Austin, Texas" and
   "SAE · NFPA · Title 13" are the strip's proof and were the faintest text
   on the screen. Tracking 0.12em; the longest label ("On the road today,
   saving lives", ~223px) fits a 282px column at 1280 and may wrap below
   that — the strip is anchored at its bottom, so a wrap only lifts its top. */
.hv2-proof-l {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: rgba(244, 245, 247, 0.58);
  margin-top: 4px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}
@media (max-width: 1000px) {
  .hv2-proof { width: calc(100% - 48px); }
  .hv2-proof-cell { padding: 12px 10px 11px; }
}

/* ---- the still: screen one's own first frame (round 4) ---------------- */
/* THE STILL (round 4, .hv2-still) was reverted 2026-09-04 — see _home_v2_fold.php. */

/* ---- static fallback (phones / reduced motion) — mirrors the block in
   film.css and the <noscript> styles in _home_v2_film.php; KEEP IN SYNC. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  /* The still is film-mode only: the stacked column has no canvas to
     cover, and the phone carries its own hero shot (film.css). */
  .hv2-skip, .hv2-progress { display: none; }
  .hv2-identity { position: static; max-width: none; }
  .hv2-headline { font-size: clamp(30px, 8vw, 46px); }
  .hv2-category { font-size: 16px; }
  /* In the stacked column the strip is a card again — the round-2 box, its
     cells divided by hairlines — because here there is no frame to caption
     and no scrim (off below) to sit on; the words need their own ground. */
  .hv2-proof {
    position: static;
    margin: 26px 22px 0;
    column-gap: 0;
    background: #070707;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
  }
  .hv2-proof-cell { padding: 11px 12px 12px; }
  .hv2-proof-cell + .hv2-proof-cell { border-left: 1px solid var(--hv2-line); }
}
/* The card's lines when it is a 2x2 (phones, or a reduced-motion window
   under 1000px). The strip's first child is the progress div, so the cells
   are children 2-5: `odd` is cells 2 and 4 (the divider down the middle),
   `n + 4` is cells 3 and 4 (the line across the two rows). */
/* Three cells stack as three rows in the card (phones, or a reduced-motion
   window under 1000px): a hairline between rows, nothing down the middle. */
@media (max-width: 860px), (max-width: 1000px) and (prefers-reduced-motion: reduce) {
  .hv2-proof { grid-template-columns: 1fr; transform: none; left: auto; width: auto; }
  .hv2-proof-cell + .hv2-proof-cell { border-left: 0; border-top: 1px solid var(--hv2-line); }
}
@media (max-width: 600px) {
  .hv2-identity .hv2-cta-row .hv2-btn { padding: 13px 22px; font-size: 14px; }
  .hv2-proof { margin: 24px 16px 0; }
  .hv2-proof-cell { padding: 11px 8px 12px; }
  .hv2-proof-v { font-size: 14px; }
  .hv2-proof-l { font-size: 8.5px; letter-spacing: 0.12em; }
}

/* ============================================================
   PHONES ONLY (≤860px; a reduced-motion desktop keeps the plain column
   above) — the fold re-ordered for a 390px screen. Phone round 1,
   2026-09-03. The static column is a flex column on .hv2-sticky (film.css)
   and the identity block dissolves (display: contents) so its four
   children take their own slots: the fold reads name → what we make → how
   much → the product → the one button — Apple's phone rhythm — and the
   proof strip lands straight under the button instead of 1,470px down.
   The measured CookieYes bar is 288px on a phone, its top edge at 556px:
   with the 80px header, the headline (two lines at 40px), the h1, the
   price row, the full-width shot and the button end near 539px, above the
   bar; the strip starts under it and is on screen the moment the bar is
   gone. flex `order` groups: 0 = headline, h1, first shot
   (source order); 1 = button, proof; 2 = the beats and the second shot
   (film.css). KEEP IN SYNC with film.css.
   ============================================================ */
@media (max-width: 860px) {
  .hv2-identity { display: contents; }
  .hv2-headline {
    order: 0;
    margin: 10px 22px 0;
    /* Two lines by design — SYNCHRONIZE / EVERYTHING. — 40px on a 390
       screen: a display title, not a caption. 10.3vw keeps SYNCHRONIZE
       (~5.5em) on one line down to a 320px phone. */
    font-size: clamp(34px, 10.3vw, 46px);
    line-height: 0.98;
  }
  .hv2-category {
    order: 0;
    margin: 6px 22px 0;
    font-size: 16px;
    line-height: 1.35;
  }
  /* The price line — one sentence, one line, at the left edge. Phone round
     2: the fold's own round 3 took the store door off this row (the partial
     no longer renders .hv2-door; the price is bare inline text inside the
     <p>), so the desktop's flex row — built to seat that door at the right —
     split "SynQ", "controllers from" and "$1,099" into three flex items and
     spread them across the screen (space-between did exactly that in the
     first round-2 capture). A block, so the <b>s flow as the words of a
     sentence whatever the desktop rule does next; 14px, a step above round
     1's 13, now that it has the line to itself. The .hv2-door rule stays
     for a partial that still renders one: inline, it follows the sentence. */
  .hv2-identity .hv2-door { font-size: 13px; margin-left: 12px; }
  /* The one button, full width: the thumb's target on a phone, and the
     block's last word before the proof. */
  .hv2-identity .hv2-cta-row {
    order: 1;
    display: grid;
    grid-template-columns: 1fr;
    margin: 8px 22px 0;
  }
  .hv2-identity .hv2-cta-row .hv2-btn {
    padding: 13px 12px;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-align: center;
    white-space: nowrap;
  }
  /* The strip: a 2x2 of words, each value over its label, left-aligned on
     the cell's 10px. Phone round 2: the fold's round 3 made the cells words
     only — no badge, no .hv2-proof-txt wrapper; the value and the label are
     the cell's direct children — so the desktop's flex cell (built to seat
     a glyph beside a text block) laid the two side by side and broke MADE
     IN AMERICA over two lines. A block cell stacks them whatever the
     desktop rule does next. At 13.5px the widest value, 10 YEAR WARRANTY,
     is ~122px against the cell's ~152px of text room. The ≤1000px border
     rules above still draw the grid lines; round 1's badge sizes left with
     the badges. */
  .hv2-proof {
    order: 1;
    margin: 22px 22px 0;
    grid-template-columns: 1fr;
    background: #070707;
  }
  .hv2-proof-cell {
    display: block;
    padding: 9px 10px 10px;
    text-align: center;
  }
  .hv2-proof-v { font-size: 13.5px; line-height: 1.1; }
  .hv2-proof-l { font-size: 8.5px; letter-spacing: 0.1em; margin-top: 4px; }
}

/* ============================================================
   PHONES ONLY (≤860px) — phone round 2, 2026-09-03. The fold's picture is
   now the lit Q-200 stick (film.css: .hv2-sticky::before, order 1), not
   the SynQ-S keypad, which rides down to its own beat — the blind critic's
   remaining gap was that the first screen showed an unlit grid of buttons
   where the lights the company sells should be. The slots above hold; the
   numbers move: with the 80px header, the headline (two lines at 40px)
   ends at 168, the h1 at 218, the price row at 240, the lit light (6px
   under it, 247px tall) at 494 and the button below it at 544 — 12px above
   the 288px consent bar's 556px edge; the strip starts under it at 566.
   The button keeps its 8px: the master's reflection has faded to black
   ~8px above the box's bottom edge, so 16px of black already separate the
   glow from the red. The price line and the strip cells are blocks now
   (see the round-1 block above): the fold's round 3 changed their markup
   under the flex rules. KEEP IN SYNC with film.css.
   ============================================================ */
@media (max-width: 860px) {
  .hv2-identity .hv2-cta-row { margin-top: 8px; }
}

/* A rule set that styled the measurement harness's consent-bar stand-in
   (#hv2-cookie-fixture) stood here after phone round 3. Removed 2026-09-04:
   test fixtures are the harness's to shape, never a shipping sheet's. */


/* ============================================================
   PHONES ONLY (≤860px) — phone round 4, 2026-09-03: THE FOLD SELLS THE
   LIGHT IT SHOWS. The blind critic saw round 3 and named the gap: the hero
   "leads with a $1,099 controller and an Explore button, so a first-time
   buyer who came for lights and sirens sees neither the product they want
   nor a shop path until the third screen". Phone round 2 had already put a
   lit Q Series 200 stick on the fold; the words under it still sold SynQ —
   the price line said "controllers", the one button said "Explore" — and
   on a phone the store is NOT one tap away in the header the way the
   fold's own round 3 counted on (PRODUCTS is behind the hamburger here).
   Apple's phone fold is name → the product → Buy → price, and nothing on
   it contradicts the picture. So, on phones:
     - the price line is off the fold (display: none). "SynQ controllers
       from $1,099" under a Q Series light was the sentence the critic read
       as what we sell. The fold's number is the SynQ series' entry price
       (_home_v2_fold.php computes only that), so there is no honest line
       to put under a Q Series door without a PHP change; the Trifecta
       shows all three "From" prices two screens down;
     - the h1 steps up to 17px: with the price line gone it is the fold's
       one sentence about what Feniex makes and where;
     - the one button under the light is the Q Series beat's own door,
       "Shop the Q Series" — film.css lifts it onto the fold as the page's
       red button, same href, same tracking name. The identity block's
       Explore SynQ leaves the fold and closes the film column instead
       (order 4, after the SynQ-S beat and its own door) as a ghost button,
       the Three Ways / Trifecta secondary-door treatment, so his primary
       and its GA4 event stay on the phone page — just not as the fold's
       one action;
     - the proof strip's labels step up from 8.5px to the desktop's 10px
       (8.5px mono was the smallest text on the page) and the values to
       14px; two of the four labels now wrap to a second line inside their
       cell, which only makes the card taller. It still sits under the
       button: a 288px bar leaves 476px under the header, and the card
       (~142px) cannot clear it beside a product worth showing — even with
       the stick shrunk to 300px wide the button ends at 478 and the card
       at 634. It is on screen the moment the bar is gone.
   The screen: header 80, headline to 168, h1 to 220, the light to 473,
   the button (46px: the 44px tap floor with room) to 527 — 29px above the
   bar's 556 edge; the card starts 32px under the button at ~560, under
   the bar, never a hairline peeking above it. KEEP IN SYNC with film.css.
   ============================================================ */
@media (max-width: 860px) {
  .hv2-category { font-size: 17px; color: rgba(244, 245, 247, 0.94); }
  /* Explore SynQ: the column's last row, a full-width ghost button. Three
     classes, later than the fold's own phone rule on the same selector;
     the hover at four so base.css's .hv2-btn:hover lift never applies. */
  .hv2-identity .hv2-cta-row { order: 4; margin: 16px 22px 0; }
  .hv2-identity .hv2-cta-row .hv2-btn {
    padding: 15px 12px;
    background: transparent;
    border-color: rgba(255, 255, 255, 0.26);
    transform: none;
  }
  .hv2-identity .hv2-cta-row .hv2-btn:hover,
  .hv2-identity .hv2-cta-row .hv2-btn:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
    transform: none;
  }
  .hv2-proof { margin-top: 32px; }
  .hv2-proof-cell { padding: 11px 10px 12px; }
  .hv2-proof-v { font-size: 14px; }
  .hv2-proof-l { font-size: 10px; letter-spacing: 0.1em; }
}