/* product.css - VerifAIer product pages. Loaded AFTER site.css. Reuses tokens. */

/* Pipeline diagram: labelled nodes joined by arrows. Twelve product and walkthrough pages
   render it.
   WAS `.st-flow`, RENAMED AT GATE 5. `site.css` defines a different `.st-flow` -- the
   frozen onboarding strip, a `<ul>` of `<li><b>/<span>` that the Landing carries and that
   `@media (max-width:860px)` sets to `display:none`. Two compositions, one class name, and
   the only reason the product pages rendered correctly was load order: `product.css` comes
   after `site.css`, so its unconditional `display:flex` outranked the other sheet's
   media-query `display:none`. Correct output must not depend on which stylesheet a page
   happens to list second, so the composition that is not the frozen one took a new name.
   The declarations below are byte-for-byte the ones the pages already resolved to. */
.st-pflow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.75rem}
.st-pflow__node{flex:1 1 150px;max-width:230px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.1rem;text-align:center}
.st-pflow__node strong{display:block;font-size:.92rem;letter-spacing:-0.01em}
.st-pflow__node span{font-size:.72rem;color:var(--muted);font-family:var(--mono);display:block;margin-top:.25rem}
.st-pflow__arrow{color:var(--brand);flex:0 0 auto;display:flex;align-items:center}
.st-pflow__arrow svg{width:22px;height:22px}
@media (max-width:640px){.st-pflow{flex-direction:column}.st-pflow__arrow{transform:rotate(90deg)}}

.st-stack{display:flex;flex-direction:column;gap:.6rem}
.st-layer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--r);padding:.85rem 1.1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.st-layer strong{font-size:.94rem}
.st-layer span{color:var(--muted);font-size:.78rem;font-family:var(--mono);white-space:nowrap}

.st-cmp__wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}
.st-cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
.st-cmp th,.st-cmp td{padding:.8rem 1rem;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top}
.st-cmp thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:700}
.st-cmp thead th:not(:first-child),.st-cmp td:not(:first-child){text-align:center}
.st-cmp tbody tr:last-child td{border-bottom:none}
.st-cmp tbody tr:hover td{background:rgba(255,255,255,0.02)}
.st-cmp td.yes{color:var(--brand)} .st-cmp td.no{color:var(--faint)}
.st-cmp td.yes svg{width:18px;height:18px;display:inline-block}
.st-cmp__brand{background:rgba(0,229,160,0.04)}

.st-usecase{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.4rem;transition:border-color var(--t),transform var(--t)}
.st-usecase:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.st-usecase p{color:var(--muted);font-size:.94rem;margin-top:.55rem}
.st-usecase .st-pill{margin-bottom:.85rem}
.st-crumb{font-size:.8rem;color:var(--faint);margin-bottom:1.25rem}
.st-crumb a{color:var(--muted)} .st-crumb a:hover{color:var(--text)}