/* VectorOS — shared page hero pattern.
   Used by manifest.html, method.html, pricing.html.

   Single source of truth for the first screen of any inner page:
   – mono eyebrow (page id · qualifier)
   – large title (developed thought, ends with a period)
   – one or two lede paragraphs
   – optional CTA row

   Goal: visual consistency on first load. Anything page-specific
   layers on top via its own stylesheet. */

/* =========================================================================
   PAGE HERO
   ========================================================================= */
.page-hero {
  position: relative;
  padding-top: 160px;
  padding-bottom: 112px;
  background: var(--bg-0);
  border-bottom: var(--border-subtle);
  overflow: hidden;
}
.page-hero .shell { position: relative; z-index: 1; }

/* — Eyebrow — mono ID line above the title — */
.page-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-3);
}
.page-hero__eyebrow .v { color: var(--fg-1); }
.page-hero__eyebrow .sep {
  width: 24px;
  height: 1px;
  background: var(--line-2);
  flex-shrink: 0;
}

/* — Title — same scale on every page — */
.page-hero__title {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0 0 36px;
  color: var(--fg-1);
  max-width: 24ch;
  text-wrap: balance;
}
.page-hero__title em {
  font-style: normal;
  color: var(--accent);
}

/* — Lede paragraphs — */
.page-hero__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 60ch;
  margin: 0 0 18px;
  text-wrap: pretty;
}
.page-hero__lede:last-child { margin-bottom: 0; }
.page-hero__lede strong { color: var(--fg-1); font-weight: 500; }

/* — Optional CTA row — */
.page-hero__cta {
  margin-top: 40px;
}

/* — Decoration — faint graticule corner — */
.page-hero__grat {
  position: absolute;
  right: 0;
  top: 120px;
  bottom: 60px;
  width: 280px;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right,  var(--line-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-1) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to right, transparent 0%, black 60%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 60%, black 100%);
}
@media (max-width: 1000px) {
  .page-hero__grat { display: none; }
}
@media (max-width: 720px) {
  .page-hero {
    padding-top: 128px;
    padding-bottom: 80px;
  }
  .page-hero__title { margin-bottom: 32px; }
}