/* Product-shaped illustrations share the page's clay, glass and line tokens. */
.capability-icon { width: 64px; height: 64px; color: var(--clay); display: block; margin-bottom: var(--s6); }
.spec-location { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s8); font-size: var(--t-small); color: var(--ink-2); }
.proposed-tag { margin-left: auto; padding: var(--s1) var(--s2); border: var(--hair) solid var(--line); border-radius: var(--r-input); }
.change-plan h3 { display: flex; align-items: start; gap: var(--s4); padding: var(--s5); border: var(--hair) solid var(--line); border-radius: var(--r-input); }
.goal-number { color: var(--clay); font-variant-numeric: tabular-nums; }
.scenario-pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s4); flex: 1; }
.scenario-pair > span:first-child { font-size: var(--t-body); }
.scenario-arrow { color: var(--ink-3); }
.change-examples h4 { font-weight: var(--w-text); }
.integration-board.agent-brands { display: block; padding: var(--s8) var(--s6); margin: 0; font-size: var(--t-body); font-weight: var(--w-text); }
.agent-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.agent-choice { display: flex; flex-direction: column; align-items: center; gap: var(--s4); padding: var(--s6) var(--s3); background: var(--sheet-2); border: var(--hair) solid var(--line); border-radius: var(--r-panel); font-size: var(--t-h3); font-weight: var(--w-medium); }
.agent-choice svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.integration-label { text-align: center; color: var(--ink-2); font-size: var(--t-small); margin: var(--s10) 0 var(--s4); }
@media(max-width: 767px) {
 .scenario-pair { grid-template-columns: 1fr; gap: var(--s2); }
 .scenario-arrow { display: none; }
 .scenario-pair h4::before { content: '→ '; color: var(--clay); }
 .change-examples li { align-items: start; }
 .capability-icon { width: 52px; height: 52px; }
 .integration-board.agent-brands { padding-inline: 0; }
 .agent-choices { gap: var(--s2); }
 .agent-choice { font-size: var(--t-small); padding: var(--s5) var(--s1); border-radius: var(--r-input); }
}
.scenario-pair h4 { margin: 0; }
.change-examples li { border-radius: var(--r-input); }
.agent-choices { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.brand-symbol { display: block; width: 40px; height: 40px; background: currentColor; mask: var(--brand) center / contain no-repeat; }
.integration-label { text-align: left; margin: var(--s8) 0 var(--s4); }
.integration-more { text-align: center; color: var(--ink-2); font-size: var(--t-small); margin-top: var(--s8); }
.stack-view .recursive-product { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: var(--s10); overflow: hidden; padding: var(--s12) 0 var(--s12) var(--s12); }
.recursive-copy h3 { font-size: var(--t-h2); line-height: var(--lh-head); }
.recursive-copy p { color: var(--ink-2); max-width: 26ch; margin-top: var(--s5); }
.recursive-stage { min-width: 0; padding: var(--s10) 0 var(--s16); perspective: 1200px; }
.recursive-window { position: relative; width: 110%; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--sheet); padding: var(--s2); box-shadow: 0 20px 45px #0003; transform: rotateY(-12deg) rotateZ(-4deg); }
.recursive-window > img { width: 100%; height: auto; border-radius: calc(var(--r-panel) - var(--s2)); }
.recursive-window .recursive-window { position: absolute; width: 66%; right: 8%; top: 37%; transform: rotateZ(8deg); box-shadow: 0 12px 40px #0004; border-color: var(--clay); }
.recursive-window .recursive-last { width: 28%; display: grid; place-items: center; aspect-ratio: 1; right: 7%; top: 55%; transform: rotateZ(-4deg); }
.recursive-last > img { width: 75%; }
@media (max-width: 767px) {
 .agent-choices { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s3); }
 .stack-view .recursive-product { grid-template-columns: 1fr; padding: var(--s8) 0 var(--s6); gap: var(--s4); }
 .recursive-copy { padding-inline: var(--s6); }
 .recursive-copy p { max-width: 30ch; font-size: var(--t-small); }
 .recursive-stage { padding: var(--s4) var(--s6) var(--s16); }
 .recursive-window { width: 100%; }
}
@media print { .recursive-window { transform: none; box-shadow: none; } }
:root { color-scheme: light; }
.footer-controls { justify-content: flex-end; }

/* Keep the complete product visible while attention moves through it. */
#bottleneck { padding-block: 0; }
.tour-pin { padding-block: var(--s12); }
.product-view .core.product-tour { padding: 6px; }
.tour-viewport { overflow: hidden; border-radius: calc(var(--r-panel) - 6px); }
.tour-scene { position: relative; transform-origin: 0 0; will-change: transform; }
.tour-scene > img { display: block; width: 100%; border-radius: 0; }
.tour-caption { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 85%; padding: 20px 26px; border-radius: 16px; background: #fff; box-shadow: 0 8px 40px #18202818; text-align: center; opacity: var(--tour-emphasis, 0); pointer-events: none; }
.tour-caption h3 { font-size: clamp(18px, 2.2vw, 26px); margin: 0 0 8px; }
.tour-caption p { font-size: 14px; color: var(--ink-2); margin: 0; }
.tour-viewport { position: relative; }
.tour-spotlight { position: absolute; left: 2%; top: 54%; width: 43%; height: 9%; border-radius: 6px; box-shadow: 0 0 0 2000px #10182066, 0 0 12px 3px #fff9; outline: 1px solid #ffffffb3; opacity: var(--tour-emphasis, 0); pointer-events: none; }
[data-tour-step="1"] .tour-spotlight { left: 77%; top: 54%; width: 19%; height: 9%; }
[data-tour-step="2"] .tour-spotlight { left: 44%; top: 1%; width: 36%; height: 4%; }
.product-view.resin-surface::after { display: none; }
@media(max-width:480px) { .tour-caption { width: 84%; padding: 12px; } .tour-caption h3 { font-size: 17px; margin-bottom: 5px; } .tour-caption p { font-size: 12px; } }
.provider-note { float: right; font-weight: var(--w-text); }
.agent-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#replay .device { background: #fff; }
#replay .resin-surface::after { background: none; box-shadow: none; }
.stack-view .recursive-product { grid-template-columns: 1fr; padding: var(--s8) var(--s6) var(--s12); gap: var(--s6); }
.recursive-copy { padding: 0; }
.recursive-copy h3 { font-size: clamp(23px, 3.6vw, 40px); }
.recursive-stage { padding: var(--s6) var(--s6) var(--s16); transform-style: preserve-3d; }
.recursive-window { width: 100%; }
.recursive-window .recursive-window { border-color: var(--line); }
@media (prefers-reduced-motion: no-preference) {
 .js #bottleneck { height: 360vh; }
 .js .tour-pin { position: sticky; top: 80px; height: calc(100vh - 80px); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
 .js .intro .product-view { width: min(100%, calc((100vh - 330px) * 1.6)); margin: 40px auto 0; }
}
@supports (animation-timeline: view()) {
 @media (prefers-reduced-motion: no-preference) {
  #ledger { view-timeline-name: --showcase; }
  .recursive-stage > .recursive-window { animation: showcase-back linear both; animation-timeline: --showcase; animation-range: entry 0% exit 100%; }
  .recursive-window .recursive-window { animation: showcase-front linear both; animation-timeline: --showcase; animation-range: entry 0% exit 100%; }
 }
}
@keyframes showcase-back { from { transform: translateY(12px) rotateX(5deg) rotateY(-9deg) rotateZ(-3deg); } to { transform: translateY(-12px) rotateX(-3deg) rotateY(5deg) rotateZ(-1deg); } }
@keyframes showcase-front { from { transform: translateZ(30px) rotateX(-4deg) rotateY(7deg) rotateZ(7deg); } to { transform: translateZ(50px) rotateX(3deg) rotateY(-5deg) rotateZ(3deg); } }
@media(max-width: 480px) { .provider-note { float: none; display: block; margin-top: var(--s2); } }
@media (prefers-reduced-motion: reduce), print { .tour-spotlight, .tour-caption { display: none; } }
@media print { .js #bottleneck { height: auto; } .js .tour-pin { position: static; height: auto; } }