/* =============================================================================
   Solutions pages (pages/solutions.mjs, page squad C): /solutions and the seven
   use-case pages. Loaded only on those pages, after site.css, and built from its
   tokens. Contents:
    1  Page pieces: hero stage, the capability layouts, the one-line pointers,
       the bookings tabs, the "Works with" logos
    2  Mockups this squad added (sm-*), in the style of site.css section 23
    3  Shared mockups inside these pages
   ========================================================================== */

/* 1 ------------------------------------------------------------ Page pieces */

/* A hero mockup with floating toasts (site.css .float-card, shown from 64rem). */
.sol-stage { margin: 0; }
.sol-stage-inner { position: relative; }
.sol-stage--phone .sol-stage-inner { max-width: 25rem; margin-inline: auto; }
.sol-hero .hero-visual .mock-card,
.sol-hero .hero-visual .mock-window { box-shadow: var(--shadow-xl); }

/* /solutions: the blocks picture in the hero. */
.sol-blocks { max-width: 30rem; margin-inline: auto; }

/* Features: the pieces each page stacks in its own order (splits, a bento, tabs, steps). */
.sol-stack { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.sol-stack--wide { gap: clamp(3rem, 2rem + 4vw, 5.5rem); }
.sol-stack .split-title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.18; letter-spacing: -0.02em; }
.sol-gap { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

/* One line under a section: a pointer to the page that owns a subject. */
.sol-line { display: flex; align-items: flex-start; gap: 0.625rem; max-width: 46rem; margin-top: 1.75rem; font-size: 0.9375rem; line-height: 1.55; color: var(--c-muted); }
.sol-line > svg { flex: none; margin-top: 0.1875rem; color: var(--orange-ink); }
.sol-line a { font-weight: 500; }

/* Bookings: a capability inside a vertical tab, words beside its picture. */
.sol-tab { display: grid; gap: 1.5rem; align-items: start; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.sol-tab-title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.sol-tab-text { margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.6; color: var(--c-muted); }
.sol-tab-visual { min-width: 0; }
@media (min-width: 80rem) { .sol-tab { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center; padding: 2rem; } }

/* "Works with": six logos in one row on desktop, three a row on phones. */
.sol-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sol-logos .logo-tile span { overflow-wrap: anywhere; text-align: center; }
@media (min-width: 48rem) { .sol-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 2 ---------------------------------------------------------------- Mockups */
/* Pictures, not UI: inside .mock (role="img"), container queries read the mockup's width. */
.mock .sm-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); background: #FAFBFC; }
.mock .sm-foot .mock-btn { flex: none; }
.mock .sm-foot .mock-btn img { width: 0.875rem; height: 0.875rem; object-fit: contain; }
.mock .sm-progress { display: block; height: 0.3125rem; margin-top: 0.5rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.mock .sm-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--orange); }
.mock .fp > .sm-progress { margin-top: 0; }

/* Rows of people, files or items: avatar or tile, two lines, something on the right. */
.sm-rows { display: grid; }
.sm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-top: 1px solid var(--line-soft); }
.sm-row:first-child { border-top: 0; }
.sm-row-name { overflow: hidden; font-size: 0.78rem; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.sm-row-meta { overflow: hidden; font-size: 0.6875rem; line-height: 1.4; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sm-rows--boxed { border: 1px solid var(--line); border-radius: 0.625rem; }
.sm-rows--boxed .sm-row { padding: 0.5rem 0.625rem; }
.sm-row--add { display: flex; gap: 0.375rem; color: var(--muted); font-size: 0.75rem; font-weight: 500; }
.sm-row--add svg { width: 0.875rem; height: 0.875rem; }
.sm-row .chip { min-height: 1.375rem; padding: 0 0.5rem; font-size: 0.6875rem; }

/* CRM record: a list beside the open record (the list folds away on narrow mockups). */
.sm-crm { display: grid; grid-template-columns: minmax(0, 1fr); }
.sm-crm-list { display: none; padding: 0.75rem 0.625rem; border-right: 1px solid var(--line); background: #FAFBFC; }
.sm-crm-search { display: flex; align-items: center; gap: 0.375rem; margin: 0 0.25rem 0.5rem; padding: 0.3125rem 0.5rem; border: 1px solid var(--line); border-radius: 0.4375rem; background: #FFFFFF; font-size: 0.71875rem; color: var(--subtle); }
.sm-crm-search svg { width: 0.8125rem; height: 0.8125rem; }
.sm-crm-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.375rem; border-radius: 0.5rem; }
.sm-crm-row.is-on { background: #FFFFFF; box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
.sm-crm-row .mock-avatar { width: 1.5rem; height: 1.5rem; font-size: 0.5625rem; }
.sm-crm-name { overflow: hidden; margin-bottom: 0.125rem; font-size: 0.71875rem; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.sm-crm-row .stage { font-size: 0.625rem; }
.sm-crm-panel { display: grid; gap: 0.75rem; align-content: start; min-width: 0; padding: 1rem; }
.sm-crm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.sm-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.sm-fields div { padding: 0.5rem 0.625rem; border: 1px solid var(--line); border-radius: 0.5rem; }
.sm-fields dt { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sm-fields dd { overflow: hidden; margin-top: 0.125rem; font-size: 0.75rem; font-weight: 500; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.sm-crm-panel .mock-label { margin-bottom: -0.25rem; }
.sm-timeline { display: grid; gap: 0.125rem; }
.sm-timeline li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.3125rem 0; }
.sm-timeline .tile { --tile: 1.625rem; border-radius: 0.4375rem; }
.sm-tl-text { overflow: hidden; font-size: 0.71875rem; line-height: 1.35; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.sm-tl-text b { font-weight: 600; color: var(--ink); }
@container (min-width: 34rem) {
	.sm-crm { grid-template-columns: 12.5rem minmax(0, 1fr); }
	.sm-crm-list { display: block; }
}

/* Tasks waiting, with a count and a button each. */
.sm-checks { display: grid; }
.sm-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-top: 1px solid var(--line-soft); }
.sm-check:first-child { border-top: 0; }
.sm-check-n { display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; padding: 0 0.25rem; border-radius: 0.4375rem; background: #FEF3C7; color: #92400E; font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sm-check-name { min-width: 0; font-size: 0.75rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.sm-check .mock-btn { height: 1.625rem; padding: 0 0.625rem; font-size: 0.6875rem; }

/* Back office: a sidebar (from 36rem) and the Automations list with switches. */
.sm-office { display: grid; grid-template-columns: minmax(0, 1fr); }
.sm-office-side { display: none; flex-direction: column; gap: 0.125rem; padding: 0.875rem 0.625rem; border-right: 1px solid var(--line); background: #FAFBFC; }
.sm-office-main { display: grid; gap: 0.75rem; align-content: start; min-width: 0; padding: 1rem; }
.sm-autos { display: grid; gap: 0.5rem; }
.sm-auto { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.625rem; padding: 0.5625rem 0.625rem; border: 1px solid var(--line); border-radius: 0.625rem; background: #FFFFFF; }
.sm-auto .tile { --tile: 1.75rem; border-radius: 0.5rem; }
.sm-auto-name { overflow: hidden; font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.sm-auto-sub { overflow: hidden; margin-top: 0.0625rem; font-size: 0.6875rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sm-auto-last { font-size: 0.6875rem; color: var(--muted); white-space: nowrap; }
.sm-auto-watch { min-height: 1.375rem; padding: 0 0.4375rem; font-size: 0.625rem; }
.sm-auto-watch svg { width: 0.75rem; height: 0.75rem; }
.sm-switch { position: relative; flex: none; width: 1.875rem; height: 1.0625rem; border-radius: 999px; background: var(--line-strong); }
.sm-switch::after { content: ''; position: absolute; top: 0.125rem; left: 0.125rem; width: 0.8125rem; height: 0.8125rem; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); transition: transform 0.25s var(--ease-out); }
.sm-switch.is-on { background: var(--orange); }
.sm-switch.is-on::after { transform: translateX(0.8125rem); }
@container (max-width: 25rem) { .sm-auto-last { display: none; } }
@container (min-width: 36rem) {
	.sm-office { grid-template-columns: 10.5rem minmax(0, 1fr); }
	.sm-office-side { display: flex; }
	.sm-office-main { padding: 1.125rem 1.25rem; }
}

/* Texts as a client receives them (one-way). */
.sm-texts { display: grid; gap: 0.5rem; padding: 1rem; background: #F8FAFC; }
.sm-texts .bubble { max-width: 92%; }
.sm-link { font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; overflow-wrap: anywhere; }

/* Uploaded files with their checks. */
.sm-files { display: grid; }
.sm-file { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-top: 1px solid var(--line-soft); }
.sm-file:first-child { border-top: 0; }
.sm-file .tile { --tile: 1.75rem; border-radius: 0.5rem; }
.sm-file-name { overflow: hidden; font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.sm-file-meta { overflow: hidden; font-size: 0.6875rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sm-file .chip { min-height: 1.375rem; padding: 0 0.5rem; font-size: 0.6875rem; }

/* The client's phone. */
.sm-doc { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink); }
.sm-doc > svg { flex: none; color: var(--muted); }
.sm-doc-name { flex: 1; min-width: 0; font-weight: 500; }
.sm-doc .chip { min-height: 1.375rem; padding: 0 0.5rem; font-size: 0.6875rem; }
.sm-doc .mock-btn { height: 1.625rem; }

/* Booking page: days, times, the deposit. */
.sm-book { display: grid; gap: 0.875rem; padding: 1rem; }
.sm-first { display: inline-block; margin-left: 0.375rem; padding: 0 0.375rem; border-radius: 0.3125rem; background: var(--success-soft); color: var(--success); font-size: 0.625rem; font-weight: 600; }
.sm-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.375rem; margin-top: 0.375rem; }
.sm-day { display: grid; justify-items: center; gap: 0.0625rem; padding: 0.375rem 0.25rem; border: 1px solid var(--line-strong); border-radius: 0.5rem; font-size: 0.625rem; color: var(--muted); }
.sm-day b { font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.sm-day.is-on { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 2px var(--orange-ring); }
.sm-day.is-busy { border-style: dashed; background: #FAFBFC; opacity: 0.6; }
.sm-day.is-busy b { color: var(--muted); text-decoration: line-through; }
.sm-times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.375rem; margin-top: 0.375rem; }
.sm-time { padding: 0.3125rem 0.25rem; border: 1px solid var(--line-strong); border-radius: 0.4375rem; font-size: 0.71875rem; font-weight: 500; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.sm-time.is-on { border-color: var(--orange); background: var(--orange); color: var(--ink); font-weight: 600; }
.sm-time.is-busy { border-style: dashed; color: var(--subtle); text-decoration: line-through; }
.sm-pay { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid rgba(255, 122, 0, 0.28); border-radius: 0.75rem; background: var(--orange-soft); }
.sm-pay-title { font-size: 0.78rem; font-weight: 600; color: var(--ink); }
@container (min-width: 26rem) { .sm-times { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* A week of availability. */
.sm-week { display: grid; grid-template-columns: 2.5rem repeat(5, minmax(0, 1fr)); gap: 0.3125rem; padding: 1rem 1rem 0.5rem; }
.sm-week-day { font-size: 0.6875rem; font-weight: 600; color: var(--ink); text-align: center; }
.sm-week-hour { align-self: center; font-size: 0.625rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sm-slot { height: 1.5rem; border: 1px solid var(--line); border-radius: 0.375rem; background: #FFFFFF; }
.sm-slot.is-busy { border-color: transparent; background: repeating-linear-gradient(135deg, #E2E8F0 0 4px, #F1F5F9 4px 8px); }
.sm-slot.is-booked { border-color: transparent; background: var(--orange); }
.sm-legend { display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; padding: 0.25rem 1rem 1rem; font-size: 0.6875rem; color: var(--muted); }
.sm-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.sm-legend i { display: inline-block; width: 0.625rem; height: 0.625rem; border: 1px solid var(--line-strong); border-radius: 0.1875rem; background: #FFFFFF; }
.sm-legend i.is-busy { border-color: transparent; background: repeating-linear-gradient(135deg, #CBD5E1 0 2px, #F1F5F9 2px 4px); }
.sm-legend i.is-booked { border-color: transparent; background: var(--orange); }

/* Month-end invoice preview: tighter cells so four columns fit. */
.sm-inv .rt th, .sm-inv .rt td { padding-inline: 0.75rem; }
.sm-inv .rt .stage { font-size: 0.625rem; }

/* An event booking's step tracker. */
.sm-track { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); padding: 0.875rem 0.75rem 0.25rem; }
.sm-track li { position: relative; display: grid; justify-items: center; gap: 0.3125rem; }
.sm-track li + li::before { content: ''; position: absolute; top: 0.5rem; right: 50%; width: 100%; height: 2px; background: var(--line); }
.sm-track li.is-done + li::before, .sm-track li.is-now::before { background: var(--orange); }
.sm-track-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--line-strong); }
.sm-track-dot svg { width: 0.6875rem; height: 0.6875rem; stroke-width: 3; }
.sm-track .is-done .sm-track-dot { background: var(--orange); box-shadow: none; color: var(--ink); }
.sm-track .is-now .sm-track-dot { box-shadow: inset 0 0 0 2px var(--orange), 0 0 0 3px var(--orange-ring); }
.sm-track-label { overflow: hidden; max-width: 100%; font-size: 0.5625rem; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.sm-track .is-now .sm-track-label { font-weight: 600; color: var(--ink); }
@container (min-width: 30rem) { .sm-track-label { font-size: 0.625rem; } }

/* Intake form pieces. */
.sm-cond { padding: 0.625rem; border-left: 3px solid var(--orange); border-radius: 0 0.5rem 0.5rem 0; background: var(--surface-warm); }
.sm-cond-tag { display: inline-block; margin-left: 0.25rem; padding: 0 0.375rem; border-radius: 0.3125rem; background: var(--orange-soft); color: var(--orange-ink-deep); font-size: 0.5625rem; font-weight: 600; vertical-align: 0.0625rem; }
.sm-upl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border: 1px dashed var(--line-strong); border-radius: 0.5rem; background: #FAFBFC; }
.sm-upl .tile { --tile: 1.75rem; border-radius: 0.5rem; }
.sm-hint { display: flex; align-items: center; gap: 0.3125rem; margin-top: 0.3125rem; font-size: 0.6875rem; font-weight: 500; color: var(--orange-ink); }
.sm-hint svg { flex: none; }
.sm-saved { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--success); }

/* Form rules. */
.sm-rules { display: grid; gap: 0.5rem; padding: 0.875rem 1rem 1rem; }
.sm-rule { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border: 1px solid var(--line); border-radius: 0.625rem; background: #FAFBFC; font-size: 0.75rem; line-height: 1.4; color: var(--ink); }
.sm-rule .tile { --tile: 1.625rem; border-radius: 0.4375rem; }

/* A PDF page. */
.sm-pdf-wrap { position: relative; padding: 0.5rem 0.75rem 0.25rem; }
.sm-pdf { position: relative; max-width: 19rem; margin-inline: auto; padding: 1rem 1.125rem 0.75rem; border-radius: 0.25rem; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08), 0 14px 30px -12px rgba(15, 23, 42, 0.28); transform: rotate(-1.2deg); }
.sm-pdf-head { display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.625rem; border-bottom: 2px solid var(--ink); }
.sm-pdf-head b { font-family: var(--font-display); font-size: 0.75rem; color: var(--ink); }
.sm-pdf-head span span { font-size: 0.625rem; color: var(--muted); }
.sm-pdf-mark { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; background: var(--ink); color: #FFFFFF; font-family: var(--font-display); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.04em; }
.sm-pdf-sec { margin: 0.625rem 0 0.25rem; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.sm-pdf-field { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.25rem 0; border-bottom: 1px solid var(--line); font-size: 0.625rem; color: var(--muted); }
.sm-pdf-field b { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; color: var(--ink); text-align: right; }
.sm-pdf-field i { display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.25rem; border: 1px solid var(--ink); border-radius: 0.0625rem; }
.sm-pdf-field i.is-on { background: var(--ink); box-shadow: inset 0 0 0 1px #FFFFFF; }
.sm-pdf-total { border-bottom: 0; font-size: 0.6875rem; color: var(--ink); }
.sm-pdf-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem; min-height: 1.75rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--ink); font-size: 0.5625rem; color: var(--muted); }
.sm-pdf-sig { width: 6rem; height: 1.5rem; color: #1D3A8A; }
.sm-pdf-pay { padding: 0.125rem 0.5rem; border-radius: 0.25rem; background: var(--orange); color: var(--ink); font-weight: 600; }
.sm-pdf-foot { margin-top: 0.625rem; font-size: 0.5625rem; color: var(--muted); text-align: right; }
.sm-pdf-badge { position: absolute; top: 0.25rem; right: 0.5rem; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; background: #B91C1C; color: #FFFFFF; font-family: var(--font-display); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.06em; box-shadow: var(--shadow-sm); }

/* Submissions list. */
.sm-subs { display: grid; }
.sm-sub { display: grid; gap: 0.5rem; padding: 0.625rem 1rem; border-top: 1px solid var(--line-soft); }
.sm-sub:first-child { border-top: 0; }
.sm-sub.is-open { background: var(--surface-warm); }
.sm-sub-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sm-sub-actions { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.sm-sub-actions .mock-btn { height: 1.625rem; padding: 0 0.5rem; font-size: 0.6875rem; }

/* 3 ------------------------------------------ Shared mockups on these pages */
/* (The kanban board's columns on narrow pictures are in site.css.) */