/* ==========================================================================
   solutions-hair-and-beauty.css — /solutions/hair-and-beauty (solutions wave A,
   2026-09-04; rebuilt 2026-09-05 evening on the two standing rules at the end of
   docs/briefs/PIPELINE.md §2). Loads after feature-v2.css, feature-v3.css,
   home.css, hero-film.css and widgets-real.css.

   Six things worth knowing before editing:

   1. The hero is HeroFilm, not the live console, and nothing here touches
      .hero-film, .moment or .pp--tl except the two rules at the foot of this
      file: that markup is the contract with hero-film.css and feature-v2.js.
   2. The week is one day-sheet rail, not four alternating rows. A hairline runs
      down a 96px gutter; on it sits a day tab (the day over the clock time, the
      way a salon's day sheet reads); beside the tab are two sentences and one
      product screen. Sat / Sun / Mon / Wed reads down the rail before any of the
      words do. The rail is drawn per beat, not as one absolute line, so it
      begins at the first tab's centre and stops at the last tab's centre rather
      than dangling past them. The uppercase tracked day label is allowed here
      and nowhere else on the site, because it labels a real sequence.
   3. Every beat has the same rhythm on purpose: a timeline whose rows alternate
      is not a timeline. The variety is in the four screens, which are four
      genuinely different product surfaces. Do not reintroduce alternating
      left/right rows.
   4. Each screen is a port of real product code, named in the page's header
      comment. Where a value here looks odd against the rest of the site it is
      almost always the product's: the 42px react-select control with its 1px
      #cccccc border and 4px radius, the 25px provider mark with its label 10px
      in, the board's 27px rank disc and 40px avatar, the 6px chip radius, the
      18px channel badge on an inbox avatar, the 32px outline button with a 16px
      sparkle.
   5. The board renders the product's own <=880px arrangement (index.module.scss
      line 897 onward): rank, avatar, name and chevron on the first line, the
      metric slots on a second line under a hairline. That is deliberate, not a
      shortcut. The ported card is never 880px wide on this page, so the wide
      arrangement would truncate every name to nothing.
   6. Two site rules override the product inside those ports, and nothing else
      does. Nothing renders under 13px (the product's captions are 11.5 to
      12.5px), and muted text is #5b6076 (the product's #667085 and #6b7280 fail
      the floor on the tints these screens use). #5b6076 measures 6.21:1 on
      white, 5.80 on --v2-card, 5.70 on --ghost, 5.65 on #f3f4f6 and 5.58 on
      #e6f7ea. Do not lighten it back. The one place a lighter grey survives is
      inside .hb-strip, which is the product's own widget CSS (widgets-real.css)
      and is not ours to restyle; QUESTIONS #6 carries it.
   ========================================================================== */

/* ---------- the strip: six salon marks ---------- */
.hb-page .v2-logos ul { justify-content: space-between; gap: 32px; }
.hb-page .v2-logos img { max-height: 24px; }
.hb-page .v2-logos img.is-tall { max-height: 44px; }
.hb-page .v2-logos img[alt="The Lash Lounge"] { max-height: 28px; }
.hb-page .v2-logos img[alt="Frenchies"] { max-height: 17px; }

/* the shared blockquote carries a 40px browser default margin that nothing else resets */
.hb-page .tq blockquote { margin: 0; }

/* ==========================================================================
   THE WEEK: the day-sheet rail
   ========================================================================== */
.hb-week { --hb-rail: 96px; --hb-gap: clamp(24px, 2.8vw, 44px); --hb-pad: clamp(30px, 3.4vw, 46px); --hb-mark: 24px; }
.hb-head {
  display: grid; grid-template-columns: var(--hb-rail) minmax(0, 1fr); column-gap: var(--hb-gap);
  margin-bottom: clamp(32px, 4vw, 54px);
}
.hb-head > * { grid-column: 2; max-width: 730px; }
.hb-head .sub { max-width: 620px; }

.hb-rail { margin: 0; padding: 0; list-style: none; }
.hb-beat {
  position: relative;
  display: grid;
  grid-template-columns: var(--hb-rail) minmax(0, .8fr) minmax(0, 1.2fr);
  column-gap: var(--hb-gap);
  align-items: start;
  padding: var(--hb-pad) 0;
}
.hb-beat:first-child { padding-top: 0; }
.hb-beat:last-child { padding-bottom: 0; }
/* the hairline, drawn per beat so it begins and ends at a tab */
.hb-beat::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--hb-rail) / 2 - 1px);
  width: 2px; border-radius: 2px; background: #dfe5ff;
}
.hb-beat:first-child::before { top: var(--hb-mark); }
.hb-beat:last-child::before { bottom: auto; height: calc(var(--hb-pad) + var(--hb-mark)); }

/* the day tab: the day over the clock time, seated on the hairline */
.hb-mark { grid-column: 1; grid-row: 1 / 40; align-self: start; display: flex; justify-content: center; }
.hb-tab {
  position: relative; z-index: 1;
  width: 66px; padding: 7px 0 8px; border-radius: 13px;
  display: grid; justify-items: center; gap: 2px;
  background: #fff; box-shadow: 0 0 0 1px var(--v2-line);
  text-align: center;
}
.hb-tab b {
  font: 700 13px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}
.hb-tab em { font-style: normal; font: 400 13px/1.2 var(--font-body); color: #5b6076; white-space: nowrap; }

.hb-copy { grid-column: 2; }
.hb-copy h3 {
  font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.hb-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.hb-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.hb-links a, .hb-foot a {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--blue); text-decoration: none;
}
.hb-links a { font: 600 14.5px/1.4 var(--font-display); }
.hb-foot a { display: inline; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.hb-links a:hover { text-decoration: underline; }
.hb-links .icon { width: 15px; height: 15px; }

.hb-foot {
  margin-top: clamp(32px, 3.6vw, 46px);
  margin-left: calc(var(--hb-rail) + var(--hb-gap));
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--v2-line);
  max-width: 66ch;
  font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty;
}

/* ==========================================================================
   THE FOUR SCREENS. One frame, four ported surfaces.
   ========================================================================== */
.hb-screen {
  grid-column: 3;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow);
}

/* the marks: a provider initial in a white disc, for a system with no sprite symbol. Zenoti's initial is left in the
   page's own ink rather than a guessed brand colour, because no Zenoti asset exists in this repo. */
.hb-mk {
  flex: none; width: 25px; height: 25px; border-radius: 7px;
  display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line);
  font-style: normal; font: 700 13px/1 var(--font-display); color: #3f4560;
}
.hb-mk--c { color: var(--blue); }
.hb-mk--c .icon { width: 15px; height: 15px; }
/* a real vendor mark sits on the same white disc, at the Cloutly mark’s size and in its own brand colour */
.hb-mk .icon, .hb-mk .mk-logo { width: 15px; height: 15px; }
.hb-mk .mk-logo { display: block; object-fit: contain; }

/* the head the automation screen carries (AutomationsDetailsModal: ModalTitle, then "Selected location:") */
.hb-scr-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--v2-line);
}
.hb-scr-t { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.hb-scr-loc { font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.hb-scr-loc b { font-weight: 600; color: var(--ink); }

/* ---------- 1 · the Zenoti automation (AutomationsDetailsModal + AutomationSummary + SelectLabel + Select) ----------
   "When this happens:" / "Do this:" are the summary's own labels. The control is react-select's: a 42px row with a 1px
   #cccccc border and a 4px radius, the 25px provider mark with its label 10px in, and the green IconCheckCircle
   (#009900, 16px) that marks an authorised trigger. The product's FormControl is 300px wide, so the controls here are
   capped at 300px too. The delay select is drawn OPEN with an empty control, which is react-select's own state under
   `placeholder={null}`: it shows that the six options are the customer's choice without printing a delay of ours. */
.hb-auto-l { margin: 14px 0 7px; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.hb-sel {
  display: flex; align-items: center; gap: 10px;
  max-width: 300px; min-height: 42px; padding: 6px 12px;
  border: 1px solid #cccccc; border-radius: 4px; background: #fff;
  font: 400 14.5px/1.35 var(--font-body); color: var(--ink);
}
.hb-sel > span { min-width: 0; }
.hb-ok { flex: none; width: 16px; height: 16px; margin-left: auto; color: #009900; }
.hb-auto-p { margin-top: 9px; padding-left: 15px; }
.hb-auto-pl { display: block; margin-bottom: 5px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.hb-sel--open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-color: #b3b3b3; }
.hb-sel--open > span:first-child { flex: 1; }
.hb-sel--open .hb-chev { color: #5b6076; }
/* react-select draws a 1px indicator separator before the dropdown arrow; without it an empty control reads as a
   rendering fault rather than as the open menu it is */
.hb-sep { flex: none; width: 1px; height: 20px; margin-left: auto; background: #cccccc; }
.hb-opts {
  margin: 0; padding: 4px 0; list-style: none;
  max-width: 300px;
  border: 1px solid #cccccc; border-top: 0; border-radius: 0 0 4px 4px; background: #fff;
  box-shadow: 0 4px 11px rgba(0, 0, 0, .1);
}
.hb-opts li { padding: 7px 12px; font: 400 14px/1.35 var(--font-body); color: var(--ink); }
.hb-opts li + li { border-top: 1px solid #f4f4f6; }

/* ---------- 2 · Staff recognition (Board + BoardRow + index.module.scss + bits.js) ----------
   The product's card head, its rows with no header row and no sort control, its value-over-caption slots, its chips
   and its trailing chevron. The rank-1 disc is the product's color-mix of the primary at 12% behind text at 60%,
   resolved to hex (#e0e8ff / #002499). The arrangement is the product's own <=880px one; see note 5 above. */
.hb-scr--lb { padding: 0; overflow: hidden; }
.hb-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 18px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.hb-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.hb-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.hb-lb-r {
  display: grid; grid-template-columns: 30px 38px minmax(0, 1fr) auto;
  align-items: center; gap: 11px; row-gap: 12px;
  padding: 14px 15px;
}
.hb-lb-r + .hb-lb-r { border-top: 1px solid #e7e9f2; }
.hb-lb-rank {
  font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums;
}
.hb-lb-rank b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%;
  background: #e0e8ff; color: #002499; font-weight: 800;
}
.hb-lb-av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 14px/1 var(--font-display);
}
.hb-lb-who { min-width: 0; }
.hb-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-lb-chev { grid-row: 1; grid-column: 4; width: 17px; height: 17px; color: #5b6076; transform: rotate(-90deg); }
/* the metric slots on their own line, under a hairline: the product's own narrow arrangement */
.hb-lb-m {
  grid-row: 2; grid-column: 1 / -1;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding-top: 11px; border-top: 1px solid #e7e9f2;
}
.hb-lb-slot { min-width: 0; text-align: left; }
.hb-lb-slot > b {
  display: flex; align-items: center; gap: 5px;
  font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums;
}
.hb-lb-slot > b i { font-style: normal; color: #f5a623; }
.hb-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.hb-lb-flag { display: flex; justify-content: flex-end; }
.hb-chip {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: #f1f5f9; color: #475569; font: 500 13px/1.4 var(--font-display); white-space: nowrap;
}
.hb-chip.is-up { background: #e6f7ea; color: #0c7a52; }

/* ---------- 3 · the booking page, with the real Testimonial Avatars markup under its button ---------- */
.hb-scr--book { padding: 20px; }
.hb-book-h { font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.hb-book-h span { color: #5b6076; font-weight: 400; }
.hb-svc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--v2-card);
}
.hb-svc span { min-width: 0; font: 400 13px/1.35 var(--font-body); color: #5b6076; }
.hb-svc b { display: block; font: 600 14.5px/1.35 var(--font-display); color: var(--ink); }
.hb-svc em { font-style: normal; font: 700 15px/1.2 var(--font-display); color: var(--ink); }
.hb-btn {
  display: block; margin-top: 14px; padding: 13px 18px; border-radius: 12px;
  background: var(--ink); color: #fff; text-align: center;
  font: 600 15px/1.2 var(--font-display);
}
.hb-strip { margin-top: 4px; }

/* ---------- 4 · the inbox and Draft with AI (InboxHeader + CustomerListItem + ChannelBadgeAvatar) ----------
   The product's h1 and its amber "N need response" pill (#fff4d6 on #b07a00), the scope line it prints beside them,
   the three tabs, 16px rows, the 40px avatar with the 18px channel badge on its corner, the 7px amber needs-response
   dot, the star row, the "+N more" badge, and the composer's 32px outline button with a 16px sparkle and the tone as a
   dropdown. The composer sits under the selected REVIEW: Draft with AI does not render on a DM thread (§B1). */
.hb-scr--inb { padding: 0; overflow: hidden; }
.hb-inb-h {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px;
  padding: 14px 16px 10px;
}
.hb-inb-t { display: inline-flex; align-items: center; gap: 9px; }
.hb-inb-t b { font: 700 17px/1.2 var(--font-display); letter-spacing: -.02em; color: #111827; }
.hb-need {
  padding: 2px 10px; border-radius: 999px; background: #fff4d6; color: #8a5f00;
  font-style: normal; font: 600 13px/1.5 var(--font-display); font-variant-numeric: tabular-nums;
}
.hb-scope { font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.hb-tabs { display: flex; align-items: center; gap: 6px; padding: 0 16px 12px; border-bottom: 1px solid #f3f4f6; }
.hb-tabs b, .hb-tabs i {
  padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display);
}
.hb-tabs b { background: #eef2ff; color: var(--blue); }
.hb-tabs i { color: #5b6076; }
.hb-inb { margin: 0; padding: 0; list-style: none; }
.hb-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.hb-inb > li.is-sel { background: rgba(0, 61, 255, .05); }
.hb-inb-av {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--font-display);
}
.hb-inb-mk {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #e5e7eb;
}
.hb-inb-mk .icon { width: 12px; height: 12px; }
.hb-inb-b { min-width: 0; flex: 1; }
.hb-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.hb-inb-1, .hb-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-inb-1 em { margin-left: auto; padding-left: 10px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.hb-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.hb-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.hb-inb-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.hb-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }
.hb-more {
  margin-left: auto; padding: 1px 8px; border-radius: 6px; background: #f1f5f9; color: #475569;
  font-style: normal; font: 500 13px/1.5 var(--font-display); white-space: nowrap;
}
.hb-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; }
.hb-cbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px #d1d5db;
  font: 500 13.5px/1 var(--font-display); color: #374151;
}
.hb-cbtn .icon { width: 16px; height: 16px; }
.hb-chev { width: 13px; height: 13px; }

/* ---------- proof: the h2 and the shared quote on one column ---------- */
.hb-page .hb-week-sec { padding-bottom: clamp(40px, 4vw, 56px); }
.hb-page .hb-proof { padding: clamp(40px, 4vw, 56px) 0 0; }
.hb-page .hb-proof .col > .h { max-width: 780px; margin: 0 auto; }
.hb-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(48px, 5vw, 72px); }
.hb-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.hb-page .tq figcaption { margin-top: 26px; }
.hb-proof-h { max-width: 780px; }

/* ---------- breakpoints ----------
   Two steps, the same two as /solutions/professional-services, because the rail is one system. Under 1180px the screen
   drops below its copy but the rail stays, because the rail is the page's device. Under 992px the rail flattens and the
   day tab goes inline above the heading. */
@media (max-width: 1180px) {
  .hb-beat { grid-template-columns: var(--hb-rail) minmax(0, 1fr); }
  .hb-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .hb-week { --hb-rail: 0px; }
  .hb-head { display: block; }
  .hb-beat { grid-template-columns: 1fr; padding: clamp(28px, 3.4vw, 40px) 0; }
  .hb-beat::before { display: none; }
  .hb-beat + .hb-beat { border-top: 1px solid var(--v2-line); }
  .hb-copy, .hb-screen { grid-column: 1; }
  .hb-mark { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-bottom: 14px; }
  .hb-tab {
    width: auto; padding: 5px 13px; border-radius: 999px;
    grid-auto-flow: column; align-items: baseline; gap: 8px;
    background: var(--ghost); box-shadow: none;
  }
  .hb-copy h3 { max-width: 26ch; }
  .hb-copy p { max-width: 62ch; }
  .hb-screen { max-width: 560px; }
  .hb-foot { margin-left: 0; }
}
@media (max-width: 620px) {
  .hb-screen { padding: 14px; }
  .hb-scr--lb, .hb-scr--inb { padding: 0; }
  .hb-scr--book { padding: 16px; }
  .hb-lb-m { flex-wrap: wrap; gap: 10px 18px; }
  .hb-lb-flag { justify-content: flex-start; }
  .hb-inb > li { padding: 13px 12px; }
  .hb-comp { padding: 12px; }
  .hb-more { margin-left: 0; }
}

/* ---------- the hero portrait between 620 and 991 ----------
   hero-film.css's tablet rule sets `right: 6px` on .pp--tl but never clears the desktop `left: 28px`, so left wins and
   the portrait lands in the white space beside the centred film rather than on its corner. Every scene hero has this;
   it is corrected here for this page only, because hero-film.css is shared with the home page and the other solutions
   pages and a change there would move all of them. QUESTIONS.md carries it for the orchestrator.
   min(50%, 260px) is half the film's own width (min(100%, 520px)), so this is the film's left edge less a 14px
   overhang, whatever the column measures. */
@media (min-width: 620px) and (max-width: 991px) {
  .hb-page .hero-moment--scene .pp--tl { left: calc(50% - min(50%, 260px) - 14px); right: auto; top: 96px; }
}