/**
 * FeatureNews.VIP — base layout, header, footer, buttons, forms, sections.
 * Targets GeneratePress structural markup and FNV semantic classes.
 */

/* ==========================================================================
   1. Layout primitives
   ========================================================================== */

.fnv-container {
  width: 100%;
  max-width: var(--fnv-container-max);
  margin-inline: auto;
  padding-inline: var(--fnv-container-pad);
}

.fnv-section {
  padding-block: clamp(var(--fnv-sp-5), 7vw, var(--fnv-sp-7));
}

/* GeneratePress content wrappers — let our templates run full width.
   GP makes #content a flex row (content + sidebar); this site is sidebar-free,
   so force normal block flow or multi-child templates (archives) lay out
   horizontally instead of stacking. */
.fnv .site-content,
.fnv .content-area,
.fnv .site-main,
.fnv .entry-content {
  display: block;
  max-width: none;
  margin: 0;
}

.fnv .site-main > article > .entry-content { padding: 0; }

/* Strip GP's default underline from all links; specific components re-add as needed. */
.fnv a { text-decoration: none; }
.fnv a:hover { text-decoration: none; }

/* Section heading stack */
.fnv-eyebrow {
  display: inline-block;
  margin: 0 0 var(--fnv-sp-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--fnv-track-wide);
  text-transform: uppercase;
  color: var(--fnv-primary);
}

.fnv-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fnv-sp-3);
  margin-bottom: var(--fnv-sp-4);
}

.fnv-section-head__title {
  margin: 0;
  font-family: var(--fnv-font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
}

.fnv-section-head__desc {
  margin: var(--fnv-sp-2) 0 0;
  max-width: 42rem;
  color: var(--fnv-muted-fg);
  font-size: var(--fnv-text-base);
}

.fnv-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-size: var(--fnv-text-sm);
  font-weight: 700;
  color: var(--fnv-primary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .fnv-viewall { display: none; }
}

/* ==========================================================================
   2. Header
   ========================================================================== */

.fnv .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(0.08 0 0 / 0.8);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--fnv-border);
}

.fnv .site-header .inside-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fnv-sp-3);
  width: 100%;
  max-width: var(--fnv-header-max);
  min-height: var(--fnv-header-h);
  margin-inline: auto;
  /* Deterministic block size (no inherited GP vertical padding) so the full-height
     hero's `calc(100svh - var(--fnv-header-h))` lands exactly. The taller min-height
     gives the logo/menu breathing room while keeping the height predictable. */
  padding-block: 0;
  padding-inline: var(--fnv-container-pad);
}

.fnv .site-header .site-branding { margin: 0; padding: 0; }
.fnv .site-header .site-description { display: none; }

.fnv .site-header .main-title,
.fnv .site-header .main-title a {
  margin: 0;
  font-family: var(--fnv-font-display);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--fnv-fg);
  text-transform: uppercase;
}

.fnv .site-header .main-title a:hover { color: var(--fnv-fg); }

/* Branded logo: neon "F" badge + gradient wordmark */
.fnv .site-header .fnv-logo { display: flex; }

.fnv-logo__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fnv-logo__emblem {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
}

.fnv-logo__lights { color: var(--fnv-primary); margin-bottom: 2px; }

.fnv-logo__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--fnv-bg);
  border: 1.5px solid var(--fnv-primary);
  font-family: var(--fnv-font-display);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--fnv-primary);
}

.fnv-logo__word { display: flex; flex-direction: column; line-height: 1; }

.fnv-logo__name {
  font-family: var(--fnv-font-display);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fnv-primary);
  white-space: nowrap;
}

.fnv-logo__accent { font-style: italic; }

/* Navigation row */
.fnv .main-navigation,
.fnv .main-navigation .inside-navigation {
  background: transparent;
  margin: 0 0 0 auto;
  padding: 0;
  width: auto;
  max-width: none;
}

.fnv .main-navigation .inside-navigation {
  display: flex;
  align-items: center;
  gap: var(--fnv-sp-3);
}

.fnv .main-navigation .main-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.fnv .main-navigation .main-nav ul li { margin: 0; padding: 0; }

.fnv .main-navigation .main-nav ul li a {
  display: inline-flex;
  align-items: center;
  padding: 8px 2px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fnv-muted-fg);
  transition: color var(--fnv-dur) var(--fnv-ease);
}

/* Match GP parent's :not() specificity so we win the cascade and kill the blue. */
.fnv .main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.fnv .main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a,
.fnv .main-navigation .main-nav ul li.sfHover:not([class*="current-menu-"]) > a,
.fnv .main-navigation .menu-bar-item:hover > a,
.fnv .main-navigation .menu-bar-item.sfHover > a,
.fnv .main-navigation .main-nav ul li[class*="current-menu"] > a {
  color: var(--fnv-primary);
}

/* Social icon row appended to the nav (replaces the single IG CTA) */
.fnv-socials-item { margin-left: clamp(28px, 3.2vw, 56px); }
.fnv-socials { display: inline-flex; align-items: center; gap: 18px; }
.fnv-social { display: inline-flex; transition: color var(--fnv-dur) var(--fnv-ease); }
.fnv-social svg { width: 18px; height: 18px; }
/* Gold icons (override the muted nav-link colour); hover -> muted gold. */
.fnv .main-navigation .main-nav ul li a.fnv-social { color: var(--fnv-primary); }
.fnv .main-navigation .main-nav ul li a.fnv-social:hover { color: #9a7f30; }

/* Mobile menu toggle — square button with a centered hamburger icon */
.fnv .main-navigation .menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  line-height: 1;
  color: var(--fnv-fg);
  background: transparent;
  border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-r-sm);
}

.fnv .main-navigation .menu-toggle .gp-icon,
.fnv .main-navigation .menu-toggle svg {
  width: 20px;
  height: 20px;
}

/* Hamburger is mobile-only — the full menu shows inline on desktop. */
@media (min-width: 769px) {
  .fnv .main-navigation .menu-toggle { display: none !important; }
}

@media (max-width: 768px) {
  /* Slimmer header bar on mobile (still tall enough for the logo/menu to breathe). */
  :root { --fnv-header-h: 64px; }

  /* The containing block for the drop-down, and it has to be forced.
     .site-header is position:sticky and full width, so top:100%/left:0/right:0 is
     meant to resolve against it. It did not. GeneratePress gives .inside-navigation
     position:relative, and the shrink-wrap above (width:auto, so it hugs the 44px
     toggle) made it a NEARER positioned ancestor: the opened menu resolved to 37px
     pinned against the right edge, every link clipped to about 8px of a 46px word.
     Neutralising its position here is what actually hands the containing block to
     .site-header. Verified in the live DOM at 375px BEFORE deploy: offsetParent
     becomes HEADER, menu 375px wide at left:0, 0 of 11 links clipped, no page
     scroll. .main-nav is the only absolutely positioned descendant of
     .inside-navigation, so nothing else moves. (HORIZON-20260827-036) */
  .fnv .main-navigation .inside-navigation { position: static; }

  /* Drop-down overlay: floats over the page rather than pushing content down.

     ⛔⛔ THE `.toggled` WAS DROPPED FROM THIS SELECTOR ON PURPOSE
     (`HORIZON-20260828-015`), and it must not be put back. GeneratePress opens
     the menu by flipping `display`, which cannot be transitioned - so the panel
     has to be laid out IDENTICALLY in both states and hidden with `visibility`
     instead. Every declaration that affects the panel's GEOMETRY therefore has
     to apply open and closed alike: this rule, the `> ul` rule below, and the
     `ul li a` row metrics below that. If any one of them stays scoped to
     `.toggled`, the panel re-lays-out at the instant the class lands and the
     close animation snaps instead of sliding.
     ⚠️ DESKTOP IS PROTECTED BY THE `@media (max-width: 768px)` WRAPPER, NOT BY
     `.toggled` - that distinction is what made dropping it safe. Verified at
     1024px with the new rules toggled on and off: 18 computed properties
     compared, zero differences, nav links still 12px.
     ⭐ This theme has NO `.hp-header-icons` inside its nav, which is why it can
     animate the panel directly where `horizon-theme-commerce` cannot. Do not
     read the two themes' solutions as interchangeable. */
  .fnv .main-navigation .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(10, 10, 10, 0.97);
    border-bottom: 1px solid rgba(201, 168, 76, 0.15);
    padding: var(--fnv-sp-1) var(--fnv-container-pad) var(--fnv-sp-3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);

    /* ⛔⛔ SCROLL CONTAINMENT — A LIVE BUG FIX (`HORIZON-20260828-007`).
       Without these the panel has `max-height: none` and `overflow: visible`, so
       a menu taller than the viewport has a tail nothing can reach. ⛔ And it is
       PINNED, which is why page-scrolling is not the escape hatch: this element
       is `position: absolute` and its containing block is `header#masthead`,
       which the rule above deliberately hands it — and that header is
       `position: sticky; top: 0`. Scrolling moves the header to the top and the
       menu travels with it, so the cut-off rows stay cut off.

       Measured at 375x667 BEFORE this landed: 672px tall against a 667px
       viewport, **69px past the bottom**, clipping the `fnv-socials-item` row.
       ⚠️ Milder than the sibling themes — no nav destination was lost, only the
       social icons — but it is a real client site and the same defect.

       ⭐ The allowance is EXACT here, unlike the `hp-*` themes: `top: 100%` of a
       header that starts at the viewport top, and THIS THEME HAS NO ANNOUNCEMENT
       BAR (grepped, zero hits), so the offset is precisely the header height.
       ⚠️ `--fnv-header-h` is redefined to 64px INSIDE this same media block
       (88px on desktop) - the calc picks up the mobile value, which is what the
       measurement confirmed.

       ⛔ THE PANEL HERE IS `.main-nav`, NOT `.inside-navigation`. That element is
       `position: static`, 0px tall and 37px wide on this theme - residue of the
       `-20260827-036` containing-block fix - so pasting the sibling themes'
       selector here would style nothing while appearing to succeed.

       Full write-up: memory `feedback-an-open-mobile-menu-can-be-unreachable`. */
    max-height: calc(100vh - var(--fnv-header-h));
    max-height: calc(100dvh - var(--fnv-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    /* ⛔ `visibility` switches at 0s on OPEN and is delayed .35s on CLOSE. Never
       transition it symmetrically: a stalled transition would leave the menu
       invisible while `.toggled` is set. The delay is what lets the fade play.
       Timing is the "My Links" drawer's own, so the two feel identical
       (`HORIZON-20260828-015`, matching `-20260828-012` on the `hp-*` themes). */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1),
                visibility 0s linear .35s;
  }
  .fnv .main-navigation.toggled .main-nav {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1),
                opacity   .35s cubic-bezier(.4, 0, .2, 1),
                visibility 0s;
  }

  @media (prefers-reduced-motion: reduce) {
    .fnv .main-navigation .main-nav,
    .fnv .main-navigation.toggled .main-nav {
      transition: none;
      transform: none;
    }
  }

  /* ⛔⛔ SELECTED BY ID, AND THE ID IS THE WHOLE POINT (`HORIZON-20260828-015`).
     GeneratePress hides this `<ul>` with
     `.main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul`,
     specificity (0,4,1) — which BEATS the theme-style `.fnv .main-navigation
     .main-nav > ul` at (0,3,1). Measured: the panel stayed 375x33 while closed
     against 375x385 open, so the fade-out had nothing to fade. `#site-navigation`
     makes it (1,3,1) and the id count settles it. ⛔ Do not "tidy" this back to
     the `.fnv .main-navigation` form used by its neighbours, and do not reach for
     `!important` — the id is the honest fix. `display: flex` (not `block`) because
     the open state inherits `flex` from the desktop rule, and the two states must
     match exactly. */
  .fnv #site-navigation .main-nav > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  /* ⛔⛔ `line-height` AND `min-height` ARE LOAD-BEARING (`HORIZON-20260828-009`).
     GeneratePress sets `line-height: 60px` on nav links (full header height), so
     this rule's 14px padding was producing **~89px rows** - measured, only about
     half the menu fitting on a 375x667 phone. Alex, 2026-08-28: too big. Killing
     GP's line-height and pinning a 48px min-height fits the whole menu.
     ⭐ 48px is a FLOOR, not a preference: Material's 48dp, and above the 44px
     WCAG 2.5.5 / Apple HIG minimum. ⛔ Do not shave it to fit more items.
     ⚠️ This selector also reaches the `.fnv-social` anchors inside
     `.fnv-socials-item`, which is intended - they get a compliant tap target too. */
  .fnv .main-navigation .main-nav ul li a {
    display: flex;
    align-items: center;
    min-height: 48px;
    line-height: 1.4;
    padding: 8px 4px;
    border-bottom: 1px solid var(--fnv-border);
    /* ⛔ MOBILE ONLY. Alex, 2026-08-28: bring the menu text to 14px, matching the
       hp-* themes (`HORIZON-20260828-011`). The DESKTOP nav stays at 12px - that
       rule is `.fnv .main-navigation .main-nav ul li a` further up, and its
       uppercase + 0.15em tracking is this theme's own design language, not a
       scale to be normalised.
       ⛔⛔ THIS SELECTOR IS NOW BYTE-IDENTICAL TO THE DESKTOP ONE, AND THAT IS
       DELIBERATE (`HORIZON-20260828-015`). It used to carry `.toggled`. It had
       to lose it: the row metrics decide the panel's HEIGHT, and a panel that
       changes height when `.toggled` lands cannot animate - it snaps. What keeps
       the two apart is now the `@media (max-width: 768px)` wrapper plus source
       order (this copy is later in the file, so it wins inside the media
       condition and nowhere else). ⛔ Do not "de-duplicate" the two rules, and do
       not re-add `.toggled` to make them look distinct - either breaks something
       measured. Verified at 1024px: desktop links still compute to 12px.
       ⚠️ 14px with uppercase + wide tracking is ~17% wider than 12px; measured
       after deploy, the longest label ("Entertainers") still sits on one line at
       375px. Re-check if a longer menu item is ever added. */
    font-size: var(--fnv-text-sm);
  }
  .fnv-socials { justify-content: center; width: 100%; margin-top: var(--fnv-sp-2); }
  .fnv-socials-item { margin-left: 0; }
}

/* ==========================================================================
   3. Buttons
   ========================================================================== */

.fnv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--fnv-r-pill);
  border: 1px solid transparent;
  font-family: var(--fnv-font-sans);
  font-size: var(--fnv-text-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--fnv-dur) var(--fnv-ease), background var(--fnv-dur) var(--fnv-ease), border-color var(--fnv-dur) var(--fnv-ease), color var(--fnv-dur) var(--fnv-ease);
}

.fnv-btn, .fnv-btn:hover, .fnv-btn:focus, .fnv-btn:focus-visible { text-decoration: none; }

.fnv-btn--neon {
  background: var(--fnv-grad-neon);
  color: var(--fnv-primary-fg);
  box-shadow: var(--fnv-shadow-glow);
}

.fnv-btn--neon:hover { transform: scale(1.04); color: var(--fnv-primary-fg); }

.fnv-btn--outline {
  background: oklch(0.12 0 0 / 0.4);
  border-color: var(--fnv-border);
  color: var(--fnv-fg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.fnv-btn--outline:hover { border-color: var(--fnv-primary); color: var(--fnv-fg); }

.fnv-btn--lg { padding: 15px 28px; font-size: var(--fnv-text-base); }

/* Core block buttons follow theme.json; harmonise hover */
.fnv .wp-block-button .wp-block-button__link { transition: transform var(--fnv-dur) var(--fnv-ease); }
.fnv .wp-block-button .wp-block-button__link:hover { transform: scale(1.03); }

/* ==========================================================================
   4. Chips / badges
   ========================================================================== */

.fnv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--fnv-r-pill);
  border: 1px solid oklch(0.74 0.13 85 / 0.4);
  background: oklch(0.74 0.13 85 / 0.12);
  color: var(--fnv-primary);
  font-size: 0.6875rem; /* 11px minimum */
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fnv-meta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--fnv-muted-fg);
  font-size: var(--fnv-text-sm);
}

/* ==========================================================================
   5. Forms
   ========================================================================== */

.fnv-form {
  display: grid;
  gap: var(--fnv-sp-3);
  padding: var(--fnv-sp-4);
  border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-r-lg);
  background: var(--fnv-card);
}

.fnv-field { display: block; }

.fnv-field__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem; /* 13px — was 12px, bumped for mobile legibility */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fnv-muted-fg);
}

.fnv-field input,
.fnv-field select,
.fnv-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-r-sm);
  background: oklch(0.20 0 0 / 0.4);
  color: var(--fnv-fg);
  font-family: var(--fnv-font-sans);
  font-size: 1rem; /* 16px minimum prevents iOS Safari auto-zoom on focus */
}

.fnv-field input::placeholder,
.fnv-field textarea::placeholder { color: var(--fnv-muted-fg); }

.fnv-field input:focus,
.fnv-field select:focus,
.fnv-field textarea:focus {
  outline: none;
  border-color: var(--fnv-primary);
}

.fnv-field--row { display: grid; gap: var(--fnv-sp-3); }
@media (min-width: 560px) { .fnv-field--row { grid-template-columns: 1fr 1fr; } }

.fnv-form .fnv-btn { width: 100%; }

.fnv-form__note {
  margin: 0;
  font-size: var(--fnv-text-sm);
  color: var(--fnv-muted-fg);
}

/* Honeypot — kept in the DOM for bots, hidden from people. */
.fnv-hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submission feedback notice. */
.fnv-form__feedback {
  margin: 0 0 var(--fnv-sp-3);
  padding: 12px 16px;
  border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-r-sm);
  font-size: var(--fnv-text-sm);
}

.fnv-form__feedback--success {
  border-color: oklch(0.7 0.18 150 / 0.6);
  background: oklch(0.7 0.18 150 / 0.12);
  color: oklch(0.85 0.15 150);
}

.fnv-form__feedback--error {
  border-color: oklch(0.65 0.24 20 / 0.6);
  background: oklch(0.65 0.24 20 / 0.12);
  color: oklch(0.82 0.18 20);
}

/* ==========================================================================
   6. Footer — DarkLuxury layout
   ========================================================================== */

.fnv-site-footer {
  margin-top: var(--fnv-sp-7);
  border-top: 1px solid rgba(201, 168, 76, 0.2);
  background: #0A0A0A;
  font-family: var(--fnv-font-sans);
}

.fnv-site-footer .fnv-container {
  padding-block: var(--fnv-sp-6);
}

/* 3-column grid: brand (wider) | Explore | Connect */
.fnv-footer-grid {
  display: grid;
  gap: var(--fnv-sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .fnv-footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
}

/* Brand column — wordmark + tagline + social circles */
.fnv-footer-brand__name {
  display: block;
  font-family: var(--fnv-font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--fnv-primary);
  text-decoration: none;
}

.fnv-footer-brand__name:hover { color: var(--fnv-primary); opacity: 0.85; }

.fnv-footer-brand__accent { font-style: italic; }

.fnv-footer-brand__tagline {
  margin: var(--fnv-sp-2) 0 var(--fnv-sp-3);
  max-width: 26rem;
  color: var(--fnv-muted-fg);
  font-size: var(--fnv-text-sm);
  line-height: 1.65;
}

/* Social icon circles (44px, border, gold fill) */
.fnv-footer-socials {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fnv-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.35);
  color: var(--fnv-primary);
  transition: border-color var(--fnv-dur) var(--fnv-ease), background var(--fnv-dur) var(--fnv-ease);
}

.fnv-footer-social svg { width: 18px; height: 18px; }

.fnv-footer-social:hover {
  border-color: var(--fnv-primary);
  background: rgba(201, 168, 76, 0.08);
  color: var(--fnv-primary);
}

/* Link columns */
.fnv-footer-col__title {
  margin: 0 0 var(--fnv-sp-2);
  font-family: var(--fnv-font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fnv-fg);
}

.fnv-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fnv-footer-links a { display: block; padding: 6px 0; color: var(--fnv-muted-fg); font-size: var(--fnv-text-sm); transition: color var(--fnv-dur) var(--fnv-ease); }
.fnv-footer-links a:hover { color: var(--fnv-fg); }

/* Horizontal rule separator */
.fnv-rule {
  border: none;
  border-top: 1px solid rgba(201, 168, 76, 0.15);
  margin: var(--fnv-sp-5) 0 var(--fnv-sp-4);
}

/* Bottom bar — copyright left, powered-by right */
.fnv-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--fnv-sp-2);
  color: var(--fnv-muted-fg);
  font-size: 0.75rem;
}

.fnv-footer-copy { margin: 0; color: var(--fnv-muted-fg); font-size: 0.75rem; }

.fnv-footer-tagline {
  display: block;
  margin-top: 4px;
  font-style: italic;
  color: var(--fnv-muted-fg);
  font-size: 0.7rem;
  opacity: 0.7;
}

/* "Powered by" Automate Horizon wordmark */
.fnv-powered-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fnv-muted-fg);
  font-family: var(--fnv-font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--fnv-dur) var(--fnv-ease);
}

.fnv-powered-by__label {
  font-family: var(--fnv-font-sans);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--fnv-muted-fg);
  margin-right: 4px;
}

.fnv-powered-by:hover { opacity: 0.75; }
.fnv-powered-by__logo { height: 18px; width: auto; display: block; }

@media (max-width: 640px) {
  .fnv-footer-bar { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   7. Marketing pages (patterns)
   ========================================================================== */

.fnv-page-hero {
  max-width: var(--fnv-container-max);
  margin-inline: auto;
  padding: clamp(var(--fnv-sp-5), 8vw, var(--fnv-sp-7)) var(--fnv-container-pad) var(--fnv-sp-4);
}

.fnv-page-hero .fnv-eyebrow,
.fnv-page-body .fnv-eyebrow { color: var(--fnv-primary); }

.fnv-page-hero h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
}

.fnv-page-hero__lead {
  margin: var(--fnv-sp-3) 0 0;
  max-width: 42rem;
  color: var(--fnv-muted-fg);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.fnv-page-body {
  max-width: 880px;
  margin-inline: auto;
  padding: 0 var(--fnv-container-pad) var(--fnv-sp-6);
}

.fnv-page-body p { color: var(--fnv-muted-fg); }

/* Legal pages (Terms / Privacy) — readable long-form formatting. */
.fnv-legal { max-width: 60rem; }

.fnv-legal h2 {
  margin: var(--fnv-sp-5) 0 var(--fnv-sp-2);
  font-family: var(--fnv-font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  color: var(--fnv-fg);
}

.fnv-legal h3 {
  margin: var(--fnv-sp-4) 0 var(--fnv-sp-2);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fnv-fg);
}

.fnv-legal p,
.fnv-legal li {
  color: var(--fnv-muted-fg);
  line-height: 1.7;
}

.fnv-legal ul {
  margin: 0 0 var(--fnv-sp-3);
  padding-left: 1.3rem;
  display: grid;
  gap: 6px;
}

.fnv-legal a { color: var(--fnv-primary); }
.fnv-legal a:hover { color: var(--fnv-fg); }

.fnv-pillars {
  display: grid;
  gap: var(--fnv-sp-3);
  grid-template-columns: 1fr;
  margin: var(--fnv-sp-4) 0;
}

@media (min-width: 600px) { .fnv-pillars { grid-template-columns: repeat(2, 1fr); } }

.fnv-pillar {
  padding: var(--fnv-sp-3);
  border: 1px solid var(--fnv-border);
  border-radius: var(--fnv-r-lg);
  background: var(--fnv-card);
}

.fnv-pillar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--fnv-r-pill);
  background: var(--fnv-grad-neon);
  color: var(--fnv-primary-fg);
  box-shadow: var(--fnv-shadow-glow);
}

.fnv-pillar h3 { margin: 14px 0 6px; font-size: var(--fnv-text-lg); font-weight: 900; }
.fnv-pillar p { margin: 0; font-size: var(--fnv-text-sm); }

.fnv-page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--fnv-sp-4); }

.fnv-contact-links { display: flex; flex-wrap: wrap; gap: 12px; margin: var(--fnv-sp-3) 0; }