/* ==========================================================================
   solutions-finance.css — /solutions/finance (solutions wave B, 2026-09-05;
   rebuilt the same evening under docs/pipeline/REDESIGN-COMMON.md: simplify,
   and every mock is a port of the real product).
   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. Nothing here touches .hero-film, .moment or
      .m-card: that markup is the contract with hero-film.css and feature-v2.js.
      Only the tablet portrait correction at the foot of this file does, and it
      is the same one-line fix /solutions/professional-services carries.
   2. The four moments are a horizontal stage strip over four ledger rows, not
      four cards. The strip (.fin-strip) runs Settled · Credited · Answered ·
      Sampled across the column on one hairline; each row repeats its numeral in
      a 72px gutter, so the eye maps row to stop before it reads a word. This is
      deliberately NOT the professional-services vertical rail of day discs: the
      sequence there runs down the page, here it runs across the top. Do not
      reintroduce alternating left/right rows.
   3. Every beat has the same rhythm on purpose. The variety is in the four
      screens, which are four genuinely different product surfaces.
   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, and the AI panel's 10px radii on a #f8f9fc
      slot ground.
   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, 5.58 on #e6f7ea and 6.00 on
      #f8f9fc. Do not lighten it back.
   6. Colour commits late. The week is white; the proof h2 and the shared quote
      share one tinted band (--v2-card) with a full section of air above and
      below, which is where the page changes ground between hero and Closing.
      Copied from .ps-proof rather than shared, so nothing else moves.
   ========================================================================== */

/* ---------- the strip: five cleared finance marks, evenly spread ---------- */
@media (min-width: 992px) { .fin-page .v2-logos ul { justify-content: space-between; gap: 32px; } }
.fin-page .v2-logos img { max-height: 26px; }
.fin-page .v2-logos img[alt="Edge Home Finance"] { max-height: 28px; }
.fin-page .v2-logos img[alt="Swyftx"] { max-height: 23px; }
.fin-page .v2-logos img[alt="Ulton"] { max-height: 30px; }
.fin-page .v2-logos img[alt="Ready Finance"] { max-height: 30px; }
.fin-page .v2-logos img[alt="True Tax Enterprises"] { max-height: 36px; }

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

/* ==========================================================================
   THE FOUR MOMENTS: a stage strip, then four ledger rows
   ========================================================================== */
.fin-week { --fin-gut: 72px; --fin-gap: clamp(24px, 3vw, 44px); --fin-pad: clamp(30px, 3.4vw, 46px); }
.fin-head { max-width: 760px; margin-bottom: clamp(30px, 3.6vw, 46px); }

/* the strip: four stops on one hairline. The line runs between the first and last pip centre (four equal cells, so
   12.5% in from each end) rather than edge to edge, which would dangle past the sequence. */
.fin-strip {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 0 clamp(6px, 1vw, 12px); padding: 0; list-style: none;
}
.fin-strip::before {
  content: ""; position: absolute; top: 15px; left: 12.5%; right: 12.5%;
  height: 2px; border-radius: 2px; background: #dfe5ff;
}
.fin-strip li {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
}
.fin-stop { font: 600 13.5px/1.3 var(--font-display); color: #3f4560; }
/* the pip. The same disc marks a stop on the strip and its row in the gutter, which is what ties the two together. */
.fin-pip {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #eef2ff; box-shadow: 0 0 0 1px #cdd8ff;
  font: 700 14px/1 var(--font-display); color: var(--blue); font-variant-numeric: tabular-nums;
}

.fin-beats { border-top: 1px solid var(--v2-line); }
.fin-beat {
  display: grid;
  grid-template-columns: var(--fin-gut) minmax(0, .88fr) minmax(0, 1.12fr);
  column-gap: var(--fin-gap);
  align-items: start;
  padding: var(--fin-pad) 0;
}
.fin-beat + .fin-beat { border-top: 1px solid var(--v2-line); }
.fin-mark { grid-column: 1; margin: 0; }
.fin-copy { grid-column: 2; }
.fin-copy h3 {
  font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.fin-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.fin-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.fin-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;
}
.fin-links a:hover { text-decoration: underline; }
.fin-links .icon { width: 15px; height: 15px; }

.fin-foot {
  margin-top: clamp(30px, 3.4vw, 44px);
  margin-left: calc(var(--fin-gut) + var(--fin-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.
   ========================================================================== */
.fin-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 hero uses for a system with no sprite */
.fin-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;
}
.fin-mk--c { color: var(--blue); }
.fin-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 */
.fin-mk .icon, .fin-mk .mk-logo { width: 15px; height: 15px; }
.fin-mk .mk-logo { display: block; object-fit: contain; }

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

/* ---------- 2 · the Staff recognition board (Board + BoardRow) ----------
   The product's card head, its five-track row with no header row and no sort control, 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. */
.fin-scr--lb { padding: 0; overflow: hidden; }
.fin-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.fin-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.fin-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.fin-lb-b { padding: 0 6px; }
.fin-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 */
.fin-lb-r > .fin-lb-slot + .fin-lb-slot { margin-left: 12px; }
.fin-lb-r + .fin-lb-r { border-top: 1px solid #e7e9f2; }
.fin-lb-rank { font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums; }
.fin-lb-r.is-lead .fin-lb-rank {
  width: 27px; height: 27px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e0e8ff; color: #002499;
}
.fin-lb-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 15px/1 var(--font-display);
}
.fin-lb-who { min-width: 0; }
.fin-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.fin-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.fin-lb-slot { min-width: 86px; text-align: right; }
.fin-lb-slot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.fin-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }

/* the board's chips, and the AI panel's: the product uses a 6px radius on the board and a pill on the AI slots */
.fin-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;
}
.fin-chip.is-up { background: #e6f7ea; color: #0c7a52; }

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

/* ---------- 4 · the AI query panel (AiQueryPanel + listings.module.scss) ----------
   The product's card title at 14.5px/700, its live-add row (a 10px-radius input with a 1px #e7e9f2 border beside the
   ink "Check now" button at a 10px radius), and its live slots: a #f8f9fc panel, an 84px bold assistant label, one
   pill chip each and the sampling line under them. Chip grounds are the listings token set: good #00845a on #e4f8f0,
   warn #b07a00 on #fff4d6. */
.fin-ai-t { margin: 0 0 8px; font: 700 14.5px/1.3 var(--font-display); color: #0b0e1a; }
.fin-ai-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fin-ai-in {
  flex: 1 1 200px; min-width: 0; padding: 9px 13px;
  border: 1px solid #e7e9f2; border-radius: 10px; background: #fff;
  font: 500 14px/1.4 var(--font-body); color: #0b0e1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-ai-btn {
  flex: none; padding: 8px 14px; border-radius: 10px;
  background: #0b0e1a; color: #fff; font: 600 13px/1.3 var(--font-display); white-space: nowrap;
}
.fin-ai-slots {
  display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px;
  border: 1px solid #e7e9f2; border-radius: 12px; background: #f8f9fc;
}
.fin-ai-slot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.fin-ai-slot b { min-width: 84px; font: 600 13px/1.4 var(--font-display); color: #0b0e1a; }
.fin-ai-slot .fin-chip { border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.fin-chip.is-good { background: #e4f8f0; color: #00694a; }
.fin-chip.is-warn { background: #fff4d6; color: #8a5f00; }
.fin-ai-f { margin: 2px 0 0; font: 400 13px/1.45 var(--font-body); color: #5b6076; }

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

/* ---------- breakpoints ----------
   Two steps. Under 1180px the screen drops below its copy but the strip and the gutter stay, because they are the
   page's device. Under 992px the gutter closes and the numeral moves above the heading, beside nothing. */
@media (max-width: 1180px) {
  .fin-beat { grid-template-columns: var(--fin-gut) minmax(0, 1fr); }
  .fin-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .fin-week { --fin-gut: 0px; }
  .fin-beat { grid-template-columns: 1fr; padding: clamp(28px, 3.4vw, 40px) 0; }
  .fin-copy, .fin-screen { grid-column: 1; }
  .fin-mark { grid-column: 1; margin-bottom: 14px; }
  .fin-copy h3 { max-width: 26ch; }
  .fin-copy p { max-width: 62ch; }
  .fin-screen { max-width: 560px; }
  .fin-foot { margin-left: 0; max-width: 66ch; }
}
@media (max-width: 700px) {
  .fin-strip { column-gap: 6px; }
  .fin-stop { font-size: 13px; }
  .fin-pip { width: 28px; height: 28px; font-size: 13.5px; }
  .fin-strip::before { top: 13px; }
}
@media (max-width: 620px) {
  .fin-screen { padding: 14px; }
  .fin-scr--lb, .fin-scr--inb { padding: 0; }
  /* 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 */
  .fin-lb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 13px 10px; }
  .fin-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 */
  .fin-lb-r.is-lead .fin-lb-rank { width: 24px; height: 24px; margin: 0; }
  .fin-lb-av { width: 34px; height: 34px; font-size: 14px; }
  .fin-lb-who { flex: 1 1 calc(100% - 110px); }
  .fin-lb-slot { flex: none; min-width: 0; text-align: left; }
  .fin-lb-r > .fin-lb-slot + .fin-lb-slot { margin-left: 0; }
  .fin-lb-slot > b.fin-chip { display: inline-block; }
  .fin-inb > li { padding: 13px 12px; }
  .fin-comp { padding: 12px; }
  .fin-ai-slot b { min-width: 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) {
  .fin-page .hero-moment--scene .pp--tl { left: calc(50% - min(50%, 260px) - 14px); right: auto; top: 96px; }
}