/* One authored sequence: source → checks → a human decision → connected records. */
.hero .hero-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 48px; max-width: 1280px; align-items: start; }
.product-demo { min-width: 0; scroll-margin-top: 92px; --showcase-ease: cubic-bezier(.16, 1, .3, 1); --showcase-enter: 650ms; }
.pd-shell { overflow: hidden; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-1); box-shadow: 0 24px 56px -26px rgb(0 0 0 / .24), 0 4px 12px -6px rgb(0 0 0 / .12); }
.pd-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
.pd-brand { display: flex; align-items: center; gap: 8px; color: var(--text-hi); font-size: 14px; }
.pd-toolbar button { border: 0; background: transparent; color: var(--text-mid); font: inherit; font-size: 12px; cursor: pointer; min-width: 56px; min-height: 44px; }
.pd-toolbar button:hover { color: var(--text-hi); }
.pd-tabs { display: grid; grid-template-columns: 1fr 1.2fr 1fr; padding: 0 12px; border-bottom: 1px solid var(--line); }
.pd-tabs button { position: relative; min-height: 50px; padding: 8px 4px; border: 0; background: none; color: var(--text-mid); font: 500 12px/1.4 var(--font-sans); cursor: pointer; }
.pd-tabs button::after { content: ''; position: absolute; height: 2px; bottom: 0; left: 12px; right: 12px; background: var(--amber); transform: scaleX(0); transition: transform 250ms var(--showcase-ease); }
.pd-tabs [aria-selected="true"] { color: var(--text-hi); }
.pd-tabs [aria-selected="true"]::after { transform: scaleX(1); }
.pd-examples { display: flex; gap: 8px; padding: 8px 18px; min-height: 60px; align-items: center; }
.pd-examples button { padding: 8px 12px; min-height: 44px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-mid); font: 500 12px/1.4 var(--font-sans); cursor: pointer; }
.pd-examples [aria-pressed="true"] { color: var(--text-hi); border-color: var(--line-2); background: var(--bg-2); box-shadow: 0 2px 4px rgb(0 0 0 / .04); }
.pd-context { display: flex; align-items: center; min-height: 60px; padding: 8px 20px; color: var(--text-mid); font-size: 12px; }
.pd-panel { padding: 12px 24px 0; }
.pd-narrative { min-height: 106px; }
.pd-panel h2 { font: 600 clamp(21px, 2vw, 27px)/1.2 var(--font-display); letter-spacing: -.025em; color: var(--text-hi); margin: 0 0 10px; text-wrap: balance; }
.pd-narrative p { font-size: 13px; color: var(--text-mid); line-height: 1.65; margin: 0; max-width: 58ch; }
.pd-stage { position: relative; height: 300px; perspective: 1000px; isolation: isolate; }
.pd-source-stack { position: absolute; top: 12px; left: 0; width: 60%; transform: translate(24%, 6px) rotate(-2deg); transform-origin: left top; transition: transform var(--showcase-enter) var(--showcase-ease), opacity 400ms ease; }
.pd-sheet-back { position: absolute; inset: -7px 5px 8px; border: 1px solid var(--line-2); background: var(--bg-2); transform: rotate(3deg); border-radius: 4px; z-index: -1; }
.pd-source { position: relative; overflow: hidden; padding: 16px; background: var(--bg-0); border: 1px solid var(--line-2); border-radius: 5px; box-shadow: 0 14px 26px -18px rgb(0 0 0 / .35); }
.pd-source-label { display: flex; gap: 7px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--text-mid); font: 10px/1.4 var(--font-mono); }
.pd-source-label svg { width: 18px; height: 18px; flex-shrink: 0; }
.pd-source h3 { margin: 14px 0 8px; color: var(--text-hi); font: 600 15px/1.3 var(--font-display); }
.pd-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; color: var(--text-mid); border-bottom: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.pd-row strong { color: var(--text-hi); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.pd-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; font-size: 12px; color: var(--text-mid); }
.pd-total strong { color: var(--text-hi); font: 600 18px/1.3 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }
.pd-scan { position: absolute; pointer-events: none; inset: 0; background: linear-gradient(180deg, transparent 42%, var(--amber-soft) 50%, transparent 58%); transform: translateY(-100%); }
[data-phase="0"] .pd-scan { animation: pd-read 2400ms var(--showcase-ease) both; }
@keyframes pd-read { to { transform: translateY(100%); } }
.pd-evidence { position: absolute; top: 35px; right: 0; width: 40%; display: grid; gap: 9px; }
.pd-evidence > div { display: flex; gap: 8px; align-items: center; padding: 12px 10px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 6px; color: var(--text-mid); opacity: 1; transform: none; transition: opacity 400ms ease, transform var(--showcase-enter) var(--showcase-ease); transition-delay: calc(var(--item) * 90ms); }
.pd-evidence strong { font-size: 11px; line-height: 1.5; font-weight: 500; }
.pd-evidence svg { display: block; width: 18px; height: 18px; }
.pd-evidence .is-checked > span { color: var(--ok); }
[data-phase="0"] .pd-evidence > div { opacity: 0; transform: translateX(20px); }
.product-demo:not([data-phase="0"]) .pd-source-stack { transform: translate(-3%, 0) scale(.92) rotate(0); }
[data-story="po"][data-phase="1"] .pd-total strong { color: var(--err); }
.pd-reviewer { position: absolute; z-index: 2; bottom: 6px; right: 0; width: min(330px, 87%); display: flex; align-items: center; gap: 10px; padding: 15px; border: 1px solid var(--line-2); background: var(--bg-0); border-radius: 10px; box-shadow: 0 14px 32px -18px rgb(0 0 0 / .35); opacity: 0; transform: translateY(18px); transition: opacity 350ms ease, transform var(--showcase-enter) var(--showcase-ease); }
.pd-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; color: var(--text-hi); background: var(--bg-3); font: 600 14px var(--font-display); }
.pd-reviewer strong, .pd-reviewer > div > span { display: block; }
.pd-reviewer strong { color: var(--text-hi); font-size: 12px; line-height: 1.5; }
.pd-reviewer > div > span { color: var(--text-mid); font-size: 11px; margin-top: 3px; }
.pd-review-check { margin-left: auto; color: var(--ok); --check-rotate-from: 12deg; --check-y-amount: 4px; --check-blur-from: 2px; }
.pd-review-check svg { width: 24px; height: 24px; }
[data-phase="3"] .pd-reviewer, [data-phase="4"] .pd-reviewer { opacity: 1; transform: none; }
[data-phase="4"] .pd-reviewer { border-color: var(--ok); }
.pd-result { position: absolute; inset: 18px 0 0; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 450ms ease, transform var(--showcase-enter) var(--showcase-ease); }
.pd-result-heading { display: flex; align-items: center; gap: 9px; color: var(--ok); font-size: 14px; padding-bottom: 18px; }
.pd-result-heading svg { width: 22px; height: 22px; }
.pd-result table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.pd-result caption { text-align: left; font-size: 12px; color: var(--text-mid); margin-bottom: 12px; }
.pd-result th, .pd-result td { text-align: right; padding: 12px 8px; border-bottom: 1px solid var(--line); font-weight: 500; }
.pd-result th:first-child { text-align: left; padding-left: 0; }
.pd-result thead { color: var(--text-mid); }
.pd-result p { font-size: 11px; color: var(--text-mid); line-height: 1.7; margin: 18px 0 0; }
[data-phase="5"] .pd-source-stack { opacity: 0; transform: translate(-3%, -12px) scale(.88); }
[data-phase="5"] .pd-evidence > div { opacity: 0; transform: translateY(-12px); transition-delay: 0ms; }
[data-phase="5"] .pd-result { opacity: 1; transform: none; }
.pd-state { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 9px 0 12px; font-size: 12px; color: var(--text-mid); }
.pd-state strong { font-weight: 500; line-height: 1.5; }
.pd-state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex-shrink: 0; }
[data-phase="4"] .pd-state-dot, [data-phase="5"] .pd-state-dot { background: var(--ok); }
.pd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 16px 24px; border-top: 1px solid var(--line); gap: 8px; }
.pd-steps li { display: flex; align-items: center; gap: 7px; color: var(--text-mid); font-size: 11px; }
.pd-steps li > span { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line-2); border-radius: 50%; font-size: 9px; flex-shrink: 0; }
.pd-steps strong { font-weight: 500; }
.pd-steps svg { width: 14px; height: 14px; }
.pd-steps [aria-current="step"] { color: var(--text-hi); }
.pd-steps [aria-current="step"] > span { border-color: var(--amber); background: var(--amber-soft); }
.pd-steps .is-complete > span { color: var(--ok); }
.pd-footnote { padding: 12px; background: var(--bg-2); color: var(--text-mid); font-size: 10px; text-align: center; line-height: 1.6; }
.pd-caption { font-size: 12px; color: var(--text-mid); text-align: center; margin: 18px 0 0; }
.pd-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.product-demo [hidden] { display: none !important; }
.product-demo :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.product-demo ::selection { background: var(--amber-soft); color: var(--text-hi); }
[data-playing="false"] *, [data-playing="false"] *::after { animation-play-state: paused !important; }
@media (max-width: 1000px) { .hero .hero-grid { grid-template-columns: 1fr; gap: 36px; } .product-demo { width: 100%; max-width: 640px; margin-inline: auto; } }
@media (max-width: 480px) {
  .pd-toolbar { padding: 6px 12px; }
  .pd-panel { padding: 12px 16px 0; }
  .pd-narrative { min-height: 132px; }
  .pd-tabs { padding-inline: 6px; }
  .pd-tabs button { font-size: 11px; }
  .pd-examples { padding: 8px 10px; gap: 2px; }
  .pd-examples button { font-size: 11px; padding-inline: 9px; }
  .pd-stage { height: 440px; }
  .pd-source-stack { width: 96%; transform: translate(2%, 5px) rotate(-1deg); }
  .product-demo:not([data-phase="0"]) .pd-source-stack { transform: none; }
  .pd-evidence { top: 280px; width: 100%; gap: 6px; }
  .pd-evidence > div { padding: 8px 10px; }
  .pd-reviewer { bottom: 0; width: 95%; }
  [data-phase="3"] .pd-evidence, [data-phase="4"] .pd-evidence { opacity: 0; }
  .pd-steps { padding: 14px 12px; gap: 4px; }
  .pd-steps li { gap: 4px; font-size: 10px; }
  .pd-result th, .pd-result td { padding: 12px 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-demo *, .product-demo *::after { transition: none !important; animation: none !important; }
  .product-demo .pd-scan { display: none; }
}
/* transitions.dev: scoped presentation uses the shared success-check recipe. */
:root {
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}
/* Wrapper drives the appear animation; it doesn't own any
   sizing or color so you can drop in any icon. */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
/* overflow: visible keeps the stroke from clipping while it
   draws; display: block kills the inline whitespace under SVGs. */
.t-success-check svg { display: block; overflow: visible; }
/* Stroke-draw setup. Replace 20 with the result of
   path.getTotalLength() for your path; round caps mean any
   sub-pixel overshoot is invisible. */
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}

@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .t-success-check { animation: none !important; opacity: 1; }
  .t-success-check svg path { animation: none !important; stroke-dashoffset: 0 !important; }
}