/* ==========================================================================
   solutions-hospitality.css — /solutions/hospitality (Copperpot Kitchen).
   Rebuilt 2026-09-05 evening on the two standing rules at the end of
   docs/briefs/PIPELINE.md §2 (under 800 words; every mock is a port of the
   real product) and Lachlan's ruling that a timeline is a device, not an
   essay. Loads after feature-v2.css, home.css and hero-film.css.

   Six things worth knowing before editing:

   1. The hero is HeroFilm. Nothing here touches .hero-film, .moment, .m-card
      or .pp--tl: that markup is the contract with hero-film.css and
      feature-v2.js.
   2. The week is one rail, not three alternating rows. A hairline runs down a
      96px gutter and a service stub sits on it reading the day over the time,
      so Fri 9.02 pm to Tue 8.15 pm reads down the rail before any of the words
      do. The rail is drawn per beat, not as one absolute line, so it starts
      and stops at the first and last stub rather than dangling past them.
      The stub is a rounded rectangle, not a disc: /solutions/professional
      -services owns the disc, and no two pages should read the same.
   3. Every beat has the same rhythm on purpose. The variety is in the three
      screens, which are three genuinely different product surfaces. Do not
      reintroduce alternating left/right rows or a full-width breakout row.
   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 30px provider mark and the labels
      beside it, the react-select 4px radius on a 1px #d1d5db border, the
      inbox's 40px avatar with its 18px source badge, the Signals grid's 4px
      border-spacing and 30px cells on a single coral alpha ramp, the
      LocationPicker's 250px popover.
   5. Three site rules override the product inside those ports, and nothing
      else does. Nothing renders under 13px (this chrome runs 9.5 to 12px in
      the product). Small muted text is #5b6076, which measures 6.21:1 on
      white, 5.80 on --v2-card, 5.70 on --ghost and 5.56 on #eef2ff; the
      product's #667085, #75757f and #6b7280 fail on those tints. Filled stars
      are #a1670b, not the product's #f5a623, which measures 1.9:1 and fails
      the 3:1 non-text floor. Do not lighten any of the three back.
   6. Colour still commits late: the only tints before the proof band are
      #eef2ff (a Cloutly surface), the coral ramp inside the Signals cells
      (the product's own encoding, with the number printed in every cell so colour is redundant).
   ========================================================================== */

.hos-page .hos-obj { padding-top: clamp(48px, 5vw, 72px); }

/* ---------- the logo strip: six marks, matched by eye, not by box ----------
   .v2-logos caps every logo at 26px, which sizes the box and not the mark. */
.hos-logos ul { justify-content: space-between; gap: 28px; }
.hos-logos .hos-lg-merivale { max-height: 26px; }
.hos-logos .hos-lg-sorsi { max-height: 46px; }
.hos-logos .hos-lg-francescas { max-height: 25px; }
.hos-logos .hos-lg-word { max-height: 16px; }

/* ==========================================================================
   THE WEEK: the rail
   ========================================================================== */
.hos-week { --hos-rail: 96px; --hos-gap: clamp(26px, 3vw, 44px); --hos-pad: clamp(30px, 3.4vw, 46px); --hos-half: 22px; }
.hos-head {
  display: grid; grid-template-columns: var(--hos-rail) minmax(0, 1fr); column-gap: var(--hos-gap);
  margin-bottom: clamp(34px, 4vw, 56px);
}
.hos-head > * { grid-column: 2; max-width: 760px; }
.hos-head .sub { margin-top: 14px; }

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

/* the stub: the day over the time, sitting on the rail */
.hos-mark { grid-column: 1; grid-row: 1 / 40; align-self: start; display: flex; justify-content: center; }
.hos-stub {
  position: relative; z-index: 1;
  display: grid; gap: 1px; place-items: center;
  min-width: 72px; padding: 6px 9px 7px; border-radius: 12px;
  background: #fff; box-shadow: 0 0 0 1px var(--v2-line);
  text-align: center;
}
.hos-stub b { font: 600 13.5px/1.25 var(--font-display); color: var(--blue); }
.hos-stub em { font-style: normal; font: 500 13px/1.25 var(--font-display); color: #5b6076; white-space: nowrap; }

/* grid items default to min-width:auto, so the Signals table would push the card, the beat and the page wider than
   a phone. These keep the overflow inside .hos-gwrap where it belongs. */
.hos-copy, .hos-screen, .hos-gwrap { min-width: 0; }

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

/* the Signals gate lives under its beat's link, because §A2 forbids the page from ever reading as "included" */
.hos-copy .hos-note {
  margin-top: 18px; padding: 13px 15px; border-radius: 12px; background: var(--ghost);
  font: 400 14px/1.55 var(--font-body); color: var(--v2-body);
}

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

/* ==========================================================================
   THE THREE SCREENS. One frame, three ported surfaces.
   ========================================================================== */
.hos-screen {
  grid-column: 3;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow);
  font-family: var(--font-body);
}
.hos-chev { width: 13px; height: 13px; flex: none; color: #5b6076; }

/* ---------- 1 · the Square settings screen (SquareOrders.js) ----------
   Its two h3s, its 30px provider mark in a left gutter with the labels beside it, "When this happens:" over the
   webhook checkboxes, then the Cloutly mark over "Start my review campaign:" and "Send invite after:" with the
   number-and-unit pair. The select borrows react-select's 4px radius on a 1px #d1d5db border, which is the border
   the product writes inline on that number input. */
.hos-scr-h { padding-bottom: 13px; border-bottom: 1px solid var(--v2-line); }
.hos-scr-h b { display: block; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.hos-scr-h span { display: block; margin-top: 3px; font: 400 13.5px/1.4 var(--font-body); color: #5b6076; }
.hos-arow { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding-top: 15px; }
.hos-pv {
  flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line);
}
.hos-pv .icon { width: 17px; height: 17px; }
.hos-pv--c .icon { color: var(--blue); }
.hos-abody { min-width: 0; }
.hos-al { font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.hos-al + .hos-al, .hos-sel + .hos-al, .hos-delay + .hos-al { margin-top: 12px; }
.hos-cb { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.hos-cb i {
  flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #b9bdd0; font-style: normal;
}
.hos-cb.is-on i {
  background: var(--blue); box-shadow: none;
  color: #fff; font: 700 13px/16px var(--font-display); text-align: center;
}
.hos-sel {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 7px; min-height: 40px; padding: 6px 12px;
  border: 1px solid #d1d5db; border-radius: 4px; background: #fff;
  font: 400 14.5px/1.35 var(--font-body); color: var(--ink);
}
.hos-delay { display: flex; align-items: flex-start; gap: 10px; }
.hos-num {
  width: 74px; min-height: 40px; margin-top: 7px; padding: 8px 12px;
  border: 1px solid #d1d5db; border-radius: 4px;
  font: 400 14.5px/1.35 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums;
}
.hos-delay .hos-sel { flex: 1; }

/* ---------- 2 · the inbox and Draft with AI (CustomerListItem + InboxHeader + MagicResponseButtonGroup) ----------
   The product's 16px row padding, its 40px avatar with the 18px source badge on its corner, the amber needs-response
   dot, the "Needs action" pill, the star row and the composer's 32px outline button with a 16px sparkle. */
.hos-scr--inb { padding: 0; overflow: hidden; }
.hos-inb-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 14px 16px; border-bottom: 1px solid #f3f4f6;
}
.hos-tabs { display: inline-flex; align-items: center; gap: 6px; }
.hos-tabs b, .hos-tabs i {
  padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display);
}
.hos-tabs b { background: #eef2ff; color: var(--blue); }
.hos-tabs i { color: #5b6076; }
.hos-scope { font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.hos-inb { margin: 0; padding: 0; list-style: none; }
.hos-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.hos-inb > li.is-sel { background: rgba(0, 61, 255, .05); }
.hos-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);
}
.hos-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;
}
.hos-inb-mk .icon { width: 12px; height: 12px; }
.hos-inb-b { min-width: 0; }
.hos-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.hos-inb-1, .hos-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hos-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; }
.hos-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.hos-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.hos-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; }
.hos-pill {
  padding: 1px 8px; border-radius: 999px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca;
  color: #b91c1c; font-style: normal; font: 600 13px/1.5 var(--font-display);
}
/* the product's #f5a623 measures 1.9:1 on white and fails the non-text floor; the empty stars stay a quiet grey */
.hos-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #c7cad8; }
.hos-stars b { font-weight: 400; color: #a1670b; }
.hos-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; }
.hos-btn {
  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;
}
.hos-btn .icon { width: 16px; height: 16px; }
.hos-comp em { font-style: normal; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* ---------- 3 · Signals, "Where it's happening", By venue (SignalsGrid venueBody + SignalsPage.module.scss) ----------
   The product's panel: a wrapped head with the range and two segmented controls, a 4px-spaced table whose cells are
   30px rounded 8px on one coral alpha ramp with the count printed in every cell, the venue-level `thin` pill, a
   trailing Reviews column, and the panel foot. Sizes are lifted 13px where the product runs 9.5 to 12px. */
.hos-scr--grid { padding: 0; }
.hos-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 15px 18px 12px; }
.hos-ph h4 { margin: 0; font: 700 14.5px/1.3 var(--font-display); color: var(--ink); }
.hos-ph-sub { font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.hos-spacer { flex: 1 1 0; }
.hos-seg {
  display: inline-flex; align-items: center; padding: 3px; border-radius: 999px;
  background: #f6f8ff; box-shadow: inset 0 0 0 1px #e3e8f8;
}
.hos-seg b, .hos-seg i {
  padding: 4px 11px; border-radius: 999px; font-style: normal; font: 600 13px/1.35 var(--font-display); color: #5b6076;
}
.hos-seg b { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 13, 25, .1); }
.hos-gwrap { overflow-x: auto; padding: 0 18px; }
.hos-grid { width: 100%; border-collapse: separate; border-spacing: 4px; }
.hos-grid th {
  padding: 0 0 5px; font: 700 13px/1.25 var(--font-display); letter-spacing: .03em;
  color: #5b6076; text-align: center;
}
.hos-grid .hos-rowhead { width: 96px; }
.hos-grid .hos-revhead { width: 62px; }
.hos-grp td { padding: 10px 0 2px; font: 700 13px/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: #5b6076; }
.hos-vn { width: 96px; padding-right: 8px; font: 500 13px/1.3 var(--font-display); color: var(--ink); white-space: nowrap; }
.hos-thin {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: rgba(217, 119, 6, .12); color: #8a5300;
  font: 700 13px/1.35 var(--font-display); letter-spacing: .04em; text-transform: uppercase;
}
.hos-cell {
  height: 30px; border-radius: 8px; text-align: center;
  font: 700 13px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums;
}
.hos-cell.is-thin { font-style: italic; color: #5b6076; }
.hos-rev { padding-left: 8px; text-align: right; font: 400 13px/1.3 var(--font-body); color: #5b6076; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hos-rev.is-thin { color: #8a5300; }
.hos-pf { padding: 12px 18px 15px; font: 400 13px/1.5 var(--font-body); color: #5b6076; }
.hos-pf b { color: #8a5300; font-weight: 700; }

/* ==========================================================================
   PROOF: the sentence, and the location filter it describes (LocationPicker.js)
   ========================================================================== */
.hos-proof-in { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: clamp(32px, 6vw, 80px); align-items: center; }
.hos-proof .hos-head { display: block; margin-bottom: 0; }
.hos-lp { font-family: var(--font-body); }
.hos-lp-btn {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #d1d5db;
  font: 500 13.5px/1 var(--font-display); color: #374151;
}
.hos-lp-btn > .icon:first-child { width: 15px; height: 15px; color: #5b6076; }
.hos-lp-btn .hos-chev { margin-left: auto; }
.hos-lp-pop {
  width: 250px; margin-top: 6px; border-radius: 8px; background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), 0 10px 30px rgba(15, 13, 25, .1);
  overflow: hidden;
}
.hos-lp-in { padding: 11px 13px; border-bottom: 1px solid #f3f4f6; font: 400 13.5px/1.3 var(--font-body); color: #5b6076; }
.hos-lp-pop ul { margin: 0; padding: 5px; list-style: none; }
.hos-lp-pop li {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px;
  font: 500 13.5px/1.3 var(--font-display); color: var(--ink);
}
.hos-lp-pop li i { flex: none; width: 14px; font-style: normal; font-weight: 700; color: var(--blue); }
.hos-lp-pop li.is-on { background: #f6f8ff; }

/* ==========================================================================
   THE WALK-IN OBJECTION
   ========================================================================== */
.hos-page .ways { margin-top: clamp(28px, 3vw, 40px); }
.hos-obj-link { margin-top: clamp(24px, 2.6vw, 32px); }

/* ==========================================================================
   BREAKPOINTS. Two steps, as on /solutions/professional-services: 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 stub becomes a chip.
   ========================================================================== */
@media (max-width: 1180px) {
  .hos-beat { grid-template-columns: var(--hos-rail) minmax(0, 1fr); }
  .hos-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .hos-week { --hos-rail: 0px; }
  .hos-head { display: block; }
  .hos-beat { grid-template-columns: 1fr; padding: clamp(28px, 3.4vw, 40px) 0; }
  .hos-beat::before { display: none; }
  .hos-beat + .hos-beat { border-top: 1px solid var(--v2-line); }
  .hos-copy, .hos-screen { grid-column: 1; }
  .hos-mark { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-bottom: 14px; }
  .hos-stub {
    grid-auto-flow: column; gap: 8px; min-width: 0; padding: 5px 13px; border-radius: 999px;
    background: #eef2ff; box-shadow: none;
  }
  .hos-stub em { color: #3f4f8f; }
  .hos-copy h3 { max-width: 26ch; }
  .hos-copy p { max-width: 62ch; }
  .hos-copy .hos-note { max-width: 62ch; }
  .hos-screen { max-width: 620px; }
  .hos-foot { margin-left: 0; max-width: 66ch; }
  .hos-proof-in { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 620px) {
  .hos-screen { padding: 14px; }
  .hos-scr--inb, .hos-scr--grid { padding: 0; }
  .hos-inb > li { padding: 13px 12px; }
  .hos-comp { padding: 12px; }
  .hos-ph { padding: 13px 14px 10px; }
  .hos-gwrap { padding: 0 14px; }
  .hos-pf { padding: 11px 14px 14px; }
  /* the theme heads wrap and the restaurant column sticks, so the four rows keep tracking by eye while the themes
     scroll; the hairline on the sticky column is the cue that they do */
  .hos-grid th { white-space: normal; }
  .hos-grid .hos-rowhead, .hos-vn { position: sticky; left: 0; width: 84px; background: #fff; box-shadow: 1px 0 0 var(--v2-line); }
  .hos-thin { margin-left: 0; margin-top: 2px; }
  .hos-vn { white-space: normal; }
  .hos-arow { grid-template-columns: 26px minmax(0, 1fr); gap: 11px; }
  .hos-pv { width: 26px; height: 26px; }
}