/* ─────────────────────────────────────────────────────────────────────
   VITASITI — bento.css  (v5 — concept-fidelity samples)

   Layout: 12-column grid, three rows
     Row 1: Operations (cols 1–8)   | Sydney (cols 9–12)
     Row 2: Reporting (1–4) | Scheduling (5–8) | Quoting (9–12)
     Row 3: AI Integration (1–6) | Owned Code (7–12)

   Sample panels now match the concept:
     Operations  — full app shell: sidebar nav + main (KPIs + labelled
                   chart) + right Recent Activity panel.
     Reporting   — hero figure ($1.24M ↑18%) + filter + y-axis labels +
                   gridlines + bars Jan–Jun.
     Scheduling  — month + week filter header, dynamic dates via
                   {{vita_cal_*}} tokens, time-axis week grid, lavender
                   booking blocks.
     Quoting     — 4-column quote table (Item / Qty / Unit / Total) +
                   green "Sent" badge.
     AI          — big purple sparkle glyph on the left of the chat panel.

   TOC:
    1. HERO
    2. HERO TYPE OVERRIDE
    3. BENTO GRID
    4. TILE SHELL
    5. SAMPLE PANEL — shared shell
    6. OPS — app-shell sample
    7. REPORTING — hero figure + bars + axis
    8. SCHEDULING — week-time grid
    9. QUOTING — 4-col table + sent badge
   10. AI INTEGRATION — sparkle glyph + chat UI
   11. OWNED CODE — code editor sample
   12. SYDNEY — globe
   13. CTA BAND / FOOTER CTA
   14. MOBILE BREAKPOINT
   15. PREFERS-* MEDIA QUERIES
   16. VERTICAL RHYTHM
   ───────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   1. HERO
   ════════════════════════════════════════════════════════════════════ */

.vita-bento-hero {
	/* No own background — let the body's page-wide gradient show through. */
	background: transparent;
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	text-align: left;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

.vita-bento-hero.alignfull {
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

.vita-bento-hero > * {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.vita-bento-hero__lede {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--foreground);
	max-width: 600px;
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* ════════════════════════════════════════════════════════════════════
   2. HERO TYPE OVERRIDE
   ════════════════════════════════════════════════════════════════════ */

h1.wp-block-heading.vita-bento-hero__title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: clamp(3.25rem, 6.5vw, 6.75rem);
	line-height: 1.0;
	letter-spacing: -0.028em;
	color: var(--wp--preset--color--foreground);
	max-width: none;
	margin: 0 0 1.75rem;
}

h1.wp-block-heading.vita-bento-hero__title em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--foreground);
}

/* ════════════════════════════════════════════════════════════════════
   3. BENTO GRID
   ════════════════════════════════════════════════════════════════════ */

.vita-bento {
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--wp--preset--spacing--50);
	padding-right: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--70);
	width: auto !important;
}

/* Override WP's `alignfull` rule (which sets `margin-left: calc(50% - 50vw)`
   and pulls the section to the viewport edge). The bento needs to centre
   alongside the header and footer. */
.vita-bento.alignfull {
	margin-left: auto !important;
	margin-right: auto !important;
	width: auto !important;
}

.vita-bento.is-layout-constrained > *,
.vita-bento.wp-block-group-is-layout-constrained > * {
	max-width: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* ════════════════════════════════════════════════════════════════════
   4. TILE SHELL
   ════════════════════════════════════════════════════════════════════ */

.vita-bento__tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 36px;
	border-radius: 22px;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05);
	overflow: hidden;
	min-height: 420px;
}

.vita-bento__tile--dark {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.vita-bento__head {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	flex: 0 0 auto;
}

.vita-bento__heading {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.05;
	letter-spacing: -0.022em;
	color: inherit;
	margin: 0;
}

.vita-bento__body {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: inherit;
	margin: 0;
	opacity: 0.78;
	max-width: 42ch;
}

.vita-bento__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.45;
	margin: 0.15rem 0 0;
}

.vita-bento__chevron {
	position: absolute;
	top: 26px;
	right: 26px;
	width: 18px;
	height: 18px;
	color: inherit;
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

@media (hover: hover) {
	.vita-bento__tile:hover {
		box-shadow: 0 14px 40px rgba(15, 27, 45, 0.10);
	}
	.vita-bento__tile--dark:hover {
		box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
	}
	.vita-bento__tile:hover .vita-bento__chevron {
		opacity: 0.95;
	}
}

.vita-bento__tile:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

.vita-bento__tile--dark:focus-visible {
	outline-color: #FFF1EC;
}

/* ════════════════════════════════════════════════════════════════════
   5. SAMPLE PANEL — shared shell
   ════════════════════════════════════════════════════════════════════ */

.vita-sample {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	border-radius: 12px;
	overflow: hidden;
	pointer-events: none;
	min-height: 0;
}

.vita-sample--dark {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.10);
}

.vita-sample--light {
	background: rgba(255, 255, 255, 0.78);
	border: 1px solid rgba(15, 27, 45, 0.10);
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
}

.vita-sample__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.85rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.04em;
	color: inherit;
	opacity: 0.85;
}

.vita-sample__bar--light {
	border-bottom-color: rgba(15, 27, 45, 0.08);
}

.vita-sample__bar-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #6BE0B8;
	box-shadow: 0 0 0 3px rgba(107, 224, 184, 0.15);
}

.vita-sample__bar-title { flex: 1 1 auto; font-weight: 500; }
.vita-sample__bar-meta  { opacity: 0.65; }

.vita-sample__body {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 0.85rem 0.95rem 0.9rem;
	flex: 1 1 auto;
}

/* ════════════════════════════════════════════════════════════════════
   6. OPS — app-shell sample
   3-column layout: vertical sidebar nav (left) | main (centre) | recent
   activity (right). Lays out as a faux SaaS app at desktop, collapses
   the right panel on mobile.
   ════════════════════════════════════════════════════════════════════ */

.vita-sample--app {
	display: grid;
	grid-template-columns: 110px 1fr 160px;
	gap: 0;
	padding: 0;
}

.vita-app__nav {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.85rem 0.7rem;
	background: rgba(255, 255, 255, 0.03);
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
}

.vita-app__nav-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.45rem 0.55rem;
	margin-bottom: 0.4rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	color: #ffffff;
	opacity: 0.85;
}

.vita-app__nav-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.5rem;
	border-radius: 5px;
	color: rgba(255, 255, 255, 0.7);
}

.vita-app__nav-item.is-active {
	background: rgba(107, 224, 184, 0.12);
	color: #ffffff;
}

.vita-app__main {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 0.85rem 1rem 0.9rem;
	min-width: 0;
}

.vita-app__main-head { display: flex; justify-content: space-between; align-items: center; }

.vita-app__main-title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.85rem;
	color: #ffffff;
	opacity: 0.92;
}

.vita-app__chart {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.vita-app__chart-label {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	opacity: 0.7;
}

.vita-app__chart-axis {
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	letter-spacing: 0.04em;
	opacity: 0.5;
}

.vita-app__activity {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.85rem 0.85rem 0.9rem;
	background: rgba(255, 255, 255, 0.02);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.vita-app__activity-title {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	color: #ffffff;
	opacity: 0.9;
}

.vita-app__activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
}

.vita-app__activity-list li {
	display: flex;
	gap: 0.45rem;
	align-items: flex-start;
	opacity: 0.85;
}

.vita-app__activity-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex: 0 0 auto;
	margin-top: 4px;
}

.vita-app__activity-dot--mint  { background: #6BE0B8; }
.vita-app__activity-dot--amber { background: #FF8847; }
.vita-app__activity-dot--slate { background: rgba(255, 255, 255, 0.45); }

.vita-app__activity-text {
	line-height: 1.35;
}

.vita-app__activity-text small {
	display: block;
	opacity: 0.55;
	font-size: 0.85em;
	margin-top: 1px;
}

/* KPI row inside the app main column. */
.vita-kpi-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.85rem;
}

.vita-kpi { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }

.vita-kpi__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	opacity: 0.55;
}

.vita-kpi__value {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.018em;
}

.vita-kpi__value small {
	font-size: 0.65em;
	opacity: 0.75;
	margin-left: 0.05em;
}

.vita-kpi__delta {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.65rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.vita-kpi__delta--up { color: #6BE0B8; }

.vita-sample__chart {
	display: block;
	width: 100%;
	height: 56px;
}

/* ════════════════════════════════════════════════════════════════════
   7. REPORTING — hero figure + bars + axis
   ════════════════════════════════════════════════════════════════════ */

.vita-sample--reporting {
	padding: 0;
}

.vita-rev {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem 1.05rem 1rem;
	height: 100%;
}

.vita-rev__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
}

.vita-rev__title {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.8125rem;
	opacity: 0.7;
	margin-bottom: 0.15rem;
}

.vita-rev__figure {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1;
	letter-spacing: -0.025em;
	color: #1F1407;
}

.vita-rev__delta {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	color: #B5481D;
	margin-top: 0.2rem;
	font-weight: 500;
}

.vita-rev__filter {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
	font-weight: 500;
	padding: 0.35rem 0.6rem;
	background: #ffffff;
	border: 1px solid rgba(15, 27, 45, 0.12);
	border-radius: 6px;
	opacity: 0.85;
	white-space: nowrap;
}

.vita-rev__chart {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 0.5rem;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: 0.2rem;
}

.vita-rev__axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6rem;
	letter-spacing: 0.02em;
	opacity: 0.55;
	padding: 0.1rem 0 1rem;
	text-align: right;
}

.vita-rev__plot {
	position: relative;
	display: flex;
	align-items: stretch;
	border-left: 1px solid rgba(15, 27, 45, 0.18);
	padding-left: 6px;
}

.vita-rev__gridlines {
	position: absolute;
	inset: 0 0 1rem 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	pointer-events: none;
}

.vita-rev__gridlines span {
	display: block;
	height: 1px;
	background: rgba(15, 27, 45, 0.08);
}

.vita-bars {
	position: relative;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 0.45rem;
	align-items: end;
	min-height: 100px;
	flex: 1 1 auto;
}

.vita-bars__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	height: 100%;
	justify-content: flex-end;
}

.vita-bars__bar {
	width: 100%;
	max-width: 22px;
	background: #C43E0E;
	border-radius: 4px 4px 0 0;
	min-height: 8px;
}

.vita-bars__bar--current { background: #8E2A06; }

.vita-bars__label {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.625rem;
	letter-spacing: 0.02em;
	opacity: 0.62;
	font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════════
   8. SCHEDULING — week + time grid
   ════════════════════════════════════════════════════════════════════ */

.vita-sample--scheduling {
	padding: 0;
}

.vita-cal__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid rgba(15, 27, 45, 0.08);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
}

.vita-cal__head-left {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.vita-cal__month {
	font-weight: 700;
	color: #1F1F47;
	font-size: 0.85rem;
}

.vita-cal__nav {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.vita-cal__nav span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: rgba(31, 31, 71, 0.06);
	font-size: 0.65rem;
	color: #1F1F47;
}

.vita-cal__today {
	width: auto !important;
	padding: 0 0.45rem;
	font-size: 0.65rem !important;
	font-weight: 500;
}

.vita-cal__filter {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
	font-weight: 500;
	padding: 0.3rem 0.55rem;
	background: #ffffff;
	border: 1px solid rgba(15, 27, 45, 0.12);
	border-radius: 6px;
}

.vita-cal__grid {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.vita-cal__row {
	display: grid;
	grid-template-columns: 50px repeat(5, 1fr);
	border-bottom: 1px solid rgba(15, 27, 45, 0.06);
	min-height: 38px;
}

.vita-cal__row:last-child { border-bottom: none; }

.vita-cal__row--days {
	background: rgba(31, 31, 71, 0.03);
	min-height: 32px;
}

.vita-cal__day {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
	font-weight: 600;
	color: #1F1F47;
	opacity: 0.85;
}

.vita-cal__time,
.vita-cal__time-cell {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 0.3rem 0.5rem 0 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.6rem;
	letter-spacing: 0.02em;
	color: rgba(31, 31, 71, 0.55);
	border-right: 1px solid rgba(15, 27, 45, 0.06);
}

.vita-cal__cell {
	position: relative;
	border-right: 1px solid rgba(15, 27, 45, 0.06);
	padding: 3px;
}

.vita-cal__cell:last-child { border-right: none; }

.vita-cal__block {
	display: block;
	padding: 0.32rem 0.4rem;
	border-radius: 5px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.575rem;
	font-weight: 600;
	line-height: 1.2;
	color: #1F1F47;
}

.vita-cal__block small {
	display: block;
	font-weight: 400;
	opacity: 0.7;
	margin-top: 1px;
}

.vita-cal__block--a { background: #C8C0F0; }
.vita-cal__block--b { background: #DCD6F5; }
.vita-cal__block--c { background: #BBB4EF; }

/* ════════════════════════════════════════════════════════════════════
   9. QUOTING — 4-col table + Sent badge
   ════════════════════════════════════════════════════════════════════ */

.vita-quote {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem 1.05rem 1rem;
	flex: 1 1 auto;
}

.vita-quote__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid rgba(15, 27, 45, 0.10);
}

.vita-quote__num {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
	font-weight: 500;
	opacity: 0.6;
	margin-bottom: 0.15rem;
}

.vita-quote__client {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.15;
}

.vita-quote__badge {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.65rem;
	font-weight: 700;
	padding: 0.25rem 0.55rem;
	background: #1E8A56;
	color: #ffffff;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

.vita-quote__items {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.7rem;
}

.vita-quote__items th {
	padding: 0.35rem 0;
	text-align: left;
	font-weight: 600;
	font-size: 0.6rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0.55;
	border-bottom: 1px solid rgba(15, 27, 45, 0.10);
}

.vita-quote__items td {
	padding: 0.4rem 0;
	border-top: 1px solid rgba(15, 27, 45, 0.06);
}

.vita-quote__items thead + tbody tr:first-child td {
	border-top: none;
}

.vita-quote__items th:nth-child(2),
.vita-quote__items td:nth-child(2) { text-align: right; padding-right: 0.5rem; font-variant-numeric: tabular-nums; }
.vita-quote__items th:nth-child(3),
.vita-quote__items td:nth-child(3) { text-align: right; padding-right: 0.5rem; font-variant-numeric: tabular-nums; }
.vita-quote__items th:nth-child(4),
.vita-quote__items td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; }

.vita-quote__items tfoot td {
	border-top: 1px solid rgba(15, 27, 45, 0.20);
	padding-top: 0.5rem;
	font-weight: 600;
	font-size: 0.85rem;
}

/* ════════════════════════════════════════════════════════════════════
  10. AI INTEGRATION — big sparkle glyph + chat UI
   ════════════════════════════════════════════════════════════════════ */

/* AI Agents tile — solid deep plum, matches body.vita-service--ai-agents
   --cap-bg on the detail page. Renamed from --ai to --ai-agents to align
   with the page slug and the detail body modifier; the legacy
   .vita-bento__tile--ai selector is removed because it produced a lavender
   gradient that collided with .vita-bento__tile--scheduling. */
.vita-bento__tile--ai-agents {
	background: #5A3F8C;
	color: #ffffff;
}

.vita-sample--ai {
	background: transparent;
	border: none;
	box-shadow: none;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 0.85rem;
	align-items: flex-end;
	padding: 0;
}

.vita-ai-glyph {
	flex: 0 0 auto;
	align-self: flex-end;
	margin-bottom: 38px;
}

.vita-ai-glyph svg {
	display: block;
	filter: drop-shadow(0 6px 16px rgba(91, 63, 188, 0.35));
}

.vita-chat {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0;
}

.vita-chat__row {
	display: flex;
	gap: 0.5rem;
	align-items: flex-end;
}

.vita-chat__row--user { justify-content: flex-end; }
.vita-chat__row--ai   { justify-content: flex-start; }

.vita-chat__bubble {
	display: block;
	max-width: 88%;
	padding: 0.6rem 0.75rem;
	border-radius: 14px 14px 4px 14px;
	background: #ffffff;
	color: #2A1A5E;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	line-height: 1.4;
	box-shadow: 0 1px 3px rgba(42, 26, 94, 0.08);
}

.vita-chat__bubble--ai {
	border-radius: 14px 14px 14px 4px;
	/* Lighter purple keeps the chat-bubble metaphor readable on the solid
	   #5A3F8C plum tile background (the previous #5B3FBC was nearly
	   identical to the tile bg). */
	background: #B49EE7;
	color: #2A1A5E;
}

.vita-chat__ts {
	display: block;
	font-size: 0.6rem;
	opacity: 0.55;
	margin-top: 0.2rem;
	font-family: var(--wp--preset--font-family--mono);
}

.vita-chat__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #B49EE7; /* lighter purple — readable on the plum tile bg */
	color: #2A1A5E;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	flex: 0 0 auto;
}

.vita-chat__input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding: 0.65rem 0.85rem;
	background: #ffffff;
	border-radius: 999px;
	box-shadow: 0 1px 3px rgba(42, 26, 94, 0.06);
}

.vita-chat__input-text {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.75rem;
	color: #5B3FBC;
	opacity: 0.55;
}

.vita-chat__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #5B3FBC;
	color: #ffffff;
}

/* ════════════════════════════════════════════════════════════════════
  11. OWNED CODE — code editor sample
   ════════════════════════════════════════════════════════════════════ */

.vita-bento__tile--owned {
	background: #0F1B2D; /* matches body.vita-service--ip-data --cap-bg */
	color: #ffffff;
}

.vita-code {
	margin: 0;
	padding: 0.85rem 0.95rem 0.85rem;
	background: transparent;
	color: #D8E1F0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.65;
	white-space: pre-wrap;
	overflow-x: auto;
}

.vita-code code { font-family: inherit; }
.vita-code__ln  { display: inline-block; width: 1.5em; opacity: 0.35; margin-right: 0.5rem; user-select: none; text-align: right; }
.vita-code__kw  { color: #C792EA; }
.vita-code__fn  { color: #82AAFF; }
.vita-code__var { color: #F07178; }
.vita-code__type{ color: #FFCB6B; }
.vita-code__str { color: #C3E88D; }

/* ════════════════════════════════════════════════════════════════════
  12. SYDNEY — globe (unchanged from v4)
   ════════════════════════════════════════════════════════════════════ */

.vita-bento__tile--sydney {
	background:
		radial-gradient(circle at 30% 20%, rgba(107, 224, 184, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 70% 80%, rgba(255, 136, 71, 0.10) 0%, transparent 45%),
		linear-gradient(160deg, #0B1B2D 0%, #050D18 100%);
	color: #F5F0E6;
	justify-content: flex-start;
	position: relative;
}

.vita-bento__tile--sydney .vita-bento__heading,
.vita-bento__tile--sydney .vita-bento__body { color: #F5F0E6; }
.vita-bento__tile--sydney .vita-bento__body { opacity: 0.78; }
.vita-bento__tile--sydney .vita-bento__chevron { color: #F5F0E6; }

.vita-globe {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 16px;
	display: flex;
	justify-content: center;
	padding: 0 8px;
	box-sizing: border-box;
	pointer-events: none;
	z-index: 0;
}

.vita-globe svg {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
}

.vita-bento__tile--sydney .vita-bento__head { position: relative; z-index: 1; }

/* Tile color variants — Operations darker (near-black with green tint),
   Reporting peach->orange gradient, Scheduling softer lavender. */
/* Home bento tile colours match the corresponding detail-page hero
   --cap-bg exactly (see body.vita-service--<slug> below) so a visitor
   moving from a home tile to its detail page sees the same colour
   identity. Don't drift these without updating the matching --cap-bg
   in lockstep — the regression spec
   tests/e2e/bento-tile-colours.spec.js asserts the match. */
.vita-bento__tile--operations { background: #1F3933; color: #ffffff; }
.vita-bento__tile--reporting  { background: #FF8847; color: #ffffff; }
.vita-bento__tile--scheduling { background: #6B9DFF; color: #ffffff; }
.vita-bento__tile--quoting    { background: #6BE0B8; color: #0F1B2D; }

/* ════════════════════════════════════════════════════════════════════
  13. CTA BAND / FOOTER CTA
   ════════════════════════════════════════════════════════════════════ */

.vita-foot-cta {
	padding: 0 var(--wp--preset--spacing--50);
	margin-top: var(--wp--preset--spacing--70);
}

.vita-foot-cta__inner {
	max-width: 1200px;
	margin: 0 auto;
	background: #0B1119;
	color: #F5F0E6;
	border-radius: 18px;
	padding: 28px 32px;
	/* Grid layout (mirroring .vita-cap-foot-cta__inner on capability
	   pages) so the V-mark stays beside the text at every viewport.
	   The previous flex layout flipped to flex-direction:column at
	   <900px, stacking V above the text. With the mobile override
	   below, the pill drops below the row but V stays beside text. */
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas: "mark text button";
	align-items: center;
	column-gap: 0.85rem;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
	position: relative;
	overflow: hidden;
}

/* V-mark sits directly next to the text column at every viewport. */
.vita-foot-cta__mark {
	grid-area: mark;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #F5F0E6;
	opacity: 0.95;
}

.vita-foot-cta__mark svg {
	display: block;
	width: 42px;
	height: auto;
}

.vita-foot-cta__text {
	grid-area: text;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.vita-foot-cta__headline {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: clamp(1.125rem, 1.6vw, 1.3rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #ffffff;
	margin: 0;
}

.vita-foot-cta__sub {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 400;
	font-size: 0.875rem;
	line-height: 1.5;
	color: rgba(245, 240, 230, 0.65);
	margin: 0;
	max-width: 60ch;
}

.vita-foot-cta__pill {
	grid-area: button;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.78rem 1.4rem;
	background: #ffffff;
	color: #0B1119;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.vita-foot-cta__pill:hover {
	background: #F5F0E6;
	color: #0B1119;
	transform: translateX(2px);
}

.vita-cta-pill {
	display: inline-block;
	padding: 0.85rem 1.65rem;
	background: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.18s ease;
}

.vita-cta-pill:hover {
	background: var(--wp--preset--color--foreground-2);
	color: var(--wp--preset--color--background);
}

.vita-cta-pill--inverted { background: #ffffff; color: #0F1B2D; }
.vita-cta-pill--inverted:hover { background: #F5F0E6; color: #0F1B2D; }

/* ════════════════════════════════════════════════════════════════════
  14. MOBILE BREAKPOINT
   ════════════════════════════════════════════════════════════════════ */

@media (max-width: 899.98px) {
	.vita-bento {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.vita-bento__tile { padding: 24px; min-height: 280px; }
	.vita-bento__chevron { top: 18px; right: 18px; }
	.vita-bento-hero { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
	.vita-foot-cta { padding: 0 var(--wp--preset--spacing--40); }
	.vita-foot-cta__inner {
		/* Two-column at narrow widths: V stays beside text on the top row;
		   pill drops to a full-width row below. Never stacks the V above
		   the text. */
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"mark text"
			"button button";
		row-gap: 14px;
		padding: 24px;
	}
	.vita-foot-cta__pill { justify-self: stretch; justify-content: center; }
	.vita-foot-cta__mark svg { width: 36px; }

	/* ───────────────────────────────────────────────────────────────────
	   MOBILE-APP REIMAGINING
	   At <900px the samples present as native mobile-app screens, not
	   shrunken desktop dashboards. Every sample gets a phone-frame look
	   (rounded corners, internal status bar) and content restyled for a
	   phone-screen idiom.
	   ─────────────────────────────────────────────────────────────────── */

	/* Phone-frame shell for every sample. The ::before is a faux iOS-style
	   status bar (time on the left, signal/wifi/battery on the right).
	   On tablet widths (>=600px) the sample caps at a phone-screen width
	   and centres horizontally — without the cap the phone illusion breaks
	   (status bar stretches across 700+ px, bars chart looks sparse because
	   `.vita-bars__bar` is `max-width: 22px`). */
	.vita-sample {
		border-radius: 22px;
		padding-top: 28px;
		position: relative;
		isolation: isolate;
		width: 100%;
		max-width: 380px;
		margin-left: auto;
		margin-right: auto;
		box-sizing: border-box;
	}
	.vita-sample::before {
		content: "9:41";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 28px;
		padding: 0 18px;
		display: flex;
		align-items: center;
		font-family: var(--wp--preset--font-family--sans);
		font-size: 0.7rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		color: inherit;
		opacity: 0.95;
		z-index: 2;
	}
	.vita-sample::after {
		content: "";
		position: absolute;
		top: 11px;
		right: 18px;
		width: 38px;
		height: 8px;
		background:
			radial-gradient(circle 1.6px at 3px 4px, currentColor 100%, transparent 0),
			radial-gradient(circle 1.6px at 9px 4px, currentColor 100%, transparent 0),
			radial-gradient(circle 1.6px at 15px 4px, currentColor 100%, transparent 0),
			linear-gradient(currentColor 0 0) 22px 1px / 14px 6px no-repeat,
			linear-gradient(currentColor 0 0) 36px 3px / 2px 2px no-repeat;
		opacity: 0.85;
		z-index: 2;
	}

	/* ── OPERATIONS ── "Field Ops" job tracker app
	   Drop the desktop sidebar; show a single-column phone screen with a
	   nav-bar title, two KPI cards, a chart card, and a faux bottom tab bar. */
	.vita-sample--app {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 28px 0 56px;
	}
	.vita-sample--app .vita-app__nav { display: none; }
	.vita-sample--app .vita-app__activity { display: none; }
	.vita-sample--app .vita-app__main {
		padding: 12px 14px 14px;
		gap: 12px;
	}
	.vita-sample--app .vita-app__main-head {
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.vita-sample--app .vita-app__main-title {
		font-size: 1.05rem;
		opacity: 1;
		font-weight: 700;
		letter-spacing: -0.012em;
	}
	.vita-kpi-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.vita-sample--app .vita-kpi {
		padding: 10px 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
	}
	.vita-sample--app .vita-kpi__label {
		font-size: 0.6rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		opacity: 0.55;
		margin-bottom: 6px;
	}
	.vita-sample--app .vita-kpi__value { font-size: 1.4rem; }
	.vita-kpi--desktop { display: none; }
	.vita-sample--app .vita-app__chart {
		padding: 12px;
		background: rgba(255, 255, 255, 0.05);
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-radius: 12px;
		gap: 8px;
	}
	.vita-sample--app .vita-app__chart-label {
		font-size: 0.65rem;
		text-transform: uppercase;
		letter-spacing: 0.06em;
		opacity: 0.7;
	}
	/* Bottom tab bar (faux iOS tab bar) */
	.vita-sample--app {
		background:
			radial-gradient(circle 4px at 19% 100%, rgba(107, 224, 184, 0.9) 100%, transparent 0) 0 -22px,
			radial-gradient(circle 3px at 39.5% 100%, currentColor 100%, transparent 0) 0 -22px,
			radial-gradient(circle 3px at 60% 100%, currentColor 100%, transparent 0) 0 -22px,
			radial-gradient(circle 3px at 80% 100%, currentColor 100%, transparent 0) 0 -22px,
			linear-gradient(rgba(255, 255, 255, 0.05) 0 0) 0 100% / 100% 44px no-repeat,
			linear-gradient(rgba(255, 255, 255, 0.10) 0 0) 0 calc(100% - 44px) / 100% 1px no-repeat,
			rgba(255, 255, 255, 0.04);
	}

	/* ── REPORTING ── "Revenue" mobile dashboard
	   Hero figure card on top, vertical bar chart below. */
	.vita-sample--reporting { padding-top: 28px; padding-bottom: 14px; }
	.vita-rev { padding: 14px 14px 12px; gap: 12px; height: auto; }
	.vita-rev__head {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		row-gap: 8px;
	}
	.vita-rev__title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; }
	.vita-rev__figure { font-size: 2.1rem; letter-spacing: -0.03em; }
	.vita-rev__delta { font-size: 0.75rem; margin-top: 4px; }
	.vita-rev__filter {
		font-size: 0.65rem;
		padding: 0.35rem 0.6rem;
		background: #ffffff;
		border-radius: 999px;
	}
	.vita-rev__chart { grid-template-columns: 36px minmax(0, 1fr); gap: 6px; }
	.vita-rev__plot { min-width: 0; }
	.vita-rev__axis span { font-size: 0.55rem; }
	/* Bars grid was repeat(6, 1fr), which resolves to minmax(auto, 1fr)
	   and honors the column's min-content (label "Jan"/"Feb" ≈ 18px each).
	   With 6 cols + 5 gaps that minimum > the plot cell at 320, so the
	   bars + last label (Jun) overflowed past the card's right padding.
	   minmax(0, 1fr) lets columns shrink; smaller label font keeps them
	   readable. */
	.vita-sample--reporting .vita-bars {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.3rem;
	}
	.vita-sample--reporting .vita-bars__label { font-size: 0.55rem; }

	/* ── SCHEDULING ── "Calendar" agenda list
	   Replace the week grid with a vertical list of bookings — Apple-Calendar-
	   list-view feel. Hide rows that have no bookings; flatten the others. */
	.vita-sample--scheduling { padding-top: 28px; }
	.vita-cal__head { padding: 8px 14px 10px; gap: 8px; }
	.vita-cal__month { font-size: 0.95rem; white-space: nowrap; }
	/* Hide the inline < > Today nav on phones — there is not room for it
	   alongside month + Week pill at 320px (Week clipped past card edge).
	   Mobile-calendar pattern uses month + filter only. */
	.vita-cal__nav { display: none; }
	.vita-cal__filter {
		font-size: 0.65rem;
		padding: 0.35rem 0.75rem;
		border-radius: 999px;
		white-space: nowrap;
		flex: 0 0 auto;
	}
	.vita-cal__grid { padding: 0 8px 8px; }
	/* Restructure remaining rows into stacked agenda entries */
	.vita-cal__row {
		display: flex;
		flex-direction: column;
		grid-template-columns: none;
		gap: 6px;
		min-height: 0;
		padding: 8px 6px;
		border-bottom: 1px solid rgba(15, 27, 45, 0.04);
	}
	/* Hide the day-labels row + rows with no bookings (empty 8/12/4 PM slots).
	   These rules MUST come after the .vita-cal__row display rule above —
	   same specificity, later wins. */
	.vita-sample--scheduling .vita-cal__row--days { display: none; }
	.vita-sample--scheduling .vita-cal__row:not(.vita-cal__row--days):not(:has(.vita-cal__block)) { display: none; }
	.vita-cal__time {
		font-size: 0.65rem;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: rgba(31, 31, 71, 0.55);
		padding: 0;
		border-right: none;
		justify-content: flex-start;
	}
	.vita-cal__cell {
		display: block;
		border-right: none;
		padding: 0;
	}
	/* Hide empty cells within populated rows */
	.vita-cal__cell:not(:has(.vita-cal__block)) { display: none; }
	.vita-cal__block {
		display: block;
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 0.78rem;
		font-weight: 600;
		line-height: 1.25;
	}
	.vita-cal__block small {
		font-size: 0.65rem;
		margin-top: 3px;
		opacity: 0.6;
	}

	/* ── QUOTING ── "Invoice" mobile screen
	   Hide the table header; reflow rows as stacked label + total lines. */
	.vita-sample--light .vita-quote { padding: 12px 14px 14px; gap: 10px; }
	.vita-quote__head { padding-bottom: 10px; }
	.vita-quote__client { font-size: 1rem; }
	.vita-quote__items thead { display: none; }
	.vita-quote__items,
	.vita-quote__items tbody,
	.vita-quote__items tfoot { display: block; width: 100%; }
	.vita-quote__items tr {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 12px;
		padding: 10px 0;
		border-bottom: 1px solid rgba(15, 27, 45, 0.06);
	}
	.vita-quote__items tbody tr td { padding: 0; border: none; font-size: 0.78rem; }
	.vita-quote__items tbody tr td:nth-child(1) { font-weight: 600; flex: 1 1 auto; }
	.vita-quote__items tbody tr td:nth-child(2),
	.vita-quote__items tbody tr td:nth-child(3) {
		display: none;
	}
	.vita-quote__items tbody tr td:nth-child(4) {
		flex: 0 0 auto;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
	}
	.vita-quote__items tfoot tr {
		border-bottom: none;
		border-top: 1px solid rgba(15, 27, 45, 0.20);
		padding-top: 12px;
		margin-top: 4px;
	}
	.vita-quote__items tfoot td { border: none; padding: 0; font-size: 0.95rem; }
	.vita-quote__items tfoot td:nth-child(1) { font-weight: 600; }
	.vita-quote__items tfoot td:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

	/* ── AI INTEGRATION ── "Messages"-style chat screen
	   Move the sparkle glyph inline as a compact AI avatar; let chat take
	   the full width of the sample card. */
	.vita-sample--ai {
		display: flex;
		flex-direction: column;
		padding: 28px 14px 12px;
		gap: 10px;
		background: rgba(255, 255, 255, 0.55);
		border-radius: 22px;
	}
	.vita-sample--ai::before { color: #2A1A5E; }
	.vita-sample--ai::after { color: #2A1A5E; }
	.vita-ai-glyph {
		align-self: flex-start;
		margin: 0;
		flex: 0 0 auto;
	}
	.vita-ai-glyph svg { width: 28px; height: 28px; }
	.vita-chat__bubble { font-size: 0.78rem; }
	.vita-chat__input { margin-top: 4px; }

	/* ── OWNED CODE ── mobile code editor
	   Tighten the code, polish the file-tab bar, give it a phone-screen feel. */
	.vita-bento__tile--owned .vita-sample { padding-top: 28px; }
	.vita-bento__tile--owned .vita-sample__bar {
		padding: 0.7rem 0.95rem;
		border-bottom: 1px solid rgba(255, 255, 255, 0.10);
	}
	.vita-code {
		padding: 0.9rem 0.95rem 1rem;
		font-size: 0.7rem;
		line-height: 1.55;
	}
	.vita-code__ln {
		width: 1.6em;
		opacity: 0.3;
		margin-right: 0.6rem;
	}

	/* ── SYDNEY ── globe (mobile fix preserved from previous commit) ── */
	.vita-bento__tile--sydney { min-height: 360px; }
	.vita-bento__tile--sydney .vita-globe {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		padding: 0;
		margin-top: auto;
		align-self: center;
		width: 100%;
	}
	.vita-bento__tile--sydney .vita-globe svg {
		max-width: 220px;
		max-height: 200px;
		margin: 0 auto;
	}
}

@media (min-width: 900px) {
	.vita-bento {
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-areas:
			"ops ops ops ops ops ops ops ops sydney sydney sydney sydney"
			"rep rep rep rep sch sch sch sch quo quo quo quo"
			"ai ai ai ai ai ai own own own own own own";
		grid-template-rows: minmax(540px, auto) minmax(440px, auto) minmax(420px, auto);
		gap: 1.5rem;
		align-items: stretch;
	}

	.vita-bento__tile--operations  { grid-area: ops; }
	.vita-bento__tile--sydney      { grid-area: sydney; }
	.vita-bento__tile--reporting   { grid-area: rep; }
	.vita-bento__tile--scheduling  { grid-area: sch; }
	.vita-bento__tile--quoting     { grid-area: quo; }
	.vita-bento__tile--ai-agents   { grid-area: ai; }
	.vita-bento__tile--owned       { grid-area: own; }
}

/* ────────────────────────────────────────────────────────────────────
   NARROW DESKTOP (900-1199px)
   At small laptop / iPad-landscape widths the desktop grid is in play
   but row-2 tiles are only ~280-310px wide. Several samples designed
   for ~400px tiles break: Ops shows 4 KPIs (last two clash with the
   chart), Scheduling crams 5 day columns + nav arrows + Week pill,
   Quoting's 4-col table clips on the right.
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) and (max-width: 1199.98px) {
	/* OPERATIONS: at narrow desktop the row-1 tile (~600px) gives the
	   main column only ~310px after the sidebar + activity panel. Four
	   KPIs in one row gave each ~56px which clipped $246K and collided
	   with the next value. Keep all four KPIs + Recent Activity, but
	   stack the KPIs as a 2x2 grid with `minmax(0, 1fr)` to prevent
	   horizontal overflow. */
	.vita-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* SCHEDULING: hide the inline < > Today nav (same as mobile) so the
	   Week pill keeps room and doesn't wrap its ▾ caret. Stack each day
	   label as name / number on two lines so cells don't collide. */
	.vita-bento__tile--scheduling .vita-cal__nav { display: none; }
	.vita-cal__head { gap: 8px; }
	.vita-cal__filter { white-space: nowrap; flex: 0 0 auto; }
	.vita-cal__day {
		flex-direction: column;
		line-height: 1.15;
		font-size: 0.65rem;
		white-space: normal;
		gap: 1px;
	}

	/* QUOTING: hide Unit Price column so Item / Qty / Total fit inside
	   the narrow tile without clipping the right edge. */
	.vita-quote__items th:nth-child(3),
	.vita-quote__items td:nth-child(3) { display: none; }
	.vita-quote__items tfoot tr td[colspan="3"] { /* keep tfoot intact */ }
}

/* ════════════════════════════════════════════════════════════════════
  15. PREFERS-* MEDIA QUERIES
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
	.vita-bento__tile { transition: transform 220ms ease, box-shadow 220ms ease; }

	@media (hover: hover) {
		.vita-bento__tile:hover { transform: translateY(-2px); }
	}
}

@media (prefers-contrast: more) {
	.vita-bento__tile {
		background: var(--wp--preset--color--foreground);
		color: var(--wp--preset--color--background);
		border-top: 4px solid var(--accent-color);
	}
	.vita-bento__tile--operations  { --accent-color: #1F3933; }
	.vita-bento__tile--sydney      { --accent-color: #0B1B2D; }
	.vita-bento__tile--reporting   { --accent-color: #FF8847; }
	.vita-bento__tile--scheduling  { --accent-color: #BFB3EE; }
	.vita-bento__tile--quoting     { --accent-color: #6BE0B8; }
	.vita-bento__tile--ai-agents   { --accent-color: #B49EE7; }
	.vita-bento__tile--owned       { --accent-color: #0B1B2D; }
}

@media print {
	body, .vita-bento-hero, .vita-bento, .vita-foot-cta {
		background: #ffffff !important;
		color: var(--wp--preset--color--foreground) !important;
	}
	.vita-bento__tile {
		background: #ffffff !important;
		color: var(--wp--preset--color--foreground) !important;
		border: 1px solid var(--wp--preset--color--foreground);
		box-shadow: none !important;
	}
}

/* ════════════════════════════════════════════════════════════════════
  16. VERTICAL RHYTHM
   ════════════════════════════════════════════════════════════════════ */

.wp-site-blocks > main > .wp-block-post-content > * + * {
	margin-top: 0;
}

/* ============================================================
   CAPABILITY PAGE — bento composition
   Applied on pages with body class `vita-service--<slug>`.
   Spec: docs/superpowers/specs/2026-05-30-capabilities-visual-punch-design.md
   Mockup: docs/superpowers/specs/2026-05-30-capabilities-operations-mockup.html
   Rules: .claude/Rules/responsive-bento-page-rules.md
   ============================================================ */

/* Per-slug CSS variables. Each capability page slug sets its hero
   background colour, the foreground text colour, and the mint/amber
   accent used inside the sample panel for pills, sparkline strokes,
   and status dots. Only Operations is shipped in Phase 1; the other
   four are stubbed here so per-capability Phase 2 work just slots in. */
/* --cap-accent is the WIDER-PAGE accent (pair-card swatches, dual-row tile
   tints) — usually a desaturated pair to the bg. --cap-app-accent is the
   IN-SAMPLE accent (mini-app pills, nav active state, KPI highlights, chart
   strokes) — usually the saturated brand colour so the mini-app reads as
   "scheduled in indigo" / "reporting in amber", not "operations in mint". */
/* Vertical rhythm token applied to every capability-page section. Used by
   .vita-cap-hero (bottom), .vita-cap-promises, .vita-cap-trust, .vita-cap-dual,
   and .vita-cap-foot-cta (top) so the gap between any two stacked sections is
   the same across every capability page. Stat strip keeps its tighter inset
   padding (it's intentionally a thin band, not a tile row). */
body[class*="vita-service--"] {
  --vita-cap-section-pad: clamp(56px, 8vw, 80px);
}

/* Same token, scoped to the interior-page chrome itself so the variable
   is defined wherever these classes appear — not only on capability-detail
   pages with a `vita-service--<slug>` body class. Lets /about/ and other
   pages reuse the chrome without each one needing its own body modifier. */
.vita-cap-hero,
.vita-cap-promises,
.vita-cap-dual,
.vita-cap-trust,
.vita-cap-stat-strip,
.vita-cap-foot-cta {
  --vita-cap-section-pad: clamp(56px, 8vw, 80px);
}

body.vita-service--operations {
  --cap-bg:              #1F3933;
  --cap-fg:              #ffffff;
  --cap-accent:          #6BE0B8; /* mint */
  --cap-app-accent:      #6BE0B8;
  --cap-app-accent-text: #0F1B2D; /* dark text on mint */
  --cap-app-deep:        #0E1F1A; /* monochromatic sample-panel surface */
  --cap-app-deeper:      #08130F;
}
body.vita-service--reporting {
  --cap-bg:              #FF8847; /* amber */
  --cap-fg:              #ffffff;
  --cap-accent:          #FFE4D4; /* peach tile-tint */
  --cap-app-accent:      #FF8847; /* amber — in-sample */
  --cap-app-accent-text: #ffffff;
  --cap-app-deep:        #4D1E08; /* deep burnt-amber sample surface */
  --cap-app-deeper:      #2B0F02;
}
body.vita-service--scheduling {
  --cap-bg:              #6B9DFF; /* indigo */
  --cap-fg:              #ffffff;
  --cap-accent:          #DCE7FF; /* lavender tile-tint */
  --cap-app-accent:      #6B9DFF; /* indigo — in-sample */
  --cap-app-accent-text: #ffffff;
  --cap-app-deep:        #14224A; /* deep navy sample surface */
  --cap-app-deeper:      #08102E;
}
body.vita-service--quoting {
  --cap-bg:              #6BE0B8; /* mint — DARK foreground */
  --cap-fg:              #0F1B2D;
  --cap-accent:          #1F3933; /* dark-green tile-tint */
  --cap-app-accent:      #6BE0B8; /* mint — in-sample (brand) */
  --cap-app-accent-text: #0F1B2D;
  --cap-app-deep:        #0E1F1A; /* deep teal sample surface */
  --cap-app-deeper:      #08130F;
}
body.vita-service--ip-data {
  --cap-bg:              #0F1B2D; /* ink */
  --cap-fg:              #ffffff;
  --cap-accent:          #6BE0B8; /* mint */
  --cap-app-accent:      #6BE0B8;
  --cap-app-accent-text: #0F1B2D;
  --cap-app-deep:        #050B17; /* deep ink sample surface */
  --cap-app-deeper:      #020610;
}
body.vita-service--ai-agents {
  --cap-bg:              #5A3F8C; /* deep plum */
  --cap-fg:              #ffffff;
  --cap-accent:          #F0E6FF; /* pale lavender tile-tint */
  --cap-app-accent:      #A684F0; /* medium violet in-sample */
  --cap-app-accent-text: #ffffff;
  --cap-app-deep:        #2E1F4A; /* deep plum sample surface */
  --cap-app-deeper:      #1A0F2E;
}

/* Scope-override: inside the sample panel, the existing `var(--cap-accent,…)`
   refs throughout the shared chrome + per-cap CSS resolve to the in-sample
   brand colour instead of the wider-page tile tint. Zero existing CSS needs
   to change — they all already read --cap-accent. */
.vita-cap-sample {
	--cap-accent: var(--cap-app-accent, #6BE0B8);
}

/* (Per-capability dark sample-panel surface now flows from
   --cap-app-deeper / --cap-app-deep — see the body.vita-service--*
   var blocks above. No per-page overrides needed.) */

/* Foot-CTA glyph now uses fill="currentColor" (the V logo SVG). The dark
   inset card sets color:#ffffff, so the V auto-renders white on every
   capability page including Quoting (the dark inset overrides the mint
   page bg). No per-page override needed. */

/* ── CAPABILITY HERO ──────────────────────────────────────────────── */

.vita-cap-hero {
	background: var(--cap-bg);
	color: var(--cap-fg);
	padding: clamp(48px, 8vw, 72px) clamp(20px, 5vw, 24px) var(--vita-cap-section-pad);
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 4vw, 40px);
}

h1.wp-block-heading.vita-cap-hero__title {
	font-family: var(--wp--preset--font-family--sans), ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(2.25rem, 7.5vw, 6.25rem);
	line-height: 1.0;
	letter-spacing: -0.028em;
	max-width: 16ch;
	color: var(--cap-fg);
}

.vita-cap-hero__title em {
	font-family: var(--wp--preset--font-family--serif), ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 400;
}

.vita-cap-hero__lede {
	font-size: clamp(1rem, 2.4vw, 1.25rem);
	line-height: 1.5;
	max-width: 60ch;
	opacity: 0.82;
}

.vita-cap-hero__cta-row {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.vita-cap-hero__cta-pill {
	background: var(--cap-fg);
	color: var(--cap-bg);
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 500;
	font-size: 15px;
	text-decoration: none;
	transition: transform .12s ease;
}

.vita-cap-hero__cta-pill:hover {
	transform: translateY(-1px);
}

.vita-cap-hero__cta-ghost {
	color: var(--cap-fg);
	opacity: .65;
	font-size: 12px;
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	text-transform: uppercase;
	letter-spacing: .1em;
	text-decoration: none;
	font-weight: 500;
}

@media (max-width: 480px) {
	.vita-cap-hero__cta-pill {
		width: 100%;
		text-align: center;
	}
	.vita-cap-hero__cta-ghost {
		width: 100%;
		text-align: center;
		padding: 8px 0;
	}
}

/* ── CAPABILITY SAMPLE PANEL — desktop (≥1200) ────────────────────── */

.vita-cap-sample {
	background: var(--cap-app-deeper, rgba(0, 0, 0, 0.36));
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: clamp(14px, 2vw, 22px);
	padding: clamp(10px, 1.8vw, 18px);
	color: #ffffff;
}

.vita-cap-sample__bar {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0.6;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 8px 14px;
	gap: 10px;
}

.vita-cap-sample__pills {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.08);
	padding: 3px;
	border-radius: 999px;
	font-size: 12px;
	text-transform: none;
	letter-spacing: 0;
}

.vita-cap-sample__pill {
	padding: 5px 12px;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.82);
	cursor: pointer;
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 500;
	transition: background-color 120ms ease, color 120ms ease;
}

.vita-cap-sample__pill:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.06);
}

.vita-cap-sample__pill.is-on {
	background: var(--cap-app-accent, var(--cap-accent));
	color: var(--cap-app-accent-text, var(--cap-bg));
	font-weight: 600;
}

.vita-cap-sample__body {
	background: var(--cap-app-deep, #0E1F1A);
	border-radius: 14px;
	padding: 22px;
	display: grid;
	grid-template-columns: 180px 1fr 240px;
	gap: 0;
	min-height: 360px;
}

.vita-cap-sample__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-right: 18px;
	border-right: 1px solid rgba(255,255,255,0.06);
}

.vita-cap-sample__nav-brand {
	width: 22px;
	height: 22px;
	color: var(--cap-accent);
	margin-bottom: 14px;
}

.vita-cap-sample__nav-item {
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 8px;
}

.vita-cap-sample__nav-item.is-on {
	background: var(--cap-app-accent, var(--cap-accent));
	color: var(--cap-app-accent-text, var(--cap-bg));
	font-weight: 600;
}

.vita-cap-sample__main {
	padding: 0 22px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}

.vita-cap-sample__main-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	opacity: .9;
}

.vita-cap-sample__main-sub {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 11px;
	opacity: .5;
	letter-spacing: .08em;
}

.vita-cap-sample__kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.vita-cap-sample__kpi {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	padding: 12px 14px;
	color: #fff;
	min-width: 0;
}

.vita-cap-sample__kpi-l {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .5;
}

.vita-cap-sample__kpi-v {
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	line-height: 1.1;
	margin-top: 6px;
	letter-spacing: -0.02em;
	display: block;
}

.vita-cap-sample__kpi-d {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 11px;
	color: var(--cap-accent);
	margin-top: 4px;
	display: block;
}

.vita-cap-sample__kpi-d--neg {
	color: #FF8847;
}

.vita-cap-sample__chart-card {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	padding: 14px 16px;
}

.vita-cap-sample__chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.vita-cap-sample__chart-title {
	color: #fff;
	font-weight: 500;
	font-size: 13px;
}

.vita-cap-sample__chart-legend {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 10px;
	opacity: .5;
	letter-spacing: .08em;
}

.vita-cap-sample__chart {
	width: 100%;
	height: 90px;
	display: block;
}

.vita-cap-sample__activity {
	padding-left: 18px;
	border-left: 1px solid rgba(255,255,255,0.06);
	display: flex;
	flex-direction: column;
	gap: 10px;
	color: #fff;
}

.vita-cap-sample__activity-title {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .5;
	margin-bottom: 2px;
}

.vita-cap-sample__activity-row {
	display: grid;
	grid-template-columns: 8px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: start;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,0.05);
	font-size: 12px;
}

.vita-cap-sample__activity-row:last-child {
	border-bottom: 0;
}

.vita-cap-sample__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: 5px;
}

.vita-cap-sample__dot--live {
	background: var(--cap-accent);
	box-shadow: 0 0 0 4px rgba(107,224,184,0.18);
}

.vita-cap-sample__dot--warn {
	background: #FF8847;
}

.vita-cap-sample__dot--idle {
	background: rgba(255,255,255,0.18);
}

.vita-cap-sample__activity-meta small {
	display: block;
	opacity: .5;
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 10px;
}

.vita-cap-sample__activity-amt {
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 11px;
	opacity: .8;
}

.vita-cap-sample__foot {
	padding: 12px 8px 4px;
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 10px;
	color: #fff;
	opacity: 0.45;
	letter-spacing: .08em;
	text-transform: uppercase;
	gap: 10px;
}

/* ── NARROW DESKTOP (900–1199) — KPIs collapse to 2×2 ─────────────── */

@media (min-width: 900px) and (max-width: 1199.98px) {
	.vita-cap-sample__body {
		grid-template-columns: 160px 1fr 220px;
	}
	.vita-cap-sample__kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── TABLET (720–899) — sidebar + main, drop activity panel ───────── */

@media (min-width: 720px) and (max-width: 899.98px) {
	.vita-cap-sample__body {
		grid-template-columns: 150px 1fr;
		padding: 18px;
	}
	.vita-cap-sample__activity {
		display: none;
	}
	.vita-cap-sample__main {
		padding-left: 18px;
		padding-right: 0;
	}
	.vita-cap-sample__kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ── MOBILE (<720) — phone-app reimagining ────────────────────────── */

@media (max-width: 719.98px) {
	.vita-cap-sample {
		padding: 8px;
	}
	.vita-cap-sample__bar {
		flex-wrap: wrap;
		padding: 6px 4px 10px;
	}
	.vita-cap-sample__pills {
		font-size: 9px;
	}
	.vita-cap-sample__body {
		grid-template-columns: 1fr;
		max-width: 380px;
		margin: 0 auto;
		padding: 28px 0 56px;
		position: relative;
		border-radius: 22px;
		background:
			radial-gradient(circle 4px at 19% 100%, rgba(107,224,184,0.9) 100%, transparent 0) 0 -22px,
			radial-gradient(circle 3px at 39.5% 100%, #fff 100%, transparent 0) 0 -22px,
			radial-gradient(circle 3px at 60% 100%, #fff 100%, transparent 0) 0 -22px,
			radial-gradient(circle 3px at 80% 100%, #fff 100%, transparent 0) 0 -22px,
			linear-gradient(rgba(255,255,255,0.05) 0 0) 0 100% / 100% 44px no-repeat,
			linear-gradient(rgba(255,255,255,0.10) 0 0) 0 calc(100% - 44px) / 100% 1px no-repeat,
			#0E1F1A;
	}
	/* iOS status bar — time (left) */
	.vita-cap-sample__body::before {
		content: "9:41";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 28px;
		padding: 0 18px;
		display: flex;
		align-items: center;
		font-family: var(--wp--preset--font-family--sans), ui-sans-serif, system-ui, sans-serif;
		font-size: .7rem;
		font-weight: 700;
		color: #fff;
		opacity: .95;
		z-index: 2;
	}
	/* iOS status bar — signal/battery dots (right) */
	.vita-cap-sample__body::after {
		content: "";
		position: absolute;
		top: 11px;
		right: 18px;
		width: 38px;
		height: 8px;
		background:
			radial-gradient(circle 1.6px at 3px 4px, #fff 100%, transparent 0),
			radial-gradient(circle 1.6px at 9px 4px, #fff 100%, transparent 0),
			radial-gradient(circle 1.6px at 15px 4px, #fff 100%, transparent 0),
			linear-gradient(#fff 0 0) 22px 1px / 14px 6px no-repeat,
			linear-gradient(#fff 0 0) 36px 3px / 2px 2px no-repeat;
		opacity: .85;
		z-index: 2;
	}
	.vita-cap-sample__nav {
		display: none;
	}
	.vita-cap-sample__activity {
		display: none;
	}
	.vita-cap-sample__main {
		padding: 12px 14px 14px;
		gap: 12px;
	}
	.vita-cap-sample__main-head {
		padding-bottom: 8px;
		border-bottom: 1px solid rgba(255,255,255,0.08);
	}
	.vita-cap-sample__kpis {
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.vita-cap-sample__kpi {
		padding: 10px 12px;
	}
	.vita-cap-sample__kpi-l {
		font-size: 9px;
	}
	.vita-cap-sample__kpi-v {
		font-size: 1.3rem;
	}
	.vita-cap-sample__kpi:nth-child(3) {
		display: none;
	}
	.vita-cap-sample__chart-card {
		padding: 12px;
	}
	.vita-cap-sample__chart {
		height: 70px;
	}
	.vita-cap-sample__foot {
		font-size: 9px;
		padding: 12px 8px 0;
		flex-direction: column;
		align-items: center;
		gap: 4px;
	}
}

/* ════════════════════════════════════════════════════════════════════
   D2 — CAPABILITY PROMISE TILES (3-up sub-capability row)
   Selector namespace: .vita-cap-promise*, .vita-cap-int-*
   Mockup: docs/superpowers/specs/2026-05-30-capabilities-operations-mockup.html
   (section.bento / .bento-row3 / .mini-tile blocks, lines 146–190)
   ════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ──────────────────────────────────────────────── */

.vita-cap-promises {
	padding: var(--vita-cap-section-pad) clamp(20px, 5vw, 24px);
}

/* ── 3-column grid ────────────────────────────────────────────────── */

.vita-cap-promises__row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* ── Mini-tile shell ──────────────────────────────────────────────── */

.vita-cap-promise {
	--vita-cap-promise-pad: clamp(24px, 3vw, 32px);
	border-radius: 22px;
	padding: var(--vita-cap-promise-pad);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	position: relative;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.05);
}

/* min-height ONLY at ≥900px — Rule 4: never apply at all screen sizes */
@media (min-width: 900px) {
	.vita-cap-promise {
		min-height: 320px;
	}
}

.vita-cap-promise__heading {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: clamp(1.25rem, 2.4vw, 1.625rem);
	line-height: 1.1;
	letter-spacing: -0.022em;
	margin: 0;
}

.vita-cap-promise__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 14px;
	line-height: 1.5;
	opacity: 0.78;
	margin-top: 8px;
	max-width: 30ch;
}

.vita-cap-promise__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .5;
	margin-bottom: 12px;
}

.vita-cap-promise__chevron {
	position: absolute;
	top: 20px;
	right: 20px;
	opacity: .35;
}

/* ── Colour modifiers ─────────────────────────────────────────────── */

.vita-cap-promise--reporting {
	background: #FF8847;
	color: #fff;
}

.vita-cap-promise--scheduling {
	background: #6B9DFF;
	color: #fff;
}

.vita-cap-promise--quoting {
	background: #6BE0B8;
	color: #0F1B2D;
}

/* ── Glyph shell ──────────────────────────────────────────────────── */

.vita-cap-promise__glyph {
	margin-top: 18px;
}

/* ── Photo-led promise tile variant ───────────────────────────────
   Used where the tile's narrative is about the client's end-customers
   (e.g. Scheduling "Lets customers book on your terms"). Replaces
   the abstract glyph with a real lifestyle photo so the tile reads
   as social proof rather than another pictogram. */

.vita-cap-promise--photo {
	padding-bottom: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.vita-cap-promise--photo .vita-cap-promise__head {
	flex: 0 0 auto;
}
.vita-cap-promise__photo {
	/* Negative left/right/bottom margin MUST equal the card's padding so the
	   image sits flush with the rounded corners — extracted to
	   --vita-cap-promise-pad so the two stay synced at every viewport.
	   Previously hardcoded as -28px, which only matched the clamp's middle
	   value; on viewports where the clamp resolved to 24px or 32px the
	   image showed a sliver of background on each side. */
	margin: 18px calc(-1 * var(--vita-cap-promise-pad)) calc(-1 * var(--vita-cap-promise-pad));
	display: flex;
	flex-direction: column;
	gap: 0;
	position: relative;
}
.vita-cap-promise__photo img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: center center;
	background: rgba(15, 27, 45, 0.06);
}
.vita-cap-promise__photo figcaption {
	/* Bottom offset = 12px breathing room + the 28px negative margin the figure
	   uses to extend into the tile's rounded corners — keeps the caption
	   visible inside the tile bounds regardless of how the row stretches. */
	position: absolute;
	left: 12px;
	bottom: 40px;
	font-family: var(--wp--preset--font-family--mono), ui-monospace, Menlo, monospace;
	font-size: 10px;
	letter-spacing: 0.06em;
	color: #ffffff;
	background: rgba(15, 27, 45, 0.72);
	padding: 5px 9px;
	border-radius: 999px;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

/* ── Bars glyph (vertical bar chart — 5 spans) ───────────────────── */

.vita-cap-promise__glyph--bars {
	height: 84px;
	display: flex;
	align-items: flex-end;
	gap: 4px;
}

.vita-cap-promise__glyph--bars span {
	width: 14px;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 4px 4px 0 0;
}

.vita-cap-promise__glyph--bars span:nth-child(1) { height: 40%; }
.vita-cap-promise__glyph--bars span:nth-child(2) { height: 55%; }
.vita-cap-promise__glyph--bars span:nth-child(3) { height: 75%; }
.vita-cap-promise__glyph--bars span:nth-child(4) { height: 60%; }
.vita-cap-promise__glyph--bars span:nth-child(5) { height: 90%; }

/* ── Calendar glyph (7-col grid) ─────────────────────────────────── */

.vita-cap-promise__glyph--cal {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 3px;
	height: 76px;
	align-items: stretch;
}

.vita-cap-promise__glyph--cal span {
	background: rgba(255, 255, 255, 0.18);
	border-radius: 3px;
}

.vita-cap-promise__glyph--cal span.is-on {
	background: #fff;
}

.vita-cap-promise__glyph--cal span.is-half {
	background: rgba(255, 255, 255, 0.55);
}

/* ── Integrations glyph (sync status panel) ──────────────────────── */

.vita-cap-promise__glyph--integrations {
	background: rgba(15, 27, 45, 0.08);
	border-radius: 10px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vita-cap-int-row {
	display: grid;
	grid-template-columns: 32px 1fr auto;
	gap: 12px;
	align-items: center;
	font-size: 12px;
}

.vita-cap-int-logo {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	overflow: hidden;
}
/* The brand glyph is drawn via mask-image — SVG paths come from Simple Icons
   (CC0) at themes/vitasiti/assets/img/brands/. The pseudo-element's background
   becomes the icon colour; the parent span sets the bg colour behind it. */
.vita-cap-int-logo::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	background-color: #ffffff;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
}

/* Brand-chip backgrounds + masked glyphs. SVG paths via Simple Icons (CC0)
   shipped at themes/vitasiti/assets/img/brands/. Per-brand background colour
   matches each company's primary brand colour; the glyph itself renders in
   white via the .vita-cap-int-logo::after background-color. */
.vita-cap-int-logo--xero    { background: #13B5EA; }
.vita-cap-int-logo--myob    { background: #6B1F8A; }
.vita-cap-int-logo--outlook { background: #0078D4; }
.vita-cap-int-logo--vita    { background: #1F3933; }
.vita-cap-int-logo--esign   { background: #1F3933; }
.vita-cap-int-logo--google  { background: #ffffff; }
.vita-cap-int-logo--apple   { background: #1D1D1F; }
.vita-cap-int-logo--slack   { background: #4A154B; }
.vita-cap-int-logo--esign::after  { background-color: #6BE0B8; }
.vita-cap-int-logo--google::after { background-color: #1A73E8; } /* Google blue glyph on the white chip */

.vita-cap-int-logo--xero::after    { -webkit-mask-image: url('../img/brands/xero.svg');             mask-image: url('../img/brands/xero.svg'); }
.vita-cap-int-logo--myob::after    { -webkit-mask-image: url('../img/brands/myob.svg');             mask-image: url('../img/brands/myob.svg'); }
.vita-cap-int-logo--outlook::after { -webkit-mask-image: url('../img/brands/microsoftoutlook.svg'); mask-image: url('../img/brands/microsoftoutlook.svg'); }
.vita-cap-int-logo--vita::after    { -webkit-mask-image: url('../img/Vitasiti%20logo.svg');         mask-image: url('../img/Vitasiti%20logo.svg'); }
.vita-cap-int-logo--esign::after   { -webkit-mask-image: url('../img/brands/docusign.svg');         mask-image: url('../img/brands/docusign.svg'); }
.vita-cap-int-logo--google::after  { -webkit-mask-image: url('../img/brands/googlecalendar.svg');   mask-image: url('../img/brands/googlecalendar.svg'); }
.vita-cap-int-logo--apple::after   { -webkit-mask-image: url('../img/brands/icloud.svg');           mask-image: url('../img/brands/icloud.svg'); }
.vita-cap-int-logo--slack::after   { -webkit-mask-image: url('../img/brands/slack.svg');            mask-image: url('../img/brands/slack.svg'); }

.vita-cap-int-name {
	font-weight: 500;
	color: #0F1B2D;
}

.vita-cap-int-status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(15, 27, 45, 0.6);
}

.vita-cap-int-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1A8754;
	box-shadow: 0 0 0 3px rgba(26, 135, 84, 0.18);
}

/* ── Responsive: tablet (720–1023) — 2-col + spanning third tile ─── */

@media (min-width: 720px) and (max-width: 1023.98px) {
	.vita-cap-promises__row {
		grid-template-columns: repeat(2, 1fr);
	}

	.vita-cap-promise:last-child {
		grid-column: 1 / -1;
	}

	@media (min-width: 900px) {
		.vita-cap-promise:last-child {
			min-height: 240px;
		}
	}
}

/* ── Responsive: mobile (<720) — single column ───────────────────── */

@media (max-width: 719.98px) {
	.vita-cap-promises__row {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.vita-cap-promise {
		padding: 24px;
	}
}

/* ════════════════════════════════════════════════════════════════════
   D3 — CAPABILITY DUAL-ROW (wide keeps + pairs tiles)
   Selector namespace: .vita-cap-dual*, .vita-cap-wide*, .vita-cap-keeps*, .vita-cap-pairs*, .vita-cap-pair*
   Mockup: docs/superpowers/specs/2026-05-30-capabilities-operations-mockup.html
   (section.dual / .dual-row / .wide-tile blocks, lines 192–245)
   ════════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ──────────────────────────────────────────────── */

.vita-cap-dual {
	padding: var(--vita-cap-section-pad) clamp(20px, 5vw, 24px);
}

/* ── 2-column asymmetric grid (1.15fr | 1fr) ─────────────────────── */

.vita-cap-dual__row {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 24px;
	/* Side-by-side tiles match heights — grid default `stretch` is what we want.
	   (Previously this had `align-items: start` per the older Rule 6, which was
	   reversed when the design called for matching tile heights site-wide.) */
}

/* ── Wide tile shell ──────────────────────────────────────────────── */

.vita-cap-wide {
	border-radius: 22px;
	padding: clamp(24px, 3vw, 36px);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

/* Rule 4: min-height ONLY at ≥900px — never at all screen sizes */
@media (min-width: 900px) {
	.vita-cap-wide {
		min-height: 380px;
	}
}

/* ── Colour modifiers ─────────────────────────────────────────────── */

.vita-cap-wide--ink {
	background: var(--bento-ipdata-bg, #0F1B2D);
	color: #fff;
}

.vita-cap-wide--sydney {
	background: var(--bento-sydney-bg, #F5F0E6);
	color: var(--wp--preset--color--foreground);
}

/* ── Wide tile typography ─────────────────────────────────────────── */

.vita-cap-wide__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .5;
	margin-bottom: 12px;
}

.vita-cap-wide__heading {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: clamp(1.5rem, 3vw, 2rem);
	line-height: 1.05;
	letter-spacing: -0.024em;
	margin: 0;
}

.vita-cap-wide__heading em {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-weight: 400;
	color: inherit;
}

.vita-cap-wide__body {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 15px;
	line-height: 1.5;
	opacity: 0.78;
	margin-top: 8px;
	max-width: 46ch;
}

/* ── Keeps list (ink tile — delivery items) ───────────────────────── */

.vita-cap-keeps {
	margin-top: 22px;
	flex: 1;
}

.vita-cap-keeps__row {
	display: grid;
	grid-template-columns: 16px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 14px;
}

.vita-cap-keeps__row:last-child {
	border-bottom: 0;
}

.vita-cap-keeps__ico {
	color: var(--cap-accent);
	font-size: 10px;
	line-height: 1;
}

.vita-cap-keeps__tag {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: .5;
}

/* Mint-accent featured row — warranty + hypercare */
.vita-cap-keeps__row--featured {
	background: linear-gradient(90deg, rgba(107, 224, 184, 0.10), transparent);
	margin: 6px clamp(-24px, -3vw, -36px) 0;
	padding: 16px clamp(24px, 3vw, 36px);
	border-bottom: 1px solid rgba(107, 224, 184, 0.18);
	border-top: 1px solid rgba(107, 224, 184, 0.18);
}

.vita-cap-keeps__row--featured .vita-cap-keeps__ico {
	color: var(--cap-accent);
}

.vita-cap-keeps__row--featured .vita-cap-keeps__tag {
	background: var(--cap-accent);
	color: var(--wp--preset--color--foreground);
	padding: 3px 8px;
	border-radius: 99px;
	opacity: 1;
	font-weight: 600;
}

/* ── Pairs grid (sydney tile — 4 pair-cards) ──────────────────────── */

.vita-cap-pairs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 22px;
}
/* When there's an odd count (e.g. 5 cards: 4 capability siblings + Managed
   services), the last card spans both columns so the row doesn't have a
   visual orphan. Highlights the "always-on" companion at the end. */
.vita-cap-pairs > .vita-cap-pair:nth-child(odd):last-child {
	grid-column: 1 / -1;
}

/* Rule 1: swatch sits inline-left of title; sub spans both columns flush-left */
.vita-cap-pair {
	display: grid;
	grid-template-columns: 14px 1fr;
	grid-template-areas:
		"swatch title"
		"sub    sub";
	column-gap: 12px;
	row-gap: 6px;
	align-items: center;
	padding: 18px 16px;
	border-radius: 14px;
	background: rgba(15, 27, 45, 0.04);
	text-decoration: none;
	color: inherit;
	position: relative;
}

.vita-cap-pair:hover {
	background: rgba(15, 27, 45, 0.08);
}

.vita-cap-pair__swatch {
	grid-area: swatch;
	width: 14px;
	height: 14px;
	border-radius: 4px;
}

/* Swatch colour modifiers */
.vita-cap-pair__swatch--operations { background: #1F3933; }
.vita-cap-pair__swatch--reporting  { background: #FF8847; }
.vita-cap-pair__swatch--scheduling { background: #6B9DFF; }
.vita-cap-pair__swatch--quoting    { background: #6BE0B8; }
.vita-cap-pair__swatch--ipdata     { background: #0F1B2D; }
.vita-cap-pair__swatch--ai-agents  { background: #5A3F8C; } /* plum — AI Agents */
.vita-cap-pair__swatch--managed    { background: #475569; } /* slate — managed services / ongoing infra */

.vita-cap-pair strong {
	grid-area: title;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.015em;
}

.vita-cap-pair small {
	grid-area: sub;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 12px;
	line-height: 1.4;
	opacity: .65;
}

/* ── Responsive: dual-row stacks at <720px (Rule 6) ──────────────── */

@media (max-width: 719.98px) {
	.vita-cap-dual__row {
		grid-template-columns: 1fr;
	}
}

/* ── Responsive: pair grid stacks + keep-tag hidden at <480px ─────── */

@media (max-width: 480px) {
	.vita-cap-pairs {
		grid-template-columns: 1fr;
	}

	.vita-cap-keeps__row {
		font-size: 13px;
	}

	.vita-cap-keeps__tag {
		display: none;
	}
}

/* ── D4: Capability page stat strip ──────────────────────────────── */

.vita-cap-stat-strip {
	border-top: 1px solid rgba(15, 27, 45, 0.12);
	border-bottom: 1px solid rgba(15, 27, 45, 0.12);
	padding: 22px clamp(20px, 5vw, 24px);
}
.vita-cap-stat-strip__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 24px);
	display: flex;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--wp--preset--font-family--mono);
	font-size: clamp(11px, 1.3vw, 12px);
	color: rgba(15, 27, 45, 0.6);
	letter-spacing: 0.08em;
	text-align: center;
}
.vita-cap-stat-strip__sep { opacity: 0.4; }

@media (max-width: 600px) {
	.vita-cap-stat-strip__inner { flex-direction: column; gap: 6px; }
	.vita-cap-stat-strip__sep   { display: none; }
}

/* ── D5: Capability page foot CTA (inline-dots variant) ──────────── */

.vita-cap-foot-cta {
	padding: var(--vita-cap-section-pad) clamp(20px, 4vw, 48px) clamp(60px, 10vw, 96px);
}
.vita-cap-foot-cta__inner {
	max-width: 1200px;
	margin: 0 clamp(16px, 4vw, 24px);
	background: var(--wp--preset--color--foreground, #0F1B2D);
	color: #ffffff;
	border-radius: clamp(20px, 3vw, 28px);
	padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 48px);
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"dots head button"
		"dots sub  button";
	align-items: center;
	column-gap: 28px;
	row-gap: 6px;
	position: relative;
}
@media (min-width: 1248px) {
	.vita-cap-foot-cta__inner { margin: 0 auto; }
}

.vita-cap-foot-cta__dots   { grid-area: dots; align-self: center; display: flex; align-items: center; }
.vita-cap-foot-cta__dots svg { display: block; height: 44px; width: auto; }
.vita-cap-foot-cta__head   { grid-area: head; align-self: end; font-family: var(--wp--preset--font-family--sans); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
.vita-cap-foot-cta__sub    { grid-area: sub; align-self: start; font-family: var(--wp--preset--font-family--sans); font-size: 15px; opacity: 0.65; margin: 0; max-width: 60ch; }
.vita-cap-foot-cta__pill   { grid-area: button; background: #ffffff; color: var(--wp--preset--color--foreground, #0F1B2D); padding: 14px 26px; border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap; align-self: center; }

@media (max-width: 899.98px) {
	.vita-cap-foot-cta__inner {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"dots head"
			"sub  sub"
			"button button";
		column-gap: 14px;
		row-gap: 10px;
		padding: 28px;
	}
	.vita-cap-foot-cta__head { align-self: center; }
	.vita-cap-foot-cta__sub  { margin-top: 0; }
	.vita-cap-foot-cta__pill { align-self: stretch; text-align: center; }
	.vita-cap-foot-cta__dots svg { height: 32px; width: auto; }
}
@media (max-width: 480px) {
	.vita-cap-foot-cta__inner { padding: 24px; row-gap: 8px; }
	.vita-cap-foot-cta__head { font-size: 1.35rem; }
	.vita-cap-foot-cta__sub  { font-size: 14px; }
	.vita-cap-foot-cta__dots svg { height: 26px; width: auto; }
}

/* ────────────────────────────────────────────────────────────
   CAPABILITY PAGE — Live mini-app additions
   Layered on top of D1's sample-panel rules. New: clickable nav,
   tab/panel chrome, per-view content (jobs table, customer cards,
   teams list, inventory), chart hover tooltip.
   ──────────────────────────────────────────────────────────── */

/* Nav buttons (was <span>, now <button>). Reset button defaults,
   keep the visual treatment from D1, add focus + hover. */
.vita-cap-sample__nav-item {
	background: transparent;
	border: 0;
	font-family: inherit;
	font-size: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.vita-cap-sample__nav-item:hover {
	background: rgba(107, 224, 184, 0.06);
	color: rgba(255, 255, 255, 0.85);
}
.vita-cap-sample__nav-item:focus-visible {
	outline: 2px solid var(--cap-accent, #6BE0B8);
	outline-offset: 2px;
}

/* View-head row: title (with count badge) + optional filters + optional add button */
.vita-cap-sample__view-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	margin-bottom: 12px;
}
.vita-cap-sample__view-title {
	color: #fff;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 14px;
	margin: 0;
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.vita-cap-sample__view-count {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.06em;
}

/* Filter chips inside the Jobs view head */
.vita-cap-sample__filters {
	display: flex;
	gap: 4px;
	background: rgba(255, 255, 255, 0.04);
	padding: 3px;
	border-radius: 999px;
	margin-left: auto;
}
.vita-cap-sample__filter {
	background: transparent;
	border: 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.5);
	padding: 5px 10px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 120ms ease, color 120ms ease;
}
.vita-cap-sample__filter:hover { color: rgba(255, 255, 255, 0.85); }
.vita-cap-sample__filter.is-on {
	background: var(--cap-accent, #6BE0B8);
	color: var(--cap-bg, #1F3933);
}
.vita-cap-sample__filter:focus-visible {
	outline: 2px solid var(--cap-accent, #6BE0B8);
	outline-offset: 2px;
}

/* "+ Add job" button */
.vita-cap-sample__add {
	background: rgba(107, 224, 184, 0.12);
	border: 1px solid rgba(107, 224, 184, 0.3);
	color: var(--cap-accent, #6BE0B8);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 120ms ease;
}
.vita-cap-sample__add:hover { background: rgba(107, 224, 184, 0.2); }
.vita-cap-sample__add:focus-visible {
	outline: 2px solid var(--cap-accent, #6BE0B8);
	outline-offset: 2px;
}

/* Hide non-active views (back-up for the [hidden] attr) */
.vita-cap-sample__view[hidden] { display: none; }

/* ──────── JOBS view: table + expansion panel ──────── */
.vita-cap-sample__jobs { display: flex; flex-direction: column; gap: 6px; }

.vita-cap-jobrow {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	overflow: hidden;
	transition: background-color 120ms ease, border-color 120ms ease;
}
.vita-cap-jobrow:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.1);
}
.vita-cap-jobrow.is-open {
	background: rgba(107, 224, 184, 0.05);
	border-color: rgba(107, 224, 184, 0.2);
}
.vita-cap-jobrow__head {
	display: grid;
	grid-template-columns: 56px minmax(0, 1.2fr) auto auto;
	gap: 10px;
	align-items: center;
	padding: 10px 14px;
	cursor: pointer;
	background: transparent;
	border: 0;
	width: 100%;
	font-family: inherit;
	color: inherit;
	text-align: left;
}
.vita-cap-jobrow__head:focus-visible {
	outline: 2px solid var(--cap-accent, #6BE0B8);
	outline-offset: -2px;
}
.vita-cap-jobrow__id {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.5);
}
.vita-cap-jobrow__cust {
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.vita-cap-jobrow__status {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 999px;
}
.vita-cap-jobrow__status--on-site  { background: rgba(107,224,184,0.18); color: var(--cap-accent, #6BE0B8); }
.vita-cap-jobrow__status--awaiting { background: rgba(255,136,71,0.18);  color: #FF8847; }
.vita-cap-jobrow__status--paid     { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); }
.vita-cap-jobrow__amt {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.85);
	min-width: 60px;
	text-align: right;
}
/* Expansion */
.vita-cap-jobrow__body {
	padding: 14px 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.vita-cap-jobrow[hidden] { display: none; }
.vita-cap-jobrow__body[hidden] { display: none; }
.vita-cap-jobrow__col h6 {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 6px;
}
.vita-cap-jobrow__col p { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin: 0; }
.vita-cap-jobrow__col ul { list-style: none; padding: 0; margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: rgba(255, 255, 255, 0.7); }
.vita-cap-jobrow__col ul li {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.vita-cap-jobrow__col ul li:last-child { border-bottom: 0; }
.vita-cap-jobrow__total {
	grid-column: 1 / -1;
	display: flex;
	justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 10px;
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	font-weight: 600;
	color: #fff;
}

/* ──────── CUSTOMERS view: card grid ──────── */
.vita-cap-sample__customers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.vita-cap-custcard {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 12px 14px;
	color: #fff;
}
.vita-cap-custcard__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.vita-cap-custcard__photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 44px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.vita-cap-custcard__meta {
	min-width: 0;
	flex: 1 1 auto;
}
.vita-cap-custcard__name {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	font-size: 13px;
	margin: 0;
}
.vita-cap-custcard__loc {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
	margin: 2px 0 0;
	letter-spacing: 0.04em;
}
.vita-cap-custcard__row {
	display: flex;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	padding: 3px 0;
}
.vita-cap-custcard__row span:first-child { opacity: 0.55; }
.vita-cap-custcard__row span:last-child  { color: rgba(255, 255, 255, 0.85); }

/* ──────── TEAMS view: list rows ──────── */
.vita-cap-sample__teams { display: flex; flex-direction: column; gap: 6px; }
.vita-cap-teamrow {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 10px 14px;
}
.vita-cap-teamrow__avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(107, 224, 184, 0.15);
	color: var(--cap-accent, #6BE0B8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 700;
	font-size: 13px;
}
.vita-cap-teamrow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vita-cap-teamrow__name { color: #fff; font-size: 13px; font-weight: 500; }
.vita-cap-teamrow__role { color: rgba(255, 255, 255, 0.45); font-family: var(--wp--preset--font-family--mono); font-size: 10px; letter-spacing: 0.04em; }
.vita-cap-teamrow__active {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
}

/* ──────── INVENTORY view: dense table ──────── */
.vita-cap-sample__inventory { display: flex; flex-direction: column; gap: 4px; }
.vita-cap-invrow {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 50px 70px;
	gap: 10px;
	align-items: center;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	padding: 8px 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.8);
}
.vita-cap-invrow__sku { opacity: 0.55; }
.vita-cap-invrow__name { font-family: var(--wp--preset--font-family--sans); color: #fff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vita-cap-invrow__qty { text-align: right; color: rgba(255, 255, 255, 0.85); }
.vita-cap-invrow__status { font-size: 10px; padding: 2px 8px; border-radius: 999px; text-align: center; letter-spacing: 0.04em; }
.vita-cap-invrow__status--ok       { background: rgba(107,224,184,0.15); color: var(--cap-accent, #6BE0B8); }
.vita-cap-invrow__status--low      { background: rgba(255,136,71,0.18); color: #FF8847; }
.vita-cap-invrow__status--reorder  { background: rgba(255,80,80,0.18); color: #FF7070; }

/* ──────── CHART hover tooltip ──────── */
.vita-cap-sample__chart-points circle {
	fill: var(--cap-accent, #6BE0B8);
	cursor: pointer;
	transition: r 120ms ease, opacity 120ms ease;
	opacity: 0;
}
.vita-cap-sample__chart-card:hover .vita-cap-sample__chart-points circle { opacity: 0.6; }
.vita-cap-sample__chart-points circle:hover { opacity: 1; }
.vita-cap-sample__chart-points circle.is-latest { opacity: 1; r: 3; animation: vita-cap-pulse 2.4s ease-in-out infinite; }
@keyframes vita-cap-pulse {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}
.vita-cap-sample__chart-tip {
	position: absolute;
	background: var(--cap-bg, #1F3933);
	border: 1px solid rgba(107, 224, 184, 0.4);
	border-radius: 6px;
	padding: 6px 10px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: #fff;
	pointer-events: none;
	white-space: nowrap;
	transform: translate(-50%, calc(-100% - 8px));
	z-index: 5;
}
.vita-cap-sample__chart-tip[hidden] { display: none; }
.vita-cap-sample__chart-card { position: relative; }

/* ──────── RESPONSIVE — collapse view-head + jobrow + cust grid below 720 ──────── */
@media (max-width: 719.98px) {
	.vita-cap-sample__view-head { gap: 8px; padding-bottom: 8px; margin-bottom: 8px; }
	.vita-cap-sample__filters { margin-left: 0; order: 3; flex-basis: 100%; justify-content: flex-start; flex-wrap: wrap; }
	.vita-cap-sample__add { order: 2; margin-left: auto; }
	.vita-cap-jobrow__head { grid-template-columns: 44px minmax(0, 1fr) auto; }
	.vita-cap-jobrow__head .vita-cap-jobrow__status { grid-column: 2; grid-row: 2; justify-self: start; }
	.vita-cap-jobrow__body { grid-template-columns: 1fr; }
	.vita-cap-sample__customers { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────
   LIVE MINI-APP — height lock + internal scroll
   Each view has different content height (Overview ~300px,
   Jobs with 12 rows ~600px, Teams ~250px). Without a lock the
   sample panel jumps size on every nav click. Real product
   dashboards size the panel once and scroll long content
   internally — mimic that.
   Only applies at >=720px (mobile already hides the sidebar
   and is Overview-only via the phone-app reimagining).
   ──────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
	.vita-cap-sample__main {
		height: 380px;
		overflow: hidden;
	}
	.vita-cap-sample__view {
		flex: 1;
		min-height: 0; /* critical: lets flex item shrink below content for overflow */
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
	}
	.vita-cap-sample__view::-webkit-scrollbar { width: 6px; }
	.vita-cap-sample__view::-webkit-scrollbar-track { background: transparent; }
	.vita-cap-sample__view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }
	.vita-cap-sample__view::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
}

/* ════════════════════════════════════════════════════════════════════
  17. MOTION CRAFT (bento-internal, prefers-reduced-motion gated)
   ────────────────────────────────────────────────────────────────────
   Reveal-on-view stagger + per-tile content animation. State classes
   .vita-reveal / .is-in-view are added by home-motion.js when a tile
   crosses the viewport threshold.
   ════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

	/* ── Tile fade-up stagger ─────────────────────────────────────── */
	.vita-bento__tile.vita-reveal {
		transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
			box-shadow 0.35s ease;
		transform: translateY(28px);
		opacity: 0;
	}
	.vita-bento__tile.vita-reveal.is-in-view {
		transform: translateY(0);
		opacity: 1;
	}
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(1) { transition-delay: 0.04s; }
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(2) { transition-delay: 0.12s; }
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(3) { transition-delay: 0.20s; }
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(4) { transition-delay: 0.28s; }
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(5) { transition-delay: 0.36s; }
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(6) { transition-delay: 0.44s; }
	.vita-bento .vita-bento__tile.vita-reveal.is-in-view:nth-of-type(7) { transition-delay: 0.52s; }

	/* ── Operations sparkline: stroke draw-on-view ───────────────── */
	/* Target only the stroked path (the second <path> in the SVG) —
	   the first path is the fill area and animating its dash would
	   reveal the gradient ahead of the line. */
	.vita-bento__tile--operations .vita-sample__chart path[stroke] {
		stroke-dasharray: 600;
		stroke-dashoffset: 600;
		transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
	}
	.vita-bento__tile--operations.is-in-view .vita-sample__chart path[stroke] {
		stroke-dashoffset: 0;
	}
	/* Point markers fade in after the line completes. */
	.vita-bento__tile--operations .vita-sample__chart g circle {
		opacity: 0;
		transition: opacity 0.4s ease 1.6s;
	}
	.vita-bento__tile--operations.is-in-view .vita-sample__chart g circle {
		opacity: 1;
	}

	/* ── Operations activity rows: left-slide stagger ────────────── */
	.vita-bento__tile--operations .vita-app__activity-list li {
		opacity: 0;
		transform: translateX(8px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}
	.vita-bento__tile--operations.is-in-view .vita-app__activity-list li {
		opacity: 0.85; /* preserves the existing rest-state opacity */
		transform: translateX(0);
	}
	.vita-bento__tile--operations.is-in-view .vita-app__activity-list li:nth-child(1) { transition-delay: 0.9s; }
	.vita-bento__tile--operations.is-in-view .vita-app__activity-list li:nth-child(2) { transition-delay: 1.02s; }
	.vita-bento__tile--operations.is-in-view .vita-app__activity-list li:nth-child(3) { transition-delay: 1.14s; }
	.vita-bento__tile--operations.is-in-view .vita-app__activity-list li:nth-child(4) { transition-delay: 1.26s; }

	/* ── Reporting bars: grow from baseline via scaleY ────────────── */
	/* Inline style sets height (e.g. style="height:42%") — we use
	   transform so we never fight that inline declaration. */
	.vita-bento__tile--reporting .vita-bars__bar {
		transform: scaleY(0);
		transform-origin: bottom center;
		transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
	}
	.vita-bento__tile--reporting.is-in-view .vita-bars__bar {
		transform: scaleY(1);
	}
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(1) .vita-bars__bar { transition-delay: 0.25s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(2) .vita-bars__bar { transition-delay: 0.31s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(3) .vita-bars__bar { transition-delay: 0.37s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(4) .vita-bars__bar { transition-delay: 0.43s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(5) .vita-bars__bar { transition-delay: 0.49s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(6) .vita-bars__bar { transition-delay: 0.55s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(7) .vita-bars__bar { transition-delay: 0.61s; }
	.vita-bento__tile--reporting.is-in-view .vita-bars__col:nth-child(8) .vita-bars__bar { transition-delay: 0.67s; }

	/* ── Quoting line-items: row-by-row fade-up ──────────────────── */
	.vita-bento__tile--quoting .vita-quote__items tbody tr,
	.vita-bento__tile--quoting .vita-quote__items tfoot tr {
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.4s ease, transform 0.4s ease;
	}
	.vita-bento__tile--quoting.is-in-view .vita-quote__items tbody tr,
	.vita-bento__tile--quoting.is-in-view .vita-quote__items tfoot tr {
		opacity: 1;
		transform: translateY(0);
	}
	.vita-bento__tile--quoting.is-in-view .vita-quote__items tbody tr:nth-child(1) { transition-delay: 0.3s; }
	.vita-bento__tile--quoting.is-in-view .vita-quote__items tbody tr:nth-child(2) { transition-delay: 0.4s; }
	.vita-bento__tile--quoting.is-in-view .vita-quote__items tbody tr:nth-child(3) { transition-delay: 0.5s; }
	.vita-bento__tile--quoting.is-in-view .vita-quote__items tfoot tr             { transition-delay: 0.65s; }

	/* ── Owned tile (code editor): line-by-line fade ──────────────── */
	.vita-bento__tile--owned .vita-code__ln {
		opacity: 0;
		transition: opacity 0.5s ease;
	}
	.vita-bento__tile--owned.is-in-view .vita-code__ln {
		opacity: 0.45; /* preserves the muted gutter colour */
	}
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(1) { transition-delay: 0.30s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(2) { transition-delay: 0.42s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(3) { transition-delay: 0.54s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(4) { transition-delay: 0.66s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(5) { transition-delay: 0.78s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(6) { transition-delay: 0.90s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(7) { transition-delay: 1.02s; }
	.vita-bento__tile--owned.is-in-view .vita-code__ln:nth-of-type(8) { transition-delay: 1.14s; }
}