/* ==========================================================================
   solutions-professional-services.css — /solutions/professional-services
   (solutions wave C, 2026-09-05; rebuilt the same evening on Lachlan's ruling
   "if you're going to use a timeline, style it creatively rather than dump an
   essay onto the page. Remember, simplify.")
   Loads after feature-v2.css, feature-v3.css, home.css and hero-film.css.

   Six things worth knowing before editing:

   1. The hero is HeroFilm, not the live console. Nothing here touches
      .hero-film, .moment, .m-card or .pp--tl except the crop at the foot of
      this file: that markup is the contract with hero-film.css and
      feature-v2.js. The crop exists because the clip is a placeholder shared
      with /solutions/finance and the two pages must not show the same frame.
   2. The week is one rail, not four sections. A hairline runs down a 108px
      gutter, a day marker sits on it, and beside the marker there are two
      sentences and one screen. A marker with a ring (.is-day) starts a new day
      and a plain marker continues the day before it, so Tue / Tue / Wed / Thu
      reads down the rail before any of the words do. The rail is drawn per
      beat, not as one absolute line, so it stops at the first and last marker
      rather than dangling past them.
   3. Every beat has the same rhythm on purpose: a timeline whose rows vary 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 or a 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 42px react-select control and its 4px
      radius, the 25px provider logo and the 10px label offset, the 6px chip
      radius, the 40px inbox avatar with its 18px source badge, the 32px
      outline button with a 16px sparkle.
   5. 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, #6b7280 and
      #989898 all 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, 5.56 on #eef2ff, 5.68 on #fef2f2 and 5.58 on #e6f7ea. Do not
      lighten it back.
   6. The proof band is the wave C pattern: the h2 and the shared .tq-section
      share one tinted ground (--v2-card) with a full section of air above and
      below, and whatever follows gets a full section top. Copied from
      .cmp-proof in compare.css rather than shared, so nothing on the compare
      pages moves when this page does.
   ========================================================================== */

/* ---------- the strip: six marks, evenly spread ---------- */
.ps-page .v2-logos img { max-height: 26px; }
.ps-page .v2-logos img[alt="Ulton"] { max-height: 30px; }
.ps-page .v2-logos img[alt="True Tax Enterprises"] { max-height: 34px; }
.ps-page .v2-logos img[alt="Edge Home Finance"] { max-height: 28px; }
.ps-page .v2-logos img[alt="Ready Finance"] { max-height: 30px; }
.ps-page .v2-logos img[alt="Swyftx"] { max-height: 23px; }
.ps-page .v2-logos img[alt="Hilldrup"] { max-height: 32px; }

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

/* ==========================================================================
   THE WEEK: the rail
   ========================================================================== */
.ps-week { --ps-rail: 108px; --ps-gap: clamp(26px, 3vw, 46px); --ps-pad: clamp(30px, 3.4vw, 46px); --ps-mark: 25px; }
.ps-head {
  display: grid; grid-template-columns: var(--ps-rail) minmax(0, 1fr); column-gap: var(--ps-gap);
  margin-bottom: clamp(34px, 4vw, 56px);
}
.ps-head > * { grid-column: 2; max-width: 720px; }

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

/* the marker: a day on the rail. A ring means the day changed. */
.ps-mark { grid-column: 1; grid-row: 1 / 40; align-self: start; display: flex; justify-content: center; }
.ps-day {
  position: relative; z-index: 1;
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; box-shadow: 0 0 0 1px var(--v2-line);
  font: 600 13.5px/1 var(--font-display); color: #5b6076;
}
.ps-beat.is-day .ps-day {
  background: #eef2ff; box-shadow: 0 0 0 2px var(--blue); color: var(--blue);
}

.ps-copy { grid-column: 2; }
.ps-copy h3 {
  font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.ps-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.ps-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.ps-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;
}
.ps-links a:hover { text-decoration: underline; }
.ps-links .icon { width: 15px; height: 15px; }

.ps-foot {
  margin-top: clamp(34px, 3.6vw, 48px);
  margin-left: calc(var(--ps-rail) + var(--ps-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 FOUR SCREENS. One frame, four ported surfaces.
   ========================================================================== */
.ps-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 (the pattern the finance hero uses for a system with no sprite) */
.ps-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: #b0561a;
}
.ps-mk--c { color: var(--blue); }
.ps-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 */
.ps-mk .icon, .ps-mk .mk-logo { width: 15px; height: 15px; }
.ps-mk .mk-logo { display: block; object-fit: contain; }
.ps-mk--s .icon, .ps-mk--s .mk-logo { width: 13px; height: 13px; }
.ps-mk--s { width: 20px; height: 20px; border-radius: 6px; font-size: 13px; }

/* the head both the automation and the contact screens carry */
.ps-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);
}
.ps-scr-t { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.ps-scr-loc { font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.ps-scr-loc b { font-weight: 600; color: var(--ink); }

/* ---------- 1 · the HubSpot automation (AutomationForm + SelectLabel + AutomationSummary) ----------
   "When this happens:" / "Do this:" are the summary's own labels. The control is react-select's: a 42px row with a
   1px border and a 4px radius, the 25px provider logo, the label 10px in, and the green IconCheckCircle (#009900,
   16px) that marks an authorised trigger. */
.ps-auto-l { margin: 14px 0 7px; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.ps-sel {
  display: flex; align-items: center; gap: 10px;
  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);
}
.ps-sel > span { min-width: 0; }
.ps-ok { flex: none; width: 16px; height: 16px; margin-left: auto; color: #009900; }
.ps-auto-p { margin-top: 9px; padding-left: 15px; }
.ps-auto-pl { display: block; margin-bottom: 5px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* ---------- 2 · the contact record (ContactsTable + ContactStartReviewCampaign) ----------
   The product's own columns, its "Invited" status as plain semibold text rather than a chip, its 25px #F1F0F5
   avatar, and the campaign row that is checked, disabled and reads "Already invited". */
.ps-ct-h, .ps-ct-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 84px; gap: 12px; align-items: center;
}
.ps-ct-h { padding: 0 2px 9px; border-bottom: 1px solid var(--v2-line); }
.ps-ct-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.ps-ct-row { padding: 13px 2px; }
.ps-ct-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ps-ct-av {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #f1f0f5; color: #0f0d19; font-style: normal; font: 500 13px/1 var(--font-display);
}
.ps-ct-nn { min-width: 0; }
.ps-ct-nn b { display: flex; align-items: center; gap: 8px; font: 600 14px/1.35 var(--font-display); color: #000; }
/* the product truncates both lines rather than wrapping them (ContactsTable's cells are single line) */
.ps-ct-nn em { display: block; font-style: normal; font: 400 13px/1.35 var(--font-body); color: #5b6076; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-ct-s { font: 600 14px/1.3 var(--font-display); color: #000; }
.ps-ct-l { font: 400 14px/1.3 var(--font-body); color: #5b6076; }
.ps-ct-cap { margin: 4px 0 8px; padding-top: 13px; border-top: 1px solid var(--v2-line); font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.ps-ct-camp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 10px; background: var(--v2-card);
}
.ps-box {
  flex: none; width: 18px; height: 18px; border-radius: 4px; display: grid; place-items: center;
  background: #dfe5ff; color: #3f4560; font-style: normal; font: 700 13px/1 var(--font-display);
}
.ps-ct-cn { font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.ps-ct-ai { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1.3 var(--font-display); color: #5b6076; }
.ps-ct-ai .icon { width: 15px; height: 15px; color: #0c7a52; }
.ps-ct-v { margin-left: auto; font: 600 13.5px/1.3 var(--font-display); color: #507aff; }

/* ---------- 3 · the Staff recognition board (Board + BoardRow) ----------
   The product's card head, its five-track row, its value-over-caption slots and its chips. The rank-1 disc is the
   product's color-mix of the primary at 12% behind text at 60%, resolved to hex. */
.ps-scr--lb { padding: 0; overflow: hidden; }
.ps-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.ps-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.ps-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.ps-lb-b { padding: 0 6px; }
.ps-lb-r {
  display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 14px 14px 14px 10px;
}
/* the product's metrics row is a flex with a 26px gap; here the two slots are grid tracks, so the gap is on them */
.ps-lb-r > .ps-lb-slot + .ps-lb-slot { margin-left: 12px; }
.ps-lb-r + .ps-lb-r { border-top: 1px solid #e7e9f2; }
.ps-lb-rank { font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums; }
.ps-lb-r.is-lead .ps-lb-rank {
  width: 27px; height: 27px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e0e8ff; color: #002499;
}
.ps-lb-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 15px/1 var(--font-display);
}
.ps-lb-who { min-width: 0; }
.ps-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.ps-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.ps-lb-slot { min-width: 86px; text-align: right; }
.ps-lb-slot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.ps-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.ps-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;
}
.ps-chip.is-up { background: #e6f7ea; color: #0c7a52; }

/* ---------- 4 · 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
   and the tone as a dropdown. */
.ps-scr--inb { padding: 0; overflow: hidden; }
.ps-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;
}
.ps-tabs { display: inline-flex; align-items: center; gap: 6px; }
.ps-tabs b, .ps-tabs i {
  padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display);
}
.ps-tabs b { background: #eef2ff; color: var(--blue); }
.ps-tabs i { color: #5b6076; }
.ps-scope { font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.ps-inb { margin: 0; padding: 0; list-style: none; }
.ps-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.ps-inb > li.is-sel { background: rgba(0, 61, 255, .05); }
.ps-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);
}
.ps-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;
}
.ps-inb-mk .icon { width: 12px; height: 12px; }
.ps-inb-b { min-width: 0; }
.ps-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.ps-inb-1, .ps-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-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; }
.ps-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.ps-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.ps-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; }
.ps-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);
}
.ps-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }
.ps-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; }
.ps-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;
}
.ps-btn .icon { width: 16px; height: 16px; }
.ps-chev { width: 13px; height: 13px; }
.ps-comp em { font-style: normal; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* ---------- proof: the h2 and the shared quote on one tinted band ---------- */
.v2 main .ps-proof { margin-top: clamp(24px, 3vw, 40px); padding: clamp(80px, 8.5vw, 120px) 0 0; background: var(--v2-card); }
.v2 main .ps-proof + .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(80px, 8.5vw, 120px); background: var(--v2-card); }
.v2 main .ps-proof + .tq-section + section { padding-top: clamp(80px, 8.5vw, 120px); }
.v2 main .ps-proof + .tq-section .tq figcaption { border-top-color: rgba(15, 13, 25, .1); }
.ps-page .ps-proof .col > .h { max-width: 780px; margin: 0 auto; }
.ps-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.ps-page .tq figcaption { margin-top: 26px; }

/* ---------- breakpoints ----------
   Two steps. 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 becomes a chip above the heading. */
@media (max-width: 1180px) {
  .ps-beat { grid-template-columns: var(--ps-rail) minmax(0, 1fr); }
  .ps-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .ps-week { --ps-rail: 0px; }
  .ps-head { display: block; }
  .ps-beat { grid-template-columns: 1fr; padding: clamp(28px, 3.4vw, 40px) 0; }
  .ps-beat::before { display: none; }
  .ps-beat + .ps-beat { border-top: 1px solid var(--v2-line); }
  .ps-copy, .ps-screen { grid-column: 1; }
  .ps-mark { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-bottom: 14px; }
  .ps-day {
    width: auto; height: auto; border-radius: 999px; padding: 5px 13px;
    background: #eef2ff; box-shadow: none; color: var(--blue);
  }
  .ps-beat.is-day .ps-day { box-shadow: none; }
  .ps-copy h3 { max-width: 26ch; }
  .ps-copy p { max-width: 62ch; }
  .ps-screen { max-width: 560px; }
  .ps-foot { margin-left: 0; max-width: 66ch; }
}
@media (max-width: 620px) {
  .ps-screen { padding: 14px; }
  .ps-scr--lb, .ps-scr--inb { padding: 0; }
  .ps-ct-h, .ps-ct-row { grid-template-columns: minmax(0, 1fr) 82px; }
  .ps-ct-h span:last-child, .ps-ct-l { display: none; }
  /* the board's row goes flex on a phone, the way the product's own board does: rank, avatar and name on the first
     line, then the two value-over-caption slots side by side under them */
  .ps-lb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 13px 10px; }
  .ps-lb-rank { width: 22px; }
  /* the desktop rank disc centres itself in its track with `margin: 0 auto`, which in a flex row would push the
     avatar to the far edge */
  .ps-lb-r.is-lead .ps-lb-rank { width: 24px; height: 24px; margin: 0; }
  .ps-lb-av { width: 34px; height: 34px; font-size: 14px; }
  .ps-lb-who { flex: 1 1 calc(100% - 110px); }
  .ps-lb-slot { flex: none; min-width: 0; text-align: left; }
  .ps-lb-r > .ps-lb-slot + .ps-lb-slot { margin-left: 0; }
  .ps-lb-slot > b.ps-chip { display: inline-block; }
  .ps-inb > li { padding: 13px 12px; }
  .ps-comp { padding: 12px; }
}

/* ---------- the placeholder clip, cropped away from /solutions/finance's frame ----------
   /video/scene-professional-services.mp4 is byte-identical to the finance clip until Lachlan supplies one of a
   practice (QUESTIONS 1). The film tile is 16:11 and the clip is 16:9, so object-position alone can only slide the
   window by 18% of the width and both pages would still show the same picture. This closes in on the other person in
   the room instead, so the two heroes do not share a frame. Delete both this rule and the page's `pos` when the real
   clip lands. */
.ps-page .hero-film-v { transform: scale(1.5); transform-origin: 74% 76%; }

/* ---------- 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) {
  .ps-page .hero-moment--scene .pp--tl { left: calc(50% - min(50%, 260px) - 14px); right: auto; top: 96px; }
}