/* =========================================================================
   compact-hero — NEW component for /technology. v0.1 (2026-04-26).
   Shallower variant of the page hero used on /home. Same gradient family,
   visibly less depth so /technology reads as a "depth page" siblng of /,
   not a peer landing page. Sources tokens from webshield-navy.css.

   Three variants explored (toggled via class on root):
     • .ws-chero                     — variant A · "ledger" — left rail
                                         mirrors the universal-card rail
                                         rhythm so the hero reads as part
                                         of the system. Closest sibling
                                         to the home hero shape.
     • .ws-chero--centered           — variant B · centered prospectus.
                                         Brand mark + title + subtitle
                                         stacked center, single column.
     • .ws-chero--banner             — variant C · low banner. Title +
                                         subtitle on one row of bone
                                         against a thin navy gradient
                                         band. Smallest vertical footprint.

   Slot for optional below-hero credibility bar: render the locked
   .ws-credibility-bar--tight component as an immediate sibling section
   following <section class="ws-chero">. Tokens make them rest flush.

   No new tokens. No new colors. All values reference webshield-navy.css.
   ========================================================================= */

/* ── Shared (variant A · ledger) ─────────────────────────────────── */
.ws-chero {
  background: linear-gradient(180deg, var(--ws-ink) 0%, var(--ws-ink-deep) 100%);
  color: var(--ws-page);
  border-bottom: 1px solid var(--ws-accent-soft);
  font-family: var(--ws-font-body);
}

.ws-chero__wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 48px 52px;
  display: grid;
  grid-template-columns: var(--ws-uc-rail-width) 1fr;
  gap: var(--ws-uc-col-gap);
  align-items: end;
}

.ws-chero__rail {
  border-left: 2px solid var(--ws-accent);
  padding-left: 14px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 4px;
}

.ws-chero__rail-ordinal {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ws-chero__rail-label {
  font-family: var(--ws-font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--ws-page);
  opacity: 0.92;
}

.ws-chero__body {
  align-self: end;
}

.ws-chero__eyebrow {
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-label);
  letter-spacing: var(--ws-tracking-label);
  text-transform: uppercase;
  color: var(--ws-accent);
  font-weight: 600;
  margin-bottom: 14px;
}

.ws-chero__title {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-display-lg);
  font-weight: 500;
  line-height: var(--ws-lh-tight);
  letter-spacing: -0.015em;
  color: var(--ws-page);
  margin: 0 0 14px;
  max-width: 720px;
}

.ws-chero__subtitle {
  font-family: var(--ws-font-display);
  font-size: var(--ws-fs-lede);
  font-weight: 400;
  line-height: var(--ws-lh-lede);
  color: var(--ws-page);
  opacity: 0.78;
  margin: 0;
  max-width: 640px;
  font-style: italic;
}

/* ── Variant B · centered prospectus ─────────────────────────────── */
.ws-chero--centered .ws-chero__wrap {
  grid-template-columns: 1fr;
  text-align: center;
  padding: 64px 48px 56px;
  align-items: center;
}

.ws-chero--centered .ws-chero__rail {
  border-left: none;
  padding-left: 0;
  align-items: center;
  justify-content: center;
  padding-bottom: 18px;
}

.ws-chero--centered .ws-chero__rail-ordinal {
  margin-bottom: 4px;
}

.ws-chero--centered .ws-chero__rail-label {
  display: none;
}

.ws-chero--centered .ws-chero__title,
.ws-chero--centered .ws-chero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

.ws-chero--centered .ws-chero__eyebrow {
  margin-bottom: 10px;
}

/* ── Variant C · low banner ──────────────────────────────────────── */
.ws-chero--banner {
  background: linear-gradient(90deg, var(--ws-ink) 0%, #0E2748 60%, #112E54 100%);
  border-bottom: 2px solid var(--ws-accent);
}

.ws-chero--banner .ws-chero__wrap {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 36px 48px 32px;
  gap: 48px;
}

.ws-chero--banner .ws-chero__rail {
  display: none;
}

.ws-chero--banner .ws-chero__title {
  font-size: 30px;
  margin-bottom: 8px;
  max-width: 760px;
}

.ws-chero--banner .ws-chero__subtitle {
  font-style: normal;
  font-family: var(--ws-font-body);
  font-size: var(--ws-fs-body);
  max-width: 540px;
}

.ws-chero--banner .ws-chero__meta {
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  color: var(--ws-accent);
  text-align: right;
  white-space: nowrap;
  align-self: center;
}

.ws-chero--banner .ws-chero__meta-line {
  display: block;
  color: var(--ws-page);
  opacity: 0.7;
  margin-top: 4px;
  font-size: 10.5px;
}

/* ── Below-hero tight credibility bar — sits flush on bone ───────── */
.ws-chero + .ws-credibility-bar--tight {
  border-top: none;
}

/* ── Variant · portal (cream surface) ──────────────────────────────
   Role-based variant for navigational / portal pages — /home and
   /patents. Inverts the navy variant across a cream surface: flat
   var(--ws-page), navy text, gold accent on rail and eyebrow.

   Markup contract is identical to bare .ws-chero. Migration is a
   single class addition on the <section> root: from
       <section class="ws-chero">
   to
       <section class="ws-chero ws-chero--portal">

   Surface is FLAT — not a gradient. Eliminates the gradient-direction
   inconsistency between the prior .ws-hero implementations on home
   (surface-2 → page) and patents (page → surface-2). One surface,
   one rule.

   Subtitle italic is INHERITED from base .ws-chero__subtitle.
   Locked across variants — one dek treatment site-wide. Do not
   override font-style here. */

.ws-chero--portal {
  background: var(--ws-page);
  color: var(--ws-ink);
  border-bottom: 1px solid var(--ws-rule);
}

.ws-chero--portal .ws-chero__title {
  color: var(--ws-ink);
}

/* Subtitle — muted navy at full opacity. The navy variant uses
   opacity 0.78 to mute bone-on-navy; on cream we mute by token
   (var(--ws-ink-muted)) instead, which keeps the dek crisp. */
.ws-chero--portal .ws-chero__subtitle {
  color: var(--ws-ink-muted);
  opacity: 1;
}

/* Rail label — supporting text. Same logic as subtitle: mute by
   token, not by opacity, on a light surface. */
.ws-chero--portal .ws-chero__rail-label {
  color: var(--ws-ink-muted);
  opacity: 1;
}

/* ── Variant · feature (display-scale register) ─────────────────────
   Orthogonal modifier — combines with surface variants (bare navy or
   --portal cream). Used on landing-tier pages where the hero headline
   carries front-door emphasis: /home today; reserved for future
   landing/launch pages.

   What it changes (title only — surface, color, layout, rail,
   eyebrow, subtitle, CTAs all inherit from the surface variant
   unchanged):
     • title font-size       → clamp(36px, 4.6vw, 58px)   (from 40px flat)
     • title line-height     → 1.08                        (from --ws-lh-tight = 1.15)
     • title letter-spacing  → -0.018em                    (tighter than the body register's -0.015em)
     • title max-width       → 960px                       (from 720px — wider line-length to match larger size)
     • title text-wrap       → balance                     (multi-line balance for big display copy)

   Rationale: at ~55–58px desktop the body register's loose
   line-height and softer tracking read wrong; the feature register
   restores the typographic decisions /home made pre-migration. The
   clamp's 36px floor keeps the headline larger than the body
   register's 30px mobile fallback at ≤720px viewports — feature
   pages stay visibly larger across all viewports.

   Specificity: .ws-chero--feature .ws-chero__title (0,2,0) beats
   the responsive .ws-chero__title (0,1,0) override at ≤720px without
   needing a separate media-query rule.

   Not intended to combine with .ws-chero--banner (banner is
   intentionally low-vertical-footprint; feature is the opposite). */

.ws-chero--feature .ws-chero__title {
  font-size: clamp(36px, 4.6vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  max-width: 960px;
  text-wrap: balance;
}

/* ── Rail tagline · optional third rail row (both variants) ────────
   Mono micro-copy beneath __rail-label. Used by /home and /patents.
   Color follows the variant's __rail-label treatment:
     • navy variant   — bone @ 92% opacity (matches __rail-label)
     • portal variant — ink-muted @ full opacity (matches portal __rail-label)
   Border-top divider tokenized per surface — accent-soft on navy,
   rule-faint on cream. */

.ws-chero__rail-tagline {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--ws-accent-soft);
  font-family: var(--ws-font-mono);
  font-size: var(--ws-fs-micro);
  letter-spacing: var(--ws-tracking-mono);
  line-height: 1.5;
  color: var(--ws-page);
  opacity: 0.92;
}

.ws-chero--portal .ws-chero__rail-tagline {
  border-top-color: var(--ws-rule-faint);
  color: var(--ws-ink-muted);
  opacity: 1;
}

/* ── CTA group · optional below subtitle in __body (both variants) ──
   Two-button pair — primary (filled) + ghost (border-only) — is the
   home pattern. /investors currently uses a page-local
   .ws-iv-hero-cta class; promotion lets investors collapse that
   page-local CSS into the component in a follow-up. */

.ws-chero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;                       /* raw — between sp-3 (12) and sp-4 (16); preserves /home's existing rhythm */
  margin-top: var(--ws-sp-7);
}

.ws-chero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--ws-sp-2);
  padding: 14px 22px;              /* y is raw (between sp-3/sp-4); x = sp-5 */
  font-family: var(--ws-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 120ms ease, border-color 120ms ease,
              color 120ms ease, opacity 120ms ease;
}

/* CTA · primary (filled).
   Navy variant: gold-on-navy. Cream variant: navy-on-cream. */

.ws-chero__cta--primary {
  background: var(--ws-accent);
  color: var(--ws-ink);
  border-color: var(--ws-accent);
}
.ws-chero__cta--primary:hover,
.ws-chero__cta--primary:focus-visible {
  background: var(--ws-accent-hover);
  border-color: var(--ws-accent-hover);
  outline: none;
}

.ws-chero--portal .ws-chero__cta--primary {
  background: var(--ws-ink);
  color: var(--ws-page);
  border-color: var(--ws-ink);
}
.ws-chero--portal .ws-chero__cta--primary:hover,
.ws-chero--portal .ws-chero__cta--primary:focus-visible {
  background: var(--ws-ink-deep);
  border-color: var(--ws-ink-deep);
  outline: none;
}

/* CTA · ghost (border-only).
   Navy variant: bone border on navy ground; opacity hint for hover.
   Cream variant: navy border on cream ground; surface-2 tint for hover. */

.ws-chero__cta--ghost {
  background: transparent;
  color: var(--ws-page);
  border-color: var(--ws-page);
  opacity: 0.85;
}
.ws-chero__cta--ghost:hover,
.ws-chero__cta--ghost:focus-visible {
  opacity: 1;
  outline: none;
}

.ws-chero--portal .ws-chero__cta--ghost {
  color: var(--ws-ink);
  border-color: var(--ws-ink);
  opacity: 1;
}
.ws-chero--portal .ws-chero__cta--ghost:hover,
.ws-chero--portal .ws-chero__cta--ghost:focus-visible {
  background: var(--ws-surface-2);
  outline: none;
}

/* CTA · :active — subtle press feedback for all four modifiers.
   1px translate-down reads as a button-press without depending on
   shadow tokens or new colors. */
.ws-chero__cta:active {
  transform: translateY(1px);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ws-chero__wrap,
  .ws-chero--banner .ws-chero__wrap {
    grid-template-columns: 1fr;
    padding: 40px 24px 36px;
    gap: 18px;
  }
  .ws-chero__rail {
    border-left: none;
    padding-left: 0;
    flex-direction: row;
    flex-wrap: wrap;        /* allow rail-tagline (3-child rails on /home + /patents) to wrap to its own line */
    align-items: baseline;
    gap: 12px;
  }
  /* Rail-tagline at mobile: forced onto its own line under the
     ordinal+label row. Tightened vertical spacing vs desktop because
     the surrounding 720px viewport is narrow. Border-top still draws
     as a horizontal divider above the tagline row, matching the
     desktop separator role. */
  .ws-chero__rail-tagline {
    flex-basis: 100%;
    margin-top: 12px;
    padding-top: 8px;
  }
  .ws-chero__title { font-size: 30px; }
  .ws-chero--banner .ws-chero__meta { text-align: left; }
}