/* Homepage chapters. Evidence remains fully rendered before enhancement. */
.home-experience { --chapter-space: clamp(72px, 8vw, 112px); }
.home-experience h2 { font-size: clamp(2.125rem, 3.7vw, 3.4rem); letter-spacing: -.035em; line-height: 1.06; }
.home-experience .lede { font-size: 1.0625rem; line-height: 1.65; }
.experience-hero { padding-top: clamp(24px, 4vw, 56px); position: relative; }
@media (min-width: 960px) {
  .experience-hero { min-height: calc(100svh - var(--header-height) - 1px); display: flex; flex-direction: column; }
  .experience-hero .hero-grid { flex: 1; }
  .experience-hero .hero-endnote { flex: none; }
}
@media (min-width: 1600px) {
  body:has(.home-experience) { --frame: 1480px; }
  .home-experience .lede { font-size: 1.1875rem; }
  .experience-hero .hero-grid { gap: 48px; }
}
.experience-hero .hero-grid { gap: 32px; align-items: center; }
.experience-hero .hero-copy { padding-top: 0; }
.experience-hero h1 { font-size: clamp(2.8rem, 5.1vw, 4.65rem); line-height: 1.04; letter-spacing: -.045em; }
.experience-hero h1 > span { color: var(--accent); }
.hero-category { font-size: var(--text-caption); margin-bottom: 24px; }
.hero-copy .lede { max-width: 44ch; }
.experience-hero .actions { display: grid; grid-template-columns: 1fr; width: fit-content; max-width: 100%; gap: 12px; }
/* Both hero actions share one width, set by the longer label: stacked on phones, side by side from 480px. */
@media (min-width: 480px) { .experience-hero .actions { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 16px; } }
/* Over the hero artwork the secondary button keeps a surface behind its label, as its hover state does everywhere. */
.experience-hero .actions .button-secondary { background: var(--surface); box-shadow: var(--shadow-control); }
.hero-family { max-width: 440px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.hero-family > p { margin: 0 0 14px; font: 500 var(--text-small)/1.5 var(--font-display); color: var(--ink-2); }
.hero-product-link { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 16px; padding-block: 4px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.hero-product-identity { min-width: 0; }
.hero-product-link img { display: block; width: 224px; max-width: 100%; height: auto; }
.hero-product-link .psychdoc-logo-dark { display: none; }
[data-theme='dark'] .hero-product-link .psychdoc-logo-light { display: none; }
[data-theme='dark'] .hero-product-link .psychdoc-logo-dark { display: block; }
.hero-product-caption { display: block; margin-top: 8px; font-size: var(--text-caption); line-height: 1.5; color: var(--ink-2); }
.hero-product-link > span:last-child { justify-self: end; font-size: 1.25rem; color: var(--accent); }
.hero-product-link:hover .hero-product-caption { color: var(--accent); text-decoration: underline; text-underline-offset: 5px; }
.experience-hero .evidence-hero { border-radius: 18px; position: relative; max-width: none; box-shadow: 0 24px 80px -32px rgb(50 32 90 / 30%); }
.instrument-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.instrument-title-row > p { font: 500 1.25rem/1.3 var(--font-display); margin: 0; }
.experience-hero .evidence-hero-top { padding: 22px 24px 18px; }
.experience-hero .evidence-hero-top .caption { display: block; margin-top: 7px; font-size: var(--text-caption); }
.experience-hero .source-assembly { padding: 22px 24px 24px; }
.experience-hero .trial-records { gap: 4px 12px; }
.experience-hero .trial-records li { min-height: 30px; font-size: var(--text-caption); }
.experience-hero .assembly-convergence { height: 78px; }
.experience-hero .assembly-claim { padding: 18px 20px; }
.experience-hero .assembly-claim-text { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.4; }
.experience-hero .assembly-limit { font-size: var(--text-caption); line-height: 1.6; }
.experience-hero .evidence-hero-caption { padding: 16px 24px; font-size: var(--text-caption); gap: 12px; }
.trace-playback { flex: none; background: transparent; border: 1px solid var(--inst-line-strong); border-radius: 6px; color: var(--inst-ink); font: 500 var(--text-caption) var(--font-display); min-height: 44px; padding: 0 10px; cursor: pointer; }
.trace-playback:hover { background: var(--inst-surface); border-color: var(--inst-accent); }
.hero-endnote { border-top: 1px solid var(--line); margin-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 38px; font-size: var(--text-caption); color: var(--ink-3); }
.hero-endnote > a { flex: none; display: inline-flex; align-items: center; gap: 20px; min-height: 44px; text-decoration: none; color: var(--ink-2); }

.chapter-nav { background: var(--surface); border-block: 1px solid var(--line); }
.chapter-nav > div { display: flex; justify-content: space-between; gap: 24px; overflow-x: auto; }
.chapter-nav a { flex: none; display: inline-flex; align-items: center; min-height: 64px; color: var(--ink-3); font: 500 var(--text-caption) var(--font-display); text-decoration: none; border-bottom: 2px solid transparent; }
.chapter-nav a:is(:hover, [aria-current='location']) { color: var(--accent); border-bottom-color: var(--accent); }
.experience-chapter { padding-block: var(--chapter-space); border-bottom: 1px solid var(--line); }
.chapter-label { display: flex; align-items: center; gap: 14px; color: var(--ink-2); font: 600 1.125rem var(--font-display); margin: 0 0 32px; padding-bottom: 18px; border-bottom: 1px solid var(--chapter-line); }
.chapter-label > span { color: var(--accent); font-variant-numeric: tabular-nums; font-size: 2.5rem; font-weight: 500; line-height: 1; letter-spacing: -.04em; padding-right: 8px; }
.chapter-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.chapter-intro { padding-top: 16px; }
.chapter-intro .lede { margin-top: 24px; max-width: 33ch; }
.chapter-aside { margin-top: 40px; font-size: var(--text-caption); color: var(--ink-3); padding-left: 16px; border-left: 2px solid var(--chapter-line); }
.chapter-evidence { background: var(--surface); }
.evidence-guide { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.guide-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 18px 24px; font-size: var(--text-caption); color: var(--ink-2); }
.record-status { color: var(--accent); }
.guide-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); padding-inline: 12px; }
.guide-tabs > a { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 58px; padding: 8px; text-decoration: none; color: var(--ink-2); font: 500 var(--text-caption) var(--font-display); border-bottom: 2px solid transparent; }
.guide-tabs > a > span { color: var(--ink-2); font-size: var(--text-caption); }
.guide-tabs > a[aria-selected='true'] { color: var(--ink); background: var(--surface); border-bottom-color: var(--accent); }
.guide-tabs > a:hover { color: var(--ink); }
.guide-panels { display: grid; }
.guide-panels > section { padding: 30px; min-width: 0; }
.guide-panels > section[role='tabpanel'] { grid-area: 1 / 1; }
/* Keep all three intrinsic sizes in the same grid track without exposing hidden controls. */
.guide-panels > section[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.guide-panels .label { font-size: var(--text-caption); margin-bottom: 10px; }
.guide-panels h3 { font-size: 1.5rem; margin-bottom: 22px; }
.guide-claim { font: 400 1.1875rem/1.6 var(--font-display); color: var(--ink); }
.guide-boundary { border-left: 2px solid var(--copper); padding-left: 16px; color: var(--ink-2); font-size: var(--text-caption); line-height: 1.7; margin: 24px 0; }
.guide-boundary strong { color: var(--ink); display: block; margin-bottom: 8px; }
.guide-panels .text-link { font-size: var(--text-caption); min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.guide-foot { display: flex; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 16px 24px; color: var(--ink-2); font-size: var(--text-caption); }
.guide-foot a { color: var(--accent); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
.guide-foot > span { align-self: center; max-width: 36ch; }
.guide-sources { list-style: none; margin-bottom: 18px; }
.guide-sources li { border-bottom: 1px solid var(--line); }
.guide-sources summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding-block: 12px; color: var(--ink); font-size: var(--text-caption); line-height: 1.5; cursor: pointer; list-style: none; }
.guide-sources summary::-webkit-details-marker { display: none; }
.guide-sources summary > span { flex: none; color: var(--accent); font-size: 1.25rem; }
.guide-sources details[open] summary > span { transform: rotate(45deg); }
.guide-sources details > p { color: var(--ink-2); font-size: var(--text-caption); overflow-wrap: anywhere; }
.guide-sources details > a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-caption); }
.full-map { margin-top: 56px; border-top: 1px solid var(--line-strong); }
.full-map .evidence-map-section { padding-top: 48px; }
.full-map .evidence-map-section > .wrap { width: 100%; }
.full-map h2 { font-size: 2rem; }

.chapter-method { background: var(--chapter-bg); border-color: var(--chapter-line); }
.chapter-heading { max-width: 700px; }
.chapter-heading .lede { max-width: 48ch; margin-top: 24px; }
.method-explorer { margin-top: 52px; }
.method-controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 20px; color: var(--ink-3); font-size: var(--text-caption); }
[data-playback]:disabled { cursor: default; opacity: .65; }
.method-stations { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.method-stations > a { position: relative; display: grid; gap: 14px; text-decoration: none; color: var(--ink-2); padding: 10px 12px 20px; border-radius: 6px 6px 0 0; }
.method-number { font-size: var(--text-caption); font-variant-numeric: tabular-nums; }
.method-stations strong { font: 500 1.125rem var(--font-display); }
.method-dot { position: relative; display: block; height: 24px; }
.method-dot::before { content: ''; position: absolute; top: 11px; left: 0; right: -24px; height: 1px; background: var(--chapter-line); }
.method-dot::after { content: ''; position: absolute; top: 6px; left: 0; height: 11px; width: 11px; background: var(--chapter-bg); border: 1.5px solid var(--line-strong); border-radius: 50%; }
.method-stations > a:last-child .method-dot::before { right: 0; }
.method-stations > a:is(:hover, [aria-selected='true']) { color: var(--accent); background: var(--surface); }
.method-stations > a[aria-selected='true'] .method-dot::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px var(--chapter-bg); }
.method-panels { display: grid; background: var(--surface); border-top: 1px solid var(--chapter-line); }
.method-panels > section { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 64px; padding: 32px; }
.method-panels > section[role='tabpanel'] { grid-area: 1 / 1; }
.method-panels > section[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
/* Phone readers should not scroll through space reserved for another tab. */
@media (max-width: 1023px) {
  .guide-panels > section[hidden], .method-panels > section[hidden] { display: none !important; }
}
.method-panels h3 { font-size: 1.6rem; max-width: 22ch; }
.method-panels .label { font-size: var(--text-caption); }
.method-panels p { font-size: var(--text-small); color: var(--ink-2); }
.method-panels a { font-size: var(--text-caption); display: inline-flex; align-items: center; min-height: 44px; gap: 10px; }
.chapter-bottomline { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; font-size: var(--text-caption); color: var(--ink-3); }

.chapter-applications { background: var(--bg); }
.product-feature { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; margin-top: 52px; padding: 48px; background: var(--surface); border-top: 2px solid var(--accent); }
.product-identity > h3 { font: 500 clamp(2.5rem, 4vw, 4rem)/1 var(--font-display); letter-spacing: -.045em; }
.product-identity > h3 > span { color: var(--accent); }
/* About, section 02: the PsychDoc wordmark stands in for the typed name; the theme picks the light or dark file. */
.product-identity > h3.product-logo { margin: 0; line-height: 0; }
.product-logo img { display: block; width: 340px; max-width: 100%; height: auto; }
.product-logo .psychdoc-logo-dark { display: none; }
[data-theme='dark'] .product-logo .psychdoc-logo-light { display: none; }
[data-theme='dark'] .product-logo .psychdoc-logo-dark { display: block; }
.product-tagline { margin-top: 12px; color: var(--ink); font: 400 1.5rem/1.35 var(--font-display); }
.product-identity > p:not(.label, .product-tagline) { color: var(--ink-2); font-size: var(--text-small); max-width: 40ch; }
.product-identity .button { margin-top: 12px; }
.product-identity > .caption { margin-top: 24px; font-size: var(--text-caption); }
.product-paths { padding-top: 8px; }
.product-paths > a { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding-block: 26px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.product-paths strong { display: block; font: 500 1.125rem/1.4 var(--font-display); }
.product-paths small { display: block; margin-top: 8px; font-size: var(--text-caption); color: var(--ink-2); line-height: 1.6; }
.product-paths > a > span:last-child { color: var(--accent); transition: transform 180ms var(--ease); }
.product-paths > a:hover > span:last-child { transform: translate(3px, -3px); }
.product-paths > a:hover strong { color: var(--accent); }
.materials-feature { display: grid; grid-template-columns: 1fr 1.6fr; gap: 32px 80px; padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--line); }
.materials-feature h3 { font-size: 1.625rem; }
.example-label { color: var(--ink-3); font-size: var(--text-caption); display: block; margin-top: 10px; }
.materials-feature h4 { font-size: 1.1875rem; line-height: 1.5; margin-bottom: 16px; max-width: 42ch; }
.materials-feature p { color: var(--ink-2); font-size: var(--text-small); }
.materials-feature .small { font-size: var(--text-caption); }
.materials-feature .text-link { font-size: var(--text-caption); display: inline-flex; align-items: center; min-height: 44px; gap: 10px; }
.chapter-connect { background: var(--chapter-bg); position: relative; overflow: hidden; }
.chapter-connect > .wrap { position: relative; }
.connect-heading { position: relative; z-index: 1; max-width: 820px; }
.chapter-connect h2 { font-size: clamp(2.375rem, 4.7vw, 4.5rem); }
.chapter-connect h2 > span { color: var(--accent); }
.chapter-connect .lede { max-width: 52ch; margin-top: 28px; }
.chapter-connect .actions { align-items: center; gap: 24px; margin-top: 32px; }
.chapter-connect .text-link { font-size: var(--text-caption); min-height: 44px; display: inline-flex; align-items: center; gap: 10px; }
.home-experience + .site-footer { margin-top: 0; border-top: 0; }

@media (min-width: 960px) {
  .experience-hero .hero-copy { grid-column: 1 / span 5; }
  .experience-hero .evidence-hero { grid-column: 6 / -1; }
}
@media (max-width: 959px) {
  .experience-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .experience-hero .hero-copy { max-width: 640px; }
  .experience-hero .evidence-hero { max-width: 720px; justify-self: center; }
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
  .chapter-intro .chapter-label { grid-column: 1 / -1; }
  .chapter-intro .lede { margin-top: 0; align-self: end; }
  .chapter-aside { display: none; }
  .product-feature { column-gap: 40px; padding: 32px; }
}
@media (max-width: 767px) {
  .hero-family { max-width: none; margin-top: 32px; padding-block: 24px; border-bottom: 1px solid var(--line); text-align: center; }
  .hero-family > p { margin-bottom: 16px; }
  .hero-product-link { width: 224px; max-width: 100%; margin-inline: auto; grid-template-columns: 1fr auto 1fr; gap: 10px 8px; }
  .hero-product-identity { display: contents; }
  .hero-product-link img { grid-column: 1 / -1; grid-row: 1; }
  .hero-product-caption { grid-column: 2; grid-row: 2; margin-top: 0; }
  .hero-product-link > span:last-child { grid-column: 3; grid-row: 2; justify-self: start; font-size: 1rem; line-height: 1.5; }
  .guide-foot a, .experience-hero .evidence-hero-caption a, .chapter-bottomline > a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-endnote { padding-block: 20px; }
  .hero-endnote > span { max-width: 25ch; }
  .chapter-nav a { min-height: 54px; }
  .chapter-intro { display: block; }
  .chapter-intro .lede { max-width: 48ch; margin-top: 24px; }
  .method-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .method-stations > a { border: 1px solid var(--chapter-line); padding: 14px; gap: 10px; }
  .method-dot { display: none; }
  .method-stations strong { font-size: 1rem; }
  .method-panels { margin-top: 16px; }
  .method-panels > section { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .product-feature { grid-template-columns: 1fr; row-gap: 32px; }
  .materials-feature { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 479px) {
  .experience-hero { padding-top: 32px; }
  .experience-hero h1 { font-size: 2.875rem; }
  .experience-hero .hero-grid { row-gap: 32px; }
  .experience-hero .evidence-hero-top, .experience-hero .source-assembly { padding: 18px; }
  .instrument-title-row { align-items: start; }
  .instrument-title-row > p { font-size: 1.0625rem; max-width: 20ch; }
  .trace-playback { min-height: 44px; }
  .experience-hero .assembly-claim { padding: 16px; }
  .experience-hero .evidence-hero-caption { padding: 16px 18px; }
  .hero-endnote { font-size: var(--text-caption); }
  .hero-endnote > a { gap: 8px; }
  .chapter-label { margin-bottom: 22px; }
  .guide-topline { padding: 16px 18px; }
  .guide-tabs { padding: 0; }
  .guide-tabs > a { gap: 4px; flex-direction: column; font-size: var(--text-caption); }
  .guide-panels > section { padding: 24px 20px; }
  .guide-panels h3 { font-size: 1.375rem; }
  .guide-claim { font-size: 1.125rem; }
  .guide-foot { padding: 16px 20px; }
  .full-map { margin-top: 32px; }
  .method-explorer { margin-top: 36px; }
  .method-panels h3 { font-size: 1.4rem; }
  .product-feature { padding: 28px 24px; margin-top: 36px; }
  .product-paths > a { padding-block: 20px; }
}
@media (max-width: 359px) {
  .experience-hero h1 { font-size: 2.5rem; }
  .experience-hero .actions { gap: 8px; }
  .experience-hero .trial-records li { font-size: var(--text-caption); }
  .guide-panels > section { padding: 22px 18px; }
}

/* One bounded source-to-claim sequence. Numeric content is never animated. */
@media (prefers-reduced-motion: no-preference) {
  [data-trace-story][data-stage='playing'] .trial-records li { animation: record-arrive 800ms both; animation-delay: calc(var(--seq) * 85ms); }
  [data-trace-story][data-stage='playing'] .assembly-line { stroke-dasharray: 1; animation: record-connect 1400ms both; animation-delay: calc(550ms + var(--seq) * 65ms); }
  [data-trace-story][data-stage='playing'] .assembly-claim { animation: claim-arrive 850ms 2200ms both; }
  [data-trace-story][data-stage='following'] .trial-records[data-played] li { animation: record-arrive 800ms both; animation-delay: calc(var(--seq) * 85ms); }
  [data-trace-story][data-stage='following'] .assembly-convergence[data-played] .assembly-line { stroke-dasharray: 1; animation: record-connect 700ms both; animation-delay: calc(var(--seq) * 20ms); }
  [data-trace-story][data-stage='following'] .assembly-claim[data-played] { animation: claim-arrive 600ms both; }
  .guide-panels > section:not([hidden])[role='tabpanel'], .method-panels > section:not([hidden])[role='tabpanel'] { animation: panel-arrive 220ms var(--ease); }
}
@keyframes record-arrive { from { opacity: .15; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes record-connect { from { stroke-dashoffset: 1; stroke-opacity: .12; } to { stroke-dashoffset: 0; stroke-opacity: .48; } }
@keyframes claim-arrive { from { border-color: var(--inst-line); } to { border-color: var(--copper); } }
@keyframes panel-arrive { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Source selection highlights membership only; position and line length encode no statistics. */
.experience-hero .trial-records { gap: 0 12px; }
.trial-records a { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; color: var(--inst-ink); text-decoration: none; border-radius: 5px; padding: 3px 6px; margin-inline: -6px; }
.trial-records a:is(:hover, :focus-visible) { background: var(--inst-surface); color: var(--inst-accent); }
.record-open { margin-left: auto; color: var(--inst-accent); font-size: var(--text-caption); }
.assembly-instruction { display: block; margin-top: 4px; font-size: var(--text-caption); color: var(--inst-ink-2); }
.assembly-line.is-highlighted { stroke: var(--copper); stroke-width: 2.75; stroke-opacity: 1; animation: none !important; }
.trial-dialog { width: min(600px, calc(100% - 32px)); max-height: calc(100svh - 48px); margin: auto; border: 1px solid var(--line-strong); border-radius: 16px; padding: 28px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 80px rgb(0 0 0 / 24%); overflow: auto; }
.trial-dialog::backdrop { background: rgb(5 8 16 / 65%); backdrop-filter: blur(5px); }
.trial-dialog form { display: flex; justify-content: end; margin-bottom: 8px; }
.trial-dialog button { font: 500 var(--text-caption) var(--font-display); min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: 6px; color: var(--ink); background: var(--surface); cursor: pointer; }
.home-experience .trial-dialog h2 { font-size: 2rem; margin: 12px 0 20px; }
.trial-dialog p { color: var(--ink-2); }
.trial-dialog dl { margin-block: 24px; }
.trial-dialog dt { font-size: var(--text-caption); color: var(--ink-3); margin-top: 16px; }
.trial-dialog dd { margin: 6px 0 0; }
.trial-dialog ul { list-style: none; }
.trial-dialog a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; color: var(--accent); }
.trial-records li:focus-within { animation: none !important; opacity: 1; }
@media (min-width: 1600px) {
  .experience-hero h1 { font-size: 5.5rem; }
  .experience-hero .assembly-claim-text { font-size: 1.375rem; }
  .experience-hero .assembly-limit, .experience-hero .trial-records li { font-size: var(--text-caption); }
}
@media (min-width: 960px) and (max-height: 950px) {
  .experience-hero { padding-top: 24px; }
  .experience-hero .hero-endnote { padding-block: 12px; }
  .experience-hero .evidence-hero-top { padding-block: 16px; }
  .experience-hero .source-assembly { padding-block: 16px; }
  .experience-hero .assembly-convergence { height: 54px; }
  .experience-hero .evidence-hero-caption { padding-block: 12px; }
}

/* Supporting copy has room to breathe at the same readable size on phones. */
.experience-hero .trial-records li { white-space: normal; }
.experience-hero .evidence-hero-caption { flex-wrap: wrap; align-items: center; }
.experience-hero .evidence-hero-caption > span { flex: none; }
@media (min-width: 600px) {
  .experience-hero .evidence-hero-caption > span { flex: 1 1 30ch; }
}
.experience-hero .evidence-hero-caption a { min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 767px) {
  .record-open { display: none; }
}
@media (max-width: 479px) {
  .method-stations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-endnote { align-items: start; flex-direction: column; gap: 8px; }
  .hero-endnote > span { max-width: 32ch; }
  .guide-foot { gap: 12px; }
}
@media (max-width: 359px) {
  .instrument-title-row { flex-wrap: wrap; gap: 12px; }
  .guide-tabs > a { padding-inline: 4px; }
}

/* Light concept: one spacious scene, built from independent artwork layers. */
.experience-hero { overflow: clip; padding-top: 0; }
.experience-hero .hero-grid { display: block; }
.hero-scene { --scene-height: 670px; position: relative; display: grid; grid-template-rows: var(--scene-height) auto; isolation: isolate; }
.experience-hero .hero-copy { grid-row: 1; grid-column: 1; position: relative; z-index: 2; padding-top: 42px; width: 79%; max-width: none; align-self: start; }
.experience-hero .hero-category { font-size: 13px; white-space: nowrap; margin-bottom: 24px; }
.experience-hero h1 { font-size: clamp(27px, 7.8vw, 42px); line-height: 1.08; letter-spacing: -.045em; text-shadow: 0 0 20px var(--bg); }
.experience-hero .hero-copy .lede { font-size: 16px; line-height: 1.6; margin-top: 24px; max-width: 28ch; width: 79%; text-shadow: 0 0 10px var(--bg), 0 0 20px var(--bg); }
.experience-hero .hero-copy .actions { margin-top: 26px; }
.experience-hero .hero-family { grid-row: 2; grid-column: 1; z-index: 2; position: relative; width: 100%; max-width: none; margin-top: 0; padding-block: 25px; border-block: 1px solid var(--line); text-align: center; }
.experience-hero .hero-product-link { margin-inline: auto; }
.experience-hero .evidence-hero { width: 100%; max-width: 960px; margin: 36px auto 0; }
.violema-hero-art { position: absolute; z-index: 0; inset: 0 -16px auto; height: var(--scene-height); pointer-events: none; user-select: none; }
.violema-hero-art > div, .violema-hero-art > svg, .violema-hero-art > span { position: absolute; }
.violema-hero-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.vha-atmosphere { inset: 0; background: radial-gradient(ellipse at 90% 40%, rgb(189 169 234 / 15%), transparent 45%); }
.vha-network { width: 100%; height: 70%; right: -20%; top: 8%; opacity: .4; mask-image: linear-gradient(to right, transparent, #000 65%); }
.vha-diagrams { width: 80%; height: 65%; right: -14%; top: 15%; opacity: .42; }
.vha-earth { width: 145%; height: 310px; left: -28%; bottom: -10px; mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }
.vha-earth img { object-fit: fill; }
.vha-dna { width: 250px; height: 550px; right: -55px; top: -8px; opacity: .72; transform: rotate(5deg); mask-image: linear-gradient(transparent, #000 9%, #000 88%, transparent); }
.vha-dna img { object-fit: fill; }
.vha-handaxe { width: 44%; height: 300px; right: 1%; top: 140px; filter: drop-shadow(8px 12px 18px rgb(77 51 24 / 9%)); }
.vha-orbit { width: 60%; height: 430px; right: -9%; top: 75px; color: #9990a7; opacity: .35; }
.vha-formula { display: flex; align-items: center; gap: 5px; font-family: Georgia, serif; font-style: italic; color: #81738e; font-size: 12px; white-space: nowrap; opacity: .65; }
.vha-fraction { display: inline-grid; text-align: center; line-height: 1.5; }
.vha-fraction > span:first-child { border-bottom: 1px solid currentColor; }
.vha-formula-bayes { right: 3%; top: 455px; }
.vha-formula-interval { right: 15%; top: 85px; font-size: 10px; opacity: .45; }
.vha-wave { width: 75px; right: 26%; top: 425px; color: #7e7587; opacity: .5; }
.vha-label { font-size: 9px; text-transform: uppercase; color: #71697c; letter-spacing: .07em; }
.vha-label-claim { right: 3%; top: 80px; }
.vha-label-source { right: 2%; top: 345px; }
.vha-label-evidence { right: 4%; top: 510px; }
.vha-node { width: 6px; height: 6px; border-radius: 50%; background: #8560bb; box-shadow: 0 0 12px rgb(133 96 187 / 20%); }
.vha-node-one { right: 17%; top: 80px; }
.vha-node-two { right: 15%; top: 347px; background: #ed924b; }
.vha-node-three { right: 22%; top: 510px; width: 8px; height: 8px; }
/* The same scene and motion, with dedicated night-side artwork and lighting. */
.violema-hero-art .vha-theme-dark { display: none; }
[data-theme='dark'] .violema-hero-art .vha-theme-light { display: none; }
[data-theme='dark'] .violema-hero-art .vha-theme-dark { display: block; }
[data-theme='dark'] .vha-atmosphere {
  mask-image: radial-gradient(ellipse at 65% 45%, #000 25%, transparent 72%);
  background: radial-gradient(ellipse at 89% 35%, rgb(134 94 211 / 18%), transparent 48%), radial-gradient(ellipse at 70% 70%, rgb(218 132 67 / 7%), transparent 34%);
}
[data-theme='dark'] .vha-earth { opacity: .95; }
[data-theme='dark'] .vha-network { opacity: .55; }
[data-theme='dark'] .vha-diagrams { opacity: .48; }
[data-theme='dark'] .vha-dna { opacity: .82; }
[data-theme='dark'] .vha-dna img { filter: brightness(.88) saturate(1.15); }
[data-theme='dark'] .vha-handaxe { filter: drop-shadow(0 0 20px rgb(192 152 103 / 13%)); }
[data-theme='dark'] .vha-orbit, [data-theme='dark'] .vha-wave { color: #b6a6d5; }
[data-theme='dark'] .vha-formula { color: #c5b5e2; }
[data-theme='dark'] .vha-label { color: #ccc2dc; }
[data-theme='dark'] .vha-node { box-shadow: 0 0 16px rgb(166 124 229 / 45%); }
[data-theme='dark'] .vha-node-two { box-shadow: 0 0 16px rgb(237 146 75 / 45%); }
@media (min-width: 480px) and (max-width: 1023px) {
  .hero-scene { --scene-height: 730px; }
  .experience-hero .hero-copy { width: 70%; padding-top: 60px; }
  .experience-hero .hero-category { font-size: 16px; }
  .experience-hero h1 { font-size: clamp(40px, 6.5vw, 58px); }
  .experience-hero .hero-copy .lede { max-width: 36ch; width: 90%; }
  .vha-dna { width: 390px; height: 660px; right: -110px; }
  .vha-handaxe { width: 38%; height: 410px; top: 150px; right: 7%; }
  .vha-earth { height: 360px; width: 125%; left: -10%; }
  .vha-formula-bayes { top: 555px; right: 16%; }
  .vha-wave { top: 515px; right: 33%; }
}
@media (min-width: 1024px) {
  .hero-scene { --scene-height: 780px; min-height: var(--scene-height); grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; }
  .experience-hero .hero-copy { width: 100%; padding-top: 70px; grid-column: 1; grid-row: 1; }
  .experience-hero .hero-category { font-size: 16px; margin-bottom: 30px; }
  .experience-hero h1 { font-size: clamp(48px, 4.7vw, 72px); line-height: 1.06; }
  .experience-hero .hero-copy .lede { font-size: 18px; max-width: 41ch; width: 100%; margin-top: 28px; }
  .experience-hero .hero-copy .actions { margin-top: 26px; }
  .experience-hero .hero-family { grid-column: 1; grid-row: 2; width: 360px; max-width: 85%; text-align: left; border-bottom: 0; margin-top: 32px; padding-top: 24px; align-self: start; }
  .experience-hero .hero-product-link { margin-inline: 0; }
  .violema-hero-art { inset-inline: -40px; height: var(--scene-height); }
  .vha-network { width: 85%; height: 85%; right: -14%; top: 0; opacity: .4; }
  .vha-diagrams { width: 55%; height: 70%; right: 0; top: 10%; }
  .vha-earth { width: 110%; height: 460px; left: 28%; bottom: -35px; mask-image: linear-gradient(to right, transparent, #000 17%, #000 90%, transparent); }
  .vha-dna { width: 510px; height: 750px; top: 0; right: -45px; opacity: .68; }
  .vha-handaxe { width: 32%; height: 580px; top: 75px; right: 17%; }
  .vha-orbit { width: 45%; height: 580px; right: 10%; top: 50px; }
  .vha-formula-bayes { top: 105px; right: 34%; font-size: 16px; }
  .vha-formula-interval { top: 580px; right: 6%; font-size: 15px; }
  .vha-wave { top: 520px; right: 36%; width: 110px; }
  .vha-label { font-size: 11px; }
  .vha-label-claim { top: 110px; right: 4%; }
  .vha-label-source { top: 335px; right: 3%; }
  .vha-label-evidence { top: 495px; right: 5%; }
  .vha-node-one { top: 112px; right: 10%; }
  .vha-node-two { top: 337px; right: 9%; }
  .vha-node-three { top: 497px; right: 12%; }
  .experience-hero .evidence-hero { position: relative; z-index: 2; margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .vha-network { animation: vha-field-drift 34s ease-in-out infinite alternate; }
  .vha-diagrams, .vha-formula-bayes, .vha-wave { animation: vha-equation-drift 28s ease-in-out infinite alternate; }
  .vha-formula-interval { animation: vha-equation-drift 38s ease-in-out -12s infinite alternate-reverse; }
  .vha-dna { animation: vha-helix-drift 36s ease-in-out infinite alternate; }
  .vha-orbit { animation: vha-field-drift 42s ease-in-out -16s infinite alternate-reverse; }
  .vha-node { animation: vha-node-pulse 9s ease-in-out infinite alternate; }
  .vha-node-two { animation-delay: -3s; }
  .vha-node-three { animation-delay: -6s; }
  [data-hero-art][data-paused] * { animation-play-state: paused !important; }
}
@keyframes vha-field-drift { from { transform: translate3d(-3px, 4px, 0) rotate(-.4deg); } to { transform: translate3d(6px, -5px, 0) rotate(.5deg); } }
@keyframes vha-equation-drift { from { transform: translate3d(-3px, 3px, 0); } to { transform: translate3d(5px, -6px, 0); } }
@keyframes vha-helix-drift { from { transform: translate3d(0, 4px, 0) rotate(3deg); } to { transform: translate3d(4px, -6px, 0) rotate(5deg); } }
@keyframes vha-node-pulse { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .violema-hero-art *, .violema-hero-art { animation: none !important; transition: none !important; }
}

@media (max-width: 359px) {
  .hero-scene { --scene-height: 730px; }
  .vha-earth { height: 280px; }
  .vha-handaxe { right: 0; width: 38%; top: 185px; }
  .vha-dna { right: -70px; }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .experience-hero .hero-product-link { width: 264px; }
}

/* Cursor depth never moves the reading or interaction surfaces. */
@media (prefers-reduced-motion: no-preference) {
  .vha-network { translate: calc(var(--cursor-x, 0px) * .45) calc(var(--cursor-y, 0px) * .45); }
  .vha-diagrams, .vha-orbit { translate: calc(var(--cursor-x, 0px) * -.65) calc(var(--cursor-y, 0px) * -.65); }
  .vha-dna { translate: var(--cursor-x, 0px) var(--cursor-y, 0px); }
  .vha-handaxe { translate: calc(var(--cursor-x, 0px) * .35) calc(var(--cursor-y, 0px) * .35); }
  .vha-formula, .vha-wave { translate: calc(var(--cursor-x, 0px) * 1.3) calc(var(--cursor-y, 0px) * 1.3); }
  .vha-node { translate: calc(var(--cursor-x, 0px) * .8) calc(var(--cursor-y, 0px) * .8); }
  .violema-hero-art::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 180px 160px at var(--light-x, 75%) var(--light-y, 35%), rgb(255 249 230 / 65%), rgb(189 166 242 / 14%) 45%, transparent 75%);
    mix-blend-mode: screen; opacity: var(--cursor-glow, 0); transition: opacity 650ms ease;
  }
  .vha-dna::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 37%, rgb(255 255 255 / 80%) 48%, transparent 59%) 180% 0 / 300% 100%;
    mask: url('/company-assets/violema-hero/dna-glass.webp') center / 100% 100% no-repeat;
    animation: vha-glass-shine 12s ease-in-out infinite;
    mix-blend-mode: screen;
  }
}
@keyframes vha-glass-shine {
  0%, 18% { background-position: 180% 0; opacity: 0; }
  25% { opacity: .65; }
  60% { background-position: -80% 0; opacity: .65; }
  70%, 100% { background-position: -80% 0; opacity: 0; }
}
[data-hero-art][data-paused] .vha-dna::after { animation-play-state: paused !important; }

[data-hero-art][data-paused]::after { transition: none; opacity: 0; }

/* An editorial entrance: each line resolves, then the supporting copy and action. */
.experience-hero h1 > .hero-headline-line { display: block; color: var(--ink); }
.experience-hero h1 > .hero-headline-accent { color: var(--accent); }
/* Two quiet specimen accents at the history/trace and source-method touchpoints. */
.home-experience .instrument-title-row > p { position: relative; padding-left: 36px; }
.home-experience .instrument-title-row > p::before,
.chapter-method .chapter-label::after {
  content: ''; display: block; width: 32px; height: 48px;
  background: url('/company-assets/violema-hero/handaxe-concept.webp') center / contain no-repeat;
  pointer-events: none;
}
.home-experience .instrument-title-row > p::before { position: absolute; left: -4px; top: 50%; transform: translateY(-50%) rotate(-12deg); }
.chapter-method .chapter-label::after { margin-left: auto; transform: rotate(12deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-category { animation: vha-copy-enter 650ms ease-out 80ms backwards; }
  .hero-headline-line { animation: vha-copy-enter 750ms cubic-bezier(.16, 1, .3, 1) backwards; }
  .hero-headline-line:nth-child(1) { animation-delay: 180ms; }
  .hero-headline-line:nth-child(2) { animation-delay: 340ms; }
  .hero-headline-line:nth-child(3) { animation-delay: 500ms; }
  .hero-copy > .lede { animation: vha-copy-enter 750ms ease-out 660ms backwards; }
  .hero-copy > .actions { animation: vha-copy-enter 650ms ease-out 820ms backwards; }
  .hero-scene > .hero-family { animation: vha-copy-enter 750ms ease-out 980ms backwards; }
  .vha-earth img { animation: vha-layer-enter 1100ms ease-out backwards; }
  .vha-dna img { animation: vha-layer-enter 1200ms ease-out 160ms backwards; }
  .vha-handaxe img { animation: vha-layer-enter 1000ms ease-out 300ms backwards; }
  .vha-network img, .vha-diagrams img { animation: vha-layer-enter 1300ms ease-out 420ms backwards; }
}
.hero-copy > .actions:focus-within, .hero-scene > .hero-family:focus-within { animation: none; }
@keyframes vha-copy-enter { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes vha-layer-enter { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

/* A smaller pool of cursor light keeps the dark artwork luminous without washing out the scene. */
[data-theme='dark'] .violema-hero-art::after {
  background: radial-gradient(ellipse 160px 180px at var(--light-x, 75%) var(--light-y, 35%), rgb(218 198 255 / 18%), rgb(159 117 221 / 7%) 45%, transparent 75%);
}

/* Closing motif: a conceptual progression, distinct from the real evidence map. */
.map-jump { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 16px; }
.closing-evidence { margin: 48px 0 0; width: 100%; max-width: 420px; justify-self: center; }
.closing-evidence-art { position: relative; aspect-ratio: 360 / 180; }
.closing-evidence svg { width: 100%; height: auto; overflow: visible; }
.closing-evidence img { position: absolute; height: 85%; object-fit: contain; top: 0; filter: drop-shadow(0 8px 12px rgb(0 0 0 / 10%)); }
.closing-evidence .closing-observe { width: 37%; left: -2%; }
.closing-evidence .closing-record { width: 42%; left: 29%; }
.closing-evidence .closing-revisit { width: 42%; left: 62%; }
.closing-path { stroke: var(--chapter-line); stroke-width: 1.5; }
.closing-signal { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 9 90; opacity: .55; }
.closing-stages { display: grid; grid-template-columns: repeat(3, 1fr); position: absolute; inset: auto 0 0; color: var(--ink-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.closing-evidence figcaption { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--chapter-line); text-align: center; font-size: var(--text-caption); color: var(--ink-2); }
@media (min-width: 1100px) {
  .chapter-connect > .wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: center; gap: 48px; }
  .chapter-connect h2 { font-size: clamp(2.375rem, 4vw, 4rem); }
  .closing-evidence { margin: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .closing-evidence img { animation: closing-float 28s ease-in-out infinite alternate; }
  .closing-evidence .closing-record { animation-duration: 32s; animation-delay: -9s; }
  .closing-evidence .closing-revisit { animation-duration: 36s; animation-delay: -18s; }
  .closing-signal { animation: closing-flow 24s linear infinite; }
  .closing-evidence[data-paused] * { animation-play-state: paused !important; }
}
@keyframes closing-float { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-4px) rotate(1deg); } }
@keyframes closing-flow { to { stroke-dashoffset: -198; } }

/* Final mobile polish: comfortable standalone source links and readable filters. */
.map-detail > p > a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 479px) {
  .map-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
}