/* ═══════════════════════════════════════════════════════════════════════
   COLLABORATION LISTING — FOUNDATION MIGRATION
   Loaded only behind redesign_active('collaborations-listing'), and loaded
   LAST, so every rule here wins on order against the three sheets that
   built the old page. Off, the browser never requests this file.

   THIS IS A MIGRATION, NOT A REBUILD. The founder's structure is untouched:
   same sections, same order, same grouping, same copy, same icons. What
   changes is (1) which components draw the controls, which is done in the
   template by putting real .fnd-* classes on them, and (2) the look, which
   is this file.

   WHY THIS FILE IS NOT JUST A REPAINT. The sibling browse page was migrated
   by renaming classes while keeping every visual value, and the founder
   opened it and said he did not think we had migrated the look at all. He
   was right: old and new differed only in two button fills. A migration that
   scores well on the component checker and looks identical has moved nothing.
   So this file changes the things that actually read at a glance:

     - the page sits on PAPER (#FAF8F5), not white on gray
     - the listing title is display type at up to 4rem, not 30px
     - every section heading is --fnd-t-h2, not 18px
     - cards are a hairline, never a shadow
     - the one ask is an ink pill, and it is the only filled control
     - sections breathe at --fnd-s8 rather than 24px

   HEIGHT. Hiding the stranger-facing sections from signed-in members
   (see showSeoSections in the template) removes 1,918px of the 4,398px
   desktop page. The rules below must not spend that saving back on air,
   so the section rhythm is tightened for the member mode specifically.
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. THE GROUND
   The single most visible change. The old page is white content on a
   #F9FAFB gray; the system is warm paper with white cards on it.
   ────────────────────────────────────────────────────────────── */
body.fnd.marketplace-listing-page,
.fnd .mp-listing {
  background: var(--fnd-paper);
}

.fnd .mp-listing {
  font-family: var(--fnd-body-font);
  color: var(--fnd-text);
}

/* THE OLD PALETTE, SHUT OFF AT THE SOURCE.
   The three sheets that build this page reach for `--color-primary` (the
   old library's indigo #4F46E5) in about twenty places: the response
   count, half a dozen icons, the composer's focus ring, the link colour
   inside the listing body. Chasing them one selector at a time is how a
   page comes out fully on theme at 1440 and re-asserts the old indigo at
   375, which is a measured failure mode on this project, not a worry.

   So the variable itself is re-pointed, scoped to the three subtrees this
   page owns. The shared chrome around them keeps the real value, because
   the sidebar and header are not this page's to restyle.

   Scoped to `.fnd` only, so with the switch off nothing here applies and
   the old page keeps its indigo exactly as it is today. */
.fnd .mp-listing,
.fnd #mp-respond-modal,
.fnd .mp-sticky-cta {
  --color-primary:      var(--fnd-accent-deep);
  --color-primary-dark: var(--fnd-ink);
}

/* ──────────────────────────────────────────────────────────────
   2. THE ATMOSPHERIC BANNER
   Kept, because it carries the poster's own channel identity and that is
   the point of it. Tamed, because it is an arbitrary image from an
   arbitrary channel and on a red-branded channel the old treatment reads
   as an error state rather than as atmosphere.

   Three changes, each doing one job:
     - shorter (240px -> 190px) so it is a band and not a field
     - lower opacity and lower saturation so a neon channel lands as a tint
     - fades into the PAPER, not into white, so it joins the page instead
       of stopping against it
   The founder is still deciding whether to keep it at all, so nothing here
   removes it and reverting is a matter of turning the switch off.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-banner {
  height: 190px;
  opacity: 0.42;
  filter: blur(26px) saturate(0.72);
}
.fnd .mp-banner::after {
  background: linear-gradient(
    to bottom,
    rgba(250, 248, 245, 0) 0%,
    rgba(250, 248, 245, 0.62) 55%,
    var(--fnd-paper) 100%
  );
}

/* ──────────────────────────────────────────────────────────────
   3. BREADCRUMB
   .fnd-crumbs draws it. The old sheet's own colour and size would tie on
   specificity, so both are released here rather than fought elsewhere.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-crumb {
  margin-bottom: var(--fnd-s5);
  font-size: var(--fnd-t-meta);
}
.fnd .mp-crumb a { color: var(--fnd-text-soft); }
.fnd .mp-crumb a:hover { color: var(--fnd-ink); }

/* ──────────────────────────────────────────────────────────────
   4. THE HERO
   The listing title is the page. On the old page it renders around 30px
   inside a white card with a shadow, which is the size of a section
   heading elsewhere in the system. Here it is display type, and the card
   around it is dropped entirely: the listing body IS the page, so it does
   not need a container to prove it.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-hero {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

.fnd .mp-hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--fnd-s4);
}

.fnd .mp-hero__title {
  font-family: var(--fnd-display-font);
  font-weight: 700;
  font-size: var(--fnd-t-display-2);
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--fnd-ink);
  margin: 0 0 var(--fnd-s4);
  /* Measure, not width. A 4rem headline running the full column is
     unreadable; 16 characters per line is the system's display measure. */
  max-width: 16ch;
}
/* A long single word (a channel name, a hashtag, a non-Latin title) must
   not push the column wider than the page at 375px. */
.fnd .mp-hero__title,
.fnd .mp-hero__body {
  overflow-wrap: break-word;
  word-break: break-word;
}

.fnd .mp-hero__byline {
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-soft);
  padding-bottom: var(--fnd-s4);
  border-bottom: 1px solid var(--fnd-rule);
  margin-bottom: var(--fnd-s5);
}
.fnd .mp-hero__byline-name { color: var(--fnd-ink); font-weight: 600; }

.fnd .mp-hero__body {
  font-size: var(--fnd-t-lede);
  line-height: 1.7;
  color: var(--fnd-text-soft);
  /* 62 characters is the system's reading measure. The old page ran the
     body the full width of the main column, which on a 1440 screen is
     roughly 95 characters and is measurably harder to read. */
  max-width: 62ch;
}
.fnd .mp-hero__body a { color: var(--fnd-accent-deep); }

/* The subscriber-range line and the view/response counts are facts about
   the listing, so they read as a quiet rule-separated strip rather than as
   two more pills competing with the chips at the top. */
.fnd .mp-hero__filter,
.fnd .mp-hero__signals {
  border-top: 1px solid var(--fnd-rule);
  margin-top: var(--fnd-s5);
  padding-top: var(--fnd-s3);
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-soft);
  background: transparent;
}
.fnd .mp-hero__filter strong { color: var(--fnd-ink); }
.fnd .mp-hero__signals { border-top: 0; margin-top: var(--fnd-s2); padding-top: 0; }

/* ──────────────────────────────────────────────────────────────
   5. CARDS
   Every panel on this page now carries .fnd-card, which supplies the
   hairline, the radius and the white. What is left is to stop the old
   sheet's shadows and its own borders from drawing a second box inside
   the first.
   ────────────────────────────────────────────────────────────── */
/* THE FOUNDER OPENED THIS LIVE AND SAID THE WHITE CARDS DID NOT GIVE HIM THE
   SEPARATION HE FEELS ON OTHER PAGES. He was right, and measuring it against
   /studio said exactly why. `.fnd-card` was on every one of these elements
   and was NOT the thing drawing them:

     |          | /studio (approved)  | this page, first build      |
     | border   | 1px #E4DFD8         | 1px rgba(15, 23, 42, 0.06)  |
     | radius   | 14px                | 20 to 22px                  |

   A 6%-opacity slate edge on white is very nearly nothing, which is the whole
   complaint. The first build released `background` and `box-shadow` on these
   selectors and left `border` and `border-radius` alone, so the old sheet kept
   drawing the card and `.fnd-card` only appeared to be in charge.

   THE GENERAL RULE THIS EARNS: releasing a legacy card is not one property. It
   is background, border-color, border-radius and box-shadow together, and the
   proof is a computed-style read against a reference page, never a screenshot.
   A card that is nearly invisible still photographs as a card. */
.fnd .mp-section,
.fnd .mp-cta-inline,
.fnd .mp-owner-cockpit,
.fnd .mp-explore__tile,
.fnd .mp-trust__item,
.fnd .mp-video-card,
.fnd .mp-mini-card {
  background: var(--fnd-card);
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r);
  box-shadow: none;
}

/* The two rails INSIDE a card are content, not cards of their own. Nesting a
   hairline box in a hairline box is what makes a page read as busy rather than
   as separated, so their own chrome comes off entirely. */
.fnd .mp-section .mp-video-card,
.fnd .mp-section .mp-mini-card {
  border: 0;
  border-radius: var(--fnd-r-sm);
  background: transparent;
}

.fnd .mp-section { padding: var(--fnd-s5); margin-bottom: var(--fnd-s5); }

.fnd .mp-section__title,
.fnd .mp-listing-faq__heading,
.fnd .mp-explore__heading,
.fnd .mp-trust__heading {
  font-family: var(--fnd-display-font);
  font-weight: 700;
  color: var(--fnd-ink);
  letter-spacing: -0.018em;
}
/* A card's own heading is a card heading, not a page heading. The page's
   section headings below the listing are the ones that get --fnd-t-h2. */
.fnd .mp-section__title { font-size: var(--fnd-t-h3); }
.fnd .mp-listing-faq__heading,
.fnd .mp-explore__heading,
.fnd .mp-trust__heading {
  font-size: var(--fnd-t-h2);
  line-height: 1.1;
  max-width: 20ch;
  margin: 0 0 var(--fnd-s2);
}

.fnd .mp-listing-faq__intro,
.fnd .mp-explore__intro {
  font-size: var(--fnd-t-lede);
  color: var(--fnd-text-soft);
  max-width: 56ch;
  margin: 0 0 var(--fnd-s5);
}

/* ──────────────────────────────────────────────────────────────
   6. THE ASK
   One filled control on the page. .fnd-btn--ink supplies the fill and the
   pill; the old sheet's indigo gradient, its shadow and its square-ish
   radius are released here so the two do not both draw a button.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-cta-big,
.fnd .mp-sticky-cta__btn,
.fnd .mp-closer__cta {
  background-image: none;
  box-shadow: none;
  border: 0;
  border-radius: 999px;
  width: 100%;
  /* The label and the trailing arrow sat at opposite ends of a wide pill,
     which reads as a row rather than as a button. .fnd-btn centres its
     contents with a 9px gap, and this stops the old rule pushing them
     apart again. */
  justify-content: center;
}
.fnd .mp-cta-big__icon { margin-left: 0; }

/* The disabled beta state keeps the system's quiet button rather than a
   greyed copy of the primary, so a control that cannot be pressed never
   looks like the one that can. */
.fnd .mp-cta-big--disabled,
.fnd .mp-sticky-cta__btn--disabled {
  background: transparent;
  color: var(--fnd-text-soft);
  box-shadow: inset 0 0 0 1px var(--fnd-edge);
  cursor: not-allowed;
}
.fnd .mp-cta-big--disabled:hover,
.fnd .mp-sticky-cta__btn--disabled:hover { transform: none; }

.fnd .mp-cta-inline { padding: var(--fnd-s4); }
.fnd .mp-cta-inline__hint {
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-soft);
  line-height: 1.55;
  margin: var(--fnd-s3) 0 0;
}
.fnd .mp-rail-trust {
  margin: var(--fnd-s4) 0 0;
  padding: var(--fnd-s4) 0 0;
  border-top: 1px solid var(--fnd-rule);
  list-style: none;
}
.fnd .mp-rail-trust li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-soft);
  padding: 5px 0;
}
.fnd .mp-rail-trust li i { color: var(--fnd-ok); margin-top: 3px; }

/* ──────────────────────────────────────────────────────────────
   7. THE POSTER CARD
   The one place on the page that is about a person. Their numbers get a
   shape rather than sitting as two bare figures: a hairline strip, the
   count in display type, the label in micro caps.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-poster__stats {
  border-top: 1px solid var(--fnd-rule);
  border-bottom: 1px solid var(--fnd-rule);
  background: transparent;
  border-radius: 0;
  margin: var(--fnd-s4) 0;
}
.fnd .mp-poster__stat-value {
  font-family: var(--fnd-display-font);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--fnd-ink);
}
.fnd .mp-poster__stat-label {
  font-size: var(--fnd-t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fnd-text-faint);
}
.fnd .mp-poster__bio {
  font-size: var(--fnd-t-sm);
  line-height: 1.65;
  color: var(--fnd-text-soft);
}
/* The two pills in the poster card are BUTTONS by every signal they give,
   so under the switch they are drawn by .fnd-btn--quiet rather than by a
   page-private copy of it. That also fixes the 35px height the old rule
   gave them on a phone: the system's button is 44px by construction.
   Only the things .fnd-btn does not own are set here. */
.fnd .mp-poster__link {
  border: 0;
  background: transparent;
  width: auto;
}

/* "Browse all open series collaborations" is a standalone destination at
   the end of a card, not a link inside a sentence, so it gets a real
   press area. The inline names in the byline and the poster card are
   deliberately NOT padded out: they sit mid-sentence, and a 44px-tall
   inline name breaks the line it lives in. */
.fnd .mp-section__more-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--fnd-s3);
  border-radius: 999px;
  color: var(--fnd-ink);
  font-weight: 600;
}
.fnd .mp-section__more-link:hover { background: var(--fnd-paper-2); }

/* ──────────────────────────────────────────────────────────────
   8. THE QUESTION LIST
   .fnd-faq draws its own open/close mark on summary::after. The old markup
   also carries a Font Awesome chevron inside the summary, so without this
   the question row shows two of them.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-listing-faq__chevron { display: none; }
.fnd .mp-listing-faq__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fnd-rule);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.fnd .mp-listing-faq__q {
  background: transparent;
  padding: 20px 56px 20px 0;
  font-family: var(--fnd-display-font);
  font-weight: 700;
  font-size: 17.5px;
  color: var(--fnd-ink);
}
.fnd .mp-listing-faq__a {
  margin: -4px 0 26px;
  padding: 0 2px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fnd-text-soft);
  max-width: 62ch;
  background: transparent;
  border: 0;
}
.fnd .mp-listing-faq__a a { color: var(--fnd-accent-deep); }

/* ──────────────────────────────────────────────────────────────
   9. DESTINATIONS AND PROMISES
   Both were tinted tiles with coloured icon squircles. On paper, with real
   cards under them, the tint is doing nothing except making three cards
   disagree with every other card on the page.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-explore__tile { padding: var(--fnd-s5); }
.fnd .mp-explore__tile-icon {
  background: var(--fnd-paper-2);
  color: var(--fnd-ink);
  border-radius: var(--fnd-r-sm);
}
.fnd .mp-explore__tile-eyebrow,
.fnd .mp-trust__label {
  font-size: var(--fnd-t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fnd-text-faint);
}
.fnd .mp-explore__tile-title {
  font-family: var(--fnd-display-font);
  font-weight: 700;
  font-size: var(--fnd-t-h3);
  color: var(--fnd-ink);
}
.fnd .mp-explore__tile-sub,
.fnd .mp-trust__desc {
  font-size: var(--fnd-t-sm);
  color: var(--fnd-text-soft);
  line-height: 1.6;
}
.fnd .mp-explore__tile-cta { color: var(--fnd-accent-deep); font-weight: 600; }
.fnd .mp-trust__item { padding: var(--fnd-s4); }
.fnd .mp-trust__icon {
  background: var(--fnd-paper-2);
  color: var(--fnd-ink);
  border-radius: var(--fnd-r-sm);
}
/* .mp-trust__label is the promise itself and must read as a label, not as
   an eyebrow. The uppercase rule above is scoped off it here rather than
   being written twice. */
.fnd .mp-trust__label {
  font-size: var(--fnd-t-sm);
  letter-spacing: -0.005em;
  text-transform: none;
  font-weight: 700;
  color: var(--fnd-ink);
  font-family: var(--fnd-display-font);
}

/* ──────────────────────────────────────────────────────────────
   10. THE CLOSING ASK
   The page's one ink moment. .fnd-ink-surface supplies the lit gradient;
   a flat dark slab is on the anti-pattern list because it already shipped
   once and read as dead. All this does is release the old indigo fill and
   colour the type for ink.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-closer {
  background-image: none;
  border-radius: var(--fnd-r);
  padding: var(--fnd-s8) var(--fnd-s5);
}
/* The indigo lived on the INNER element, not on the section, so putting
   .fnd-ink-surface on the section drew an indigo card inside an ink one.
   Two nested filled boxes was the single worst thing on the first build of
   this page. The inner is a measure wrapper now and paints nothing. */
.fnd .mp-closer__inner {
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.fnd .mp-closer__eyebrow {
  font-size: var(--fnd-t-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fnd-on-ink-faint);
}
.fnd .mp-closer__heading {
  font-family: var(--fnd-display-font);
  font-weight: 700;
  font-size: var(--fnd-t-h2);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--fnd-on-ink);
  margin: var(--fnd-s2) 0 var(--fnd-s3);
}
.fnd .mp-closer__sub {
  color: var(--fnd-on-ink-soft);
  font-size: var(--fnd-t-lede);
  max-width: 44ch;
  margin: 0 auto var(--fnd-s5);
}
/* White on ink is the system's light button. The ask at the end of the
   page is the same ask as the one in the rail, so it must not look like a
   different, weaker control. */
.fnd .mp-closer__cta {
  background: #fff;
  color: var(--fnd-ink);
  width: auto;
  min-width: 260px;
  max-width: 100%;
}

/* ──────────────────────────────────────────────────────────────
   11. SECTION RHYTHM
   The system's air is 62px between sections. The old page ran 24 to 32px,
   which is why twelve sections read as one continuous scroll.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-section--full { margin-top: var(--fnd-s8); }
.fnd .mp-listing-faq,
.fnd .mp-explore,
.fnd .mp-trust { margin-top: var(--fnd-s8); }
.fnd .mp-closer { margin-top: var(--fnd-s8); }

/* A signed-in member is not shown the four stranger-facing sections, so
   their content ends sooner. Without this the saved height would simply be
   replaced by a long run of empty paper under the last card. */
.fnd.mp-mode-member .mp-section--full { margin-top: var(--fnd-s7); }
.fnd.mp-mode-member .mp-closer { margin-top: var(--fnd-s7); }

/* ──────────────────────────────────────────────────────────────
   12. THE COMPOSER
   The founder looked at this live and said it did not conform, and he was
   right: it was a page-private popup family (`.mp-sheet`, 45 rules) restyled
   to resemble the system rather than drawn by it. The system already ships
   exactly this component. `.fnd-modal--sheet` is a centred 560px panel on a
   desktop and a full-width bottom sheet on a phone, which is precisely what
   this composer has always been, and it was promoted out of the Contact Us
   migration for this reason.

   So the markup now carries the real parts: .fnd-modal--sheet, -panel, -head,
   -body, -foot, -close. Everything below only RELEASES the old family's
   equivalents so two popups are not drawn on top of each other.

   The open/close contract still matches: `.fnd-modal` shows and hides purely
   on the `hidden` attribute, which is what marketplace-listing.js already
   toggles, so no JavaScript changed.
   ────────────────────────────────────────────────────────────── */

/* .fnd-modal carries its own backdrop, so the old separate scrim would paint a
   second dimming layer over the first. It stays in the DOM because the close
   handler is bound to it; it just stops painting. */
.fnd .mp-sheet__scrim--fnd {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* The old panel's own fixed positioning, size and rounding all fought
   .fnd-modal-panel, which is flex, capped at 560px, and rounds itself. */
.fnd .mp-sheet__panel {
  position: relative;
  inset: auto;
  box-shadow: 0 24px 64px rgba(22, 20, 26, 0.28);
  border: 0;
  transform: none;
  /* Released for the same reason the cards were: the old family sets its own
     22px radius, 540px width and max-height, all at (0,1,0) in a sheet that
     loads AFTER the foundation, so `.fnd-modal-panel` loses every one of them
     and the system panel is on the element without being what draws it.

     These MIRROR .fnd-modal-panel rather than deferring to it. `unset` was
     tried first and is wrong: it resolves to `initial`, not to "let the other
     rule win", so it gave a 0px radius and a 1094px panel. CSS has no way to
     say "stand down"; a more specific selector must restate the value.

     Keep in step with .fnd-modal-panel in foundation.css if it ever moves. */
  width: 100%;
  max-width: 560px;
  max-height: min(88vh, 760px);
  border-radius: var(--fnd-r);
}
/* The phone half of the same mirror, from .fnd-modal--sheet .fnd-modal-panel.
   A sheet is full width, taller, and rounds only the two top corners. */
@media (max-width: 479px) {
  .fnd .mp-sheet__panel {
    width: 100%;
    max-width: none;
    max-height: 92vh;
    border-radius: var(--fnd-r) var(--fnd-r) 0 0;
  }
}

/* The drag handle is a phone affordance and the system sheet draws its own
   top edge, so a second grey pill above the title is noise on a desktop. */
@media (min-width: 481px) {
  .fnd .mp-sheet__handle { display: none; }
}

/* The recipient block IS the popup's head. .fnd-modal-head lays it out and
   spaces it; these are the parts the system does not own. */
.fnd .mp-sheet__hero {
  background: transparent;
  border: 0;
  border-radius: 0;
  align-items: center;
}
.fnd .mp-sheet__hero-eyebrow {
  font-size: var(--fnd-t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fnd-text-faint);
}
.fnd .mp-sheet__hero-name {
  font-family: var(--fnd-display-font);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--fnd-ink);
}
.fnd .mp-sheet__hero-meta { font-size: var(--fnd-t-sm); color: var(--fnd-text-soft); }

/* The one indigo the variable remap could not reach, because it is a raw
   rgba() literal rather than a var(). It is the system's soft-accent chip. */
.fnd .mp-sheet__hero-cat {
  background: var(--fnd-accent-soft);
  color: var(--fnd-accent-deep);
  font-weight: 700;
}

/* The composer's close button hovered to --color-gray-900, a colour no page
   the founder has approved uses on a hover. .fnd-modal-close owns the hover
   now; this only releases the old family's box so the two do not stack. */
.fnd .mp-sheet__close {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.fnd .mp-sheet__form { padding-top: 0; }

.fnd .mp-sheet__textarea {
  min-height: 190px;
  font-size: 16px;
  line-height: 1.65;
  border: 1px solid var(--fnd-rule);
  border-radius: var(--fnd-r-sm);
  background: var(--fnd-field-bg);
  color: var(--fnd-text);
}
.fnd .mp-sheet__textarea:focus {
  border-color: var(--fnd-ink);
  outline: 2px solid var(--fnd-accent-soft);
  outline-offset: 1px;
  box-shadow: none;
}

.fnd .mp-ideas__label {
  font-size: var(--fnd-t-meta);
  color: var(--fnd-text-soft);
  margin-bottom: var(--fnd-s3);
}
.fnd .mp-ideas__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fnd .mp-ideas__fast {
  background: var(--fnd-accent-soft);
  color: var(--fnd-accent-deep);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: var(--fnd-t-micro);
  font-weight: 700;
  margin-left: 6px;
}
.fnd .mp-sheet__helper { font-size: var(--fnd-t-meta); color: var(--fnd-text-soft); }

/* .fnd-modal-foot pushes the last child to the right, which would put Cancel
   on the left and Send on the right at whatever width its label needs. The ask
   should own the row, so Send takes the space and Cancel stays quiet beside it. */
/* .fnd-modal-foot is the system's answer and already does the right thing on a
   desktop: a row, a hairline above, the quiet action left, the ask pushed to
   the right edge. What has to go is the old family's version of the same bar,
   which was `position: sticky` with a white gradient and `padding: 14px 0`.
   That zero horizontal padding is why the send button sat flush against the
   panel edge on the first build of the migrated popup. */
.fnd .mp-sheet__actions {
  position: static;
  background: var(--fnd-paper);
  margin-top: 0;
  padding: var(--fnd-s4) var(--fnd-s5);
  align-items: center;
  /* The old family sets `flex-direction: column-reverse` in a media query
     further down its sheet. Measured, not guessed: the buttons kept painting
     in the wrong order while `order: 1` computed correctly on the send button,
     because in a reversed container the lower order paints LAST. A component
     that lays its children out in a row cannot inherit a reversed direction
     from the family it is replacing. */
  flex-direction: row;
}
.fnd .mp-sheet__actions .mp-sheet__submit { flex: 0 1 auto; margin-left: auto; }

/* THE PHONE. "Cancel" plus "Send to <a channel name>" is wider than 375px, so
   .fnd-modal-foot's `flex-wrap: wrap` does what it should and wraps, and two
   naturally-sized buttons on two lines read as a mistake rather than a choice.
   Wrapped, they take the full width and the ask goes FIRST, because on a phone
   the top of the pair is the one under the thumb and the one read first.

   Page-own for now, deliberately: it belongs in .fnd-modal--sheet .fnd-modal-foot
   as a system rule, but the first popup to hit it is not enough evidence about
   how every other popup's foot should behave. Promote it the second time. */
@media (max-width: 479px) {
  .fnd .mp-sheet__actions {
    padding-bottom: calc(var(--fnd-s4) + env(safe-area-inset-bottom, 0px));
  }
  .fnd .mp-sheet__actions .mp-sheet__submit,
  .fnd .mp-sheet__actions .mp-sheet__cancel {
    flex: 1 1 100%;
    margin-left: 0;
    width: 100%;
  }
  .fnd .mp-sheet__actions .mp-sheet__submit { order: 1; }
  .fnd .mp-sheet__actions .mp-sheet__cancel { order: 2; }
}

/* ──────────────────────────────────────────────────────────────
   13. THE PHONE
   The old page's mobile rules are a second codebase and they re-assert the
   old palette at 375 even when 1440 is entirely on theme. These are the
   places that were measured doing it.
   ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .fnd .mp-listing { padding-left: 16px; padding-right: 16px; }

  .fnd .mp-hero__title {
    /* The display clamp already scales, but its 16ch measure is a desktop
       instruction: on a 375px screen it forces a two-word line. */
    max-width: none;
    letter-spacing: -0.022em;
  }
  .fnd .mp-hero__body { max-width: none; }

  .fnd .mp-section { padding: var(--fnd-s4); }
  .fnd .mp-section--full,
  .fnd .mp-listing-faq,
  .fnd .mp-explore,
  .fnd .mp-trust,
  .fnd .mp-closer { margin-top: var(--fnd-s7); }

  .fnd .mp-closer { padding: var(--fnd-s7) var(--fnd-s4); }
  .fnd .mp-closer__cta { width: 100%; min-width: 0; }

  /* The bottom bar owns the bottom edge on this page and sits above the
     home indicator. Its button is the ask, so it is the ink pill; the
     escape hatch beside it must not read as a second one. */
  .fnd .mp-sticky-cta {
    background: var(--fnd-card);
    border-top: 1px solid var(--fnd-rule);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .fnd .mp-sticky-cta__back {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--fnd-edge);
    color: var(--fnd-text);
    border: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   14. THE SEND BUTTON
   Found live on production: the page's ask in the rail was ink and the
   ask inside the composer was still the old indigo, so the same action
   wore two colours one click apart. It is drawn by .fnd-btn--ink now;
   what is left is releasing the old fill and giving the disabled state
   the system's quiet shape rather than a faded copy of the primary.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-sheet__submit {
  background-image: none;
  box-shadow: none;
  border: 0;
  /* NOT width: 100%. That was written when the old family laid the footer out
     as a stack; inside .fnd-modal-foot, which is a flex row that pushes its
     last child right, a full-width button wraps under Cancel and is clipped by
     the panel edge. Seen on the first build of the migrated popup. */
  width: auto;
}
.fnd .mp-sheet__submit:disabled {
  background: transparent;
  color: var(--fnd-text-faint);
  box-shadow: inset 0 0 0 1px var(--fnd-edge);
  cursor: not-allowed;
  opacity: 1;
}
.fnd .mp-sheet__submit:disabled:hover { transform: none; }

/* ──────────────────────────────────────────────────────────────
   15. HOVER
   The founder caught this one by using the page rather than looking at it:
   the ask is ink at rest and turned INDIGO under the cursor. A hover is a
   state of the component, so a button that is on-system at rest and off-system
   under the pointer is not migrated, it is painted.

   The `--color-primary` remap at the top of this file could not reach these:
   every one is a raw hex or rgba literal in the legacy sheet, and a variable
   remap only catches `var()` uses. Sweeping computed hover rules out of the
   CSSOM is the only way these surface, and it is now the last check before
   any migration is presented.

   .fnd-btn owns the whole interaction on the system side: a 2px lift, no
   colour change. All that is needed here is to stop the legacy hover
   repainting underneath it.
   ────────────────────────────────────────────────────────────── */
.fnd .mp-cta-big:hover,
.fnd .mp-sticky-cta__btn:hover,
.fnd .mp-sheet__submit:not(:disabled):hover {
  background: var(--fnd-ink);
  background-image: none;
  box-shadow: none;
  /* .fnd-btn lifts by 2px. The legacy rules lift by 1 and add an indigo
     glow, so both numbers have to be restated or the two disagree. */
  transform: translateY(-2px);
}
/* On ink, the closing band's ask is the white button, so its hover stays white
   rather than inheriting the ink hover above. */
.fnd .mp-closer__cta:hover {
  background: #fff;
  color: var(--fnd-ink);
  box-shadow: none;
  transform: translateY(-2px);
}
.fnd .mp-poster__link:hover {
  background: var(--fnd-paper-2);
  color: var(--fnd-ink);
  box-shadow: inset 0 0 0 1px var(--fnd-edge);
}