/* =========================================================================
   PROCESS CARD ROW  (.pc-row / .pc-card)
   Shared component. DESIGN-BOOK 19 (built for managed-growth #timeline,
   2026-08-02) and 25 (adopted by enterprise-software #implementation,
   2026-08-03).

   Four steps standing side by side on one fixed-height stage, one open: the
   open step grows sideways into the row and the three closed ones give the
   width back, so the sequence reads as something you can see all of at once.
   Card anatomy, surface, border and shadow are the comparison-card language
   (DESIGN-BOOK 16.4): squared corners, 1px --line, white, 0 19px 42px
   rgba(7,16,48,.085), media header flush to the top edge, serif card headline
   at --fs-h3.

   The two hard constraints:
   1. The row height is fixed (--pc-h). Cards are centred inside it and the
      open one is taller, so no state change can move the page (DESIGN-BOOK 8).
   2. One type role per slot. The headline slot holds the step word when the
      card is closed and the claim when it is open -- same family, same size,
      same baseline, so the swap is a crossfade rather than a resize.

   It lives here rather than in a page stylesheet because two sections on two
   pages now run it, and the whole reason DESIGN-BOOK 19 measures what it does
   (0.00px layout shift, the off-viewport paint hides, the type ladder) is that
   those numbers hold in ONE place. Page-local business -- the section head,
   the artwork, the graphic inside .pc-media -- stays with the page.

   The section head is NOT here: managed-growth runs a two-column head with the
   CTA on the right (.pc-head*, mg.css) and enterprise-software runs the
   standard centred .section-head. Only the row is shared.

   Driven by assets/process-cards.js.
   ========================================================================= */

/* ---- the row ---- */
.pc-row {
  --pc-h: 520px;
  --pc-h-shut: 366px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--pc-h);
}
.pc-card {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: var(--pc-h-shut);
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 0;
  /* Closed cards are recessed, the open one is lit. On a white page canvas a
     white card with a 1px grey border reads as a ghost outline, not as an
     object -- the reference composition gets this for free by sitting its
     white cards on a grey field, which the rails forbid here. */
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    flex-grow .9s var(--ease-out-quint),
    height .9s var(--ease-out-quint),
    background .5s var(--ease-micro),
    box-shadow .9s var(--ease-micro);
}
/* 1.82 : 1 -- at the 1088px text column that is a 393px open card against
   three 216px ones, which is the widest the closed cards can be squeezed
   before "Compound" at the headline size stops fitting on one line.

   .pc-card--wide opens wider than the rest, and it is the card carrying a CTA
   under its paragraph: the extra width buys the description a shorter wrap and
   pays for the CTA's line inside the row's fixed height, rather than making
   that one card taller and breaking the "nothing below moves" rule. It was
   `#pc-card-01` while one page ran the row; a class so the second page can put
   its CTA on whichever step owns one.
   --pc-grow and --pc-total travel together: the total is this card's grow plus
   the three closed ones, and the text-width lock further down divides by it. */
.pc-card {
  --pc-grow: 1.82;
  --pc-total: 4.82;
  --pc-media-h: 244px;
}
.pc-card--wide {
  --pc-grow: 2.24;
  --pc-total: 5.24;
}
.pc-card.on {
  flex-grow: var(--pc-grow);
  height: var(--pc-h);
  background: #fff;
  box-shadow: 0 19px 42px rgba(7, 16, 48, .085);
}
.pc-card:not(.on):hover {
  background: #FAFAFA;
}
.pc-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---- the index: one numeral, two states ----
   It used to be a closed-state-only ghost that faded out and translated away
   while a separate mono stamp appeared on the artwork, so the step number was
   two elements handing over. It is now a single element that MORPHS: the giant
   ghost numeral travels down onto the artwork and lands as the white numeral,
   shrinking and changing colour on the way. Same node, so the digits are
   continuous rather than crossfaded, and the number exists once in the DOM. */
.pc-index {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 2;
  font-family: var(--serif);
  font-weight: 500;
  /* The display-word clamp exactly (DESIGN-BOOK 17.1) -- the giant numeral is
     the same role as #how's giant word, and the previous build of this section
     had already drifted to its own clamp(34px, 4.1vw, 58px). */
  font-size: clamp(38px, 4.3vw, 62px);
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(10, 16, 60, .13);
  text-shadow: 0 2px 12px rgba(3, 8, 35, 0);
  /* geometry on the card's own .9s curve so the numeral lands exactly as the
     artwork finishes opening; colour a touch faster so it is already white by
     the time it is over the art */
  transition:
    top .9s var(--ease-out-quint),
    left .9s var(--ease-out-quint),
    font-size .9s var(--ease-out-quint),
    color .6s var(--ease-micro),
    text-shadow .6s var(--ease-micro);
}
.pc-card:not(.on):hover .pc-index {
  color: rgba(10, 16, 60, .2);
}
/* The landed state: bottom-left of the artwork, on the same rail as the copy
   below it, set as the homepage's solution-card chip (Afical 18px/500 in white
   with a soft shadow -- `index.html #solutions .solution-chips span`). Derived
   from --pc-media-h so the numeral cannot drift off the artwork's foot if that
   height changes; 1.1em is its own line box at the landed size. */
.pc-card.on .pc-index {
  top: calc(var(--pc-media-h) - 22px - 1.1em);
  left: 28px;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(3, 8, 35, .32);
}

/* ---- the artwork, open state only ----
   Flush to the card's top edge and squared, like #compare's media header, so
   the band art is cut by the card frame rather than floated inside it. */
.pc-media {
  position: relative;
  display: block;
  flex: 0 0 auto;
  height: 0;
  overflow: hidden;
  background: #061640;
  opacity: 0;
  /* Closing, the panel leads out: a quick fade with no delay, so nothing is
     left painted across a card that is already narrowing. */
  transition: height .9s var(--ease-out-quint), opacity .22s var(--ease-micro);
}
/* Opening, it is held back a beat. The original .7s-from-zero fade lit a
   full-width plate inside a card barely a third open, so it was pushed to a
   .4s delay over .5s -- which overcorrected: the panel then landed 900ms after
   the click, and an image that appears that long after you press something
   reads as a failure to load rather than as a reveal. .1s/.34s keeps the plate
   from painting ahead of the frame while putting the artwork on screen inside
   half a second. The panel's own height is what masks it either way. */
.pc-card.on .pc-media {
  height: var(--pc-media-h);
  opacity: 1;
  transition: height .9s var(--ease-out-quint), opacity .34s var(--ease-micro) .1s;
}
/* Cropped from the top, not the centre. These are square sources in a 392x244
   window, so the crop is a real art-direction choice, and it is the one that
   puts a dark band under the stamp on all four: measured white-on-art contrast
   is 12.1 / 6.7 / 6.7 / 11.4 : 1 from the top against 11.4 / 5.3 / 6.0 / 3.0
   from the centre, where two of the four fall under the 5.7:1 floor every
   stamp on the site clears (DESIGN-BOOK 16.3) and the warm step 04 lands its
   stamp on bare orange at 3.0:1. */
.pc-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ---- copy, anchored to the card foot in both states ---- */
.pc-body {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 0 24px 26px;
  transition: padding .9s var(--ease-out-quint);
}
.pc-card.on .pc-body {
  padding: 0 28px 30px;
}
.pc-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--muted);
  transition: color .5s var(--ease-micro);
}
.pc-card.on .pc-kicker {
  color: var(--blue);
}
/* The kicker's `01 /` prefix and the rules that revealed it are gone: the step
   number now lives once, as the white numeral on the artwork, so the eyebrow
   carries only the phase ("Iteration"). That also retires the max-width
   collapse that used to hand the index over from the ghost numeral. */

/* One headline slot, two occupants. Both are taken out of flow and hung from
   the slot's bottom edge, so the word a closed card shows and the claim an
   open one shows share a baseline. Out of flow is the point: in flow, the
   claim was still being laid out at the *closed* card's 216px, wrapping to
   four lines and pushing the slot -- and with it the kicker above -- to a
   different height on every card. The slot is now exactly two lines, always.
   The claim also fades in only after the card has finished widening, so it is
   never seen reflowing through the intermediate widths. */
.pc-title {
  position: relative;
  /* The clip box, and the reason the handover is safe. Whichever occupant is
     not showing is PARKED BELOW this box, not merely faded: opacity and
     visibility are both ignored on Chrome's off-viewport raster path, so a
     full-page screenshot (DevTools capture, print, scroll-capture extensions)
     rendered all three closed cards with their claim ghosted straight through
     the step word. Geometry is the one hide that path honours -- the same
     reason the closed cards' artwork and paragraph, which are clipped by
     height and by 0fr, never leaked. Verified by diffing an in-viewport
     capture against a full-page capture of the same pixels.
     6px of padding widens the clip below the text so the descenders of
     "Strategy" and "Compound" are not shaved; the occupants sit on bottom:6px,
     so nothing moves. */
  overflow: hidden;
  margin-top: 12px;
  padding-bottom: 6px;
  min-height: calc(2 * 1.06em + 6px);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.06;
  letter-spacing: -.01em;
}
/* Family and weight repeated on the children: see the note on .pc-kicker --
   inheriting them from .pc-title loses to site.css's `span` rule. */
.pc-title > span {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  font-family: var(--serif);
  font-weight: 500;
}
/* visibility, not opacity alone. An opacity-0 layer is still painted on some
   compositing paths -- a full-page capture rendered all three closed cards
   with their claim ghosted straight through the step word -- and it stays in
   the accessibility tree at full size, so every card announced both its word
   and its claim. `transition: visibility 0s <fade duration>` flips it only
   once the fade has finished, so the crossfade is unchanged. */
/* -400px parks a five-line claim entirely below a two-line box. bottom is
   switched with a 0s transition rather than animated, so the visual handover
   is still the crossfade the timings above describe. */
.pc-title .pc-w {
  color: rgba(10, 10, 10, .58);
  transition: opacity .45s var(--ease-micro) .26s, bottom 0s, color .5s var(--ease-micro);
}
.pc-card:not(.on):hover .pc-title .pc-w {
  color: var(--ink);
}
.pc-title .pc-c {
  bottom: -400px;
  opacity: 0;
  color: var(--ink);
  transition: opacity .22s var(--ease-micro), bottom 0s .22s;
}
.pc-card.on .pc-title .pc-w {
  bottom: -400px;
  opacity: 0;
  transition: opacity .22s var(--ease-micro), bottom 0s .22s;
}
.pc-card.on .pc-title .pc-c {
  bottom: 6px;
  opacity: 1;
  transition: opacity .5s var(--ease-micro) .3s, bottom 0s .3s;
}

/* 0fr -> 1fr, so the paragraph is revealed by the card growing rather than by
   a height keyframe that would have to know the text. */
.pc-more {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  transition:
    grid-template-rows .9s var(--ease-out-quint),
    margin-top .9s var(--ease-out-quint),
    opacity .5s var(--ease-micro);
}
/* any single child, not just .pc-desc: step 01 wraps its description and its
   CTA in one .pc-mi so the 0fr -> 1fr collapse still animates exactly one row */
.pc-more > * {
  min-height: 0;
  overflow: hidden;
}
.pc-mi {
  display: block;
}

/* The step CTA is the site's arrow link (DESIGN-BOOK 14.3: no rule under the
   label, the arrow is the affordance), in blue and on its own line under the
   paragraph. Named -step- deliberately: .pc-cta is already the section head's
   link, and reusing it here recoloured that one. */
.pc-step-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-decoration: none;
}
.pc-step-cta svg {
  transition: transform .2s var(--ease-micro);
}
.pc-step-cta:hover svg {
  transform: translateX(3px);
}
.pc-step-cta:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.pc-card.on .pc-more {
  grid-template-rows: 1fr;
  margin-top: 16px;
  opacity: 1;
  transition:
    grid-template-rows .9s var(--ease-out-quint),
    margin-top .9s var(--ease-out-quint),
    opacity .5s var(--ease-micro) .3s;
}
.pc-desc {
  display: block;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* 2px track on the card foot: rests, then fills perfectly linearly, then the
   next step takes over. Squared cards, so it can run the full width. */
.pc-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(10, 16, 60, .07);
}
.pc-bar b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ---- the text does not re-wrap while the card is widening ----
   The claim and the paragraph were laid out against whatever width the card
   happened to have mid-transition, so opening a step showed the headline as
   two lines and then snapping to one, and the paragraph gaining a line as the
   neighbouring card gave its width back. .pc-title's own note already asked
   for this ("never seen reflowing through the intermediate widths") and tried
   to buy it with a 0.3s fade delay, but the width runs for 0.9s, so the fade
   finished while the card was still growing.

   Fixed at the root instead of by re-timing: both occupants are laid out at
   the OPEN card's inner width from the start and simply clipped by the card's
   overflow while it is narrow, so their line count never changes. The row is
   the container, so the open width is derived rather than typed:
     free space  = 100cqw - 3 gaps
     open card   = free space x 1.82 / (1.82 + 1 + 1 + 1)
     inner       = open card - 2 x 28px of .pc-card.on .pc-body padding
   Scoped above 1080px because below it every card is open and equal-width, so
   there is no widening to protect against and the ratio would be wrong. */
@media (min-width: 1081px) {
  .pc-row {
    container-type: inline-size;
  }

  .pc-card {
    --pc-open-inner: calc((100cqw - 48px) * var(--pc-grow) / var(--pc-total) - 56px);
  }

  .pc-title > span {
    right: auto;
    width: var(--pc-open-inner);
  }

  .pc-desc {
    width: var(--pc-open-inner);
  }
}

/* ---- below 1080px there is no room to squeeze three cards down, so the row
   stops being interactive and every card is simply open. Same anatomy, laid
   out two up and then one up. ---- */
@media (max-width: 1080px) {
  .pc-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    height: auto;
    gap: clamp(14px, 1.6vw, 20px);
  }
  .pc-card,
  .pc-card.on,
  .pc-card:not(.on):hover {
    height: auto;
    flex: none;
    cursor: default;
    background: #fff;
    box-shadow: 0 19px 42px rgba(7, 16, 48, .085);
  }
  /* Every card is open here, so the numeral is simply already landed: it keeps
     its artwork position instead of being hidden, which is what it was when a
     separate stamp carried the number on this breakpoint. No transition,
     because nothing opens or closes. */
  .pc-index {
    display: block;
    top: calc(var(--pc-media-h) - 20px - 1.1em);
    left: 24px;
    font-size: 17px;
    color: #fff;
    text-shadow: 0 2px 12px rgba(3, 8, 35, .32);
    transition: none;
  }
  .pc-card {
    --pc-media-h: clamp(180px, 22vw, 228px);
  }
  .pc-media,
  .pc-card.on .pc-media {
    height: var(--pc-media-h);
    opacity: 1;
  }
  .pc-body,
  .pc-card.on .pc-body {
    padding: 24px 24px 28px;
  }
  .pc-kicker {
    color: var(--blue);
  }
  /* Back into flow: with nothing open and nothing closed there is no slot to
     share, so the claim sets the title height itself. */
  .pc-title {
    overflow: visible;
    padding-bottom: 0;
    min-height: 0;
  }
  .pc-title > span {
    position: static;
  }
  .pc-title .pc-w {
    display: none;
  }
  .pc-title .pc-c,
  .pc-card.on .pc-title .pc-c {
    bottom: auto;
    opacity: 1;
    transition: none;
  }
  .pc-more,
  .pc-card.on .pc-more {
    grid-template-rows: 1fr;
    margin-top: 14px;
    opacity: 1;
  }
  .pc-bar {
    display: none;
  }
}
@media (max-width: 700px) {
  .pc-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Reduced motion keeps the open card open and drops the fill entirely: the
   script never starts, so the row is a static composition. */
@media (prefers-reduced-motion: reduce) {
  .pc-card,
  .pc-media,
  .pc-more,
  .pc-title > span,
  .pc-index {
    transition: none;
  }
  .pc-bar b {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   PHONE: the investor row becomes logo buttons with one panel under them.
   Reviewed as "make top row a few buttons with the logos of the VCs and then
   the text shows -- the element looks different on mobile, so that it is easy
   to view on mobile". At 1080px and below every card in this component is open
   at once, which is right for four process steps and wrong for five investors:
   five 228px plates each with its own body ran the section to 2730px.

   `display: contents` on the card is what makes it possible without touching
   the markup: the plate and the body become direct items of the row's grid, so
   the five plates can sit on one line while the open card's body spans the full
   width underneath them. The card keeps its role=button and its click handler --
   a box is not needed for either -- and the focus ring moves to the plate,
   which is the thing being pressed.
   -------------------------------------------------------------------------- */
/* The implementation steps are a swipe track (data-m-swipe on the row). The
   1080px block above sets `flex: none` on every .pc-card so the two-column grid
   sizes them, and that rule loads after assets/site.css: the track's own
   `flex: 0 0 88%` lost, every card sized to its CONTENT, and one card measured
   803px wide inside a 342px viewport. Reviewed as "this is still buggy". The
   basis is restated here, where it wins on order. */
/* PHONE, the implementation steps as a swipe track: four cards of one size.
   Reviewed as "hide this for mobile" (the 01-04 numeral on the artwork) and
   "align the eyebrow, headline, text, CTA to the same height".
   Both come from the same thing: the cards are separate objects side by side
   now, not a row of plates sharing one open panel, so each one has to start and
   end where its neighbours do. The media takes a fixed height, which puts every
   body's first line on one y; the body is a column with the CTA pushed to the
   bottom, which puts every CTA on one y whatever the description does in
   between; and the track stretches the cards to a common height. The numeral is
   redundant here -- the dots under the track already say which of four you are
   looking at. */
@media (max-width: 640px) {
  [data-m-swipe].pc-row {
    align-items: stretch;
  }

  [data-m-swipe].pc-row .pc-index {
    display: none;
  }

  /* 186, not 150: the panels inside these plates run 149-165px tall and three
     of the four were being cut off at the bottom ("these screens are not fully
     visible in the card"). 186 clears the tallest with air, and because the
     track stretches, all four plates keep one height. */
  [data-m-swipe].pc-row .pc-media,
  [data-m-swipe].pc-row .pc-card.on .pc-media {
    height: 186px;
    flex: none;
  }

  [data-m-swipe].pc-row .pc-card,
  [data-m-swipe].pc-row .pc-card.on {
    display: flex;
    flex-direction: column;
  }

  [data-m-swipe].pc-row .pc-body,
  [data-m-swipe].pc-row .pc-card.on .pc-body {
    flex: 1 1 auto;
    padding: 18px 18px 20px;
  }

  [data-m-swipe].pc-row .pc-more,
  [data-m-swipe].pc-row .pc-mi {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  /* the one line every card ends on */
  [data-m-swipe].pc-row .pc-step-cta {
    margin-top: auto;
    padding-top: 14px;
  }
}

@media (max-width: 640px) {
  [data-m-swipe].pc-row > .pc-card,
  [data-m-swipe].pc-row > .pc-card.on,
  [data-m-swipe].pc-row > .pc-card:not(.on):hover {
    flex: 0 0 88%;
    min-width: 0;
  }
}

/* SUB-DESKTOP AND TOUCH: the investors as an accordion, one row each.
   Reviewed as "on mobile these logos look shit, redesign on mobile", and then
   as "one row per investor, and if I click on them it expands with the text,
   like an accordion". Before this the marks sat at 11-21px in a ladder on the
   phone, and from 641 to 1080px five open process cards ran two-up with a
   228px plate and a paragraph each. Touch devices at desktop width (an iPad in
   landscape is 1180-1366px) got the hover-driven row: four closed cards with
   the marks knocked back to grey over an empty plate.

   So one list for every non-desktop case. A row is the mark on a small plate,
   the kicker and the claim beside it, and a chevron; a tap folds the
   description out underneath, with the same 0fr -> 1fr fold the desktop card
   uses, so the text is revealed by the row growing rather than by a height
   keyframe. The angels are the sixth row, with band art for a mark (about-us,
   #investors .inv-angels). One row open at a time, and tapping the open row
   closes it: assets/process-cards.js, `data-pc-accordion`, reads the same
   query as this block.

   Selected by width OR by pointer: a coarse primary pointer with no hover is
   a touch device, and at any width it gets the list rather than the
   auto-cycling row. Written as `body #investors` so it outranks the page's
   own #investors rules for the desktop row, which are what it replaces. */
@media (max-width: 1080px), (hover: none) and (pointer: coarse) {
  /* the list is .inv-panel, one level up: it wraps this row AND the angels
     block, so all six rows sit in one box and the row steps out of the way */
  body #investors .pc-row {
    display: contents;
  }

  body #investors .pc-card,
  body #investors .pc-card.on,
  body #investors .pc-card:not(.on):hover {
    display: grid;
    /* 86px = the old 72px mark column plus the row's own 14px left inset. The
       inset moved out of the card's padding and into the column so the mark
       column is one rectangle running from the panel's left border to the
       hairline that closes it, and `place-items: center` on .pc-media centres
       the mark in THAT rectangle rather than 7px right of its middle. The two
       things that used the padding -- the folded description and the angels
       paragraph -- take the 14px back as a padding-left of their own. */
    grid-template-columns: 86px minmax(0, 1fr) 20px;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 16px;
    flex: none;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 14px 18px 14px 0;
    overflow: hidden;
    background: #fff;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    transition: none;
    /* Reviewed as "on mobile remove hover effect": a row is a list entry, so
       nothing lights up on touch or on a tablet's mouse -- no hover ground,
       no pressed state, and no grey tap flash from the platform */
    -webkit-tap-highlight-color: transparent;
  }

  body #investors .pc-card:hover,
  body #investors .pc-card:active,
  body #investors .pc-card.on:hover,
  body #investors .pc-card.on:active {
    background: #fff;
    box-shadow: none;
    transform: none;
  }

  body #investors .pc-card:first-child {
    border-top: 0;
  }

  body #investors .pc-card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
  }

  /* The mark, with no plate under it. Reviewed as "discard the grey box and
     just make a thin margin line that crosses vertically through the bar and
     touches the top and the bottom edge; in the middle of this rectangle place
     the logo icon": on a phone the gradient tile read as five little chips
     floating in a white list, so what divides the mark from the copy is now a
     single hairline on the column's right edge, on the same --line the rows
     are ruled with. It is run out through the row's vertical padding by the
     negative block margin, so it meets the rule above and the rule below and
     the column reads as a margin of the panel rather than as a box. The mark
     is in colour: nothing is shut here, so nothing is knocked back. */
  body #investors .pc-media,
  body #investors .pc-card.on .pc-media {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: auto;
    height: auto;
    margin-block: -14px;
    padding: 14px 0;
    overflow: hidden;
    opacity: 1;
    background: none;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    transition: none;
  }

  /* Open, the row grows a paragraph under all three columns, and the hairline
     stops where that paragraph starts instead of running 2px behind its first
     line: -12px is .pc-more's own margin-top. */
  body #investors .pc-card.on .pc-media {
    margin-bottom: -12px;
  }

  body #investors .pc-media img,
  body #investors .pc-card.on .pc-media img {
    position: static;
    width: auto;
    height: auto;
    /* was 80% of the plate's 56px inner width. The plate is gone and the
       column is 86px now, so the cap is stated in px to hold the two wide
       wordmarks (20VC, Rebel) at the width they already sat at. */
    max-width: 45px;
    object-fit: contain;
    filter: none;
    opacity: 1;
    transition: none;
  }

  /* one cap per mark, as everywhere else: a square (YC), a stacked block
     (Play) and three wordmarks do not read equal at one height. .pc-media is
     on the selector so these beat the page's own desktop caps. */
  body #investors .pc-media.inv-plate--yc img,
  body #investors .pc-card.on .pc-media.inv-plate--yc img    { max-height: 28px; }
  body #investors .pc-media.inv-plate--20vc img,
  body #investors .pc-card.on .pc-media.inv-plate--20vc img  { max-height: 16px; }
  body #investors .pc-media.inv-plate--play img,
  body #investors .pc-card.on .pc-media.inv-plate--play img  { max-height: 30px; }
  /* Multimodal is the icon alone now, not the icon plus the wordmark, so it
     sits on the icon rung with YC and Rebel rather than on the 13px wordmark
     rung it used to share with 20VC. */
  body #investors .pc-media.inv-plate--mm img,
  body #investors .pc-card.on .pc-media.inv-plate--mm img    { max-height: 26px; }
  body #investors .pc-media.inv-plate--rebel img,
  body #investors .pc-card.on .pc-media.inv-plate--rebel img { max-height: 24px; }

  /* .pc-body wraps the kicker, the claim and the paragraph; it steps out of
     the way so the three place themselves on the row's grid: the kicker and
     the claim as two lines of the middle column, the paragraph folded under
     all three columns. Kept inside the body they were one flex column, so the
     paragraph opened beside the plate rather than beneath it. */
  body #investors .pc-body,
  body #investors .pc-card.on .pc-body {
    display: contents;
  }

  body #investors .pc-kicker,
  body #investors .pc-card.on .pc-kicker {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    display: block;
    margin: 0 0 3px;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .13em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--blue);
    transition: none;
  }

  /* the claim, back in flow, on the old logo row's sans rung: a row is a
     list entry, not a headline */
  body #investors .pc-title,
  body #investors .pc-card.on .pc-title {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    position: static;
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    font-family: var(--sans);
    font-weight: 500;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 0;
  }

  /* the short word (YC, 20VC) is what the mark beside it already says */
  body #investors .pc-title .pc-w,
  body #investors .pc-card.on .pc-title .pc-w {
    display: none;
  }

  body #investors .pc-title .pc-c,
  body #investors .pc-card.on .pc-title .pc-c {
    position: static;
    display: block;
    width: auto;
    opacity: 1;
    font-family: var(--sans);
    font-weight: 500;
    color: var(--ink);
    transition: none;
  }

  /* the chevron: down when the row is shut, up when it is open */
  body #investors .pc-card::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / 3;
    display: block;
    width: 8px;
    height: 8px;
    margin: -4px auto 0;
    border-right: 1.5px solid var(--muted);
    border-bottom: 1.5px solid var(--muted);
    transform: rotate(45deg);
    transition: transform .35s var(--ease-out-quint), margin .35s var(--ease-out-quint);
  }

  body #investors .pc-card.on::after {
    margin-top: 4px;
    transform: rotate(-135deg);
  }

  /* the text, folded under the row and spanning it */
  body #investors .pc-more,
  body #investors .pc-card.on .pc-more {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-rows: 0fr;
    /* the row's left inset lives in the mark column now, so the paragraph --
       which spans all three columns -- takes it back here */
    padding-left: 14px;
    margin-top: 0;
    opacity: 0;
    transition:
      grid-template-rows .45s var(--ease-out-quint),
      margin-top .45s var(--ease-out-quint),
      opacity .25s var(--ease-micro);
  }

  body #investors .pc-card.on .pc-more {
    grid-template-rows: 1fr;
    margin-top: 12px;
    opacity: 1;
    transition:
      grid-template-rows .45s var(--ease-out-quint),
      margin-top .45s var(--ease-out-quint),
      opacity .35s var(--ease-micro) .1s;
  }

  body #investors .pc-desc,
  body #investors .pc-card.on .pc-desc {
    width: auto;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
  }

  body #investors .pc-index,
  body #investors .pc-bar {
    display: none;
  }
}

/* the phone: a tighter row and a smaller plate */
@media (max-width: 640px) {
  body #investors .pc-card,
  body #investors .pc-card.on,
  body #investors .pc-card:not(.on):hover {
    /* 72px = the 60px mark column plus the phone row's 12px left inset */
    grid-template-columns: 72px minmax(0, 1fr) 18px;
    column-gap: 12px;
    padding: 12px 14px 12px 0;
  }

  body #investors .pc-media,
  body #investors .pc-card.on .pc-media {
    margin-block: -12px;
    padding: 12px 0;
  }

  body #investors .pc-media img,
  body #investors .pc-card.on .pc-media img {
    max-width: 38px;
  }

  body #investors .pc-more,
  body #investors .pc-card.on .pc-more {
    padding-left: 12px;
  }

  body #investors .pc-media.inv-plate--yc img,
  body #investors .pc-card.on .pc-media.inv-plate--yc img    { max-height: 24px; }
  body #investors .pc-media.inv-plate--20vc img,
  body #investors .pc-card.on .pc-media.inv-plate--20vc img  { max-height: 14px; }
  body #investors .pc-media.inv-plate--play img,
  body #investors .pc-card.on .pc-media.inv-plate--play img  { max-height: 26px; }
  body #investors .pc-media.inv-plate--mm img,
  body #investors .pc-card.on .pc-media.inv-plate--mm img    { max-height: 22px; }
  body #investors .pc-media.inv-plate--rebel img,
  body #investors .pc-card.on .pc-media.inv-plate--rebel img { max-height: 20px; }

  body #investors .pc-title,
  body #investors .pc-card.on .pc-title {
    font-size: 14px;
  }

  body #investors .pc-desc,
  body #investors .pc-card.on .pc-desc {
    font-size: 13.5px;
  }
}