/*
 * Hero section:
 * - Column: 1252px wide, centered (130px margins on 1512px viewport)
 * - Hero starts 27px below nav (corner bracket at that point)
 * - Hero content padding-left: 38px (logo/text starts at col-left + 38px)
 * - Heading font: Geist Medium 72px (the original spec here read "~60px Inter
 *   800" in a "488x105px heading box"; the box is gone — heading leading now
 *   comes from --h1-size / --h1-leading in variables.css, not from padding)
 */

.hero {
  position: relative;
  margin-top: 27px;
  padding: 32px 38px 23px;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255,255,255,0.2);
  pointer-events: none;
}

/* Orange corner brackets — L-shape from the shared .bracket primitive
   (css/brackets.css); these rules only position them on the tram lines. */
.hero__corner--bl {
  bottom: 0; left:  var(--rail-edge);
}
.hero__corner--br {
  bottom: 0; right: var(--rail-edge);
}

.hero__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}

.hero__line {
  display: block;
  font-family: var(--h1-font);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: var(--h1-color);
  /* Each authored line is its own block, so the gap between them USED to come
     from vertical padding here (line-height was 1.0) — which meant the spacing
     didn't scale with the font size, differed per hero variant, and collapsed to
     1.0 the moment a line wrapped. Leading is --h1-leading now, so this stacks at
     the same rhythm a wrapped line uses. The padding is horizontal only: an 18px
     inset that .hero__demo-btn's `left` lines up against. It is declared as
     `padding-inline` on purpose — the shorthand is what let vertical padding
     creep back in and masquerade as leading. Don't convert it back. */
  padding-inline: 18px;
  width: fit-content;
  position: relative;
}

.hero__line--1 {
  z-index: 1;
}

.hero__line--2 {
  z-index: 0;
}

.hero__sub {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 38px;
  opacity: 0.9;
}

.hero__ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

/* Buttons */
.btn {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  /* No text-transform on purpose: a button's label renders exactly as it's typed
     in the CMS, so an editor can write "ASK quixAI" and keep the casing. Labels
     that should shout are authored in caps in the content file. */
  padding: 12px 22px 13px;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: opacity 0.2s;
  position: relative;
  white-space: nowrap;
}
.btn:hover { opacity: 0.8; }

/* Some CTAs are actions, not links (the homepage "Ask AI" button), so they're a
   real <button>. reset.css already strips the UA button box (border/background/
   font); this pins the two things it leaves to the UA, so the button renders
   identically to the <a> buttons beside it. */
button.btn {
  line-height: inherit;
  margin: 0;
}

.btn--solid {
  background: var(--white);
  color: var(--black);
  border: 1px solid rgba(0,0,0,0.12);
}

.btn--solid::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* Outline button: corner brackets via pseudo-element, pushed 2px outward */
.btn--outline {
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.20);
}

.btn--outline::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--white), var(--white)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--white), var(--white)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--white), var(--white)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--white), var(--white)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--white), var(--white)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* Third variant: DARK translucent fill, white hairline border, ORANGE brackets — the
   secondary CTA for sitting over imagery/video, where --outline's white-on-white
   brackets go mushy and --solid's white slab shouts louder than the primary CTA.
   Was inlined on the use-case hero CTA (css/use-case.css) until the product page's one-pager
   buttons needed the same treatment; promoted here on the second use rather than
   copy-pasting the bracket block a third time. */
.btn--dark {
  background: rgba(0, 0, 0, 0.35);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.btn--dark::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--orange), var(--orange)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* Modifier for .btn--dark over busy photography (the product hero's EXPLORE THE
   WORKFLOW): a slightly deeper tint plus a backdrop blur, so the label stays
   legible over the hero image. Use as `btn btn--dark btn--glass`. */
.btn--glass {
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Fourth variant: for LIGHT (#DADADA) surfaces — see-through fill, ORANGE hairline
   border, BLACK corner brackets, black label. The inverse of --dark's treatment:
   on grey, orange brackets lose contrast, so the orange moves to the border. First
   used by the product page's modules (css/product-module.css). */
.btn--light {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--orange);
}

.btn--light::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  background:
    linear-gradient(var(--black), var(--black)) top    left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) top    left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--black), var(--black)) top    right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) top    right / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--black), var(--black)) bottom left  / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) bottom left  / var(--bracket-w) var(--bracket)  no-repeat,
    linear-gradient(var(--black), var(--black)) bottom right / var(--bracket) var(--bracket-w) no-repeat,
    linear-gradient(var(--black), var(--black)) bottom right / var(--bracket-w) var(--bracket)  no-repeat;
}

/* ── Product page hero ───────────────────────────────────────────────────
 * Centred heading (one CMS field, line break set with a literal <br> — see
 * lib/headings.ts), with the BOOK A DEMO button centred below it in
 * .hero__ctas, like the home hero. The heading used to be three staggered
 * spans (left / centre / right) with the button pinned beside the last line.
 */
/* Taller hero to match the index page's spacious feel; the background image
   (sized to the hero's bottom in product.html) grows with it. */
.hero--product {
  padding-top: 110px;
  padding-bottom: 150px;
}

.hero__content--product {
  position: relative;
}

/* One flat run of text plus <br>s, not per-line .hero__line spans, so it
   carries the H1 type itself (as .hero__heading--industry does) and is a block,
   not .hero__heading's flex column — a flex container would turn each text run
   and <br> into separate flex items. */
.hero__heading--product {
  display: block;
  font-family: var(--h1-font);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: var(--h1-color);
  text-align: center;
  margin-bottom: 38px;
}

/* ── Industry page hero ──────────────────────────────────────────────────
 * Left-aligned stack: H1 (Geist Medium 72), supporting subheading (Geist
 * Regular 18), then a BOOK A DEMO button — all flush left, in normal flow.
 */
.hero--industry {
  min-height: 782px;
  padding-top: 110px;
  padding-bottom: 150px;
}

/* The logos section (z-index:2) overlaps the hero's bottom edge by 60px and,
   being later in the DOM, its fade paints over the bottom corner brackets at
   an equal z-index. Lift them one layer above the fade. */
.hero--industry .hero__corner--bl,
.hero--industry .hero__corner--br {
  z-index: 3;
}

.hero__content--industry {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero__heading--industry {
  font-family: var(--h1-font);
  font-weight: var(--h1-weight);
  font-size: var(--h1-size);
  line-height: var(--h1-leading);
  letter-spacing: var(--h1-tracking);
  color: var(--h1-color);
  /* One flat run of CMS text with no per-line spans, so it wraps freely. At the
     old 1.0 leading its descenders ran into the next line's caps. */
  margin: 0 0 24px;
}

.hero__subheading {
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: 18px;
  line-height: 1.5;
  color: var(--white);
  max-width: 640px;
  margin: 0 0 32px;
}

/* The home hero is centre-aligned (unlike the left-aligned industry/about ones),
   so its supporting line centres with the H1 above it. */
.hero__subheading--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ── Industry hero stat strip ────────────────────────────────────────────
 * A 200px-tall band pinned to the hero bottom, spanning the tram lines and
 * split into three equal cells. The top edge is the shared full-bleed rule;
 * interior borders divide the thirds; 8px orange squares mark every point
 * where the rule crosses a vertical line (the two tram edges + two interior
 * dividers).
 */
.hero__stats {
  position: absolute;
  /* Left/right edges sit exactly on the vertical tram rules (same var the
     hero corner brackets use), so they track the viewport-dependent rail
     position and the three cells flex with it. */
  left: var(--rail-edge);
  right: var(--rail-edge);
  bottom: 0;
  height: 200px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  z-index: 2;
}

/* Top divider — modelled on the site's rule lines (full-bleed, white@20%). */
.hero__stats::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.hero__stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 36px;
}

/* Interior vertical dividers between the thirds (outer edges are the page
   tram lines). */
.hero__stat + .hero__stat {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* 95px is the design size, but a cell is only (rail / 3 − 2×36px padding) wide
   and some stats are multi-word ("10s of TB", "2-20 GB", "6 weeks"). At 95px the
   widest of those needs ~400px, more than a cell has below ~1560px, and a wrapped
   value overflows the 200px band. So the size is capped at 95px and otherwise
   derived from the cell: the divisor is the widest stat run measured in Geist
   Regular (~4.2× the font size) plus a little headroom. Same rule on industry and
   use-case pages — the two strips are one component. */
.hero__stat-value {
  --stat-cell: calc(min(var(--rail-width), 100vw - 2 * var(--rail-min-margin)) / 3 - 72px);
  font-family: var(--font-sans);
  font-weight: 400;            /* Geist Regular */
  font-size: min(95px, calc(var(--stat-cell) / 4.4));
  line-height: 1;
  color: var(--white);
}

.hero__stat-label {
  font-family: var(--font-pixel);   /* Geist Pixel (square) */
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
}

/* Orange squares at the four rule/line crossings. */
.hero__stats-node {
  position: absolute;
  top: 0;
  width: 8px;
  height: 8px;
  background: var(--orange);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.hero__stats-node--1 { left: 0; }
.hero__stats-node--2 { left: 33.333%; }
.hero__stats-node--3 { left: 66.667%; }
.hero__stats-node--4 { left: 100%; }

/* ── Full-height heroes (desktop) ─────────────────────────────────────────
 * Product, blog and industry heroes fill the viewport: nav + hero = 100vh, so
 * the section below (or, on industry, the customer-logo strip) starts exactly
 * at the fold. The 27px is the hero's margin-top below the 64px nav (see the
 * .hero rule at the top of this file). Content is vertically centred.
 *
 * Scoped to >1300px so mobile.css (max-width:1300px) keeps its own compact
 * hero. Industry omits min-height here: its exact height is finished in JS
 * (industry.html) because it must leave room for the logo strip pinned at the
 * foot of the first screen — only its centring/padding live here.
 */
@media (min-width: 1301px) {
  .hero--product {
    min-height: calc(100vh - var(--nav-height) - 27px);
    padding-top: 64px;
    padding-bottom: 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero--industry {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 64px;
    /* Clear the 200px stat strip pinned at the hero foot, so centred content
       sits in the space above it. */
    padding-bottom: 200px;
  }

  /* Home: the heading, subheading and CTAs sit centred in the first screen.
   * The customer-logo strip below is pinned to the fold by logos-pin.js, so the
   * space the hero gets is the viewport minus the nav, the hero's 27px offset,
   * and the strip's own height (273px = 80px top padding + label + 70px logo
   * row + 56px bottom padding, measured). Sizing the hero to exactly that also
   * lands its bottom edge — the full-bleed rule and the two orange corner
   * brackets on it — right where the strip begins, at any window height, and
   * leaves the strip its natural height so logos-pin.js never has to stretch it.
   * The corner brackets are position:absolute, so flex doesn't lay them out.
   */
  .hero--home {
    min-height: calc(100vh - var(--nav-height) - 27px - 273px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Balanced so the centring is true: the space above the content is this
       padding-top PLUS the hero's 27px margin-top (14+27=41), which is what the
       padding-bottom matches. The pair still sums to the base rule's 55px, so
       the hero's natural height — what it falls back to on a window too short
       for the min-height — is unchanged. */
    padding-top: 14px;
    padding-bottom: 41px;
  }
}

/* At ≥1920 the logo strip's top padding grows to 108px (logos.css), making the
   strip 301px tall — so the hero gets 28px less. */
@media (min-width: 1920px) {
  .hero--home {
    min-height: calc(100vh - var(--nav-height) - 27px - 301px);
  }
}