/* ============================================================================
   CTAurl premium faux product UI
   Floating scraps × Slack multi-accent craft × brand-green CTAs only
   ============================================================================ */

.ui-mock, .scrap-stage, .dash-shell {
  --ink: var(--text-primary, #10221B);
  --mute: var(--text-muted, #66776E);
  --line: color-mix(in srgb, var(--border, #D6E1D8) 90%, transparent);
  --card: #fff;
  --soft: #F3F6F1;
  --accent: var(--creative-tide, #3B6CA8);
  --accent-soft: var(--mkt-tide-soft, #E8EEF6);
  font-family: var(--font-latin, Inter, system-ui, sans-serif);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* —— Product shot hosts —— */
.product-shot--mock {
  background: linear-gradient(160deg, #FBFCFA, #EEF3EC 70%, #E7EEE8);
  overflow: hidden;
}
.product-shot--mock .shot-mask {
  position: absolute;
  inset: 0;
  display: block;
}
.product-shot--mock .ui-mock,
.product-shot--mock .dash-shell {
  width: 100%;
  height: 100%;
}

/* —— Core mock panel —— */
.ui-mock {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.05rem 1.15rem 1.15rem;
  background:
    radial-gradient(90% 70% at 100% -10%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 55%),
    radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--brand, #1ED760) 10%, transparent), transparent 50%),
    linear-gradient(165deg, #FFFEFB 0%, var(--soft) 100%);
  overflow: hidden;
  isolation: isolate;
}
.ui-mock > * { position: relative; z-index: 1; }
.ui-mock--create { --accent: var(--creative-tide); --accent-soft: var(--mkt-tide-soft); }
.ui-mock--domains { --accent: var(--creative-coral); --accent-soft: var(--mkt-coral-soft); }
.ui-mock--qr { --accent: var(--creative-amber); --accent-soft: var(--mkt-amber-soft); }
.ui-mock--analytics { --accent: var(--creative-plum); --accent-soft: var(--mkt-plum-soft); }
.ui-mock--link { --accent: var(--creative-amber); --accent-soft: var(--mkt-amber-soft); }
.ui-mock--compact { padding: 0.72rem 0.78rem 0.8rem; gap: 0.48rem; }
.capability-card:hover .ui-mock--compact { transform: scale(1.03); transition: transform 0.7s cubic-bezier(.2,.8,.2,1); }

.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mock-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 780; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent);
}
.mock-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}
.mock-badge {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: .22rem .55rem; border-radius: 999px;
  font-size: .62rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--brand) 16%, #fff);
  color: color-mix(in srgb, var(--link, #08783B) 90%, #062912);
  border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--brand) 12%, transparent);
}
.mock-badge--quiet {
  background: color-mix(in srgb, var(--accent) 12%, #fff);
  color: color-mix(in srgb, var(--accent) 88%, #10221B);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow: none;
}
.mock-badge--live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}
.mock-title {
  margin: 0; font-size: clamp(1rem, 1.5vw, 1.22rem); font-weight: 800;
  letter-spacing: -.035em; line-height: 1.18; color: var(--ink);
}
.ui-mock--compact .mock-title { font-size: .9rem; }

.mock-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .78rem .85rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 1px 2px rgba(16,34,27,.04),
    0 14px 32px rgba(16,34,27,.07);
}
.ui-mock--compact .mock-panel { padding: .55rem .6rem; border-radius: 11px; }
.mock-panel--accent {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 80%, #fff), #fff);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.mock-panel--brand {
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, #fff), #fff 60%);
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
}
.mock-label {
  display: block; margin-bottom: .38rem;
  font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
}

.mock-chips { display: flex; flex-wrap: wrap; gap: .38rem; }
.mock-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .7rem; border-radius: 999px;
  font-size: .74rem; font-weight: 680; letter-spacing: -.01em;
  color: var(--text-secondary, #355247);
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 4px 10px rgba(16,34,27,.04);
}
.ui-mock--compact .mock-chip { padding: .28rem .5rem; font-size: .64rem; }
.mock-chip.is-active {
  color: var(--on-brand, #062912); background: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 65%, #0D9D3F);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 38%, transparent);
}
.mock-chip-tag {
  font-size: .56rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase;
  padding: .08rem .34rem; border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--link, #08783B);
}
.mock-chip.is-active .mock-chip-tag { background: rgba(6,41,18,.16); color: inherit; }

.mock-field {
  display: flex; align-items: center; gap: .45rem; min-width: 0;
  padding: .55rem .7rem; border-radius: 11px;
  background: color-mix(in srgb, var(--soft) 70%, #fff);
  border: 1px solid var(--line);
  font-size: .78rem; font-weight: 600; color: var(--text-secondary, #355247);
}
.ui-mock--compact .mock-field { padding: .4rem .55rem; font-size: .68rem; }
.mock-field strong {
  color: var(--ink); font-weight: 750; letter-spacing: -.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mock-field--url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; }
.mock-field-ico {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; display: grid; place-items: center;
  border-radius: 8px; background: color-mix(in srgb, var(--accent) 16%, #fff);
  color: var(--accent); font-size: .75rem; font-weight: 800;
}
.mock-field-ico--brand { background: color-mix(in srgb, var(--brand) 18%, #fff); color: var(--link, #08783B); }
.mock-row { display: grid; grid-template-columns: 1.15fr .85fr; gap: .55rem; }

.mock-preview {
  display: flex; align-items: center; justify-content: space-between; gap: .65rem;
  padding: .78rem .9rem; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 14%, #fff), color-mix(in srgb, var(--accent-soft) 55%, #fff));
  border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 14%, transparent);
}
.mock-preview-meta {
  font-size: .62rem; font-weight: 780; letter-spacing: .07em; text-transform: uppercase;
  color: var(--link, #08783B); margin-bottom: .18rem;
}
.mock-preview-url {
  font-size: clamp(1rem, 1.6vw, 1.28rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.12; color: var(--ink);
}
.ui-mock--compact .mock-preview-url { font-size: .86rem; }

.mock-cta-row { display: flex; align-items: center; justify-content: space-between; gap: .55rem; margin-top: .1rem; }
.mock-cta {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .52rem .9rem; border-radius: 999px;
  font-size: .74rem; font-weight: 800; letter-spacing: .01em;
  color: var(--on-brand, #062912); background: var(--brand);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 36%, transparent);
}
.ui-mock--compact .mock-cta { padding: .38rem .68rem; font-size: .64rem; }
.mock-cta-ghost { font-size: .7rem; font-weight: 650; color: var(--mute); }

/* QR */
.mock-qr-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: .7rem; align-items: stretch; }
.ui-mock--compact .mock-qr-grid { gap: .42rem; }
.mock-qr-stage {
  display: grid; place-items: center; padding: .85rem; border-radius: 16px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--brand) 14%, #fff), #fff 62%);
  border: 1px solid color-mix(in srgb, var(--creative-amber) 28%, var(--line));
  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset, 0 16px 36px color-mix(in srgb, var(--creative-amber) 16%, transparent);
}
.mock-qr-svg { width: min(100%, 152px); height: auto; color: #10221B; }
.ui-mock--compact .mock-qr-svg { width: min(100%, 100px); }
.mock-style-list { display: flex; flex-direction: column; gap: .42rem; }
.mock-style {
  display: flex; align-items: center; gap: .5rem;
  padding: .48rem .58rem; border-radius: 11px; background: #fff;
  border: 1px solid var(--line); font-size: .74rem; font-weight: 680; color: var(--text-secondary, #355247);
  box-shadow: 0 4px 12px rgba(16,34,27,.04);
}
.ui-mock--compact .mock-style { padding: .32rem .45rem; font-size: .64rem; }
.mock-style.is-active {
  border-color: color-mix(in srgb, var(--brand) 48%, transparent);
  background: color-mix(in srgb, var(--brand) 12%, #fff);
  color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent);
}
.mock-style-swatch { width: 1.15rem; height: 1.15rem; border-radius: 6px; flex: 0 0 auto; background: #10221B; }
.mock-style-swatch--round { border-radius: 50%; }
.mock-style-swatch--dots {
  background:
    radial-gradient(circle at 30% 30%, #10221B 28%, transparent 30%),
    radial-gradient(circle at 70% 30%, #10221B 28%, transparent 30%),
    radial-gradient(circle at 30% 70%, #10221B 28%, transparent 30%),
    radial-gradient(circle at 70% 70%, #10221B 28%, transparent 30%),
    #EEF3EC;
}
.mock-dest-chip {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  margin-top: .2rem; padding: .48rem .62rem; border-radius: 11px;
  background: color-mix(in srgb, var(--creative-plum) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--creative-plum) 24%, transparent);
  font-size: .7rem; font-weight: 650; color: var(--text-secondary, #355247);
}
.mock-dest-chip strong { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }

/* Analytics */
.mock-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .42rem; }
.mock-kpi {
  padding: .58rem .55rem .5rem; border-radius: 13px; background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(16,34,27,.05);
}
.ui-mock--compact .mock-kpi { padding: .4rem; }
.mock-kpi-val {
  font-size: clamp(1rem, 1.7vw, 1.3rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.05; color: var(--ink);
}
.ui-mock--compact .mock-kpi-val { font-size: .9rem; }
.mock-kpi-lbl {
  margin-top: .16rem; font-size: .58rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--mute);
}
.mock-kpi:nth-child(1) { border-top: 3px solid var(--brand); }
.mock-kpi:nth-child(2) { border-top: 3px solid var(--creative-tide); }
.mock-kpi:nth-child(3) { border-top: 3px solid var(--creative-plum); }
.mock-chart {
  position: relative; height: 92px; border-radius: 13px; overflow: hidden; padding: .55rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--creative-plum) 8%, #fff), #fff);
  border: 1px solid color-mix(in srgb, var(--creative-plum) 20%, var(--line));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--creative-plum) 10%, transparent);
}
.ui-mock--compact .mock-chart { height: 66px; padding: .4rem; }
.mock-chart svg { width: 100%; height: 100%; display: block; }
.mock-heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: .35rem; }
.mock-heat span { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--creative-plum) 12%, #EEF3EC); }
.mock-heat span[data-l="2"] { background: color-mix(in srgb, var(--creative-tide) 38%, #EEF3EC); }
.mock-heat span[data-l="3"] { background: color-mix(in srgb, var(--creative-plum) 55%, #EEF3EC); }
.mock-heat span[data-l="4"] { background: color-mix(in srgb, var(--brand) 58%, #287765); }
.mock-promise {
  display: flex; align-items: center; gap: .42rem;
  font-size: .7rem; font-weight: 680; color: var(--text-secondary, #355247);
}
.mock-promise i {
  font-style: normal; width: 1.2rem; height: 1.2rem; display: grid; place-items: center;
  border-radius: 50%; background: color-mix(in srgb, var(--brand) 18%, #fff); color: var(--link, #08783B);
  font-size: .72rem; font-weight: 850;
}

/* Link detail */
.mock-link-url {
  font-size: clamp(1.1rem, 1.9vw, 1.4rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.12; color: var(--ink);
}
.ui-mock--compact .mock-link-url { font-size: .92rem; }
.mock-link-url span { color: var(--link, #08783B); }
.mock-meta-row { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.mock-history { display: flex; flex-direction: column; gap: .38rem; }
.mock-hist {
  display: grid; grid-template-columns: 4.6rem 1fr auto; gap: .45rem; align-items: center;
  padding: .42rem .52rem; border-radius: 11px;
  background: color-mix(in srgb, var(--soft) 65%, #fff); border: 1px solid transparent;
  font-size: .7rem;
}
.ui-mock--compact .mock-hist { grid-template-columns: 3.5rem 1fr; font-size: .62rem; }
.ui-mock--compact .mock-hist .mock-hist-state { display: none; }
.mock-hist.is-current {
  background: color-mix(in srgb, var(--brand) 11%, #fff);
  border-color: color-mix(in srgb, var(--brand) 30%, transparent);
}
.mock-hist-when { font-weight: 780; letter-spacing: .03em; color: var(--mute); text-transform: uppercase; font-size: .58rem; }
.mock-hist-dest { font-weight: 680; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-hist-state { font-size: .58rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; color: var(--link, #08783B); }

/* Dark QR / dark dash */
.product-frame--on-dark .ui-mock--qr,
.dash-shell--dark {
  --ink: #F4F7F2; --mute: color-mix(in srgb, #F4F7F2 55%, transparent);
  --line: color-mix(in srgb, #fff 14%, transparent); --soft: #121C16; --card: #18241D;
}
.product-frame--on-dark .ui-mock--qr {
  background:
    radial-gradient(120% 80% at 90% 0%, color-mix(in srgb, var(--creative-plum) 30%, transparent), transparent 55%),
    linear-gradient(180deg, #1A2620 0%, #0E1712 100%);
  color: var(--ink);
}
.product-frame--on-dark .ui-mock--qr .mock-panel,
.product-frame--on-dark .ui-mock--qr .mock-style {
  background: color-mix(in srgb, #1E2C24 92%, #fff);
  border-color: color-mix(in srgb, #fff 12%, transparent); color: var(--ink);
}
.product-frame--on-dark .ui-mock--qr .mock-qr-stage {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--brand) 18%, #18241D), #15201A 65%);
  border-color: color-mix(in srgb, var(--brand) 24%, transparent);
}
.product-frame--on-dark .ui-mock--qr .mock-qr-svg { color: #EEF6F0; }
.product-frame--on-dark .ui-mock--qr .mock-style.is-active {
  background: color-mix(in srgb, var(--brand) 16%, #18241D);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent); color: #F4F7F2;
}
.product-frame--on-dark .ui-mock--qr .mock-dest-chip {
  background: color-mix(in srgb, var(--creative-plum) 22%, #18241D);
  border-color: color-mix(in srgb, var(--creative-plum) 35%, transparent);
  color: color-mix(in srgb, #fff 70%, transparent);
}
.product-frame--on-dark .ui-mock--qr .mock-dest-chip strong,
.product-frame--on-dark .ui-mock--qr .mock-title { color: #fff; }
.product-frame--on-dark .ui-mock--qr .mock-label { color: color-mix(in srgb, #fff 45%, transparent); }
.product-frame--on-dark .ui-mock--qr .mock-cta-ghost { color: color-mix(in srgb, #fff 50%, transparent); }

/* Kenburns */
.product-frame[data-kenburns] .shot-mask .ui-mock { transform: scale(1.035); transform-origin: center; }
.product-frame.is-revealed[data-kenburns] .shot-mask .ui-mock {
  transform: scale(1); transition: transform 1.15s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .product-frame[data-kenburns] .shot-mask .ui-mock,
  .product-frame.is-revealed[data-kenburns] .shot-mask .ui-mock,
  .capability-card:hover .ui-mock--compact { transform: none; transition: none; }
}

.capability-media .ui-mock {
  width: 100%; height: 100%;
  background:
    radial-gradient(120% 90% at 90% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 58%),
    linear-gradient(165deg, #FFFEFB, color-mix(in srgb, var(--accent-soft) 60%, #fff));
}
.capability-media::after { opacity: .1 !important; }
.capability-media img { display: none !important; }

/* ============================================================================
   FEATURE SCRAPS — Floating UI fragments for product cards
   ============================================================================ */
.scrap-stage {
  position: relative;
  height: 100%;
  min-height: 220px;
  padding: 1.1rem;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 20% 20%, color-mix(in srgb, var(--scrap-a, var(--creative-tide)) 18%, transparent), transparent 60%),
    radial-gradient(70% 60% at 90% 80%, color-mix(in srgb, var(--scrap-b, var(--brand)) 12%, transparent), transparent 55%),
    linear-gradient(160deg, #FFFEFB, var(--soft));
}
.feat-card[data-accent="coral"] .scrap-stage { --scrap-a: var(--creative-coral); --scrap-b: var(--creative-amber); }
.feat-card[data-accent="tide"] .scrap-stage { --scrap-a: var(--creative-tide); --scrap-b: var(--brand); }
.feat-card[data-accent="plum"] .scrap-stage { --scrap-a: var(--creative-plum); --scrap-b: var(--creative-tide); }

.scrap {
  position: absolute;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .7rem .8rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 4px rgba(16,34,27,.04),
    0 18px 40px rgba(16,34,27,.1);
}
.scrap--domain {
  left: 8%; top: 14%; width: min(78%, 240px); transform: rotate(-2.2deg);
}
.scrap--preview {
  right: 6%; bottom: 12%; width: min(72%, 220px); transform: rotate(2.5deg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, #fff), #fff);
  border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
}
.scrap--utm {
  left: 12%; bottom: 18%; padding: .4rem .65rem; border-radius: 999px;
  font-size: .68rem; font-weight: 700; color: var(--mute); transform: rotate(-4deg);
}
.scrap--edit {
  left: 10%; top: 12%; width: min(84%, 260px);
}
.scrap--hist {
  right: 7%; bottom: 14%; width: min(70%, 200px); transform: rotate(1.8deg);
}
.scrap--qr {
  right: 8%; top: 10%; width: 112px; height: 112px; padding: .55rem;
  display: grid; place-items: center; transform: rotate(3deg);
}
.scrap--checks {
  left: 8%; top: 16%; width: min(70%, 210px); transform: rotate(-1.5deg);
}
.scrap--chart {
  left: 8%; bottom: 10%; right: 8%; height: 96px; padding: .55rem .65rem;
}
.scrap--ai {
  right: 10%; top: 14%; width: min(58%, 180px); transform: rotate(2deg);
  background: color-mix(in srgb, #fff 82%, transparent);
  backdrop-filter: blur(10px);
  border-color: color-mix(in srgb, var(--creative-plum) 25%, var(--line));
}
.scrap .scrap-label {
  font-size: .58rem; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: .35rem;
}
.scrap .scrap-url {
  font-size: .95rem; font-weight: 850; letter-spacing: -.03em; color: var(--ink);
}
.scrap .scrap-url em { font-style: normal; color: var(--link, #08783B); }
.scrap-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.scrap-chip {
  padding: .28rem .55rem; border-radius: 999px; font-size: .65rem; font-weight: 700;
  background: var(--soft); border: 1px solid var(--line); color: var(--text-secondary, #355247);
}
.scrap-chip.is-on {
  background: var(--brand); color: var(--on-brand, #062912);
  border-color: color-mix(in srgb, var(--brand) 60%, #0D9D3F);
}
.scrap-row {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
  font-size: .72rem; font-weight: 650; color: var(--text-secondary, #355247);
}
.scrap-row strong { color: var(--ink); font-weight: 800; }
.scrap-check {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 650; color: var(--ink); margin: .28rem 0;
}
.scrap-check::before {
  content: "✓"; width: 1.05rem; height: 1.05rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .65rem; font-weight: 850;
  background: color-mix(in srgb, var(--brand) 18%, #fff); color: var(--link, #08783B);
}
.scrap-mini-qr { width: 100%; height: 100%; color: #10221B; }
.scrap-kpi { font-size: 1.35rem; font-weight: 850; letter-spacing: -.04em; }
.scrap-kpi span { font-size: .72rem; font-weight: 700; color: var(--link, #08783B); margin-left: .25rem; }
.scrap-prompts { display: flex; flex-direction: column; gap: .28rem; margin-top: .4rem; }
.scrap-prompt {
  padding: .32rem .5rem; border-radius: 8px; font-size: .62rem; font-weight: 650;
  background: color-mix(in srgb, var(--creative-plum) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--creative-plum) 18%, transparent);
  color: var(--text-secondary, #355247);
}

/* ============================================================================
   DASH SHELL — late-page “more than a shortener” stage
   ============================================================================ */
.dash-shell {
  display: grid;
  grid-template-columns: 56px 1fr;
  min-height: 380px;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  box-shadow:
    0 2px 4px rgba(16,34,27,.05),
    0 28px 64px rgba(16,34,27,.16),
    0 0 0 1px rgba(255,255,255,.5) inset;
}
.dash-rail {
  background: linear-gradient(180deg, #14201A, #0E1712);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: .9rem .55rem;
}
.dash-rail .mark {
  width: 28px; height: 28px; border-radius: 9px; background: var(--brand);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 40%, transparent);
}
.dash-rail .nav-dot {
  width: 28px; height: 28px; border-radius: 9px;
  background: color-mix(in srgb, #fff 10%, transparent);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
.dash-rail .nav-dot.is-on { background: color-mix(in srgb, var(--brand) 28%, transparent); border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.dash-rail .plus {
  margin-top: auto; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center; font-weight: 850; color: #062912;
  background: var(--brand);
}
.dash-main { padding: 1.1rem 1.2rem 1.25rem; background: linear-gradient(180deg, #FBFCFA, #F3F6F1); }
.dash-tabs {
  display: inline-flex; gap: .25rem; padding: .22rem; border-radius: 999px;
  background: color-mix(in srgb, var(--border) 45%, #fff); margin-bottom: .9rem;
}
.dash-tab {
  padding: .4rem .85rem; border-radius: 999px; font-size: .74rem; font-weight: 750;
  color: var(--mute);
}
.dash-tab.is-on { background: #fff; color: var(--ink); box-shadow: 0 4px 12px rgba(16,34,27,.08); }
.dash-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: .85rem; }
.dash-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: .95rem 1rem;
  box-shadow: 0 12px 28px rgba(16,34,27,.06);
}
.dash-card h4 {
  margin: 0 0 .55rem; font-size: .95rem; font-weight: 800; letter-spacing: -.02em;
}
.dash-flow {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: .7rem 0 .35rem;
  font-size: .72rem; font-weight: 700;
}
.dash-flow span {
  padding: .35rem .6rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line);
}
.dash-flow span.brand {
  background: color-mix(in srgb, var(--brand) 16%, #fff);
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  color: var(--link, #08783B);
}
.dash-flow .arrow { border: 0; background: transparent; color: var(--mute); padding: 0; }
.dash-side .pill {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .55rem; border-radius: 11px; margin-bottom: .4rem;
  font-size: .7rem; font-weight: 680; background: var(--soft); border: 1px solid var(--line);
}
.dash-side .pill i {
  width: .7rem; height: .7rem; border-radius: 50%; flex: 0 0 auto;
}
.dash-side .pill:nth-child(2) i { background: var(--creative-coral); }
.dash-side .pill:nth-child(3) i { background: var(--creative-amber); }
.dash-side .pill:nth-child(4) i { background: var(--creative-tide); }
.dash-side .pill:nth-child(5) i { background: var(--creative-plum); }

@media (max-width: 700px) {
  .dash-grid { grid-template-columns: 1fr; }
  .scrap-stage { min-height: 200px; }
}

/* #42 (2026-10-20) Product tour: mock sized to its content, not a forced 16:9 stage, so the
   left heading wraps in 2-3 lines. Scoped to #use-cases (homepages only). Gate: lint-tour-heading.mjs */
@media (min-width: 900px) {
  html body #use-cases .use-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); }
  html body #use-cases .use-copy h3 { max-width: 19ch; text-wrap: balance; }
  html body #use-cases .use-visual { justify-self: end; width: 100%; max-width: 560px; }
  html body #use-cases .use-visual .product-frame { margin-inline-end: 0; }
  html body #use-cases .product-frame--s04 .product-shot,
  html body #use-cases .product-shot--use { aspect-ratio: auto; min-height: 0; height: auto; }
  html body #use-cases .product-shot--mock .shot-mask { position: relative; inset: auto; }
}