/* Sharetru · Shop boundary figure with record (2026)
   The figure's own styles. Section, head, question card, band and buttons use Shared styles (st26).
   Reads the theme tokens (--st-*) with the ST26 aliases as fallbacks. The figure is authored in its
   END STATE; the choreography runs on a view timeline bound to the figure (no scroll-jacking), plays
   once where view timelines are unsupported (module.js adds .js-once / .in), and is off under reduced
   motion and when the theme's "Allow motion" is off (html[data-motion="off"]).
   Ported from the Manufacturing and Engineering reference build v6 (15 Oct 2026). */
.st26 .shopb__fig { margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 0; padding: 0; view-timeline-name: --shopb; view-timeline-axis: block; }
.st26 .shopb__scroll { outline: none; }
.st26 .shopb__scroll:focus-visible { outline: 2px solid var(--st-accent, var(--accent)); outline-offset: 4px; border-radius: 12px; }
.st26 .shopb__svg { display: block; width: 100%; height: auto; font-family: inherit; overflow: visible; }
.st26 .shopb__swipe { display: none; }

/* ---- drawing ---------------------------------------------------------------- */
.st26 .shopb__svg .col { fill: var(--st-muted, var(--muted)); font-size: 10px; font-weight: 800; letter-spacing: 0.12em; }
.st26 .shopb__svg .box { fill: var(--st-surface, var(--surface)); stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 1; }
.st26 .shopb__svg .site { fill: var(--st-surface, var(--surface)); stroke: var(--st-accent, var(--accent)); stroke-width: 1.5; }
.st26 .shopb__svg .sitehd { fill: var(--st-surface-2, var(--surface-2)); }
.st26 .shopb__svg .bt { fill: var(--st-ink, var(--ink)); font-size: 13px; font-weight: 800; letter-spacing: -0.01em; }
.st26 .shopb__svg .bs { fill: var(--st-muted, var(--muted)); font-size: 10.5px; font-weight: 600; }
.st26 .shopb__svg .mono { font-family: var(--st-font-mono, var(--mono, ui-monospace, Menlo, Consolas, monospace)); font-size: 11px; font-weight: 700; fill: var(--st-ink-soft, var(--ink-soft)); }
.st26 .shopb__svg .fold { fill: var(--st-ink, var(--ink)); font-size: 11.5px; font-weight: 800; }
.st26 .shopb__svg .foldt { fill: var(--st-accent, var(--accent)); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .shopb__svg .rail { stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 2; fill: none; }
.st26 .shopb__svg .drift { stroke: var(--st-accent, var(--accent)); stroke-width: 2; fill: none; stroke-dasharray: 3 7; opacity: 0.7; }
.st26 .shopb__svg .lab { fill: var(--st-accent, var(--accent)); font-size: 10px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .shopb__svg .gate { fill: var(--st-accent, var(--accent)); }
.st26 .shopb__svg .gatei { stroke: var(--st-white, #ffffff); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.st26 .shopb__svg .tok { fill: var(--tok-bg, var(--st-midnight, #171384)); }
.st26 .shopb__svg .tokt { fill: var(--tok-ink, var(--st-white, #ffffff)); font-family: var(--st-font-mono, var(--mono, ui-monospace, Menlo, Consolas, monospace)); font-size: 10.5px; font-weight: 700; }
.st26 .shopb__svg .tok.in { fill: var(--st-green, var(--green)); }
.st26 .shopb__svg .tokt.in { fill: #0a2a24; }
.st26 .shopb__svg .tok.out { fill: var(--st-aqua, var(--aqua)); }
.st26 .shopb__svg .tokt.out { fill: #0b2f36; }
.st26 .shopb__svg .bad { stroke: var(--st-watermelon, var(--watermelon)); stroke-width: 1.5; stroke-dasharray: 5 4; fill: rgba(245, 100, 119, 0.06); }
.st26 .shopb__svg .badt { fill: var(--st-off-ink, var(--wm-ink)); font-size: 10.5px; font-weight: 800; }
.st26 .shopb__svg .badx { fill: var(--st-watermelon, var(--watermelon)); }
.st26 .shopb__svg .badxi { stroke: var(--st-white, #ffffff); stroke-width: 2.2; stroke-linecap: round; }
.st26 .shopb__svg .lab.ref { fill: var(--st-off-ink, var(--wm-ink)); }
.st26 .shopb__svg .rec { fill: var(--st-surface, var(--surface)); stroke: var(--st-line-strong, var(--line-strong)); stroke-width: 1; }
.st26 .shopb__svg .rechd { fill: var(--st-muted, var(--muted)); font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; }
.st26 .shopb__svg .recl { stroke: var(--st-line, var(--line)); stroke-width: 1; }
.st26 .shopb__svg .rt { fill: var(--st-ink-soft, var(--ink-soft)); font-size: 11px; font-weight: 600; }
.st26 .shopb__svg .rtb { fill: var(--st-ink, var(--ink)); font-weight: 800; }
.st26 .shopb__svg .rp { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; }
.st26 .shopb__svg .rp.in { fill: var(--st-rec-ink); }
.st26 .shopb__svg .rp.out { fill: var(--st-web-ink); }
.st26 .shopb__svg .rp.link { fill: var(--st-leg-ink); }
.st26 .shopb__svg .rp.refused { fill: var(--st-off-ink, var(--wm-ink)); }

/* ---- caption ---------------------------------------------------------------- */
.st26 .shopb__cap { margin: 1.375rem 0 0; font-size: 0.84375rem; line-height: 1.6; color: var(--st-muted, var(--muted)); text-align: center; }
.st26 .shopb__cap p { margin: 0; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
.st26 .shopb__cap b, .st26 .shopb__cap strong { color: var(--st-ink-soft, var(--ink-soft)); }
.st26 .shopb .qcard { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.st26 .shopb .ctaband { margin-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem); }
.st26 .shopb .sec-cta { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

/* ---- the choreography ------------------------------------------------------------
   Six beats on the figure's own timeline: 1 change in (6–18%) · 2 PDM pulls it (20–32) · 3 RFQ out and
   certificate back (34–46) · 4 QMS pulls, deliverable staged (48–60) · 5 prime pulls (62–74) · 6 the
   forwarded copy of the link is refused (76–86). The record's rows arrive two beats behind each event.
   Everything is drawn in its end state; the keyframes only describe where things were. */
.st26 .shopb__fig .anim { transform-box: fill-box; transform-origin: center; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); animation-fill-mode: both; }
.st26 .shopb__fig .b1 { animation-name: shopb-tok-1; }
.st26 .shopb__fig .b2 { animation-name: shopb-tok-2; }
.st26 .shopb__fig .b3 { animation-name: shopb-tok-3; }
.st26 .shopb__fig .b4 { animation-name: shopb-tok-4; }
.st26 .shopb__fig .b5 { animation-name: shopb-tok-5; }
.st26 .shopb__fig .b6 { animation-name: shopb-bad-6; }
.st26 .shopb__fig .r1 { animation-name: shopb-row-1; }
.st26 .shopb__fig .r2 { animation-name: shopb-row-2; }
.st26 .shopb__fig .r3 { animation-name: shopb-row-3; }
.st26 .shopb__fig .r4 { animation-name: shopb-row-4; }
.st26 .shopb__fig .r5 { animation-name: shopb-row-5; }
.st26 .shopb__fig .r6 { animation-name: shopb-row-6; }
.st26 .shopb__fig .d1 { animation-name: shopb-drift-1; }
.st26 .shopb__fig .d2 { animation-name: shopb-drift-2; }
.st26 .shopb__fig .d3 { animation-name: shopb-drift-3; }
.st26 .shopb__fig .d4 { animation-name: shopb-drift-4; }
.st26 .shopb__fig .d5 { animation-name: shopb-drift-5; }
@keyframes shopb-tok-1 { 0%, 6% { opacity: 0; transform: translateX(-120px); } 9% { opacity: 1; } 18%, 100% { opacity: 1; transform: none; } }
@keyframes shopb-tok-2 { 0%, 20% { opacity: 0; transform: translateX(120px); } 23% { opacity: 1; } 32%, 100% { opacity: 1; transform: none; } }
@keyframes shopb-tok-3 { 0%, 34% { opacity: 0; transform: translateX(-120px); } 37% { opacity: 1; } 46%, 100% { opacity: 1; transform: none; } }
@keyframes shopb-tok-4 { 0%, 48% { opacity: 0; transform: translateX(120px); } 51% { opacity: 1; } 60%, 100% { opacity: 1; transform: none; } }
@keyframes shopb-tok-5 { 0%, 62% { opacity: 0; transform: translateX(-120px); } 65% { opacity: 1; } 74%, 100% { opacity: 1; transform: none; } }
@keyframes shopb-bad-6 { 0%, 76% { opacity: 0; transform: translateY(8px); } 86%, 100% { opacity: 1; transform: none; } }
@keyframes shopb-row-1 { 0%, 16% { opacity: 0; } 19%, 100% { opacity: 1; } }
@keyframes shopb-row-2 { 0%, 30% { opacity: 0; } 33%, 100% { opacity: 1; } }
@keyframes shopb-row-3 { 0%, 44% { opacity: 0; } 47%, 100% { opacity: 1; } }
@keyframes shopb-row-4 { 0%, 58% { opacity: 0; } 61%, 100% { opacity: 1; } }
@keyframes shopb-row-5 { 0%, 72% { opacity: 0; } 75%, 100% { opacity: 1; } }
@keyframes shopb-row-6 { 0%, 86% { opacity: 0; } 89%, 100% { opacity: 1; } }
@keyframes shopb-drift-1 { 0%, 6% { opacity: 0; } 9%, 100% { opacity: 0.7; } }
@keyframes shopb-drift-2 { 0%, 20% { opacity: 0; } 23%, 100% { opacity: 0.7; } }
@keyframes shopb-drift-3 { 0%, 34% { opacity: 0; } 37%, 100% { opacity: 0.7; } }
@keyframes shopb-drift-4 { 0%, 48% { opacity: 0; } 51%, 100% { opacity: 0.7; } }
@keyframes shopb-drift-5 { 0%, 62% { opacity: 0; } 65%, 100% { opacity: 0.7; } }

/* Scroll-driven: the beats run while the figure travels through the middle of the viewport
   (cover 12% → 48% of its own view timeline). No pinning, no scroll-jacking. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .st26 .shopb__fig .anim { animation-timeline: --shopb; animation-range: cover 12% cover 48%; }
  }
}
/* No view timelines: module.js adds .js-once to the figure and .in when it scrolls into view; the beats play once over seven seconds. */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="off"]) .st26 .shopb__fig.js-once .anim { animation-duration: 7s; animation-delay: 0.3s; animation-iteration-count: 1; animation-play-state: paused; }
    html:not([data-motion="off"]) .st26 .shopb__fig.js-once.in .anim { animation-play-state: running; }
  }
}
/* Motion off (visitor or theme): the finished picture, nothing moves. */
@media (prefers-reduced-motion: reduce) { .st26 .shopb__fig .anim { animation: none !important; } }
html[data-motion="off"] .st26 .shopb__fig .anim { animation: none !important; }
@media print { .st26 .shopb__fig .anim { animation: none !important; } }

/* ---- phones: the figure keeps an 860px minimum and scrolls sideways with a cue (playbook B6) ---- */
@media (max-width: 1000px) {
  .st26 .shopb__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.25rem; }
  .st26 .shopb__svg { min-width: 860px; }
  .st26 .shopb__swipe { display: block; margin: 0 0 0.625rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-accent-ink, var(--accent-ink)); }
}
@media (max-width: 760px) {
  .st26 .shopb__fig .anim { animation: none !important; }
}