:root {
  --ink: #08080a;
  --ink-raised: #0e0e12;
  --paper: #f2efe9;
  --paper-dim: #aaa6a1;
  --violet: #b77cff;
  --violet-bright: #d5b4ff;
  --green: #72e2a7;
  --line: rgba(242, 239, 233, .12);
  --line-strong: rgba(242, 239, 233, .24);
  --display: "Newsreader", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--violet); color: var(--ink); }

.skip-link { position: fixed; z-index: 99999; top: .75rem; left: .75rem; padding: .7rem 1rem; color: var(--ink); background: var(--paper); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

/* Landing-only treatment for the shared navigation. */
.landing-body .osok-facelift { display: none !important; }
.landing-body .osok-topnav { min-height: 68px; padding: .9rem 2rem; background: rgba(8,8,10,.9); border-color: var(--line); backdrop-filter: blur(18px); }
.landing-body .osok-topnav-logo img { height: 31px; }
.landing-body .osok-topnav-tools-btn { border: 0; padding: .55rem .35rem; color: var(--paper-dim); border-radius: 0; }
.landing-body .osok-topnav-prime { background: transparent; border: 0; border-radius: 0; padding: .55rem .2rem; color: var(--violet-bright); }
.landing-body .osok-topnav-secure { background: transparent; border: 0; padding: .4rem 0; color: var(--green); }
.landing-body .osok-topnav-signin { border-color: var(--line-strong); }
.landing-body .osok-topnav-signup { border-radius: 2px; }

.hero { min-height: calc(100svh - 68px); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr); align-items: center; gap: clamp(2.5rem, 6vw, 7rem); padding: clamp(5rem, 10vw, 9rem) max(5vw, calc((100vw - 1280px)/2)) 5rem; isolation: isolate; }
.hero::after { content: ""; position: absolute; left: 5vw; right: 5vw; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.hero-field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.field-axis { position: absolute; width: 1px; top: 0; bottom: 0; left: 63%; background: linear-gradient(transparent, rgba(183,124,255,.2) 30%, rgba(183,124,255,.06) 70%, transparent); }
.field-focus { position: absolute; width: min(50vw, 780px); aspect-ratio: 1; border: 1px solid rgba(183,124,255,.1); border-radius: 50%; left: 63%; top: 48%; transform: translate(-50%,-50%); box-shadow: 0 0 100px rgba(183,124,255,.025) inset; }
.field-focus::before, .field-focus::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(183,124,255,.06); border-radius: inherit; }
.field-focus::after { inset: 33%; background: radial-gradient(circle, rgba(183,124,255,.09), transparent 68%); }
.field-noise { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(242,239,233,.16), transparent); opacity: .45; animation: drift 9s ease-in-out infinite alternate; }
.field-noise-a { width: 42vw; right: -5vw; top: 26%; box-shadow: 0 31px rgba(242,239,233,.08), 0 103px rgba(242,239,233,.05); }
.field-noise-b { width: 30vw; left: -3vw; bottom: 19%; animation-delay: -4s; }
@keyframes drift { to { transform: translateX(7vw); opacity: .15; } }

.hero-copy { max-width: 730px; position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.4rem; color: var(--violet-bright); font: 500 .66rem/1.4 var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.eyebrow-rule { width: 42px; height: 1px; background: currentColor; opacity: .4; }
.hero h1, .proof h2, .capability h2, .trust h2, .final-cta h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.035em; }
.hero h1 { margin: 0; max-width: 800px; font-size: clamp(3.6rem, 6.7vw, 7.1rem); line-height: .88; }
.hero h1 em, .final-cta h2 em { color: var(--violet-bright); font-style: italic; }
.hero-lede { max-width: 610px; margin: 2rem 0 0; color: #c4c0bb; font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.72; }
.hero-proof { display: flex; flex-wrap: wrap; gap: .55rem .9rem; margin-top: 2rem; color: #77747a; font: .67rem/1.6 var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.hero-proof span:first-child, .hero-proof a { color: var(--green); }
.hero-proof a { text-decoration-color: rgba(114,226,167,.3); text-underline-offset: 4px; }

.intake { position: relative; align-self: center; background: rgba(14,14,18,.88); border-top: 1px solid var(--violet); border-bottom: 1px solid var(--line-strong); box-shadow: 0 35px 100px rgba(0,0,0,.35); backdrop-filter: blur(14px); }
.intake::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(183,124,255,.035) 1px, transparent 1px), linear-gradient(rgba(183,124,255,.025) 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(to bottom, black, transparent 75%); }
.intake-head { min-height: 70px; display: flex; align-items: center; gap: .9rem; padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); position: relative; }
.xray-mark { width: 34px; height: 34px; border: 1px solid rgba(183,124,255,.5); border-radius: 50%; display: grid; place-items: center; }
.xray-mark::before, .xray-mark::after { content: ""; position: absolute; width: 18px; height: 1px; background: var(--violet); }
.xray-mark::after { transform: rotate(90deg); }
.xray-mark span { width: 7px; height: 7px; background: var(--violet); border-radius: 50%; box-shadow: 0 0 18px var(--violet); }
.intake-speaker { margin: 0; color: var(--paper); font: 500 .7rem/1 var(--mono); letter-spacing: .16em; }
.intake-status { margin: .35rem 0 0; color: #77747a; font: .62rem/1 var(--mono); text-transform: uppercase; }
.intake-status span { display: inline-block; width: 5px; height: 5px; margin-right: .35rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.intake-reset { margin-left: auto; color: #8f8b91; background: transparent; border: 0; padding: .5rem; font: .65rem var(--mono); text-transform: uppercase; cursor: pointer; }
.intake-reset:hover { color: var(--paper); }
.intake-body { position: relative; min-height: 405px; padding: clamp(2rem, 4vw, 3.2rem); }
.intake-step, .result-label { margin: 0 0 1rem; color: #77747a; font: .63rem/1.4 var(--mono); letter-spacing: .12em; }
.intake h2 { max-width: 500px; margin: 0; font: 500 clamp(1.7rem, 2.6vw, 2.55rem)/1.12 var(--display); letter-spacing: -.025em; }
.intake-hint { margin: .8rem 0 1.7rem; color: #8e8a90; font-size: .84rem; line-height: 1.55; }
.intake-options { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intake-option { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 54px; padding: .85rem .25rem; color: #d8d4cf; background: var(--ink-raised); border: 0; text-align: left; cursor: pointer; transition: color .18s, padding .18s, background .18s; }
.intake-option::after { content: "→"; color: #5f5b63; font-family: var(--mono); }
.intake-option:hover, .intake-option:focus-visible { color: var(--paper); background: rgba(183,124,255,.08); padding-left: .8rem; outline: none; }
.intake-option:hover::after { color: var(--violet-bright); }
.intake-result h3 { margin: 0 0 .8rem; font: 500 clamp(1.8rem, 3vw, 2.7rem)/1.08 var(--display); }
.intake-result > p:not(.result-label) { max-width: 46ch; color: #aaa6ac; line-height: 1.65; }
.result-label { color: var(--green); }
.result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.3rem; margin-top: 1.8rem; }
.action-primary { display: inline-flex; align-items: center; justify-content: center; padding: .9rem 1.25rem; background: var(--violet-bright); color: #120c18; text-decoration: none; font-size: .78rem; font-weight: 700; border: 1px solid var(--violet-bright); transition: background .2s, transform .2s; }
.action-primary:hover { background: var(--paper); transform: translateY(-2px); }
.action-text { color: #aaa6ac; font-size: .76rem; text-underline-offset: 5px; text-decoration-color: #4c4950; }
.action-text:hover { color: var(--paper); }
.intake-progress { height: 2px; background: rgba(242,239,233,.06); }
.intake-progress span { display: block; width: 14%; height: 100%; background: var(--violet); transition: width .4s cubic-bezier(.22,1,.36,1); }
.intake.is-changing .intake-body > * { animation: answerIn .36s cubic-bezier(.22,1,.36,1); }
@keyframes answerIn { from { opacity: 0; transform: translateY(9px); } }
.hero-scroll { position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%); display: flex; align-items: center; gap: .8rem; color: #625f65; font: .6rem var(--mono); text-transform: uppercase; text-decoration: none; letter-spacing: .12em; }
.hero-scroll i { display: block; width: 38px; height: 1px; background: #4d4a51; position: relative; }
.hero-scroll i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-right: 1px solid #77747a; border-bottom: 1px solid #77747a; transform: rotate(-45deg); }

.proof, .capability, .trust, .final-cta { max-width: 1280px; margin: 0 auto; padding: clamp(6rem, 11vw, 11rem) max(5vw, 2rem); position: relative; }
.section-index { position: absolute; top: clamp(6rem, 11vw, 11rem); left: 0; color: #343138; font: 500 .72rem var(--mono); }
.proof-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 6rem; margin-left: 8%; }
.proof-intro .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.proof h2 { margin: 0; max-width: 610px; font-size: clamp(3rem, 5.5vw, 5.6rem); line-height: .95; }
.proof-intro > p:last-child { align-self: end; max-width: 520px; margin: 0 0 .4rem; color: #9d999f; line-height: 1.75; }

.diagnostic-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; margin-top: 5rem; }
.demo-source, .demo-resolution { min-height: 440px; padding: clamp(2rem, 4vw, 3.2rem); position: relative; overflow: hidden; }
.demo-source { background: #e8e4dd; color: #242126; transform: rotate(-1deg); }
.document-meta { display: flex; justify-content: space-between; margin-bottom: 2.8rem; color: #706b68; font: .57rem var(--mono); letter-spacing: .12em; }
.demo-source blockquote { margin: 2rem 0; max-width: 560px; font: 500 clamp(1.2rem, 2vw, 1.75rem)/1.45 var(--display); }
.document-noise { display: grid; gap: .62rem; opacity: .2; }
.noise-line { height: 7px; background: #242126; }
.w92 { width: 92%; } .w74 { width: 74%; } .w86 { width: 86%; } .w80 { width: 80%; } .w96 { width: 96%; } .w61 { width: 61%; }
.source-reaction { position: absolute; left: 3rem; bottom: 2rem; margin: 0; color: #4c464a; font-size: .78rem; font-weight: 600; }
.scan-line { position: absolute; left: 0; right: 0; top: -10%; height: 2px; opacity: 0; background: var(--violet); box-shadow: 0 0 30px 10px rgba(183,124,255,.28); }
.diagnostic-demo.is-resolved .scan-line { animation: scan 1.1s cubic-bezier(.3,0,.2,1) both; }
@keyframes scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.demo-trigger { width: 84px; min-height: 188px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 1rem .65rem; color: var(--paper); background: var(--ink-raised); border: 1px solid var(--violet); cursor: pointer; z-index: 2; transition: background .2s, transform .2s; }
.demo-trigger:hover { background: #17121f; transform: scale(1.03); }
.demo-trigger > span:nth-child(2) { display: flex; align-items: center; gap: .45rem; writing-mode: vertical-rl; transform: rotate(180deg); }
.demo-trigger strong { font: 500 .66rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.demo-trigger small { color: #77747a; font: .56rem var(--mono); }
.trigger-id { color: var(--violet-bright); font: .7rem var(--mono); }
.trigger-arrow { color: var(--violet); }
.demo-resolution { background: #101015; border-top: 1px solid var(--green); opacity: .36; filter: blur(3px); transform: translateX(-10px); transition: opacity .55s, filter .55s, transform .55s; }
.diagnostic-demo.is-resolved .demo-resolution { opacity: 1; filter: blur(0); transform: translateX(0); }
.resolution-kicker { margin: 0 0 1rem; color: var(--green); font: .62rem var(--mono); letter-spacing: .12em; }
.demo-resolution h3 { margin: 0 0 2rem; font: 500 clamp(1.8rem, 3vw, 2.7rem)/1.05 var(--display); }
.demo-resolution ol { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.demo-resolution li { display: grid; grid-template-columns: 30px 1fr; gap: .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.demo-resolution li > span { color: #5f5b63; font: .6rem var(--mono); }
.demo-resolution strong { font-size: .78rem; }
.demo-resolution li p { margin: .3rem 0 0; color: #858187; font-size: .76rem; line-height: 1.5; }
.demo-resolution > a { display: inline-block; margin-top: 1.7rem; color: var(--violet-bright); font-size: .75rem; text-underline-offset: 5px; }

.capability { display: grid; grid-template-columns: 1.2fr .8fr; gap: 5rem; border-top: 1px solid var(--line); }
.capability-statement { position: relative; padding-left: 8%; }
.capability-statement .section-index { top: .2rem; }
.capability h2 { margin: 0; font-size: clamp(3.2rem, 6vw, 6.4rem); line-height: .92; }
.capability-detail { align-self: end; }
.capability-detail > p { margin: 0 0 2.7rem; color: #9d999f; line-height: 1.75; }
.capability-path { border-top: 1px solid var(--line); }
.capability-path a { display: grid; grid-template-columns: 38px 1fr; padding: 1rem 0; color: #c4c0c5; border-bottom: 1px solid var(--line); text-decoration: none; font-size: .82rem; transition: color .18s, padding .18s; }
.capability-path a span { color: #4e4a51; font: .6rem var(--mono); }
.capability-path a:hover { color: var(--violet-bright); padding-left: .6rem; }

.trust { display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; border-top: 1px solid var(--line); }
.trust-origin h2 { margin: 0; max-width: 600px; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .96; }
.trust-origin > p:last-child { max-width: 570px; margin: 2rem 0 0; color: #9d999f; line-height: 1.75; }
.trust-facts { margin: 0; border-top: 1px solid var(--line-strong); }
.trust-facts div { display: grid; grid-template-columns: 90px 1fr; gap: 1rem; padding: 1.65rem 0; border-bottom: 1px solid var(--line); }
.trust-facts dt { color: var(--violet-bright); font: 500 1.15rem var(--mono); }
.trust-facts dd { margin: 0; color: #aaa6ac; font-size: .82rem; line-height: 1.6; }

.final-cta { max-width: none; padding-left: max(8vw, calc((100vw - 1120px)/2)); padding-right: max(8vw, calc((100vw - 1120px)/2)); text-align: center; border-top: 1px solid var(--line); overflow: hidden; }
.final-cta .eyebrow { justify-content: center; }
.final-cta h2 { margin: 0 auto; max-width: 1000px; font-size: clamp(3.2rem, 6.2vw, 6.8rem); line-height: .92; }
.final-cta > p:not(.eyebrow) { margin: 2rem 0 0; color: #918d93; }
.cta-actions { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }
.action-large { min-width: min(100%, 330px); padding: 1.05rem 1.6rem; }
.cta-signal { position: absolute; inset: 0; z-index: -1; display: grid; place-items: center; pointer-events: none; }
.cta-signal span { position: absolute; width: min(72vw, 900px); aspect-ratio: 1; border: 1px solid rgba(183,124,255,.06); border-radius: 50%; }
.cta-signal span:nth-child(2) { width: min(48vw, 600px); }
.cta-signal span:nth-child(3) { width: min(24vw, 300px); background: radial-gradient(circle, rgba(183,124,255,.07), transparent 70%); }

.landing-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; padding: 2.2rem max(5vw, calc((100vw - 1280px)/2)); border-top: 1px solid var(--line); color: #625f65; }
.footer-logo img { display: block; width: auto; height: 26px; opacity: .72; }
.landing-footer p { margin: 0; font: .66rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.landing-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.landing-footer a { font-size: .7rem; text-decoration: none; }
.landing-footer a:hover { color: var(--paper); }
.landing-footer small { grid-column: 1 / -1; font: .58rem var(--mono); }

/* POP phase: the diagnostic metaphor becomes environmental, while the
   progressive flow and reading order remain unchanged. */
.hero::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:radial-gradient(circle at 74% 44%,rgba(183,124,255,.12),transparent 26%),linear-gradient(110deg,transparent 0 58%,rgba(183,124,255,.025) 58% 59%,transparent 59%); }
.hero h1 { text-wrap:balance; text-shadow:0 28px 90px rgba(183,124,255,.08); }
.hero-copy { animation:landing-arrive .8s cubic-bezier(.2,.8,.2,1) both; }
.intake { animation:landing-arrive .8s .12s cubic-bezier(.2,.8,.2,1) both; }
@keyframes landing-arrive { from { opacity:0; transform:translateY(18px); filter:blur(4px); } }
.intake::after { content:""; position:absolute; inset:0; pointer-events:none; border-left:1px solid transparent; border-right:1px solid transparent; transition:border-color .35s,box-shadow .35s; }
.intake:focus-within::after { border-color:rgba(183,124,255,.28); box-shadow:0 0 70px rgba(183,124,255,.07); }
.xray-mark { box-shadow:0 0 40px rgba(183,124,255,.1); }
.intake.is-changing .xray-mark { animation:mark-focus .5s cubic-bezier(.2,.8,.2,1); }
@keyframes mark-focus { 50% { transform:scale(1.12); box-shadow:0 0 36px rgba(183,124,255,.28); } }
.demo-source { box-shadow:0 35px 90px rgba(0,0,0,.32); transition:filter .6s,transform .6s,opacity .6s; }
.diagnostic-demo.is-resolved .demo-source { filter:saturate(.7) contrast(.92); opacity:.68; transform:rotate(-1deg) scale(.985); }
.demo-resolution { box-shadow:0 35px 100px rgba(0,0,0,.38); }
.diagnostic-demo.is-resolved .demo-resolution { box-shadow:0 35px 100px rgba(0,0,0,.45),0 0 0 1px rgba(114,226,167,.12); }
.landing-reveal { opacity:0; transform:translateY(24px); filter:blur(4px); transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1),filter .8s; }
.landing-reveal.is-visible { opacity:1; transform:none; filter:none; }
.final-cta .action-primary { box-shadow:0 18px 70px rgba(183,124,255,.18); }
.final-cta .action-primary:hover { box-shadow:0 24px 90px rgba(183,124,255,.28); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 6rem; }
  .hero-copy { max-width: 820px; }
  .hero h1 { font-size: clamp(4rem, 10vw, 6.5rem); }
  .intake { width: min(100%, 720px); }
  .hero-scroll { display: none; }
  .proof-intro { grid-template-columns: 1fr; margin-left: 4%; }
  .diagnostic-demo { grid-template-columns: 1fr; }
  .demo-trigger { width: 100%; min-height: 64px; flex-direction: row; padding: .8rem 1rem; }
  .demo-trigger > span:nth-child(2) { writing-mode: initial; transform: none; }
  .demo-source { transform: none; }
  .capability, .trust { grid-template-columns: 1fr; gap: 4rem; }
  .capability-detail { max-width: 700px; margin-left: auto; width: 72%; }
}

@media (max-width: 760px) {
  .landing-body .osok-topnav { min-height: 60px; padding: .65rem 1rem; }
  .landing-body .osok-topnav-logo img { height: 27px; }
  .hero { min-height: auto; padding: 5.5rem 1.25rem 4rem; gap: 3.5rem; }
  .field-axis { left: 86%; }
  .field-focus { left: 86%; width: 90vw; }
  .eyebrow { font-size: .58rem; }
  .hero h1 { font-size: clamp(3.25rem, 15vw, 5.2rem); line-height: .9; }
  .hero-lede { margin-top: 1.5rem; font-size: .98rem; }
  .hero-proof { display: grid; gap: .35rem; }
  .hero-proof > span[aria-hidden] { display: none; }
  .intake-body { min-height: 390px; padding: 2rem 1.2rem; }
  .intake h2 { font-size: 2rem; }
  .intake-option { padding: .9rem .15rem; }
  .proof, .capability, .trust, .final-cta { padding: 6rem 1.25rem; }
  .section-index { display: none; }
  .proof-intro { margin-left: 0; }
  .proof h2, .capability h2, .trust-origin h2, .final-cta h2 { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .diagnostic-demo { margin-top: 3rem; }
  .demo-source, .demo-resolution { min-height: 410px; padding: 1.6rem; }
  .source-reaction { left: 1.6rem; }
  .capability-statement { padding-left: 0; }
  .capability-detail { width: 100%; margin: 0; }
  .trust { gap: 3rem; }
  .landing-footer { grid-template-columns: 1fr; padding: 2rem 1.25rem; gap: 1.2rem; }
  .landing-footer nav { gap: .8rem 1.1rem; }
  .landing-footer small { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .landing-reveal { opacity:1; transform:none; filter:none; }
}