/* /showcase/build-flow: the five-step candidate for /what-we-build.
   Stylesheet for this page only. The slide-in comes from showcase.css.

   One vertical line runs the page, with five stations on it. Each station
   is a deliverable: a title, two sentences at most, one preview drawn from
   the real record, and one control that opens the real thing.

   Tokens are base.css's. Teal appears only on the dots marked engage (the
   OWN-WORLD teal rule: teal where an account is worth engaging or a finding
   is confirmed, nowhere as decoration). Numerals, marks and hovers are Ink.
   No shadows, no eyebrow labels. */

::selection { background: rgba(47, 99, 218, 0.18); color: var(--ink); }

/* ── shared parts ─────────────────────────────────────────────── */

.fl-num {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ground, var(--bg));
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.fl-micro {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.fl-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}
.fl-link:hover { text-decoration-color: currentColor; }

/* The one decisive control on a station. A link until wwb-flow.js makes it
   a button that opens the slide-in; the two look identical. */
.fl-open {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 11px 20px 11px 16px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.fl-open svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}
.fl-open:hover { background: var(--ink); color: var(--bg); }
.fl-open:hover svg { transform: translateX(2px); }
.fl-open:active { background: var(--body); border-color: var(--body); }

.fl-control { margin-top: 26px; }

/* ── first viewport ───────────────────────────────────────────── */

.fl-hero { padding: 58px 0 76px; }
.fl-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0 24px;
  align-items: start;
}
.fl-hero-copy { grid-column: 1 / span 5; padding-top: 6px; }
.fl-hero h1 { font-size: clamp(33px, 4.5vw, 57px); }
.fl-hero h1 .line { display: block; }
.fl-lede {
  margin-top: 24px;
  max-width: 27em;
  font-size: 19.5px;
  line-height: 1.62;
  color: var(--body);
}
.fl-actions { margin-top: 30px; }
.fl-house {
  margin-top: 30px;
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* The whole line in miniature: five stations, each linked to its section. */
.fl-mini { grid-column: 7 / span 6; }
.fl-mini ol { list-style: none; border-top: 1px solid var(--rule); }
.fl-mini-st { position: relative; border-bottom: 1px solid var(--rule); }
.fl-mini-st::before {
  content: "";
  position: absolute;
  left: 19.5px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ink);
}
.fl-mini-st:first-child::before { top: 50%; }
.fl-mini-st:last-child::before { bottom: 50%; }
.fl-mini-st a {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 0 22px;
  min-height: 72px;
  padding: 10px 4px 10px 0;
}
.fl-mini-txt { display: block; }
.fl-mini-name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--ink);
  transition: color 160ms ease;
}
.fl-mini-opens {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
}
.fl-glyph {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 160ms ease, transform 160ms ease;
}
.fl-glyph .fl-glyph-fill { fill: var(--ink); stroke: none; }
.fl-mini-st a:hover .fl-mini-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.fl-mini-st a:hover .fl-glyph { stroke: var(--ink); transform: translateX(3px); }

/* ── the line and its stations ────────────────────────────────── */

.fl-st {
  --ground: var(--bg);
  --pad: 84px;
  position: relative;
  padding: var(--pad) 0;
  border-top: 1px solid var(--rule);
  background: var(--ground);
}
.fl-st:nth-of-type(even) { --ground: var(--tint); }

.fl-st-grid {
  --fl-gut: var(--gutter);
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 5fr) minmax(0, 7fr);
  gap: 0 40px;
  align-items: start;
}

/* The line: a rule through every node, top of the first station to the
   node of the last. Its left edge is the container padding plus half a
   node, so it stays on the node at every width. */
.fl-st-grid::before,
.fl-st-grid::after {
  content: "";
  position: absolute;
  left: calc(var(--fl-gut) + 19.5px);
  top: calc(var(--pad) * -1);
  bottom: calc(var(--pad) * -1);
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}
/* Travelled: the stretch above each station turns Ink once it is reached. */
.fl-st-grid::after {
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fl-st.is-reached .fl-st-grid::after { transform: scaleY(1); }
.fl-st:first-of-type .fl-st-grid::before,
.fl-st:first-of-type .fl-st-grid::after { top: 20px; }
.fl-st-last .fl-st-grid::before,
.fl-st-last .fl-st-grid::after { bottom: auto; height: calc(var(--pad) + 20px); }

.fl-node { grid-column: 1; grid-row: 1; position: relative; z-index: 1; margin-top: 2px; }
.fl-st-text { grid-column: 2; grid-row: 1; }
.fl-st-text h2 { font-size: clamp(28px, 2.6vw, 33px); line-height: 1.1; }
.fl-say {
  margin-top: 18px;
  max-width: 30em;
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--body);
}
.fl-example {
  margin-top: 18px;
  max-width: 30em;
  padding-left: 14px;
  border-left: 2px solid var(--slate);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

.fl-plate,
.fl-plate-stack,
.fl-caps { grid-column: 3; grid-row: 1; min-width: 0; }

/* ── plates ───────────────────────────────────────────────────── */

.fl-plate {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.fl-rec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 18px;
  padding: 14px 22px 13px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}
.fl-rec-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.25;
  letter-spacing: -0.016em;
  color: var(--ink);
}

/* Station 1: four sources drawn into one profile. */
.fl-collect {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 0.92fr);
  align-items: stretch;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.fl-inputs {
  list-style: none;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.fl-inputs li {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink);
}
.fl-join { width: 100%; height: 100%; overflow: visible; }
.fl-join path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
.fl-join-tall { display: none; }
.fl-profile {
  align-self: center;
  padding: 20px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 12px;
}
.fl-profile-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.25;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.fl-profile ul { list-style: none; margin-top: 8px; }
.fl-profile li {
  padding: 9px 0;
  font-size: 16.5px;
  line-height: 1.4;
  color: var(--body);
}
.fl-profile li + li { border-top: 1px solid var(--rule); }

/* Station 2: three entries from the lens record. */
.fl-rec-rows { margin: 0; }
.fl-rec-row {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 17px 22px;
}
.fl-rec-row + .fl-rec-row { border-top: 1px solid var(--rule); }
.fl-rec-row dt { padding-top: 4px; }
.fl-rec-row dd { margin: 0; }
.fl-rec-v {
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
}
.fl-rec-s {
  display: block;
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Station 3: the market, 1,921 dots, fifteen of them buttons. */
.fl-map-wrap {
  --headroom: 58px;
  position: relative;
  height: 520px;
  padding: var(--headroom) 6px 4px 0;
}
.fl-map-wrap canvas { display: block; width: 100%; height: 100%; }
.fl-map-still { display: block; width: 100%; height: auto; }
/* Without the script there is no chart to draw, so the frame holds the still. */
html:not(.fl-js) .fl-map-wrap { height: auto; padding: 0; }
html:not(.fl-js) .fl-map-wrap canvas { display: none; }
.fl-map-wrap .sc-tip { z-index: 6; }
.fl-map-wrap .sc-tip span { display: block; }

.fl-marks { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fl-mark {
  --ring-in: 5px;
  position: absolute;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}
/* Rings, not the dots: the chart draws the dot underneath at its true
   position, and the ring says it opens. */
.fl-mark::before,
.fl-mark::after {
  content: "";
  position: absolute;
  inset: var(--ring-in);
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: transform 160ms ease;
}
.fl-mark::after { opacity: 0; }
/* A ring holding several banks is a capsule over all their dots. */
.fl-mark.is-span,
.fl-mark.is-span::before,
.fl-mark.is-span::after { border-radius: 20px; }
.fl-mark.is-span:hover::before,
.fl-mark.is-span.is-hot::before { transform: none; }
.fl-mark:hover::before,
.fl-mark.is-hot::before { transform: scale(1.2); }
.fl-mark[aria-expanded="true"]::before { background: rgba(17, 22, 27, 0.08); }
.fl-mark-n {
  position: absolute;
  top: calc(var(--ring-in) - 10px);
  right: calc(var(--ring-in) - 12px);
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (pointer: coarse) {
  .fl-mark { --ring-in: 12px; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
.fl-marks.is-invite .fl-mark::after { animation: flPing 1.5s cubic-bezier(0.16, 1, 0.3, 1) 2 both; }
.fl-marks.is-invite .fl-mark:nth-child(2n)::after { animation-delay: 0.18s; }
.fl-marks.is-invite .fl-mark:nth-child(3n)::after { animation-delay: 0.36s; }
@keyframes flPing {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.3); }
}

/* The label on the top-ranked of the fifteen. A button in its own right,
   joined to its ring by a leader the script places (--lx, --lh). */
.fl-toplabel {
  position: absolute;
  z-index: 4;
  display: block;
  max-width: calc(100% - 8px);
  min-height: 32px;
  padding: 6px 11px 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  border: 0;
  border-radius: 6px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--text);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  transition: background 160ms ease;
}
.fl-toplabel::after {
  content: "";
  position: absolute;
  left: var(--lx, 50%);
  top: 100%;
  width: 2px;
  height: var(--lh, 12px);
  margin-left: -1px;
  background: var(--ink);
}
.fl-toplabel:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Several published banks on one spot: the ring opens a short list. */
.fl-pop {
  position: absolute;
  z-index: 5;
  width: 264px;
  padding: 10px 8px 8px;
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 12px;
}
.fl-pop[hidden] { display: none; }
.fl-pop-head,
.fl-slot-title {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.fl-pop-head { padding: 2px 10px 6px; }
.fl-pop ul { list-style: none; }
.fl-pop button {
  display: grid;
  width: 100%;
  gap: 1px;
  min-height: 44px;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: var(--text);
  text-align: left;
  cursor: pointer;
}
.fl-pop button:hover { background: var(--tint); }
.fl-pop-name { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.fl-pop-sc { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--muted); }

.fl-map-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 13px 22px 15px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--body);
}
.fl-key { display: inline-flex; align-items: center; gap: 8px; }
.fl-sw { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.fl-sw-engage { background: var(--teal-deep); }
.fl-sw-rest { background: var(--muted); opacity: 0.55; }
.fl-sw-ring { width: 13px; height: 13px; border: 2px solid var(--ink); background: var(--ink); box-sizing: border-box; outline: 2px solid var(--surface); outline-offset: -4px; }
.fl-map-note { flex-basis: 100%; font-size: 14px; color: var(--muted); }

/* Station 4: the first rows of the contacts record, and the CRM slot. */
.fl-plate-stack { display: grid; gap: 16px; }
.fl-plate-stack > .fl-plate,
.fl-plate-stack > .fl-crm-slot { grid-column: auto; grid-row: auto; margin-top: 0; }
.fl-people { list-style: none; }
.fl-people li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 14px;
  padding: 15px 22px;
}
.fl-people li + li { border-top: 1px solid var(--rule); }
.fl-people-n {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fl-people-who b { display: block; font-size: 16.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.fl-people-who span { display: block; margin-top: 1px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.fl-people-why {
  grid-column: 2 / -1;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}
.fl-people-why b { font-weight: 600; color: var(--ink); }
.fl-pill {
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--pill-none-bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.fl-rec-foot {
  padding: 13px 22px 15px;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--body);
}
/* Slate and dashed: a slot the page is honest about, not a finished screen. */
.fl-crm-slot {
  padding: 15px 20px 17px;
  border: 1px dashed var(--slate);
  border-radius: 12px;
}
.fl-crm-slot p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Station 5: the eight capabilities, compact. */
.fl-caps-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
}
.fl-cap {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 6px 14px;
  padding: 18px 20px 20px 0;
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 90px;
}
.fl-cap:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--rule); }
.fl-cap-mark {
  grid-row: 1;
  width: 9px;
  height: 9px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--ink);
}
.fl-cap h3 { grid-column: 2; font-size: 19px; }
.fl-cap p {
  grid-column: 2;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}
.fl-cap p b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.fl-caps-more { margin-top: 10px; }

/* ── close ────────────────────────────────────────────────────── */
.fl-close h2 { max-width: 16em; }

/* ── widths ───────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .fl-hero-copy { grid-column: 1 / span 6; }
  .fl-mini { grid-column: 7 / span 6; }
  .fl-mini-name { font-size: 20px; }
}

@media (max-width: 960px) {
  .fl-hero-grid { display: block; }
  .fl-mini { margin-top: 44px; }
  .fl-st-grid { grid-template-columns: 40px minmax(0, 1fr); gap: 0 22px; }
  .fl-plate,
  .fl-plate-stack,
  .fl-caps { grid-column: 2; grid-row: 2; margin-top: 30px; }
}

@media (max-width: 700px) {
  .fl-hero { padding: 30px 0 36px; }
  .fl-lede { margin-top: 14px; font-size: 17.5px; line-height: 1.5; }
  .fl-actions { margin-top: 24px; }
  .fl-house { margin-top: 20px; font-size: 13.5px; }
  .fl-mini { margin-top: 26px; }
  .fl-mini-st a { grid-template-columns: 34px minmax(0, 1fr) 30px; gap: 0 14px; min-height: 44px; padding: 2px 0; }
  .fl-mini-st::before { left: 16.5px; }
  .fl-mini .fl-num { width: 34px; height: 34px; font-size: 15px; }
  .fl-mini-name { font-size: 17.5px; }
  .fl-mini-opens { font-size: 13.5px; }
  .fl-glyph { width: 30px; height: 30px; }

  .fl-st { --pad: 24px; }
  .fl-close { padding: 44px 0; }
  .fl-close .lede { font-size: 16.5px; }
  .fl-st-grid { --fl-gut: 20px; grid-template-columns: 34px minmax(0, 1fr); gap: 0 14px; }
  .fl-st-grid::before,
  .fl-st-grid::after { left: calc(var(--fl-gut) + 16.5px); }
  .fl-st:first-of-type .fl-st-grid::before,
  .fl-st:first-of-type .fl-st-grid::after { top: 17px; }
  .fl-st-last .fl-st-grid::before,
  .fl-st-last .fl-st-grid::after { height: calc(var(--pad) + 17px); }
  .fl-node { width: 34px; height: 34px; font-size: 15px; margin-top: 0; }
  .fl-st-text h2 { font-size: 28px; }
  .fl-say { margin-top: 8px; font-size: 16.5px; line-height: 1.5; }
  .fl-example { margin-top: 12px; font-size: 13.5px; }
  .fl-control { margin-top: 14px; }
  .fl-open { font-size: 15px; padding: 10px 16px 10px 14px; }
  .fl-plate,
  .fl-plate-stack,
  .fl-caps { margin-top: 18px; }

  /* The plates run the full width under the node on a phone. */
  .fl-plate,
  .fl-plate-stack,
  .fl-caps { grid-column: 1 / -1; position: relative; z-index: 1; }
  .fl-collect,
  .fl-plate-stack,
  .fl-caps { background: var(--ground); }

  /* One compact stacked figure: the four sources in one frame, a short
     join, then the profile with its three parts on a line or two. */
  .fl-collect { grid-template-columns: 1fr; }
  .fl-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--rule);
    border-radius: 12px;
    background: var(--surface);
  }
  .fl-inputs li { min-height: 0; padding: 4px 9px; border-radius: 6px; background: var(--tint); border-color: transparent; font-size: 13.5px; line-height: 1.4; }
  .fl-join-wide { display: none; }
  .fl-join-tall { display: block; height: 20px; }
  .fl-profile { padding: 11px 14px 12px; }
  .fl-profile-title { font-size: 16.5px; }
  .fl-profile ul { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; }
  .fl-profile li { padding: 0; font-size: 14.5px; }
  .fl-profile li + li { border-top: 0; }

  .fl-rec-head { padding: 12px 16px 11px; }
  .fl-rec-title { font-size: 16.5px; }
  .fl-rec-row { grid-template-columns: 86px minmax(0, 1fr); gap: 2px 12px; padding: 11px 16px; }
  .fl-rec-row dt { padding-top: 3px; }
  .fl-rec-v { font-size: 15.5px; line-height: 1.4; }
  .fl-rec-s { font-size: 13.5px; }

  .fl-map-wrap { --headroom: 60px; height: 336px; padding-right: 2px; }
  .fl-map-foot { padding: 11px 16px 13px; gap: 6px 16px; font-size: 13.5px; }
  .fl-map-note { font-size: 13.5px; }
  .fl-toplabel { padding: 6px 9px 7px; font-size: 13px; }

  .fl-people li { grid-template-columns: 22px minmax(0, 1fr); padding: 11px 16px; }
  .fl-people-why { font-size: 13.5px; margin-top: 4px; }
  .fl-people-why {
  grid-column: 2 / -1;
  margin-top: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body);
}
.fl-people-why b { font-weight: 600; color: var(--ink); }
.fl-pill { grid-column: 2; justify-self: start; margin-top: 2px; padding: 2px 8px; font-size: 11.5px; }
  .fl-people-who b { font-size: 15.5px; }
  .fl-people-who span { font-size: 13.5px; }
  .fl-rec-foot { padding: 11px 16px 13px; font-size: 13.5px; }
  .fl-crm-slot { padding: 12px 16px 14px; }
  .fl-crm-slot p { font-size: 13.5px; }

  .fl-caps-list { grid-template-columns: 1fr; }
  .fl-cap,
  .fl-cap:nth-child(2n) { display: block; position: relative; padding: 7px 0 8px 19px; border-left: 0; }
  .fl-cap h3 { display: inline; margin-right: 6px; font-size: 16.5px; line-height: 1.45; }
  .fl-cap p { display: inline; font-size: 14px; line-height: 1.55; }
  .fl-cap-mark { position: absolute; left: 0; top: 15px; margin: 0; width: 7px; height: 7px; }
  .fl-caps-more { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .fl-st-grid::after { transition: none; }
  @media (pointer: coarse) {
  .fl-mark { --ring-in: 12px; width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}
.fl-marks.is-invite .fl-mark::after { animation: none; }
  .fl-open,
  .fl-open svg,
  .fl-mark::before,
  .fl-glyph,
  .fl-mini-name { transition: none; }
}