/* Reading-first layout; the existing methodology remains the source content. */
html { scroll-padding-top: 100px; }
html[data-theme="dark"] body.methodology-page {
  background: #060b12 !important; color: #e8eff4 !important;
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.7; padding-top: 80px;
}
.methodology-page::before { content: ''; position: fixed; inset: 0; z-index: 0; background: url('/assets/invyra-optix-starry-bg.webp') center / cover; opacity: .23; pointer-events: none; }
.methodology-page * { letter-spacing: 0 !important; }
.methodology-page [hidden] { display: none !important; }
.methodology-page :focus-visible { outline: 2px solid #9bf0df; outline-offset: 4px; }
.methodology-page :is(button,input,select) { font: inherit; }
.methodology-page button { cursor: pointer; }
.methodology-page svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.methodology-page .fade-up { opacity: 1; transform: none; transition: none; }
.methodology-page .float-icon { animation: none; }
.methodology-page .section-icon { display: none; }
.method-skip { position: fixed; top: -80px; left: 20px; z-index: 10001; padding: 10px 16px; background: #9bf0df; color: #081b19 !important; }
.method-skip:focus { top: 12px; }
.methodology-page .nav-wrapper { z-index: 50; padding: 14px 24px 0; }
.methodology-page .top-nav { max-width: 1280px; height: 60px; background: rgba(7,13,20,.88); backdrop-filter: blur(16px); border-color: #283644; border-radius: 8px; font-family: inherit; }
.methodology-page .nav-wrapper.scrolled { padding: 8px 24px 0; }
.methodology-page .nav-wrapper.scrolled .top-nav { max-width: 1280px; border-radius: 8px; background: rgba(7,13,20,.96); }
.methodology-page :is(.nav-top-link,.nav-group-trigger,.nav-cta,.nav-thinkrium) { font-family: inherit; font-size: 13px; }
.methodology-page .nav-cta { background: #e9f3f3; color: #0b1e25; box-shadow: none; }
.methodology-page .nav-mobile { background: #0b1420; max-height: calc(100svh - 100px); overflow-y: auto; }
#methodMain { position: relative; z-index: 2; }
.method-hero { width: min(1280px, calc(100% - 64px)); margin: 0 auto; padding: 50px 0 36px; text-align: center; }
.methodology-page .method-eyebrow { font-size: 13px; color: #9bf0df !important; margin-bottom: 12px; font-weight: 500; }
.method-hero h1 { font-size: 52px; line-height: 1.15; font-weight: 500; margin: 0 0 16px; }
.methodology-page .method-intro { color: #b4c4d2 !important; font-size: 18px; }
.method-engines { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 36px; gap: 12px; text-align: left; }
.method-engines a { --engine-accent: #9bf0df; position: relative; display: flex; align-items: center; gap: 12px; min-height: 98px; padding: 18px; border: 1px solid #293a47; border-radius: 8px; background: rgba(9,19,29,.7); color: #e8eff4 !important; transition: background .2s, border-color .2s; text-decoration: none; overflow: hidden; }
.method-engines [data-engine="iv"] { --engine-accent: #8fbbf5; }
.method-engines [data-engine="prism"] { --engine-accent: #f4c662; }
.method-engines [data-engine="optix"] { --engine-accent: #c1b3f8; }
.method-engines a:hover,.method-engines a[aria-current] { border-color: var(--engine-accent); background: rgba(20,39,47,.9); }
.method-engines a[aria-current]::after { content: ''; position: absolute; bottom: 0; left: 0; width: 38%; height: 2px; background: var(--engine-accent); box-shadow: 0 0 10px var(--engine-accent); animation: method-trace 5s ease-in-out infinite alternate; }
@keyframes method-trace { from { transform: translateX(0); } to { transform: translateX(164%); } }
.engine-symbol { display: grid; place-items: center; width: 36px; flex-shrink: 0; color: var(--engine-accent); font: 500 22px 'Geist Mono', monospace; }
.engine-symbol svg { width: 30px; height: 30px; }
.method-engines a > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.method-engines strong { font-size: 16px; font-weight: 600; }
.method-engines strong small { font-size: 10px; font-weight: 500; color: #a9bbc9; vertical-align: middle; margin-left: 3px; }
.method-engines a > span > span { font-size: 13px; line-height: 1.5; color: #aebfcb; }
.method-engines a > svg { width: 16px; height: 16px; flex-shrink: 0; margin-left: auto; color: var(--engine-accent); }
.method-layout { width: min(1280px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 248px minmax(0,1fr); gap: 40px; align-items: start; border-top: 1px solid #273743; padding-top: 28px; scroll-margin-top: 90px; }
.method-sidebar { position: sticky; top: 96px; max-height: calc(100svh - 116px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #425760 transparent; padding: 0 14px 16px 0; }
.method-search { margin-bottom: 18px; }
.method-search label { display: block; font-size: 13px; color: #b8c8d4; margin-bottom: 8px; }
.method-search > div { position: relative; }
.method-search svg { position: absolute; left: 11px; top: 13px; width: 18px; height: 18px; color: #91a8b9; pointer-events: none; }
.method-search input { width: 100%; min-height: 44px; border: 1px solid #344653; border-radius: 6px; background: #0a151f; color: #e9f0f5; padding: 10px 8px 10px 36px; font-size: 14px; }
.method-search input::placeholder { color: #96aaba; }
.methodology-page .toc { display: block; max-width: none; margin: 0; padding: 0; background: transparent !important; }
.methodology-page .toc a { display: block; margin: 2px 0; padding: 8px 12px; font-size: 14px; font-weight: 400; line-height: 1.4; border: 1px solid transparent !important; border-radius: 6px; background: transparent !important; color: #b1c1cf !important; box-shadow: none; transform: none; transition: background .2s, color .2s; }
.methodology-page .toc a::before { display: none; }
.methodology-page .toc a:hover { color: #fff !important; background: rgba(255,255,255,.04) !important; }
.methodology-page .toc a[aria-current] { color: #adf2e4 !important; background: rgba(155,240,223,.08) !important; border-color: rgba(155,240,223,.19) !important; font-weight: 500; }
.method-topic-group { margin-bottom: 18px; }
.method-topic-group h2 { font-size: 12px; font-weight: 600; color: #829aab; margin: 0 12px 6px; }
.method-search-status { font-size: 13px; color: #b8c8d4; padding: 10px 12px; }
.method-mobile-topic,.method-mobile-label { display: none; }
.method-content { min-width: 0; padding: 0 28px 28px; background: rgba(7,16,24,.87); }
.method-reader-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 22px; font-size: 13px; color: #9cb0c0; }
.method-reader-tools button { border: 1px solid #344653; border-radius: 6px; padding: 7px 12px; min-height: 38px; background: transparent; color: #c0ddd9; font-size: 13px; }
.method-reader-tools button:hover { background: rgba(155,240,223,.07); border-color: #7dbfb2; }
.methodology-page .method-content .section { max-width: none; margin: 0 0 32px; padding: 0; background: transparent !important; scroll-margin-top: 100px; }
.methodology-page.method-ready .section { margin-bottom: 0; }
.methodology-page .section-label { color: #97b6c6; font-size: 12px; font-weight: 500; text-transform: none; margin-bottom: 10px; }
.methodology-page .section h2 { font-size: 29px; font-weight: 500; line-height: 1.3; margin-bottom: 18px; text-wrap: balance; }
.methodology-page .section :is(p,li,.callout) { font-size: 16px !important; line-height: 1.75 !important; color: #b5c5d2; }
.methodology-page .section p { margin: 0 0 18px; }
.methodology-page .section :is(h3,h4) { color: #e5edf3; font-size: 17px; font-weight: 500; line-height: 1.5; }
.methodology-page .section strong { color: #e0eaf0; font-weight: 600; }
.methodology-page .section :is(ul,ol) { padding-left: 22px; margin: 16px 0; }
.methodology-page .section li { margin-bottom: 10px; }
.method-detail { border-top: 1px solid #293b47; }
.method-detail:last-child { border-bottom: 1px solid #293b47; }
.method-detail > summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 0; cursor: pointer; list-style: none; }
.method-detail > summary::-webkit-details-marker { display: none; }
.method-detail > summary::after { content: '+'; color: #9bf0df; font-size: 23px; line-height: 1; font-weight: 400; }
.method-detail[open] > summary::after { content: '\2212'; }
.methodology-page .method-detail > summary h3 { margin: 0; font-size: 16px; }
.method-detail > summary:hover h3 { color: #9bf0df; }
.method-detail-body { padding: 4px 0 22px; }
.method-detail[open] .method-detail-body { animation: method-arrive .28s ease-out; }
@keyframes method-arrive { from { opacity: .7; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.methodology-page .section :is(.metric-list,.metric-grid,.concept-grid,.macro-grid) { gap: 0 24px; margin: 18px 0; }
.methodology-page .section :is(.metric-item,.metric-card,.concept-card,.macro-card) { padding: 18px 0; margin: 0; border: 0; border-bottom: 1px solid #233540; border-radius: 0; background: transparent !important; box-shadow: none; transform: none; transition: none; min-width: 0; }
.methodology-page .metric-item { grid-template-columns: 96px minmax(0,1fr); gap: 18px; }
.methodology-page .metric-badge { width: auto; min-width: 0; height: auto; min-height: 34px; padding: 6px 9px; font-size: 13px; border-radius: 5px; background: rgba(155,240,223,.07) !important; color: #a4e9da !important; border: 1px solid rgba(155,240,223,.16); overflow-wrap: anywhere; }
.methodology-page .metric-body { min-width: 0; }
.methodology-page .metric-body p { font-size: 16px; }
.methodology-page .section .callout { border: 1px solid #2b4553 !important; background: rgba(64,118,139,.08) !important; border-radius: 6px; padding: 16px !important; margin: 20px 0 !important; }
.methodology-page .section .callout strong { color: #c2e2ee; }
.methodology-page .analogy { display: block; background: transparent; border: 0; padding: 14px 0; }
.methodology-page .analogy-art { display: none; }
.methodology-page .section :is(.formula,.formula-box) { background: #0a1620 !important; border: 1px solid #294453; border-radius: 6px; padding: 16px; font-family: 'Geist Mono', monospace; font-size: 14px; overflow-x: auto; }
.methodology-page .section .state-badge { border-radius: 5px; color: #071b22; }
.methodology-page .section table { width: 100%; border-collapse: collapse; font-size: 14px; }
.methodology-page .section :is(td,th) { padding: 12px; text-align: left; border-bottom: 1px solid #293b47; }
.method-chart-scroll { max-width: 100%; overflow-x: auto; }
.methodology-page .cta-section { max-width: 1280px; margin: 36px auto 0; padding: 36px 32px 60px; background: transparent; }
.methodology-page .cta-inner { background: transparent; padding: 28px 0; border-radius: 0; border-top: 1px solid #293b47; }
.methodology-page .cta-inner h2 { font-size: 25px; font-weight: 500; }
.methodology-page .cta-inner p { font-size: 16px; max-width: 650px; margin: 14px auto 22px; }
.methodology-page .cta-button { padding: 12px 22px; background: #9bf0df; color: #0c2520 !important; border-radius: 6px; font-size: 14px; box-shadow: none; }
.method-motion { position: fixed; bottom: 16px; right: 18px; z-index: 40; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 12px; border: 1px solid #344653; border-radius: 6px; background: #0a141e; color: #b6c9d5; font-size: 12px !important; }
.method-motion svg { width: 14px; height: 14px; }
.methodology-page[data-motion="paused"] .method-detail-body { animation: none; }
.methodology-page[data-motion="paused"] .method-engines a::after { animation-play-state: paused; }
@media (max-width: 1100px) {
  .method-engines { gap: 8px; }
  .method-engines a { padding: 14px 12px; gap: 8px; }
  .method-engines a > svg { display: none; }
  .method-layout { grid-template-columns: 212px minmax(0,1fr); gap: 20px; }
  .method-content { padding-right: 8px; padding-left: 16px; }
}
@media (max-width: 760px) {
  .methodology-page .nav-wrapper,.methodology-page .nav-wrapper.scrolled { padding: 10px 14px 0; }
  .methodology-page .top-nav { height: 56px; padding: 0 14px; }
  .methodology-page .nav-center { display: none; }
  .methodology-page .nav-hamburger { display: flex; }
  .methodology-page .nav-thinkrium { display: none; }
  .method-hero { width: calc(100% - 40px); padding: 32px 0 24px; }
  .method-hero h1 { font-size: 38px; }
  .methodology-page .method-intro { font-size: 16px; }
  .method-engines { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 24px; gap: 10px; }
  .method-engines a { align-items: flex-start; min-height: 114px; padding: 14px 12px; flex-direction: column; gap: 8px; }
  .engine-symbol { width: 26px; height: 24px; font-size: 19px; }
  .engine-symbol svg { width: 24px; height: 24px; }
  .method-engines strong { font-size: 14px; }
  .method-engines a > span > span { font-size: 12px; }
  .method-layout { width: calc(100% - 40px); display: block; padding-top: 20px; }
  .method-sidebar { position: static; overflow: visible; max-height: none; padding: 0 0 24px; }
  .method-ready .method-sidebar .toc { display: none; }
  .method-ready .method-mobile-label { display: block; font-size: 13px; margin-bottom: 6px; color: #b8c8d4; }
  .method-ready .method-mobile-topic { display: block; width: 100%; min-height: 46px; padding: 10px 12px; background: #0a151f; color: #e1ecf4; border: 1px solid #344653; border-radius: 6px; font-size: 15px; }
  .method-content { padding: 0; }
  .method-reader-tools { padding-bottom: 16px; }
  .methodology-page .section h2 { font-size: 25px; }
  .methodology-page .metric-item { grid-template-columns: 1fr; gap: 12px; }
  .methodology-page .metric-badge { justify-self: start; max-width: 100%; }
  .methodology-page .section :is(.concept-grid,.macro-grid,.metric-grid) { grid-template-columns: 1fr !important; }
  .method-motion span { display: none; }
  .method-motion { right: 12px; bottom: 12px; width: 36px; padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .methodology-page *, .methodology-page *::before, .methodology-page *::after { animation: none !important; transition: none !important; }
}
@media print {
  .methodology-page #starfield,.method-sidebar,.method-reader-tools,.method-engines,.method-motion,.nav-wrapper { display: none !important; }
  .methodology-page .section[hidden] { display: block !important; }
  .method-layout { display: block; width: 100%; }
  .method-content { padding: 0; }
}