/* Redesign 6 use-case bodies, batch 3b (internal communications, sales
   enablement, video migration). Loaded after use-cases-redesign.css and only
   adds uc6b-* pieces that the shared uc6-* set does not already cover. */

/* Shared bits */
.uc6b-hero__scrim--sales { position: absolute; inset: 0; background: linear-gradient(95deg, var(--color-rgba-19-34-41-92), var(--color-rgba-19-34-41-45)); }
.uc6b-tag--11 { font-size: 11px; line-height: 1; }
.uc6b-tag--ink { background: var(--ink); color: var(--sand); }
.uc6b-pill { flex: none; padding: 6px 10px; border-radius: var(--r-pill); background: var(--info-subtle); color: var(--info-text); font: 600 12px/1 var(--font-sans); }
.uc6b-pill--run { padding: 5px 10px; }
.uc6b-pill--ok { padding: 6px 11px; background: var(--success-subtle); color: var(--success-text); font-size: 12.5px; }
.uc6b-pill--warn { padding: 6px 11px; background: var(--warning-subtle); color: var(--warning-text); font-size: 12.5px; }
.uc6b-ok { color: var(--success-text); }
.uc6b-info { color: var(--info-text); }
.uc6b-push { margin-top: auto; }
.uc6 .uc6b-card-h3 { color: var(--ink); }

/* Hero panel (share dialog, import status) */
.uc6b-panel { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.uc6b-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 600 17px/1 var(--font-sans); }
.uc6b-opts { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
.uc6b-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border-radius: var(--radius-10px); border: 1px solid var(--driftwood); }
.uc6b-opt--on { border: 2px solid var(--deep-teal); background: var(--teal-tint); }
.uc6b-radio { flex: none; width: 18px; height: 18px; border-radius: var(--radius-50); border: 1.5px solid var(--color-rgba-71-100-110-8); }
.uc6b-opt--on .uc6b-radio { border: 5px solid var(--deep-teal); background: var(--shell); }
.uc6b-opt__txt { display: flex; flex-direction: column; gap: 2px; font: 600 14.5px/1.2 var(--font-sans); }
.uc6b-opt__txt span:last-child { font: 400 12.5px/1.2 var(--font-sans); color: var(--slate-teal); }
.uc6b-field { display: flex; flex-direction: column; gap: 8px; }
.uc6b-field__label { display: flex; justify-content: space-between; font: 600 13.5px/1 var(--font-sans); }
.uc6b-field__input { display: flex; align-items: center; min-height: 46px; padding: 0 14px; border-radius: var(--r-lg); border: 1px solid var(--color-rgba-71-100-110-8);
  font: 500 16px/1 var(--font-mono); letter-spacing: .2em; color: var(--ink); }

/* Permission matrix */
.uc6b-scroll { overflow: auto; }
.uc6b-perm { min-width: 420px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); font: 500 14px/1.3 var(--font-sans); }
.uc6b-perm__cell { padding: 14px 20px; border-bottom: 1px solid var(--driftwood); }
.uc6b-perm__mark { display: flex; justify-content: center; align-items: center; border-bottom: 1px solid var(--driftwood); color: var(--slate-teal); }
.uc6b-perm__mark .uc6-i { color: var(--success-text); }
.uc6b-perm__corner { padding: 16px 20px; border-bottom: 1px solid var(--driftwood); font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6b-perm__col { padding: 16px 12px; border-bottom: 1px solid var(--driftwood); font: 600 13.5px/1 var(--font-sans); text-align: center; }
.uc6b-perm > :nth-last-child(-n+4) { border-bottom: 0; }

/* Action history timeline */
.uc6b-tl { min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 0 0 0 18px; margin: 0; list-style: none; border-left: 2px solid var(--driftwood); }
.uc6b-tl li { position: relative; display: flex; flex-direction: column; gap: 4px; font: 400 15px/1.45 var(--font-sans); }
.uc6b-tl li::before { content: ""; position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; border-radius: var(--radius-50); background: var(--seafoam); box-shadow: var(--shadow-uc6b-timeline-ring); }
.uc6b-tl li.uc6b-tl--now::before { background: var(--deep-teal); }
.uc6b-tl b { font-weight: 600; }

/* Sales hero: player + floating link card */
.uc6b-float-wrap { min-width: 0; position: relative; padding-bottom: 56px; }
.uc6b-linkcard { position: absolute; left: -16px; right: 48px; bottom: 0; padding: 14px 16px; border-radius: var(--r-xl); background: var(--shell);
  box-shadow: var(--shadow-uc6b-linkcard); display: flex; align-items: center; gap: 12px; color: var(--ink); }
.uc6b-linkcard__url { flex: 1; min-width: 0; padding: 10px 12px; border-radius: var(--r-lg); background: var(--sand); font: 500 12.5px/1 var(--font-mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc6b-linkcard__copy { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--deep-teal);
  color: var(--player-control-fg); font: 600 13.5px/1 var(--font-sans); }

/* Player Mock port: tiers follow the player's own width (full >= 640,
   compact 480-639, small < 480), matching the app player. */
.uc6b-pm { --pm-inset: 10px; --pm-bar-h: 46px; --pm-icon: 22px; --pm-play: 68px; --pm-prog-b: calc(var(--pm-inset) + var(--pm-bar-h) + 2px);
  position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--r-xl); overflow: hidden; background: var(--canvas); container-type: inline-size;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-rgba-159-189-188-14); font-family: var(--font-sans); }
.uc6b-pm__poster { position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 14%, var(--color-rgba-127-212-208-42), transparent 55%),
  radial-gradient(90% 80% at 6% 100%, var(--color-rgba-224-185-155-34), transparent 60%), linear-gradient(135deg, var(--deep-teal) 0%, var(--ink) 68%, var(--canvas) 100%); }
.uc6b-pm__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-rgba-19-34-41-28) 0%, var(--color-rgba-19-34-41-0) 30%, var(--color-rgba-19-34-41-0) 60%, var(--color-rgba-19-34-41-45) 100%); }
.uc6b-pm__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-60%); width: var(--pm-play); height: var(--pm-play); border-radius: var(--radius-50);
  background: var(--color-rgba-60-104-118-82); border: 1.5px solid var(--color-rgba-255-255-255-28); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-uc6b-player-play); color: var(--player-control-fg); }
.uc6b-pm__play .uc6-i { width: 28px; height: 28px; margin-left: 3px; }
.uc6b-pm__wm { position: absolute; right: calc(var(--pm-inset) + 12px); bottom: calc(var(--pm-prog-b) + 16px); font: 700 11px/1 var(--font-display); letter-spacing: .04em;
  color: var(--player-control-fg); opacity: .9; text-shadow: 0 1px 3px var(--color-rgba-0-0-0-4); }
.uc6b-pm__seek { position: absolute; left: var(--pm-inset); right: var(--pm-inset); bottom: var(--pm-prog-b); height: 12px; display: flex; align-items: center; gap: 3px; }
.uc6b-pm__seg { flex: 1; height: 3px; border-radius: var(--radius-2px); background: var(--color-rgba-255-255-255-38); position: relative; overflow: hidden; }
.uc6b-seg--6 { flex: 6; } .uc6b-seg--8 { flex: 8; } .uc6b-seg--11 { flex: 11; } .uc6b-seg--13 { flex: 13; } .uc6b-seg--17 { flex: 17; } .uc6b-seg--26 { flex: 26; }
.uc6b-pm__seg span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--seafoam); }
.uc6b-pm__seg--part span { width: 12.5%; }
.uc6b-pm__seg--empty span { width: 0; }
.uc6b-pm__thumb { position: absolute; top: 50%; left: 56%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: var(--radius-50); background: var(--seafoam);
  box-shadow: var(--shadow-uc6b-player-thumb); }
.uc6b-pm__bar { position: absolute; left: var(--pm-inset); right: var(--pm-inset); bottom: var(--pm-inset); height: var(--pm-bar-h); border-radius: var(--r-xl);
  background: var(--color-rgba-27-47-56-82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; gap: 18px; padding: 0 14px;
  color: var(--player-control-fg); }
.uc6b-pm__bar .uc6-i { width: var(--pm-icon); height: var(--pm-icon); }
.uc6b-pm__time { flex: none; font: 500 13.5px/1 var(--font-mono); white-space: nowrap; }
.uc6b-pm__sep { flex: none; color: var(--color-rgba-255-255-255-6); font: 400 13px/1 var(--font-sans); }
.uc6b-pm__title { min-width: 0; font: 400 13.5px/1 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc6b-pm__logo { flex: none; font: 700 11px/1 var(--font-display); letter-spacing: .04em; opacity: .9; white-space: nowrap; }
.uc6b-pm__short { display: none; }
@container (max-width: 639px) { .uc6b-pm__sep, .uc6b-pm__title, .uc6b-pm__chapters { display: none; } }
@container (max-width: 479px) {
  .uc6b-pm__play { width: 52px; height: 52px; }
  .uc6b-pm__play .uc6-i { width: 22px; height: 22px; }
  .uc6b-pm__wm { right: 18px; bottom: 62px; }
  .uc6b-pm__seek { left: 6px; right: 6px; bottom: 46px; }
  .uc6b-pm__bar { left: 6px; right: 6px; bottom: 6px; height: 38px; border-radius: var(--radius-9px); gap: 12px; padding: 0 10px; }
  .uc6b-pm__bar .uc6-i { width: 18px; height: 18px; }
  .uc6b-pm__time { font-size: 12px; }
  .uc6b-pm__vol, .uc6b-pm__logo, .uc6b-pm__full { display: none; }
  .uc6b-pm__short { display: inline; }
}

/* Engagement table */
.uc6b-rows { padding: 8px 0; }
.uc6b-row { display: grid; grid-template-columns: 1fr 70px 120px; gap: 12px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--driftwood); font: 500 14.5px/1.3 var(--font-sans); }
.uc6b-row--head { padding: 12px 22px; border-top: 0; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6b-row--warn { background: var(--warning-subtle); }
.uc6b-row__n { text-align: right; font: 500 12.5px/1 var(--font-mono); }
.uc6b-row--head .uc6b-row__n { font: inherit; }
.uc6b-row__fin { display: flex; align-items: center; gap: 8px; }
.uc6b-row__fin .uc6-bar { flex: 1; }
.uc6b-row__pct { font: 500 12px/1 var(--font-mono); }
.uc6b-row--warn .uc6b-row__pct { font-weight: 600; color: var(--warning-text); }
.uc6b-w34 { width: 34%; } .uc6b-w63 { width: 63%; } .uc6b-w72 { width: 72%; } .uc6b-w81 { width: 81%; }

/* CRM steps */
.uc6b-stack { max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.uc6b-stack--40 { gap: 40px; }
.uc6b-split-end { gap: 24px 80px; align-items: end; max-width: none; margin: 0; }
.uc6b-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px),1fr)); gap: 14px; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.uc6b-step { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--r-xl); background: var(--sand); }
.uc6b-step__n { font: 500 11.5px/1 var(--font-mono); color: var(--lagoon-text); }
.uc6b-step__t { font: 600 17px/1.3 var(--font-sans); }
.uc6b-step__t code { font: 500 .88em var(--font-mono); padding: 2px 6px; border-radius: var(--r-sm); background: var(--shell); }
.uc6b-step__d { font: 400 14.5px/1.5 var(--font-sans); color: var(--slate-teal); }
.uc6b-step--ink { background: var(--ink); color: var(--sand); }
.uc6b-step--ink .uc6b-step__n { color: var(--lagoon-bright); }
.uc6b-step--ink .uc6b-step__t { color: var(--shell); }
.uc6b-step--ink .uc6b-step__d { color: var(--sand); }

/* Migration hero: import status */
.uc6b-prog { display: flex; flex-direction: column; gap: 8px; }
.uc6b-prog__meta { display: flex; justify-content: space-between; font: 500 13px/1 var(--font-mono); color: var(--slate-teal); }
.uc6b-prog__bar { height: 8px; border-radius: var(--r-pill); background: var(--dune); position: relative; }
.uc6b-prog__bar span { position: absolute; inset: 0 11% 0 0; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--deep-teal), var(--lagoon)); }
.uc6b-counts { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.uc6b-count { padding: 12px; border-radius: var(--radius-10px); background: var(--teal-tint); color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.uc6b-count span:first-child { font: 700 24px/1 var(--font-display); }
.uc6b-count span:last-child { font: 500 12px/1.2 var(--font-sans); }
.uc6b-count--ok { background: var(--success-subtle); color: var(--success-text); }
.uc6b-count--warn { background: var(--warning-subtle); color: var(--warning-text); }
.uc6b-list { display: flex; flex-direction: column; gap: 2px; font: 500 13.5px/1.3 var(--font-sans); list-style: none; margin: 0; padding: 0; }
.uc6b-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--driftwood); }
.uc6b-list .uc6-i { width: 16px; height: 16px; }

/* Migration paths */
.uc6b-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.uc6b-paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: 20px; }
.uc6b-path { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px,3vw,36px); border-radius: var(--r-2xl); background: var(--shell); border: 1px solid var(--driftwood); box-shadow: var(--shadow-md); min-width: 0; }
.uc6b-path__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.uc6b-path__name { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.uc6b-path__body { font: 400 16px/1.6 var(--font-sans); color: var(--slate-teal); }
.uc6b-path__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.uc6b-path__steps li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--driftwood); font: 500 15.5px/1.45 var(--font-sans); }
.uc6b-path__steps li > span:first-child { font: 500 12px/1 var(--font-mono); color: var(--lagoon-text); }
.uc6b-path--ink { background: var(--ink); color: var(--sand); border: 0; box-shadow: none; }
.uc6b-path--ink .uc6b-path__name { color: var(--shell); }
.uc6b-path--ink .uc6b-path__body { color: var(--sand); }
.uc6b-path--ink .uc6b-path__steps li { border-top-color: var(--color-rgba-159-189-188-22); }
.uc6b-path--ink .uc6b-path__steps li > span:first-child { color: var(--lagoon-bright); }
.uc6 .uc6b-link { color: var(--lagoon-text); }
.uc6-btn.uc6b-btn--sm { min-height: 48px; padding: 0 20px; font-size: 15px; }
.uc6-btn--accent.uc6b-btn--sm { padding: 0 22px; box-shadow: none; }

/* Portability tiles */
.uc6b-split-start { gap: 48px 80px; align-items: start; }
.uc6b-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 14px; min-width: 0; }
.uc6b-tile { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-xl); background: var(--sand); }
.uc6b-tile span:first-child { font: 600 16.5px/1.3 var(--font-sans); }
.uc6b-tile span:last-child { font: 400 14.5px/1.55 var(--font-sans); color: var(--ink); }

/* Migration keeps the FAQ on sand and puts the use-case grid on shell. */
.uc6--migration .uc6-faq-wrap { background: transparent; border-top: 0; }
.uc6-grid.uc6b-grid--shell { position: relative; isolation: isolate; }
.uc6-grid.uc6b-grid--shell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--shell); border-top: 1px solid var(--driftwood); }

@media (max-width: 560px) {
  .uc6b-float-wrap { padding: 0; }
  .uc6b-linkcard { position: static; width: auto; margin-top: 12px; }
}

/* Compact metrics table: below 420px the design's 1fr/70px/120px columns
   leave ~60px for the demo name, so "walkthrough" forces the grid wider than
   the card and each row's columns drift. Keep labels readable and aligned. */
@media (max-width: 420px) {
  .uc6b-row { grid-template-columns: minmax(0,1fr) 44px 100px; gap: 10px; padding-left: 16px; padding-right: 16px; }
  .uc6b-row > span:first-child { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------
   Use cases 7 to 9 (ecommerce, churches, nonprofits). uc6c-* pieces,
   ported from design-imports/use-cases-7-9. Shared uc6-* stays as is.
   ------------------------------------------------------------------ */
.uc6c-i { flex: none; display: inline-block; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--uc6-mask) center/contain no-repeat; mask: var(--uc6-mask) center/contain no-repeat; }
.uc6-i--shopping-bag, .uc6c-i--shopping-bag { --uc6-mask: url(/assets/icons/shopping-bag.svg); }
.uc6-i--church, .uc6c-i--church { --uc6-mask: url(/assets/icons/church.svg); }
.uc6-i--heart-handshake, .uc6c-i--heart-handshake { --uc6-mask: url(/assets/icons/heart-handshake.svg); }
.uc6c-i--check { --uc6-mask: url(/assets/icons/check.svg); }
.uc6-i--lock, .uc6c-i--lock { --uc6-mask: url(/assets/icons/lock.svg); }
.uc6-i--layout-grid, .uc6c-i--layout-grid { --uc6-mask: url(/assets/icons/layout-grid.svg); }
.uc6-uc__icon .uc6-i--shopping-bag, .uc6-uc__icon .uc6-i--church, .uc6-uc__icon .uc6-i--heart-handshake { width: 22px; height: 22px; }
.uc6c-i--14 { width: 14px; height: 14px; }
.uc6c-i--15 { width: 15px; height: 15px; }
.uc6c-i--16 { width: 16px; height: 16px; }
.uc6c-i--22 { width: 22px; height: 22px; }

/* Hero */
.uc6c-scrim { position: absolute; inset: 0; background: linear-gradient(95deg, var(--color-rgba-19-34-41-94), var(--color-rgba-19-34-41-5)); }
.uc6c-scrim--45 { background: linear-gradient(95deg, var(--color-rgba-19-34-41-94), var(--color-rgba-19-34-41-45)); }
.uc6 .uc6c-h1--sm { font-size: clamp(40px,5vw,68px); }
.uc6 .uc6c-lede { max-width: 560px; }
@media (min-width: 900px) { .uc6c-hero--ecom .uc6-hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.uc6c-store { min-width: 0; border-radius: var(--r-card); overflow: hidden; background: var(--shell); color: var(--ink); box-shadow: var(--uc7-shadow-store), 0 0 0 1px var(--color-rgba-159-189-188-14); }
.uc6c-store__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-bottom: 1px solid var(--driftwood); color: var(--ink); }
.uc6c-store__name { font: 700 15px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.uc6c-store__org { display: flex; align-items: center; gap: 10px; font: 700 15px/1 var(--font-display); letter-spacing: -.01em; }
.uc6c-store__badge { width: 26px; height: 26px; border-radius: var(--r-lg); background: var(--uc7-harbor-light); display: inline-flex; align-items: center; justify-content: center; color: var(--shell); }
.uc6c-store__badge--grass { background: var(--seagrass); }
.uc6c-store__cart { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font-sans); color: var(--slate-teal); }
.uc6c-store__nav { display: flex; gap: 18px; font: 500 13px/1 var(--font-sans); color: var(--slate-teal); }
.uc6c-store__nav b { color: var(--ink); font-weight: 600; }
.uc6c-store__body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 16px; padding: 16px; align-items: start; }
.uc6c-store__body--even { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: stretch; }
.uc6c-store__pad { padding: 16px; }
.uc6c-vwrap { position: relative; min-width: 0; max-width: 300px; width: 100%; margin: 0 auto; }
.uc6c-sqwrap { position: relative; min-width: 0; display: flex; }
.uc6c-prod { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uc6c-prod__cat { font: 500 11.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6c-prod__name { font: 700 24px/1.1 var(--font-display); letter-spacing: -.02em; }
.uc6c-prod__desc { font: 400 14px/1.55 var(--font-sans); color: var(--slate-teal); }
.uc6c-swatches { display: flex; gap: 8px; }
.uc6c-swatch { width: 28px; height: 28px; border-radius: var(--radius-50); background: var(--deep-teal); }
.uc6c-swatch--on { box-shadow: var(--uc7-shadow-swatch-on); }
.uc6c-swatch--sun { background: var(--sunlit); }
.uc6c-swatch--ink { background: var(--ink); }
.uc6c-sizes { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; font: 600 13px/1 var(--font-sans); }
.uc6c-sizes span { padding: 10px 0; text-align: center; border-radius: var(--r-lg); border: 1px solid var(--control-border); }
.uc6c-sizes .uc6c-on { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.uc6c-cartbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border-radius: var(--r-pill); background: var(--ink); color: var(--shell); font: 600 14.5px/1 var(--font-sans); margin-top: auto; }
.uc6c-donate-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--success-text); color: var(--shell); font: 600 13px/1 var(--font-sans); }
.uc6c-gift { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.uc6c-gift__h { font: 700 17px/1.25 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.uc6c-gift__p { font: 400 13.5px/1.5 var(--font-sans); color: var(--slate-teal); }
.uc6c-gift__rows { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font: 600 13px/1 var(--font-sans); }
.uc6c-gift__row { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 14px; border-radius: var(--r-lg); border: 1px solid var(--control-border); }
.uc6c-gift__row .uc6-mono { color: var(--slate-teal); }
.uc6c-gift__row--on { background: var(--ink); color: var(--shell); border-color: var(--ink); }
.uc6c-gift__row--on .uc6-mono { color: var(--seafoam); }

/* Overlays on player mocks */
.uc6c-overlay { position: absolute; pointer-events: none; }
.uc6c-overlay--center { display: flex; justify-content: center; }
.uc6c-float-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--shell); color: var(--ink); font: 600 13px/1 var(--font-sans); box-shadow: var(--uc7-shadow-float); white-space: nowrap; }
.uc6c-float-btn--grass { padding: 0 18px; background: var(--success-text); color: var(--shell); font-size: 13.5px; }
.uc6c-float-btn--lg { min-height: 44px; padding: 0 20px; font-size: 14.5px; outline: 2px dashed var(--lagoon-bright); outline-offset: 6px; }
.uc6c-float-btn--give { gap: 10px; min-height: 46px; padding: 0 22px; background: var(--gradient-accent); font-size: 15px; }
.uc6c-float-btn--chip { min-height: 32px; padding: 0 12px; font-size: 12px; box-shadow: var(--uc7-shadow-chip); }
.uc6c-hot { position: absolute; width: 24px; height: 24px; pointer-events: none; }
.uc6c-hot--26 { width: 26px; height: 26px; }
.uc6c-hot::before { content: ""; position: absolute; inset: 0; border-radius: var(--radius-50); border: 2px solid var(--lagoon-bright); animation: uc6c-ring 1.8s var(--uc7-ease-ring) infinite; }
.uc6c-hot::after { content: ""; position: absolute; inset: 6px; border-radius: var(--radius-50); background: var(--lagoon-bright); box-shadow: var(--uc7-shadow-hot-dot); }
.uc6c-hot--shell::before { border-color: var(--shell); animation-delay: .6s; }
.uc6c-hot--shell::after { background: var(--shell); }
@keyframes uc6c-ring { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .uc6c-hot::before { animation: none; } }

/* Player aspect and accent modifiers (Player Mock aspect prop) */
.uc6-player.uc6c-player--1x1 { aspect-ratio: 1/1; }
.uc6-player.uc6c-player--9x16 { aspect-ratio: 9/16; }
.uc6-player.uc6c-player--4x3 { aspect-ratio: 4/3; }
.uc6-player.uc6c-player--ink { --uc6-accent: var(--ink); --uc6-prog: var(--lagoon-bright); }
.uc6-player.uc6c-player--harbor { --uc6-accent: var(--uc7-harbor-light); --uc6-prog: var(--sunlit); }
.uc6-player.uc6c-player--harbor-teal { --uc6-accent: var(--uc7-harbor-light); --uc6-prog: var(--lagoon-bright); }
.uc6-player.uc6c-player--shelf { --uc6-accent: var(--seagrass); --uc6-prog: var(--lagoon-bright); }
.uc6c-fill--28 { width: 28%; } .uc6c-fill--29 { width: 29%; } .uc6c-fill--44 { width: 44%; } .uc6c-fill--78 { width: 78%; }
.uc6c-fill--97 { width: 97%; } .uc6c-fill--99 { width: 99%; }

/* Positions */
.uc6c-pos-hero-hot { left: 44%; top: 34%; }
.uc6c-pos-hero-shop { left: 8%; right: 8%; bottom: 26%; }
.uc6c-pos-hot-a { left: 30%; top: 36%; }
.uc6c-pos-hot-b { left: 64%; top: 46%; }
.uc6c-pos-chip { left: 34%; top: 22%; }
.uc6c-pos-tr10 { right: 6%; top: 10%; }
.uc6c-pos-tr14 { right: 6%; top: 14%; }
.uc6c-pos-give { left: 5%; right: 5%; top: 22%; }

/* Media column + timeline */
.uc6c-media { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.uc6c-rel { position: relative; }
.uc6c-tl { padding: 16px 18px; border-radius: var(--uc7-radius-14); background: var(--shell); border: 1px solid var(--driftwood); display: flex; flex-direction: column; gap: 10px; color: var(--ink); }
.uc6c-tl--12 { gap: 12px; }
.uc6c-tl__head { display: flex; justify-content: space-between; align-items: center; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6c-tl__rows { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; }
.uc6c-tl__label { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--r-pill); background: var(--deep-teal); color: var(--shell); font: 600 12px/1 var(--font-sans); white-space: nowrap; }
.uc6c-tl__label--lagoon { background: var(--lagoon); color: var(--ink); }
.uc6c-tl__label--grass { background: var(--success-text); }
.uc6c-tl__track { position: relative; height: 14px; border-radius: var(--r-pill); background: var(--sand); min-width: 60px; }
.uc6c-tl__seg { position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--deep-teal); }
.uc6c-tl__seg--lagoon { background: var(--lagoon); }
.uc6c-tl__seg--grass { background: var(--seagrass); }
.uc6c-tl__head-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); }
.uc6c-tl__time { font: 500 12px/1 var(--font-mono); color: var(--slate-teal); white-space: nowrap; }
.uc6c-tl__stats { display: flex; flex-wrap: wrap; gap: 8px 16px; font: 500 12.5px/1 var(--font-mono); color: var(--slate-teal); }
.uc6c-seg-a { left: 12%; width: 22%; } .uc6c-seg-b { left: 37%; width: 26%; } .uc6c-seg-end { left: 75%; right: 0; }
.uc6c-at-44 { left: 44%; } .uc6c-at-78 { left: 78%; }
@media (max-width: 360px) { .uc6c-tl__rows { grid-template-columns: auto minmax(0,1fr); } .uc6c-tl__time { grid-column: 1 / -1; justify-self: end; } }

/* Checks (design sizes) */
.uc6c-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.uc6c-list li { display: flex; gap: 12px; font: 400 16px/1.5 var(--font-sans); color: var(--ink); }
.uc6c-list .uc6c-i { color: var(--lagoon-text); margin-top: 2px; }
.uc6c-list--dark li { color: var(--sand); }
.uc6c-list--dark .uc6c-i { color: var(--lagoon-bright); }

/* Dark band */
.uc6c-dark { position: relative; overflow: hidden; background: var(--canvas); color: var(--shell); }
.uc6c-dark__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .7; pointer-events: none; }
.uc6c-stack { position: relative; max-width: var(--max); margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.uc6c-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: 24px 80px; align-items: end; }
.uc6c-rel-split { position: relative; }
.uc6 .uc6c-h2-dark { color: var(--shell); }
.uc6 .uc6c-body-dark { color: var(--sand); }
.uc6c-tag-dark { background: var(--color-rgba-159-189-188-18); color: var(--sand); }
.uc6c-kicker-wrap { flex-wrap: wrap; gap: 8px 10px; }
.uc6c-fine { margin: 6px 0 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--seafoam); }
.uc6c-shapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 20px; align-items: end; }
.uc6c-shape { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.uc6c-shape__v { max-width: 260px; margin: 0 auto; width: 100%; }
.uc6c-shape__cap { text-align: center; font: 500 12.5px/1 var(--font-mono); color: var(--seafoam); }
.uc6c-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,280px),1fr)); gap: 14px; }
.uc6c-tile { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: var(--uc7-radius-14); background: var(--color-rgba-251-248-245-06); border: 1px solid var(--color-rgba-159-189-188-18); min-width: 0; }
.uc6c-tile__k { font: 500 11.5px/1 var(--font-mono); color: var(--lagoon-bright); }
.uc6c-tile__v { font: 600 16px/1.35 var(--font-sans); color: var(--shell); }
.uc6c-tile--light { background: var(--shell); border: 0; color: var(--ink); }
.uc6c-tile--light .uc6c-tile__k { color: var(--lagoon-text); }
.uc6c-tile--light .uc6c-tile__v { color: var(--ink); }
.uc6c-tile--lg { flex: 1; gap: 10px; padding: 22px; }
.uc6c-tile--lg .uc6c-tile__v { font-size: 17px; line-height: 1.3; }
.uc6c-code-sm { margin-top: 4px; padding: 8px 10px; border-radius: var(--r-md); background: var(--ink); color: var(--sand); font: 500 11.5px/1.5 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc6c-file { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin-top: 4px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--sand); font: 500 12px/1 var(--font-mono); }

/* Churches compare */
.uc6c-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,400px),1fr)); gap: 20px; align-items: stretch; }
.uc6c-cmp { display: flex; flex-direction: column; gap: 14px; padding: 20px; border-radius: var(--r-card); background: var(--shell); border: 1px solid var(--driftwood); box-shadow: var(--uc7-shadow-card); }
.uc6c-cmp--typical { background: var(--dune); border: 1px dashed var(--uc7-dashed); box-shadow: none; }
.uc6c-cmp__head { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lagoon-text); }
.uc6c-cmp--typical .uc6c-cmp__head { color: var(--warning-text); }
.uc6c-cmp--typical .uc6c-cmp__head > span:first-child { color: var(--destructive-text); }
.uc6c-cmp__head .uc6-tag { background: var(--success-subtle); color: var(--success-text); }
.uc6c-cmp--typical .uc6-tag { background: var(--warning-subtle); color: var(--warning-text); }
.uc6c-cmp__frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-10px); overflow: hidden; background: var(--slate-teal); }
.uc6c-cmp__wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 14px; background: var(--color-rgba-19-34-41-9); }
.uc6c-cmp__wall span { border-radius: var(--r-md); opacity: .8; background: var(--coral-deeper); }
.uc6c-cmp__wall span:nth-child(2) { background: var(--seagrass); opacity: .75; } .uc6c-cmp__wall span:nth-child(3) { background: var(--sunlit); }
.uc6c-cmp__wall span:nth-child(4) { background: var(--deep-teal); } .uc6c-cmp__wall span:nth-child(5) { background: var(--coral-deep); opacity: .75; }
.uc6c-cmp__wall span:nth-child(6) { background: var(--seafoam); opacity: .7; }
.uc6c-cmp__ad { position: absolute; left: 14px; top: 12px; padding: 4px 8px; border-radius: var(--r-sm); background: var(--sunlit); color: var(--ink); font: 700 10.5px/1 var(--font-sans); }
.uc6c-cmp__frame--ours { background: radial-gradient(120% 90% at 78% 14%, var(--color-rgba-159-189-188-35), transparent 55%), linear-gradient(135deg, var(--uc7-harbor-light) 0%, var(--ink) 70%); }
.uc6c-cmp__t { position: absolute; left: 16px; top: 16px; font: 700 15px/1.2 var(--font-display); color: var(--shell); letter-spacing: -.01em; }
.uc6c-cmp__s { position: absolute; left: 16px; top: 38px; font: 400 12px/1 var(--font-sans); color: var(--seafoam); }
.uc6c-cmp__btns { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.uc6c-cmp__p { margin: 0; font: 400 14.5px/1.5 var(--font-sans); color: var(--slate-teal); }
.uc6c-pillbtn { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: var(--r-pill); background: var(--gradient-accent); color: var(--ink); font: 600 12.5px/1 var(--font-sans); }
.uc6c-pillbtn--ghost { background: none; border: 1px solid var(--color-rgba-236-224-217-5); color: var(--shell); }
.uc6c-pillbtn--38 { min-height: 38px; padding: 0 16px; font-size: 13.5px; }
.uc6c-bullets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,300px),1fr)); gap: 14px; }
.uc6c-bullet { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r-xl); background: var(--shell); border: 1px solid var(--driftwood); font: 500 15.5px/1.45 var(--font-sans); }
.uc6c-bullet .uc6c-i { color: var(--lagoon-text); margin-top: 1px; }

/* Floating strips (end of message, giving funnel) */
.uc6c-floatwrap { min-width: 0; position: relative; padding-bottom: 64px; }
.uc6c-floatwrap--72 { padding-bottom: 72px; }
.uc6c-endbar { position: absolute; left: 24px; right: 24px; bottom: 0; padding: 14px 16px; border-radius: var(--r-xl); background: var(--ink); box-shadow: var(--uc7-shadow-strip); display: flex; align-items: center; gap: 12px; color: var(--shell); }
.uc6c-endbar__k { flex: none; font: 500 11.5px/1 var(--font-mono); color: var(--lagoon-bright); }
.uc6c-grow { flex: 1; }
.uc6c-funnel { position: absolute; left: -12px; right: -12px; bottom: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; border-radius: var(--r-xl); overflow: hidden; background: var(--driftwood); box-shadow: var(--uc7-shadow-strip); color: var(--ink); }
.uc6c-funnel > div { padding: 14px 16px; background: var(--shell); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.uc6c-funnel__k { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-teal); }
.uc6c-funnel__v { font: 700 26px/1 var(--font-display); letter-spacing: -.02em; }
.uc6c-funnel__v--hi { color: var(--lagoon-text); }

/* Trio card extras */
.uc6c-push { margin-top: auto; }
.uc6c-codeblock { margin-top: auto; display: block; padding: 12px 14px; border-radius: var(--radius-10px); background: var(--ink); color: var(--sand); font: 500 12px/1.6 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.uc6c-sites { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.3 var(--font-sans); }
.uc6c-site { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--success-subtle); color: var(--success-text); }
.uc6c-site--no { background: var(--destructive-subtle); color: var(--destructive-text); }
.uc6c-site span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12.5px; }
.uc6c-ver { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-10px); background: var(--sand); }
.uc6c-ver__thumb { flex: none; width: 44px; height: 44px; border-radius: var(--r-lg); background: var(--gradient-brand); }
.uc6c-ver__txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; font: 600 14px/1.2 var(--font-sans); }
.uc6c-ver__txt .uc6-mono { color: var(--slate-teal); }
.uc6c-mini-tl { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-xl); background: var(--sand); }
.uc6c-mini-tl__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uc6c-mini-tl__pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); background: var(--uc7-harbor-light); color: var(--shell); font: 600 12.5px/1 var(--font-sans); }
.uc6c-mini-tl__bar { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--driftwood); }
.uc6c-mini-tl__bar span { position: absolute; top: 0; bottom: 0; left: 63%; width: 4%; border-radius: var(--r-pill); background: var(--lagoon); }
.uc6c-lib { margin-top: auto; display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--driftwood); font: 500 14px/1.3 var(--font-sans); list-style: none; padding: 0; }
.uc6c-lib li { display: flex; justify-content: space-between; padding: 11px 14px; border-top: 1px solid var(--driftwood); }
.uc6c-lib li:first-child { border-top: 0; background: var(--sand); }
.uc6c-lib .uc6-mono { font-size: 12px; }
.uc6c-chips { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.uc6c-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-pill); background: var(--sand); color: var(--ink); font: 600 12.5px/1 var(--font-sans); }
.uc6c-chip--info { background: var(--info-subtle); color: var(--info-text); }
.uc6c-chip--ok { background: var(--success-subtle); color: var(--success-text); }
.uc6c-brand-row { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.uc6c-brand-sw { flex: none; width: 32px; height: 32px; border-radius: var(--r-lg); background: var(--seagrass); }
.uc6c-brand-sw--ink { background: var(--ink); } .uc6c-brand-sw--bright { background: var(--lagoon-bright); }
.uc6c-brand-row .uc6-mono { min-width: 0; font-size: 12px; line-height: 1; overflow-wrap: anywhere; }
.uc6c-caption { margin-top: auto; padding: 12px 14px; border-radius: var(--radius-10px); background: var(--ink); color: var(--shell); font: 400 14px/1.4 var(--font-sans); text-align: center; }

/* Nonprofit report */
.uc6c-report-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; }
.uc6c-report { min-width: 0; border-radius: var(--r-card); background: var(--shell); color: var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--uc7-shadow-panel); }
.uc6c-report__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.uc6c-report__t { font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em; }
.uc6c-report__d { font: 500 12px/1 var(--font-mono); color: var(--slate-teal); }
.uc6c-kpis { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.uc6c-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--r-xl); background: var(--sand); min-width: 0; }
.uc6c-kpi--hi { background: var(--teal-tint); }
.uc6c-kpi__k { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6c-kpi--hi .uc6c-kpi__k, .uc6c-kpi--hi .uc6c-kpi__v { color: var(--lagoon-text); }
.uc6c-kpi__v { font: 700 30px/1 var(--font-display); letter-spacing: -.02em; }
.uc6c-kpi__d { font: 600 12px/1 var(--font-sans); color: var(--success-text); }
.uc6c-kpi--hi .uc6c-kpi__d { color: var(--slate-teal); }
.uc6c-rgroup { display: flex; flex-direction: column; gap: 8px; }
.uc6c-rgroup__k { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--slate-teal); }
.uc6c-curve { position: relative; height: 88px; border-radius: var(--radius-10px); background: var(--sand); overflow: hidden; }
.uc6c-curve svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.uc6c-curve__fill { fill: var(--deep-teal); opacity: .22; }
.uc6c-curve__line { fill: none; stroke: var(--deep-teal); stroke-width: 2; }
.uc6c-curve__mark { position: absolute; top: 0; bottom: 0; left: 75%; width: 2px; background: var(--seagrass); }
.uc6c-curve__lbl { position: absolute; left: calc(75% + 8px); top: 8px; padding: 4px 8px; border-radius: var(--r-md); background: var(--success-text); color: var(--shell); font: 600 11px/1 var(--font-sans); white-space: nowrap; }
.uc6c-sources { display: flex; height: 12px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.uc6c-sources span { flex: 52; background: var(--deep-teal); }
.uc6c-sources span:nth-child(2) { flex: 31; background: var(--lagoon); }
.uc6c-sources span:nth-child(3) { flex: 17; background: var(--seafoam); }
.uc6c-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 900px) { .uc6c-report-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .uc6c-kpis { grid-template-columns: 1fr; }
  .uc6c-funnel { left: 0; right: 0; }
  .uc6c-endbar { left: 12px; right: 12px; }
}

/* Related-three grid header */
.uc6c-grid-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.uc6c-allbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--control-border); color: var(--ink); font: 600 14.5px/1 var(--font-sans); text-decoration: none; }
.uc6c-allbtn:hover { background: var(--shell); color: var(--ink); }
.uc6-tag.uc6c-tag-teal { background: var(--teal-tint); color: var(--lagoon-text); }
.uc6c-kicker-dark { color: var(--lagoon-bright); }
.uc6c-bullets { list-style: none; margin: 0; padding: 0; }

/* Player Mock default poster (lagoon glow over deep teal); accent only tints the play button. */
.uc6c-page .uc6-player::before { background: var(--uc7-player-poster); }

/* Mobile, per the source breakpoints (hero gap 64, card padding 32, cta-band 40/28, cta-actions at 700). */
.uc6c-sqwrap > .uc6-player { align-self: flex-start; }
@media (max-width: 900px) { .uc6c-page .uc6-cta__grid { padding: 40px 28px; } }
@media (max-width: 700px) {
  .uc6c-page .uc6-cta .uc6-actions { width: 100%; }
  .uc6c-page .uc6-cta .uc6-actions > * { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 560px) {
  .uc6c-page .uc6-hero__grid { gap: 64px; }
  .uc6c-page .uc6-card { padding: 32px; }
}

/* Churches Giving: Give online starts (left edge) at the horizontal middle,
   on the y42% line shared with the moved center Play (x30%). The overlay
   lives inside .uc6-player so both percentages resolve against the picture. */
.uc6c-pos-give-line { left: 50%; top: 42%; transform: translateY(-50%); }

/* These previews use the picture's width, not the page width, for player
   controls. A desktop grid can contain a small player too. */
.uc6c-page .uc6-player__bar > * { flex-shrink: 0; }
.uc6c-page .uc6-player__bar .uc6-player__title { flex-shrink: 1; }
@container (width < 480px) {
  .uc6c-page .uc6-player__bar { gap: 8px; padding-inline: 8px; }
  #donate-button .uc6-player__play { --center-play-position-x: 25%; --center-play-position-y: 42%; }
  .uc6c-page .uc6-player__title,
  .uc6c-page .uc6-player__sep,
  .uc6c-page .uc6-player__logo,
  .uc6c-page .uc6-wide { display: none; }
}
@container (width < 360px) {
  .uc6c-page .uc6c-player__total { display: none; }
  .uc6c-page .uc6-player__bar { gap: 6px; }
}

/* Keep the overlay's coordinate system identical to the visible picture. */
.uc6c-sqwrap { align-self: start; }
.uc6c-vwrap { container-type: inline-size; }
.uc6c-shop-label--compact { display: none; }
.uc6c-pos-hero-shop { bottom: 88px; }
.uc6c-pos-hero-shop .uc6c-float-btn { white-space: nowrap; }
.uc6c-vwrap .uc6-player { --center-play-position-x: 22%; --center-play-position-y: 48%; }
@container (width < 480px) {
  .uc6c-shop-label--full { display: none; }
  .uc6c-shop-label--compact { display: inline; }
}

/* Named outer containers also govern overlays that sit beside the player. */
#shop-buttons .uc6c-rel { container: shop-picture / inline-size; }
@container shop-picture (width < 480px) {
  .uc6-player__play { --center-play-position-x: 15%; --center-play-position-y: 28%; }
  .uc6c-pos-hot-a { left: 34%; top: 48%; }
  .uc6c-pos-hot-b { left: 76%; top: 48%; }
  .uc6c-pos-chip { left: auto; right: 12px; top: 12px; }
}
@container shop-picture (width < 360px) {
  .uc6-player__play { display: none; }
}

/* Flip to the left of the 75% marker when the right quarter cannot fit
   the label. This is based on chart width, including tablet split layouts. */
.uc6c-curve { container: impact-curve / inline-size; }
@container impact-curve (width < 480px) {
  .uc6c-curve__lbl { left: auto; right: calc(25% + 8px); }
}

@media (width < 700px) {
  .uc6c-store { width: 100%; }
  .uc6c-store__body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .uc6c-sqwrap { width: 100%; max-width: 320px; margin-inline: auto; }
  .uc6c-vwrap { max-width: 260px; }
}
@media (width < 480px) {
  .uc6c-gift__row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding-block: 10px; }
  .uc6c-tl__rows { grid-template-columns: auto minmax(80px, 1fr); }
  .uc6c-tl__track { min-width: 80px; }
  .uc6c-tl__time { grid-column: 2; justify-self: start; margin-top: -2px; }
  .uc6c-endbar { position: static; margin-top: 12px; flex-wrap: wrap; }
  .uc6c-endbar__k { flex-basis: 100%; }
  .uc6c-endbar .uc6c-grow { display: none; }
  .uc6c-endbar .uc6c-pillbtn { white-space: nowrap; }
  .uc6c-floatwrap:has(.uc6c-endbar) { padding-bottom: 0; }
  .uc6c-funnel > div { padding-inline: 10px; }
  .uc6c-funnel__k { letter-spacing: .03em; }
  .uc6c-cmp__head { flex-wrap: wrap; gap: 8px; }
  .uc6c-mini-tl__row { flex-wrap: wrap; }
  .uc6c-mini-tl__row .uc6-mono { white-space: nowrap; }
  .uc6c-lib li { gap: 12px; }
  .uc6c-lib .uc6-mono { flex-shrink: 0; }
}