/* sy-fiscal.css — Fiscal.ai-inspired typographic redesign (2026-06-10)
   Big-grotesque display type, white pill CTAs, chip eyebrows, alternating
   dark/cream bands, hairline feature grid. SiteYield palette unchanged:
   gold #E8C87A · ivory #F5F1EC · dark #0E0F13. Loads AFTER styles.css and
   the inline eb2 block — overrides only, no structural dependencies. */

/* ── BRAND ALIGNMENT (2026-06-10): the feasibility report — the artifact
   prospects actually receive — lives on deep navy #1C2436 with bronze-gold
   #C7A36B. The site now sits on the same navy family so report and website
   read as one brand. Gold accents unchanged. */
:root{
  --bg-base:#121826;        /* navy-black page base */
  --bg-card:#1C2436;        /* the report cover navy, exactly */
  --bg-elevated:#242E44;
  --sy-navy:#1C2436;
  --sy-bronze:#C7A36B;      /* report gold — available for print-matching accents */
}
body{background:#121826!important}

/* ── FAILSAFE VISIBILITY (2026-06-10) ──────────────────────────────────
   Hero/section content was relying on entrance animations that start at
   opacity:0 — any cache mix, reduced-motion setting, or script race left
   the page looking EMPTY. Content visibility must never depend on
   animation state. Entrance fades are sacrificed for guaranteed text. */
/* 2026-07-02: narrowed to the HERO only. The old blanket
   `.reveal-on-scroll, .reveal-on-scroll *` variant force-disabled every
   scroll animation on the page AND broke JS-managed visibility inside
   reveal sections (the pipeline crossfade showed all 5 shots stacked).
   The no-JS guarantee moved to progressive enhancement: scroll animations
   only arm once sy-scrollfx.js stamps `html.sy-anim` at boot — if scripts
   never run, nothing on the page ever starts hidden. */
.eb2-tag, .eb2-h1, .eb2-sub, .eb2-cta, .eb2-meta, .eb2-foot, .eb2-hero *{
  opacity:1!important;
  transform:none!important;
  animation-play-state:running!important;
}

/* ── Display typography ────────────────────────────────────────────── */
.eb2-h1{
  font-family:var(--font-display)!important;
  font-weight:600!important;
  font-size:clamp(33px,4.4vw,58px)!important;
  line-height:1.05!important;
  letter-spacing:-.045em!important;
}
.section-h2, .gs-h2{
  font-family:var(--font-display)!important;
  font-weight:600!important;
  font-size:clamp(40px,5.2vw,72px)!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
}
.eb2-sub{font-size:18px!important;line-height:1.6!important;max-width:600px!important}
/* short viewports: shrink the hero headline so it clears the centred SiteYield.ai in the video */
@media(max-height:820px){.eb2-h1{font-size:clamp(30px,3.5vw,46px)!important}.eb2-sub{font-size:16px!important;line-height:1.5!important}}
@media(max-height:680px){.eb2-h1{font-size:clamp(26px,3vw,38px)!important}.eb2-sub{font-size:14.5px!important}}
.section-lede{font-size:19px!important;line-height:1.62!important;max-width:680px!important}
.feature-title{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em}

/* ── Section kicker — editorial rule + label, NOT a boxed chip ───────
   The old pill border made these read as stray little buttons. This is a
   confident section marker: a short gold accent rule, then an uppercase
   gold label with generous tracking. Subordinate to the H2, clearly
   intentional. */
.section-eyebrow{
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--font-mono),'IBM Plex Mono',monospace;font-size:12.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sy-gold,#C6A664);
  background:none;border:0;padding:0;border-radius:0;margin-bottom:22px;
}
.section-eyebrow::before{
  content:'';width:30px;height:2px;border-radius:2px;flex:none;
  background:linear-gradient(90deg,var(--sy-gold,#C6A664),rgba(198,166,100,.12));
  box-shadow:none;
}
/* centered sections (features/gallery): the eyebrow becomes a full-width
   flex row so the rule+label lockup centers under the centered headline */
.features .section-eyebrow,.gallery .section-eyebrow{display:flex;justify-content:center}

/* ── CTAs → clean white pill + arrow ───────────────────────────────── */
.eb2-btn{
  background:var(--sy-gold)!important;color:#0E131A!important;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.45)!important;
  font-weight:600!important;padding:16px 28px!important;
}
.eb2-btn:hover{box-shadow:0 16px 38px -12px rgba(198,166,100,.4)!important}
.eb2-btn2{padding:15px 26px!important}

/* ── Floating pill nav ─────────────────────────────────────────────── */
.nav{top:14px!important}
.nav-pill{
  border-radius:100px!important;
  background:rgba(14,15,19,.72)!important;
  backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
  border:1px solid rgba(245,241,236,.1)!important;
  box-shadow:0 12px 40px -18px rgba(0,0,0,.7)!important;
}

/* ── LIGHT BAND — features section flips to ivory (Fiscal alternation) */
/* unified to the app's all-dark look (was a Fiscal ivory alternation band) */
#what.features{
  background:transparent;
  border-top:1px solid var(--sy-line);
  border-bottom:1px solid var(--sy-line);
}
#what .section-h2 em{color:var(--sy-gold)}
#what .feature-group-letter{color:var(--sy-gold);border-color:var(--sy-gold-line);background:var(--sy-gold-soft)}
#what .feature-icon{color:var(--sy-gold)}
#what .feature{background:transparent;border:none}

/* Hairline grid dividers (Fiscal's "What's inside" treatment) */
#what .features-grid{
  gap:0!important;border-top:1px solid rgba(20,20,22,.1);border-left:1px solid rgba(20,20,22,.1);
}
#what .features-grid .feature{
  padding:30px 28px!important;margin:0!important;border-radius:0!important;
  border-right:1px solid rgba(20,20,22,.1)!important;
  border-bottom:1px solid rgba(20,20,22,.1)!important;
  box-shadow:none!important;
}
#what .features-grid .feature:hover{background:rgba(154,123,51,.045)!important;transform:none!important}

/* ── Mobile sanity ─────────────────────────────────────────────────── */
@media(max-width:680px){
  .eb2-h1{font-size:clamp(40px,11vw,54px)!important}
  .section-h2{font-size:clamp(32px,8.6vw,42px)!important}
  #what .features-grid .feature{padding:24px 20px!important}
}