/* this_file: src_docs/md/css/fontlab-landing.css */
/* ==================================================================
   FontLab Partners — landing-page-only overrides.
   Hero, products, about/founders, full-bleed bands, bottom CTA.
   Fonts + button + heading rules live in mk-fontlab/main.html.
   ================================================================== */

/* ---- Dark-blue CTA band token (added 2026-04-15 for 3-col CTA).
        Lives here (not fontlab-base.css) because the editable-file
        scope for issue 109 covers fontlab-landing.css; the tokens are
        only consumed by `.fl-cta-tertiary` + its button and by the
        press-kit-top-button recolor in fontlab-chrome.css (which reads
        its own literal #0e273e). Extends `:root` additively — does
        not shadow any base token. ---- */
:root {
  --fl-band-dark: #0e273e;
  --fl-band-dark-ink: #ffffff;
}

/* ---- Product card structure: eyebrow, big italic name,
        description, footer pinned to bottom across all three cards ---- */

/* Products section — centered title + subhead pair, with tightened
   spacing between them. Centering + bottom margin live here so the
   HTML doesn't need to carry Tailwind `text-center mb-6` utilities. */
.md-typeset .fl-products-head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.md-typeset .fl-products-head .fl-section-title {
  margin-bottom: 0.35rem !important;
}
.md-typeset .fl-products-head .fl-products-sub {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  font-size: 0.92rem;
  line-height: 1.45;
  opacity: 0.7;
}

/* Products grid — 1 column on anything narrower than 1024px so the
   big `FontLab 8` / `Vexy Lines` / `TransType 4` product names
   (clamp-scaled up to 3rem) don't get wedged into a 250px-wide
   column and word-break mid-glyph (e.g. "Vexy Lin es").
   Single-column layout is CAPPED at 28rem + centered so it doesn't
   stretch into an over-wide card on tablet-ish widths. */
.md-typeset .fl-products-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  max-width: 28rem;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .md-typeset .fl-products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

/* Product card chassis — replaces daisyUI/Tailwind soup
   `bg-base-100 shadow-xl border border-base-300 overflow-hidden
   flex flex-col` on each <article>. Keep `card card-compact` in the
   HTML so pre-existing `.md-typeset .card > figure` + reduced-motion
   selectors continue to match. */
.md-typeset article.fl-product-card {
  display: flex;
  flex-direction: column;
  background: var(--fl-white);
  border: 1px solid var(--fl-gray-light);
  border-radius: var(--rounded-box, 1rem);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Product card media — replaces `m-0 p-0 aspect-[40/21] bg-neutral
   overflow-hidden` on the <figure>. The inner <a> fills the box so
   the whole area is clickable; hover scale lives on the image. */
.md-typeset .fl-product-media {
  aspect-ratio: 40 / 21;
  background: var(--fl-off-white);
  overflow: hidden;
}
.md-typeset .fl-product-media > a {
  display: block;
  width: 100%;
  height: 100%;
}
.md-typeset .fl-product-media img {
  transition: transform 0.5s ease;
}
.md-typeset .fl-product-media:hover img {
  transform: scale(1.05);
}

/* High specificity to beat `.md-typeset .card.card-compact .card-body`
   (0,4,0) set in mk-fontlab/main.html. */
.md-typeset article.card .card-body.fl-product-body {
  gap: 0 !important;
  padding: 2.6rem 2.25rem 2.25rem !important;
}
.md-typeset .fl-product-head {
  margin: 0 0 1.1rem;
}
.md-typeset .fl-product-eyebrow {
  font-family: var(--fl-font-button, 'Work Sans', system-ui, sans-serif) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fl-gray-mid, #999) !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.3 !important;
}
.md-typeset h3.fl-product-name,
.md-typeset .fl-product-name {
  font-family: var(--fl-font-body), 'Outfit', system-ui, sans-serif !important;
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 3rem) !important;
  font-style: normal !important;
  font-weight: 300 !important;
  font-stretch: normal !important;
  font-variation-settings: normal !important;
  line-height: 0.9 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  margin: 0 !important;
  color: var(--fl-black, #000) !important;
  position: relative;
  left: -0.07em;
}
.md-typeset .fl-product-desc {
  margin: 0 0 1rem !important;
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: var(--fl-gray-text, #555);
}
/* Footer (button + price) pinned to the bottom of every card so the
   three CTAs line up horizontally regardless of description length. */
.md-typeset .fl-product-footer {
  margin-top: auto !important;
  padding-top: 1.5rem !important;
}

/* ---- "EARN UP TO $15 / SALE" one-line CTA ---- */

.md-typeset .fl-cta-earn {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  padding: 1rem 1rem !important;
  line-height: 1 !important;
  min-height: 0;
  height: auto !important;
  white-space: nowrap;
  transition: transform .25s ease, filter .25s ease;
}
.md-typeset .fl-cta-earn:hover {
  transform: scale(1.025);
}
.md-typeset .fl-cta-earn .fl-cta-small {
  font-family: var(--fl-font-button, 'Work Sans', system-ui, sans-serif) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
}
.md-typeset .fl-cta-earn .fl-cta-big {
  font-family: var(--fl-font-body, -apple-system, system-ui, sans-serif) !important;
  font-size: 1.6rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  height: 1.6rem;
}
.md-typeset .fl-cta-price {
  text-align: center;
  font-size: 0.68rem;
  color: var(--fl-gray-mid);
  margin: 0.45rem 0 0 !important;
}

/* Per-product button palette — win specificity over `.md-typeset .btn-primary`. */
.md-typeset .btn.fl-cta-fontlab,
.md-typeset .btn.fl-cta-fontlab:hover,
.md-typeset .btn.fl-cta-fontlab:focus,
.md-typeset .btn.fl-cta-fontlab:visited {
  background-color: #0e263e !important;
  border-color: #0e263e !important;
  color: #fff !important;
}
.md-typeset .btn.fl-cta-vexylines,
.md-typeset .btn.fl-cta-vexylines:hover,
.md-typeset .btn.fl-cta-vexylines:focus,
.md-typeset .btn.fl-cta-vexylines:visited {
  background-color: #bb006f !important;
  border-color: #bb006f !important;
  color: #fff !important;
}
.md-typeset .btn.fl-cta-transtype,
.md-typeset .btn.fl-cta-transtype:hover,
.md-typeset .btn.fl-cta-transtype:focus,
.md-typeset .btn.fl-cta-transtype:visited {
  background-color: #9e0101 !important;
  border-color: #9e0101 !important;
  color: #fff !important;
}
.md-typeset .btn.fl-cta-fontlab:hover   { filter: brightness(1.2); }
.md-typeset .btn.fl-cta-vexylines:hover { filter: brightness(1.15); }
.md-typeset .btn.fl-cta-transtype:hover { filter: brightness(1.2); }

/* ---- Hero ---- */

/* Beat `.md-typeset .fl-hero { padding: 16px 0 12px !important }` from
   mk-fontlab/main.html — extra_css loads BEFORE the template's inline
   <style>, so we need higher specificity than the template's
   `.md-typeset .fl-hero` to win the cascade. `body.fl-landing` is
   added by the tag-page JS in main.html and only exists on the
   landing page, so we won't affect sub-pages. */
body.fl-landing .md-typeset .fl-hero {
  padding: 4px 0 4px !important;
  margin: 0 0 0;
  background: transparent;
  border-bottom: 0;
}
/* Slide box: ABSOLUTELY CONSTANT height regardless of which font slide
   is currently active. The JS rotator swaps font-family, font-size,
   letter-spacing, line-height AND the text itself inside this box; the
   box dimensions never change, so nothing below it shifts when a new
   slide paints. Sized to keep the hero row (Sign Up Now) above the fold
   at 1440×900 while leaving headroom for the tallest of the rotator
   fonts wrapped to three lines.
   overflow-y: clip (not hidden!) keeps the fixed-height safety net
   without creating a BFC that shifts sibling sections.
   overflow-x: visible lets italic glyph overhangs render. */
body.fl-landing .md-typeset .fl-hero-slide {
  height: 18rem;
  position: relative;
  overflow-x: visible;
  overflow-y: clip;
  margin: 0 0 4px;
}
@media (max-width: 900px) {
  /* 15rem (was 14rem) adds a small headroom buffer so the tallest
     rotator font (Instrument Serif, clamp min 2.8rem) doesn't clip
     at ~600–700px widths where its natural line count is 5. */
  body.fl-landing .md-typeset .fl-hero-slide { height: 15rem; }
}
@media (max-width: 600px) {
  body.fl-landing .md-typeset .fl-hero-slide { height: 9rem; }
}
@media (max-width: 400px) {
  body.fl-landing .md-typeset .fl-hero-slide { height: 8rem; }
}
body.fl-landing .md-typeset .fl-hero-headline {
  line-height: 1.04;
  letter-spacing: -0.025em;
  max-width: 1100px;
  margin: 0 !important;
  padding-left: 0.12em;
  margin-left: -0.12em !important;
  color: var(--fl-black);
  /* Fill the reserved slide box and vertically center the text
     regardless of which rotator font is live. Height comes from the
     parent .fl-hero-slide, so changing the font never changes the box. */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  /* Slideshow crossfade opacity transition — JS drives the timing. */
  transition: opacity .6s ease !important;
  will-change: opacity;
}
/* ---- Narrow-screen font-size caps for the rotator headline.
        The JS sets `el.style.fontSize = def.fontSize` (e.g.
        `clamp(2.8rem, 7vw, 6rem)` for Instrument Serif). At narrow
        viewports the clamp's MIN dominates — Instrument Serif at 2.8rem
        = 44.8px with line-height 0.92 produces ~6 lines at 375px width,
        overflowing the 11rem reserved slide box and getting clipped by
        `overflow-y: clip`. External `!important` rules beat JS's
        non-important inline styles, so we cap the headline in CSS so
        EVERY rotator font fits the reserved slide height without
        clipping on phones. line-height gets a little more room since
        small-screen text is multi-line. ---- */
@media (max-width: 600px) {
  body.fl-landing .md-typeset .fl-hero-headline {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.015em !important;
  }
}
@media (max-width: 400px) {
  body.fl-landing .md-typeset .fl-hero-headline {
    font-size: clamp(1.1rem, 5.5vw, 1.5rem) !important;
  }
}
.md-typeset .fl-hero-body {
  max-width: none;
  margin-top: 0;
  /* Breathing room BELOW the three-column hero row, before the
     Why Partner band starts. */
  padding-bottom: 2.5rem;
}
/* Beat the existing `.fl-hero-body p { margin: 0 0 12px !important }`
   in mk-fontlab/main.html — we want zero trailing margin since the
   three-column row handles its own spacing. Smaller type (0.88rem),
   and we let the paragraph fill its grid column edge-to-edge up to
   the "Have questions?" link — no max-width cap. */
.md-typeset .fl-hero-body .fl-hero-lede {
  /* Match the FAQ collapse-content body copy exactly. */
  font-size: 0.78rem !important;
  line-height: 1.55 !important;
  letter-spacing: 0.02em !important;
  color: var(--fl-gray-text);
  margin: 0 !important;
  max-width: none;
  width: 100%;
  display: block;
}

/* Two-column row: lede paragraph | .fl-hero-actions (link + button).
   The lede top-aligns with the wrapper; inside the wrapper the link and
   button are vertically centered to each other so they share a midline. */
.md-typeset .fl-hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 2rem;
  margin-top: 2rem;
}
.md-typeset .fl-hero-row .fl-hero-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  align-self: start;
}
.md-typeset .fl-hero-row .fl-hero-questions {
  white-space: nowrap;
  font-family: var(--fl-font-body, 'Outfit', system-ui, sans-serif);
  font-size: 0.92rem;
  color: var(--fl-gray-text);
  text-decoration: none;
  border-bottom: 1px dashed var(--fl-gray-mid);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.md-typeset .fl-hero-row .fl-hero-questions:hover {
  color: var(--fl-black);
  border-bottom-color: var(--fl-black);
}
.md-typeset .fl-hero-row .fl-hero-cta {
  white-space: nowrap;
}
@media (max-width: 900px) {
  .md-typeset .fl-hero-row {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: flex-start;
  }
  .md-typeset .fl-hero-row .fl-hero-actions {
    flex-wrap: wrap;
    gap: 1.1rem;
    justify-self: start;
  }
}

/* ---- About / founders: tight, no 1992 overlay, no quote bars ---- */

.md-typeset .fl-about {
  background: var(--fl-off-white);
  padding: 72px 24px;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 64px 0;
}
.md-typeset .fl-about-year { display: none !important; }
.md-typeset .fl-about-inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  margin: 0 auto;
}
.md-typeset .fl-about-pitch {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}
.md-typeset .fl-about-pitch p {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--fl-gray-text);
  margin: 0;
}

.md-typeset .fl-founders {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}
.md-typeset .fl-founders-side-left  { text-align: right; }
.md-typeset .fl-founders-side-right { text-align: left;  }

/* Founder blocks use <figure> + <blockquote> + <figcaption> for proper
   quote-to-attribution semantics. Reset MaterialX figure defaults so
   it inherits the side-cell alignment instead of centering itself. */
.md-typeset .fl-founder-block {
  margin: 0;
  padding: 0;
  display: block;
  width: auto;
}
.md-typeset .fl-founder-block .fl-founder-caption {
  margin: 0;
  text-align: inherit;
  font-size: inherit;
  color: inherit;
}

.md-typeset .fl-founder-name {
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0 0 1px;
  color: var(--fl-black);
}
.md-typeset .fl-founder-role {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--fl-gray-mid);
  margin: 0;
}

/* Founder quotes — Crimson Pro italic. */
.md-typeset .fl-founder-quote,
.md-typeset .fl-founder-quote p {
  font-family: var(--fl-font-quote, 'Crimson Pro', Georgia, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 1.05rem;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--fl-black);
  border: 0 !important;
  border-left: 0 !important;
  padding: 0 !important;
  margin: 0 0 0.6rem;
  background: transparent !important;
}
.md-typeset .fl-founder-quote::before { content: none !important; }
.md-typeset .fl-founder-quote p { margin: 0; }

.md-typeset .fl-founders-center {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.md-typeset .fl-founder-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  border: 4px solid var(--fl-off-white);
  flex-shrink: 0;
  margin: 0;
}
.md-typeset .fl-founder-circle:first-child {
  z-index: 2;
  margin-right: -28px;
}
.md-typeset .fl-founder-circle:last-child { z-index: 1; }
.md-typeset .fl-founder-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .md-typeset .fl-founders {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .md-typeset .fl-founders-side-left,
  .md-typeset .fl-founders-side-right {
    text-align: center;
  }
  .md-typeset .fl-founder-circle {
    width: 120px;
    height: 120px;
  }
}

/* ==================================================================
   Landing-page content-column centering.
   ----------------------------------------------------------------
   Sub-pages use `body.fl-subpage .md-content__inner.md-typeset {
   max-width: 1152px; margin: auto }` (in mk-fontlab/main.html) which
   auto-centers the content column in the viewport and makes every
   child's `50%` coincide with `50vw`.

   The landing page has NO such constraint — it relies on MaterialX's
   flex layout (`.md-main__inner > .md-sidebar--primary + .md-content
   + .md-sidebar--secondary`). At widths below the 76.25em breakpoint
   MaterialX still reserves a flex slot for `.md-sidebar--primary`
   (~12.1rem on the left), shifting `.md-content__inner`'s horizontal
   center RIGHT of the viewport center. `.fl-band { margin-left:
   calc(50% - 50vw) }` then produces an asymmetric result: a visible
   gap on the LEFT of every full-bleed band and equivalent overflow
   on the RIGHT (clipped by `html { overflow-x: clip }`).

   Fix: make the landing column a self-centered full-width wrapper so
   `50%` ≡ `50vw` and `.fl-band` aligns with the viewport edges. Use
   `width: 100%` + `margin: auto` (no `max-width` cap, unlike the
   sub-page version) so `.fl-wide` (1536px) still wins inside.
   ================================================================== */
body.fl-landing .md-content,
body.fl-landing .md-content__inner.md-typeset {
  margin-left: auto !important;
  margin-right: auto !important;
  /* Horizontal gutters so the hero headline, product cards, FAQ
     grid, etc. don't kiss the viewport edges. `.fl-band` full-bleed
     still spans edge-to-edge because its `calc(50% - 50vw)` math
     resolves against the PARENT CONTENT BOX (inside this padding),
     and the padding is symmetric — so 50%-of-content ≡ 50vw and
     the band escapes the gutter on both sides equally. */
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  width: 100%;
  max-width: none !important;
}
@media (max-width: 600px) {
  body.fl-landing .md-content,
  body.fl-landing .md-content__inner.md-typeset {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ==================================================================
   Full-bleed band system (2026-04-15 landing revision).
   A `.fl-band` element escapes the 1536px `.md-grid` container and
   paints its background edge-to-edge. Inner content is still
   constrained by a nested `.fl-wide` / `.fl-narrow` child.
   ================================================================== */

.md-typeset .fl-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* ---- "Why Partner with FontLab" — soft band + flat grid ---- */

.md-typeset .fl-why-band {
  background: var(--fl-band-soft);
  padding: 4rem 0 4rem;
}
.md-typeset .fl-why-band .fl-section-title {
  padding-top: 0.5rem;
  margin-bottom: 1rem !important;
}

.md-typeset .fl-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  /* Horizontal padding mirrors the site gutters so cells don't kiss
     the viewport edge on wide screens. */
  padding: 0 1.5rem;
}
@media (min-width: 768px) {
  .md-typeset .fl-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .md-typeset .fl-why-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.md-typeset .fl-why-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 2rem 1.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
}
/* ---- Row dividers only — never vertical lines between columns. ----
   At each breakpoint we reset all top borders and re-apply them only
   to items past the first row, producing one clean hairline per row
   transition. Mobile (1 col) → items 2..8. Tablet (2 col) → 3..8.
   Desktop (4 col) → 5..8. */
.md-typeset .fl-why-grid > .fl-why-item {
  border-top: 1px solid var(--fl-rule);
}
.md-typeset .fl-why-grid > .fl-why-item:first-child {
  border-top: 0;
}
@media (min-width: 768px) {
  /* 2-column grid: first row = items 1-2. Items 3-8 get top borders. */
  .md-typeset .fl-why-grid > .fl-why-item {
    border-top: 1px solid var(--fl-rule);
  }
  .md-typeset .fl-why-grid > .fl-why-item:nth-child(-n+2) {
    border-top: 0;
  }
}
@media (min-width: 1024px) {
  /* 4-column grid: first row = items 1-4. Items 5-8 get top borders. */
  .md-typeset .fl-why-grid > .fl-why-item {
    border-top: 1px solid var(--fl-rule);
  }
  .md-typeset .fl-why-grid > .fl-why-item:nth-child(-n+4) {
    border-top: 0;
  }
}

.md-typeset .fl-why-index {
  font-family: var(--fl-font-body, 'Outfit', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--fl-gray-mid);
  margin: 0 0 0.6rem;
  display: block;
}
.md-typeset .fl-why-item h3,
.md-typeset h3.fl-why-title,
.md-typeset .fl-why-title {
  font-family: var(--fl-font-body, 'Outfit', system-ui, sans-serif) !important;
  font-size: 1.2rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fl-black, #000) !important;
  margin: 0 0 0.6rem !important;
}
.md-typeset .fl-why-item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--fl-gray-text);
}

/* ==================================================================
   Bottom CTA — full-bleed 50/50 band (#apply).
   ================================================================== */

.md-typeset .fl-cta-band {
  margin-top: 4rem;
  margin-bottom: 0 !important;
  background: var(--fl-band-soft);
}
.md-typeset .fl-cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
}
/* Tablet 2-up with a full-width tertiary row was removed: DOM order
   is primary → tertiary → secondary, so the span-2 tertiary landed
   in row 2 and dragged secondary into row 3 col 1, leaving primary
   alone in row 1 col 1 as a half-width red block next to dead space.
   Three cells collapse straight from the desktop 3-up to the mobile
   1-up layout instead. */
@media (min-width: 1024px) {
  .md-typeset .fl-cta-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* All three columns are grid containers with the SAME row template so
   headline / body text / spacer / button / fineprint line up between
   columns even if the body paragraphs have different lengths. */
.md-typeset .fl-cta-primary,
.md-typeset .fl-cta-tertiary,
.md-typeset .fl-cta-secondary {
  padding: 4.5rem 2rem;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  justify-items: start;
  align-content: start;
  row-gap: 0.65rem;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .md-typeset .fl-cta-primary,
  .md-typeset .fl-cta-tertiary,
  .md-typeset .fl-cta-secondary {
    padding: 5.5rem 4rem;
  }
}

.md-typeset .fl-cta-primary {
  background: var(--fl-band-primary);
  color: var(--fl-band-primary-ink);
  order: 1;
}
.md-typeset .fl-cta-tertiary {
  background: var(--fl-band-dark);
  color: var(--fl-band-dark-ink);
  order: 2;
}
.md-typeset .fl-cta-secondary {
  background: var(--fl-band-soft);
  color: var(--fl-black);
  order: 3;
}

/* Matched headline size on all three columns so their baselines align. */
.md-typeset .fl-cta-primary h3,
.md-typeset .fl-cta-tertiary h3,
.md-typeset .fl-cta-secondary h3 {
  font-family: var(--fl-font-body, 'Outfit', system-ui, sans-serif) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  font-size: 1.5rem !important;
  grid-row: 1;
}
.md-typeset .fl-cta-primary h3 {
  color: var(--fl-band-primary-ink) !important;
}
.md-typeset .fl-cta-tertiary h3 {
  color: var(--fl-band-dark-ink) !important;
}
.md-typeset .fl-cta-secondary h3 {
  color: var(--fl-black) !important;
}

.md-typeset .fl-cta-primary p,
.md-typeset .fl-cta-tertiary p,
.md-typeset .fl-cta-secondary p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 32ch;
  grid-row: 2;
}
.md-typeset .fl-cta-primary p {
  color: var(--fl-band-primary-ink);
  opacity: 0.85;
}
.md-typeset .fl-cta-tertiary p {
  color: var(--fl-band-dark-ink);
  opacity: 0.85;
}
.md-typeset .fl-cta-secondary p {
  color: var(--fl-gray-text);
}

/* Row 3 is the 1fr spacer (no element), so row 4 (button) sits at the
   same Y in both columns. Both button rows use the same min-height so
   the buttons themselves are vertically centered on the same baseline. */
.md-typeset .fl-cta-btn-row {
  grid-row: 4;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  margin-top: 0.75rem;
}

/* Fineprint row — same row 5 position, same type size, different
   color per column. The left-column fineprint is an <a> (link to
   /signup/); the right-column is a plain <p>. Both look identical. */
.md-typeset .fl-cta-primary .fl-cta-fineprint,
.md-typeset .fl-cta-tertiary .fl-cta-fineprint,
.md-typeset .fl-cta-secondary .fl-cta-fineprint {
  grid-row: 5;
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  margin: 0.35rem 0 0 !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  transition: opacity .2s ease;
}
.md-typeset .fl-cta-primary .fl-cta-fineprint,
.md-typeset .fl-cta-primary a.fl-cta-fineprint,
.md-typeset .fl-cta-primary a.fl-cta-fineprint:visited,
.md-typeset .fl-cta-primary a.fl-cta-fineprint:hover {
  color: var(--fl-band-primary-ink) !important;
  opacity: 0.75;
}
.md-typeset .fl-cta-primary a.fl-cta-fineprint:hover {
  opacity: 1;
}
.md-typeset .fl-cta-tertiary .fl-cta-fineprint,
.md-typeset .fl-cta-tertiary a.fl-cta-fineprint,
.md-typeset .fl-cta-tertiary a.fl-cta-fineprint:visited,
.md-typeset .fl-cta-tertiary a.fl-cta-fineprint:hover {
  color: var(--fl-band-dark-ink) !important;
  opacity: 0.75;
}
.md-typeset .fl-cta-tertiary a.fl-cta-fineprint:hover {
  opacity: 1;
}
.md-typeset .fl-cta-secondary .fl-cta-fineprint-dark {
  color: var(--fl-gray-text) !important;
  opacity: 0.8;
}

/* Dark variant of the primary button for the right column, so both
   columns' buttons share size (btn-primary dimensions) and the right
   one visually matches the light-band aesthetic. */
.md-typeset .btn.fl-cta-btn-dark,
.md-typeset .btn.fl-cta-btn-dark:hover,
.md-typeset .btn.fl-cta-btn-dark:focus,
.md-typeset .btn.fl-cta-btn-dark:visited {
  background-color: var(--fl-black) !important;
  border-color: var(--fl-black) !important;
  color: var(--fl-white) !important;
  min-height: 3.25rem !important;
  height: auto !important;
  padding: 0.9rem 2rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.35);
}
.md-typeset .btn.fl-cta-btn-dark:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  transition: transform .2s ease, filter .2s ease;
}

/* White-on-red primary button — beats daisyUI .btn-primary specificity
   by chaining the utility with its own modifier class. */
.md-typeset .btn.fl-cta-btn-inverse,
.md-typeset a.btn.fl-cta-btn-inverse,
.md-typeset .btn.fl-cta-btn-inverse:hover,
.md-typeset .btn.fl-cta-btn-inverse:focus,
.md-typeset .btn.fl-cta-btn-inverse:visited {
  background-color: var(--fl-white) !important;
  border-color: var(--fl-white) !important;
  color: var(--fl-red) !important;
  min-height: 3.25rem !important;
  height: auto !important;
  padding: 0.9rem 2rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-top: 0;
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.35);
}
.md-typeset .btn.fl-cta-btn-inverse:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  transition: transform .2s ease, filter .2s ease;
}

/* White-on-dark-blue button — mirror of .fl-cta-btn-inverse for the
   tertiary (dark) column. Same dimensions + type + shadow as the
   red-column inverse button, so all three columns' buttons share a
   baseline. */
.md-typeset .btn.fl-cta-btn-dark-inverse,
.md-typeset a.btn.fl-cta-btn-dark-inverse,
.md-typeset .btn.fl-cta-btn-dark-inverse:hover,
.md-typeset .btn.fl-cta-btn-dark-inverse:focus,
.md-typeset .btn.fl-cta-btn-dark-inverse:visited {
  background-color: var(--fl-white) !important;
  border-color: var(--fl-white) !important;
  color: var(--fl-band-dark) !important;
  min-height: 3.25rem !important;
  height: auto !important;
  padding: 0.9rem 2rem !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-top: 0;
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.35);
}
.md-typeset .btn.fl-cta-btn-dark-inverse:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  transition: transform .2s ease, filter .2s ease;
}

@media (max-width: 767px) {
  .md-typeset .fl-cta-primary,
  .md-typeset .fl-cta-tertiary,
  .md-typeset .fl-cta-secondary {
    padding: 3rem 1.5rem;
  }
  .md-typeset .fl-cta-primary h3,
  .md-typeset .fl-cta-tertiary h3,
  .md-typeset .fl-cta-secondary h3 { font-size: 1.9rem !important; }
}

/* ==================================================================
   Footer gap — any page that ends in a `.fl-cta-band` (landing, join,
   downloads, any future page) sits flush against the `<fontlab-footer>`
   web component. Scoped via `body:has(.fl-cta-band)` so sub-pages
   WITHOUT the closing CTA band keep their natural bottom spacing.
   The sub-page branch must include `.fl-subpage` AND `.md-typeset` in
   its selector to outspecify the `body.fl-subpage .md-content__inner.md-typeset`
   rule in mk-fontlab/main.html which sets `padding-bottom: 3rem`.
   ================================================================== */
body:has(.fl-cta-band) .md-main__inner { margin-bottom: 0 !important; }
body.fl-landing .md-content__inner,
body.fl-subpage:has(.fl-cta-band) .md-content__inner.md-typeset {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
body:has(.fl-cta-band) .md-content__inner:after { display: none !important; }
.md-typeset .fl-cta-band { margin-bottom: 0 !important; }

/* ==================================================================
   Join page — top affiliate hero (daisyUI `.hero` in join.md).

   DaisyUI sets `.hero-content` to `display:flex`, `padding:1rem`, and
   `max-width:80rem`. The old `py-12` utility stacked on that, producing
   much taller vertical insets than horizontal ones. Flex items default
   to `min-width:auto`, so a wide primary button could also force the
   gray band wider than the viewport on narrow phones.
   ================================================================== */
.md-typeset .fl-join-hero.hero {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.md-typeset .fl-join-hero > .hero-content {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  /* Match horizontal, vertical, and bottom insets (replaces uneven py-12). */
  padding: 1.5rem !important;
}
.md-typeset .fl-join-hero > .hero-content > .max-w-2xl {
  width: 100%;
  max-width: min(100%, 42rem);
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 479px) {
  .md-typeset .fl-join-hero .btn-lg {
    white-space: normal;
    text-align: center;
    max-width: 100%;
  }
}

/* ==================================================================
   Join page — "What is Impact.com?" card: 2×2 stat grid on narrow
   viewports; title + lede left-aligned only when the column is narrow.
   ================================================================== */
@media (max-width: 1023px) {
  .md-typeset .fl-impact-card > .card-body {
    align-items: stretch !important;
    text-align: left !important;
  }
  .md-typeset .fl-impact-card .fl-section-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .md-typeset .fl-impact-card .fl-impact-lede {
    max-width: none !important;
    width: 100%;
    text-align: left !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    /* Normal paragraph rag (not `text-wrap: balance` from template). */
    text-wrap: wrap;
    text-wrap-style: auto;
  }
  /* Stat tiles stay visually centered; reset inherited body text-align. */
  .md-typeset .fl-impact-card .fl-impact-stats,
  .md-typeset .fl-impact-card .fl-impact-stats .stat {
    text-align: center;
  }

  /* Join page only — “How to get started” intro matches Impact card. */
  .md-typeset #how-it-works.fl-products-head {
    text-align: left !important;
  }
  .md-typeset #how-it-works.fl-products-head .fl-section-title {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .md-typeset #how-it-works.fl-products-head .fl-products-sub {
    text-align: left !important;
    -webkit-hyphens: auto;
    hyphens: auto;
    text-wrap: wrap;
    text-wrap-style: auto;
  }
}

/* Replace daisyUI vertical/horizontal stats with an explicit grid so
   narrow screens get a balanced 2×2; lg+ keeps one row of four.
   Below ~560px use one column — typical phone widths (≥400px) were
   still in 2×2 and overflowed long labels (“links, stats & payouts”). */
.md-typeset .fl-impact-stats.stats {
  display: grid !important;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row;
  overflow: visible;
}
@media (max-width: 560px) {
  .md-typeset .fl-impact-stats.stats {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  .md-typeset .fl-impact-stats.stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Dashed dividers — daisyUI only draws either row or column rules via
   `.stats-vertical` / `.stats-horizontal`; our grid needs explicit sides
   so horizontal dashes match vertical ones in 2×2 and 1×4 layouts. */
.md-typeset .fl-impact-stats {
  --fl-impact-stat-dash: var(--border, 1px) dashed
    color-mix(in oklab, var(--color-base-content, #1a1a1a) 12%, transparent);
}
.md-typeset .fl-impact-stats .stat {
  border: 0 !important;
}
/* DaisyUI sets nowrap on stat lines; allow wrapping when cells are tight. */
.md-typeset .fl-impact-stats .stat-value,
.md-typeset .fl-impact-stats .stat-desc {
  white-space: normal !important;
}
/* 1×4 — horizontal rules between stacked stats (same dash as daisy vertical). */
@media (max-width: 560px) {
  .md-typeset .fl-impact-stats .stat:not(:last-child) {
    border-block-end: var(--fl-impact-stat-dash) !important;
  }
}
/* 2×2 — vertical between columns + horizontal between rows. */
@media (min-width: 561px) and (max-width: 1023px) {
  .md-typeset .fl-impact-stats .stat:nth-child(1),
  .md-typeset .fl-impact-stats .stat:nth-child(2) {
    border-block-end: var(--fl-impact-stat-dash) !important;
  }
  .md-typeset .fl-impact-stats .stat:nth-child(1),
  .md-typeset .fl-impact-stats .stat:nth-child(3) {
    border-inline-end: var(--fl-impact-stat-dash) !important;
  }
}
/* One row of four — vertical rules only (same as daisy stats-horizontal). */
@media (min-width: 1024px) {
  .md-typeset .fl-impact-stats .stat:not(:last-child) {
    border-inline-end: var(--fl-impact-stat-dash) !important;
  }
}

/* ==================================================================
   Join page — "How to get started" full-bleed step bands.
   Each step is a full-bleed `.fl-band` with a CSS grid inside that
   splits text (33%) and image (66%) on desktop. Odd-numbered steps
   are text-LEFT on a light-gray backdrop; even-numbered steps
   (`.fl-step--reverse`) are text-RIGHT on white. On mobile the grid
   collapses to a single column and text ALWAYS precedes the image
   (DOM order is text-first; desktop uses explicit grid-column to
   place the text in column 2 for reversed steps).
   ================================================================== */
.md-typeset .fl-step {
  padding: 4rem 1.5rem;
}
.md-typeset .fl-step--light {
  background: var(--fl-band-soft);
}
.md-typeset .fl-step--white {
  background: var(--fl-white);
}
.md-typeset .fl-step-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
/* `.fl-step-cell` is the GRID ITEM. It owns layout (grid-column,
   justify-self, flex alignment). Its inner child (`.fl-step-text`
   or `figure.fl-step-image`) owns content styling. */
.md-typeset .fl-step-cell {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.md-typeset .fl-step-text {
  /* Default: full cell width on mobile, capped at 32rem on
     desktop so it has something to push against when the cell is
     aligned toward the central axis (see the 900px media query). */
}
.md-typeset .fl-step-text > .fl-step-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.2rem 0 1.25rem;
}
.md-typeset .fl-step-text .fl-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--fl-red);
  color: var(--fl-white);
  font-family: var(--fl-font-body, 'Outfit', system-ui, sans-serif) !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  text-transform: none !important;
}
/* Chain `.fl-step` + `.fl-step-text` to bump specificity to 0,3,1 —
   beats `body.fl-subpage .md-typeset h3` (0,2,2) in main.html. */
.md-typeset .fl-step .fl-step-text h3 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--fl-font-body, 'Outfit', system-ui, sans-serif) !important;
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  font-stretch: normal !important;
  font-variation-settings: normal !important;
  /* line-height: 1 so the h3 box hugs the glyphs and `align-items:
     center` on the parent snaps the visual center of the text to
     the center of the badge circle. Any line-height > 1 shoves the
     glyphs slightly off the flex cross-axis midline. */
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fl-black) !important;
}
.md-typeset .fl-step-text p {
  margin: 0 0 0.85rem !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  color: var(--fl-gray-text) !important;
}
.md-typeset .fl-step-text p:last-child { margin-bottom: 0 !important; }
.md-typeset .fl-step-text a.fl-step-link,
.md-typeset .fl-step-text a.fl-step-link:visited {
  color: var(--fl-red) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
  border-bottom: 0 !important;
}
.md-typeset .fl-step-text a.fl-step-link:hover {
  filter: brightness(0.85);
}
.md-typeset .fl-step-image {
  margin: 0 !important;
  padding: 0 !important;
  /* MaterialX default `.md-typeset figure { width: fit-content }`
     makes the figure shrink-wrap to the image's rendered width —
     so on desktop the figure is narrower than its grid cell when
     max-height clips a portrait image. Use `justify-self` on the
     grid item to pin that narrower figure to the outer column edge
     (set in the 900px media query). */
}
.md-typeset .fl-step-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  border-radius: 0.75rem;
  border: 1px solid var(--fl-gray-light);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.18);
}
.md-typeset .fl-step-image figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--fl-gray-mid);
  text-align: center;
}

@media (min-width: 900px) {
  .md-typeset .fl-step {
    padding: 5rem 2rem;
  }
  /* Always 50/50 columns. The CELLS are the grid items; they
     align their inner content (text block or figure) toward the
     central gutter. DOM order stays text-then-image so mobile
     always renders text first; on desktop reversed steps
     reassign the cells' grid-column explicitly. */
  .md-typeset .fl-step-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  .md-typeset .fl-step--reverse .fl-step-cell--text {
    grid-column: 2;
    grid-row: 1;
  }
  .md-typeset .fl-step--reverse .fl-step-cell--image {
    grid-column: 1;
    grid-row: 1;
  }
  /* Cap the text block so the cell's flex alignment has room to
     push the block toward the central axis. */
  .md-typeset .fl-step .fl-step-cell--text .fl-step-text {
    max-width: 24rem;
  }
  /* Normal step: text-cell in col 1 → align its content to the
     right (toward centre); image-cell in col 2 → align to the
     left. */
  .md-typeset .fl-step:not(.fl-step--reverse) .fl-step-cell--text {
    align-items: flex-end;
  }
  .md-typeset .fl-step:not(.fl-step--reverse) .fl-step-cell--image {
    align-items: flex-start;
  }
  /* Reversed step: image-cell in col 1 → align right; text-cell
     in col 2 → align left. */
  .md-typeset .fl-step.fl-step--reverse .fl-step-cell--image {
    align-items: flex-end;
  }
  .md-typeset .fl-step.fl-step--reverse .fl-step-cell--text {
    align-items: flex-start;
  }
}