/* About and For researchers (docs/design/about.html, researchers.html). Scoped to .inf. */
.inf { --ink-faint: #9A8F80; --cond: var(--sans); --mono: ui-monospace, SFMono-Regular, Menlo, monospace; padding-bottom: 56px; }
.inf .kick { font: 600 11px/1 var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.inf .kick.r { color: var(--seal); }
.inf .crumbs { font: 400 13px/1.4 var(--sans); color: var(--ink-soft); padding: 20px 0 0; }
.inf .ah { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(24px, 4vw, 56px); align-items: end; padding: 22px 0 28px; }
@media (max-width: 960px) { .inf .ah { grid-template-columns: 1fr; } }
.inf .ah .kick { display: block; margin: 0 0 14px; }
.inf .ah h1 { font: 600 clamp(38px, 5vw, 60px)/1.03 var(--serif); letter-spacing: -.025em; margin: 0 0 16px; }
.inf .ah .lead { font: 400 20px/1.6 var(--serif); color: #3e3830; margin: 0; max-width: 56ch; }
.inf .facts { border: 1px solid var(--rule); border-radius: 16px; background: var(--white); overflow: hidden; }
.inf .facts dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.inf .facts dl > div { padding: 13px 15px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.inf .facts dl > div:nth-child(2n) { border-right: 0; }
.inf .facts dt { font: 600 10px/1.2 var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.inf .facts dd { margin: 5px 0 0; font: 600 16px/1.25 var(--serif); }
.inf .facts .off { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; font: 400 13px/1.45 var(--sans); color: var(--ink-soft); background: #FBF3E2; }
.inf .facts .off p { margin: 0; }
.inf .facts .off b { color: var(--ink); }
.inf .anch { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--paper); z-index: 10; }
.inf .anch a { font: 500 13.5px/1 var(--sans); text-decoration: none; padding: 8px 12px; border-radius: 99px; border: 1px solid var(--rule); background: var(--white); color: var(--ink); }
.inf .anch a:hover { border-color: var(--ink); }
@media (max-width: 760px) { .inf .anch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .inf .anch a { flex: none; } }
.inf .intro { padding: 34px 0 10px; }
.inf .intro p { font: 400 22px/1.6 var(--serif); color: #2c2721; max-width: 62ch; margin: 0 0 .6em; }
.inf .row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: 36px 0; border-top: 1px solid var(--rule); scroll-margin-top: 64px; }
@media (max-width: 900px) { .inf .row { grid-template-columns: 1fr; gap: 12px; } }
.inf .rh { position: sticky; top: 64px; align-self: start; }
.inf .rh .no { display: block; font: 600 11px/1 var(--cond); letter-spacing: .08em; color: var(--seal); margin-bottom: 10px; }
.inf .rh h2 { font: 600 clamp(24px, 2.6vw, 32px)/1.15 var(--serif); margin: 0; letter-spacing: -.01em; }
@media (max-width: 900px) { .inf .rh { position: static; } }
.inf .rb { min-width: 0; }
.inf .rb p { font-size: 18.5px; line-height: 1.75; margin: 0 0 1.05em; max-width: 68ch; }
.inf .rb code { font: 500 .85em/1.4 var(--mono); background: var(--paper-deep); border-radius: 4px; padding: 1px 5px; }
.inf .contains { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 1.3em; }
@media (max-width: 700px) { .inf .contains { grid-template-columns: 1fr 1fr; } }
.inf .contains a { display: block; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); padding: 12px 14px; text-decoration: none; color: var(--ink); }
.inf .contains b { display: block; font: 700 24px/1 var(--serif); }
.inf .contains small { display: block; font: 500 12.5px/1.3 var(--sans); color: var(--ink-soft); margin-top: 6px; }
.inf .steps { list-style: none; margin: 0 0 1.3em; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); counter-reset: s; }
@media (max-width: 700px) { .inf .steps { grid-template-columns: 1fr; } }
.inf .steps li { counter-increment: s; padding: 14px 16px 14px 0; position: relative; }
.inf .steps li::before { content: counter(s, decimal-leading-zero); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 12px/1 var(--cond); margin-bottom: 10px; }
.inf .steps li::after { content: ""; position: absolute; left: 34px; right: 0; top: 31px; height: 2px; background: var(--rule); }
.inf .steps li:last-child::after { display: none; }
@media (max-width: 700px) { .inf .steps li::after { display: none; } }
.inf .steps b { display: block; font: 600 16px/1.25 var(--serif); }
.inf .steps span { display: block; font: 400 13.5px/1.5 var(--sans); color: var(--ink-soft); margin-top: 4px; }
.inf .callout { border-left: 3px solid var(--seal); background: var(--white); border-radius: 0 12px 12px 0; padding: 16px 18px; margin: 0 0 1.3em; }
.inf .callout p { margin: 0; font: 400 16px/1.6 var(--sans); color: #3e3830; }
.inf .refs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 1.3em; }
@media (max-width: 700px) { .inf .refs { grid-template-columns: 1fr; } }
.inf .refs a { display: block; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); padding: 12px 14px; text-decoration: none; color: var(--ink); }
.inf .refs small { font: 600 10px/1 var(--cond); letter-spacing: .06em; color: var(--ink-faint); }
.inf .refs b { display: block; font: 600 15px/1.3 var(--serif); margin: 6px 0 2px; }
.inf .refs span { font: 500 12px/1 var(--sans); color: var(--seal); }
.inf .pull { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--seal); font: italic 400 23px/1.5 var(--serif); }
.inf .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; border-radius: 16px; background: var(--ink); color: var(--paper); padding: 20px 22px; margin: 28px 0 0; }
.inf .cta b { font: 600 19px/1.3 var(--serif); }
.inf .cta span { font: 400 14px/1.5 var(--sans); opacity: .8; flex: 1; min-width: 220px; }
.inf .cta a { height: 42px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--seal); color: var(--paper); text-decoration: none; font: 600 14px/1 var(--sans); }
.inf .cta a.o { background: none; border: 1px solid rgba(243, 237, 226, .4); }
.inf .ap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 1.2em; }
@media (max-width: 860px) { .inf .ap { grid-template-columns: 1fr; } }
.inf .ap a { display: block; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); padding: 14px; text-decoration: none; color: var(--ink); }
.inf .ap small { font: 600 10px/1 var(--cond); letter-spacing: .06em; color: var(--ink-faint); }
.inf .ap b { display: block; font: 600 16px/1.25 var(--serif); margin: 6px 0 4px; }
.inf .ap code { display: block; font: 500 12px/1.4 var(--mono); color: var(--seal); word-break: break-all; background: none; padding: 0; }
.inf .ap span { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--ink-soft); margin-top: 4px; }
.inf .kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 18px; margin: 0 0 1.2em; font: 400 15px/1.45 var(--sans); border: 1px solid var(--rule); border-radius: 12px; background: var(--white); padding: 14px 16px; }
.inf .kv dt { font: 600 11px/1.6 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.inf .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.inf .kv dd p { font-size: 15px; line-height: 1.45; margin: 0; }
.inf .copy { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ink); border-radius: 12px; background: var(--white); padding: 10px 10px 10px 14px; margin: 0 0 1.2em; }
.inf .copy code { flex: 1; font: 500 14px/1.4 var(--mono); word-break: break-all; background: none; padding: 0; }
.inf .copy button { height: 34px; padding: 0 12px; border-radius: 8px; border: 0; background: var(--ink); color: var(--paper); font: 600 12px/1 var(--sans); cursor: pointer; }
.inf pre.req { margin: 0 0 8px; padding: 12px 14px; border-radius: 10px; background: var(--ink); color: #EDE6D8; font: 500 12.5px/1.6 var(--mono); overflow-x: auto; }
.inf .tbl { width: 100%; border-collapse: collapse; font: 400 14px/1.4 var(--sans); margin: 0 0 1.2em; border: 1px solid var(--rule); background: var(--white); }
.inf .tbl th, .inf .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.inf .tbl th { font: 600 11px/1 var(--cond); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); background: var(--paper); }
.inf .ds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 1.2em; }
@media (max-width: 860px) { .inf .ds { grid-template-columns: 1fr; } }
.inf .ds a { display: block; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); padding: 14px; text-decoration: none; color: var(--ink); }
.inf .ds b { display: block; font: 600 16px/1.25 var(--serif); }
.inf .ds small { display: block; font: 400 12.5px/1.4 var(--sans); color: var(--ink-soft); margin: 4px 0 8px; word-break: break-all; }
.inf .ds span { font: 600 10px/1 var(--cond); letter-spacing: .05em; border-radius: 5px; padding: 4px 7px; background: var(--paper-deep); margin-right: 4px; }
.inf .lic { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); padding: 16px; margin: 0 0 1.2em; }
.inf .lic .cc { font: 700 15px/1.2 var(--sans); border: 2px solid var(--ink); border-radius: 10px; padding: 10px 12px; text-align: center; color: var(--ink); text-decoration: none; max-width: 120px; }
.inf .lic ul { margin: 0; padding-left: 18px; font: 400 14px/1.6 var(--sans); }
.inf .lic li.no { color: var(--ink-soft); }
.inf .lic li.no::marker { content: "✕  "; }
@media (max-width: 600px) { .inf .kv { grid-template-columns: 1fr; gap: 4px 0; } .inf .kv dd { margin-bottom: 8px; } .inf .lic { grid-template-columns: 1fr; } .inf .tbl { display: block; overflow-x: auto; } }