/* sprint 26 — the Feeding Support Finder, scoped under .obc-finder-lab.
 *
 * sprint 27 — the visual pass. The note that used to be here said the page was kept plain on purpose,
 * because a finished-looking prototype gets comments about colours instead of comments about the
 * questions, and that the visual pass came after the shape was agreed. The shape is agreed.
 *
 * Two things this pass is trying to fix, both of which were the same complaint:
 *
 *   1. It did not look like the same website. White page, hairline boxes, no colour above the footer
 *      and none of the homepage's language. A family arriving from a poster met something that could
 *      have been anybody's form. It now stands on the warm ground the rest of the site uses, its
 *      questions carry the one italic word the homepage headlines carry, and the way in is a pair of
 *      cards built like the jars.
 *
 *   2. Nothing had a rank. Every box was the same hairline rectangle at the same weight, so the
 *      booking options, the optional email form and the summary all shouted equally, and on the last
 *      screen the biggest block on the page was the one asking for an address rather than the one
 *      offering the appointment. Weight now follows importance.
 *
 * Every colour here is from the approved palette in BRAND.md, or is colostrum, which is approved as a
 * material. The old file was off-palette in three places and nobody had noticed. */

.obc-finder-lab {
  /* text and structure */
  --f-ink: #1f2c31;
  --f-green: #294f4b;
  --f-blue: #75aab0;
  /* was #537d82, an old GoDaddy colour that never joined the palette */
  --f-deep: #4f8f8b;
  --f-slate: #758287;
  /* was #f6f6f6, the old grey off-white. Ivory is the approved warm one and is what the rest of the
     site stands on. */
  --f-mist: #f6efe6;
  --f-paper: #fff;
  --f-gold: #d7b47a;
  --f-line: rgba(41, 79, 75, 0.16);

  /* colostrum, kept whole. Used for the one thing on a screen that is the way forward. */
  --f-colostrum-pale: #f6e2b0;
  --f-colostrum: #e9c471;
  --f-colostrum-deep: #dcb45f;
  --f-colostrum-deepest: #b8842c;

  --f-shadow: 0 1px 2px rgba(31, 44, 49, 0.04), 0 8px 24px -12px rgba(31, 44, 49, 0.18);

  margin: 0;
  padding: 0 0 clamp(64px, 9vw, 112px);
  background: var(--f-mist);
  color: var(--f-ink);
  font-family: "Figtree", Arial, sans-serif;
}

.obc-finder-lab .fl-wrap {
  width: 100%;
  /* was 760px, which left half of a desktop window empty and made the area list a narrow two-column
     ribbon. Wide enough for three areas across, still inside a comfortable measure for prose because
     the prose sets its own max-width. */
  max-width: 940px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
}

/* the banner that says what this is. Loud on purpose: it must not be mistaken for the live page.
   It is the one thing here that is deliberately not pretty. */
.obc-finder-lab .fl-banner {
  margin: 0 0 clamp(28px, 4vw, 44px);
  padding: clamp(20px, 3vw, 28px) 0;
  border-bottom: 2px solid var(--f-green);
  background: #fdf6e3;
}

.obc-finder-lab .fl-banner p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.6;
}

.obc-finder-lab .fl-banner p:last-child { margin-bottom: 0; }

.obc-finder-lab .fl-banner strong { font-weight: 600; }

.obc-finder-lab .fl-banner ul {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- the screen ----------
   Each question stands on paper over the warm ground, so the thing being asked is one object rather
   than text floating on a page. */
.obc-finder-lab .fl-screen {
  /* sprint 32 — a stacking context, so the fireflies falling from the booked mark can sit behind
     the words without falling behind the card itself. */
  position: relative;
  z-index: 0;
  margin: 0 0 clamp(20px, 3vw, 28px);
  padding: clamp(26px, 4vw, 46px) clamp(22px, 4vw, 44px) clamp(30px, 4vw, 46px);
  border-radius: 10px;
  background: var(--f-paper);
  box-shadow: var(--f-shadow);
}

/* ---------- where you are in the run ----------
   Was a row of small caps that read as a heading rather than as progress. It is now a rail that
   fills, which is the same idea as the jars pouring: you can see how much is left. */
/* sprint 31 — one row, replacing both the four-item rail and the "Step 2 of 3" kicker beneath it.
   The rail cost about 95px and wrapped to two rows on a phone; this is a single 20px line, and the
   card with the question on it now starts where the rail used to end. */
.obc-finder-lab .fl-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  padding: 0 0 10px;
  border-bottom: 1px solid var(--f-line);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* holds the row's shape on step one, where there is nowhere back to go */
.obc-finder-lab .fl-nav-gap { flex: 1; }

.obc-finder-lab .fl-nav-back {
  flex: 1;
  margin: 0;
  padding: 4px 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  color: var(--f-deep);
  background: none;
  border: 0;
  cursor: pointer;
}

.obc-finder-lab .fl-nav-back:hover { color: var(--f-green); }

.obc-finder-lab .fl-nav-back:focus-visible {
  outline: 2px solid var(--f-green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* the count is the only orientation left on the screen, so it is the darker of the two */
.obc-finder-lab .fl-nav-count {
  margin-left: auto;
  color: var(--f-green);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- the questions ---------- */
.obc-finder-lab .fl-kicker {
  margin: 0 0 10px;
  color: var(--f-deep);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.obc-finder-lab .fl-title {
  max-width: 20ch;
  margin: 0 0 14px;
  color: var(--f-green);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* the site's signature, and the whole reason this reads as OBC rather than as a form: one word per
   question set in the italic serif. Never two. */
.obc-finder-lab .fl-title em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.obc-finder-lab .fl-blurb {
  max-width: 58ch;
  margin: 0 0 clamp(24px, 3vw, 34px);
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- the two big ways in ----------
   Built like the homepage jars: a deep green card a family has already met once, so arriving here
   from the homepage or from a poster feels like the same place. */
.obc-finder-lab .fl-pair {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-bottom: 30px;
}

.obc-finder-lab .fl-big {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(24px, 3vw, 32px);
  border: 0;
  border-radius: 8px;
  background: var(--f-green);
  color: var(--f-mist);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* the colostrum at the foot is the jar's liquid, shallow. It rises on hover rather than pouring,
   because a card you are choosing between should answer the pointer, not perform. */
.obc-finder-lab .fl-big::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--f-colostrum-pale), var(--f-colostrum-deep));
  content: "";
  transition: height 0.25s ease;
}

.obc-finder-lab .fl-big:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(31, 44, 49, 0.55);
}

.obc-finder-lab .fl-big:hover::after { height: 10px; }

.obc-finder-lab .fl-big strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(21px, 2.4vw, 25px);
  font-weight: 400;
}

.obc-finder-lab .fl-big span {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.82;
}

/* the safety note. Present, readable, and not a red box that frightens someone who is already
   frightened — the tone rule says front desk, not triage. Warm gold rather than the teal it had:
   it is the one thing on the screen that is a caution, and teal was also the colour of every link. */
.obc-finder-lab .fl-urgent {
  max-width: 66ch;
  margin: 0 0 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--f-gold);
  border-radius: 0 6px 6px 0;
  background: var(--f-mist);
  font-size: 15px;
  line-height: 1.6;
}

.obc-finder-lab .fl-group { margin-bottom: 10px; }

.obc-finder-lab .fl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

/* the finer wording sits under the heading it belongs to, in a card of its own.
   17 September 2026 — Amanda: "make the suboptions a little more obvious of a section please? make an
   ivory card pop out?" They were four chips behind a hairline, which read as loose buttons rather than
   as the group they belong to. Ivory ground, the gold rule down the side, and the chips stay white so
   they still look like things to press. */
.obc-finder-lab .fl-chips.is-detail {
  margin: 12px 0 20px 22px;
  padding: 14px 16px;
  border: 1px solid var(--f-line);
  border-left: 3px solid var(--f-gold);
  border-radius: 10px;
  background: var(--f-mist);
  box-shadow: 0 1px 3px rgba(31, 42, 38, 0.07);
}

.obc-finder-lab .fl-chip {
  /* 44px minimum, which is the tap target a thumb needs and the old 15px padding did not reach */
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: var(--f-paper);
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.obc-finder-lab .fl-chip:hover { border-color: var(--f-deep); background: var(--f-mist); }

/* 18 September 2026 — the answers inside the card are rounded rectangles rather than pills, at
   Amanda's word: they "look the same as the pill buttons" and are not the same thing. A pill is a
   choice among the screen's own options; these sit inside one of those choices, so they take the
   card's corner instead and run the width of it, which also stops a long answer wrapping into a
   lozenge three lines deep. */
.obc-finder-lab .fl-chips.is-detail { display: flex; flex-direction: column; gap: 8px; }

.obc-finder-lab .fl-chips.is-detail .fl-chip {
  width: 100%;
  border-radius: 10px;
  padding: 11px 14px;
}

.obc-finder-lab .fl-chip.is-on {
  border-color: var(--f-green);
  background: var(--f-green);
  color: var(--f-mist);
}

/* a heading is a full-width line, so seven of them read as a list rather than a word cloud */
.obc-finder-lab .fl-chip.is-head {
  display: block;
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
}

/* ---------- the places ---------- */
.obc-finder-lab .fl-areas {
  display: grid;
  gap: 10px;
  /* three across on a desk. Twenty-one areas in two columns was a long ribbon to read down. */
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  margin-bottom: 28px;
}

.obc-finder-lab .fl-area {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-paper);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.obc-finder-lab .fl-area:hover {
  border-color: var(--f-blue);
  box-shadow: var(--f-shadow);
}

.obc-finder-lab .fl-area strong {
  display: block;
  color: var(--f-green);
  font-size: 16px;
  font-weight: 500;
}

/* what is actually available there, said before they choose rather than after. This is the line a
   parent is really scanning for, so it is no longer the faintest thing in the card. */
.obc-finder-lab .fl-area span {
  display: block;
  margin-top: 6px;
  /* sprint 38 — was --f-deep, Clinical Teal, which measured 3.73:1 on the card against the 4.5 a
     13px line needs. The comment above is right that this is the line a parent is really scanning
     for, which is exactly why it cannot be the one below the floor. Deep Green keeps it a colour
     rather than body text, and clears it. */
  color: var(--f-green);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.obc-finder-lab .fl-area.is-other { grid-column: 1 / -1; }

/* ---------- what we can offer ----------
   The last screen is the payoff and used to be the flattest thing in the whole run: five boxes of
   identical weight with loose paragraphs floating between them. */
.obc-finder-lab .fl-offer {
  margin-bottom: 16px;
  padding: clamp(22px, 3vw, 28px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-paper);
}

/* the recommended one, in colostrum. It is the way forward on this screen, which is what colostrum
   marks everywhere else on the site. */
.obc-finder-lab .fl-offer.is-first {
  position: relative;
  overflow: hidden;
  border-color: transparent;
  box-shadow: var(--f-shadow);
}

/* 3 September 2026 — the gold rule across the top of the recommended card is gone, at Amanda's
   word. It was doing the same job as the chip inside the card and the shadow around it, three
   marks for one meaning, and it was the loudest thing on a screen whose job is the buttons. The
   shadow and the borderless edge still say which card is the recommendation. */

/* sprint 38 — the clinic's own recommendation, which was the smallest text on the results screen.
 *
 * It was an 11px uppercase eyebrow with 0.16em tracking, which is the exact shape of a label people
 * have learned to skip: the admin's eyes went to the photographs and the filled buttons and never
 * reached it. Small caps at that size are read as decoration around a heading rather than as a
 * sentence with something in it.
 *
 * A chip instead, at a size somebody actually reads, and only one card on the screen carries one.
 * That is the point of it. The isolation effect only pays out while the isolated thing is alone,
 * so if a second tag is ever added this stops working and both should go back to being plain. */
/* 3 September 2026 — nothing of its own left. It carries .fl-offer-blurb now, which is the line
   that holds an office's address, because Amanda asked for the two cards to read the same way: a
   heading, then one line under it, in both. */

/* sprint 38 — weight 400 lost to eight filled buttons. People scan headings and skip what is
   between them, so the heading has to be the strongest thing in its own card or the four cards are
   told apart by reading, which is the thing nobody does. */
.obc-finder-lab .fl-offer h3 {
  margin: 0 0 8px;
  color: var(--f-green);
  font-size: clamp(21px, 2.3vw, 24px);
  font-weight: 600;
}

.obc-finder-lab .fl-offer-blurb {
  max-width: 58ch;
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.55;
}

.obc-finder-lab .fl-route { margin: 0 0 12px; }
.obc-finder-lab .fl-route:last-child { margin-bottom: 0; }

/* the booking button, which is the point of the entire page and was the same size as everything
   else on it */
.obc-finder-lab .fl-book {
  display: inline-block;
  min-height: 46px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--f-green);
  color: var(--f-mist);
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.obc-finder-lab .fl-book:hover {
  background: var(--f-ink);
  transform: translateY(-1px);
}

/* sprint 38 — 13px slate under a filled button is where "not OHIP subsidized, travel fee may apply"
   was living. It is a condition on the price directly above it, and the price is the loudest thing
   in the card, so the gap between the two was the whole problem. Ink at 14.5px, and weighted, so it
   reads as part of the offer rather than as small print after it. */
.obc-finder-lab .fl-route-note {
  display: block;
  margin-top: 7px;
  color: var(--f-ink);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* the one address transcribed from a page her form never links to */
.obc-finder-lab .fl-warn {
  display: block;
  margin-top: 6px;
  color: var(--f-colostrum-deepest);
  font-size: 13px;
  font-weight: 600;
}

/* the loose paragraphs between the offers: who covers the area, the travel fee, the intake form.
   They were floating unattached between boxes, which made them read as fine print. They belong to
   the offers above them, so they now sit in the same well. */
.obc-finder-lab .fl-note,
.obc-finder-lab .fl-after {
  max-width: 66ch;
  margin: 0 0 12px;
  padding: 0 0 0 16px;
  border-left: 2px solid var(--f-line);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ---------- what happens after they book ---------- */

/* Quieter than the booking options on purpose. It answers the two things families email about after
   they have booked, which matters, but it must not compete with the appointment they came for. So it
   borrows fl-keep's outline rather than fl-carry's filled card. */
.obc-finder-lab .fl-next {
  max-width: 66ch;
  margin: 24px 0 12px;
  padding: clamp(20px, 2.6vw, 26px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: transparent;
}

.obc-finder-lab .fl-next h3 {
  margin: 0 0 12px;
  color: var(--f-green);
  font-size: 18px;
  font-weight: 500;
}

.obc-finder-lab .fl-next p {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.6;
}

.obc-finder-lab .fl-next p:last-child { margin-bottom: 0; }

.obc-finder-lab .fl-next strong { font-weight: 600; }

/* ---------- paying for it ---------- */
/* sprint 30 — sits under the prices, where somebody has just worked out it is not free. Quieter than
   an option and warmer than a footnote: the same shape as "what happens next", tinted so it reads as
   an answer to the question they have just asked themselves rather than as small print. */
.obc-finder-lab .fl-money {
  max-width: 66ch;
  margin: 20px 0 4px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--f-line);
  border-left: 3px solid var(--f-green);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
}

.obc-finder-lab .fl-money h3 {
  margin: 0 0 10px;
  color: var(--f-green);
  font-size: 17px;
  font-weight: 500;
}

.obc-finder-lab .fl-money p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
}

.obc-finder-lab .fl-money p:last-child { margin-bottom: 0; }
.obc-finder-lab .fl-money strong { font-weight: 600; }

.obc-finder-lab .fl-money-ask { margin-bottom: 10px; }

.obc-finder-lab .fl-money-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}

.obc-finder-lab .fl-money-pick {
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: var(--f-green);
  background: transparent;
  border: 1px solid var(--f-green);
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.obc-finder-lab .fl-money-pick:hover { background: rgba(41, 79, 75, 0.07); }

.obc-finder-lab .fl-money-pick.is-picked {
  color: #fff;
  background: var(--f-green);
}

.obc-finder-lab .fl-money-pick:focus-visible {
  outline: 3px solid var(--f-green);
  outline-offset: 2px;
}

/* without the script this class is never added, so both answers stay on the page */
.obc-finder-lab .fl-money-answers.is-collapsed .fl-money-answer { display: none; }
.obc-finder-lab .fl-money-answers.is-collapsed .fl-money-answer.is-shown { display: block; }
.obc-finder-lab .fl-money-answer { margin: 12px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .obc-finder-lab .fl-money-pick { transition: none; }
}

/* ---------- what they carry to the appointment ---------- */
.obc-finder-lab .fl-carry {
  margin-top: 32px;
  padding: clamp(22px, 3vw, 28px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-mist);
}

.obc-finder-lab .fl-carry h3 {
  margin: 0 0 8px;
  color: var(--f-green);
  font-size: 20px;
  font-weight: 500;
}

.obc-finder-lab .fl-carry p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }

.obc-finder-lab .fl-summary {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid var(--f-line);
  border-radius: 6px;
  background: var(--f-paper);
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* ---------- the Flodesk hand-off ---------- */

/* It sits below the booking buttons and looks quieter than them on purpose. Giving an address is
   optional and must not compete with the appointment, which is what the parent came for. It used to
   be the largest and brightest block on the screen, which said the opposite. */
.obc-finder-lab .fl-keep {
  margin-top: 24px;
  padding: clamp(22px, 3vw, 28px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: transparent;
}

/* sprint 31 — a closed fold must not keep the padding of an open one. The h3 carries an 8px bottom
   margin for the blurb that follows it, and the card carries up to 28px below that: closed, both sit
   under a trigger with nothing after it and put ~36px of empty card on the screen, which is the
   habit this screen was redesigned to remove, in miniature. */
.fl-fold:not(.is-open) .fl-fold-head { margin-bottom: 0; }
.obc-finder-lab .fl-keep.fl-fold:not(.is-open) { padding-top: 16px; padding-bottom: 16px; }

.obc-finder-lab .fl-keep h3 {
  margin: 0 0 8px;
  color: var(--f-green);
  font-size: 19px;
  font-weight: 500;
}

.obc-finder-lab .fl-keep p { margin: 0 0 16px; font-size: 15px; line-height: 1.55; }

/* sprint 31 — the disclosure, and it is deliberately NOT scoped to .obc-finder-lab.
   It started inside the Finder and is now used by the release opt-in on /faq/, which is built by
   signup.js rather than by the Finder's own builder. One pattern, one look, wherever it appears:
   scoping it to the Finder is how the second one ends up hand-styled and slightly different.

   The folded form: a disclosure, collapsed to its own question until somebody opens it.
   The whole heading row is the target rather than a small chevron, because this is read one-handed
   on a phone by somebody who has just finished booking. */
.fl-fold-head { margin: 0; }

/* sprint 38, squint pass — a fold is a heading with a control in it, and at weight 400 it read as
   another line of prose. Three foldables in a row on the post-booking screen, none of them looking
   like a thing to press, is most of why that screen was confusing. */
.obc-finder-lab .fl-fold-head,
.obc-finder-lab .fl-fold-open {
  font-weight: 600;
}

.fl-fold-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

/* the chevron is drawn rather than written, so it never reads out as a character */
.fl-fold-open::after {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
  content: "";
}

.fl-fold.is-open .fl-fold-open::after {
  transform: translateY(2px) rotate(-135deg);
}

.fl-fold-open:hover { color: var(--f-green); }

.fl-fold-open:focus-visible {
  outline: 2px solid var(--f-green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* the heading carries the card's bottom margin while closed; the region takes over once open */
.fl-fold-body[hidden] { display: none; }
.fl-fold-body > p:first-child { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .fl-fold-open::after { transition: none; }
}

.obc-finder-lab .fl-keep-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.obc-finder-lab .fl-field {
  flex: 1 1 240px;
  min-height: 46px;
  padding: 13px 16px;
  border: 1px solid var(--f-line);
  border-radius: 999px;
  background: var(--f-paper);
  font-family: inherit;
  font-size: 15.5px;
}

.obc-finder-lab .fl-field:focus {
  border-color: var(--f-deep);
  outline: 2px solid rgba(79, 143, 139, 0.25);
  outline-offset: 1px;
}

.obc-finder-lab .fl-agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14.5px;
  line-height: 1.5;
  cursor: pointer;
}

.obc-finder-lab .fl-agree input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--f-green);
}

/* what would actually be stored, said before the address is typed rather than in a policy nobody
   opens */
.obc-finder-lab .fl-agree-note {
  margin: 12px 0 0;
  color: var(--f-slate);
  font-size: 13px;
  line-height: 1.6;
}

/* marks everything still waiting on a real Flodesk form, so a prototype cannot be mistaken for a
   working sign-up */
.obc-finder-lab .fl-todo {
  display: block;
  margin-top: 6px;
  color: var(--f-colostrum-deepest);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- shared controls ---------- */
.obc-finder-lab .fl-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 26px 0 0;
}

/* 18 September 2026 — Next is colostrum, at Amanda's word: "so it stands out more as a button instead
   of a selection in a sea of green buttons." Every chip on the screen turns green when it is picked,
   so a green Next read as one more picked thing. Colostrum is the one colour on this site that only
   ever means "this is the way on" — it is the booking button in the bar (BRAND.md) — and the words on
   it go deep green, because ink on gold is what that pairing is checked at. */
.obc-finder-lab .fl-go {
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid #e9c471;
  border-radius: 999px;
  background: #e9c471;
  /* Deep Green rather than the teal: teal on colostrum is 2.24:1 and this is 5.44:1, which is the
     pairing BRAND.md already checked for the gold button in the bar */
  color: var(--f-green);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

/* deeper colostrum rather than the ink it used to take: the press should look like more of the same
   colour, not like a different button arriving */
.obc-finder-lab .fl-go:hover { background: #dcb45f; border-color: #dcb45f; transform: translateY(-1px); }
.obc-finder-lab .fl-go:active { background: #cfa74d; }

.obc-finder-lab .fl-go.is-ghost { border-color: var(--f-green); background: transparent; color: var(--f-green); }

/* 19 September 2026 — the quieter buttons answer in Clinical Teal. Amanda: "What happens next and
   Show me the options again buttons shouldn't click to colostrum gold, let them go to clinical teal
   with white text."

   They were catching the press colour meant for the gold one: .fl-go:active paints every button on
   the screen, so a ghost flashed colostrum for a moment and then went back to being an outline,
   which reads as the wrong button answering. Teal on white is 4.02:1 for the label at this size and
   is the colour this site uses when something that is not the main action responds. */
.obc-finder-lab .fl-go.is-ghost:hover,
.obc-finder-lab .fl-go.is-ghost:focus-visible,
.obc-finder-lab .fl-go.is-ghost:active {
  border-color: #4f8f8b;
  background: #4f8f8b;
  color: #fff;
  transform: none;
}

/* the way out, on every screen. It was a plain underline at the bottom of a long page and easy to
   miss, which matters: it is the escape for somebody the Finder is not working for. */
.obc-finder-lab .fl-stuck {
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--f-line);
  font-size: 15px;
}

.obc-finder-lab .fl-stuck a { color: var(--f-deep); }

.obc-finder-lab .fl-print {
  max-width: 66ch;
  margin: 16px 0 0;
  color: var(--f-slate);
  font-size: 13px;
  line-height: 1.6;
}

/* every control here is reached by keyboard as well as by thumb */
.obc-finder-lab button:focus-visible,
.obc-finder-lab a:focus-visible,
.obc-finder-lab .fl-nav-back:focus-visible {
  outline: 2px solid var(--f-blue);
  outline-offset: 2px;
}

/* sprint 26 — the towns inside a district. These are what somebody scans for; the district name is
   how the clinic thinks about coverage, and a parent should never have to know it. */
.obc-finder-lab .fl-covers {
  display: block;
  margin-top: 5px;
  color: var(--f-slate);
  font-size: 13px;
  line-height: 1.45;
}

/* ---------- sprint 26: placing somebody by postal code ---------- */

/* sits above the list of districts, because for most people it is the shorter road. It reads as the
   quicker way now rather than as a grey box somebody has to notice. */
/* sprint 38, squint pass — on the whereabouts screen the postal box is the recommended path and
 * twenty-one district cards are the fallback. Visually it was the other way round: one small panel
 * against a grid filling 850px, and a grid of cards is exactly the shape the eye counts first.
 *
 * The grid cannot shrink without hurting the people who use it, so the box rises instead. Heavier
 * edge, and enough space under it that the cards read as "or" rather than as the page.
 */
.obc-finder-lab .fl-post {
  margin: 0 0 32px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 2px solid var(--f-blue);
  border-radius: 8px;
  background: var(--f-mist);
}

.obc-finder-lab .fl-post-label {
  display: block;
  margin-bottom: 12px;
  color: var(--f-green);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
}

.obc-finder-lab .fl-post-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.obc-finder-lab .fl-post-form .fl-field {
  flex: 0 1 160px;
  background: var(--f-paper);
  font-size: 17px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.obc-finder-lab .fl-post-note {
  margin: 12px 0 0;
  color: var(--f-slate);
  font-size: 13px;
  line-height: 1.55;
}

.obc-finder-lab .fl-post-wait {
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

/* 8 September 2026 — the three ways the postal box can miss, marked in Warm Coral. Beth: "can you
   make that coral so they see the error? It's buried in text."
 *
 * The coral is a rule and a wash rather than the text colour, and that is the whole design. Warm
 * Coral on this panel measures 2.7:1, which fails at this size, so a coral sentence would be a
 * message she can see and cannot read -- the opposite of the ask. The mark is coral, the words stay
 * Ink at 12:1, and BRAND.md's rule holds: colour is never the only thing carrying the message. */
.obc-finder-lab .fl-post-miss {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid #c9826b;
  border-radius: 0 10px 10px 0;
  background: rgba(201, 130, 107, 0.12);
  color: #1f2c31;
  font-weight: 500;
}

/* the answer, when the postal code places somebody. Colostrum, because it is the way forward. */
.obc-finder-lab .fl-found {
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-paper);
  box-shadow: var(--f-shadow);
}

.obc-finder-lab .fl-found::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--f-colostrum-pale), var(--f-colostrum-deep));
  content: "";
}

.obc-finder-lab .fl-found h3 {
  margin: 0 0 10px;
  color: var(--f-green);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
}

.obc-finder-lab .fl-found p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.obc-finder-lab .fl-found p:last-child { margin-bottom: 0; }

.obc-finder-lab .fl-found-office {
  padding-top: 12px;
  border-top: 1px solid var(--f-line);
  color: var(--f-slate);
  font-size: 14px !important;
}

/* said only where the postal code is too big to speak confidently about */
.obc-finder-lab .fl-hedge {
  padding: 12px 14px;
  border-left: 3px solid var(--f-gold);
  border-radius: 0 6px 6px 0;
  background: var(--f-mist);
  font-size: 14px !important;
}

/* the Open Government Licence asks for the acknowledgement to be visible, not buried in a comment */
.obc-finder-lab .fl-credit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(41, 79, 75, 0.2);
  font-size: 12px !important;
  line-height: 1.6;
  opacity: 0.7;
}

/* the two answers to a boundary result are separate choices — "show me what I can book" and "ask
   anyway" — and were rendering flush against each other */
.obc-finder-lab .fl-row + .fl-route { margin-top: 10px; }

/* ---------- sprint 26: the three capture forms ---------- */
.obc-finder-lab .fl-keep-form.is-stack { flex-direction: column; align-items: stretch; }
.obc-finder-lab .fl-ask { display: flex; flex-direction: column; }
.obc-finder-lab .fl-keep-form.is-stack .fl-field { flex: 1 1 auto; width: 100%; }
.obc-finder-lab .fl-field.is-long { border-radius: 8px; padding: 13px 16px; resize: vertical; }

.obc-finder-lab .fl-ask-note {
  margin: 6px 0 0 4px;
  color: var(--f-slate);
  font-size: 13px;
  line-height: 1.5;
}

/* a person never sees this; a script fills it in and gives itself away */
.obc-finder-lab .fl-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* the escape reads as a link because that is what it was, and it opens a form in place */
.obc-finder-lab .fl-asif {
  padding: 0;
  border: 0;
  background: none;
  color: var(--f-deep);
  font-family: inherit;
  font-size: 15px;
  text-decoration: underline;
  cursor: pointer;
}

/* sprint 27 — was #8a2a00, an alarm red that belonged to no palette. Muted Berry is the approved
   colour that still reads as "this went wrong" without shouting at somebody who is already worried,
   which is the same tone rule the safety note follows. */
.obc-finder-lab .fl-oops {
  margin-top: 12px !important;
  color: #6e4a5a;
  font-size: 14px !important;
}

/* ---------- what they told us, said back ----------
   sprint 27 — sits between the question and the options, so somebody sees that the screen heard
   them before they see anything to book. Warm ground rather than another card: it is the page
   talking, not a third thing to choose between. */
.obc-finder-lab .fl-said {
  margin: 0 0 clamp(24px, 3vw, 32px);
  padding: clamp(18px, 2.5vw, 24px) clamp(20px, 2.5vw, 26px);
  border-left: 3px solid var(--f-blue);
  border-radius: 0 8px 8px 0;
  background: var(--f-mist);
}

.obc-finder-lab .fl-say {
  max-width: 62ch;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
}

.obc-finder-lab .fl-say:last-child { margin-bottom: 0; }

/* the harder wording, for triple feeding, latching and supply. Colostrum, because on this site that
   marks the way forward, and this is the one line on the screen that says do it now. */
.obc-finder-lab .fl-rush {
  /* it sits under the recognition now, not over it, so the rule goes above it */
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--f-line);
  color: var(--f-green);
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.55;
}

.obc-finder-lab .fl-rush:only-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---------- the words, where the owner edits them ----------
   sprint 27 — the copy deck. Every sentence the Finder says is a block in this panel, so the wording
   can be changed in the editor like any other page. The script reads it at boot and falls back to
   its own defaults for anything missing, so editing here cannot break the Finder.

   Hidden from visitors and shown in the editor, which is the whole trick: `.editor-styles-wrapper`
   only exists on the editor canvas. A visitor never sees the panel; the owner never has to go
   looking for the words. */
.obc-finder-lab .fl-copy { display: none; }

.editor-styles-wrapper .obc-finder-lab .fl-copy {
  display: block;
  margin-top: 40px;
  padding: 24px;
  border: 2px dashed var(--f-blue);
  border-radius: 10px;
  background: var(--f-mist);
}

.editor-styles-wrapper .obc-finder-lab .fl-copy-label {
  margin: 22px 0 6px;
  color: var(--f-green);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.editor-styles-wrapper .obc-finder-lab .fl-copy-note {
  margin: 0 0 8px;
  color: var(--f-slate);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- a phone ----------
   The run is four screens of choosing, which on a phone is four screens of reaching. Everything that
   is tapped goes full width and the paper loses its side padding, so the choices are as wide as the
   thumb can be accurate. */
@media (max-width: 600px) {
  .obc-finder-lab .fl-screen {
    padding: 26px 20px 30px;
    border-radius: 8px;
  }

  .obc-finder-lab .fl-nav {
    gap: 8px;
    font-size: 11px;
  }

  .obc-finder-lab .fl-title { max-width: none; }

  .obc-finder-lab .fl-pair { gap: 12px; }

  .obc-finder-lab .fl-areas { gap: 8px; }

  /* a booking link is the one thing on the last screen that must not be missed or mis-tapped */
  .obc-finder-lab .fl-book,
  .obc-finder-lab .fl-go {
    display: block;
    width: 100%;
    text-align: center;
  }

  .obc-finder-lab .fl-row { gap: 10px; }

  .obc-finder-lab .fl-post-form .fl-field { flex: 1 1 100%; }
}

/* somebody who has asked for less movement gets the page without any of it */
@media (prefers-reduced-motion: reduce) {
  .obc-finder-lab .fl-big,
  .obc-finder-lab .fl-big::after,
  .obc-finder-lab .fl-book,
  .obc-finder-lab .fl-go,
  .obc-finder-lab .fl-area,
  .obc-finder-lab .fl-chip {
    transition: none;
  }

  .obc-finder-lab .fl-big:hover,
  .obc-finder-lab .fl-book:hover,
  .obc-finder-lab .fl-go:hover { transform: none; }
}

/* sprint 28 — the way out of a pinned clinician, under her options rather than above them.
 *
 * In the Finder's own tokens, not the redesign's: this screen stands on --f-mist, which is the same
 * ivory the first version of this card used for its background, so the card was the colour of the
 * page it sat on. It is an offer card like the ones above it now, paper on mist. */
.obc-finder-lab .fl-elsewhere {
  margin: 24px 0 0;
  padding: clamp(22px, 3vw, 28px) clamp(22px, 3vw, 28px) 10px;
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-paper);
  box-shadow: var(--f-shadow);
}

/* 17 September 2026 — bold, at Amanda's word, now that it is the whole of the heading: the sentence that
   stood under it has gone.
   18 September 2026 — and the size of an offer card's heading: "The title 'Want to be seen in person?'
   should be as big as 'The soonest virtual IBCLC consult'." It is the same kind of thing, a card
   offering a way to be seen, so it takes the same scale rather than a size of its own. */
.obc-finder-lab .fl-elsewhere-title {
  margin: 0 0 10px;
  color: var(--f-ink);
  font-size: clamp(21px, 2.3vw, 24px);
  font-weight: 700;
}

.obc-finder-lab .fl-elsewhere-note {
  max-width: 60ch;
  margin: 0 0 16px;
  color: var(--f-ink);
  font-size: 14px;
  line-height: 1.55;
}

/* the field keeps its own inset ground, which reads as a box to type in now that the card behind it
   is paper rather than the same ivory */
.obc-finder-lab .fl-elsewhere .fl-post {
  margin-bottom: 14px;
}

/* ---------- sprint 29: a promo carried into the Finder ---------- */

/* It rides in the trail so it is on every screen without taking a line of its own. Warm Gold on the
   Finder's own ground, which is the colour this site uses for "this one" everywhere else. */
.obc-finder-lab .fl-promo-flag {
  margin-left: auto;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e9c471;
  color: var(--f-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* the one route the offer covers. Gold fill rather than the usual link, so the eye lands on the
   subsidized virtual visit and not on the self-referred one beside it, which the promo cannot touch */
.obc-finder-lab .fl-book.is-promo {
  padding: 10px 20px;
  border-radius: 999px;
  background: #e9c471;
  color: var(--f-ink);
  font-weight: 700;
  text-decoration: none;
}

.obc-finder-lab .fl-book.is-promo:hover,
.obc-finder-lab .fl-book.is-promo:focus-visible { background: #f2d79a; color: var(--f-ink); }

/* the old price, kept visible beside the new one. Struck through rather than removed, because the
   saving is the point and a number nobody sees is not a saving */
.obc-finder-lab .fl-was {
  margin-left: 10px;
  color: var(--f-muted, #6d7a7e);
  font-size: 14px;
  text-decoration: line-through;
}

.obc-finder-lab .fl-route.is-promo { margin-top: 14px; }

/* ---------- picking up where she left off ---------- */
/* sprint 30 — sits above the first question, and has to be readable and reachable one-handed at two in
   the morning. Both buttons are full-size tap targets: the "no" is not a small grey link, because
   somebody on a shared phone should be able to wipe this as easily as resume it. */
/* sprint 31 — was a 150px bordered card asking a question; now one quiet line saying what already
   happened, with the way out beside it. It sits above the screen and leaves on the next move. */
.obc-finder-lab .fl-resumed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 clamp(12px, 1.6vw, 16px);
  font-size: 14px;
  line-height: 1.5;
  color: var(--f-slate);
}

.obc-finder-lab .fl-resumed-fresh {
  min-height: 0;
  margin: 0;
  padding: 2px 0;
  font: inherit;
  color: var(--f-green);
  background: none;
  border: 0;
  border-bottom: 1px solid currentColor;
  cursor: pointer;
}

.obc-finder-lab .fl-resumed-fresh:hover { color: var(--f-deep); }

.obc-finder-lab .fl-resumed-fresh:focus-visible {
  outline: 2px solid var(--f-green);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- when the office runs ---------- */
/* sprint 30 — sits directly above the note they copy into the booking, because the days an office
   runs matter when you are booking rather than while you are still saying where you live. Same shape
   as the block below it so the two read as one step. */
.obc-finder-lab .fl-when {
  max-width: 66ch;
  margin: 24px 0 12px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
}

.obc-finder-lab .fl-when h3 {
  margin: 0 0 10px;
  color: var(--f-green);
  font-size: 17px;
  font-weight: 500;
}

.obc-finder-lab .fl-when-line {
  margin: 0 0 8px;
  font-size: 14.5px;
  line-height: 1.55;
}
.obc-finder-lab .fl-when-line:last-child { margin-bottom: 0; }

/* sprint 33 — a price with no button on it, on a card that asks rather than books. The price still
   belongs beside the thing it prices; what is gone is the link, because there is not one. */
.obc-finder-lab .fl-route.is-ask {
  display: block;
  margin: 0 0 8px;
  color: var(--f-ink);
  font-size: 15px;
  line-height: 1.5;
}

.obc-finder-lab .fl-route.is-ask .fl-route-label { font-weight: 500; }

/* sprint 33 — directions, as a button rather than a line of text.
   The editor: "make it more of a button with the pin icon to convey it is a map thing." A ghost pill
   in the shape the rest of this screen uses, so it reads as a thing to press and still loses to the
   booking beside it — colostrum and the filled green are kept for the way forward, and the way
   forward on this card is the appointment. */
.obc-finder-lab .fl-directions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  margin: 2px 0 14px;
  padding: 9px 18px;
  border: 1px solid var(--f-deep);
  border-radius: 999px;
  background: transparent;
  color: var(--f-deep);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.obc-finder-lab .fl-directions:hover,
.obc-finder-lab .fl-directions:focus-visible {
  border-color: var(--f-green);
  background: var(--f-mist);
  color: var(--f-green);
}

/* the pin sits on the text's own baseline rather than in the middle of the line box, which is a
   pixel low against a 14.5px label and reads as a wobble */
.obc-finder-lab .fl-pin {
  flex: none;
  margin-top: -1px;
}

/* ---------- sprint 33: how far she is willing to travel ---------- */
/* Same shape as the block above it, because it is the same kind of thing: a fact about the offices,
   sitting with the offices. It is a control rather than a card, so it stays quiet — no colostrum on
   it, which is kept for the way forward, and the way forward here is the booking button underneath. */
.obc-finder-lab .fl-radius {
  max-width: 66ch;
  margin: 24px 0 12px;
  padding: clamp(18px, 2.4vw, 24px);
  border: 1px solid var(--f-line);
  border-radius: 8px;
  background: var(--f-mist);
}

.obc-finder-lab .fl-radius-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.obc-finder-lab .fl-radius-label {
  color: var(--f-green);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
}

/* the number she is holding, at the weight of an answer rather than of a label */
.obc-finder-lab .fl-radius-value {
  color: var(--f-green);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* accent-color rather than a rebuilt track and thumb: one line, and it leaves the control the
   browser's own, which is the version that already works with a keyboard and a screen reader.
   44px of height so a thumb can find it on a phone while the visible track stays thin. */
.obc-finder-lab .fl-radius-slide {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--f-deep);
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}

.obc-finder-lab .fl-radius-slide:focus-visible {
  outline: 2px solid var(--f-deep);
  outline-offset: 4px;
}

.obc-finder-lab .fl-radius-ends {
  display: flex;
  justify-content: space-between;
  color: var(--f-slate);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.obc-finder-lab .fl-radius-said {
  margin: 10px 0 0;
  color: var(--f-ink);
  font-size: 14.5px;
  line-height: 1.55;
}

/* sprint 30 — the second half of the Finder, prototype.
   Borrowing the offer card's shapes rather than inventing new ones: this is a first look at whether
   anybody comes back after booking, not a new visual language. */
/* sprint 31 — the questions and the prototype note are disclosures now, so what used to be a
   heading over a list is a trigger over a region. They read as a stack of closed rows. */
.fl-fold {
  margin-top: 18px;
  padding-top: 4px;
}

.obc-finder-lab .fl-next-faqs .fl-fold-open {
  font-size: 1.05rem;
}

/* the card keeps its own frame and spacing; only the trigger is shared */
.obc-finder-lab .fl-keep.fl-fold { padding-top: 0; }

.fl-next-faqs { margin-top: 22px; }

.fl-next-faqs-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.fl-next-faq {
  display: block;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(31, 44, 49, 0.14);
  color: inherit;
}

.fl-next-faq:first-of-type { border-top: 1px solid rgba(31, 44, 49, 0.14); }


/* the hand-off's own button. It is the most important thing on the screen: an extra tap was added
   between a decided parent and her booking, so it has to be the obvious one. */
/* sprint 38, squint pass — this is the appointment and the price she is about to be charged, and
   it was 0.98rem grey between a heading and a gold button. The one line on the screen worth reading
   twice was the one nobody read once. */
.fl-handoff-what {
  margin: 18px 0 10px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--f-ink);
}

/* 19 September 2026 — the bar that fills while booking opens itself. Amanda asked for "a loading
   symbol that shows they will be redirected to jane, maybe a progress bar that lasts 3-4 seconds".

   A bar rather than a spinner, because a bar says how long: a spinner says only that something is
   happening, which is the thing you look at wondering whether it is stuck. Under reduced motion it
   does not travel — the line above it already says what is about to happen. */
.fl-handoff-going { margin: 0 0 18px; }

.fl-handoff-says {
  margin: 0 0 8px;
  color: var(--f-ink);
  font-size: 15px;
}

.fl-handoff-bar {
  overflow: hidden;
  width: 100%;
  max-width: 320px;
  height: 6px;
  border-radius: 999px;
  background: rgba(31, 42, 38, 0.12);
}

.fl-handoff-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: #e9c471;
  transition: width 3.5s linear;
}

.fl-handoff-bar.is-going span { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .fl-handoff-bar span { transition: none; }
  .fl-handoff-bar.is-going span { width: 100%; }
}

.fl-handoff-open {
  display: block;
  margin: 8px 0 4px;
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--f-gold, #d7b47a);
  color: #1f2c31;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.fl-handoff-open:hover,
.fl-handoff-open:focus-visible {
  background: #c9a367;
  color: #1f2c31;
}

/* the two preparation lines. Quiet, because they are instructions rather than an argument. */
.fl-next-prep { margin-top: 20px; }

/* sprint 38, squint pass — the post-booking screen had the opposite fault to the results screen.
 * Nothing on it was too loud; everything below the title sat between 15px and 19px at weight 400,
 * so there was no heading anywhere for the eye to land on and the screen read as one flat wall.
 * People scan headings and skip prose, and this page offered nothing to scan.
 *
 * This is the only heading on it that introduces something she has to do, so it is the one that
 * gets the weight. */
.fl-next-prep-title {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--f-green);
}

/* the two actions were 0.97rem behind a 2px hairline, which is the house treatment for a note.
   They are the reason the screen exists, so they are body size, ink, and marked by something with
   more presence than a note's rule. */
.fl-next-prep-line {
  margin: 0 0 10px;
  padding-left: 16px;
  border-left: 3px solid var(--f-deep);
  font-size: 1.02rem;
  color: var(--f-ink);
}

.fl-next-prep-more {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.95rem;
}

/* sprint 30 — the answers, one per thing she ticked, in the order the clinic would take them.
   The name above each answer is what makes the order legible: without it this is a wall of
   paragraphs and nobody can tell which one is about their tongue tie. */
.fl-said-title {
  margin: 0 0 14px;
  font-size: 1.08rem;
  line-height: 1.35;
}

.fl-say-point + .fl-say-point {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(31, 44, 49, 0.12);
}

.fl-say-label {
  margin: 0 0 4px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #46565b;
}

.fl-say-point .fl-say { margin: 0; }

/* sprint 30 — the reason to press one of these, immediately above them. It used to be a paragraph in
   the middle of the page, three sentences away from any button. */
.fl-nudge {
  margin: 10px 0 12px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(122, 168, 168, 0.16);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* sprint 30 — the clinician who is in that room. Somebody deciding whether to drive half an hour
   should see the face she will be sitting with, so it goes above the address rather than beside it. */
.fl-face {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
}

/* three of them at Oakville, so they overlap rather than pushing the address off the card */
.fl-face-photos {
  display: inline-flex;
  flex: 0 0 auto;
}

.fl-face-photos .fl-face-photo + .fl-face-photo {
  margin-left: -14px;
}

.fl-face-photo {
  width: 52px;
  height: 52px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  flex: 0 0 auto;
  background: var(--f-mist, #eef2f2);
}

.fl-face-name {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #46565b;
}

/* sprint 38 — how far away it is decides whether she goes, so it is not 0.9rem grey */
.fl-offer-note {
  margin: 4px 0 0;
  font-size: 14.5px;
  color: var(--f-ink);
}

/* sprint 30 — everybody a video consult could be with. Small and in a row: this is "any of these",
   not a directory, and the card's job is still the two buttons under it. */
.fl-team-title {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--f-ink);
}

/* 3 September 2026 — they overlap, at Amanda's word: "make the IBCLC faces in the finder touch and
   slightly overlap so they don't look like broken buttons."

   She is describing a real reading. Ten circles of the same size, evenly spaced, each one its own
   object, is the shape of a row of controls, and a row of controls that does nothing when tapped
   reads as broken rather than as decoration. Overlapping them makes it one object instead of ten:
   a group of people, which is what it is.

   Same treatment the office cards have used since sprint 30, at the smaller size. nowrap because a
   negative margin on the first item of a wrapped second row pulls it out past the card's edge, and
   ten at 32px come to 230px, which fits the narrowest phone this site sees. */
.fl-team-faces {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 14px;
}

/* sprint 33 — a clinician whose photograph has not been converted yet. Her initials in the same
   circle, at the same size, so a face-only row can still carry her. Sized from the class it replaces
   rather than from its own numbers, which is why this rule sets no width. */
.obc-finder-lab .is-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--f-mist);
  color: var(--f-green);
  font-family: var(--f-display, inherit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

/* sprint 38 — ten colour photographs of faces, at 44px, directly above the offer they belong to.
 *
 * A face is the strongest thing the visual system reaches for, ahead of colour and well ahead of
 * text, so ten of them were winning the card against the heading and the prices underneath. They
 * are reassurance rather than a decision: a video consult goes to whoever is next, and nothing here
 * books a particular one of them.
 *
 * So they stay and they stop shouting. 32px still reads as a row of real people at a glance, which
 * is the whole job, and the heading above them is now the first thing seen. */
.fl-team-face {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--f-mist, #eef2f2);
  /* the ring is what makes an overlap legible: without it two faces of similar tone merge into one
     shape and the row reads as a smudge rather than as several people */
  border: 2px solid #fff;
  flex: 0 0 auto;
}

.fl-team-faces .fl-team-face + .fl-team-face {
  margin-left: -9px;
}

/* 18 September 2026 — the whole team above the in-person offer. Nineteen faces is more than a row
   holds on a phone, so this one wraps where the video card's ten do not, and the overlap carries
   across a wrapped line rather than leaving the first face of each row standing apart. */
.obc-finder-lab .fl-team-faces.is-everybody {
  flex-wrap: wrap;
  row-gap: 6px;
  margin-bottom: 16px;
}

.obc-finder-lab .fl-team-faces.is-everybody .fl-team-face { margin-left: -9px; }
.obc-finder-lab .fl-team-faces.is-everybody .fl-team-face:first-child { margin-left: 0; }

/* sprint 30 — the same pair, now inside every offer card rather than once at the bottom of them all.
   The bordered, tinted box it used to sit in was right for a standalone section and is far too heavy
   repeated on four cards, so inside a card it is just the two links and whichever answer is open. */
.obc-finder-lab .fl-offer .fl-money {
  max-width: none;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.obc-finder-lab .fl-offer .fl-money-pick {
  font-size: 0.88rem;
  padding: 7px 14px;
}

.obc-finder-lab .fl-offer .fl-money-answer {
  margin: 10px 0 0;
  font-size: 0.93rem;
}

/* sprint 30 — a way to read the rest, where a worry has more to it than its paragraph can hold. */
.fl-say-more {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.93rem;
}

/* ---------- the readable fallback, for a page whose script never ran ---------- */
/* sprint 31 — short on purpose. The full price list is JSON-LD in the head, for machines; this is the
   few lines a person needs when the questions did not load. The Finder removes it once it has drawn
   something of its own.

   Nothing here may hide it. That is the mistake the copy deck made — hidden from people, served to
   crawlers, discounted for it — and this block exists to be the opposite of that. */
.fl-fallback {
  max-width: 46rem;
  margin: clamp(20px, 3vw, 32px) auto;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--f-line, #d9d2c7);
  border-left: 4px solid var(--f-colostrum-deep, #d7b47a);
  border-radius: 8px;
  background: #fff;
}

.fl-fallback .fl-fb-title { margin: 0 0 8px; font-size: clamp(1.15rem, 2.4vw, 1.45rem); }
.fl-fallback .fl-fb-intro { margin: 0 0 18px; color: var(--f-slate, #46565b); line-height: 1.6; }
.fl-fallback .fl-fb-list { margin: 0 0 18px; padding-left: 1.1rem; line-height: 1.7; }
.fl-fallback .fl-fb-list li + li { margin-top: 8px; }
.fl-fallback .fl-fb-note,
.fl-fallback .fl-fb-more { margin: 0 0 12px; color: var(--f-slate, #46565b); line-height: 1.6; font-size: 0.96rem; }

.fl-fallback .fl-fb-help {
  margin: 0 0 12px;
  padding-top: 14px;
  border-top: 1px solid var(--f-line, #d9d2c7);
  line-height: 1.6;
}

.fl-fallback a { color: var(--f-green, #294f4b); }

/* sprint 32 — the booked screen's ending.
 *
 * The owner asked for it to feel like a good place to stop. The research on endings agrees it is
 * worth the effort — people remember the peak and the close — and then recommends confetti, which is
 * wrong here. BRAND.md: comfort is telling a frightened parent what happens next, not telling her
 * everything is fine. So the moment is quiet and it is the site's own material: colostrum, poured. */
.obc-finder-lab .fl-next-mark {
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
}

.obc-finder-lab .fl-next-mark svg { width: 112px; height: 112px; }

/* sprint 32 — the bubbles rise, at the owner's request. Nothing that thick and golden holds still.
   They travel a few pixels over several seconds, on three different clocks so they never line up,
   and they are the only thing on the screen still moving once the tick has landed. */
.obc-finder-lab .fl-bub {
  transform-box: fill-box;
  transform-origin: center;
}

.obc-finder-lab .fl-bub-a { animation: fl-bub-a 5.2s ease-in-out 900ms infinite; }
.obc-finder-lab .fl-bub-b { animation: fl-bub-b 6.4s ease-in-out 1400ms infinite; }
.obc-finder-lab .fl-bub-c { animation: fl-bub-c 4.6s ease-in-out 600ms infinite; }

@keyframes fl-bub-a {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1.6px, -7px); }
}

@keyframes fl-bub-b {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-2px, -9px); }
}

@keyframes fl-bub-c {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1px, -5px); }
}

/* the fireflies the mark lets go of. Behind the words rather than over them: they are a feeling,
   and a glow on top of a sentence about a home visit is a legibility problem. */
.obc-finder-lab .fl-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

/* the pour. Palest at the top and vertical, which BRAND.md is strict about: on its side or flipped
   it stops reading as a liquid and becomes a brown rectangle. */
.obc-finder-lab .fl-next-pour {
  transform: translateY(72px);
  animation: fl-pour 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* finished before she has read the heading. A confirmation still drawing itself while somebody is
   deciding whether it worked is the opposite of a confirmation. */
.obc-finder-lab .fl-next-tick {
  stroke-dasharray: 46;
  stroke-dashoffset: 46;
  animation: fl-tick 300ms ease-out 380ms forwards;
}

@keyframes fl-pour { to { transform: translateY(0); } }
@keyframes fl-tick { to { stroke-dashoffset: 0; } }

/* already full, which is the same picture without the pour */
@media (prefers-reduced-motion: reduce) {
  .obc-finder-lab .fl-next-pour { transform: none; animation: none; }
  .obc-finder-lab .fl-next-tick { stroke-dashoffset: 0; animation: none; }
  /* the fireflies do not run at all under this; the bubbles simply hold still */
  .obc-finder-lab .fl-bub { animation: none; }
}

.obc-finder-lab .fl-next-close {
  margin: 26px 0 0;
  padding: 20px 22px;
  border-radius: 14px;
  background: #F6EFE6;
  text-align: center;
}

.obc-finder-lab .fl-next-close-who {
  margin: 0 0 6px;
  color: #183E49;
  font-weight: 600;
  font-size: 1.12rem;
  line-height: 1.4;
}

.obc-finder-lab .fl-next-close-line {
  margin: 0;
  color: #294F4B;
  font-size: 1.02rem;
  line-height: 1.5;
}

/* it used to be a full-weight button and the last thing on the page, so the final word of a booking
   was an invitation to go and look at what else she could have picked. Kept for whoever booked the
   wrong thing, quiet enough not to be the closing move. */
.obc-finder-lab .fl-next-back {
  margin: 14px 0 0;
  text-align: center;
}

.obc-finder-lab .fl-next-back-link {
  border: 0;
  background: none;
  padding: 6px 4px;
  color: #758287;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.obc-finder-lab .fl-next-back-link:hover,
.obc-finder-lab .fl-next-back-link:focus-visible { color: #183E49; }

/* sprint 38 — "I have finished booking" before she has been to Jane.
 *
 * It is aria-disabled rather than disabled, so it still takes focus and still answers a press with
 * the reason. That means it has to look unavailable without looking broken: the ghost treatment it
 * already had, dimmed further, and a cursor that says the press will not do what she expects.
 *
 * The reason line is deliberately not an error. She has done nothing wrong; she is one step early.
 */
.obc-finder-lab .fl-go[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.obc-finder-lab .fl-go[aria-disabled="true"]:hover {
  background: transparent;
  transform: none;
}

.obc-finder-lab .fl-handoff-why {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--f-green);
  max-width: 46ch;
}

/* sprint 38 — the intake form block, which is now the first thing on the post-booking screen.
 *
 * It is the one thing a family has to do that the clinic cannot do for her, so it is marked as a
 * block rather than left as three more paragraphs in the same 16px wall the rest of the screen was.
 * The same treatment as the two prep lines below it, one step up: this is the instruction, those
 * are the preparation.
 */
.obc-finder-lab .fl-next-form {
  margin: 0 0 26px;
  padding: 18px 20px;
  background: var(--f-mist);
  border-radius: 14px;
}

.obc-finder-lab .fl-next-form-title {
  margin: 0 0 10px;
  color: var(--f-green);
  font-size: 1.15rem;
  font-weight: 600;
}

.obc-finder-lab .fl-next-form-line {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--f-ink);
}

.obc-finder-lab .fl-next-form-line:last-child { margin-bottom: 0; }

/* the questions, no longer behind a fold. The heading has to carry the weight the fold's own
   button used to, or an open list reads as loose links after the form. */
.obc-finder-lab .fl-next-faqs.is-open .fl-next-faqs-title {
  font-weight: 600;
  color: var(--f-green);
}

/* sprint 38 — the way out of a screen that used to assert she was booked.
 *
 * Quieter than the intake form above it, because it is the paragraph most families read once and
 * skip: an outline rather than a fill, so it reads as an aside on the page rather than a second
 * instruction competing with the first. It stays open all the same. Whether a booking went through
 * is what every other block here assumes, and BRAND.md's rule is that nothing a family needs in
 * order to decide may be folded.
 */
.obc-finder-lab .fl-next-check {
  margin: 0 0 26px;
  padding: 16px 18px;
  border: 1px solid var(--f-line, rgba(24, 62, 73, 0.16));
  border-radius: 14px;
}

.obc-finder-lab .fl-next-check-title {
  margin: 0 0 8px;
  color: var(--f-green);
  font-size: 1.02rem;
  font-weight: 600;
}

.obc-finder-lab .fl-next-check-line {
  margin: 0 0 8px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--f-ink);
}

.obc-finder-lab .fl-next-check-line:last-child { margin-bottom: 0; }

.obc-finder-lab .fl-next-check-back {
  display: inline-block;
  margin: 2px 0 10px;
  font-size: 0.98rem;
  font-weight: 600;
}

/* 3 September 2026 — the options screen's line sits above its title. It keeps the blurb's size, and
   loses the blurb's space underneath, which belonged to a paragraph that had a heading over it. */
.obc-finder-lab .fl-blurb.is-lead {
  margin: 0 0 6px;
}



/* 3 September 2026 — the options screen's heading, set like the card headings under it.
 *
 * It names the first card now rather than asking about the page, so it is a peer of "Come to the
 * office in Waterloo" and not a question two sizes larger than the answers. The italic serif stays:
 * it is the site's signature and the one word it falls on is the name of the appointment. */


/* 3 September 2026 — the faces are the first thing in the card, above its title, exactly where an
   office card's own faces are. Both cards are one shape now: who, then what it is, then one line. */
.obc-finder-lab .fl-offer .fl-team-faces {
  margin: 0 0 10px;
}

/* 3 September 2026 — the one italic word, now that a card title can carry it. Same treatment as
   .fl-title em, which is the site's signature: one word per heading, never two. */
.obc-finder-lab .fl-offer h3 em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}