/* ============================================================
   O'pka AI — light editorial-clinical
   Fraunces (display serif) · Hanken Grotesk (body) · IBM Plex Mono (labels)
   ============================================================ */
:root{
  --paper:#f4f1ea; --surface:#fffdf8; --surface-2:#faf8f1;
  --ink:#191b1f; --ink-soft:#54575e; --faint:#8b8e96;
  --line:#e4dfd3; --line-soft:#ece8dd;
  --accent:#0c6b5b; --accent-ink:#0a4f43; --accent-soft:#e4efe9;
  --danger:#c2422a; --danger-soft:#f6e6df;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1080px;
  --shadow:0 1px 2px rgba(25,27,31,.04),0 12px 28px -18px rgba(25,27,31,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility; overflow-x:hidden;
}
::selection{background:var(--accent);color:#fff}
a{color:inherit;text-decoration:none}
em{font-style:italic}
strong{font-weight:600}
code{font-family:var(--mono);font-size:.84em;background:var(--surface-2);
  border:1px solid var(--line);padding:.05em .38em;border-radius:5px;color:var(--accent-ink)}

h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;line-height:1.04;color:var(--ink)}
.eyebrow{font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);}
.lead{font-size:1.18rem;line-height:1.5;color:var(--ink-soft);max-width:60ch;margin-bottom:40px}
.micro{font-size:.9rem;color:var(--faint);margin-bottom:18px}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  min-height:66px;padding:12px clamp(20px,5vw,48px);background:rgba(244,241,234,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line)}
.nav__brand{display:flex;align-items:center;gap:9px;min-width:0}
.nav__logo{width:30px;height:30px;border-radius:8px;box-shadow:0 5px 14px -12px rgba(25,27,31,.45);flex:0 0 auto}
.nav__dot{width:10px;height:10px;border-radius:50%;background:var(--accent);align-self:center;flex:0 0 auto}
.nav__word{font-family:var(--serif);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;white-space:nowrap}
.nav__sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--faint)}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2.6vw,32px);font-size:.94rem}
.nav__links a{color:var(--ink-soft);border-bottom:2px solid transparent;padding-bottom:2px;transition:color .2s,border-color .2s}
.nav__links a:hover,.nav__links a.is-active{color:var(--ink);border-color:var(--accent)}
.nav__cta{font-weight:600;color:var(--accent)!important}
@media(max-width:760px){.nav__links a:not(.nav__cta){display:none}.nav__sub{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:.96rem;
  padding:13px 24px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:all .18s}
.btn--solid{background:var(--accent);color:#fff;box-shadow:var(--shadow)}
.btn--solid:hover{background:var(--accent-ink);transform:translateY(-1px)}
.btn--solid:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn--ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn--ghost:hover{border-color:var(--ink);background:var(--surface-2)}
.btn--block{width:100%;justify-content:center;margin-top:16px}

/* ---------- HERO ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:clamp(48px,8vw,96px) clamp(20px,5vw,40px) clamp(30px,5vw,56px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:880px){.hero{grid-template-columns:1fr;gap:34px}}
.hero__title{font-size:clamp(2.7rem,6.4vw,4.6rem);font-weight:600;margin:20px 0 24px;max-width:14ch}
.hero__lead{font-size:clamp(1.08rem,1.6vw,1.28rem);color:var(--ink-soft);max-width:48ch;margin-bottom:26px}
.byline{font-family:var(--mono);font-size:.86rem;color:var(--ink-soft);margin-bottom:30px}
.byline strong{color:var(--ink);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:42px}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(22px,4vw,44px);border-top:1px solid var(--line);padding-top:26px}
.hero__stats dt{font-family:var(--serif);font-weight:600;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1}
.hero__stats dd{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-top:7px}

.hero__figure{margin:0}
.hero__frame{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:#0b0d11;box-shadow:var(--shadow);aspect-ratio:1/1}
.hero__frame img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05)}
.hero__tick{position:absolute;width:16px;height:16px;border:2px solid rgba(255,255,255,.7)}
.hero__tick--tl{top:12px;left:12px;border-right:0;border-bottom:0}
.hero__tick--tr{top:12px;right:12px;border-left:0;border-bottom:0}
.hero__tick--bl{bottom:12px;left:12px;border-right:0;border-top:0}
.hero__tick--br{bottom:12px;right:12px;border-left:0;border-top:0}
.hero__figure figcaption{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--faint);margin-top:12px;text-align:center}

/* ---------- strip / note ---------- */
.strip{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;gap:14px;
  background:var(--danger-soft);border:1px solid #ecd3c9;border-radius:10px;
  padding:14px 20px;margin-top:8px}
.strip__tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--danger);border:1px solid #e3bdb0;border-radius:999px;padding:4px 10px;flex:0 0 auto}
.strip p{font-size:.96rem;color:#7c3b29}

/* ---------- section scaffold ---------- */
.section{max-width:var(--maxw);margin:0 auto;padding:clamp(56px,8vw,108px) clamp(20px,5vw,40px)}
.shead{display:flex;align-items:baseline;gap:16px;border-top:1px solid var(--line);padding-top:22px;margin-bottom:26px}
.shead__no{font-family:var(--mono);font-size:.84rem;color:var(--accent);letter-spacing:.05em}
.shead h2{font-size:clamp(2rem,4vw,2.9rem)}
.subh{font-family:var(--serif);font-size:1.3rem;font-weight:600;margin-bottom:4px}

/* ---------- pullquote ---------- */
.pullquote{max-width:var(--maxw)}
.pullquote blockquote{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.2vw,2.3rem);
  line-height:1.22;letter-spacing:-.015em;border-left:3px solid var(--accent);padding-left:clamp(18px,3vw,30px);
  margin:14px 0 26px;max-width:24ch}
.pullquote blockquote em{color:var(--accent-ink)}
.pullquote__body{font-size:1.1rem;color:var(--ink-soft);max-width:60ch}

/* ---------- stat row ---------- */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:34px}
.stat{padding:26px 24px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.stat:last-child{border-right:0}
.stat__n{font-family:var(--serif);font-weight:600;font-size:2.4rem;line-height:1}
.stat__l{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
@media(max-width:680px){.statrow{grid-template-columns:1fr 1fr}.stat:nth-child(2){border-right:0}.stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ---------- class chips ---------- */
.classchips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:42px}
.chip{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;font-size:.92rem;color:var(--ink-soft)}
.chip i{width:9px;height:9px;border-radius:50%;display:inline-block}

/* ---------- figures ---------- */
.figure{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 26px;box-shadow:var(--shadow)}
.figure img{width:100%;height:auto;display:block;border-radius:8px}
.figure figcaption{font-family:var(--serif);font-style:italic;font-size:.92rem;color:var(--faint);margin-top:12px;padding:0 6px;line-height:1.5}
.figrow{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.figrow{grid-template-columns:1fr}}

/* ---------- method steps ---------- */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:26px}
.steps li{counter-increment:s;padding:26px 22px;border-right:1px solid var(--line)}
.steps li:last-child{border-right:0}
.steps li::before{content:"0" counter(s);font-family:var(--mono);font-size:.78rem;color:var(--accent);display:block;margin-bottom:14px}
.steps__k{font-family:var(--serif);font-weight:600;font-size:1.18rem;display:block;margin-bottom:8px}
.steps li p{font-size:.93rem;color:var(--ink-soft);line-height:1.55}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}.steps li:nth-child(2){border-right:0}.steps li:nth-child(1),.steps li:nth-child(2){border-bottom:1px solid var(--line)}}
@media(max-width:480px){.steps{grid-template-columns:1fr}.steps li{border-right:0;border-bottom:1px solid var(--line)}.steps li:last-child{border-bottom:0}}
.modelbar{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft);background:var(--surface-2);
  border:1px solid var(--line);border-radius:11px;padding:16px 20px;display:flex;flex-wrap:wrap;gap:8px 28px}
.modelbar b{color:var(--accent-ink);font-weight:500}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);
  border-radius:14px;overflow:hidden;background:var(--surface);margin-bottom:52px}
.metric{padding:26px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.metric:last-child{border-right:0}
.metric--hi{background:var(--accent-soft)}
.metric__v{font-family:var(--serif);font-weight:600;font-size:2.3rem;line-height:1;color:var(--ink)}
.metric--hi .metric__v{color:var(--accent-ink)}
.metric__l{font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);line-height:1.4}
@media(max-width:820px){.metrics{grid-template-columns:repeat(2,1fr)}.metric{border-bottom:1px solid var(--line)}.metric:nth-child(2){border-right:0}.metric:last-child{grid-column:1/-1}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-bottom:48px}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:46px}}

/* confusion matrix */
.confusion{display:flex;flex-direction:column;gap:6px}
.cm-row{display:grid;grid-template-columns:110px repeat(4,1fr);gap:6px;align-items:stretch}
.cm-corner,.cm-head,.cm-rowlabel{font-family:var(--mono);font-size:.68rem;color:var(--faint);display:flex;align-items:center}
.cm-head{justify-content:center;text-align:center;line-height:1.15;padding:2px}
.cm-rowlabel{justify-content:flex-end;text-align:right;padding-right:8px;color:var(--ink-soft)}
.cm-cell{aspect-ratio:1.8;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);
  font-weight:500;font-size:1.05rem;color:var(--ink);border:1px solid var(--line-soft)}

/* per-class bars */
.perclass{display:flex;flex-direction:column;gap:20px}
.pc__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.pc__name{font-weight:600;font-size:1rem}
.pc__name i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:9px}
.pc__f1{font-family:var(--mono);font-size:.82rem;color:var(--ink-soft)}
.pc__track{height:8px;border-radius:5px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.pc__fill{height:100%;border-radius:5px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.pc__sub{display:flex;gap:18px;margin-top:7px;font-family:var(--mono);font-size:.74rem;color:var(--faint)}

/* ---------- DEMO ---------- */
.demo{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:880px){.demo{grid-template-columns:1fr}}
.downloadbar{display:flex;flex-wrap:wrap;gap:12px;margin:-18px 0 28px}
.dropzone{position:relative;border:1.5px dashed var(--line);border-radius:14px;min-height:300px;
  display:grid;place-items:center;cursor:pointer;background:var(--surface);overflow:hidden;transition:all .18s}
.dropzone:hover,.dropzone:focus-visible,.dropzone.drag{border-color:var(--accent);background:var(--accent-soft);outline:none}
.dropzone__empty{text-align:center;color:var(--ink-soft);padding:30px}
.dropzone__empty svg{color:var(--accent);margin-bottom:12px}
.dropzone__empty p{font-size:.95rem;line-height:1.5}
.dropzone__preview{max-width:100%;max-height:340px;border-radius:10px;display:block}
.dropzone__scan{position:absolute;left:0;right:0;height:40%;
  background:linear-gradient(180deg,transparent,rgba(12,107,91,.16),transparent);opacity:0;pointer-events:none}
.dropzone.scanning .dropzone__scan{opacity:1;animation:scan 1.3s ease-in-out infinite}
@keyframes scan{0%{top:-40%}100%{top:100%}}
.samples{margin-top:16px}
.samples__label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.samples__row{display:flex;gap:10px;margin-top:10px}
.samples__row img{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid var(--line);
  cursor:pointer;transition:all .16s;background:#0b0d11}
.samples__row img:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.status{font-family:var(--mono);font-size:.78rem;color:var(--faint);margin-top:12px;min-height:1.2em}
.status.ok{color:var(--accent-ink)} .status.err{color:var(--danger)}

.verdict{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;min-height:300px;box-shadow:var(--shadow)}
.verdict--ph{display:grid;place-items:center;color:var(--faint);font-family:var(--serif);font-style:italic;box-shadow:none;background:var(--surface-2)}
.verdict__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.verdict__label{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.verdict__risk{font-family:var(--mono);font-size:.74rem;font-weight:500;padding:5px 12px;border-radius:999px}
.risk-cancer{color:var(--danger);background:var(--danger-soft);border:1px solid #e3bdb0}
.risk-normal{color:var(--accent-ink);background:var(--accent-soft);border:1px solid #bfddd2}
.verdict__name{font-family:var(--serif);font-weight:600;font-size:2rem;line-height:1.08;color:var(--ink)}
.verdict__conf{font-family:var(--mono);font-size:.86rem;color:var(--ink-soft);margin:6px 0 22px}
.probs{display:flex;flex-direction:column;gap:13px}
.prob__top{display:flex;justify-content:space-between;font-size:.92rem;margin-bottom:5px}
.prob__pct{font-family:var(--mono);color:var(--ink-soft)}
.prob__track{height:9px;border-radius:5px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.prob__fill{height:100%;border-radius:5px;width:0;transition:width .9s cubic-bezier(.2,.8,.2,1)}
.verdict__note{font-size:.78rem;color:var(--faint);margin-top:20px;line-height:1.5}

/* ---------- AUTHORS ---------- */
.authorgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);max-width:680px}
@media(max-width:560px){.authorgrid{grid-template-columns:1fr 1fr;gap:18px}}
.author{margin:0;text-align:center}
.author__photo{position:relative;width:100%;max-width:230px;margin:16px auto 0;aspect-ratio:1/1;border-radius:18px;
  overflow:hidden;background:var(--accent-soft);border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow)}
.author__photo::before{content:attr(data-initials);font-family:var(--serif);font-weight:600;font-size:3.2rem;color:var(--accent)}
.author__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.author figcaption{margin-top:18px}
.author figcaption .author__photo:first-child{margin-top:0}
.author figcaption h3{font-size:1.35rem}
.author figcaption p{font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--faint);margin-top:5px}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--line);margin-top:30px;background:var(--surface-2)}
.footer__refs{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,6vw,70px) clamp(20px,5vw,40px)}
.footer__brand{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:1.4rem;margin-bottom:14px}
.footer__by{color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.footer__refs h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.footer__refs ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer__refs li{font-size:.86rem;color:var(--ink-soft);padding-left:16px;position:relative;line-height:1.5}
.footer__refs li::before{content:"—";position:absolute;left:0;color:var(--faint)}
.footer__fine{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px) 40px;
  font-family:var(--mono);font-size:.74rem;color:var(--faint)}

/* ---------- reveal (progressive enhancement) ---------- */
.reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal{opacity:0;transform:translateY(16px)}
.js .reveal.is-visible{opacity:1;transform:none}
.hero .reveal[data-d="1"]{transition-delay:.05s}
.hero .reveal[data-d="2"]{transition-delay:.12s}
.hero .reveal[data-d="3"]{transition-delay:.19s}
.hero .reveal[data-d="4"]{transition-delay:.26s}
.hero .reveal[data-d="5"]{transition-delay:.33s}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .dropzone.scanning .dropzone__scan{animation:none}
}