/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — THE PARTNER / EMBED BANNER
   ---------------------------------------------------------------------------
   One full-width card inside the 1328/24/1280 container, sitting directly under
   the freight-tool bento grid. Centred stack: a small rounded-square icon tile,
   a two-tone headline (the ask in ink, the qualifier in the muted tone), and a
   single dark CTA with a trailing chevron.

   WHY A NEW FILE.  Both CI guards key their baselines by `file:line`
   (docs/design-refactor/baseline-protocol.md r1), so new component CSS goes in
   a new file rather than mid-way through an existing sheet where it would
   renumber every entry below it. It also keeps this band clear of the seven
   sheets that re-declare `.hero`/`.section` with !important.

   THE TEXTURE IS NOT A GRADIENT.  The design law forbids CSS gradients, so
   this card uses the same technique as the hero card (landing-home-grid.css
   §1): a flat `--surface-hero` base with generated rasters over it — here just
   the matched grain PAIR, `--surface-hero-grain` (white) and
   `--surface-hero-grain-ink` (black), both tiled at their natural 256px size.
   They are decorative, so a failed image leaves the card on the flat tint
   rather than white. See the Wave 5 block at the foot of style.css for how the
   rasters are made (scripts/make-hero-wash.mjs).

   DESIGN LAW.  Tokens only; zero gradients, zero backdrop-filter, zero
   keyframes here; radii 6/8/12; spacing on {0,4,8,12,16,24,32,48,60,80,120};
   motion `var(--motion)` on the control only. The card does not lift on hover —
   only the button reacts.
   ═══════════════════════════════════════════════════════════════════════════ */

html body.qf-wft.landing-v2 .qf-partner-section {
  padding: 0 0 80px !important;
}

/* NO TOP DIVIDER ON EITHER OF THE TWO NEW SECTIONS.
   landing-frame.css paints a 1px rgba-white rule at `top: 0` of every
   `main > section` at z-index 4. That mechanism assumes the default
   `.section { padding: 72px 0 }`, so the line lands in empty space above a
   heading. These two sections deliberately have NO top padding — they are one
   band under the bento grid, spaced by the previous section's bottom padding —
   so the rule would paint ACROSS the partner card's own top edge and across
   the marquee's heading. That is the same artifact #545 removed from the hero
   (its exemption stopped matching when #535 renamed `.hero` to `.qf-hhero`),
   and the same fix: suppress it, because the thing below already draws its own
   edge — the card's 1px `--border-strong` rim, which is a stronger line than
   the 7%-white rule and would have sat 0px away from it.
   The marquee's sheet is loaded conditionally, so its selector lives here too;
   otherwise an empty marquee would leave an unmatched rule and a populated one
   would depend on load order for whether the seam appeared. */
html body.landing-v2.qf-wft main > section.qf-partner-section::after,
html body.landing-v2.qf-wft main > section.qf-marquee-section::after {
  display: none;
}

/* The card.

   IT NO LONGER CARRIES THE WASH RASTER AT ALL — flat `--surface-hero` plus the
   two grain tiles, and nothing else.

   It used to. The wash was a centre-lit vignette and this card cropped it to
   300% of its width at `50% 0%`, which showed only the light column down the
   middle; the whole apparatus existed because `cover` had put the vignette's
   deep rails directly under the headline (`--muted` measured 2.68:1 at 1024
   against a 4.5:1 requirement) and 300% was the crop that dodged them.

   The wash is now a pixel-pinned VERTICAL fade — saturated brand blue for its
   first 475 rows, near-white from 585 on — so every crop argument above is
   void. There is no slice of it this card can take that is both pale enough
   for dark ink and honest about what the raster is: the top is blue, and this
   card is only ~260px tall. Anchoring at the bottom would work, but it would
   mean painting a 1240px raster to show a flat region that is, by
   construction, EXACTLY `--surface-hero` — the generator holds the tail at the
   token value precisely so the two can meet without a seam. So the card just
   uses the token, and the result is pixel-identical to sampling the tail.

   What it keeps is the TEXTURE. The grain pair is tiled 1:1 and is what stops
   the band reading as a flat printed rectangle; it is also the layer that now
   ties this card visually to the hero card above it, which is the job the
   shared wash used to do. Dark ink on the composited ground re-measured off
   the rendered page: `--muted` 5.42:1 light / 5.28:1 dark at 1440.

   THE HAIRLINE IS THEN LOAD-BEARING. With no wash to draw an edge, the 1px
   `--border-strong` rim is what makes the 12px radius read against `--bg`.
   Same rim, same reason, as the hero card's bottom half. */
/* IT IS A GRID NOW, AND THE ICON SITS ON THE TITLE'S LINE.

   #553 turned all fifteen hero/bento cards into `auto minmax(0, 1fr)` two-column
   grids so the tile and the title read as ONE header rather than as a tile
   floating above a short title. This card — the thing sitting directly under
   those fifteen — kept the old centred flex column, so the page shipped two
   different icon treatments at once. Measured before the change, its tile and
   title centres were 62-80px apart depending on width; on the fifteen cards the
   same delta is 0.00px. This block closes that gap by adopting the identical
   idiom, not a lookalike: same `auto minmax(0, 1fr)` track pair, same 16px
   column gap, same `align-self: center` on both header items.

     col 1 (auto)     col 2 (minmax(0, 1fr))     col 3 (auto)
     ┌────────────┬──────────────────────┬──────────────────┐
     │ icon tile  │  h2.qf-partner-title │ a.qf-partner-cta │  row 1  auto
     └────────────┴──────────────────────┴──────────────────┘

   THE THIRD TRACK IS WHAT FILLS THE CARD. With the CTA on its own row 2 the
   card measured, at 1440: title box ending 411px (32% of the 1280 card) short
   of the right edge and 81px of nothing under the CTA — 298.72px tall to carry
   138.72px of content. Neither number is a spacing bug that padding could fix;
   the layout simply had a whole column of width it never used, which is what
   makes the widest breakpoint read unfinished. Moving the CTA into the empty
   column spends that width on the one thing a banner is for and drops the
   second row with it.

   THE TWO-ROW SHAPE IS STILL THERE, below 1100 — see the breakpoint block.
   Under a 28px headline the title track gets too narrow to share a line with a
   287px button, so at that width the CTA goes back under the header.

   NOT A LINE OF MARKUP MOVES — the source order (tile, title, CTA) is already
   the order the grid wants, and each child is placed by rule.

   `align-self: center` on all three keeps the icon-to-title centre delta at
   the 0.00px #556 measured; the CTA joins the same centred row rather than
   introducing a second vertical alignment.

   AND IT IS LEFT-ALIGNED, which is the same house rule the hero above it now
   obeys: page and card headers are never centred. This one was centred at ALL
   widths, so unlike the hero it was at least consistent — just consistently
   wrong. `justify-items: start` keeps the CTA at its natural width on the left
   instead of stretching it across the card. */
.qf-partner-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  justify-items: start;
  row-gap: 24px;
  column-gap: 16px;
  width: 100%;
  min-width: 0;
  /* 60, not 80. The other half of the dead space was vertical: 80px top and
     bottom wrapped 138.72px of content in a 298.72px card, and with the CTA
     now sharing row 1 the content is a single ~63px band — 160px of padding
     around it would be 72% of the card. 60px is the next step down the ramp
     and lands the band at 182.72px, which is the proportion the bento cards
     above it keep. The ≤860 and ≤560 blocks re-declare their own padding, so
     this moves nothing on phones. */
  padding: 60px 24px;
  background-color: var(--surface-hero);
  background-image: var(--surface-hero-grain), var(--surface-hero-grain-ink);
  background-repeat: repeat, repeat;
  background-position: 0 0, 0 0;
  background-size: auto, auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  text-align: left;
}

/* Icon tile — a rounded SQUARE, not a circle, so it echoes the card's own
   corner. Same metric and the same two tokens as the icon tile #545 put on all
   fifteen cards in the hero and bento grids (`.qf-toolcard__ico`): 48px, 12px
   radius, a tinted ground behind an accent glyph. Matching it rather than
   inventing a third tile treatment is the point — this banner sits directly
   under those cards.

   WHICH IS WHY IT FOLLOWS THEM TO AZURE. The card tiles moved off the brand
   indigo and onto the hero wash's own hue (style.css Wave 9); a banner two
   sections below them that stayed indigo would be the third tile treatment
   this rule exists to prevent. Its ground is the partner card's flat
   `--surface-hero` tail, where the glyph measures 5.15:1 light / 5.74:1 dark.
   The banner's CTA is untouched and still `--accent-fill`. */
.qf-partner-ico {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: var(--space-1);
  background: var(--icon-tile-azure-bg);
  border-radius: var(--radius);
  color: var(--icon-azure);
}
.qf-partner-ico svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Two-tone headline. Same idiom as `.qf-toolgrid-head__soft` on the bento grid
   above: the sentence leads in ink, the qualifier drops to the muted tone.
   `--muted` (not `--muted-soft`) because this text is long enough to be read
   rather than scanned and has to clear 4.5:1 on the wash. */
html body.qf-wft .qf-partner-title {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  max-width: 780px;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -1.28px;
  color: var(--ink);
  text-align: left;
  /* No orphans, as everywhere else on this band. Measured: "…on your own /
     site" at 414 and again at 320, one word alone on the last line. */
  text-wrap: balance;
}
html body.qf-wft .qf-partner-title .qf-partner-title__soft { color: var(--muted); }

/* The one CTA. Dark primary, 8px radius, trailing chevron — the same
   `--cta-*` tokens the bento grid's primary tool buttons use, so the page has
   exactly one primary-button look. */
.qf-partner-cta {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--cta-bg);
  border: 1px solid var(--cta-bg);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cta-text);
  text-decoration: none;
  /* `--motion-state` (.2s), not `--motion` (.3s) — see the note on
     `.qf-toolbtn` in landing-home-grid.css §6. The longhand narrows the token's
     `all` to the three properties the hover rule below actually changes. */
  transition: var(--motion-state);
  transition-property: background-color, border-color, color;
}
/* The chevron slides on hover, `.2s`, exactly as the bento grid's buttons do —
   the one bit of movement the button idiom on this page allows. */
.qf-partner-cta__chev {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  transition: var(--motion-state);
  transition-property: transform;
}
html body.qf-wft .qf-partner-cta { color: var(--cta-text) !important; }
/* HOVER — the same repaint #545 gave every primary button: `--cta-bg` to the
   BRAND FILL family, not to `--cta-bg-hover` (a 0.0075 → 0.0045 luminance move
   nobody can see). `--accent-fill` / `--accent-ink` are #3356EE / #FFFFFF in
   both themes and measure 5.68:1 for this 16px/500 label. The card underneath
   still does not move — the no-lift rule is about cards, not buttons. */
html body.qf-wft .qf-partner-cta:hover {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--accent-ink) !important;
}
.qf-partner-cta:hover .qf-partner-cta__chev {
  transform: translateX(4px);
}
.qf-partner-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* LIGHT THEME — landing-wefixtrades-cleanup.css repaints every non-.btn link on
   this page in the accent, with !important at (0,3,2). That lands on this CTA,
   so it is answered here at (0,4,2), exactly as landing-home-grid.css §6 does
   for the tool buttons. */
html[data-theme="light"] body.qf-wft a.qf-partner-cta:not(.btn):not(.nav-link):not(.signin):not(.demo-link) {
  color: var(--cta-text) !important;
}

/* ── Breakpoints ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  /* The tile-to-title gap tightens 16 -> 12 exactly where `.qf-toolcard`'s does
     and for the same reason (landing-home-grid.css §7): the inline header costs
     the title 48px of tile plus the gap, and below 1100 the title is the thing
     that has to give. Matching the bento's breakpoint keeps the two cards one
     component rather than two that merely look alike at 1440. */
  .qf-partner-card { column-gap: 12px; }
  html body.qf-wft .qf-partner-title { font-size: 28px; letter-spacing: -1.12px; }
  /* BACK TO TWO ROWS. The three-track row above is a 1440-and-down-to-1101
     shape: it costs the title 48px of tile + 287px of button + two gaps, and
     below 1100 what is left is too narrow for a 28px headline to read as one
     line of copy. So the card returns to the `auto minmax(0, 1fr)` header with
     the CTA spanning underneath — the exact shape it shipped with, unchanged
     from 1100 all the way down, including the full-bleed button at ≤560. */
  .qf-partner-card { grid-template-columns: auto minmax(0, 1fr); }
  .qf-partner-cta { grid-column: 1 / -1; grid-row: 2; align-self: start; }
}

@media (max-width: 860px) {
  /* `row-gap`, NOT the `gap` shorthand — `gap: 24px` here would silently reset
     the 12px column gap set above and hand the tile-to-title seam 24px, which
     is 12px taken straight off the title's track. Measured at 720 before this
     was split: column gap 24px, title track 550px; after, 12px and 562px. */
  .qf-partner-card { padding: 48px 24px; row-gap: 24px; }
  html body.qf-wft .qf-partner-title { font-size: 24px; letter-spacing: -0.96px; }
}

@media (max-width: 560px) {
  html body.qf-wft.landing-v2 .qf-partner-section { padding: 0 0 48px !important; }
  .qf-partner-card { padding: 32px 16px; }
  html body.qf-wft .qf-partner-title { font-size: 22px; letter-spacing: -0.66px; }
  /* The button goes full-bleed inside the card's padding rather than wrapping
     its label onto a second line at 375. */
  .qf-partner-cta { width: 100%; }
}