/* The tabbed product showcase under the hero. Each tab is one moment from the real product, laid
   out on a dotted canvas rather than a generic dashboard: a draft fanning out to per-network
   versions, clicks traced back to the post and network, and an agent whose key keeps a human in
   the loop. The notch the tabs sit in is in hero.css (the closing CTA uses it too). */

/* ── Tabs: a segmented control; the selected tab's underline fills while the set auto-advances ── */
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--n-100); box-shadow: inset 0 0 0 1px var(--n-200); }
.tab {
  position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 8px;
  color: var(--n-500); font-size: 14px; line-height: 14px; font-weight: 500; white-space: nowrap;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.tab:hover { color: var(--n-800); }
.tab .icon-sq { filter: grayscale(1); opacity: .6; transition: filter .15s, opacity .15s; }
.tab:hover .icon-sq, .tab[aria-selected="true"] .icon-sq { filter: none; opacity: 1; }
.tab[aria-selected="true"] { background: #fff; color: var(--n-900); box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 0 0 1px var(--n-200); }
.tab::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
}
.showcase.running:not(.paused) .tab[aria-selected="true"]::after { animation: tab-progress var(--tab-ms, 7000ms) linear forwards; }
@keyframes tab-progress { to { transform: scaleX(1); } }

/* ── Stage, frame and the floating caption bar ── */
/* The stage widens with the rail on wide screens (base.css); its height stays put, because the
   canvases hold fixed-size cards and the page zoom already scales them up. */
.stage { position: relative; max-width: calc(var(--grid-width) - 140px); margin: 24px auto 0; padding: 0 16px; }
.stage-h { position: relative; height: 560px; }
.panel { position: absolute; inset: 0; transition: opacity .3s, visibility 0s; }
.panel[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, visibility 0s .3s; }
.frame {
  height: 100%; border: 1px solid var(--n-200); border-bottom: 0; border-radius: 20px 20px 0 0; padding: 12px 12px 0;
  background: rgb(255 255 255 / .45); transition: transform .3s var(--ease-out);
  -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent);
}
.panel[hidden] .frame { transform: translateY(24px); }
.panel-bar {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(720px, calc(100% - 32px));
  display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px; background: var(--n-900); color: #fff;
  box-shadow: 0 10px 30px -10px rgb(0 0 0 / .4);
}
.panel-bar .glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; flex: none; }
.panel-bar .glyph svg { width: 16px; height: 16px; }
.panel-bar b { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.panel-bar small { display: block; font-size: 12px; line-height: 16px; color: var(--n-400); }
.panel-bar .btn { margin-left: auto; height: 32px; padding: 0 14px; }

/* ── Canvas: a slim app header over a dotted surface ── */
.canvas {
  position: relative; height: 100%; overflow: hidden; border: 1px solid var(--n-300); border-bottom: 0;
  border-radius: 12px 12px 0 0; background: #fff; font-size: 12px; line-height: 16px; color: var(--n-800);
}
.canvas::before {
  content: ""; position: absolute; inset: 44px 0 0; pointer-events: none;
  background-image: radial-gradient(var(--n-200) 1px, transparent 1px); background-size: 16px 16px;
}
.canvas > * { position: relative; }
.canvas-h { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--n-200); background: #fff; }
.crumbs { display: flex; align-items: center; gap: 6px; margin-right: auto; min-width: 0; color: var(--n-500); }
.crumbs .wm { flex: none; width: 22px; height: 22px; margin-right: 0; border-radius: 50%; object-fit: cover; }
.crumbs .crumb-name { color: var(--n-800); font-weight: 500; white-space: nowrap; }
.crumbs svg { width: 12px; height: 12px; color: var(--n-400); }
.crumbs b { color: var(--n-900); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn-mini { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--n-200); background: #fff; font-size: 11px; font-weight: 500; color: var(--n-800); white-space: nowrap; }
.btn-mini.dark { background: var(--n-900); border-color: var(--n-900); color: #fff; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--analytics); }
.live i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: live-ping 1.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes live-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }
.canvas .card { box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 12px 28px -16px rgb(0 0 0 / .18); }
.canvas .mark { flex: none; }

/* ── Publishing: one draft wired to a version per network ── */
.fan { display: grid; grid-template-columns: minmax(0, 290px) 72px minmax(0, 460px); justify-content: center; align-items: center; padding: 28px 28px 0; }
.draft { position: relative; }
.draft::after, .versions li::before {
  content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 2px var(--accent);
}
.draft::after { right: -5px; }
.draft p { padding: 12px 14px 0; font-size: 12.5px; line-height: 19px; color: var(--n-800); }
.lnk { color: #2563eb; }
.draft-img { margin: 12px 14px 0; border-radius: 8px; overflow: hidden; background: var(--n-100); }
.draft-img video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; }
.draft-f { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 10px 14px; border-top: 1px solid var(--n-100); font-size: 11px; color: var(--n-600); }
.draft-f svg { width: 12px; height: 12px; }
.wires { width: 72px; height: 300px; overflow: visible; }
.wires path { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: .6; animation: wire-flow 1.2s linear infinite; }
.wires path.fix { stroke: #dc2626; opacity: .4; animation: none; }
@keyframes wire-flow { to { stroke-dashoffset: -18; } }
.versions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.versions li {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  height: 52px; padding: 0 12px; border: 1px solid var(--n-200); border-radius: 10px; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / .04), 0 8px 20px -14px rgb(0 0 0 / .16);
}
.versions li::before { left: -5px; }
.versions .mark { width: 26px; height: 26px; }
.versions b { display: block; font-size: 12.5px; line-height: 17px; font-weight: 600; color: var(--n-900); }
.versions small { display: block; font-size: 11px; line-height: 15px; color: var(--n-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meter { font-size: 10.5px; color: var(--n-500); }
.st { font-style: normal; font-size: 10.5px; line-height: 18px; font-weight: 600; padding: 0 8px; border-radius: 999px; color: #15803d; background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; }
.versions li.fix { border-color: #fecaca; background: #fffafa; }
.versions li.fix::before { box-shadow: inset 0 0 0 2px #dc2626; }
.versions li.fix .st { color: #b91c1c; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; }

/* ── Analytics: every network's numbers in one view, gaps shown as gaps, and the clicks we track ourselves ── */
.track, .agent { display: grid; gap: 16px 20px; align-items: start; max-width: 828px; margin: 0 auto; padding: 24px 28px 0; }
.track { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.side-stack { display: grid; gap: 16px; }
.kpi-strip { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; }
.kpi-strip > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; row-gap: 2px; padding: 12px 14px 10px; border-left: 1px solid var(--n-100); }
.kpi-strip > div:first-child { border-left: 0; }
.kpi-strip small { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--n-500); white-space: nowrap; }
.kpi-strip b { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; color: var(--n-900); }
.kpi-strip em { font-style: normal; font-size: 10.5px; font-weight: 500; color: var(--analytics); }
.kpi-strip svg { grid-column: 1 / -1; width: 100%; height: 18px; margin-top: 4px; overflow: visible; }
.kpi-strip path { fill: none; stroke: var(--n-300); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kpi-strip .ours { background: linear-gradient(#f0fdf4, #fff); }
.kpi-strip .ours small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--analytics); }
.kpi-strip .ours path { stroke: var(--analytics); }
.nets { overflow: hidden; }
.nets table { width: 100%; border-collapse: collapse; font-size: 12px; }
.nets th, .nets td { padding: 7px 14px; text-align: right; font-weight: 400; white-space: nowrap; }
.nets th:first-child { text-align: left; }
.nets thead th { padding-block: 9px; border-bottom: 1px solid var(--n-100); font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--n-500); }
.nets tbody tr + tr { border-top: 1px solid var(--n-100); }
.nets tbody th { font-weight: 500; color: var(--n-900); }
.nets tbody th .mark { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
.nets td { font: 11.5px/18px var(--font-mono); color: var(--n-800); }
.nets .na { color: var(--n-300); }
.nets thead .ours { color: var(--analytics); }
.nets td.ours { background: #f0fdf4; color: var(--analytics-ink); font-weight: 500; }
.card-f { padding: 9px 14px; border-top: 1px solid var(--n-100); font-size: 11px; color: var(--n-500); }
.feed ul { padding: 4px 0; }
.feed li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 14px; color: var(--n-600); white-space: nowrap; }
.feed li span { overflow: hidden; text-overflow: ellipsis; }
.feed li b { font-weight: 600; color: var(--n-900); }
.feed .mark { width: 18px; height: 18px; }
.feed time { font: 11px/16px var(--font-mono); color: var(--n-400); }
.feed li.new { background: linear-gradient(90deg, #f0fdf4, transparent 80%); }
.panel:not([hidden]) .feed li.new { animation: feed-in .6s var(--ease-out) .25s both; }
@keyframes feed-in { from { opacity: 0; transform: translateY(-6px); } }
.sale { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-top: 1px solid var(--n-100); color: var(--n-800); }
.sale i { width: 6px; height: 6px; border-radius: 50%; background: var(--analytics); }

/* ── Agents & API: a conversation on the left, what it produced and the key that bounds it on the right ── */
.agent { grid-template-columns: minmax(0, 1fr) minmax(0, 290px); padding-top: 24px; }
.chat { display: grid; gap: 10px; }
.msg { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--n-900); color: #fff; font-size: 12.5px; line-height: 19px; }
.msg.bot { justify-self: start; border: 1px solid var(--n-200); border-radius: 14px 14px 14px 4px; background: #fff; color: var(--n-800); }
.call {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; width: min(100%, 460px);
  padding: 8px 12px; border: 1px solid var(--n-200); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .04);
}
.call .fn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--n-900); }
.call .fn::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--n-900); }
.call .res { text-align: right; font-size: 11px; font-weight: 500; color: #15803d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call .res::before { content: "✓ "; }
.call pre { grid-column: 1 / -1; margin: 2px 0 0; padding: 10px 12px; border: 1px solid var(--n-100); border-radius: 8px; background: var(--n-50); font-size: 10.5px; line-height: 16px; color: var(--n-700); overflow: hidden; }
.canvas .approve { box-shadow: inset 0 2px 0 #f59e0b, 0 1px 2px rgb(0 0 0 / .04), 0 12px 28px -16px rgb(0 0 0 / .18); }
.appr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 6px; padding: 12px 14px; }
.appr b { font-size: 13px; font-weight: 600; color: var(--n-900); }
.appr time { grid-column: 1 / -1; font-size: 11px; color: var(--n-500); }
.marks { display: flex; gap: 6px; }
.marks .mark { width: 18px; height: 18px; }
.appr-f { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--n-100); }
.key dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px 10px; margin: 0; padding: 12px 14px; }
.key dt { color: var(--n-500); font-size: 11px; }
.key dd { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: 11px; color: var(--n-900); }
.key .chip { padding: 2px 6px; font-size: 10px; }

/* ── Smaller screens: keep each panel's one essential card ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .fan, .track, .agent { padding-inline: 20px; }
  .versions .meter { display: none; }
  .versions li { grid-template-columns: 26px minmax(0, 1fr) auto; }
  .agent { grid-template-columns: minmax(0, 1fr) minmax(0, 250px); }
}
@media (max-width: 1023px) {
  .kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-strip > div:nth-child(4) { border-left: 0; }
  .kpi-strip > div:nth-child(n+4) { border-top: 1px solid var(--n-100); }
  .kpi-strip svg { display: none; }
}
@media (max-width: 767px) {
  .tabs { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; background: transparent; box-shadow: none; }
  .tab { background: #fff; box-shadow: 0 0 0 1px var(--n-200); }
  .stage-h { height: 440px; }
  .canvas-h .chip, .canvas-h .btn-mini { display: none; }
  .fan, .track, .agent { grid-template-columns: minmax(0, 1fr); padding: 16px 12px 0; }
  .draft, .wires, .side-stack, .nets, .kpi-strip em, .kpi-strip .ours small::before { display: none; }
  .kpi-strip > div { padding: 10px 12px; }
  .kpi-strip b { font-size: 16px; }
  .versions li { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .versions li::before, .versions .meter { display: none; }
  .versions .mark { width: 24px; height: 24px; }
  .call pre { display: none; }
  .panel-bar small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wires path, .live i::after, .panel:not([hidden]) .feed li.new { animation: none; }
}