/* ==========================================================================
   solutions-automotive.css — /solutions/automotive (2026-09-05, built straight
   to the form in docs/pipeline/REDESIGN-COMMON.md).
   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 tablet correction at
      the foot of this file: that markup is the contract with hero-film.css and
      feature-v2.js.
   2. The week is one service lane, not four sections. A tinted column runs
      down a 142px gutter and a white docket sits in it per beat, three lines
      each: the day, the time and the department. Tue / Wed / Thu / Fri and
      Service desk / Front office / Workshop / Front office read down the page
      before any of the words do. The lane is drawn per beat rather than as one
      absolute element, so it rounds at the first and last docket instead of
      dangling past them. This is deliberately not the professional-services
      rail (a hairline with circular day discs) or the home-services run sheet
      (numbered plates on a rule to the right edge).
   3. Every beat has the same rhythm on purpose: a sequence whose rows vary is
      not a sequence. 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 and in docs/pipeline/solutions/automotive/redesign.md. 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 mark 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 fail the floor on the tints these screens use). #5b6076 measures
      6.21:1 on white, 5.80 on --v2-card, 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 rather than
      shared, so nothing on the other pages moves when this page does.
   ========================================================================== */

/* ---------- the strip: six marks, evenly spread ---------- */
.au-page .v2-logos img { max-height: 26px; }
.au-page .v2-logos img[alt="Hilldrup"] { max-height: 32px; }
.au-page .v2-logos img[alt="The Lash Lounge"] { max-height: 34px; }
.au-page .v2-logos img[alt="Frenchies"] { max-height: 20px; }

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

/* ==========================================================================
   THE WEEK: the service lane
   ========================================================================== */
.au-week { --au-lane: 142px; --au-gap: clamp(24px, 2.8vw, 44px); --au-pad: clamp(30px, 3.4vw, 46px); }
.au-head {
  display: grid; grid-template-columns: var(--au-lane) minmax(0, 1fr); column-gap: var(--au-gap);
  margin-bottom: clamp(30px, 3.6vw, 50px);
}
.au-head > * { grid-column: 2; max-width: 720px; }

.au-lane { margin: 0; padding: 0; list-style: none; }
.au-beat {
  position: relative;
  display: grid;
  grid-template-columns: var(--au-lane) minmax(0, .88fr) minmax(0, 1.12fr);
  column-gap: var(--au-gap);
  align-items: start;
  padding: var(--au-pad) 0;
}
.au-beat:first-child { padding-top: 22px; }
.au-beat:last-child { padding-bottom: 22px; }
/* the lane itself, drawn per beat so it begins and ends with the list */
.au-beat::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--au-lane);
  background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line);
}
.au-beat:first-child::before { border-radius: 18px 18px 0 0; }
.au-beat:last-child::before { border-radius: 0 0 18px 18px; }

/* the docket: the job card sitting in the lane */
.au-dock {
  position: relative; z-index: 1; grid-column: 1; grid-row: 1 / 40; align-self: start;
  width: 112px; margin: 0 auto; padding: 12px 9px 11px;
  border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), 0 6px 16px -12px rgba(15, 13, 25, .5);
  text-align: center;
}
.au-dock b { display: block; font: 600 16px/1.2 var(--font-display); color: var(--ink); }
.au-dock span { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; font-variant-numeric: tabular-nums; }
.au-dock em {
  display: block; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--v2-line);
  font-style: normal; font: 500 13px/1.3 var(--font-display); color: var(--blue);
}

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

.au-foot {
  margin-top: clamp(30px, 3.4vw, 44px);
  margin-left: calc(var(--au-lane) + var(--au-gap));
  padding-top: clamp(22px, 2.4vw, 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.
   ========================================================================== */
.au-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 vendor mark on a white disc at the Cloutly mark's size and in its own brand colour */
.au-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: var(--ink);
}
.au-mk--c { color: var(--blue); }
.au-mk .icon { width: 15px; height: 15px; }
.au-mk--s { width: 20px; height: 20px; border-radius: 6px; }
.au-mk--s .icon { width: 13px; height: 13px; }

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

/* ---------- 1 · the Square integration screen (NativeAutomations/Square/Tabs/SquareOrders.js + index.module.scss)
   ----------
   Square does not use the generic `${source.label} Automation` modal the HubSpot, Xero and Zenoti screens on the
   other solutions pages port: it has its own native setup screen. Ported from it: the h3 "Let's configure your
   Square location", the two icon-and-content rows (60px icon block, 15px gutter), the label "When this happens:"
   (.formSquareLabel, 400 14px #1a1a1a), the three checkboxes with the product's own labels, the Cloutly row's
   "Start my review campaign:" and "Send invite after:" in .formCloutlyLabel's blue (#003dff), the 350px-capped
   controls with their 1px border, and the help line under the delay. The help line stops after its first sentence
   and the product's own help text under each checkbox is left out: those strings carry a grammar error ("When an
   payment is COMPLETED") that should not be reproduced on a marketing page. The screen's own 10px help text and the
   product's #1a1a1a body are lifted to the site's 13px floor and #5b6076 muted. */
.au-sq-row { display: flex; align-items: flex-start; gap: 14px; padding-top: 16px; }
.au-sq-row + .au-sq-row { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--v2-line); }
.au-sq-b { min-width: 0; flex: 1; }
.au-mk--lg { width: 34px; height: 34px; border-radius: 9px; }
.au-mk--lg .icon { width: 19px; height: 19px; }
.au-sq-l { margin: 0 0 9px; font: 400 14px/1.4 var(--font-body); color: var(--ink); }
.au-sq-l--c { color: var(--blue); }
.au-sq-l--c + * + .au-sq-l--c { margin-top: 12px; }
.au-cb { display: flex; align-items: center; gap: 10px; margin: 0; padding: 3px 0; font: 400 14px/1.4 var(--font-body); color: #5b6076; }
.au-cb + .au-cb { margin-top: 2px; }
.au-cb i {
  flex: none; width: 18px; height: 18px; border-radius: 4px;
  display: grid; place-items: center; font-style: normal; font: 700 13px/1 var(--font-display);
  background: #fff; box-shadow: inset 0 0 0 1px #b6bacb; color: transparent;
}
.au-cb.is-on { color: var(--ink); font-weight: 500; }
.au-cb.is-on i { background: var(--blue); box-shadow: none; color: #fff; }
.au-inp {
  display: flex; align-items: center; gap: 8px;
  max-width: 350px; 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);
}
.au-inp > span { min-width: 0; }
.au-inp .au-chev { margin-left: auto; }
.au-inp-row { display: flex; gap: 10px; max-width: 350px; }
.au-inp--n { width: 84px; flex: none; }
.au-inp-row > .au-inp:last-child { flex: 1; }
.au-sq-help { margin: 8px 0 0; max-width: 420px; font: 400 13px/1.45 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". */
.au-ct-h, .au-ct-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 108px; gap: 12px; align-items: center;
}
.au-ct-h { padding: 0 2px 9px; border-bottom: 1px solid var(--v2-line); }
.au-ct-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.au-ct-row { padding: 13px 2px; }
.au-ct-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.au-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);
}
.au-ct-nn { min-width: 0; }
.au-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) */
.au-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; }
.au-ct-s { font: 600 14px/1.3 var(--font-display); color: #000; }
.au-ct-l { font: 400 14px/1.3 var(--font-body); color: #5b6076; }
.au-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; }
.au-ct-camp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 10px; background: var(--v2-card);
}
.au-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);
}
.au-ct-cn { font: 600 14px/1.3 var(--font-display); color: var(--ink); }
.au-ct-ai { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1.3 var(--font-display); color: #5b6076; }
.au-ct-ai .icon { width: 15px; height: 15px; color: #0c7a52; }
.au-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. */
.au-scr--lb { padding: 0; overflow: hidden; }
.au-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.au-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.au-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.au-lb-b { padding: 0 6px; }
.au-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 */
.au-lb-r > .au-lb-slot + .au-lb-slot { margin-left: 12px; }
.au-lb-r + .au-lb-r { border-top: 1px solid #e7e9f2; }
.au-lb-rank { font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums; }
.au-lb-r.is-lead .au-lb-rank {
  width: 27px; height: 27px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e0e8ff; color: #002499;
}
.au-lb-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 15px/1 var(--font-display);
}
.au-lb-who { min-width: 0; }
.au-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.au-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.au-lb-slot { min-width: 86px; text-align: right; }
.au-lb-slot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.au-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.au-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;
}
.au-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. */
.au-scr--inb { padding: 0; overflow: hidden; }
.au-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;
}
.au-tabs { display: inline-flex; align-items: center; gap: 6px; }
.au-tabs b, .au-tabs i {
  padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display);
}
.au-tabs b { background: #eef2ff; color: var(--blue); }
.au-tabs i { color: #5b6076; }
.au-scope { font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.au-inb { margin: 0; padding: 0; list-style: none; }
.au-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.au-inb > li.is-sel { background: rgba(0, 61, 255, .05); }
.au-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);
}
.au-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;
}
.au-inb-mk .icon { width: 12px; height: 12px; }
.au-inb-b { min-width: 0; }
.au-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.au-inb-1, .au-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.au-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; }
.au-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.au-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.au-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; }
.au-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);
}
.au-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }
.au-stars b { font-weight: inherit; color: #d8dbe6; }
.au-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; }
.au-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;
}
.au-btn .icon { width: 16px; height: 16px; }
.au-chev { width: 13px; height: 13px; }
.au-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 .au-proof { margin-top: clamp(24px, 3vw, 40px); padding: clamp(80px, 8.5vw, 120px) 0 0; background: var(--v2-card); }
.v2 main .au-proof + .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(80px, 8.5vw, 120px); background: var(--v2-card); }
.v2 main .au-proof + .tq-section + section { padding-top: clamp(80px, 8.5vw, 120px); }
.v2 main .au-proof + .tq-section .tq figcaption { border-top-color: rgba(15, 13, 25, .1); }
.au-page .au-proof .col > .h, .au-page .au-proof .col > .au-proof-lead { max-width: 780px; margin-left: auto; margin-right: auto; }
.au-proof-lead { margin-top: 16px; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.au-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.au-page .tq figcaption { margin-top: 26px; }

/* ---------- breakpoints ----------
   Two steps. Under 1180px the screen drops below its copy but the lane stays, because the lane is the page's device.
   Under 992px the lane flattens and the docket becomes one horizontal row above the heading. */
@media (max-width: 1180px) {
  .au-beat { grid-template-columns: var(--au-lane) minmax(0, 1fr); }
  .au-screen { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .au-week { --au-lane: 0px; --au-gap: 0px; }
  .au-head { display: block; }
  .au-beat { grid-template-columns: 1fr; padding: clamp(28px, 3.4vw, 40px) 0; }
  .au-beat:first-child { padding-top: 0; }
  .au-beat:last-child { padding-bottom: 0; }
  .au-beat::before { display: none; }
  .au-beat + .au-beat { border-top: 1px solid var(--v2-line); }
  .au-copy, .au-screen { grid-column: 1; }
  .au-dock {
    grid-column: 1; grid-row: auto; width: auto; justify-self: start; margin: 0 0 14px;
    display: inline-flex; align-items: center; gap: 8px;
    border-radius: 999px; background: var(--v2-card); box-shadow: none; text-align: left;
    padding: 6px 14px;
  }
  .au-dock b, .au-dock span, .au-dock em { display: inline; padding: 0; border: 0; margin: 0; font-size: 13.5px; }
  .au-dock b { font-size: 14px; }
  .au-dock em::before { content: "\00b7"; padding: 0 7px; color: #5b6076; }
  .au-copy h3 { max-width: 26ch; }
  .au-copy p { max-width: 62ch; }
  .au-screen { max-width: 560px; }
  .au-foot { margin-left: 0; max-width: 66ch; }
}
@media (max-width: 620px) {
  .au-screen { padding: 14px; }
  .au-scr--lb, .au-scr--inb { padding: 0; }
  .au-ct-h, .au-ct-row { grid-template-columns: minmax(0, 1fr) 82px; }
  .au-ct-h span:last-child, .au-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 */
  .au-lb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 13px 10px; }
  .au-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 */
  .au-lb-r.is-lead .au-lb-rank { width: 24px; height: 24px; margin: 0; }
  .au-lb-av { width: 34px; height: 34px; font-size: 14px; }
  .au-lb-who { flex: 1 1 calc(100% - 110px); }
  .au-lb-slot { flex: none; min-width: 0; text-align: left; }
  .au-lb-r > .au-lb-slot + .au-lb-slot { margin-left: 0; }
  .au-lb-slot > b.au-chip { display: inline-block; }
  .au-inb > li { padding: 13px 12px; }
  .au-comp { padding: 12px; }
}

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