/* Shared styles for use-case / role pages
   (asset-management, build-to-rent, block-management, property-management,
   survey-valuation, facility-management). */

.uc-hero { padding: 80px 0 64px; background: var(--gradient-deep); color: #fff; }
.uc-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.uc-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: 60px; letter-spacing: -0.025em; line-height: 1.05; color: #fff; margin: 20px 0; }
.uc-hero p { color: rgba(255,255,255,0.75); font-size: 19px; line-height: 1.5; margin-bottom: 28px; max-width: 520px; }
.uc-hero-visual { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 24px; }
.uc-hero-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.uc-kpi { padding: 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; }
.uc-kpi .l { font-size: 11px; color: rgba(255,255,255,0.6); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.uc-kpi .v { font-family: var(--font-display); font-weight: 700; font-size: 32px; color: var(--green-100); margin-top: 6px; letter-spacing: -0.02em; }
.uc-stream { background: rgba(0,0,0,0.2); border-radius: 12px; padding: 16px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.7); line-height: 1.8; }
.uc-stream .ok { color: var(--green-100); }
.uc-stream .w { color: #E0A62B; }

.roles { padding: 96px 0; }
.roles h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; }
.roles .lead { font-size: 19px; color: var(--color-text-muted); line-height: 1.55; max-width: 700px; margin-top: 8px; }
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.role-card { padding: 28px; border: 1px solid var(--color-border); border-radius: 16px; background: #fff; }
.role-card .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--off-white-100); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.role-card .ic svg { width: 22px; height: 22px; stroke: var(--anthracite-100); fill: none; stroke-width: 1.75; }
.role-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 8px; }
.role-card p { font-size: 16px; color: var(--color-text-muted); line-height: 1.55; }

.workflow { padding: 96px 0; background: var(--off-white-60); }
.workflow h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; }
.workflow .lead { font-size: 19px; color: var(--color-text-muted); line-height: 1.55; max-width: 700px; margin-bottom: 8px; }
.wf-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 20px; margin-top: 40px; position: relative; }
.wf-step { padding: 24px; background: #fff; border-radius: 12px; border: 1px solid var(--color-border); position: relative; }
.wf-step .n { font-family: var(--font-display); font-weight: 700; font-size: 40px; color: var(--green-100); letter-spacing: -0.02em; line-height: 1; }
.wf-step h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 12px 0 6px; }
.wf-step p { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }

.testi { padding: 96px 0; background: var(--anthracite-100); color: #fff; }
.testi-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.testi blockquote { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: -0.015em; line-height: 1.25; color: #fff; margin: 24px 0; }
.testi .meta { font-size: 16px; color: rgba(255,255,255,0.6); }

.final-cta { background: var(--gradient-primary); color: #fff; padding: 96px 0; text-align: center; }
.final-cta h2 { font-family: var(--font-display); font-weight: 600; font-size: 48px; letter-spacing: -0.02em; color: #fff; }
.final-cta p.sup { color: rgba(255,255,255,0.8); font-size: 18px; margin-top: 14px; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.final-cta .btns { display: flex; gap: 12px; justify-content: center; margin-top: 32px; }

.problem { padding: 96px 0; background: #fff; border-top: 1px solid var(--color-border); }
.problem h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; max-width: 720px; }
.problem .lead { font-size: 19px; color: var(--color-text-muted); line-height: 1.55; max-width: 720px; margin-bottom: 40px; }
.problem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.problem-item { padding: 28px 32px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: flex; gap: 16px; align-items: flex-start; }
.problem-item .x { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: rgba(217, 90, 80, 0.12); color: #C04032; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; margin-top: 2px; }
.problem-item p { font-size: 17px; color: var(--anthracite-100); line-height: 1.5; font-weight: 500; margin: 0; }

.solution { padding: 96px 0; background: var(--off-white-60); }
.solution h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; max-width: 720px; }
.solution .lead { font-size: 19px; color: var(--color-text-muted); line-height: 1.55; max-width: 720px; margin-bottom: 48px; }
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* Compliance-block grid count variants —
   - 4 cards: 4-col on wide so the regional card sits inline with the
     three universals.
   - 6 cards: 3-col on wide → 2 rows of 3 (the canonical 2-row layout).
   Both drop to 2-col on tablet, 1-col on mobile. 3-card variant uses
   the default 3-col layout (no override needed). */
.cap-grid-4 { grid-template-columns: repeat(4, 1fr); }
.cap-grid-6 { grid-template-columns: repeat(3, 1fr); }
.cap-card { padding: 28px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; }
.cap-card .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--green-100); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.cap-card .ic svg { width: 20px; height: 20px; stroke: #fff; fill: none; stroke-width: 2; }
.cap-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; margin-bottom: 8px; letter-spacing: -0.01em; }
.cap-card p { font-size: 15px; color: var(--color-text-muted); line-height: 1.55; }
/* Supporting paragraph beneath the compliance grid — replaces the legacy
   "Flexible inspection templates" card without adding a fifth tile. */
.cb-supporting { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--color-border); font-size: 15px; line-height: 1.6; color: var(--color-text-muted); max-width: 880px; }
@media (max-width: 980px) {
  .cap-grid-4, .cap-grid-6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cap-grid-4, .cap-grid-6 { grid-template-columns: 1fr; }
}

.outcomes { padding: 96px 0; background: #fff; }
.outcomes h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; max-width: 720px; }
.out-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.out-card { padding: 32px; border-radius: 16px; background: var(--off-white-60); border: 1px solid var(--color-border); display: flex; gap: 20px; align-items: flex-start; }
.out-card .ic { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: #fff; border: 1px solid var(--color-border); display: flex; align-items: center; justify-content: center; }
.out-card .ic svg { width: 22px; height: 22px; stroke: var(--green-100); fill: none; stroke-width: 1.75; }
.out-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-bottom: 6px; letter-spacing: -0.01em; }
.out-card p { font-size: 15px; color: var(--color-text-muted); line-height: 1.55; margin: 0; }

.integ { padding: 96px 0; background: var(--anthracite-100); color: #fff; }
.integ h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; color: #fff; margin: 16px 0; max-width: 720px; }
.integ .lead { color: rgba(255,255,255,0.7); font-size: 19px; line-height: 1.55; max-width: 620px; margin-bottom: 40px; }
.integ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.integ-card { padding: 28px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; }
.integ-card .ic { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.integ-card .ic svg { width: 20px; height: 20px; stroke: var(--green-100); fill: none; stroke-width: 1.75; }
.integ-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: #fff; margin-bottom: 6px; }
.integ-card p { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.55; margin: 0; }
/* Real-outputs 2-col with stacked document mockup */
.integ-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.integ-grid-2col h2 { max-width: 100%; }
@media (max-width: 900px) { .integ-grid-2col { grid-template-columns: 1fr; gap: 48px; } }

.ro-visual { position: relative; aspect-ratio: 4/3.2; }
.ro-doc { position: absolute; inset: 0; background: #fff; border-radius: 14px; box-shadow: 0 24px 48px rgba(0,0,0,0.35), 0 2px 4px rgba(0,0,0,0.1); }
.ro-doc-back { transform: rotate(-4deg) translate(-18px, 14px); background: #F1F2F4; }
.ro-doc-mid { transform: rotate(2deg) translate(12px, 6px); background: #FAFBFC; }
.ro-doc-front { padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; }
.ro-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.ro-brand { display: flex; gap: 8px; align-items: center; }
.ro-logo-dot { width: 18px; height: 18px; border-radius: 4px; background: var(--green-100); }
.ro-logo-txt { width: 70px; height: 10px; border-radius: 2px; background: var(--anthracite-100); }
.ro-meta { font-size: 11px; color: var(--color-text-subtle); font-family: var(--font-mono); }
.ro-title { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--anthracite-100); letter-spacing: -0.01em; }
.ro-sub { font-size: 12px; color: var(--color-text-muted); margin-top: -8px; }
.ro-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
/* "Real outputs" mock-report photo strip — shared by every use-case page
 * (property-management, facility-management, asset-management, block-
 * management, compliance-inspections, body-corporate, specialist-inspections,
 * survey-valuation, hhsrs, hospitality). The mock report title is
 * "Move-in inspection · 14 Elm Mews", so the trio shows kitchen / bathroom /
 * living to read as a typical residential inspection report. */
.ro-photo {
  aspect-ratio: 1/1; border-radius: 6px;
  background-color: #d6cfc1;
  background-size: cover;
  background-position: center;
  position: relative; overflow: hidden;
}
.ro-photo:nth-child(1) { background-image: url('../assets/inspection-photos/kitchen-side-angle.webp'); }
.ro-photo:nth-child(2) { background-image: url('../assets/inspection-photos/bathroom-side-angle.webp'); }
.ro-photo:nth-child(3) { background-image: url('../assets/inspection-photos/living-room-side-angle.webp'); }
.ro-rows { display: flex; flex-direction: column; gap: 7px; }
.ro-row { display: flex; gap: 10px; align-items: center; }
.ro-chip { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; }
.ro-chip.ok { background: var(--green-100); }
.ro-chip.w { background: #E0A62B; }
.ro-line { flex: 1; height: 6px; border-radius: 3px; background: var(--off-white-100); }
.ro-row:nth-child(2) .ro-line { width: 86%; flex: 0 0 auto; }
.ro-row:nth-child(3) .ro-line { width: 72%; flex: 0 0 auto; }
.ro-row:nth-child(4) .ro-line { width: 92%; flex: 0 0 auto; }
.ro-sign { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--color-border); margin-top: 4px; }
.ro-sig { width: 90px; height: 28px; background: linear-gradient(90deg, transparent 0%, var(--anthracite-100) 20%, var(--anthracite-100) 80%, transparent 100%); opacity: 0.4; mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 28' preserveAspectRatio='none'><path d='M3 18 C 10 5, 18 24, 26 12 S 38 22, 46 14 S 58 6, 66 18 S 80 22, 87 10' stroke='black' fill='none' stroke-width='2' stroke-linecap='round'/></svg>"); mask-repeat: no-repeat; mask-size: 100% 100%; -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 28' preserveAspectRatio='none'><path d='M3 18 C 10 5, 18 24, 26 12 S 38 22, 46 14 S 58 6, 66 18 S 80 22, 87 10' stroke='black' fill='none' stroke-width='2' stroke-linecap='round'/></svg>"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; }
.ro-sig-meta { width: 80px; height: 8px; border-radius: 2px; background: var(--off-white-100); }

.integ-logos { margin-top: 48px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1); }
.integ-logos .lbl { font-size: 13px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; margin-bottom: 24px; text-align: center; }
.integ-logos-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 32px; align-items: center; }
.integ-logos-grid .lg { height: 44px; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; transition: color var(--motion-base) var(--ease-standard), opacity var(--motion-base) var(--ease-standard); white-space: nowrap; }
.integ-logos-grid .lg:hover { color: #fff; }
@media (max-width: 900px) { .integ-logos-grid { grid-template-columns: repeat(3, 1fr); row-gap: 24px; } }

/* Differentiation block (nspire, hhsrs) */
.diff { padding: 96px 0; background: #fff; }
.diff h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; max-width: 720px; }
.diff .lead { font-size: 19px; color: var(--color-text-muted); line-height: 1.55; max-width: 720px; margin-bottom: 40px; }
.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.diff-item { padding: 28px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--off-white-60); display: flex; gap: 16px; align-items: flex-start; }
.diff-item .chk { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--green-100); display: flex; align-items: center; justify-content: center; }
.diff-item .chk svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; }
.diff-item p { font-size: 17px; color: var(--anthracite-100); line-height: 1.5; font-weight: 500; margin: 0; }
.disclaimer { font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 14px; max-width: 520px; font-style: italic; }
@media (max-width: 900px) { .diff-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * Inline links inside lead/supp paragraphs — used by templates
 * that opt in via *_html fields (e.g. specialist-inspections).
 * Underlined + brand colour with a subtle hover state.
 * ============================================================ */
.uc-hero p a,
.problem .lead a,
.workflow .lead a,
.real-supporting a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--motion-base) var(--ease-standard);
}
.uc-hero p a { color: #fff; text-decoration-color: rgba(255,255,255,0.45); }
.uc-hero p a:hover { text-decoration-color: var(--green-100); color: var(--green-100); }
.problem .lead a,
.workflow .lead a,
.real-supporting a { color: var(--anthracite-100); text-decoration-color: rgba(0,0,0,0.25); }
.problem .lead a:hover,
.workflow .lead a:hover,
.real-supporting a:hover { color: var(--green-100); text-decoration-color: var(--green-100); }

/* Real-outputs supporting line — sits beneath the headline lead with a
   slimmer, calmer treatment so it reads as a contextual aside. */
.real-supporting { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; max-width: 520px; margin: -16px 0 28px; }
.real-supporting a { color: rgba(255,255,255,0.85); text-decoration-color: rgba(255,255,255,0.35); }
.real-supporting a:hover { color: var(--green-100); text-decoration-color: var(--green-100); }

/* ============================================================
 * Specialist hub — featured workflow cards (e.g. RICS, Pest
 * Control). Slightly elevated treatment with a "Popular" badge,
 * full-card link target and a CTA arrow at the bottom.
 * ============================================================ */
.spec-hub { padding: 96px 0; background: #fff; border-top: 1px solid var(--color-border); }
.spec-hub h2 { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -0.02em; margin: 16px 0; max-width: 720px; }
.spec-hub .lead { font-size: 19px; color: var(--color-text-muted); line-height: 1.55; max-width: 720px; margin-bottom: 40px; }
.spec-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.spec-hub-grid-3 { grid-template-columns: repeat(3, 1fr); }
.spec-hub-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .spec-hub-grid-4 { grid-template-columns: repeat(2, 1fr); } }
.spec-hub-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15,23,42,0.04);
  transition: border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard),
              transform var(--motion-base) var(--ease-standard);
}
.spec-hub-card:hover {
  border-color: var(--green-100);
  box-shadow: 0 8px 24px rgba(15,23,42,0.08);
  transform: translateY(-2px);
}
.spec-hub-badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--green-100); color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.spec-hub-card .ic { width: 44px; height: 44px; border-radius: 10px; background: var(--off-white-100); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.spec-hub-card .ic svg { width: 22px; height: 22px; stroke: var(--anthracite-100); fill: none; stroke-width: 1.75; }
.spec-hub-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--anthracite-100); }
.spec-hub-card p { font-size: 16px; color: var(--color-text-muted); line-height: 1.55; margin: 0 0 20px; }
.spec-hub-cta {
  margin-top: auto;
  display: inline-flex; gap: 8px; align-items: center;
  font-weight: 600; font-size: 15px;
  color: var(--green-100);
}
.spec-hub-cta svg { width: 16px; height: 16px; transition: transform var(--motion-base) var(--ease-standard); }
.spec-hub-card:hover .spec-hub-cta svg { transform: translateX(4px); }
@media (max-width: 900px) { .spec-hub-grid, .spec-hub-grid-3, .spec-hub-grid-4 { grid-template-columns: 1fr; } }

/* ============================================================
 * Related-hub footer — hub-and-spoke links to sibling pages.
 * Compact, single-row treatment that keeps the page from
 * cluttering the main inspection grid above.
 * ============================================================ */
.rel-hub { padding: 96px 0; background: var(--off-white-60); border-top: 1px solid var(--color-border); }
.rel-hub h2 { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; margin: 16px 0; max-width: 720px; }
.rel-hub .lead { font-size: 17px; color: var(--color-text-muted); line-height: 1.55; max-width: 720px; margin-bottom: 32px; }
.rel-hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.rel-hub-grid-2 { grid-template-columns: repeat(2, 1fr); }
.rel-hub-grid-4 { grid-template-columns: repeat(4, 1fr); }
.rel-hub-card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-base) var(--ease-standard),
              box-shadow var(--motion-base) var(--ease-standard);
}
.rel-hub-card:hover {
  border-color: var(--green-100);
  box-shadow: 0 6px 20px rgba(15,23,42,0.06);
}
.rel-hub-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--anthracite-100); padding-right: 28px; }
.rel-hub-card p { font-size: 14px; color: var(--color-text-muted); line-height: 1.5; margin: 0; padding-right: 28px; }
.rel-hub-arrow {
  position: absolute; top: 24px; right: 22px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--color-text-subtle);
  transition: transform var(--motion-base) var(--ease-standard),
              color var(--motion-base) var(--ease-standard);
}
.rel-hub-arrow svg { width: 18px; height: 18px; }
.rel-hub-card:hover .rel-hub-arrow { color: var(--green-100); transform: translateX(4px); }
@media (max-width: 900px) {
  .rel-hub-grid, .rel-hub-grid-2, .rel-hub-grid-4 { grid-template-columns: 1fr; }
}

/* HHSRS-style compliance 2-col with checkmark cards */
.compliance { padding: 96px 0; background: var(--off-white-60); }
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 8px; }
.comp-card { padding: 24px; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; display: flex; gap: 16px; align-items: flex-start; }
.comp-card .ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; background: rgba(140, 200, 90, 0.12); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.comp-card .ic svg { width: 18px; height: 18px; stroke: var(--green-100); fill: none; stroke-width: 2; }
.comp-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin: 0 0 6px; }
.comp-card p { font-size: 15px; color: var(--color-text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 900px) { .comp-grid { grid-template-columns: 1fr; } }

/* ============================================================
 * Tablet (≤900px) — collapse the wide multi-column grids that
 * were 4-up / 3-up / 2-up on desktop. Shared by every template
 * enqueueing use-case.css (facility-management, asset-management,
 * property-management, survey-valuation, compliance-inspections,
 * specialist-inspections, block-management, body-corporate,
 * build-to-rent, nspire, hhsrs).
 * ============================================================ */
@media (max-width: 900px) {
  .uc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .wf-grid { grid-template-columns: repeat(2, 1fr); }
  .roles-grid, .cap-grid, .integ-grid { grid-template-columns: repeat(2, 1fr); }
  .out-grid, .problem-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Phones (≤640px) — single-column everything, fonts pulled back
 * so headings + monospace addresses don't push the body wider
 * than the viewport.
 * ============================================================ */
@media (max-width: 640px) {
  /* Section padding + headings */
  .roles, .workflow, .problem, .solution, .outcomes, .integ, .testi, .final-cta, .compliance, .spec-hub, .rel-hub { padding: 64px 0; }
  .roles h2, .workflow h2, .problem h2, .solution h2, .outcomes h2, .integ h2, .compliance h2, .spec-hub h2 { font-size: 28px; }
  .rel-hub h2 { font-size: 24px; }
  .roles .lead, .workflow .lead, .problem .lead, .solution .lead, .integ .lead, .compliance .lead, .spec-hub .lead, .rel-hub .lead { font-size: 16px; }
  .spec-hub-card { padding: 24px; }
  .spec-hub-card h4 { font-size: 20px; }
  .rel-hub-card { padding: 20px 22px; }

  /* Hero — text + KPIs */
  .uc-hero h1 { font-size: 34px; }
  .uc-hero p { font-size: 16px; }
  .uc-hero-kpis { grid-template-columns: 1fr; gap: 10px; }
  .uc-kpi { padding: 14px; }
  .uc-kpi .v { font-size: 26px; }
  .uc-stream { font-size: 10px; padding: 12px; }
  .uc-hero-visual { padding: 16px; }

  /* Single-column grids */
  .roles-grid, .wf-grid, .cap-grid, .integ-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Card chrome — slimmer padding so words fit */
  .role-card, .cap-card, .integ-card, .wf-step { padding: 22px; }
  .out-card { padding: 22px; gap: 14px; }
  .problem-item { padding: 22px; }

  /* Logos: 2-up on phone instead of 3-up tablet */
  .integ-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; row-gap: 18px; }
  .integ-logos-grid .lg { font-size: 16px; height: 36px; }

  /* Final-CTA buttons stay inline at phone width — flex-shrink lets
   * both buttons share the row without wrapping. */
  .final-cta h2 { font-size: 30px; }
  .final-cta p.sup { font-size: 15px; }
  .final-cta .btns { flex-wrap: nowrap; gap: 10px; justify-content: center; }
  .final-cta .btns .btn { flex: 1 1 0; min-width: 0; padding-left: 14px; padding-right: 14px; white-space: nowrap; }

  /* Defensive overflow containment — long unbreakable text in
   * .uc-stream (mono code-style block) and any monospace bars
   * inside the hero/visual containers can otherwise force the
   * grid track wider than the viewport. min-width: 0 lets parents
   * constrain children. */
  .uc-hero-grid > * { min-width: 0; }
  .uc-hero-visual { min-width: 0; overflow: hidden; }
}