/* ============================================================
   FROST LABS — HOME PAGE STYLESHEET (front-page only)
   Homepage-exclusive sections: Hero, value Pillars, Calculator
   teaser. Loaded only on the front page (depends on base.css).
   Design System v1.0, verbatim.
   ============================================================ */

/* ============================================================
   SECTION: Hero
   ============================================================ */
/* Art-directed hero: full-width split. Text aligns to the content frame on the
   left; the render fills the right track and bleeds to the screen edge so it reads
   as a dominant, intentionally-placed element — not an image floating in a column. */
.hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.25fr); align-items: center; gap: var(--sp-8); min-height: 620px; padding-block: var(--sp-16); }
.hero__copy { padding-left: calc((100vw - min(100vw, var(--container))) / 2 + var(--gutter)); padding-right: var(--sp-2); }
.hero__kicker { display: block; margin-bottom: var(--sp-5); }
/* Recomposed for the short two-line headline: larger, bolder lines that hold the
   original block's visual weight without widening the column or moving the image. */
.hero__title { color: var(--text-primary); font-size: clamp(40px, 4.5vw, 60px); line-height: 1.06; letter-spacing: -0.04em; text-wrap: balance; }
.hero__sub { margin-top: var(--sp-5); max-width: 460px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-8); }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-4); font-size: 13px; color: var(--text-muted); }
.hero__trust li { display: inline-flex; align-items: center; gap: 6px; }
.hero__trust svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }
/* Hero render integrated into the page (no frame/box): the render's black studio
   backdrop is dissolved into the near-black page with 'lighten', and its own
   directional lighting becomes the hero light. Edges feathered, product untouched. */
.hero__media { position: relative; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.hero__media img {
  width: 100%; max-width: 980px; height: auto; max-height: 80vh; object-fit: contain;
  mix-blend-mode: lighten;                /* black bg merges with the page; product (brighter) passes through */
  -webkit-mask-image: radial-gradient(118% 132% at 50% 46%, #000 64%, transparent 100%);
          mask-image: radial-gradient(118% 132% at 50% 46%, #000 64%, transparent 100%); /* soft edge feather */
}

/* ============================================================
   SECTION: Why Frost Labs (value pillars)
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.pillar { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--sp-6); }
.pillar__icon { width: 28px; height: 28px; color: var(--accent); margin-bottom: var(--sp-3); }
.pillar__title { font-size: 20px; font-weight: 600; color: var(--text-primary); margin-bottom: var(--sp-2); }

/* ============================================================
   SECTION: Calculator teaser
   ============================================================ */
.calc { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--sp-12); display: grid; grid-template-columns: 1fr auto; gap: var(--sp-10); align-items: center; }
.calc__body { max-width: 460px; }
.calc__title { color: var(--text-primary); margin-block: var(--sp-3); }
.calc__cta { margin-top: var(--sp-6); }
.calc__media img { max-height: 200px; object-fit: contain; transform: scale(1.4); transform-origin: center; }  /* +40% visual presence; layout box unchanged so section height/text/CTA stay put */

/* ============================================================
   RESPONSIVE (homepage-only)
   ============================================================ */
/* Hero stacks below the split breakpoint: text, then the render centered */
@media (max-width: 1139px) {
  .hero { display: block; min-height: 0; overflow: visible; }
  .hero__copy { padding-left: var(--gutter); padding-right: var(--gutter); }
  .hero__media { justify-content: center; margin-top: var(--sp-8); }
  .hero__media img { max-width: 560px; }
}

@media (max-width: 900px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .calc__media { display: none; }
}

@media (max-width: 600px) {
  .pillars { grid-template-columns: 1fr; }
}