.f-hl { padding: clamp(64px, 8vw, 112px) clamp(16px, 4vw, 48px); }
.f-hl-light {
  background: var(--brand-bg, #FCFCFC);
  color: var(--brand-ink, #333);
  --f-hl-card: var(--f-card-bg, #FFFFFF);
  --f-hl-ink: var(--brand-ink-strong, #1A1A1A);
  --f-hl-quiet: var(--f-quiet-ink);
  --f-hl-rule: color-mix(in oklab, var(--f-ink-base, #1A1A1A), transparent 90%);
  --f-hl-shadow-out: 0 10px 16px -10px rgba(0, 0, 0, 0.30),
                     0 22px 30px -18px rgba(0, 0, 0, 0.22);
}
.f-hl-light.f-hl-surface-white {
  background: var(--brand-bg, #FCFCFC);
  --f-hl-card: var(--brand-bg, #FCFCFC);
}
.f-hl-light.f-hl-cards-white {
  background: color-mix(in oklab, var(--brand-bg, #FCFCFC), var(--brand-ink, #333) 3%);
  --f-hl-card: var(--brand-bg, #FCFCFC);
}
.f-hl-cards-white .f-hl-icon,
.f-hl-surface-white .f-hl-icon { color: var(--f-accent-ink); }
.f-hl-dark {
  background: var(--brand-surface-dark, #1A1A1A);
  color: var(--brand-ink-on-dark, #FCFCFC);
  --f-hl-card: color-mix(in oklab, var(--brand-surface-dark, #1A1A1A), white 5%);
  --f-hl-ink: var(--brand-ink-on-dark, #FCFCFC);
  --f-hl-quiet: rgba(255, 255, 255, 0.72);
  --f-hl-rule: rgba(255, 255, 255, 0.14);
  --f-hl-shadow-out: 0 10px 16px -10px rgba(0, 0, 0, 0.8),
                     0 24px 32px -18px rgba(0, 0, 0, 0.6);
}
.f-hl-dark h2, .f-hl-dark h3 { color: inherit; }
.f-hl-inner { width: min(1200px, 100%); margin-inline: auto; }
.f-hl-head { text-align: center; margin-bottom: clamp(36px, 5vw, 56px); }
.f-hl-title {
  margin: 0 0 12px;
  font-size: var(--f-h2);
  color: var(--f-hl-ink);
}
.f-hl-intro {
  margin: 0 auto;
  max-width: 54ch;
  font-size: var(--f-text);
  color: var(--f-hl-quiet);
}
.f-hl-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.f-hl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(32px, 4.5vw, 52px) clamp(22px, 3vw, 40px);
  background: var(--f-hl-card);
  border: 2px solid var(--f-hl-rule);
  border-radius: 14px;
  transition: translate 0.5s var(--f-ease, ease),
              box-shadow 0.5s var(--f-ease, ease),
              border-bottom-width 0.5s var(--f-ease, ease),
              margin-bottom 0.5s var(--f-ease, ease);
}
@media (min-width: 821px) {
  .f-hl-tall .f-hl-card { min-height: 420px; }
}
@media (hover: hover) {
  .f-hl-card:hover {
    translate: 0 -4px;
    border-bottom-width: 6px;
    margin-bottom: -4px;
    box-shadow: var(--f-hl-shadow-out);
  }
}
.f-hl-card::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  padding: 2px;
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 40%),
      var(--brand-accent, #0074C8), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: var(--spot, 0);
  transition: opacity 0.3s ease,
              inset 0.5s var(--f-ease, ease),
              padding 0.5s var(--f-ease, ease);
}
@media (hover: hover) {
  .f-hl-card:hover::after {
    inset: -2px -2px -6px;
    padding: 2px 2px 6px;
  }
}
@media (max-width: 800px), (hover: none), (pointer: coarse) {
  .f-hl-card.is-touch-lit {
    translate: 0 -4px;
    border-bottom-width: 6px;
    margin-bottom: -4px;
    box-shadow: var(--f-hl-shadow-out);
  }
  .f-hl-card.is-touch-lit::after {
    inset: -2px -2px -6px;
    padding: 2px 2px 6px;
    opacity: 1;
  }
}
.f-hl:not(.f-hl-live) .f-hl-card:hover::after,
.f-hl:not(.f-hl-live) .f-hl-card:focus-within::after { opacity: 1; }
.f-hl-icon {
  display: grid;
  place-items: center;
  height: 64px;
  min-width: 0; min-height: 0;
  margin-bottom: 22px;
  color: var(--f-hl-ink);
}
.f-hl-icon svg, .f-hl-icon img { display: block; width: auto; height: 64px; }
.f-hl-mark svg, .f-hl-mark img { height: 58px; }
.f-hl-mark { color: var(--brand-mark-ink, var(--brand-cta-bg, #E2211C)); }
.f-hl-card:has(.f-hl-mark)::after {
  background: radial-gradient(220px 220px at var(--mx, 50%) var(--my, 40%),
      var(--brand-mark-ink, var(--brand-cta-bg, #E2211C)), transparent 72%);
}
.f-hl-card-title {
  margin: 0 0 14px;
  font-size: var(--f-h4);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--f-hl-ink);
}
.f-hl-body {
  margin: 0;
  max-width: 40ch;
  font-size: var(--f-text);
  line-height: 1.7;
  color: var(--f-hl-quiet);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .f-hl-card {
      animation: f-hl-rise linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--i, 0) * 6%) entry calc(55% + var(--i, 0) * 6%);
    }
    @keyframes f-hl-rise {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 1024px) {
    .f-hl-card {
      animation-range: entry calc(var(--i, 0) * 4%) cover calc(30% + var(--i, 0) * 4%);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .f-hl-card, .f-hl-card::after { transition: none; }
  .f-hl-card:hover { translate: none; }
}
@media (max-width: 600px) {
  .f-hl-card { padding: 28px 20px; }
  .f-hl-icon { height: 52px; margin-bottom: 16px; }
  .f-hl-icon svg, .f-hl-icon img { height: 52px; }
  .f-hl-mark svg, .f-hl-mark img { height: 48px; }
}