/* Redesign 6 use-case bodies (agencies, marketing, customer education).
   Scoped to .uc6. Shared chrome and palette tokens stay in the design system. */
.uc6 { background: var(--sand); color: var(--ink); font-family: var(--font-sans); }
.uc6 section[id], .uc6 > div[id] { scroll-margin-top: calc(var(--header-h) + var(--space-6)); }
.uc6 h1, .uc6 h2, .uc6 h3, .uc6 p, .uc6 pre { margin: 0; }

/* Icons */
.uc6-i { flex: none; display: inline-block; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--uc6-mask) center/contain no-repeat; mask: var(--uc6-mask) center/contain no-repeat; }
.uc6-i--check { --uc6-mask: url(/assets/icons/check.svg); color: var(--lagoon-text); }
.uc6-i--arrow { --uc6-mask: url(/assets/icons/arrow-right.svg); width: 16px; height: 16px; }
.uc6-i--play { --uc6-mask: url(/assets/icons/play.svg); }
.uc6-i--volume { --uc6-mask: url(/assets/icons/volume-2.svg); }
.uc6-i--list { --uc6-mask: url(/assets/icons/list.svg); }
.uc6-i--settings { --uc6-mask: url(/assets/icons/settings.svg); }
.uc6-i--max { --uc6-mask: url(/assets/icons/maximize.svg); }
.uc6-i--compass { --uc6-mask: url(/assets/icons/compass.svg); width: 22px; height: 22px; }
.uc6-i--rocket { --uc6-mask: url(/assets/icons/rocket.svg); width: 22px; height: 22px; }
.uc6-i--anchor { --uc6-mask: url(/assets/icons/anchor.svg); width: 22px; height: 22px; }
.uc6-i--buoy { --uc6-mask: url(/assets/icons/life-buoy.svg); width: 22px; height: 22px; }
.uc6-i--pointer { --uc6-mask: url(/assets/icons/mouse-pointer-click.svg); width: 22px; height: 22px; }
.uc6-i--clock { --uc6-mask: url(/assets/icons/clock.svg); width: 22px; height: 22px; }

/* Shared text */
.uc6-mono { font: 500 11.5px/1 var(--font-mono); color: var(--slate-teal); }
.uc6-kicker { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lagoon-text); }
.uc6-kicker--dark { color: var(--lagoon-bright); }
.uc6-tag { padding: 4px 9px; border-radius: var(--r-pill); letter-spacing: 0; text-transform: none; font: 600 11.5px/1 var(--font-sans); background: var(--sand); color: var(--ink); }
.uc6-tag--ok { background: var(--success-subtle); color: var(--success-text); }
.uc6-tag--info { background: var(--info-subtle); color: var(--info-text); }
.uc6-h2 { font: 700 clamp(32px,3.6vw,48px)/1.05 var(--font-display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }
.uc6-h2--band { font-size: clamp(28px,3vw,40px); line-height: 1.08; letter-spacing: -.025em; color: var(--shell); }
.uc6-h2--card { font-size: clamp(26px,2.6vw,34px); line-height: 1.1; letter-spacing: -.025em; }
.uc6-h3 { font: 700 clamp(24px,2.4vw,30px)/1.12 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.uc6-body { font: 400 17px/1.65 var(--font-sans); color: var(--slate-teal); text-wrap: pretty; }
.uc6-body--16 { font-size: 16px; line-height: 1.6; }
.uc6-body--ink { color: var(--sand); }
.uc6-note { align-self: flex-start; padding: 10px 14px; border-radius: var(--radius-10px); background: var(--info-subtle); font: 500 14px/1.45 var(--font-sans); color: var(--info-text); }
.uc6-code-inline { font: 500 .9em var(--font-mono); padding: 2px 6px; border-radius: var(--r-sm); background: var(--teal-tint); }
.uc6-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 600 15px/1 var(--font-sans); color: var(--lagoon-text); }
.uc6-link:hover { color: var(--ink); }

/* Hero */
.uc6-hero { position: relative; overflow: hidden; background: var(--canvas); color: var(--shell); }
.uc6-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.uc6-hero__scrim { position: absolute; inset: 0; background: linear-gradient(95deg, var(--color-rgba-19-34-41-9), var(--color-rgba-19-34-41-30)); }
.uc6-hero__scrim--deep { background: linear-gradient(95deg, var(--color-rgba-19-34-41-9), var(--color-rgba-19-34-41-50)); }
.uc6-hero__grid { position: relative; max-width: 1264px; margin: 0 auto; padding: clamp(56px,7vw,96px) var(--pad) clamp(72px,8vw,112px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,440px),1fr)); gap: 64px; align-items: center; }
.uc6-hero__copy { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.uc6-crumb { display: flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--font-mono); color: var(--seafoam); }
.uc6-crumb a { color: var(--seafoam); text-decoration: none; }
.uc6-crumb a:hover { color: var(--shell); }
.uc6-crumb [aria-current] { color: var(--lagoon-bright); }
.uc6-h1 { font: 700 clamp(44px,5.6vw,76px)/1 var(--font-display); letter-spacing: -.035em; color: var(--shell); text-wrap: balance; }
.uc6-lede { max-width: 540px; font: 400 19px/1.6 var(--font-sans); color: var(--sand); text-wrap: pretty; }
.uc6-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.uc6-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-pill);
  font: 600 16px/1 var(--font-sans); text-decoration: none; transition: background var(--dur), box-shadow var(--dur); }
.uc6-btn--accent { padding: 0 26px; background: var(--gradient-accent); border: 1px solid var(--lagoon-deep); color: var(--ink); box-shadow: var(--shadow-button-accent); }
.uc6-btn--accent:hover { background: var(--gradient-accent-hover); color: var(--ink); }
.uc6-btn--ghost { border: 1px solid var(--color-rgba-236-224-217-55); color: var(--shell); }
.uc6-btn--ghost:hover { background: var(--color-rgba-236-224-217-12); color: var(--shell); }

/* Sections */
.uc6-band { padding: clamp(72px,8vw,112px) var(--pad); }
.uc6-band--shell { background: var(--shell); border-block: 1px solid var(--driftwood); }
.uc6-band--flush { padding-top: 0; }
.uc6-split { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: 56px 80px; align-items: center; }
.uc6-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.uc6-copy--14 { gap: 14px; }
.uc6-checks { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; list-style: none; margin: 0; padding-left: 0; }
.uc6-checks li { display: flex; gap: 10px; font: 500 15.5px/1.5 var(--font-sans); }
.uc6-checks .uc6-i { margin-top: 3px; }
.uc6-cards { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: 20px; }
.uc6-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: var(--r-2xl); background: var(--shell); border: 1px solid var(--driftwood); min-width: 0; }
.uc6-card--16 { gap: 16px; }
.uc6-card--ink { background: var(--ink); border-color: var(--ink); color: var(--sand); }
.uc6-card--ink .uc6-h2 { color: var(--shell); }

/* Mock surfaces */
.uc6-mock { min-width: 0; border-radius: var(--r-card); background: var(--shell); overflow: hidden; color: var(--ink); }
.uc6-mock--hero { box-shadow: var(--shadow-mock-hero); }
.uc6-mock--card { border: 1px solid var(--driftwood); box-shadow: var(--shadow-md); }
.uc6-mock--pad { padding: 22px; display: flex; flex-direction: column; gap: 18px; }
.uc6-tray { min-width: 0; padding: 28px; border-radius: var(--r-2xl); background: var(--dune); display: flex; justify-content: center; }
.uc6-sw { flex: none; width: 18px; height: 18px; border-radius: var(--radius-5px); background: var(--lagoon); }
.uc6-sw--harbor { background: var(--coral); }
.uc6-sw--north { background: var(--seagrass); }
.uc6-sw--salt { background: var(--sunlit); }
.uc6-sw--new { background: none; border: 1.5px dashed var(--seafoam); }
.uc6-sw--lg { width: 30px; height: 30px; border-radius: var(--r-lg); }

/* Agencies hero: app */
.uc6-app { display: flex; min-height: 360px; }
.uc6-app__side { width: 200px; flex: none; background: var(--ink); padding: 16px 10px; display: flex; flex-direction: column; gap: 3px; }
.uc6-app__brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 14px; font: 700 14px/1 var(--font-display); color: var(--shell); }
.uc6-app__brand img { width: 20px; height: 20px; }
.uc6-app__label { font: 600 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--seafoam); padding: 6px 8px; }
.uc6-app__ws { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--r-lg); font: 500 13px/1 var(--font-sans); color: var(--sand); }
.uc6-app__ws--on { background: var(--color-rgba-159-189-188-14); font-weight: 600; color: var(--shell); }
.uc6-app__ws--muted { color: var(--seafoam); }
.uc6-app__main { flex: 1; min-width: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.uc6-app__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 16px/1 var(--font-sans); }
.uc6-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.uc6-thumbs li { display: flex; flex-direction: column; gap: 6px; font: 500 12px/1.3 var(--font-sans); }
.uc6-thumb { aspect-ratio: 16/9; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--lagoon), var(--ink)); }
.uc6-thumb--2 { background: linear-gradient(135deg, var(--seafoam), var(--deep-teal)); }
.uc6-thumb--3 { background: linear-gradient(135deg, var(--peach), var(--slate-teal)); }
.uc6-thumb--4 { background: linear-gradient(135deg, var(--lagoon-bright), var(--deep-teal)); }
.uc6-thumb--5 { background: linear-gradient(135deg, var(--deep-teal), var(--canvas)); }
.uc6-thumb--6 { background: linear-gradient(135deg, var(--sand), var(--seafoam)); }

/* Client switcher */
.uc6-switch { width: 100%; max-width: 400px; padding: 8px; border-radius: var(--r-xl); background: var(--shell); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; }
.uc6-switch__find { display: flex; align-items: center; margin: 4px 4px 8px; padding: 0 12px; min-height: 44px; border-radius: var(--r-lg); border: 1px solid var(--slate-teal); font: 400 14px/1 var(--font-sans); color: var(--slate-teal); }
.uc6-switch__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg); }
.uc6-switch__row--on { background: var(--teal-tint); }
.uc6-switch__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; font: 600 14.5px/1 var(--font-sans); }

/* Player mock */
.uc6-players { min-width: 0; position: relative; padding: 0 0 64px; }
.uc6-players > .uc6-player { width: 88%; }
.uc6-players__float { position: absolute; right: 0; bottom: 0; width: 62%; border-radius: var(--r-xl); box-shadow: var(--shadow-ring-shell-6); }
.uc6-player { --uc6-accent: var(--lagoon); --uc6-prog: var(--lagoon-bright); position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden;
  background: var(--canvas); box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-rgba-159-189-188-14); }
.uc6-player--harbor { --uc6-accent: var(--coral); --uc6-prog: var(--peach); }
.uc6-player--tide { --uc6-accent: var(--coral-deep); --uc6-prog: var(--peach); border-radius: var(--radius-10px); }
.uc6-player--academy { --uc6-accent: var(--deep-teal); }
.uc6-player__top { position: absolute; top: 0; left: 0; right: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; font: 600 15px/1.25 var(--font-sans); color: var(--shell); }
.uc6-player__top .uc6-mono { color: var(--sand); }
/* Player Mock options mirroring real player settings:
   centerPlayPosition -> --center-play-position-x / --center-play-position-y
   (percent of the picture, default 50% / 50%, circle truly centered there);
   centerPlay -> data-center-play="show" | "hide" | "auto" (default show).
   data-center-play-size (8..40) opts into a diameter measured against the
   shorter picture edge; without it the existing mock size remains unchanged.
   The center is clamped inward by its current radius at every width. */
.uc6-player { container-type: inline-size; }
.uc6-player__play { --uc6-play-size: clamp(40px,12cqw,64px); --uc6-play-r: calc(var(--uc6-play-size) / 2);
  position: absolute; left: clamp(var(--uc6-play-r), var(--center-play-position-x,50%), calc(100% - var(--uc6-play-r)));
  top: clamp(var(--uc6-play-r), var(--center-play-position-y,50%), calc(100% - var(--uc6-play-r))); transform: translate(-50%,-50%); width: var(--uc6-play-size); aspect-ratio: 1; border-radius: var(--radius-50);
  background: var(--uc6-accent); border: 1.5px solid var(--color-rgba-255-255-255-14); display: flex; align-items: center; justify-content: center; color: var(--shell); box-shadow: var(--shadow-md); }
.uc6-player[data-mock-center-play-size-ready] .uc6-player__play { --uc6-play-size: calc(var(--mock-center-play-size) * 0.5625cqw); }
.uc6-player__play .uc6-i { width: 40%; height: 40%; margin-left: 3px; }
.uc6-player[data-center-play="hide"] .uc6-player__play { display: none; }
.uc6-player__wm { position: absolute; right: 16px; bottom: 64px; font: 700 11px/1 var(--font-display); letter-spacing: .04em; color: var(--shell); opacity: .9; }
.uc6-player__seek { position: absolute; left: 12px; right: 12px; bottom: 52px; height: 3px; border-radius: var(--radius-2px); background: var(--color-rgba-236-224-217-28); }
.uc6-player__seek span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-2px); background: var(--uc6-prog); }
.uc6-player__seek span::after { content: ""; position: absolute; right: -5.5px; top: -4px; width: 11px; height: 11px; border-radius: var(--radius-50); background: var(--uc6-prog); }
.uc6-fill--25 { width: 25%; } .uc6-fill--30 { width: 30%; } .uc6-fill--42 { width: 42%; } .uc6-fill--43 { width: 43%; }
.uc6-player__bar { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 34px; border-radius: var(--r-lg); background: var(--color-rgba-19-34-41-85);
  display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--shell); font: 500 12px/1 var(--font-mono); white-space: nowrap; }
.uc6-player__bar--light { background: var(--color-rgba-251-248-245-86); color: var(--ink); }
.uc6-player__bar .uc6-i { width: 15px; height: 15px; }
.uc6-player__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 13px/1 var(--font-sans); }
.uc6-player__spacer { flex: 1; }
.uc6-player--sm .uc6-player__wm { bottom: 50px; }
.uc6-player--sm .uc6-player__seek { bottom: 40px; }
.uc6-player--sm .uc6-player__bar { height: 26px; gap: 8px; padding: 0 8px; }
.uc6-player__logo { font: 700 11px/1 var(--font-display); }
.uc6-player { container-type: inline-size; }
.uc6-wide, .uc6-player__logo { display: none; }
@container (min-width: 640px) { .uc6-wide { display: inline-block; } }
@container (min-width: 480px) { .uc6-player__logo { display: inline; } }
@container (max-width: 639px) { .uc6-player__sep, .uc6-player__title { display: none; } }
@container (max-width: 479px) { .uc6-hide-sm { display: none; } }

/* History */
.uc6-hist__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--driftwood); font: 600 15px/1 var(--font-sans); }
.uc6-hist__head span:last-child { font-size: 13px; color: var(--lagoon-text); }
.uc6-hist { list-style: none; margin: 0; padding: 0; }
.uc6-hist li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--driftwood); font: 400 14.5px/1.4 var(--font-sans); }
.uc6-hist li:last-child { border-bottom: 0; }
.uc6-hist b { font-weight: 600; }
.uc6-hist__txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.uc6-av { flex: none; width: 32px; height: 32px; border-radius: var(--radius-50); background: var(--deep-teal); color: var(--shell); display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--font-sans); }
.uc6-av--sun { background: var(--sunlit); color: var(--ink); }
.uc6-av--grass { background: var(--seagrass); color: var(--ink); }

/* Handoff band */
.uc6-handoff { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: 40px 80px; align-items: center;
  padding: clamp(28px,4vw,48px); border-radius: var(--r-band); background: var(--ink); color: var(--sand); }
.uc6-export { min-width: 0; padding: 20px; border-radius: var(--r-xl); background: var(--color-rgba-251-248-245-06); border: 1px solid var(--color-rgba-159-189-188-22); display: flex; flex-direction: column; gap: 12px; }
.uc6-export__head { display: flex; justify-content: space-between; gap: 12px; font: 600 14.5px/1 var(--font-sans); color: var(--shell); overflow-wrap: anywhere; }
.uc6-export__head span { font: 500 12px/1 var(--font-mono); color: var(--lagoon-bright); }
.uc6-progress { height: 6px; border-radius: var(--r-pill); background: var(--color-rgba-236-224-217-12); position: relative; overflow: hidden; }
.uc6-progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 86%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--lagoon), var(--lagoon-bright)); }
.uc6-export__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 12px/1.4 var(--font-mono); color: var(--seafoam); }

/* Marketing hero: browser */
.uc6-browser { border-radius: var(--r-xl); }
.uc6-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--dune); }
.uc6-browser__dot { width: 10px; height: 10px; border-radius: var(--radius-50); background: var(--driftwood); box-shadow: var(--shadow-inset-hair); }
.uc6-browser__url { flex: 1; min-width: 0; margin-left: 10px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--shell); }
.uc6-browser__body { padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 20px; align-items: center; }
.uc6-launch { display: flex; flex-direction: column; gap: 10px; }
.uc6-launch__kick { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--coral-deeper); }
.uc6-launch__title { font: 700 26px/1.05 var(--font-display); letter-spacing: -.02em; }
.uc6-launch__sub { font: 400 12.5px/1.5 var(--font-sans); color: var(--slate-teal); }
.uc6-launch__btn { align-self: flex-start; padding: 9px 14px; border-radius: var(--r-pill); background: var(--ink); color: var(--shell); font: 600 12px/1 var(--font-sans); }

/* Publishing card */
.uc6-seg { display: flex; padding: 4px; border-radius: var(--r-pill); background: var(--dune); gap: 2px; font: 600 13.5px/1 var(--font-sans); list-style: none; margin: 0; }
.uc6-seg li { flex: 1; text-align: center; padding: 11px 0; border-radius: var(--r-pill); }
.uc6-seg li[aria-current] { background: var(--shell); box-shadow: var(--shadow-sm); }
.uc6-code { padding: 14px 16px; border-radius: var(--radius-10px); background: var(--ink); font: 400 12.5px/1.7 var(--font-mono); color: var(--sand); overflow: auto; white-space: nowrap; }
.uc6-code--wrap { white-space: normal; word-break: break-all; line-height: 1.8; padding: 16px 18px; border-radius: var(--r-xl); margin-top: auto; }
.uc6-pre { margin-top: auto; padding: 16px 18px; border-radius: var(--r-xl); background: var(--color-rgba-19-34-41-70); border: 1px solid var(--color-rgba-159-189-188-18); overflow: auto; font: 400 12.5px/1.75 var(--font-mono); color: var(--sand); }
.uc6-t-tag { color: var(--lagoon-bright); } .uc6-t-str { color: var(--peach); } .uc6-t-sea { color: var(--seafoam); }
.uc6-sites { display: flex; flex-direction: column; gap: 8px; }
.uc6-sites__label { font: 600 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-teal); }
.uc6-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.uc6-chip { padding: 8px 12px; border-radius: var(--r-pill); background: var(--success-subtle); color: var(--success-text); font: 500 12.5px/1 var(--font-mono); }
.uc6-chip--add { background: none; border: 1px dashed var(--slate-teal); color: var(--slate-teal); font-family: var(--font-sans); }
.uc6-blocked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-10px); background: var(--destructive-subtle); color: var(--destructive-text); font: 500 13.5px/1.45 var(--font-sans); }
.uc6-blocked span:first-child { flex: 1; }
.uc6-blocked span:last-child { flex: none; font: 600 12px/1 var(--font-mono); }

/* Measurement */
.uc6-stats { min-width: 0; border-radius: var(--r-card); background: var(--sand); padding: 24px; display: flex; flex-direction: column; gap: 22px; }
.uc6-stats__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 16px/1 var(--font-sans); }
.uc6-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.uc6-kpi { padding: 14px; border-radius: var(--radius-10px); background: var(--shell); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uc6-kpi span:first-child { font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6-kpi span:last-child { font: 700 28px/1 var(--font-display); }
.uc6-kpi--teal span:last-child { color: var(--lagoon-text); }
.uc6-sources { display: grid; grid-template-columns: 110px 1fr 40px; gap: 8px 12px; align-items: center; font: 500 13.5px/1 var(--font-sans); }
.uc6-sources .uc6-mono, .uc6-lessons .uc6-pct { font: 500 12px/1 var(--font-mono); color: var(--ink); text-align: right; }
.uc6-bar { height: 10px; border-radius: var(--r-pill); background: var(--driftwood); position: relative; overflow: hidden; }
.uc6-bar span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--deep-teal); }
.uc6-bar--sm { height: 8px; background: var(--dune); }
.uc6-bar--lagoon span { background: var(--lagoon); } .uc6-bar--sea span { background: var(--seafoam); } .uc6-bar--peach span { background: var(--peach); } .uc6-bar--sun span { background: var(--sunlit); }
.uc6-w6 { width: 6%; } .uc6-w14 { width: 14%; } .uc6-w22 { width: 22%; } .uc6-w41 { width: 41%; } .uc6-w58 { width: 58%; }
.uc6-w68 { width: 68%; } .uc6-w74 { width: 74%; } .uc6-w82 { width: 82%; } .uc6-w91 { width: 91%; }
.uc6-caption-demo { margin-top: auto; display: flex; justify-content: center; padding: 26px 18px; border-radius: var(--r-xl); background: var(--gradient-brand); }
.uc6-caption-demo span { padding: 8px 14px; border-radius: var(--r-md); background: var(--color-rgba-19-34-41-78); color: var(--shell); font: 500 15px/1.4 var(--font-sans); text-align: center; }

/* Education */
.uc6-lessons { padding: 20px; display: flex; flex-direction: column; gap: 6px; list-style: none; margin: 0; }
.uc6-lessons__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 6px 12px; font: 600 16px/1 var(--font-sans); }
.uc6-lesson { display: grid; grid-template-columns: 28px 1fr 110px 40px; gap: 10px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--driftwood); font: 500 14.5px/1.3 var(--font-sans); }
.uc6-lesson--warn { background: var(--warning-subtle); border-radius: var(--r-lg); font-weight: 600; }
.uc6-lesson--warn .uc6-mono, .uc6-lesson--warn .uc6-pct { color: var(--warning-text); font-weight: 600; }
.uc6-lessons__note { padding: 10px 6px 0; font: 400 13px/1.45 var(--font-sans); color: var(--slate-teal); }
.uc6-lesson-wrap { min-width: 0; position: relative; padding-right: 40px; }
.uc6-speed { position: absolute; right: 0; bottom: 70px; width: 170px; padding: 8px; border-radius: var(--r-xl); background: var(--shell); box-shadow: var(--shadow-menu-float);
  display: flex; flex-direction: column; gap: 2px; font: 500 13.5px/1 var(--font-sans); list-style: none; margin: 0; }
.uc6-speed li { padding: 9px 10px; }
.uc6-speed li:first-child { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--slate-teal); padding: 8px 10px; }
.uc6-speed li[aria-current] { display: flex; justify-content: space-between; border-radius: var(--r-md); background: var(--teal-tint); font-weight: 600; }
.uc6-speed .uc6-i { width: 15px; height: 15px; }
.uc6-stack { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.uc6-editor { border-radius: var(--r-xl); background: var(--ink); overflow: hidden; box-shadow: var(--shadow-lg); }
.uc6-editor__tab { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--color-rgba-159-189-188-16); font: 500 12px/1 var(--font-mono); color: var(--seafoam); }
.uc6-editor__tab::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-50); background: var(--seagrass); }
.uc6-editor pre { padding: 18px 20px; overflow: auto; font: 400 13px/1.75 var(--font-mono); color: var(--sand); }
.uc6-quiz { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: var(--r-xl); background: var(--sand); }
.uc6-quiz__txt { display: flex; flex-direction: column; gap: 4px; font: 600 15px/1.2 var(--font-sans); }
.uc6-quiz__txt span { font: 400 13px/1.3 var(--font-sans); color: var(--slate-teal); }
.uc6-quiz__btn { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); background: var(--deep-teal); color: var(--shell); font: 600 14px/1 var(--font-sans); }

/* Use case grid */
.uc6-grid { padding: 96px var(--pad); }
.uc6-grid__inner { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.uc6-grid__head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.uc6-grid__h2 { font: 700 clamp(32px,3.4vw,44px)/1.06 var(--font-display); letter-spacing: -.025em; text-wrap: balance; }
.uc6-grid__cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.uc6-grid__header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.uc6-grid__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--r-pill); border: 1px solid var(--control-border); color: var(--ink); font: 600 15px/1 var(--font-sans); text-decoration: none; }
.uc6-grid__all:hover { background: var(--shell); color: var(--ink); }
.uc6-grid__all:focus-visible { outline: none; box-shadow: var(--shadow-focus-double); }
.uc6-grid .uc6-uc__icon .uc6-i { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .uc6-grid .uc6-grid__cards { grid-template-columns: minmax(0,1fr); }
}
.uc6-uc { position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 196px; padding: 26px; border-radius: var(--r-card); background: var(--shell);
  border: 1px solid var(--driftwood); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.uc6-uc:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); color: var(--ink); }
.uc6-uc__top { display: flex; justify-content: space-between; align-items: center; }
.uc6-uc__icon { width: 44px; height: 44px; border-radius: var(--r-icon-tile); background: var(--teal-tint); display: flex; align-items: center; justify-content: center; color: var(--deep-teal); }
.uc6-uc__name { margin-top: auto; font: 600 19px/1.3 var(--font-sans); }
.uc6-uc__line { font: 400 15px/1.55 var(--font-sans); color: var(--slate-teal); text-wrap: pretty; }
.uc6-uc__more { display: flex; align-items: center; gap: 6px; font: 600 14px/1 var(--font-sans); color: var(--lagoon-text); }

/* Closing CTA */
.uc6-cta { padding: 24px var(--pad) var(--section-y); }
.uc6-cta__card { position: relative; overflow: hidden; max-width: var(--max); margin: 0 auto; border-radius: var(--r-band);
  background: var(--gradient-brand); box-shadow: var(--shadow-lg); }
.uc6-cta__card::before { content: ""; position: absolute; inset: 0; background: url(/assets/brand/bg-05-hero-corner.webp) center/cover no-repeat; pointer-events: none; }
.uc6-cta__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,380px),1fr)); gap: 40px; align-items: end; padding: clamp(40px,6vw,80px); }
.uc6-cta__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.uc6-cta__h2 { font: 700 clamp(38px,4.6vw,60px)/1.02 var(--font-display); letter-spacing: -.03em; color: var(--shell); text-wrap: balance; }
.uc6-cta__body { max-width: 520px; font: 400 18px/1.6 var(--font-sans); color: var(--sand); text-wrap: pretty; }
.uc6-cta__side { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; justify-self: end; min-width: 0; }
.uc6-cta__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 500 12.5px/1.4 var(--font-mono); color: var(--seafoam); }

/* FAQ (markup from seo.mjs faq-split presentation; section carries .uc6-faq) */
.uc6 .uc6-faq { padding: 104px var(--pad); background: transparent; }
.uc6 .uc6-faq .faq-split__grid { max-width: var(--max); margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px),1fr)); gap: 48px 80px; align-items: start; }
.uc6 .uc6-faq .faq-split__intro { display: flex; flex-direction: column; gap: 16px; max-width: 400px; }
.uc6 .uc6-faq .faq-split__eyebrow { font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lagoon-text); }
.uc6 .uc6-faq h2 { margin: 0; font: 700 clamp(32px,3.4vw,44px)/1.06 var(--font-display); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.uc6 .uc6-faq .faq-split__intro p { margin: 0; font: 400 16px/1.6 var(--font-sans); color: var(--slate-teal); }
.uc6 .uc6-faq .faq-split__intro a { color: var(--lagoon-text); font-weight: 600; }
.uc6 .uc6-faq .faq-list { display: flex; flex-direction: column; gap: 0; margin: 0; min-width: 0; border-top: 1px solid var(--driftwood); }
.uc6 .uc6-faq .faq-item { border: 0; border-bottom: 1px solid var(--driftwood); border-radius: var(--radius-0); padding: 0; }
.uc6 .uc6-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 18px 0; font: 600 18px/1.4 var(--font-sans); color: var(--ink); list-style: none; cursor: pointer; }
.uc6 .uc6-faq summary::-webkit-details-marker { display: none; }
.uc6 .uc6-faq .faq-plus { flex: none; position: relative; width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--slate-teal); transition: transform var(--dur) var(--ease); }
.uc6 .uc6-faq .faq-plus::before, .uc6 .uc6-faq .faq-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); }
.uc6 .uc6-faq .faq-plus::before { width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; }
.uc6 .uc6-faq .faq-plus::after { width: 1.5px; height: 12px; margin: -6px 0 0 -.75px; }
.uc6 .uc6-faq details[open] .faq-plus { transform: rotate(45deg); }
.uc6 .uc6-faq .faq-item p { margin: 0; max-width: none; padding: 0 56px 24px 0; font: 400 16px/1.65 var(--font-sans); color: var(--slate-teal); text-wrap: pretty; }

/* Marketing trio: three sibling sections laid out as the design's 3-card row */
.uc6 { display: flex; flex-wrap: wrap; justify-content: center; }
.uc6 > * { flex: 0 0 100%; min-width: 0; }
.uc6 > .uc6-trio { flex: 0 0 calc((min(100% - 2 * var(--pad), var(--max)) - 40px) / 3 + 20px); display: flex; padding: clamp(72px,8vw,112px) 10px; }
.uc6 > .uc6-trio .uc6-card { flex: 1; }

@media (max-width: 900px) {
  .uc6 > .uc6-trio { flex-basis: 100%; padding: 10px var(--pad); }
  .uc6 > .uc6-band + .uc6-trio, .uc6 > .uc6-band--shell + .uc6-trio { padding-top: clamp(72px,8vw,112px); }
  .uc6 > .uc6-trio:has(+ .uc6-faq-wrap) { padding-bottom: clamp(72px,8vw,112px); }
}
@media (max-width: 900px) {
  .uc6 > .uc6-trio { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); }
  .uc6 .uc6-faq { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); }
  .uc6-hero__grid, .uc6-band, .uc6-grid, .uc6-cta { padding-left: var(--pad-mobile); padding-right: var(--pad-mobile); }
}
@media (max-width: 560px) {
  .uc6-hero__grid { gap: 40px; }
  .uc6-app__side { display: none; }
  .uc6-players, .uc6-lesson-wrap { padding: 0; }

  .uc6-players__float, .uc6-speed { position: static; width: auto; margin-top: var(--space-3); }
  .uc6-lesson { grid-template-columns: 22px minmax(0,1fr) 60px 36px; }
  .uc6-kpi { padding: 10px; }
  .uc6-kpi span:last-child { font-size: 20px; }
  .uc6-sources { grid-template-columns: 86px 1fr 36px; }
  .uc6-card { padding: 24px; }
  .uc6-quiz { flex-wrap: wrap; }
  .uc6-cta__side { justify-self: stretch; }
  .uc6-actions .uc6-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .uc6-uc, .uc6-btn { transition: none; } .uc6-uc:hover { transform: none; } }
@media (min-width: 901px) {
  .uc6 > .uc6-trio:not(.uc6-trio + .uc6-trio) { padding-left: 0; flex-basis: calc((min(100% - 2 * var(--pad), var(--max)) - 40px) / 3 + 10px); }
  .uc6 > .uc6-trio:not(:has(+ .uc6-trio)) { padding-right: 0; flex-basis: calc((min(100% - 2 * var(--pad), var(--max)) - 40px) / 3 + 10px); }
}
.uc6-faq-wrap { background: var(--shell); border-top: 1px solid var(--driftwood); }
.uc6-player::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 15%, var(--uc6-accent), var(--canvas) 78%); }
.uc6-card--ink { border: 0; }