/* eyespecialist.sg — clinic pages, loaded after site.css
 * =======================================================================
 * Draft A's language, page-scoped. site.css carries the system and almost
 * everything a clinic page needs is already in it — .hero, .shell, .head,
 * .index, .clinic, .sheet, .pcp, .btn, .label, .tnum are all the homepage's
 * and are used here unchanged. This file adds only the four shapes the
 * homepage has no use for: the visit grid, the hours table, the map embed
 * and the closing band, plus two overrides.
 *
 * The breadcrumb used to live here. It moved to site.css when the cataract
 * cluster became the second page type to need it — copying it would have
 * started the same drift the includes were built to end.
 *
 * Every colour resolves through a token from tokens.css. No inline hex,
 * oklch() or rgb() — the house rule, no exceptions.
 */

/* ---- Hero override -----------------------------------------------------
 * The geometry is site.css's and is untouched: the panel margin, the scrim
 * stop and its 0.6 ramp are all tuned together and re-deriving one means
 * re-deriving the others. Only object-position moves, because site.css's
 * 28%/100% is measured against the specialists photograph's 1.97:1 and this
 * page carries the team photograph at 1.5:1.
 *
 * ONE VALUE, NO BREAKPOINT, and which AXIS it acts on swings with the
 * viewport — the media box is 50vw x 576px, so it crosses the source's 1.510
 * at exactly 1739px. Measured off the rendered page:
 *
 *   1024  512x576 (0.89)  crops 41.1% off the SIDES
 *   1280  640x576 (1.11)  crops 26.4% off the sides
 *   1440  720x576 (1.25)  crops 17.0% off the sides
 *   1739  870x576 (1.51)  neither — the box is the source's own ratio
 *   1920  960x576 (1.67)  crops 9.5% off TOP AND BOTTOM
 *    768  768x432 (1.78)  stacked; crops 14.9% off top and bottom
 *    390  390x293 (1.33)  stacked; crops 11.8% off the sides
 *
 * So a single-axis value is inert exactly where the other one bites, which is
 * the trap Dr Jayant's hero records. The group sits at x 0.24-0.81 of the
 * master with clear wall either side, and the heads start at y 0.20 — so 50%
 * on both axes keeps all four complete at every width above, verified by
 * cropping the master to the visible rect read off the DOM. The previous 35%
 * was tuned for the team photograph and clipped this one's hands at 768. */
.hero--clinic .hero__media img {
  object-position: 50% 50%;
}

/* ---- The scrim comes OFF this hero from 84rem up -----------------------
 * The owner's read was that the woman on the right is "a bit cut off". She is,
 * by 18px of the master — but that is not what he was seeing. The scrim was
 * eating her. Measured: the fade runs from 0.6 x stop to stop, which on this
 * page is master x 0.584 -> 0.920, and the group occupies x 0.064 -> 0.932.
 * THE LAST 40% OF THE TEAM WAS UNDER THE FADE and the rightmost woman sat past
 * the fully-navy point entirely.
 *
 * That is not a bug in the scrim — it is the scrim meeting a photograph it was
 * never designed for. site.css's fold is built around the specialists picture,
 * where the doctors end at x 0.44 and the right half of the frame is empty
 * wall for the fade to happen in. This photograph has fifteen people edge to
 * edge and no empty right side at all, so there is nowhere for a gradient to go
 * that is not somebody's face.
 *
 * So the photograph runs complete to the 50% line and the navy begins there —
 * a hard seam, which is how draft B's poster hero works and reads as
 * deliberate rather than as an unfinished fade. The only remaining loss is the
 * `cover` crop: 18px of the master off the right and 24px off the left, which
 * are body edges at a frame boundary, not cuts at a joint.
 *
 * 84rem AND NOT LOWER, and the number is measured, not chosen. The panel's
 * left edge is min(75% - 18rem, 100% - 36rem - gutter), and the seam is at
 * 50%. Those cross at exactly 1280px — where the clearance is ZERO, so the
 * headline would start on the same pixel the photograph ends. Measured
 * clearance: 1024 -115px, 1152 -58, 1280 0, 1344 +29, 1440 +72, 1920 +192.
 * 84rem is the first step with real air in it.
 *
 * BELOW 84rem THE SCRIM STAYS, and it is load-bearing there: the type sits ON
 * the photograph (115px into it at 1024), so without a scrim the first
 * characters would land on somebody's shoulder. Those widths keep the ghosting,
 * which is the honest trade — the alternative is stacking the hero there, and
 * that puts the headline and both actions below the fold on every laptop.
 *
 * ALL OF THIS GOES AWAY WITH A PHOTOGRAPH OF THE BEDOK CLINIC, which is the
 * real fix and is already an Open item. Any picture with room on its right
 * side can take the standard fade back at every width. */
@media (min-width: 84rem) {
  .hero--clinic .hero__scrim {
    display: none;
  }
}

/* ---- Teleconsultation ribbon -------------------------------------------
 * Directly under the fold — the same slot the home page's assurances strip
 * occupies, so the position is established even though the content is new.
 *
 * --color-paper-2, not paper: .visit below it is paper, and two untinted bands
 * in a row read as one slab. The hero supplies the top boundary, so there is a
 * single hairline at the foot rather than a pair 1px of colour apart.
 *
 * Text left, actions right, and `auto` on the second column rather than a
 * fraction: the buttons size to their own labels, so the prose keeps every
 * pixel the buttons do not need. `align-items: center` because the two blocks
 * are different heights and neither is a caption of the other.
 *
 * Stacked below 64rem, where a 2-column split would leave the buttons ~200px
 * and wrap "Book a teleconsultation" onto two lines — a clickable label on two
 * lines is a house rule and .btn is `white-space: nowrap`, so it would have
 * overflowed the column rather than wrapped. */
/* THE FIELD IS WARM, and it is the only warm hue in draft A. Four backgrounds
 * were rendered on the real band before this one was picked
 * (previews/tele-band.html keeps all four live, each shown against a strip of
 * the hero's field above it so the join is judged too):
 *
 *   --color-paper-3      too close to the page to read as a different band at
 *                        all, AND it is the tint reserved for the closing call
 *                        to action — spending it here flattens the run down
 *                        the page, which is the whole argument of the tint
 *                        progression.
 *   light indigo tint    hue 268, the hero's own. Relates the ribbon to the
 *                        fold, and reads as a pale blue band — which is the
 *                        family of idea already rejected once as "baby blue".
 *                        Much lighter and much lower in chroma than that was,
 *                        but not worth re-litigating.
 *   the hero field       the ribbon continues the fold. Strongest of the four
 *                        and the riskiest: it makes the dark mass at the top
 *                        of the page ~250px taller, which is the exact
 *                        complaint that produced the lighter hero.
 *   WARM GREIGE          shipped.
 *
 * Hue 62 against the page's 258, so it reads as warm paper rather than as
 * another grey, and the WhatsApp green sits better on it than on any of the
 * cool options. It is the direction the owner called premium when it was tried
 * as a hero field in hero4 — it lost there because he wanted the colour in the
 * type, not because he disliked it.
 *
 * ONE VALUE TO CHANGE if he wants a different one; nothing else in the band
 * depends on the hue. Re-measure the three text colours if you move it: at
 * 94.5% lightness they all clear their floors comfortably, but the note is
 * --color-ink-2 and would be the first to go. */
:root {
  --tele-field: oklch(94.5% 0.018 62);
}

.tele {
  background: var(--tele-field);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.tele__inner {
  padding-block: var(--space-xl);
}

/* Title and actions share a row; the note runs its own full measure beneath.
 * It was title+note LEFT and actions RIGHT first, and that starved the prose:
 * the actions column is `auto`, the two buttons measure 577px together, and the
 * text column was left 334px — so the note set to five and six lines in a band
 * with 500px of unused measure sitting beside it. Putting only the title beside
 * the buttons gives the note the full --measure-lede and reads better anyway,
 * because the price and the action end up on the same line. */
.tele__head {
  display: grid;
  gap: var(--space-lg);
}

@media (min-width: 64rem) {
  .tele__head {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xl);
    align-items: center;
  }
}

.tele__title {
  font-size: var(--text-xl);
  line-height: 1.2;
}

.tele__note {
  max-width: var(--measure-lede);
  margin-top: var(--space-md);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.tele__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* A plain .btn standing beside a .btn--solid has to match its size class, and
 * left alone it does not: .btn is --text-sm at min-height 44 and .btn--solid is
 * --text-md at min-height 52, so the pair renders 49px against 63px. It looks
 * right on wide viewports purely by accident — .tele__actions is a flex row
 * with the default `align-items: stretch`, which
 * pulls the short one up to match. The moment they WRAP onto separate rows the
 * stretch stops and the mismatch appears, which is why it only showed at 320 to
 * 414. Sizing it properly is the fix; relying on stretch is not. */
.tele__actions .btn:not(.btn--solid) {
  font-size: var(--text-md);
  padding: var(--space-md) var(--space-xl);
  min-height: 52px;
}

/* ---- Visit -------------------------------------------------------------
 * Spec sheet left, map right. The map is the taller of the two, so the grid
 * is `start`-aligned rather than stretched: a stretched map would grow to
 * match nothing and a stretched details column would leave the hours table
 * floating in space. */
.visit {
  padding-block: 0 var(--space-2xl);
}

.visit__grid {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

@media (min-width: 64rem) {
  .visit__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--space-2xl);
    align-items: start;
  }
}

.visit__details {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
}

/* ---- "Also at this address" --------------------------------------------
 * /clinics/camden/ ONLY, and it is a second .visit__grid inside .visit rather
 * than a band of its own. The Myopia Clinic shares Camden's building and one
 * of its two units, so the sheet that resolves "#06-07/08 & #12-04" has to sit
 * where the reader meets that string — it was down in .svcs, two screens
 * lower, which put the answer well after the question.
 *
 * IT ADDS NO BAND, WHICH IS WHY IT IS SAFE TO MOVE. The page's tint run is
 * indigo → paper → paper-2 → paper → paper-3, and CLAUDE.md makes that a
 * page-level property to re-check after any reorder. Living inside .visit,
 * this block changes nothing about it; a section of its own between .visit and
 * .svcs would have had to find a tint that is neither of its neighbours'.
 *
 * NO HAIRLINE ABOVE THE HEADING. .clinic--single draws its own a line below
 * it, and a second rule ~40px higher is the two-edges-together mistake.
 * Whitespace does the separating instead. */
.visit__also {
  margin-top: var(--space-2xl);
}

/* One clinic, not six: it keeps its hairlines top and bottom so it still
 * reads as a row torn out of the homepage's sheet, but it must not take the
 * sheet's two-column split at 64rem — there is nothing to sit beside. */
.clinic--single {
  border-top: var(--rule-hair) solid var(--color-rule);
}

@media (min-width: 64rem) {
  .clinic--single {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Four facts stacked made this one clinic 408px tall inside a 445px column,
   * against a 502px map beside it — so the details column, not the map, drove
   * the whole section's height. Two-up brings it to ~300 and fills a column
   * that was running half empty. Directions keeps its own full-width row, as
   * it does on the home page's narrow layout. */
  .clinic--single .clinic__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-md);
  }

  .clinic--single .clinic__facts > div:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- Hours -------------------------------------------------------------
 * Modelled on .forty__table: bare hairlines, no panel, tabular figures. The
 * day column is `width: 1%`, which under auto table layout collapses it to
 * its own content and holds the gutter fixed — the proportional split opens a
 * gap wide enough that the eye loses the row crossing it. That was measured
 * on the exam-at-40 table and it is the same failure here. */
.hours {
  width: 100%;
  max-width: 30rem;
  border-collapse: collapse;
}

.hours caption {
  text-align: left;
  padding-bottom: var(--space-sm);
}

.hours th,
.hours td {
  padding-block: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-md);
  line-height: 1.4;
  text-align: left;
  vertical-align: baseline;
}

.hours tr:first-child th,
.hours tr:first-child td {
  border-top: var(--rule-hair) solid var(--color-rule);
}

.hours__day {
  width: 1%;
  padding-right: var(--space-xl);
  white-space: nowrap;
  font-weight: var(--weight-body);
  color: var(--color-ink-2);
}

.hours__time {
  font-weight: 500;
  color: var(--color-ink);
}

/* The closed row carries no colour. Colour would make it the loudest row in
 * the table, and the table is here to say when we are open. */
.hours__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  max-width: var(--measure-note);
  text-wrap: pretty;
}

/* Below 30rem the rows stack, and `width: 1%` has to go with them.
 * Measured before this existed: at 320 and 375 the day column collapsed to
 * min-content — 97px, the width of "holidays" — and "Sunday & public holidays"
 * set to THREE lines beside a one-line time. `width: 1%` is right on the
 * exam-at-40 table because those labels are two short words ("Under 40",
 * "40–54"); it is wrong the moment a label is a phrase.
 *
 * Stacking rather than widening the column: at 280px of content there is no
 * split that gives "Sunday & public holidays" one line AND leaves room for
 * "8.30am – 12.30pm" beside it. A label above its own value is what a phone
 * wants anyway. */
@media (max-width: 30rem) {
  .hours tr {
    display: grid;
    padding-block: var(--space-sm);
    border-bottom: var(--rule-hair) solid var(--color-rule);
  }

  .hours tr:first-child {
    border-top: var(--rule-hair) solid var(--color-rule);
  }

  .hours th,
  .hours td {
    width: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }

  .hours__day {
    font-size: var(--text-sm);
    padding-right: 0;
  }
}

/* ---- Fees table --------------------------------------------------------
 * Same bare-hairline shape as .hours — no panel, no fill — but the columns are
 * the other way round and that is the point. `width: 1%` collapses a column to
 * its own content: on the hours table that is right for "Saturday" and was
 * WRONG the moment a label became the phrase "Sunday & public holidays". Here
 * the phrases are the service names, so the collapse goes on the PRICE, which
 * is always two short words, and the service column takes all the slack.
 *
 * A <thead> here, unlike the exam-at-40 table, which dropped its heads because
 * its first column was an age scale that needed no label. "Service / Price"
 * earns its row: a bare pair of columns of money is ambiguous without it. */
/* THE FEES BLOCK GETS ITS OWN SURFACE. The services section runs 1808px on one
 * flat --color-paper-2 — head, six condition tiles, five service groups, then
 * this — and money is a different kind of content from a list of services. A
 * paper panel on the tinted band lifts it out without a new colour and without
 * a new section: the same idea as .forty__screening, which does exactly this
 * for the home page's eye-screening offer.
 *
 * Its own rule rather than a shared selector with .forty__screening, because
 * the widths genuinely differ — that panel caps at --measure-lede for a line of
 * prose, this one has to hold a 38rem table. Same three ingredients though:
 * paper fill, hairline all round, 2px accent on the leading edge. Keep them in
 * step by eye if either moves. */
.svc--fees {
  max-width: 42rem;
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  background: var(--color-paper);
  border: var(--rule-hair) solid var(--color-rule);
  border-inline-start: var(--rule-thick) solid var(--color-accent);
}

/* Inside the panel the table is already bounded, so its own cap would only
 * fight the padding. */
.svc--fees .fees {
  max-width: none;
}

@media (max-width: 40rem) {
  .svc--fees {
    padding: var(--space-md) var(--space-md) var(--space-sm);
  }
}

/* ---- Services ----------------------------------------------------------
 * --color-paper-2, the middle tint. The page runs 98.5% (visit) → 96.2%
 * (services) → 98.5% (doctors, panels, other clinics) → 93.5% (closing), so
 * the surface thickens toward the call to action the way the homepage's does
 * rather than sitting on one tint twice in a row. */
.svcs {
  padding-block: var(--space-2xl);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
}

.svc {
  margin-top: var(--space-xl);
}

/* The sub-head one level under a section's h2. It was .svc__title alone until
 * /clinics/camden/ grew an "Also at this address" heading inside .visit — same
 * job, same size, different section — so the SELECTOR grew rather than these
 * two declarations being copied under a second name. That copy is how .cclose
 * and .assure each drifted, and .cclose shipped a real button-size bug for it. */
.svc__title,
.visit__also-title {
  font-size: var(--text-lg);
  line-height: 1.25;
}

.svc__note {
  margin-top: var(--space-2xs);
  max-width: var(--measure-lede);
  font-size: var(--text-base);
}

/* Four items per tier, so FOUR COLUMNS at 64rem — one row each rather than
 * two. It was 2-up, which put every tier on two rows and cost the section
 * ~150px for nothing: at 244px a column the notes run to three lines instead
 * of two, and three short lines across a row of four reads better than two
 * rows of two with a hairline through the middle.
 *
 * The hairlines still align across the row even though the notes differ in
 * length — .index items are stretched to their row's height by the outer grid,
 * so every border-bottom lands on one line, and `align-content: start` on the
 * item keeps the CONTENT at the top rather than distributing the slack. Both
 * halves of that are needed; drop either and the row goes ragged. */
.index--pair {
  margin-top: var(--space-lg);
}

/* ---- Service groups ----------------------------------------------------
 * The five groups straitseyecommunity.com.sg publishes, with their four named
 * services each — twenty in all.
 *
 * LISTS, NOT TILES, and that is the whole reason twenty services fit. An
 * .index__item carries a 26px glyph and a full sentence and costs ~174px; a
 * group carries a name, one line of description and four short items in the
 * same space. Tiles for the four conditions, lists for the services: the two
 * shapes say "this is a thing you have" and "this is a thing we do".
 *
 * 3-up at 64rem leaves the last row with two of five filled, which is what an
 * index does — the hairline is on the ITEM, so a short final row simply stops. */
.groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

@media (min-width: 40rem) {
  .groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

@media (min-width: 64rem) {
  .groups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-xl);
  }
}

.group {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

/* The glyph sits on the name's line, exactly as .index__name's does, so a
 * group heading and a condition heading read as the same object. flex + center
 * rather than a grid column: the name may wrap to two lines and the glyph
 * should stay beside the first, not float in the middle of the pair. */
.group__name {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-md);
  line-height: 1.3;
}

.group__icon {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.group__note {
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-wrap: pretty;
}

/* The same marker .person__focus uses — a 5px accent square — so a list of
 * services and a list of a doctor's interests read as the same kind of list. */
.group__list {
  display: grid;
  gap: var(--space-3xs);
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.group__list li {
  display: flex;
  gap: 0.6em;
}

.group__list li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 0.62em;
  background: var(--color-accent);
}

/* THE A&E LINE. Not decorative and not fine print: it exists because the page
 * advertises eye injuries at a clinic that shuts at 5.30pm, and someone with a
 * chemical splash reading this at 7pm needs to be sent to a hospital rather
 * than to a booking form.
 *
 * So it is --color-ink-2 rather than --color-muted and it carries a <strong>
 * lead clause — one step LOUDER than the note below it, which is the opposite
 * of how the rest of the page's small print behaves. It sits directly under
 * the conditions grid, beside the tile that makes it necessary. If the eye
 * injuries tile is ever removed, remove this with it; do not leave it hanging,
 * and do not demote it while the tile stays. */
.svc__urgent {
  margin-top: var(--space-md);
  max-width: var(--measure-lede);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  text-wrap: pretty;
}

.svc__urgent strong {
  font-weight: 600;
  color: var(--color-ink);
}

/* The line that accounts for the conditions this clinic does not see. --text-sm
 * and muted, so it reads as a note under the groups rather than a sixth one. */
.svc__more {
  margin-top: var(--space-md);
  max-width: var(--measure-lede);
  font-size: var(--text-sm);
  color: var(--color-muted);
  text-wrap: pretty;
}

/* The fee note's <strong> — "depending on your policy's coverage". WEIGHT
 * ALONE DOES NOT CARRY ON --color-muted, so it lifts one step to
 * --color-ink-2, the same move .svc__urgent strong makes from ink-2 to ink.
 * 600 and not the UA's bolder: IBM Plex Sans is requested at 400/500/600
 * only, so 700 here would be a synthesised bold sitting beside real ones.
 *
 * One step, not two. --color-ink would put this caveat above .fees__basis
 * ("All fees shown are nett") directly beneath it, and that line is the one
 * qualifying the numbers themselves. Emphasis, not the loudest thing here. */
.svc__more strong {
  font-weight: 600;
  color: var(--color-ink-2);
}

/* SIX tiles now, so THREE columns — 3 + 3 fills two clean rows where 4-up
 * would leave 4 + 2 and a half-empty second row. It was 4-up when there were
 * four; the column count follows the item count, not the other way round. */
@media (min-width: 64rem) {
  .index--pair {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-2xl);
  }
}

/* ---- Doctors -----------------------------------------------------------
 * .docs AND .docs .pcp MOVED TO site.css when /coming-soon/ became a second
 * caller of includes/clinic-doctors.php — a component used by more than one
 * page type belongs there. Nothing clinic-specific replaced them.
 *
 * .docs__tier went with them, deleted rather than moved: the include heads
 * both tiers with .pcp__title and no markup has carried the class since. */
/* ---- Insurance panels --------------------------------------------------
 * Nine logos, so the grid is 3x3 at EVERY width — nine is 3x3 and a three
 * column grid never leaves a ragged last row to explain away.
 *
 * It was nine-across first, and only rendering it showed why that fails: at
 * ~124px a cell "MSIG x InovaCare", IHP's tagline and "ALLIANCE PHARM" are
 * unreadable stamps, and Allianz overflowed its cell because its 110px cap was
 * wider than the cell's 100px content box. The document reports neither.
 *
 * The cells are hairlines with square corners, which is the only treatment
 * that belongs here: the source strip is 16px radii and soft shadows, which is
 * draft B's language, and these nine logos arrive in wildly different shapes —
 * three solid colour tiles, six free-standing marks — so a common frame is
 * structural rather than decorative. `place-items: center` and a min-height do
 * the optical alignment the shapes cannot do for themselves. */
/* ---- Fees and insurance ------------------------------------------------
 * One section, because they answer one question. They used to sit 2,454px
 * apart — the fee table at the foot of the services section, the insurer logos
 * four sections below — with the whole doctors section between them.
 *
 * --color-paper-2 so the fee table's paper panel keeps the lift it had inside
 * .svcs, and so the page alternates paper / paper-2 down its length instead of
 * running two tinted bands together. The sequence is now indigo · greige ·
 * paper · paper-2 · paper · paper-2 · paper-3 · paper · paper-3. */
.money {
  padding-block: var(--space-2xl) var(--space-3xl);
  background: var(--color-paper-2);
  border-block: var(--rule-hair) solid var(--color-rule);
}

/* THE INSURANCE BLOCK NEEDS MORE AIR THAN A NORMAL SUB-BLOCK, because the thing
 * above it is a CLOSED OBJECT: the fee table sits in a bordered paper panel, so
 * its bottom edge is a hard line, and a following heading 64px away read as
 * belonging to the panel rather than starting something new.
 *
 * The .provenance pattern — space, hairline, space — which is how this design
 * already separates a sub-block from what precedes it. --space-3xl before the
 * rule rather than --space-xl, so the hairline is nowhere near the panel's own
 * border; two rules close together is the mistake this is avoiding, not making.
 * 96px of air, the hairline, then 24px to the heading. */
.money__panels {
  margin-top: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ---- Concern picker ----------------------------------------------------
 * THE TINT IS OVERRIDDEN ON THE CLINIC PAGES, and removing a section is what
 * forced it. site.css gives .picker --color-paper-3, the page's deepest tint,
 * which was fine while "Our other clinics" sat between it and the closing band.
 * With that section gone the picker and .cclose were BOTH paper-3 and adjacent
 * — two bands on one tint read as a single slab, which is the argument the
 * exam-at-40 band's tint note already makes.
 *
 * On paper the run reads paper-2 · paper · paper-3 down to the call to action,
 * which is the documented intent: the surface thickens toward the CTA. Scoped
 * by living in clinic.css, so the home page's picker is untouched. */
/* THE TYPING BUBBLE IS DECORATION, AND ON A PHONE IT COSTS SCROLL.
 * It is already aria-hidden, so nothing is lost to a screen reader; the chips
 * beneath it are the functional half and they say what they do. Removed at the
 * owner's request. display:none also stops the caret blink, which is the page's
 * only infinite animation — the JS typer keeps mutating hidden text, which is
 * cheap, and guarding it would mean editing shared footer.php.
 *
 * 48rem, NOT 40. The page is still in its stacked layout at 768 — the hero
 * stacks, the visit grid is one column — so 768 is mobile as far as this page
 * is concerned, and the band costs the same 132px there. It shipped at 40rem
 * and the owner asked for it a second time; what he was actually seeing was
 * the CSS cache, not the breakpoint, but the wider step is what he asked for
 * both times and it is the one that holds on a tablet in portrait. */
@media (max-width: 48rem) {
  .picker__bubble {
    display: none;
  }
}

.picker {
  background: var(--color-paper);
}

/* AIR BELOW THE BAND, ON THE BAND — because .closing deliberately has no top
 * padding and must not be given one (see the note on .closing in site.css).
 * On the home page the closing heading gets its 64px from the .clinics shell
 * above it, which is plain page surface; here the neighbour is a bordered band
 * and its --space-2xl padding sits INSIDE the hairline, so "Come and see us in
 * Bedok" measured 0px below a hard rule at 320 / 390 / 768 / 1440. The margin
 * is the same --space-2xl, so the closing head sits at the same height on both
 * pages rather than drifting between them. Applies to any bordered band that
 * ends up directly above .closing. */
.picker {
  margin-bottom: var(--space-2xl);
}

/* ---- Other clinics -----------------------------------------------------
 * The homepage's .sheet, unchanged. Five rows rather than six, so the 2-up
 * grid leaves one cell empty on the last row — which is what a spec sheet
 * does and needs no correction. */
.others {
  padding-block: 0 var(--space-2xl);
}