/*
 * Homepage — scroll story built on the tokens in styles.css (loaded first).
 * One visual language: a fragmented liquidity graph that changes state as the story moves.
 * Adds only status colours; everything else reuses the existing theme.
 */
.v2 {
  --watch: #c27c0e;
  --watch-ink: #7a4f00;
  --watch-soft: #fff4dc;
  --bad-ink: #a5301f;
  --bad-soft: #fdecea;
  --good-ink: #00695d;
  --good-soft: #e3f5f1;
  --flow: #03a0e1;
  --panel-top: 96px;
}

/* Shared copy pieces */
.kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.kicker-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--brand-gradient); }
.v2-title { font-size: clamp(42px, 4.9vw, 72px); margin-bottom: 28px; }
.v2-title-2 { display: block; color: var(--primary); }
.muted-line { display: block; color: var(--muted); }
.step-line { font-family: var(--display); font-size: clamp(24px, 2.3vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; color: var(--navy); text-wrap: balance; }
.step-line-muted { color: var(--muted); margin-bottom: 8px; }
.note-line { font-size: 14px; line-height: 1.55; color: var(--muted); }
.hero-cta { margin-top: 36px; }
/* Market Scan entry: opens scan.lyqui.io with the token prefilled. */
.scan-entry { display: flex; gap: 10px; margin-top: 32px; max-width: 580px; }
.scan-entry input { flex: 1; min-width: 0; min-height: 56px; padding: 14px 20px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: var(--navy); font-family: var(--mono); font-size: 16px; letter-spacing: 0.02em; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.scan-entry input::placeholder { color: #86939e; font-family: var(--sans); letter-spacing: 0; }
.scan-entry input:hover { border-color: #9fadb9; }
.scan-entry input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.scan-entry .btn { flex: none; }
.scan-note { margin-top: 14px; font-size: 14px; color: var(--muted); }
.scan-note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }

/* Story layout: steps on the left, sticky graph on the right (desktop) */
.story { position: relative; }
.story-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.story-steps { grid-column: 1 / span 5; }
.story-panel { display: none; }
.v2 main [id] { scroll-margin-top: 72px; }
.step { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 40px 0; }
.step .body { max-width: 460px; }

/* Scene 2 questions */
.questions { display: flex; flex-direction: column; gap: 0; counter-reset: q; }
.questions li { counter-increment: q; display: grid; grid-template-columns: 36px 1fr; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); font-size: clamp(19px, 1.6vw, 22px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.questions li:last-child { border-bottom: 1px solid var(--line); }
.questions li::before { content: counter(q, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--primary); }

/* Scene 3 loop */
.loop-steps { display: flex; flex-direction: column; }
.loop-steps .step { gap: 8px; padding: 28px 0 28px 20px; border-left: 2px solid var(--line); }
.loop-word { font-family: var(--mono); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }

/* Scene 4 case */
.case-list { display: flex; flex-direction: column; }
.case-card { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.case-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case-time { font-family: var(--mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }
.case-msg { font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--navy); }
.case-verdict { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.case-verdict strong { font-weight: 600; color: var(--navy); }
.case-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.case-metrics > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface); }
.case-metric-wide { grid-column: 1 / -1; }
.case-metrics dt, .case-notes dt { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.case-metrics dd { font-family: var(--mono); font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--navy); }
.case-notes { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.case-notes > div { display: flex; flex-direction: column; gap: 4px; }
.case-notes dd { font-size: 15px; line-height: 1.5; color: var(--navy); }
.state-badge { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.state-badge::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.tone-normal { background: var(--surface); color: var(--ink-2); }
.tone-watch { background: var(--watch-soft); color: var(--watch-ink); }
.tone-bad { background: var(--bad-soft); color: var(--bad-ink); }
.tone-good { background: var(--good-soft); color: var(--good-ink); }

/* Graph card (desktop panel, snapshots and the closing graph) */
.graph-card { display: flex; flex-direction: column; height: 100%; padding: 20px 22px 16px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-2); }
.graph-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.graph-stage { position: relative; flex: 1; min-height: 0; }
.graph-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
.graph-caption { margin-top: 8px; font-size: 11px; text-align: right; }
.loop-chips { display: flex; flex-wrap: wrap; gap: 4px; opacity: 0; transition: opacity 400ms var(--ease); }
.loop-chips.is-on { opacity: 1; }
.loop-chips li { padding: 4px 10px; border-radius: 999px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); transition: background-color 300ms var(--ease), color 300ms var(--ease); }
.loop-chips li.is-active { background: var(--primary-container); color: var(--on-primary-container); }
.graph-hud { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.graph-hud .case-time { font-size: 15px; }

/* SVG graph */
.g-world { transition: transform 1100ms var(--ease); }
.g-edge { fill: none; stroke: var(--line-strong); stroke-width: 1; transition: stroke 500ms var(--ease), opacity 500ms var(--ease); }
.g-flow { fill: none; stroke: var(--flow); stroke-linecap: round; stroke-dasharray: 0.5 11; transition: stroke-width 700ms var(--ease), opacity 700ms var(--ease), stroke 500ms var(--ease); }
.g-link.is-weak .g-edge { stroke: var(--watch); stroke-dasharray: 3 5; }
.g-link.is-weak .g-flow { stroke: var(--watch); }
.g-link.is-hidden, .g-node.is-hidden { opacity: 0; }
.g-link, .g-node { transition: opacity 700ms var(--ease); }
.g-node .core { fill: var(--navy); transition: fill 500ms var(--ease); }
.g-node .halo { fill: var(--navy); opacity: 0.08; transition: fill 500ms var(--ease), opacity 500ms var(--ease); }
.g-node .scan { fill: none; stroke: var(--primary); stroke-width: 1.2; opacity: 0; transition: opacity 500ms var(--ease); }
.g-node.is-scanned .scan { opacity: 0.7; }
.g-node .kind { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; fill: var(--muted); text-anchor: middle; }
.g-node .name { font-family: var(--sans); font-size: 12.5px; font-weight: 500; fill: var(--navy); text-anchor: middle; }
.g-node .bal-track { fill: var(--surface-2); transition: opacity 500ms var(--ease); }
.g-node .bal { fill: var(--primary); transition: width 800ms var(--ease), x 800ms var(--ease), opacity 500ms var(--ease); }
.g-node.no-bal .bal, .g-node.no-bal .bal-track { opacity: 0; }
.g-node .tag { opacity: 0; transition: opacity 500ms var(--ease); }
.g-node.has-tag .tag { opacity: 1; }
.g-node .tag rect { fill: var(--surface); stroke: var(--line); }
.g-node .tag text { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.02em; fill: var(--ink-2); text-anchor: middle; }
.g-node.is-watch .core, .g-node.is-watch .halo { fill: var(--watch); }
.g-node.is-bad .core, .g-node.is-bad .halo { fill: var(--bad); }
.g-node.is-good .core, .g-node.is-good .halo { fill: var(--good); }
.g-node.is-watch .halo, .g-node.is-bad .halo, .g-node.is-good .halo { opacity: 0.16; }
.g-node.is-watch .tag rect { fill: var(--watch-soft); stroke: rgba(194, 124, 14, 0.35); }
.g-node.is-watch .tag text { fill: var(--watch-ink); }
.g-node.is-bad .tag rect { fill: var(--bad-soft); stroke: rgba(192, 57, 43, 0.3); }
.g-node.is-bad .tag text { fill: var(--bad-ink); }
.g-node.is-good .tag rect { fill: var(--good-soft); stroke: rgba(0, 121, 107, 0.3); }
.g-node.is-good .tag text { fill: var(--good-ink); }
.g-node.is-dim { opacity: 0.4; }
.g-rec { fill: none; stroke: var(--primary); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: 0; transition: opacity 500ms var(--ease); }
.g-rec.is-on { opacity: 0.9; }
.g-layer { opacity: 0; transition: opacity 800ms var(--ease); }
.g-layer.is-on { opacity: 1; }
.g-layer rect { fill: rgba(3, 181, 239, 0.035); stroke: var(--primary); stroke-opacity: 0.35; stroke-dasharray: 2 6; }
.g-layer text { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.1em; fill: var(--primary); }

/* Larger labels for phone snapshots (sizes are in view-box units) */
.is-large .g-node .kind { font-size: 14.5px; }
.is-large .g-node .name { font-size: 19px; }
.is-large .g-node .tag text { font-size: 15.5px; }
.is-large .g-layer text { font-size: 15px; }
.is-large .g-edge { stroke-width: 1.5; }

/* Flow motion: dots travel along each link. Off for reduced motion or when the graph is off screen. */
@media (prefers-reduced-motion: no-preference) {
  .g-flow { animation: v2-flow 2.2s linear infinite; }
  .is-paused .g-flow, .is-paused .scan { animation-play-state: paused; }
  .g-node.is-scanned .scan { animation: v2-scan 2.4s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
  .js .questions li { transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
}
@keyframes v2-flow { to { stroke-dashoffset: -23; } }
@keyframes v2-scan { 0% { transform: scale(0.7); opacity: 0.8; } 100% { transform: scale(1.35); opacity: 0; } }

/* Snapshots stand in for the sticky panel on smaller screens */
.snap { display: none; }
.snap figcaption { font-size: 10px; margin-top: 6px; text-align: right; }

/* Scene 5 */
.modes { padding-top: 136px; }
.modes-head { max-width: 760px; margin-bottom: 48px; }
.modes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px; border-radius: var(--radius-xl); background: var(--surface); scroll-margin-top: 96px; }
.mode-b { background: var(--primary-container); }
.mode-label { color: var(--primary); }
.mode h3 { font-family: var(--display); font-size: clamp(26px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
.mode .body { color: var(--ink-2); max-width: 480px; }
.mode .btn { margin-top: auto; }
.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; }
.pipeline li { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--navy); }
.pipeline li + li::before { content: ""; width: 18px; height: 1px; margin: 0 8px; background: var(--line-strong); }
.pipeline li.is-exec span { padding: 3px 10px; border-radius: 999px; background: var(--navy); color: #fff; }
.modes-close { margin-top: 40px; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; color: var(--navy); }

/* Scene 6 */
.origin { margin: 0 16px; border-radius: var(--radius-xl); background: var(--surface); }
.origin-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 24px; }
.origin-head { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; align-self: start; position: sticky; top: var(--panel-top); }
.origin-list { grid-column: 7 / span 6; display: flex; flex-direction: column; }
.origin-list li { padding: 22px 0; border-bottom: 1px solid var(--line-strong); font-family: var(--display); font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; color: var(--navy); }
.origin-list li:first-child { border-top: 1px solid var(--line-strong); }
.origin-close { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 16px; margin-top: 48px; }
.js .origin-list .reveal:nth-child(2) { transition-delay: 60ms; }
.js .origin-list .reveal:nth-child(3) { transition-delay: 120ms; }

/* Scene 7 */
.story-b { margin-top: 64px; }
.scope-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.scope-tags li { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }

/* Scene 8 */
.judgment-head { display: flex; flex-direction: column; gap: 20px; max-width: 760px; margin-bottom: 48px; }
.roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.roles li { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-top: 2px solid var(--navy); }
.roles li:nth-child(2) { border-top-color: var(--primary); }
.roles li:nth-child(3) { border-top-color: var(--teal-ink); }
.roles .mono { color: var(--navy); }
.roles p { font-family: var(--display); font-size: clamp(20px, 1.8vw, 24px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.judgment-close { margin-top: 40px; font-size: 17px; color: var(--muted); }

/* Scene 9 — deliberately slower */
.trust { margin: 0 16px; border-radius: var(--radius-xl); background: var(--surface); padding: 144px 0; }
.trust-head { max-width: 760px; margin-bottom: 64px; }
.principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; }
.principles > div { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line-strong); }
.principles dt { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.principles dd { font-size: 19px; line-height: 1.5; color: var(--navy); max-width: 440px; }
.trust-close { margin-top: 72px; max-width: 640px; font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.3; color: var(--navy); }
.js .trust .reveal { transition-duration: 1400ms; }

/* Scene 10 */
.resolve { padding-bottom: 128px; }
.resolve-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: center; }
.resolve-copy { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 24px; }
.resolve-title { font-size: clamp(38px, 4.4vw, 64px); }
.resolve-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.resolve-micro { font-size: 14px; color: var(--muted); }
.resolve-graph { grid-column: 7 / span 6; display: flex; flex-direction: column; }
.resolve-graph .graph-stage { aspect-ratio: 640 / 560; }
.no-js .resolve-graph { display: none; }

/* Desktop: sticky panel, dimmed inactive steps */
@media (min-width: 1024px) {
  .js .story-panel { display: block; grid-column: 7 / span 6; position: sticky; top: var(--panel-top); align-self: start; height: min(calc(100vh - var(--panel-top) - 24px), 680px); }
  .story-grid > .story-steps { grid-row: 1; }
  .js .story-panel { grid-row: 1; }
  .step { min-height: 70vh; }
  .step-short { min-height: 38vh; }
  .step-hero { min-height: calc(100vh - 72px); padding-top: 24px; }
  .case-step { min-height: 64vh; }
  .js .story .questions li { opacity: 0; transform: translateY(8px); }
  .js .story .step.is-seen .questions li { opacity: 1; transform: none; }
  .js .story .step.is-seen .questions li:nth-child(2) { transition-delay: 180ms; }
  .js .story .step.is-seen .questions li:nth-child(3) { transition-delay: 360ms; }
  .js .story .step.is-seen .questions li:nth-child(4) { transition-delay: 540ms; }
  .loop-steps .step.is-active { border-left-color: var(--primary); }
}

/* Tablet and phone: sequential cards with graph snapshots */
@media (max-width: 1023px) {
  .story-steps { grid-column: 1 / -1; }
  .step { padding: 32px 0; }
  .step-hero { padding-top: 56px; }
  .js .snap { display: block; margin-top: 8px; }
  .snap .graph-stage { aspect-ratio: 640 / 560; }
  .snap { max-width: 560px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
  .case-list { gap: 16px; }
  .case-step { padding: 20px; border-radius: var(--radius-lg); background: var(--surface); }
  .case-step .case-card { border: 0; padding: 0; background: none; }
  .case-step .case-metrics > div { background: #fff; }
  .case-step .snap { margin-top: 16px; }
  .loop-steps .step { padding: 16px 0 16px 18px; }
  .modes-grid, .roles, .principles { grid-template-columns: 1fr; }
  .origin-head, .origin-list, .origin-close, .resolve-copy, .resolve-graph { grid-column: 1 / -1; }
  .origin-head { position: static; }
  .origin-list { margin-top: 16px; }
  .resolve-graph { margin-top: 24px; max-width: 560px; }
}

@media (max-width: 767px) {
  .v2 { --panel-top: 80px; }
  .v2-title { font-size: clamp(36px, 10vw, 48px); }
  .kicker { margin-bottom: 20px; font-size: 11px; }
  .hero-cta .btn { width: 100%; }
  .scan-entry { flex-direction: column; }
  .scan-entry .btn { width: 100%; }
  .step-line { font-size: 22px; }
  .case-time { font-size: 19px; }
  .case-msg { font-size: 17px; }
  .modes { padding-top: 72px; }
  .mode { padding: 24px 20px; border-radius: var(--radius-lg); }
  .mode .btn { width: 100%; white-space: normal; height: auto; min-height: 48px; }
  .origin, .trust { margin: 0 8px; border-radius: var(--radius-lg); }
  .trust { padding: 72px 0; }
  .trust-head { margin-bottom: 40px; }
  .principles { gap: 28px; }
  .principles dd { font-size: 17px; }
  .trust-close { margin-top: 48px; }
  .roles li { padding: 20px 0 8px; }
  .resolve { padding-bottom: 72px; }
  .resolve-actions { flex-direction: column; align-items: stretch; }
  .resolve-actions .btn { height: 52px; }
  .nav-cta-mobile { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-world, .g-edge, .g-flow, .g-link, .g-node, .g-node *, .g-rec, .g-layer, .loop-chips, .loop-chips li { transition: none; }
  .js .trust .reveal { transition: none; }
}

/*
 * Footer disclosures — a short always-visible statement plus native details/summary for the
 * longer service and risk copy. Scoped to the homepage footer; the rest of the footer keeps the
 * shared styles in styles.css.
 */
.v2 .footer-disclosures { display: flex; flex-direction: column; gap: 14px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.v2 .footer-disclosure-lede { max-width: 74ch; font-size: 14px; line-height: 1.7; color: var(--ink-2); overflow-wrap: break-word; text-wrap: pretty; }
.v2 .footer-disclosure > summary { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; padding: 4px 0; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--on-primary-container); cursor: pointer; list-style: none; }
.v2 .footer-disclosure > summary::-webkit-details-marker { display: none; }
.v2 .footer-disclosure > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin-bottom: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease); }
.v2 .footer-disclosure[open] > summary::before { transform: rotate(-135deg); margin-bottom: 0; }
.v2 .footer-disclosure > summary:hover { color: var(--primary-hover); text-decoration: underline; text-underline-offset: 3px; }
.v2 .footer-disclosure > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }
.v2 .footer-disclosure-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 48px; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line); }
.v2 .footer-disclosure-body > div { display: flex; flex-direction: column; gap: 6px; max-width: 62ch; }
.v2 .footer-disclosure-body dt { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--navy); }
.v2 .footer-disclosure-body dd { font-size: 14px; line-height: 1.7; color: var(--muted); overflow-wrap: break-word; text-wrap: pretty; }

@media (max-width: 860px) {
  .v2 .footer-disclosure-body { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 767px) {
  .v2 .footer-disclosures { margin-top: 32px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 .footer-disclosure > summary::before { transition: none; }
}