/**
 * docs/design/07_Cards.md
 */

/* ---------- SaaS UI mockup (partials/components/ui-mockup.php) ----------
   A themed "app window" built from HTML/CSS + inline SVG — no image assets,
   crisp at any size, coloured entirely from design tokens. Gives marketing
   sections real product-style visuals in place of text.
   Design contract: .ui-mock keeps a fixed width/max-width footprint inside
   its wrapper (.page-hero__visual, .feature-split__visual, …) so a future
   real product screenshot can replace this inline markup with a single
   <img> in the same wrapper with zero layout change. */
.ui-mock {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    width: 100%;
    max-width: 460px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .ui-mock { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
    .ui-mock:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); }
}

.ui-mock__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: color-mix(in srgb, var(--color-neutral-50) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--color-neutral-200);
}

.ui-mock__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--color-neutral-300); flex-shrink: 0; }
.ui-mock__dot:nth-child(1) { background: #ff5f57; }
.ui-mock__dot:nth-child(2) { background: #febc2e; }
.ui-mock__dot:nth-child(3) { background: #28c840; }
.ui-mock__addr {
    margin-left: var(--space-3);
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-caption);
    font-weight: var(--weight-semibold);
    color: var(--color-neutral-500);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-full);
    padding: 3px var(--space-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-mock__addr::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--color-success-600);
    flex-shrink: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .ui-mock__addr::before { animation: ui-mock-pulse 2.4s ease-in-out infinite; }
}

@keyframes ui-mock-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 158, 90, 0.35); }
    50% { box-shadow: 0 0 0 4px rgba(30, 158, 90, 0); }
}

.ui-mock__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* Staggered entrance for each top-level block within a mock body — a light
   "this just loaded" cue, not a scroll-triggered effect (mocks commonly sit
   above the fold in a hero, where scroll-reveal wouldn't fire at all). */
@media (prefers-reduced-motion: no-preference) {
    .ui-mock__body > * { animation: ui-mock-row-in 0.5s var(--ease-out) backwards; }
    .ui-mock__body > *:nth-child(1) { animation-delay: 0.04s; }
    .ui-mock__body > *:nth-child(2) { animation-delay: 0.11s; }
    .ui-mock__body > *:nth-child(3) { animation-delay: 0.18s; }
    .ui-mock__body > *:nth-child(4) { animation-delay: 0.25s; }
}

@keyframes ui-mock-row-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.ui-mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.ui-mock__kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-neutral-50);
    border: 1px solid var(--color-neutral-100);
}
.ui-mock__kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500); }
.ui-mock__kpi strong { font-family: var(--font-heading); font-size: var(--text-h5); color: var(--color-neutral-900); font-variant-numeric: tabular-nums; }
.ui-mock__kpi-trend { font-size: 10px; font-weight: var(--weight-semibold); }
.ui-mock__kpi-trend--up { color: var(--color-success-700); }
.ui-mock__kpi-trend--down { color: var(--color-secondary-600); }

.ui-mock__chart { height: 120px; }
.ui-mock__chart svg { width: 100%; height: 100%; display: block; }

.ui-mock__chart-draw { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
    .ui-mock__chart-draw { animation: ui-mock-chart-draw 1.4s var(--ease-out) 0.2s backwards; }
}
@keyframes ui-mock-chart-draw {
    from { stroke-dasharray: 100; stroke-dashoffset: 100; }
    to { stroke-dasharray: 100; stroke-dashoffset: 0; }
}

.ui-mock__bars { display: flex; align-items: flex-end; gap: var(--space-2); height: 56px; }
.ui-mock__bars span {
    flex: 1;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: linear-gradient(180deg, var(--color-primary-600), var(--color-primary-500));
    min-height: 6px;
}

.ui-mock__pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.ui-mock__col { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__col-head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-500); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: var(--space-1); }
.ui-mock__col-head em { font-style: normal; background: var(--color-primary-100); color: var(--color-primary-700); border-radius: var(--radius-full); padding: 0 6px; font-size: 9px; }
.ui-mock__deal { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-white); border: 1px solid var(--color-neutral-200); box-shadow: var(--shadow-sm); }
.ui-mock__deal-name { display: block; font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
.ui-mock__deal-meta { display: block; height: 5px; width: 60%; margin-top: 6px; border-radius: var(--radius-full); background: var(--color-neutral-200); }
.ui-mock--crm .ui-mock__col:nth-child(3) .ui-mock__deal { border-color: var(--color-secondary-100); }

.ui-mock__chat { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__msg { max-width: 82%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-body-sm); line-height: 1.35; }
.ui-mock__msg--in { align-self: flex-start; background: var(--color-neutral-100); color: var(--color-neutral-900); border-bottom-left-radius: var(--radius-sm); }
.ui-mock__msg--out { align-self: flex-end; background: var(--color-secondary-600); color: var(--color-white); border-bottom-right-radius: var(--radius-sm); }
.ui-mock__msg--auto { background: var(--color-secondary-100); color: var(--color-secondary-700); font-style: italic; }

/* campaign — labelled progress rows (Google/Meta Ads) */
.ui-mock__rows { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-mock__row { display: flex; align-items: center; gap: var(--space-3); }
.ui-mock__row-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
.ui-mock__row-dot--on { background: var(--color-success-600); }
.ui-mock__row-dot--off { background: var(--color-neutral-300); }
.ui-mock__row-name { flex: 0 0 38%; font-size: var(--text-body-sm); color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mock__row-track { flex: 1; height: 8px; border-radius: var(--radius-full); background: var(--color-neutral-100); overflow: hidden; }
.ui-mock__row-track span { display: block; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, var(--color-primary-600), var(--color-info-600)); }

/* workflow — node-based automation flow */
.ui-mock__flow { display: flex; flex-direction: column; gap: 0; }
.ui-mock__node { position: relative; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
.ui-mock__node span { display: block; font-weight: var(--weight-regular); font-size: var(--text-caption); color: var(--color-neutral-500); }
.ui-mock__node--trigger { border-color: var(--color-info-600); background: var(--color-info-700); color: var(--color-white); }
.ui-mock__node--trigger span { color: rgba(255,255,255,0.8); }
.ui-mock__node--end { border-color: var(--color-secondary-600); background: var(--color-secondary-100); }
.ui-mock__flow-line { display: block; width: 2px; height: var(--space-4); margin-left: var(--space-6); background: var(--color-neutral-300); }

/* erp — module tiles + a compact record table */
.ui-mock__modules { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.ui-mock__module { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-100); text-align: center; }
.ui-mock__module-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-neutral-500); }
.ui-mock__module strong { font-family: var(--font-heading); font-size: var(--text-body-md); color: var(--color-primary-600); font-variant-numeric: tabular-nums; }
.ui-mock__table { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__trow { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-sm); color: var(--color-neutral-700); }
.ui-mock__trow span:first-child { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-success-600); flex-shrink: 0; }
.ui-mock__trow span:nth-child(2) { flex: 1; }

/* creative — brand swatches + type specimen */
.ui-mock__brand { display: flex; flex-direction: column; gap: var(--space-4); }
.ui-mock__swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.ui-mock__swatches span { height: 40px; border-radius: var(--radius-md); }
.ui-mock__specimen { display: flex; align-items: center; gap: var(--space-4); }
.ui-mock__specimen strong { font-family: var(--font-heading); font-size: 48px; line-height: 1; color: var(--color-primary-600); }
.ui-mock__specimen > div { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__specimen-line { display: block; height: 8px; border-radius: var(--radius-full); background: var(--color-neutral-300); }
.ui-mock__specimen-line--muted { background: var(--color-neutral-200); }

/* mobile — phone-frame chrome with app nav, content cards, tab bar */
.ui-mock__phone { display: flex; justify-content: center; }
.ui-mock__phone-frame { width: 200px; border: 6px solid var(--color-neutral-900); border-radius: 28px; overflow: hidden; background: var(--color-white); box-shadow: var(--shadow-md); }
.ui-mock__phone-status { display: flex; justify-content: space-between; align-items: center; padding: 6px var(--space-3) 2px; font-size: 9px; font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
.ui-mock__phone-icons { letter-spacing: 1px; font-size: 8px; color: var(--color-neutral-500); }
.ui-mock__phone-nav { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-neutral-100); }
.ui-mock__phone-avatar { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--gradient-icon-1); flex-shrink: 0; }
.ui-mock__phone-title { font-size: var(--text-body-sm); font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
.ui-mock__phone-cards { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.ui-mock__phone-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); background: var(--color-neutral-50); }
.ui-mock__phone-card-thumb { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--gradient-icon-2); flex-shrink: 0; }
.ui-mock__phone-card-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ui-mock__phone-card-lines span { display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-neutral-200); }
.ui-mock__phone-tabs { display: flex; justify-content: space-around; padding: var(--space-2) 0 var(--space-3); }
.ui-mock__phone-tabs span { width: 16px; height: 16px; border-radius: var(--radius-sm); background: var(--color-neutral-200); }
.ui-mock__phone-tabs span.is-active { background: var(--color-primary-600); }

/* web-saas — sidebar nav + toolbar + data table with status pills */
.ui-mock__saas { display: grid; grid-template-columns: 40px 1fr; gap: var(--space-4); }
.ui-mock__saas-sidebar { display: flex; flex-direction: column; gap: var(--space-3); padding-top: 4px; }
.ui-mock__saas-nav { width: 22px; height: 22px; border-radius: var(--radius-md); background: var(--color-neutral-100); }
.ui-mock__saas-nav.is-active { background: var(--color-primary-600); }
.ui-mock__saas-main { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ui-mock__saas-toolbar { display: flex; align-items: center; gap: var(--space-3); }
.ui-mock__saas-search { flex: 1; height: 22px; border-radius: var(--radius-full); background: var(--color-neutral-100); }
.ui-mock__saas-user { width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--color-secondary-600); flex-shrink: 0; }
.ui-mock__pill { margin-left: auto; font-size: 9px; font-weight: var(--weight-semibold); padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.ui-mock__pill--on { background: var(--color-secondary-100); color: var(--color-secondary-700); }
.ui-mock__pill--off { background: var(--color-neutral-100); color: var(--color-neutral-500); }

/* seo-search — keyword ranking table */
.ui-mock__keywords { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__kw-row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-body-sm); }
.ui-mock__kw-term { flex: 1; color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mock__kw-pos { font-family: var(--font-heading); font-weight: var(--weight-semibold); color: var(--color-neutral-900); font-variant-numeric: tabular-nums; }
.ui-mock__kw-delta { font-size: 10px; font-weight: var(--weight-semibold); width: 28px; text-align: right; }
.ui-mock__kw-delta--up { color: var(--color-success-700); }
.ui-mock__kw-delta--down { color: var(--color-secondary-600); }

/* meta-ads — ad-card previews + audience metric bars */
.ui-mock__adcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.ui-mock__adcard { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-md); border: 1px solid var(--color-neutral-200); background: var(--color-neutral-50); }
.ui-mock__adcard-thumb { display: block; height: 52px; border-radius: var(--radius-sm); background: var(--gradient-icon-1); }
.ui-mock__adcard-thumb--alt { background: var(--gradient-icon-4); }
.ui-mock__adcard-lines { display: flex; flex-direction: column; gap: 4px; }
.ui-mock__adcard-lines span { display: block; height: 5px; border-radius: var(--radius-full); background: var(--color-neutral-200); }

/* ai-workflow — reuses .ui-mock__flow, adds a distinct model-node accent */
.ui-mock__node--ai { border-color: var(--color-accent-700); background: var(--color-accent-700); color: var(--color-white); }
.ui-mock__node--ai span { color: rgba(255, 255, 255, 0.8); }

/* hospital — occupancy tiles + appointment strip (reuses .ui-mock__modules/.ui-mock__table) */
.ui-mock__calendar { display: flex; gap: var(--space-2); }
.ui-mock__calendar-slot { flex: 1; text-align: center; padding: var(--space-2) 0; border-radius: var(--radius-md); font-size: 10px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.ui-mock__calendar-slot--free { background: var(--color-secondary-100); color: var(--color-secondary-700); }
.ui-mock__calendar-slot--busy { background: var(--color-accent-100); color: var(--color-accent-700); }

/* school — attendance heat grid (reuses .ui-mock__kpis/.ui-mock__rows) */
.ui-mock__grid-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ui-mock__heat-cell { display: block; aspect-ratio: 1; border-radius: 3px; }
.ui-mock__heat-cell--present { background: var(--color-secondary-600); }
.ui-mock__heat-cell--absent { background: var(--color-neutral-200); }

/* ---------- Shared "chrome kit" — opt-in anatomy reused across variants:
   topbar (search + notifications + avatar), filter chips, avatar stacks,
   and a one-line empty-state row. Keeps the richer variants from each
   reinventing the same toolbar. ---------- */
.ui-mock__topbar { display: flex; align-items: center; gap: var(--space-3); }
.ui-mock__topbar-search { flex: 1; height: 24px; border-radius: var(--radius-full); background: var(--color-neutral-100); }
.ui-mock__topbar-bell { position: relative; width: 24px; height: 24px; border-radius: var(--radius-md); background: var(--color-neutral-100); flex-shrink: 0; }
.ui-mock__topbar-bell::after { content: ''; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--color-secondary-600); border: 1.5px solid var(--color-white); }
.ui-mock__topbar-avatar { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--gradient-icon-1); flex-shrink: 0; }

.ui-mock__filterbar { display: flex; gap: var(--space-2); }
.ui-mock__filter-chip { font-size: 10px; font-weight: var(--weight-semibold); padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--color-neutral-100); color: var(--color-neutral-500); }
.ui-mock__filter-chip.is-active { background: var(--color-primary-600); color: var(--color-white); }

.ui-mock__avatars { display: flex; }
.ui-mock__avatars span { width: 20px; height: 20px; border-radius: var(--radius-full); border: 2px solid var(--color-white); margin-left: -6px; }
.ui-mock__avatars span:first-child { margin-left: 0; }
.ui-mock__avatars span:nth-child(1) { background: var(--gradient-icon-1); }
.ui-mock__avatars span:nth-child(2) { background: var(--gradient-icon-2); }
.ui-mock__avatars span:nth-child(3) { background: var(--gradient-icon-4); }

.ui-mock__empty { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-neutral-200); border-radius: var(--radius-md); font-size: var(--text-body-sm); color: var(--color-neutral-500); font-style: italic; }

/* Generalized status pill — Active/Pending, Draft/Review/Published,
   GET/POST, In Transit/Delivered, all resolve to .ui-mock__pill--on/off. */
.ui-mock__pill--warn { background: var(--color-accent-100); color: var(--color-accent-700); }

/* real-estate — listing cards (pipeline reuses .ui-mock__pipeline/.ui-mock__col/.ui-mock__deal) */
.ui-mock__listings { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.ui-mock__listing { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__listing-thumb { display: block; height: 56px; border-radius: var(--radius-md); background: var(--gradient-icon-3); }
.ui-mock__listing-thumb--alt { background: var(--gradient-icon-4); }
.ui-mock__listing-info { display: flex; flex-direction: column; gap: 2px; }
.ui-mock__listing-info strong { font-family: var(--font-heading); font-size: var(--text-body-md); color: var(--color-neutral-900); }
.ui-mock__listing-info em { font-style: normal; font-size: 10px; color: var(--color-neutral-500); }

/* gbp-local / local-presence — Google Business Profile card + map-pin cluster */
.ui-mock__gbp-rating { display: flex; align-items: center; gap: var(--space-2); }
.ui-mock__gbp-stars { color: var(--color-accent-600); font-size: 14px; letter-spacing: 1px; }
.ui-mock__gbp-rating strong { font-family: var(--font-heading); font-size: var(--text-h5); color: var(--color-neutral-900); }
.ui-mock__gbp-count { font-size: var(--text-caption); color: var(--color-neutral-500); }
.ui-mock__gbp-rating .ui-mock__pill { margin-left: auto; }
.ui-mock__gbp-map { position: relative; height: 90px; border-radius: var(--radius-md); background: var(--color-secondary-100); overflow: hidden; }
.ui-mock__gbp-pin { position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; background: var(--color-secondary-600); transform: translate(-50%, -100%) rotate(-45deg); }
.ui-mock__gbp-pin--you { background: var(--color-primary-600); width: 14px; height: 14px; }
.ui-mock__reviews { display: flex; flex-direction: column; gap: var(--space-3); }
.ui-mock__review { display: flex; gap: var(--space-2); }
.ui-mock__review-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--gradient-icon-2); flex-shrink: 0; }
.ui-mock__review strong { display: block; font-size: var(--text-body-sm); color: var(--color-neutral-900); }
.ui-mock__review-stars { font-size: 9px; color: var(--color-accent-600); }
.ui-mock__review p { margin: 2px 0 0; font-size: var(--text-caption); color: var(--color-neutral-700); }

/* linkedin — sponsored post preview + lead-gen form fields */
.ui-mock__li-post { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-neutral-200); background: var(--color-neutral-50); }
.ui-mock__li-post-head { display: flex; align-items: center; gap: var(--space-2); }
.ui-mock__li-post-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--gradient-icon-3); flex-shrink: 0; }
.ui-mock__li-post-head strong { display: block; font-size: var(--text-body-sm); color: var(--color-neutral-900); }
.ui-mock__li-post-head em { font-style: normal; font-size: 9px; color: var(--color-neutral-500); }
.ui-mock__li-post-line { display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-neutral-200); }
.ui-mock__li-post-stats { display: flex; gap: var(--space-4); font-size: 10px; color: var(--color-neutral-500); margin-top: 2px; }
.ui-mock__li-leadform { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.ui-mock__li-field { font-size: 10px; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-neutral-50); border: 1px solid var(--color-neutral-200); color: var(--color-neutral-500); }

/* social-calendar — weekly content calendar with platform chips */
.ui-mock__cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ui-mock__cal-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: var(--space-2) 2px; border-radius: var(--radius-sm); background: var(--color-neutral-50); min-height: 46px; }
.ui-mock__cal-day-label { font-size: 8px; font-weight: var(--weight-semibold); color: var(--color-neutral-500); }
.ui-mock__cal-chip { width: 100%; height: 6px; border-radius: var(--radius-full); }
.ui-mock__cal-chip--ig { background: var(--gradient-icon-2); }
.ui-mock__cal-chip--li { background: var(--gradient-icon-3); }

/* ai-assistant — chat bubble + confidence-scored document rows */
.ui-mock__docs { display: flex; flex-direction: column; gap: var(--space-2); }
.ui-mock__doc-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-neutral-50); font-size: var(--text-body-sm); }
.ui-mock__doc-name { color: var(--color-neutral-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-mock__doc-conf { font-weight: var(--weight-semibold); color: var(--color-success-700); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: var(--space-2); }

/* api-console — method-badged endpoint rows (overrides the generic .ui-mock__trow first-child dot) */
.ui-mock__trow span.ui-mock__method:first-child { width: auto; height: auto; border-radius: var(--radius-sm); background: var(--color-primary-100); color: var(--color-primary-700); font-size: 9px; font-weight: var(--weight-semibold); padding: 2px 6px; flex-shrink: 0; }
.ui-mock__trow span.ui-mock__method--post:first-child { background: var(--color-secondary-100); color: var(--color-secondary-700); }

/* billing / retail — POS receipt ticket */
.ui-mock__receipt { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-neutral-50); border: 1px dashed var(--color-neutral-300); }
.ui-mock__receipt-head { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--color-neutral-500); margin-bottom: var(--space-2); text-align: center; }
.ui-mock__receipt-row { display: flex; justify-content: space-between; font-size: var(--text-body-sm); color: var(--color-neutral-700); padding: 3px 0; }
.ui-mock__receipt-total { display: flex; justify-content: space-between; font-weight: var(--weight-semibold); font-family: var(--font-heading); color: var(--color-neutral-900); border-top: 1px dashed var(--color-neutral-300); margin-top: var(--space-2); padding-top: var(--space-2); }
.ui-mock__receipt-barcode { margin-top: var(--space-3); height: 24px; background: repeating-linear-gradient(90deg, var(--color-neutral-900) 0 2px, transparent 2px 5px); }

/* inventory — low-stock alert badge */
.ui-mock__alert { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-100); color: var(--color-accent-700); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); }

/* retail — storefront product grid */
.ui-mock__store-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
.ui-mock__store-tile { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); }
.ui-mock__store-tile:nth-child(6n+1) { background: var(--gradient-icon-1); }
.ui-mock__store-tile:nth-child(6n+2) { background: var(--gradient-icon-2); }
.ui-mock__store-tile:nth-child(6n+3) { background: var(--gradient-icon-3); }
.ui-mock__store-tile:nth-child(6n+4) { background: var(--gradient-icon-4); }
.ui-mock__store-tile:nth-child(6n+5) { background: var(--color-secondary-100); }
.ui-mock__store-tile:nth-child(6n+6) { background: var(--color-accent-100); }

/* manufacturing — production-stage tracker */
.ui-mock__stages { display: flex; align-items: center; }
.ui-mock__stage { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 9px; font-weight: var(--weight-semibold); color: var(--color-neutral-500); }
.ui-mock__stage-dot { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--color-neutral-200); }
.ui-mock__stage.is-done .ui-mock__stage-dot { background: var(--color-success-600); }
.ui-mock__stage.is-done { color: var(--color-neutral-900); }
.ui-mock__stage-line { flex: 1; height: 2px; background: var(--color-neutral-200); margin: 0 4px 14px; }

/* logistics — shipment route line */
.ui-mock__route { height: 60px; }
.ui-mock__route svg { width: 100%; height: 100%; display: block; }

/* transform — Before/After business-transformation panel */
.ui-mock__transform { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: center; }
.ui-mock__transform-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ui-mock__transform-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--weight-semibold); color: var(--color-neutral-500); }
.ui-mock__transform-step { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); }
.ui-mock__transform-step span { width: 14px; height: 14px; border-radius: var(--radius-full); flex-shrink: 0; }
.ui-mock__transform-step--off span { background: var(--color-neutral-200); }
.ui-mock__transform-step--off em { font-style: normal; color: var(--color-neutral-500); text-decoration: line-through; }
.ui-mock__transform-step--on span { background: var(--color-success-600); }
.ui-mock__transform-step--on em { font-style: normal; color: var(--color-neutral-900); }
.ui-mock__transform-arrow { font-size: 20px; color: var(--color-neutral-300); }

.card {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

@media (min-width: 768px) {
    .card { padding: var(--space-8); }
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg);
        border-color: var(--color-primary-100);
    }
}

.card__icon-tile {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-3);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

/* Cycle the 4 gradients across a grid of cards automatically — no template
   change needed, every card-grid on the site gets varied color for free. */
.card-grid > .card:nth-child(4n+1) .card__icon-tile,
.process-rail > .process-step:nth-child(4n+1) .card__icon-tile { background: var(--gradient-icon-1); }
.card-grid > .card:nth-child(4n+2) .card__icon-tile,
.process-rail > .process-step:nth-child(4n+2) .card__icon-tile { background: var(--gradient-icon-2); }
.card-grid > .card:nth-child(4n+3) .card__icon-tile,
.process-rail > .process-step:nth-child(4n+3) .card__icon-tile { background: var(--gradient-icon-3); }
.card-grid > .card:nth-child(4n+4) .card__icon-tile,
.process-rail > .process-step:nth-child(4n+4) .card__icon-tile { background: var(--gradient-icon-4); }

@media (hover: hover) {
    .card:hover .card__icon-tile { transform: scale(1.08) rotate(-4deg); box-shadow: var(--shadow-md); }
}

.card__title { margin-bottom: var(--space-2); }
.card__description { color: var(--color-neutral-700); font-size: var(--text-body-sm); margin-bottom: var(--space-4); }

/* ---------- Card style variants — distinct visual treatments so card
   grids don't all read as the same shape repeated (docs/design/07_Cards.md).
   .card--feature is the existing default (icon tile + title + description),
   already applied by partials/components/card.php. ---------- */

/* benefit — compact, left accent bar, smaller icon; for "Why Choose Us" grids */
.card--benefit {
    padding-left: var(--space-6);
    border-left: 3px solid var(--color-secondary-600);
    border-radius: var(--radius-lg);
}
.card--benefit .card__icon-tile { width: 34px; height: 34px; margin-bottom: var(--space-3); }
.card--benefit .card__title { font-size: var(--text-h5); }

/* checklist — tinted container around a .check-list; for "What's Included" */
.card--checklist {
    background: var(--color-neutral-50);
    border-style: dashed;
}
.card--checklist .check-list { margin: 0; }

/* metrics — stat-forward, minimal chrome; generalizes .metric-band__item */
.card--metrics {
    text-align: center;
}
.card__metric-value {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--text-display-lg);
    font-weight: var(--weight-extrabold);
    color: var(--color-primary-600);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.card__metric-label { display: block; margin-top: var(--space-2); color: var(--color-neutral-500); font-size: var(--text-body-sm); }
.card__metric-trend { display: inline-block; margin-top: var(--space-1); font-size: var(--text-caption); font-weight: var(--weight-semibold); }
.card__metric-trend--up { color: var(--color-success-700); }
.card__metric-trend--down { color: var(--color-secondary-600); }

/* timeline — connector-line treatment usable outside .process-rail */
.card--timeline { position: relative; padding-left: var(--space-8); margin-bottom: var(--space-6); border: none; box-shadow: none; background: none; padding-top: 0; padding-right: 0; padding-bottom: 0; }
.card--timeline:last-child { margin-bottom: 0; }
.card--timeline::before {
    content: '';
    position: absolute;
    left: 14px;
    top: var(--space-6);
    bottom: calc(-1 * var(--space-6));
    width: 2px;
    background: var(--color-neutral-200);
}
.card--timeline:last-child::before { display: none; }
.card__timeline-dot {
    position: absolute;
    left: 8px;
    top: var(--space-6);
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background: var(--color-secondary-600);
    border: 3px solid var(--color-white);
    box-shadow: 0 0 0 1px var(--color-neutral-200);
}

.industry-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out);
}

.industry-tile:hover { background: var(--color-secondary-100); text-decoration: none; }
.industry-tile:hover .industry-tile__icon { transform: scale(1.08); }

.industry-tile__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: var(--gradient-icon-2);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--duration-fast) var(--ease-out);
}

.badge {
    display: inline-block;
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
}

.badge--category { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge--industry { background: var(--color-secondary-100); color: var(--color-secondary-700); }
.badge--outline { background: transparent; border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); }
.badge--accent { background: var(--color-accent-100); color: var(--color-accent-700); }
.badge--info { background: var(--color-info-700); color: var(--color-white); }
.badge--danger { background: var(--color-danger-700); color: var(--color-white); }
.badge--status-new { background: var(--color-info-600); color: var(--color-white); }
.badge--status-contacted { background: var(--color-warning-600); color: var(--color-white); }
.badge--status-qualified { background: var(--color-secondary-600); color: var(--color-white); }
.badge--status-closed { background: var(--color-neutral-500); color: var(--color-white); }
.badge--status-draft { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.badge--status-published { background: var(--color-success-700); color: var(--color-white); }
.badge--status-open { background: var(--color-success-700); color: var(--color-white); }
.badge--status-reviewed { background: var(--color-info-600); color: var(--color-white); }
.badge--status-shortlisted { background: var(--color-secondary-600); color: var(--color-white); }
.badge--status-rejected { background: var(--color-danger-600); color: var(--color-white); }
.badge--status-active { background: var(--color-success-700); color: var(--color-white); }
.badge--status-disabled { background: var(--color-neutral-500); color: var(--color-white); }
.badge--status-pending { background: var(--color-warning-600); color: var(--color-white); }
.badge--status-sent { background: var(--color-success-700); color: var(--color-white); }
.badge--status-failed { background: var(--color-danger-600); color: var(--color-white); }

.testimonial-card {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
}

.testimonial-card--spotlight {
    max-width: 640px;
    margin-inline: auto;
    padding: var(--space-10);
    text-align: center;
}

.testimonial-card--spotlight .testimonial-card__author { justify-content: center; }

.testimonial-card__rating {
    color: var(--color-accent-600);
    font-size: var(--text-body-md);
    letter-spacing: 0.1em;
}

.testimonial-card__quote {
    margin: 0;
    color: var(--color-neutral-900);
    font-size: var(--text-body-md);
    line-height: var(--leading-relaxed);
}

.testimonial-card--spotlight .testimonial-card__quote { font-size: var(--text-h5); }

.testimonial-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: auto;
}

.testimonial-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    object-fit: cover;
}

.testimonial-card__avatar--initial {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    font-weight: var(--weight-semibold);
}

.testimonial-card__name { display: block; font-weight: var(--weight-semibold); color: var(--color-neutral-900); }
.testimonial-card__role { display: block; font-size: var(--text-body-sm); color: var(--color-neutral-700); }

.testimonial-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .testimonial-grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; }
}

@media (min-width: 768px) {
    .testimonial-grid--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .testimonial-grid--grid.testimonial-grid--4up { grid-template-columns: repeat(4, 1fr); }
    .testimonial-grid--grid:not(.testimonial-grid--4up) { grid-template-columns: repeat(3, 1fr); }
}

.intent-router {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .intent-router { grid-template-columns: repeat(3, 1fr); }
}

.intent-card {
    display: block;
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    text-align: center;
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.intent-card:hover {
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.intent-card h3 { margin-bottom: var(--space-2); }
.intent-card p { color: var(--color-neutral-700); margin-bottom: var(--space-4); }

.office-card {
    background: var(--color-white);
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.office-card h3 { margin-bottom: var(--space-3); }
.office-card p { margin-bottom: var(--space-2); color: var(--color-neutral-700); }

.contact-method-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.pagination__list { display: flex; gap: var(--space-1); }

.pagination__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    color: var(--color-neutral-700);
}

.pagination__number:hover { background: var(--color-primary-50); text-decoration: none; }
.pagination__number.is-current { background: var(--color-primary-600); color: var(--color-white); }
.pagination__link.is-disabled { color: var(--color-neutral-300); pointer-events: none; }