/* 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, and is set in from it */
.obc-finder-lab .fl-chips.is-detail {
  margin: 10px 0 18px 22px;
  padding-left: 16px;
  border-left: 2px solid var(--f-line);
}

.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); }

.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;
  color: var(--f-deep);
  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);
}

.obc-finder-lab .fl-offer.is-first::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-tag {
  margin: 0 0 10px;
  color: var(--f-colostrum-deepest);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.obc-finder-lab .fl-offer h3 {
  margin: 0 0 8px;
  color: var(--f-green);
  font-size: clamp(21px, 2.3vw, 24px);
  font-weight: 400;
}

.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);
}

.obc-finder-lab .fl-route-note {
  display: block;
  margin-top: 7px;
  color: var(--f-slate);
  font-size: 13px;
  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; }

.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;
}

.obc-finder-lab .fl-go {
  min-height: 48px;
  padding: 13px 26px;
  border: 1px solid var(--f-green);
  border-radius: 999px;
  background: var(--f-green);
  color: var(--f-mist);
  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;
}

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

.obc-finder-lab .fl-go.is-ghost { background: transparent; color: var(--f-green); }
.obc-finder-lab .fl-go.is-ghost:hover { background: var(--f-mist); color: var(--f-green); 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. */
.obc-finder-lab .fl-post {
  margin: 0 0 24px;
  padding: clamp(18px, 2.5vw, 24px);
  border: 1px 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: 16px;
  font-weight: 500;
  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;
}

/* 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);
}

.obc-finder-lab .fl-elsewhere-title {
  margin: 0 0 6px;
  color: var(--f-ink);
  font-size: 18px;
  font-weight: 500;
}

.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. */
.fl-handoff-what {
  margin: 18px 0 6px;
  font-size: 0.98rem;
  color: #46565b;
}

.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; }

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

.fl-next-prep-line {
  margin: 0 0 8px;
  padding-left: 16px;
  border-left: 2px solid rgba(122, 168, 168, 0.55);
  font-size: 0.97rem;
}

.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;
}

.fl-offer-note {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #46565b;
}

/* 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 8px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #46565b;
}

.fl-team-faces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  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;
}

.fl-team-face {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--f-mist, #eef2f2);
}

/* 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; }