/* V2-only overrides: close visual match to trulioo.com/solutions/agentic.
 * Layers on top of agentic.css. Scoped under .v2 so V1/V3 are never affected.
 * Adds: serif display headings, full-bleed alternating illustration panels, dotted
 * halftone numerals with hairline rules, and a sticky scroll-driven 1-4 lifecycle.
 * Still token-only + CSP-safe (self-hosted SVGs, system serif stack - no webfont). */

/* --- system serif display stack (corporate uses a serif for headings) --- */
.v2 { --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  /* Outer content cap, matching trulioo.com (~1480px). Full-bleed sections
     (the split panels) center their content inside this instead of sprawling
     edge-to-edge on wide viewports. */
  --v2-max: 1480px; }

/* Visually-hidden but screen-reader-available (for heading-order structure). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* A non-interactive, label-only tab (the agent transcript header - not a real tab). */
.connect__tab--static { cursor: default; }
.v2 .hero__title,
.v2 .section__title,
.v2 .split-panel__title,
.v2 .pillar__name,
.v2 .step__title,
.v2 .adv h3,
.v2 .resource h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; }
.v2 .hero__title { font-weight: 600; letter-spacing: -0.015em; line-height: 1.08; max-width: 15ch; }

/* Cap display headings so they wrap like the corporate page instead of running the
   full column width. Centered section heads (which set their own max-width + auto
   margins inline) are exempted so they stay centered. */
.v2 .split-panel__title { max-width: 16ch; }
.v2 .section__title { max-width: 24ch; }
.v2 .section__head[style*="center"] .section__title,
.v2 .ctaband .section__title,
.v2 .lifecycle .section__title { max-width: none; }

/* --- hero: illustration right, coral-dot eyebrow, calm (matches corporate) --- */
.v2 .hero::before { display: none; } /* corporate hero has no gradient wash */
.v2 .hero { padding: 3.5rem 0 4rem; }
.v2 .eyebrow--crumb { color: var(--a-faint); }
.v2 .eyebrow--dot { color: var(--a-fg); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.5rem; }
.v2 .eyebrow--dot::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--t-signal-red); flex: 0 0 auto; }
.v2 .hero__ill { width: 100%; height: auto; display: block; }
.v2 .hero__ill--frame { display: grid; place-items: center; }

/* corporate hero buttons are pill-shaped */
.v2 .btn { border-radius: 999px; padding: 0.8rem 1.5rem; font-weight: 600; }
.v2 .btn--ghost { background: transparent; }

/* --- full-bleed alternating illustration panels (problem / gap) --- */
/* Each row is edge-to-edge; the illustration sits on its own baked-in color block,
   the copy on the page background. Alternate which side the illustration is on. */
.split-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: 30rem;
  /* Center the two-column band inside the site cap so it doesn't run the full
     viewport on wide screens (matches the ~1480px content column on trulioo.com). */
  max-width: var(--v2-max); margin-left: auto; margin-right: auto; }
/* Breathing room between the hero and the first split panel (the hero's trust-stack
   tower otherwise crowds "Agents Are Moving"). Only the first panel gets the gap. */
.v2 .hero + .split-panel { margin-top: clamp(3rem, 6vw, 5.5rem); }
@media (max-width: 860px) { .split-panel { grid-template-columns: 1fr; } }
.split-panel__media { position: relative; overflow: hidden; min-height: 22rem; display: block; }
.split-panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Cap the copy block so on ultra-wide viewports the text keeps a comfortable
 * reading measure instead of sprawling across the whole 50% column. Content is
 * left-aligned (natural reading position, like trulioo.com); the cap + centered
 * column keep it from stretching edge-to-edge. */
.split-panel__copy { display: flex; flex-direction: column; justify-content: center; padding: 4rem clamp(1.5rem, 5vw, 5rem); }
.split-panel__copy > * { max-width: 34rem; width: 100%; }
.split-panel__title { font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05; margin: 0 0 1.25rem; }
.split-panel__copy .prose { font-size: 1.05rem; max-width: 34rem; }
/* even rows: illustration on the LEFT, copy on the RIGHT */
.split-panel--flip .split-panel__media { order: 1; }
.split-panel--flip .split-panel__copy { order: 2; }
/* odd rows (default): copy LEFT, illustration RIGHT */
.split-panel--std .split-panel__copy { order: 1; }
.split-panel--std .split-panel__media { order: 2; }
@media (max-width: 860px) {
  /* on mobile keep illustration first, copy second, regardless of desktop side */
  .split-panel__media { order: 0 !important; }
  .split-panel__copy { order: 1 !important; padding: 2.5rem 1.5rem; }
}

/* --- dotted / halftone numerals with hairline rules (01/02/03) --- */
.v2 .pillars { gap: 2.5rem; }
.v2 .pillar { background: transparent; border: none; border-radius: 0; padding: 0; }
.v2 a.pillar:hover { transform: none; }
.v2 .pillar__rule-top { border-top: 1px solid var(--a-border-2); margin-bottom: 2rem; }
.pillar__num { height: 5.5rem; margin-bottom: 1.25rem; display: block; }
.pillar__num svg { height: 100%; width: auto; display: block; }
.pillar__num .dot { fill: var(--t-light-green); }
html.dark .pillar__num .dot { fill: var(--t-light-green); }
.v2 .pillar__name { font-size: 1.5rem; margin-bottom: 0.6rem; }
.v2 .pillar__desc { font-size: 0.98rem; line-height: 1.6; }
.v2 .pillar__rule-bot { border-top: 1px solid var(--a-border-2); margin-top: 1.5rem; padding-top: 0; }
.v2 .pillar__map { margin-top: 0.75rem; }

/* --- sticky scroll-driven 1-4 KYA lifecycle (dark band, corporate-match) --- */
.lifecycle { background: var(--a-bg-deep); color: #EAF3EF; padding: clamp(4rem, 8vw, 7rem) 0; }
.lifecycle .section__head { text-align: center; margin: 0 auto 2rem; }
.lifecycle .section__title { font-family: var(--serif); font-weight: 600; color: #fff; }
.lifecycle .section__sub { color: #B7C9C2; }
/* Two columns: steps left (with a far-left scroll-progress rail), sticky media right. */
.lc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 1rem; position: relative; }
@media (max-width: 860px) { .lc-grid { grid-template-columns: 1fr; gap: 1.5rem; } }

/* far-left vertical scroll-progress rail: a faint full track + a bright fill that
   grows with scroll (JS sets --lc-progress 0..1). Corporate has this on the left. */
.lc-steps { display: flex; flex-direction: column; position: relative; padding-left: 2.5rem; }
.lc-steps::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: rgba(183,201,194,.18); }
.lc-steps::after { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: calc(var(--lc-progress, 0) * 100%); background: var(--t-light-green); transition: height .15s linear; }
@media (max-width: 860px) { .lc-steps { padding-left: 1.5rem; } }

.lc-step { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
@media (prefers-reduced-motion: reduce) { .lc-step { min-height: 0; padding: 1.5rem 0; } }
/* the number + text fade/rise in as the step becomes active (corporate fade) */
.lc-step__num, .lc-step__title, .lc-step p { opacity: .25; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.lc-step.is-active .lc-step__num { opacity: 1; transform: none; }
.lc-step.is-active .lc-step__title { opacity: 1; transform: none; transition-delay: .08s; }
.lc-step.is-active p { opacity: .85; transform: none; transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) { .lc-step__num, .lc-step__title, .lc-step p { opacity: 1 !important; transform: none !important; } }
.lc-step__num { height: 6.5rem; margin-bottom: 1.25rem; }
.lc-step__num svg { height: 100%; width: auto; }
.lc-step__num .dot { fill: var(--t-light-green); }
.lc-step__title { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 2.4vw, 2rem); color: #EAF3EF; margin: 0 0 0.75rem; }
.lc-step p { color: #B7C9C2; font-size: 1.02rem; line-height: 1.65; max-width: 34rem; margin: 0; }

/* sticky media: matches trulioo.com/solutions/* - sticks near the top (not
 * vertically centered) with a comfortable offset so the card starts LOWER on
 * entry and settles as you scroll the steps. */
.lc-media { position: sticky; top: 6rem; align-self: start; padding-top: 2rem; }
.lc-media__frame { position: relative; aspect-ratio: 1680 / 1332; width: 100%; }
.lc-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(.98); transition: opacity .5s ease, transform .5s ease; }
.lc-media__img.is-active { opacity: 1; transform: none; }
/* On mobile / reduced-motion, don't stick; show each step's image inline instead. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .lc-media { position: static; transform: none; }
}

/* --- animated agent transcript (MCP "agent -> trulioo mcp") --- */
.term-live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8AA39C; padding-right: 0.9rem; }
.term-live .pulse { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--t-light-green); animation: sesh-pulse 1.8s ease-in-out infinite; }
.term { min-height: 11rem; }
.term-line { display: block; }
.term-out { color: #B7C9C2; }
.term .tok-b { color: var(--md-tertiary); }
/* animated: lines start hidden, JS reveals them one by one with a caret */
[data-term].is-animating .term-line { opacity: 0; }
[data-term].is-animating .term-line.shown { opacity: 1; }
[data-term].is-animating .term-line.typing::after { content: "▋"; color: var(--t-light-green); animation: sesh-blink 1s step-end infinite; margin-left: 1px; }
@media (prefers-reduced-motion: reduce) { [data-term].is-animating .term-line { opacity: 1 !important; } [data-term].is-animating .term-line.typing::after { display: none; } }

/* NOTE: the install-card / rails / raillist styles were removed 2026-08-12 when the
   "Add Trulioo to your agent" (MCP) and "Register once. Verified on every rail." (KYA)
   sections were retired - connect setup now lives on /developer#clients. */

/* NOTE: the roadmap timeline styles (.timeline / .tl-*) were removed 2026-08-03
   when showcase/roadmap.html was retired - the roadmap board moved to a separate
   internal page, which carries its own assets/site.css. */

/* Plugin/connect panel note (below the code sample in the connect tabs) */
.connect__note { margin: 0.9rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--a-muted); }

/* "Or add it to a specific client" divider between the connect card and the per-client grid */
.connect__or { text-align: center; margin: 2.5rem 0 1.5rem; font-size: 0.9rem; color: var(--a-muted); }

/* ---- MCP capability surface grid ---- */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1rem; }
@media (max-width: 900px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cap-grid { grid-template-columns: 1fr; } }
.cap { border: 1px solid var(--a-border); border-radius: 16px; padding: 1.5rem; background: var(--a-card); display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.cap:hover { border-color: color-mix(in srgb, var(--a-accent) 45%, transparent); transform: translateY(-2px); }
.cap--kya, .cap--kya:hover { border-color: color-mix(in srgb, var(--a-accent) 55%, transparent); background: color-mix(in srgb, var(--a-accent) 10%, var(--a-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--a-accent) 30%, transparent); }
.cap--kya:hover { transform: translateY(-2px); }
.cap__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.cap__ico { flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 9px;
  color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 12%, transparent); }
.cap__ico svg { width: 1.15rem; height: 1.15rem; }
.cap--kya .cap__ico { color: var(--a-accent); background: color-mix(in srgb, var(--a-accent) 20%, transparent); }
.cap__head h3 { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0; flex: 1; }
.cap__tag { font: 700 10px ui-monospace, Menlo, monospace; letter-spacing: .08em; color: var(--a-muted); border: 1px solid var(--a-border-2); border-radius: 999px; padding: 2px 8px; }
.cap__tag--kya { color: var(--a-accent); border-color: color-mix(in srgb, var(--a-accent) 45%, transparent); background: color-mix(in srgb, var(--a-accent) 12%, transparent); }
.cap__desc { color: var(--a-muted); font-size: .93rem; line-height: 1.55; margin: 0 0 1rem; }
.cap__tools { list-style: none; margin: auto 0 0; padding: .9rem 0 0; border-top: 1px solid var(--a-border-2); display: flex; flex-wrap: wrap; gap: .4rem; }
.cap__tools li { font: 11px ui-monospace, Menlo, monospace; color: var(--a-fg); background: var(--a-bg-alt, var(--md-surface-container)); border-radius: 5px; padding: .2rem .45rem; }
.cap-note { text-align: center; max-width: 44rem; margin: 2rem auto 0; font-size: .9rem; color: var(--a-muted); }
.cap-note code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: var(--a-bg-alt, var(--md-surface-container)); border-radius: 4px; padding: .05em .35em; }

/* ---- agentic-infrastructure fit ---- */
.infra-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.25rem 3rem; margin-top: 1rem; max-width: 60rem; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .infra-grid { grid-template-columns: 1fr; } }
.infra h3 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 0 0 .6rem; }
.infra p { color: var(--a-muted); font-size: .96rem; line-height: 1.6; margin: 0; }
.infra code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: var(--a-bg-alt, var(--md-surface-container)); border-radius: 4px; padding: .05em .35em; }

/* ==========================================================================
   KYA strategy sections (ported from gallery agentai-concepts "editorial"):
   offerings grid, dual-trust framework, and DAP attributes. Uses the showcase
   --a-* token set so all three flip correctly in light/dark. The featured card
   and dark framework column use --a-bg-deep so ink stays legible in both modes.
   ========================================================================== */

/* ---- offerings: three cards, middle featured ---- */
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1rem; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: 1fr; } }
.offer { background: var(--a-card, var(--md-surface)); border: 1px solid var(--a-border); border-radius: 16px; padding: 1.9rem 1.75rem; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
.offer:hover { transform: translateY(-3px); box-shadow: var(--md-elevation-2, 0 8px 24px rgba(0,0,0,.08)); border-color: var(--a-border-2); }
.offer--featured { background: var(--a-bg-deep); border-color: transparent; color: #EAF3EF; }
.offer__n { font: 13px/1 ui-monospace, Menlo, monospace; color: var(--a-faint); letter-spacing: .1em; }
.offer--featured .offer__n { color: #9DB5AE; }
.offer__kicker { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--a-accent); display: block; margin: .85rem 0 .35rem; }
.offer--featured .offer__kicker { color: #A7EDC0; }
.offer h3 { font-family: var(--serif); font-weight: 600; font-size: 1.4rem; margin: .2rem 0 .6rem; }
.offer--featured h3 { color: #F4FAF7; }
.offer p { color: var(--a-muted); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; }
.offer--featured p { color: #CFE0D9; }
.offer ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .5rem; }
.offer li { font-size: .9rem; position: relative; padding-left: 1.35rem; color: var(--a-fg); }
.offer--featured li { color: #EAF3EF; }
.offer li::before { content: "\2192"; position: absolute; left: 0; color: var(--a-accent); }
.offer--featured li::before { color: #A7EDC0; }
.offer__link { margin-top: auto; text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--a-accent); }
.offer--featured .offer__link { color: #A7EDC0; }
.offer__link:hover { text-decoration: underline; }

/* ---- framework: dual columns joined by a DAP seal ---- */
.framework { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; position: relative; margin-top: 1rem; }
@media (max-width: 860px) { .framework { grid-template-columns: 1fr; } }
.framework__col { border: 1px solid var(--a-border); border-radius: 16px; padding: 2rem 1.9rem; background: var(--a-card, var(--md-surface)); }
.framework__col--dark { background: var(--a-bg-deep); color: #EAF3EF; border-color: transparent; }
.framework__kicker { font: 600 11px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--a-accent); display: block; margin: 0 0 .4rem; }
.framework__col--dark .framework__kicker { color: #A7EDC0; }
.framework__col h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: .2rem 0 1rem; }
.framework__col--dark h3 { color: #F4FAF7; }
.framework__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.framework__col li { padding-left: 1.6rem; position: relative; font-size: .95rem; color: var(--a-fg); }
.framework__col--dark li { color: #EAF3EF; }
.framework__col li::before { content: "\2713"; position: absolute; left: 0; color: var(--a-accent); font-weight: 700; }
.framework__col--dark li::before { color: #A7EDC0; }
.framework__seal { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 4rem; height: 4rem; border-radius: 50%; background: #A7EDC0; color: #0A1413; display: grid; place-items: center; font: 700 15px/1 ui-monospace, Menlo, monospace; box-shadow: var(--md-elevation-3, 0 10px 30px rgba(0,0,0,.25)); z-index: 2; }
@media (max-width: 860px) { .framework__seal { position: static; transform: none; margin: -.35rem auto; } }

/* ---- DAP attributes: copy left, stacked cards right ---- */
.dapx { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; margin-top: 1rem; }
@media (max-width: 860px) { .dapx { grid-template-columns: 1fr; gap: 1.5rem; } }
.dapx__list { display: grid; gap: .9rem; }
.dapx__item { border: 1px solid var(--a-border); border-radius: 14px; padding: 1.15rem 1.35rem; background: var(--a-card, var(--md-surface)); }
.dapx__item h3 { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; margin: 0 0 .3rem; }
.dapx__item p { color: var(--a-muted); font-size: .92rem; line-height: 1.55; margin: 0; }

/* Wider content wraps for the intro + framework bands (were cramped at 860px). */
.v2 .wrap--mid { max-width: 900px; }
.v2 .wrap--framework { max-width: 1080px; }
/* The intro "Identity infrastructure" copy read too narrow (36rem prose in an
   860px wrap). Let it breathe out to the mid wrap and lift the title cap. */
.v2 .wrap--mid .prose { max-width: 52rem; }
.v2 .wrap--mid .section__title { max-width: none; }

/* ============================================================================
 * Hero "trust stack" - a hover-to-explore 3D layered tower (surface -> foundation),
 * inspired by the layered-mission interaction pattern, re-skinned in the Trulioo
 * green ramp. Replaces the static head illustration in the hero. Pure CSS 3D +
 * a small pointer handler (agentic-v2.js). Tokens are the site's --a-* layer.
 * ========================================================================== */
.v2 .stack-viz { display: flex; flex-direction: column; align-items: center; gap: clamp(4px,1vw,10px); width: 100%; user-select: none; }
.v2 .stack-scene { --w: clamp(116px,12vw,150px); --h: 18px; --g: 24px; width: 100%; position: relative; min-height: clamp(330px,35vw,410px); display: flex; align-items: center; justify-content: center; perspective: 1300px; }
.v2 .stack-rotor { position: relative; width: var(--w); height: var(--w); transform-style: preserve-3d; transform: translateY(53px) rotateX(56deg) rotateZ(-42deg); }
.v2 .stack-layer { position: absolute; inset: 0; transform-style: preserve-3d; --k: 0; --sp: 25px;
  transform: translateZ(calc(var(--i) * (var(--h) + var(--g)) + var(--k) * var(--sp))); transition: transform .5s cubic-bezier(.2,.85,.25,1);
  border: 0; padding: 0; margin: 0; background: none; outline: none; pointer-events: none; }
/* bottom -> top : deep brand green foundation -> light-green surface */
.v2 .stack-layer:nth-child(1) { --c: #013A34; }
.v2 .stack-layer:nth-child(2) { --c: #17685C; }
.v2 .stack-layer:nth-child(3) { --c: #5B9E88; }
.v2 .stack-layer:nth-child(4) { --c: #A4DCB4; }
.v2 .sf { position: absolute; display: block; pointer-events: auto; cursor: pointer; transition: filter .3s ease; }
.v2 .sf-top { inset: 0; transform: translateZ(var(--h)); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 86%, #fff), var(--c)); }
.v2 .sf-fr { left: 0; top: 100%; width: 100%; height: var(--h); transform-origin: top; transform: rotateX(90deg); background: color-mix(in srgb, var(--c) 72%, #000); }
.v2 .sf-bk { left: 0; bottom: 100%; width: 100%; height: var(--h); transform-origin: bottom; transform: rotateX(-90deg); background: color-mix(in srgb, var(--c) 72%, #000); }
.v2 .sf-rt { top: 0; left: 100%; width: var(--h); height: 100%; transform-origin: left; transform: rotateY(-90deg); background: color-mix(in srgb, var(--c) 60%, #000); }
.v2 .sf-lf { top: 0; right: 100%; width: var(--h); height: 100%; transform-origin: right; transform: rotateY(90deg); background: color-mix(in srgb, var(--c) 60%, #000); }
.v2 .stack-viz.is-hovering .stack-layer:not(.is-active) .sf { filter: saturate(.65) brightness(.9); opacity: .55; }
.v2 .stack-viz.is-hovering .stack-layer.is-active .sf-top { filter: brightness(1.08); }
.v2 .stack-labels { position: absolute; inset: 0; pointer-events: none; }
.v2 .stack-label { position: absolute; left: calc(50% + var(--w) * .72 + 16px); transform: translateY(-50%); display: flex; align-items: flex-start; gap: 12px; color: var(--a-muted); transition: opacity .3s ease; }
.v2 .stack-label-line { flex: none; width: 20px; height: 2px; margin-top: 7px; border-radius: 2px; background: var(--a-accent); }
.v2 .stack-label-text { position: relative; }
.v2 .stack-label-title { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--a-fg); }
.v2 .stack-label-desc { position: absolute; top: calc(100% + 9px); left: 0; width: 26ch; font-weight: 400; font-size: .9rem; line-height: 1.55; color: var(--a-faint); opacity: 0; transform: translateY(-3px); transition: opacity .3s ease, transform .3s ease; }
.v2 .stack-label:nth-child(1) { top: calc(50% - 70px); }
.v2 .stack-label:nth-child(2) { top: calc(50% - 35px); }
.v2 .stack-label:nth-child(3) { top: calc(50%); }
.v2 .stack-label:nth-child(4) { top: calc(50% + 35px); }
.v2 .stack-viz.is-hovering .stack-label { opacity: 0; }
.v2 .stack-viz.is-hovering .stack-label.is-active { opacity: 1; }
.v2 .stack-label.is-active .stack-label-desc { opacity: 1; transform: none; }
.v2 .stack-foot { display: grid; place-items: start center; width: 100%; min-height: 3em; margin-top: 8px; }
.v2 .stack-cta { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--a-border); border-radius: 999px; background: color-mix(in srgb, var(--a-accent) 6%, transparent); font-size: .82rem; font-weight: 500; color: var(--a-muted); white-space: nowrap; transition: opacity .35s ease; }
.v2 .stack-cta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a-accent); animation: stackPulse 2.2s ease-in-out infinite; }
.v2 .stack-viz.is-hovering .stack-cta { opacity: 0; }
@keyframes stackPulse { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 900px), (hover: none) {
  .v2 .stack-scene { pointer-events: none; flex-direction: column; justify-content: flex-start; min-height: 0; }
  .v2 .stack-rotor { flex: none; width: var(--w); height: var(--w); margin: 72px auto clamp(60px,14vw,92px); transform: translateY(30px) rotateX(56deg) rotateZ(-42deg); }
  .v2 .stack-foot { display: none; }
  .v2 .stack-labels { position: static; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: clamp(18px,4vw,24px); counter-reset: stacklbl; margin: 0 auto; }
  .v2 .stack-label, .v2 .stack-viz.is-hovering .stack-label { position: static; transform: none; opacity: 1; }
  .v2 .stack-label-line { display: none; }
  .v2 .stack-label-title::before { counter-increment: stacklbl; content: counter(stacklbl) ". "; }
  .v2 .stack-label-desc { position: static; width: auto; max-width: none; margin-top: 6px; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .v2 .stack-cta-dot { animation: none; } }