/* ══════════════════════════════════════════════════════════════════════════
   final/css/hero-minimal.css — LANE 27. THE MINIMAL HOME HERO.

   OWNER, 2026-08-26: "in the hero section i dont want the coa tested per
   bublshed lot, vet owned, usa shippping or anything under the browse peptides
   and our standards button. i want it to look more minimalistic like lumina
   research labs hero (also the section below the hero covers all those things
   anyways)."

   THE REMOVAL ITSELF IS NOT IN THIS FILE, AND THAT IS THE POINT. The badge and
   the stats row are DELETED from the markup by final/27-hero-minimal.mjs. Not
   one declaration in this sheet hides an element — a hidden shelf still ships
   "VETERAN owned" and "Shipped from the USA" to every screen reader and to
   llms.txt's readers, which is the failure CLAUDE.md's micro-header rule names
   in so many words. Acceptance asserts it, and it strips comments before it
   looks, because this paragraph is allowed to NAME the thing it forbids while
   the rules below are not allowed to declare it.

   SO WHAT IS LEFT FOR CSS IS TWO THINGS: the rhythm between the three
   survivors (phone-scoped), and a zero floor under the button row, which is the
   block's bottom edge now (every width). Both are below, each with what the
   cascade actually gives it written beside it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── THE PHONE GAPS, GIVEN BACK ────────────────────────────────────────────
   final/css/mobile.css §1c squeezed the phone hero's internal margins and its
   own comment says exactly what it was buying: "MEASURED at 375x812 before this
   block: title 176.9 (4 lines) + cta 116.5 + sub 177 (6 lines) + badge 40.1 +
   stats 67.3 + four margins totalling 109.7 = 687.5px of copy inside a 758px
   hero." The badge and the stats are what made the hero overflow, so the gaps
   were cut to 0.85-1.3rem (sub) and 0.95-1.5rem (CTA) from the 1.5-2.2rem and
   1.75-2.6rem they hold at every other width.

   Those two elements are now gone and the phone hero has ~205px of slack.
   MEASURED live at 390x844 after the strip: the copy column is 305.3px tall
   inside a 784px stage — 39% of it, against 66% before (the copy column ran
   192.0 → 711.0, i.e. 518.9 / 784 = 66.2%; this line read "61%" until the
   adversarial review of 2026-08-26 re-measured it). Leaving the gaps
   squeezed for content that no longer exists is what makes a three-element hero
   read as a cramped six-element one with the bottom cut off.

   HALF THE SLACK IS NOT GIVEN BACK, DELIBERATELY. These clamps land at 21.9px
   and 27.0px at 390x844 (from 16.9 and 20.3) — about 11px of the 205 — because
   the block is CENTRED, so every pixel added to a gap is a pixel taken off the
   air above and below it, and that air is the "minimalistic" the owner asked
   for. The rest of the slack stays as air.

   WHY THE vh TERM AND NOT A FIXED NUMBER: height, not width, is what decides
   whether this hero lands in one screen — mobile.css §1d is a whole media query
   about that. At a 640px-tall phone these resolve to 17.6px and 20.8px, i.e.
   they walk back down on their own toward what §1c held, with 205px of headroom
   underneath them either way.

   SPECIFICITY IS DELIBERATE. mobile.css writes `body .sf-hero .sf-hero-sub`
   (0,2,1) with !important; this sheet loads later but a later file does not win
   against !important on its own, so every rule here is written on
   `body #hero.sf-hero` (1,2,1) and carries !important too. Scoped to #hero, so
   the same classes on any other page are untouched. */
@media (max-width: 620px) {
  body #hero.sf-hero .sf-hero-sub {
    margin-top: clamp(1.1rem, 2.6vh, 1.8rem) !important;
  }
  body #hero.sf-hero .sf-hero-cta {
    margin-top: clamp(1.3rem, 3.2vh, 2.2rem) !important;
  }
}

/* ── THE LAST ELEMENT IS THE BUTTON ROW NOW ────────────────────────────────
   .sf-hero-cta is a flex row of two pills that wrap at narrow widths, and
   sf-refresh.css reserves room OUTSIDE the primary anchor for its circular
   arrow badge. With the badge and the stats gone it is the bottom edge of the
   whole hero block, so any margin below it is measured as dead space in a
   centred column rather than as separation from the next thing. There is none
   to remove today: I grepped every stylesheet in factory/output/core-chain-labs/
   and nothing sets margin-bottom on .sf-hero-cta or .hero-btns (sf-refresh.css
   :888-890 sets the SUB's shorthand `margin: clamp(...) auto 0`, not the CTA's).

   THIS RULE IS A FLOOR, AND !important IS WHAT MAKES IT ONE. Lane stylesheets
   are copied to /sf-final-<id>.css and linked in FILENAME ORDER, so 28
   (shipping-claim), 30 (coa-straight) and every future lane load AFTER this
   one — an equal-specificity rule in any of them would win on order alone.
   Written without !important, as it was until the adversarial review of
   2026-08-26, this was a rule whose comment claimed a guarantee the cascade
   did not give it. What it is honestly worth now: (1,2,1) + !important beats
   any later non-!important rule at any specificity, and loses to a later lane
   sheet's own !important at equal or higher specificity. Nothing in this build
   has one.

   NOTE THAT THIS RULE IS OUTSIDE THE max-width:620px ARM ON PURPOSE — a margin
   below the last element is dead air at every width, not just on a phone. The
   two rules above are the only phone-scoped ones; do not describe this sheet as
   "the max-width:620px arm only". Nothing here changes any measured value at
   any width today: the floor is 0 against a computed 0. */
body #hero.sf-hero .sf-hero-cta {
  margin-bottom: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   THE HERO IS A WHOLE PHONE SCREEN (owner, 2026-08-26)

   "on homepage extend the hero section down longer so it takes up an entire
   phone screen"

   WHAT IT WAS, MEASURED at 393x852 with an iPhone UA before this block: the
   section runs y 60 -> 852, i.e. 792px, and the fold is at 852. So it already
   filled the screen — but only because it is a SCREEN MINUS THE NAV, sitting
   under the nav. sf-refresh.css:753 says so in one line:

       min-height: calc(100dvh - var(--sf-nav-h, 64px));

   That is "the rest of the first screen", and it is a different thing from
   "an entire phone screen". The difference shows the moment the bar scrolls
   out of the way — which on a phone is immediately, because the first flick
   moves the page a nav's height and the next section's edge is already there.
   The owner is asking for the hero to be worth a full screen of scroll, so
   the nav's height comes OUT of the subtraction.

   NOT `100vh`, and the ladder order is not ours to re-open. sf-refresh.css
   carries a comment earned the hard way the same day: vh, then svh, then dvh
   LAST AND DELIBERATE, because svh fills only the URL-bar-visible state and
   with the bar retracted "#categories' white plate peeked into the first
   screen, which is the exact defect the owner filmed". The ladder below is
   the same three in the same order with the same last winner; only the
   subtrahend is gone. This change can only move that white plate FURTHER
   away, never nearer, which is the direction that matters.

   WHY THE SAFE-AREA INSET IS NOT IN THIS EXPRESSION. Lane 26 turns on
   `viewport-fit=cover` this same session, which makes the bar taller by
   env(safe-area-inset-top) and grows the hero's own `margin-top` by exactly
   the same amount (css/nav-fit.css §3c). With `100dvh` measured against a
   viewport that now includes the island, adding an inset term here would
   count it a second time. The two lanes are split along the property, not
   the selector: 26 owns where the hero STARTS, this one owns how TALL it is.

   MEASURED at 393x852 after: the section runs y 60 -> 912, 852px tall — one
   full screen — with the copy column still centred in it (the block is
   display:flex; align-items:center, so 60px of new height is 30px of extra
   air above and below, not a headline stuck to the top).

   SCOPED TO 860px, which is this client's mobile band everywhere else (the
   template's own "Bridge 769-860px" rule is what defines it). Desktop keeps
   the screen-minus-nav hero it was composed for. !important because
   sf-refresh.css:753 wins on specificity otherwise — `body .sf-hero` (0,2,0)
   vs this file's `body #hero.sf-hero` (1,2,1) is a win for us, but lane
   sheets after this one load later and an equal-specificity rule in any of
   them would take it back on order alone. Nothing in this build has one; the
   !important is what makes that a guarantee rather than a fact about today.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  body #hero.sf-hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
  }
}