/* ============================================================
   VetClaims.ai × UFC Freedom 250 — partnership landing
   New section styles. Reuses page.css (nav, buttons, eyebrow,
   footer, sticky) + colors_and_type.css tokens.  Prefix: f-
============================================================ */

/* ------------------------------------------------------------
   HERO — co-brand fold
------------------------------------------------------------ */
.f-hero {
  position: relative;
  background:
    radial-gradient(ellipse 80% 70% at 78% -10%, rgba(176,88,79,0.30) 0%, rgba(176,88,79,0) 58%),
    radial-gradient(ellipse 60% 50% at 20% 110%, rgba(201,162,74,0.10) 0%, rgba(201,162,74,0) 60%),
    linear-gradient(180deg, #1A1717 0%, #0B0807 100%);
  color: var(--bone-100);
  overflow: hidden;
  padding: var(--s-8) 0 var(--s-9);
}
.f-hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.014) 0 2px, transparent 2px 7px);
  pointer-events: none;
}

.f-hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: var(--s-8);
  align-items: center;
}

/* co-brand kicker */
.f-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--medal-gold-500); margin: 0 0 var(--s-5);
}
.f-kicker::before { content: ""; width: 26px; height: 1.5px; background: var(--medal-gold-600); opacity: .8; }

.f-hero__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 44px); line-height: 1.06;
  letter-spacing: -0.02em; color: #fff; margin: 0;
  text-wrap: balance;
}
.f-hero__title em { font-style: normal; color: var(--service-red-400); }
.f-hero__lede {
  font-size: var(--fs-lede); line-height: 1.55; color: var(--fog-200);
  margin: var(--s-5) 0 0; max-width: 30em; text-wrap: pretty;
}

/* feature pills */
.f-feats {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: var(--s-6) 0 0; padding: 0; list-style: none;
}
.f-feat {
  font-family: var(--font-mono); font-size: 15px; font-weight: 500;
  letter-spacing: 0.02em; color: var(--bone-100);
  border: 1px solid var(--rule-fog-strong); background: rgba(255,255,255,0.04);
  padding: 8px 14px; border-radius: var(--r-pill); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
}
.f-feat::before {
  content: ""; width: 5px; height: 5px; border-radius: 999px;
  background: var(--medal-gold-500);
}

/* CTA cluster */
.f-cta { display: flex; flex-direction: column; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-7); }
.f-cta__q {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px); line-height: 1.15;
  letter-spacing: -0.01em; color: #fff; margin: 0;
}
.f-cta__q .accent { color: var(--service-red-400); }
.f-ticks {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0;
  font-size: 15px; font-weight: 600; color: var(--fog-200);
}
.f-ticks > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.f-tick { font-style: normal; color: #fff; font-weight: 800; }

/* co-brand lockup column */
.f-lockup {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-5);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--rule-fog);
  border-radius: var(--r-6);
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(176,88,79,0.18) 0%, rgba(176,88,79,0) 70%),
    rgba(255,255,255,0.015);
}
.f-lockup__brands { display: flex; align-items: center; gap: var(--s-5); }
.f-lockup__vc { display: flex; align-items: center; gap: 11px; }
.f-lockup__mark { height: 38px; width: auto; display: block; }
.f-lockup__wm {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  letter-spacing: -0.01em; color: #fff;
}
.f-lockup__wm i { color: var(--service-red-400); font-style: normal; }
.f-lockup__x {
  font-family: var(--font-display); font-weight: 400; font-size: 24px;
  color: var(--medal-gold-500); line-height: 1;
}
.f-lockup__event { width: 100%; max-width: 420px; height: auto; display: block; filter: drop-shadow(0 14px 34px rgba(0,0,0,0.5)); }
.f-lockup__cap {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fog-300);
}
.f-lockup__cap::before, .f-lockup__cap::after { content: ""; width: 20px; height: 1.5px; background: var(--medal-gold-600); opacity: .7; }

@media (max-width: 900px) {
  .f-hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .f-lockup { order: -1; }
  .f-lockup__event { max-width: 320px; }
}
@media (max-width: 520px) {
  .f-feats { gap: 8px; }
  .f-feat { white-space: normal; }   /* was nowrap — let the long pill wrap */
}

/* ------------------------------------------------------------
   PARTNERSHIP — editorial, light
------------------------------------------------------------ */
.f-part { background: var(--bg-0); }
.f-part__grid {
  display: grid; grid-template-columns: 0.92fr 1.08fr; gap: var(--s-8);
  align-items: start; margin-top: var(--s-6);
}
.f-quote {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(26px, 3vw, 38px); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--fg-1); margin: 0;
  padding-left: var(--s-5); border-left: 3px solid var(--medal-gold-600);
  text-wrap: balance;
}
.f-quote em { font-style: normal; color: var(--accent); }
.f-part__body { padding-top: var(--s-2); }
.f-part__body p {
  font-size: var(--fs-body-l); line-height: 1.7; color: var(--fg-2); margin: 0 0 var(--s-5);
}
.f-part__body p:last-child { margin-bottom: 0; }
.f-part__body strong { color: var(--fg-1); font-weight: 700; }

@media (max-width: 860px) {
  .f-part__grid { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* ------------------------------------------------------------
   HOW IT WORKS — numbered steps
------------------------------------------------------------ */
.f-how { background: var(--bg-0-solid); border-block: 1px solid var(--rule-fog); }
.f-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  margin-top: var(--s-7); counter-reset: step;
}
.f-step {
  background: var(--bg-card); border: 1px solid var(--rule);
  border-radius: var(--r-5); padding: var(--s-6);
  display: flex; flex-direction: column;
  border-top: 3px solid var(--service-red-600);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.f-step:hover { border-color: var(--rule-strong); border-top-color: var(--service-red-600); }
.f-step__n {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  letter-spacing: 0.14em; color: var(--accent); margin: 0 0 var(--s-4);
  display: flex; align-items: center; gap: 10px;
}
.f-step__n::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.f-step__h {
  font-family: var(--font-display); font-weight: 700; font-size: 21px;
  line-height: 1.2; color: var(--fg-1); margin: 0 0 var(--s-3);
}
.f-step__p { font-size: 15px; line-height: 1.6; color: var(--fg-2); margin: 0; }
.f-how__cta { margin-top: var(--s-7); }

@media (max-width: 860px) { .f-steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   WHAT VETERANS GET — dark money band
------------------------------------------------------------ */
.f-get {
  position: relative;
  background:
    radial-gradient(ellipse 70% 60% at 18% 0%, rgba(176,88,79,0.20) 0%, rgba(176,88,79,0) 60%),
    linear-gradient(180deg, #1A1717 0%, #0B0807 100%);
  color: var(--bone-100);
  border-top: 1px solid var(--rule-fog);
  overflow: hidden;
}
.f-get__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4.4vw, 54px); line-height: 1.06;
  letter-spacing: -0.02em; color: #fff; margin: 0; max-width: 14ch;
}
.f-get__title .keep { color: var(--medal-gold-500); }
.f-get__title .not { color: var(--fog-300); }
.f-get__lede {
  font-size: var(--fs-body-l); line-height: 1.7; color: var(--fog-200);
  margin: var(--s-6) 0 0; max-width: 42ch;
}
.f-get__lede strong { color: #fff; font-weight: 700; }

.f-get__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--s-8);
  align-items: center;
}
.f-get__grid .f-get__lede { margin-top: 0; }

/* fee contrast */
.f-compare { display: grid; gap: var(--s-4); }
.f-comp {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-5);
  padding: var(--s-5) var(--s-6); border-radius: var(--r-5);
}
.f-comp--ours {
  background: rgba(176,88,79,0.12);
  border: 1.5px solid var(--service-red-500);
}
.f-comp--theirs {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--rule-fog);
}
.f-comp__amt {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
}
.f-comp--ours .f-comp__amt { font-size: clamp(34px, 4vw, 46px); color: #fff; }
.f-comp--theirs .f-comp__amt { font-size: clamp(26px, 3vw, 34px); color: var(--fog-300); }
.f-comp__amt small { display: block; font-size: 0.32em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 6px; }
.f-comp--ours .f-comp__amt small { color: var(--service-red-400); }
.f-comp__txt { }
.f-comp__lbl {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  color: var(--bone-100); margin: 0 0 3px;
}
.f-comp--theirs .f-comp__lbl { color: var(--fog-200); }
.f-comp__sub { font-size: 13px; line-height: 1.45; color: var(--fog-300); margin: 0; }
.f-comp__tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 10px;
  border-radius: var(--r-pill); white-space: nowrap;
}
.f-comp--ours .f-comp__tag { background: var(--service-red-600); color: #fff; }

@media (max-width: 860px) {
  .f-get__grid { grid-template-columns: 1fr; gap: var(--s-7); }
}

/* ------------------------------------------------------------
   STAT STRIP (brand proof) — sits inside dark get band
------------------------------------------------------------ */
.f-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6);
  margin-top: var(--s-8); padding-top: var(--s-7);
  border-top: 1px solid var(--rule-fog);
}
.f-stat { position: relative; display: flex; flex-direction: column; gap: 4px; }
.f-stat + .f-stat::before {
  content: ""; position: absolute; left: calc(var(--s-6) * -0.5);
  top: 2px; bottom: 2px; width: 1px; background: var(--rule-fog);
}
.f-stat__n {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4vw, 46px);
  line-height: 1; color: #fff; letter-spacing: -0.02em;
}
.f-stat__n .star { color: var(--medal-gold-500); }
.f-stat__n small { font-size: 0.42em; font-weight: 700; }
.f-stat__l {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--medal-gold-500); margin-top: 6px;
}
.f-stat__s { font-size: 12px; line-height: 1.45; color: var(--fog-300); }
@media (max-width: 720px) {
  .f-stats { grid-template-columns: 1fr; gap: var(--s-5); }
  .f-stat + .f-stat::before { display: none; }
}

/* ------------------------------------------------------------
   CLOSING CTA band
------------------------------------------------------------ */
.f-close { background: var(--bg-0-solid); border-top: 1px solid var(--rule-fog); text-align: center; }
.f-close__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.f-close__title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--fg-1); margin: 0; text-wrap: balance;
}
.f-close__title .accent { color: var(--accent); }
.f-close__vo {
  display: inline-flex; align-items: center; gap: 9px; margin: var(--s-2) 0 0;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
}
.f-close__vo-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--service-red-500); }

/* ------------------------------------------------------------
   reveal on scroll
------------------------------------------------------------ */
.f-reveal { opacity: 0; transform: translateY(10px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.f-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .f-reveal { opacity: 1; transform: none; } }