/* =============================================================================
   SkySearch — the three buyer landing pages.

   Loaded only by /ma-deal-sourcing, /private-equity-corp-dev and /search-funds,
   after skysearch.css. It adds what these pages need and changes nothing that
   any other page uses, so a decision taken here cannot move the home page.

   Every selector is namespaced `icp-`. That is not tidiness: this repo already
   has one collision between the home page's names and the shared sheet's, and
   the cheapest way not to have a second is a prefix nobody else types.

   THE SKINS
   Three buyers, three surfaces, one design system. A skin is a body class and
   six custom properties — it repaints the components, it does not re-lay them
   out. `--icp-paper` is the hero's surface, `--icp-scrim` is what sits between
   the painted plate and the type, and `--icp-route` is the line that ends at
   the person who was found.

     .icp--mandate   warm ivory, atlas contours   an advisor's mandate desk
     .icp--pipeline  deep sky, white type         an origination team's evidence desk
     .icp--notebook  warm paper, amber detail     one searcher's field notebook

   Gold stays what it is everywhere else on this site: the colour of something
   that was found. It is on the route and on the found card, and nowhere else.
   ========================================================================== */

.icp {
  --icp-paper: var(--surface);
  --icp-scrim: rgba(255, 255, 255, 0.8);
  --icp-hero-ink: var(--ink);
  --icp-hero-lede: var(--ink-2);
  --icp-hero-quiet: var(--muted);
  --icp-hero-line: var(--line);
  --icp-route: var(--gold);
  --icp-card: var(--surface);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .icp { scroll-behavior: auto; }
}

.icp--mandate {
  --icp-paper: #fbf9f5;
  --icp-scrim: rgba(251, 249, 245, 0.78);
  --icp-hero-line: #e8e2d6;
}

/* The one hero on a dark surface. Type is white, so the scrim is the brand's
   72% floor with room to spare, and every hairline switches to a light one. */
.icp--pipeline {
  --icp-paper: var(--sky-deep);
  --icp-scrim: rgba(30, 58, 110, 0.8);
  --icp-hero-ink: var(--on-sky);
  --icp-hero-lede: var(--on-sky-2);
  --icp-hero-quiet: var(--on-sky-2);
  --icp-hero-line: var(--sky-line);
}

.icp--notebook {
  --icp-paper: #fbf8f1;
  --icp-scrim: rgba(251, 248, 241, 0.82);
  --icp-hero-line: #ece3d2;
  /* Muted amber, kept for the route only. 4.1:1 on the paper — a line, never a
     word. Anything the reader has to read stays on the ink ramp. */
  --icp-route: #ab7134;
}

/* ------------------------------------------------------------------- nav --
   The shared nav starts transparent with white lettering, because on the home
   page the thing behind it at scroll 0 is a dark painted sky. Two of these
   three heroes are ivory paper, and white lettering on ivory is not a low
   contrast ratio — it is an invisible navigation bar.

   So the paper skins pin the nav to its light theme at every scroll position,
   and only the deep-sky skin keeps the over-the-plate treatment it was written
   for. Measured in a real viewport at scroll 0 with .context/nav-contrast.mjs;
   a fullPage screenshot cannot answer a question about a sticky element. */

.icp--mandate .nav-shell[data-scrolled='false'],
.icp--notebook .nav-shell[data-scrolled='false'] {
  --nav-bg: color-mix(in srgb, var(--icp-paper) 88%, transparent);
  --nav-blur: blur(14px);
  --nav-ink: var(--ink);
  --nav-ink-2: var(--ink-2);
  --nav-line: transparent;
  --nav-rule: var(--sky-cobalt);
  --nav-ghost-bg: var(--surface);
  --nav-ghost-line: var(--line-strong);
  --nav-ghost-ink: var(--ink);
  --nav-toggle-bg: var(--surface);
  --nav-toggle-line: var(--line-strong);
  --nav-primary-line: var(--sky-cobalt);
}
.icp--mandate .nav-shell[data-scrolled='true'],
.icp--notebook .nav-shell[data-scrolled='true'] {
  --nav-bg: rgba(255, 255, 255, 0.94);
}

/* ------------------------------------------------------------------ hero -- */

.icp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--icp-paper);
  color: var(--icp-hero-ink);
  border-bottom: 1px solid var(--icp-hero-line);

  /*
    The nav is sticky, not fixed, so without this the hero begins *below* it and
    the body's white shows through the transparent bar. On the deep-sky skin
    that put the nav's white lettering on a white strip — unreadable, and the
    kind of fault a fullPage screenshot hides. Pulling the hero up by the nav's
    own height is what the home page does, and it is the reason the bar has
    something to be transparent against.
  */
  margin-top: calc(var(--nav-h) * -1 - 1px);
  padding-block: calc(var(--nav-h) + clamp(1.75rem, 1rem + 2.4vw, 3rem)) var(--section-y);
}

/* The painted plate. Absolutely positioned and dimensioned in the markup, so it
   paints behind the words without ever having pushed them anywhere: CLS 0. */
.icp-hero__plate {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  z-index: -2;
  pointer-events: none;
}

.icp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--icp-scrim);
  pointer-events: none;
}

/* The plate is a whole photograph's worth of detail behind a paragraph. On the
   two paper skins it earns its place at the edges and gets out of the way in
   the middle, which is where the reading happens. */
.icp--mandate .icp-hero::before,
.icp--notebook .icp-hero::before {
  background:
    radial-gradient(120% 90% at 30% 40%, var(--icp-paper) 0%, rgba(255, 255, 255, 0) 62%),
    var(--icp-scrim);
}

.icp-hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 62rem) {
  .icp-hero__grid { grid-template-columns: 52fr 48fr; }
  .icp--pipeline .icp-hero__grid { grid-template-columns: 47fr 53fr; }
}

.icp-hero__eyebrow { color: var(--icp-hero-ink); opacity: 0.78; }
.icp--pipeline .icp-hero__eyebrow { opacity: 1; color: var(--gold-light); }

.icp-hero h1 {
  font-size: var(--fs-display);
  line-height: 1.03;
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  max-width: 15ch;
}

/* Three words shorter and the searcher's headline still needs two lines. Given
   the room it wants, it reads as one thought rather than four fragments. */
.icp--notebook .icp-hero h1 { max-width: 18ch; }

.icp-hero .lede { color: var(--icp-hero-lede); max-width: 34rem; }

.icp-hero__actions { margin-top: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.icp-hero__helper {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1.1rem;
  font-size: var(--fs-small);
  color: var(--icp-hero-quiet);
  max-width: 30rem;
}
.icp-hero__helper svg { width: 15px; height: 15px; flex: none; margin-top: 0.15rem; }

.icp--pipeline .icp-hero .btn--ghost {
  border-color: var(--sky-line);
  color: var(--on-sky);
  background: rgba(255, 255, 255, 0.06);
}
.icp--pipeline .icp-hero .btn--ghost:hover { background: rgba(255, 255, 255, 0.14); }

/* --------------------------------------------------------------- figures -- */

/* One bespoke working object per buyer. All three are real HTML — real text in
   real elements — so they wrap, translate, select and read out. */

.icp-fig {
  position: relative;
  margin: 0;
  display: grid;
  gap: 0;
}

.icp-fig__flag {
  order: -1;
  justify-self: start;
  margin-bottom: 0.75rem;
  padding: 0.24rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--icp-hero-line);
  background: color-mix(in srgb, var(--icp-paper) 88%, transparent);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--icp-hero-quiet);
}
.icp--pipeline .icp-fig__flag { background: rgba(255, 255, 255, 0.1); color: var(--on-sky-2); }

/* Cards and panels: one rule, three surfaces. */
.icp-sheet,
.icp-panel,
.icp-card,
.icp-book {
  background: var(--icp-card);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-m);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.35rem);
  color: var(--ink);
}
.icp--pipeline .icp-sheet,
.icp--pipeline .icp-panel,
.icp--pipeline .icp-card,
.icp--pipeline .icp-book { box-shadow: var(--shadow-l); }

.icp-sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}
.icp-sheet__head .label { margin: 0; }
.icp-sheet__ref { font-size: var(--fs-small); color: var(--muted); }

.icp-sheet__rows { display: grid; gap: 0.1rem; margin-top: 0.35rem; }
.icp-sheet__rows li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.55rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
}
.icp-sheet__rows svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.icp-sheet__rows b { display: block; font-size: 0.92rem; font-weight: 600; }
.icp-sheet__rows em { display: block; font-style: normal; font-size: var(--fs-small); color: var(--muted); }

/* The one row the route leaves from. Cobalt, because it is selected — not gold,
   because nothing has been found yet. */
.icp-sheet__rows .is-picked {
  border-color: var(--cobalt-line);
  background: var(--cobalt-soft);
}
.icp-sheet__rows .is-picked svg { color: var(--cobalt-ink); }

.icp-panel__head {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 0.7rem;
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--line);
}

.icp-rows { display: grid; gap: 0.35rem; }
.icp-rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.55rem;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
}
.icp-rows .is-picked { border-color: var(--cobalt-line); background: var(--cobalt-soft); }
.icp-rows__name b { display: block; font-size: 0.92rem; font-weight: 600; }
.icp-rows__name em { display: block; font-style: normal; font-size: var(--fs-small); color: var(--muted); }

/* State chips: a word and a shape on every one. Colour is the third cue, never
   the only one, so the reader who cannot separate the green from the amber
   still reads "Needs review". */
.icp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--cloud);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.icp-chip svg { width: 13px; height: 13px; flex: none; }
.icp-chip--found { background: var(--good-soft); border-color: var(--good-line); color: var(--good); }
.icp-chip--review { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.icp-chip--none { background: var(--cloud); border-color: var(--line-strong); color: var(--muted); }

.icp-card__kicker {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 0.5rem;
}
.icp-card__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.icp-card__name svg { width: 18px; height: 18px; flex: none; color: var(--cobalt-ink); }
.icp-card__role { margin-top: 0.15rem; font-size: var(--fs-small); color: var(--muted); }
.icp-card__mail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
.icp-card__mail svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.icp-card__mail code {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  color: var(--ink-2);
  word-break: break-all;
}

/* The found card is the one place gold appears, and it is the last thing on
   the route. */
.icp-card--found,
.icp-card--person {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--surface) 42%);
}

.icp-card__after { margin-top: 0.6rem; font-size: 0.8rem; color: var(--gold-ink); }

.icp-srcs { display: grid; gap: 0.3rem; margin-top: 0.75rem; }
.icp-srcs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.icp-srcs svg { width: 14px; height: 14px; flex: none; color: var(--muted); }

/* ---------------------------------------------------------------- routes -- */

/* Each connector sits in the flow between the two things it joins. Nothing here
   is positioned over a card, so nothing lands across one when a name wraps. */

.icp-join__line {
  fill: none;
  stroke: var(--icp-route);
  stroke-width: 2;
  stroke-linecap: round;
}
.icp-join__head {
  fill: none;
  stroke: var(--icp-route);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icp-join--arc {
  position: relative;
  height: 3rem;
  margin-inline: clamp(1rem, 6vw, 3rem);
}
.icp-join--arc svg { width: 100%; height: 100%; display: block; }
.icp-join__dot {
  position: absolute;
  right: 6%;
  bottom: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--icp-route);
}

.icp-join--across { display: grid; place-items: center; padding: 0.4rem; }
.icp-join--across svg { width: 44px; height: 24px; transform: rotate(90deg); }
@media (min-width: 62rem) {
  .icp-join--across svg { transform: none; }
}

/* --------------------------------------------------------- mandate skin -- */

.icp-fig--mandate .icp-card--person {
  width: min(100%, 21rem);
  justify-self: end;
}

/* --------------------------------------------------------- pipeline skin -- */

.icp-fig--pipeline { gap: 0; }
@media (min-width: 62rem) {
  .icp-fig--pipeline {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .icp-fig--pipeline .icp-fig__flag { grid-column: 1 / -1; }
}

.icp-panel--evidence .icp-card__name { margin-top: 0.25rem; }

/* --------------------------------------------------------- notebook skin -- */

.icp-book { display: grid; gap: 0.9rem; }
.icp-book__head .label { margin: 0; }
.icp-book__co { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.014em; }
.icp-book__note {
  font-size: var(--fs-small);
  color: var(--muted);
  padding-left: 0.8rem;
  border-left: 2px solid var(--icp-route);
}

.icp-book__trail { position: relative; padding-left: 1.65rem; }
/* An absolutely positioned SVG with both `top` and `bottom` set still takes its
   height from its intrinsic ratio, so the spine drew one short squiggle beside
   the first item instead of running the length of the trail. Give it a height
   to stretch to and preserveAspectRatio="none" does the rest. */
.icp-book__spine {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 14px;
  height: calc(100% - 0.7rem);
}
.icp-book__trail ul { display: grid; gap: 0.6rem; }
.icp-book__trail li { display: flex; align-items: flex-start; gap: 0.6rem; }
.icp-book__trail li svg { width: 16px; height: 16px; flex: none; margin-top: 0.15rem; color: var(--cobalt-ink); }
.icp-book__trail b { display: block; font-size: 0.92rem; font-weight: 600; }
.icp-book__trail em { display: block; font-style: normal; font-size: var(--fs-small); color: var(--muted); }

.icp-book .icp-card--found { box-shadow: none; }

/* ------------------------------------------------------------- the bands -- */

.icp-band { scroll-margin-top: var(--nav-clear); }
.icp-band--tight { padding-top: 0; }

.icp-head { max-width: 46rem; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.icp-head--center { max-width: 42rem; margin-inline: auto; text-align: center; }
.icp-head--center .label { justify-content: center; }
.icp-head--center .lede { margin-inline: auto; }

.icp-split { display: grid; gap: clamp(1.25rem, 0.8rem + 2vw, 2.75rem); }
@media (min-width: 56rem) {
  .icp-split { grid-template-columns: 1fr 1fr; align-items: start; }
}
.icp-split__body { font-size: var(--fs-lede); color: var(--ink-2); max-width: 34rem; }

/* --------------------------------------------------------------- example -- */

.icp-ex {
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--cloud);
  padding: clamp(1.1rem, 0.8rem + 1.4vw, 1.9rem);
}

/* The label goes above the thing it qualifies. A caption under a result is read
   after the result has already been believed. */
.icp-ex__flag { margin-bottom: 1.1rem; }

.icp-ex__grid { display: grid; gap: 1.25rem; }
@media (min-width: 60rem) {
  .icp-ex__grid { grid-template-columns: 1fr 1fr 1.15fr; gap: 2rem; }
  .icp-ex__col + .icp-ex__col { padding-left: 2rem; border-left: 1px solid var(--line); }
}

.icp-ex__in {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  font-size: 0.95rem;
}
.icp-ex__in svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.icp-ex__before { margin-top: 0.5rem; font-size: var(--fs-small); color: var(--muted); }

.icp-ex__steps { display: grid; gap: 0.7rem; }
.icp-ex__steps li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
  flex-wrap: wrap;
}
.icp-ex__steps span {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 50%;
  background: var(--cobalt-soft);
  color: var(--cobalt-ink);
  font-size: 0.74rem;
  font-weight: 700;
  align-self: center;
}
.icp-ex__steps em {
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.icp-ex__col--out .icp-card { background: var(--surface); }
.icp-ex__col--out .icp-card--found {
  background: linear-gradient(180deg, var(--gold-soft) 0%, var(--surface) 42%);
}

.icp-ex__foot {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.icp-ex__foot svg { width: 16px; height: 16px; flex: none; margin-top: 0.1rem; color: var(--muted); }

/* --------------------------------------------------------------- problem -- */

.icp-pains { display: grid; gap: 1.4rem; }
.icp-pains li { padding-left: 1rem; border-left: 2px solid var(--icp-route); }
.icp-pains h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.012em; }
.icp-pains p { margin-top: 0.3rem; font-size: var(--fs-body); color: var(--ink-2); }

/* --------------------------------------------------------------- process -- */

.icp-steps { display: grid; gap: 1.25rem; counter-reset: none; }
@media (min-width: 52rem) {
  .icp-steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.icp-steps li {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: var(--shadow-m);
}
.icp-steps__n {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: var(--sky-cobalt);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
}
.icp-steps h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.012em; }
.icp-steps li > p:not(.icp-steps__n):not(.icp-steps__cost) {
  margin-top: 0.35rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.icp-steps__cost {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--gold-line);
  background: var(--gold-soft);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-ink);
}
.icp-steps__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1.5rem;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.icp-steps__terms svg { width: 16px; height: 16px; flex: none; margin-top: 0.1rem; color: var(--muted); }
.icp-steps__terms a { color: var(--cobalt-ink); }

/* ------------------------------------------------------------- stack fit -- */

/* One axis, four stops. On a phone the same rail runs downward rather than
   becoming four cards — without the rail the four labels read as a list, and
   the argument that they are one journey disappears. */
.icp-rail {
  display: grid;
  gap: 0;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  counter-reset: none;
}
.icp-rail li {
  position: relative;
  padding: 0 0 1.6rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-2);
}
.icp-rail li::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 0.75rem;
  bottom: -0.35rem;
  width: 2px;
  background: var(--line-strong);
}
.icp-rail li:last-child { padding-bottom: 0; }
.icp-rail li:last-child::before { display: none; }
.icp-rail__dot {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
}
.icp-rail .is-end { color: var(--ink); }
.icp-rail .is-end .icp-rail__dot { border-color: var(--icp-route); background: var(--icp-route); }

@media (min-width: 56rem) {
  .icp-rail { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .icp-rail li { padding: 1.9rem 1.25rem 0 0; }
  .icp-rail li::before {
    left: 12px;
    right: -1.25rem;
    top: 5px;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .icp-rail__dot { top: 0; left: 0; }
}

/* ------------------------------------------------------------- use cases -- */

.icp-uses { display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .icp-uses { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
.icp-uses li {
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}
.icp-uses h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.012em; }
.icp-uses p { margin-top: 0.35rem; font-size: var(--fs-small); color: var(--ink-2); }

/* ----------------------------------------------------------------- offer -- */

.icp-start { --icp-card: var(--surface); }

.icp-form {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  padding: clamp(1.1rem, 0.8rem + 1.4vw, 1.75rem);
  border-radius: var(--radius-l);
  background: var(--surface);
  box-shadow: var(--shadow-l);
  color: var(--ink);
}

.icp-form__summary {
  margin-bottom: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-s);
  border: 1px solid var(--bad-line);
  background: var(--bad-soft);
  color: var(--bad);
  font-size: var(--fs-small);
  font-weight: 600;
}
.icp-form__summary[hidden] { display: none; }

.icp-form__fields { display: grid; gap: 1rem; }
@media (min-width: 40rem) {
  .icp-form__fields { grid-template-columns: 1fr 1fr; }
}

.icp-field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink);
}
.icp-field input {
  width: 100%;
  min-height: 46px;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
.icp-field input::placeholder { color: var(--muted); }
.icp-field input:focus-visible {
  outline: 2px solid var(--sky-cobalt);
  outline-offset: 1px;
  border-color: var(--sky-cobalt);
}
.icp-field.is-bad input { border-color: var(--bad); }
.icp-field__hint { margin-top: 0.3rem; font-size: 0.8rem; color: var(--muted); }

.icp-roles { margin-top: 1rem; }
.icp-roles > p {
  margin-bottom: 0.45rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.icp-roles__set { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.icp-roles__chip {
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}
.icp-roles__chip:hover { border-color: var(--sky-cobalt); color: var(--cobalt-ink); background: var(--cobalt-soft); }

.icp-form__go { margin-top: 1.25rem; min-height: 48px; }
.icp-form__go[disabled] { opacity: 0.7; cursor: progress; }

/* Five centred lines of terms is a paragraph pretending to be a caption. Flush
   left, it is four lines a reader can actually get through — and these are the
   lines that say what a credit costs, so they have to be read. */
.icp-form__terms {
  margin-top: 0.9rem;
  font-size: var(--fs-small);
  color: var(--muted);
  line-height: 1.5;
}
.icp-form__terms a { color: var(--cobalt-ink); }

/* --------------------------------------------------------------- closing -- */

.icp-closing { text-align: center; }
.icp-closing .lede { margin-inline: auto; }
.icp-closing .btn-row { margin-top: 1.6rem; }
.icp-closing__terms { margin-top: 0.9rem; font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------------------------------------------ misc -- */

/* A link that is the entire content of an answer's paragraph is a standalone
   target, not an inline one, so WCAG 2.5.8's 24px floor applies to it. A
   mid-sentence link keeps its line-height exemption and is left alone. */
.icp .faq__a p > a:only-child { display: inline-block; padding-block: 0.32rem; }

/*
  Eight questions rather than the shared sheet's six, so the floor that stops
  the page moving under a reader has to clear the tallest of them open.

  Measured, not guessed: 479px closed, 612px with "What does it cost?" open, at
  1440 (.context/icp-faq-measure.mjs). 38.3rem, rounded up to 39. The first
  guess was 44rem and it reserved 100px of white space to prevent a movement
  that was never going to happen.
*/
.icp .faq__list { --faq-pane: 39rem; }

/* The mobile bar is a duplicate of a button that is already on screen at these
   widths, and site.js only stands it down, never removes it. */
@media (min-width: 62rem) {
  .icp .action-bar { display: none; }
}