/* Orient — Use Cases page
   Reuses orient.css tokens + landing.css (header/footer/wrap/btn/eyebrow/section/closing).
   Human = clay (--human), Machine = slate (--machine). Mood: warm, editorial, calm. */

.uc-page .wrap { max-width: 1320px; }
.uc-page .eyebrow.clay { color: var(--human); }
.uc-page .eyebrow.slate { color: var(--machine); }

/* ===== hero ===== */
.uc-hero { padding: 128px 0 96px; text-align: center; }
.uc-hero .eyebrow { display: block; margin-bottom: 22px; }
.uc-hero h1 { font-size: clamp(40px, 5.4vw, 68px); line-height: 1.04; letter-spacing: -0.022em; max-width: 20ch; margin: 0 auto; }
.uc-hero h1 .hu { font-style: italic; color: var(--human); }
.uc-hero h1 .ma { font-style: italic; color: var(--machine); }
.uc-hero .lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.6; color: var(--ink-2); max-width: 62ch; margin: 30px auto 0; text-wrap: pretty; }
.uc-hero .lede.small { font-size: clamp(16px, 1.45vw, 18px); max-width: 74ch; margin-top: 14px; }
.uc-hero .lede b { color: var(--ink); font-weight: 600; }

/* ===== buyer-led problem entries ===== */
.uc-problems { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-problem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 52px; }
.uc-problem-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; padding: 30px; background: var(--paper); box-shadow: 0 26px 54px -44px rgba(40,30,20,0.30); }
.uc-problem-top { display: flex; gap: 16px; align-items: baseline; margin-bottom: 18px; }
.uc-problem-num { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--human); }
.uc-problem-card h3 { font-family: var(--serif); font-size: clamp(24px, 2.2vw, 31px); line-height: 1.12; letter-spacing: -0.018em; margin: 0; }
.uc-for { margin: 0 0 24px; padding: 14px 16px; border-radius: 12px; background: var(--paper-2); color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.uc-for span { display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--human); }
.uc-problem-body { display: grid; gap: 20px; margin-top: auto; }
.uc-problem-body h4 { margin: 0 0 7px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.uc-problem-body p { margin: 0; font-size: 15.2px; line-height: 1.62; color: var(--ink-2); }
.uc-outcomes ul { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.uc-outcomes li { font-family: var(--mono); font-size: 11.5px; line-height: 1.35; color: var(--ink); background: var(--human-soft); border: 1px solid oklch(0.585 0.088 52 / 0.22); border-radius: 999px; padding: 7px 11px; }

/* ===== two products band ===== */
.uc-intro { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-products { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
.uc-prod { border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; background: var(--paper); }
.uc-prod.h { border-color: oklch(0.585 0.088 52 / 0.30); }
.uc-prod.m { border-color: oklch(0.555 0.072 252 / 0.30); }
.uc-prod .tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.uc-prod.h .tag { color: var(--human); }
.uc-prod.m .tag { color: var(--machine); }
.uc-prod h3 { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; margin: 0 0 12px; }
.uc-prod p { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* ===== case grid (shared) ===== */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; }
.uc-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px; transition: border-color .15s ease, transform .15s ease; }
.uc-card:hover { transform: translateY(-2px); }
.uc-card .num { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; margin-bottom: 14px; }
.uc-card h4 { font-family: var(--serif); font-size: 20px; letter-spacing: -0.01em; margin: 0 0 9px; line-height: 1.15; }
.uc-card p { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* human-accent section */
.uc-human .eyebrow { color: var(--human); }
.uc-human .uc-card .num { color: var(--human); }
.uc-human .uc-card:hover { border-color: var(--human); }

/* machine-accent section — dark panel */
.uc-machine { background: var(--ink-panel); color: var(--paper-on-ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-machine .section-head h2 { color: var(--paper-on-ink); }
.uc-machine .section-head p { color: oklch(0.78 0.01 84); }
.uc-machine .eyebrow { color: oklch(0.7 0.08 252); }
.uc-machine .uc-card { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.12); }
.uc-machine .uc-card:hover { border-color: var(--machine); }
.uc-machine .uc-card .num { color: oklch(0.7 0.08 252); }
.uc-machine .uc-card h4 { color: var(--paper-on-ink); }
.uc-machine .uc-card p { color: oklch(0.78 0.01 84); }

/* ===== loop band ===== */
.uc-loop { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.uc-loop .three { font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); line-height: 1.18; letter-spacing: -0.018em; max-width: 32ch; margin: 0 auto; }
.uc-loop .three .hu { color: var(--human); font-style: italic; }
.uc-loop .three .ma { color: var(--machine); font-style: italic; }
.uc-loop .sub { font-size: 18px; color: var(--ink-2); max-width: 78ch; margin: 30px auto 0; line-height: 1.65; }

/* ===== combined cases ===== */
.uc-combos { display: grid; gap: 14px; margin-top: 52px; }
.uc-combo { border: 1px solid var(--line); border-radius: 14px; padding: 30px 32px; background: var(--paper); }
.uc-combo .ct { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.uc-combo .cn { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-3); }
.uc-combo h4 { font-family: var(--serif); font-size: 24px; letter-spacing: -0.01em; margin: 0; }
.uc-combo .sides { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.uc-combo .side { padding: 22px 28px 0 0; }
.uc-combo .side + .side { padding-left: 28px; border-left: 1px solid var(--line); }
.uc-combo .side .role { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.uc-combo .side.h .role { color: var(--human); }
.uc-combo .side.m .role { color: var(--machine); }
.uc-combo .side p { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 0; }
.uc-combo .value { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.uc-combo .value .vl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.uc-combo .value .vt { font-family: var(--serif); font-size: 18px; color: var(--ink); }

/* ===== teams ===== */
.uc-teams-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 52px; }
.uc-team { border: 1px solid var(--line); border-radius: 14px; padding: 28px 30px; background: var(--paper); }
.uc-team h4 { font-family: var(--serif); font-size: 22px; margin: 0 0 10px; letter-spacing: -0.01em; }
.uc-team .frame { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; }
.uc-team .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-team .chips span { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-2); background: var(--paper-3); border-radius: 20px; padding: 6px 12px; }

/* ===== buyers ===== */
.uc-buyers-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 52px; }
.uc-buyer { border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px; background: var(--paper); transition: border-color .15s ease, transform .15s ease; }
.uc-buyer:hover { transform: translateY(-2px); border-color: var(--human); }
.uc-buyer h4 { font-family: var(--serif); font-size: 21px; line-height: 1.15; letter-spacing: -0.012em; margin: 0 0 12px; }
.uc-buyer p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }

/* ===== profiles / best-fit ===== */
.uc-profiles { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-profiles .lead-note { font-size: 18px; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.uc-fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.uc-fit { margin: 0; }
.uc-fit .ph-box { aspect-ratio: 3 / 2; padding: 0; }
.uc-fit .ph-ico { width: 26px; height: 26px; opacity: 0.5; }
.uc-fit figcaption { margin-top: 14px; font-family: var(--serif); font-size: 19px; letter-spacing: -0.01em; color: var(--ink); line-height: 1.25; }
/* alternate tint for rhythm */
.uc-fit:nth-child(3n+2) .ph-box { background: radial-gradient(130% 110% at 78% 8%, var(--machine-soft) 0%, transparent 56%), linear-gradient(165deg, var(--paper-2), var(--paper-3)); }

/* ===== photo placeholders (swap-ready) =====
   To use a real image, drop <img src="…" alt="…" /> inside .ph-box — it will cover the frame. */
.ph { margin: 0; }
.ph-box {
  position: relative; overflow: hidden; border-radius: 16px;
  border: 1px solid var(--line-2); color: var(--ink-3);
  display: grid; place-items: center; text-align: center; padding: 28px;
  background:
    radial-gradient(130% 110% at 78% 8%, var(--human-soft) 0%, transparent 56%),
    linear-gradient(165deg, var(--paper-2), var(--paper-3));
}
.ph-box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-inner { position: relative; z-index: 1; max-width: 40ch; }
.ph-ico { width: 34px; height: 34px; opacity: 0.55; display: block; margin: 0 auto; }
.ph-tag { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.ph-cap { display: block; font-size: 14.5px; color: var(--ink-2); margin-top: 7px; line-height: 1.5; }

.ph.wide .ph-box { aspect-ratio: 16 / 6.4; }
.ph.tall .ph-box { aspect-ratio: 4 / 5; }
.ph.square .ph-box { aspect-ratio: 1 / 1; }

.ph.m .ph-box { background: radial-gradient(130% 110% at 78% 8%, var(--machine-soft) 0%, transparent 56%), linear-gradient(165deg, var(--paper-2), var(--paper-3)); }
.ph.on-dark .ph-box {
  border-color: rgba(255,255,255,0.16); color: oklch(0.8 0.01 84);
  background: radial-gradient(130% 110% at 78% 8%, oklch(0.555 0.072 252 / 0.30) 0%, transparent 56%), linear-gradient(165deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
}
.ph.on-dark .ph-tag, .ph.on-dark .ph-cap { color: oklch(0.8 0.01 84); }

/* section lead image — sits between a section-head and its grid */
.uc-lead { margin-top: 44px; }

/* full screenshot treatment — show the whole UI, no crop */
.uc-shot .ph-box { display: block; aspect-ratio: auto; padding: 0; background: var(--paper); box-shadow: 0 34px 64px -36px rgba(40,30,20,0.32); }
.uc-shot .ph-box img { position: static; inset: auto; width: 100%; height: auto; object-fit: unset; display: block; }
.uc-shot .ph-cap { text-align: center; }

/* ===== hero concept diagram ===== */
.uc-herodiagram { max-width: 880px; margin: 60px auto 0; }
.uc-herodiagram svg { width: 100%; height: auto; overflow: visible; display: block; }
.uc-herodiagram .d-title { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.012em; fill: var(--ink); }
.uc-herodiagram .d-sub { font-family: var(--mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em; }
.uc-herodiagram .d-h { fill: var(--human); }
.uc-herodiagram .d-m { fill: var(--machine); }
.uc-herodiagram .d-lab { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink-3); }
.uc-herodiagram .d-core { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--paper-on-ink); }
.uc-herodiagram .d-states { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink); }
.uc-herodiagram .d-states .sep { fill: var(--ink-3); }
.uc-herodiagram .conn-h { stroke: var(--human); stroke-width: 3; fill: none; }
.uc-herodiagram .conn-m { stroke: var(--machine); stroke-width: 3; fill: none; }
.uc-herodiagram .conn-work { stroke: var(--ink-3); stroke-width: 2.4; fill: none; }
.uc-herodiagram .ring-l { fill: none; stroke: var(--line-2); stroke-width: 2; }
.uc-herodiagram .ring-faint { fill: none; stroke: var(--line-2); stroke-width: 1.4; stroke-dasharray: 3 7; opacity: 0.7; }
.uc-herodiagram .core-disc { fill: var(--ink); }
.uc-herodiagram .node-h { fill: var(--human-soft); stroke: var(--human); stroke-width: 1.8; }
.uc-herodiagram .node-m { fill: var(--machine-soft); stroke: var(--machine); stroke-width: 1.8; }
.uc-orbit { transform-box: view-box; transform-origin: 480px 240px; animation: ucSpin 20s linear infinite; }
@keyframes ucSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .uc-orbit { animation: none; } .uc-herodiagram .d-flow { display: none; } }

/* ===== machine section diagram (on dark) ===== */
.uc-machinediagram { max-width: 900px; margin: 44px auto 0; }
.uc-machinediagram svg { width: 100%; height: auto; overflow: visible; display: block; }
.uc-machinediagram .md-panel { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.15); stroke-width: 1.5; }
.uc-machinediagram .md-title { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; fill: oklch(0.7 0.08 252); }
.uc-machinediagram .md-field { font-family: var(--mono); font-size: 14.5px; fill: var(--paper-on-ink); letter-spacing: 0.02em; }
.uc-machinediagram .md-field.old { fill: oklch(0.64 0.01 84); }
.uc-machinediagram .md-strike { text-decoration: line-through; }
.uc-machinediagram .md-dot-pos { fill: oklch(0.7 0.08 252); }
.uc-machinediagram .md-dot-warn { fill: var(--human); }
.uc-machinediagram .md-dot-dec { fill: var(--paper-on-ink); }
.uc-machinediagram .md-dot-old { fill: none; stroke: oklch(0.6 0.01 84); stroke-width: 1.6; }
.uc-machinediagram .md-srclab { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; fill: oklch(0.78 0.01 84); }
.uc-machinediagram .md-node { fill: oklch(0.555 0.072 252 / 0.18); stroke: oklch(0.7 0.08 252); stroke-width: 1.8; }
.uc-machinediagram .md-node-t { font-family: var(--serif); font-size: 28px; fill: var(--paper-on-ink); }
.uc-machinediagram .md-node-s { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; fill: oklch(0.7 0.08 252); }
.uc-machinediagram .md-conn { stroke: oklch(0.7 0.08 252); stroke-width: 2.6; fill: none; }
.uc-machinediagram .md-conn-lab { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; fill: oklch(0.72 0.01 84); }
.uc-machinediagram .md-guard { fill: oklch(0.555 0.072 252 / 0.12); stroke: oklch(0.7 0.08 252 / 0.55); stroke-width: 1.3; stroke-dasharray: 4 4; }
.uc-machinediagram .md-guard-ico { fill: none; stroke: oklch(0.7 0.08 252); stroke-width: 1.5; }
.uc-machinediagram .md-guard-lab { font-family: var(--mono); font-size: 13px; font-weight: 500; fill: var(--paper-on-ink); letter-spacing: 0.02em; }
.uc-machinediagram .md-cap { text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: oklch(0.78 0.01 84); margin-top: 18px; }

/* ===== human-moment voice band ===== */
.uc-voice { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-voice-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 56px; align-items: center; }
.uc-voice blockquote { margin: 0; font-family: var(--serif); font-size: clamp(24px, 2.9vw, 36px); line-height: 1.28; letter-spacing: -0.012em; }
.uc-voice blockquote .em { font-style: italic; color: var(--human); }
.uc-voice .who { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-top: 26px; }
.uc-voice .who b { color: var(--human); font-weight: 500; }

/* ===== responsive ===== */
@media (max-width: 920px) {
  .uc-voice-grid { grid-template-columns: 1fr; gap: 32px; }
  .uc-voice .ph.tall .ph-box { aspect-ratio: 16 / 9; }
  .uc-products { grid-template-columns: 1fr; }
  .uc-problem-grid { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: 1fr 1fr; }
  .uc-teams-grid { grid-template-columns: 1fr; }
  .uc-buyers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-combo .sides { grid-template-columns: 1fr; }
  .uc-combo .side { padding: 20px 0 0; }
  .uc-combo .side + .side { padding-left: 0; border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 920px) {
  .uc-fit-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .uc-grid { grid-template-columns: 1fr; }
  .uc-buyers-grid { grid-template-columns: 1fr; }
  .uc-fit-grid { grid-template-columns: repeat(2, 1fr); }
  .uc-hero { padding: 104px 0 0; }
  .uc-problem-card { padding: 24px 20px; }
}

/* ===== packaging / pricing ladder ===== */
.uc-pricing { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uc-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 52px; align-items: stretch; }
.uc-tier { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 32px 30px; background: var(--paper); }
.uc-tier.feature { border-color: oklch(0.585 0.088 52 / 0.40); box-shadow: 0 26px 54px -36px rgba(40,30,20,0.30); }
.uc-tier .tier-scale { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--human); margin-bottom: 14px; }
.uc-tier h4 { font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; margin: 0 0 10px; line-height: 1.2; }
.uc-tier .tier-for { font-size: 15.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 22px; }
.uc-tier .tier-inc { list-style: none; padding: 0; margin: 0 0 26px; border-top: 1px solid var(--line); }
.uc-tier .tier-inc li { position: relative; padding: 13px 0 13px 26px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.uc-tier .tier-inc li::before { position: absolute; left: 0; top: 13px; font-family: var(--mono); font-size: 13px; content: "✓"; }
.uc-tier .tier-inc li.on.h::before { color: var(--human); }
.uc-tier .tier-inc li.on.m::before { color: var(--machine); }
.uc-tier .tier-inc li.off { color: var(--ink-3); }
.uc-tier .tier-inc li.off::before { content: "—"; color: var(--ink-3); }
.uc-tier .tier-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 18px; text-decoration: none; transition: border-color .15s ease, background .15s ease; }
.uc-tier .tier-cta:hover { border-color: var(--human); background: var(--human-soft); }
.uc-tier.feature .tier-cta { background: var(--ink); color: var(--paper-on-ink); border-color: var(--ink); }
.uc-tier.feature .tier-cta:hover { background: var(--ink-2); border-color: var(--ink-2); }
.uc-pricing-note { text-align: center; font-size: 15px; color: var(--ink-3); margin: 34px auto 0; max-width: 62ch; }
@media (max-width: 860px) { .uc-tiers { grid-template-columns: 1fr; } }

/* ===== where meaning breaks ===== */
.uc-breaks { margin-top: 52px; border-top: 1px solid var(--line); }
.uc-break { display: grid; grid-template-columns: 280px 1fr; gap: 48px; padding: 30px 0; border-bottom: 1px solid var(--line); align-items: start; }
.uc-break .bk-from { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--human); }
.uc-break .bk-to { display: block; margin-top: 8px; font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); letter-spacing: -0.01em; line-height: 1.2; color: var(--ink); }
.uc-break .bk-body { display: grid; gap: 16px; }
.uc-break .bk-problem, .uc-break .bk-resp { margin: 0; font-size: 16px; line-height: 1.6; }
.uc-break .bk-problem { color: var(--ink-3); }
.uc-break .bk-resp { color: var(--ink); }
.uc-break .bk-lab { display: block; margin-bottom: 5px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.uc-break .bk-resp .bk-lab { color: var(--human); }
@media (max-width: 760px) { .uc-break { grid-template-columns: 1fr; gap: 16px; } }