/* Promoter Atlas — product page.
 *
 * The token block, the type scale, the spacing scale and the component shapes below are
 * the research atlas's (public/index.html), copied so the two surfaces read as one
 * instrument. Plain CSS on purpose: no build step, no framework. Edit, then run
 * scripts/deploy_product_site.sh --apply.
 *
 * ONE RIGHT EDGE — the rule that keeps the page from looking assembled out of parts:
 *     --measure == --container - 2 x 24px      (div.wrap's padding-inline, 1.5rem)
 *     50.75rem  == 860px      - 48px == 812px
 * Every section uses the same div.wrap, so headings, prose, cards, charts and the form
 * all stop at the same x. There is no wide variant and no exception list — a block that
 * cannot fit (a wide table, a chart) scrolls INSIDE the measure instead.
 */

:root{
 color-scheme:light dark;

 /* -- ground and ink -- */
 --bg:#f5f6f2;          /* cool paper, faint green bias */
 --card:#fbfcfa;        /* raised surface */
 --sunk:#eceee7;        /* inset: sequences, code */
 --fg:#12201a;          /* green-black */
 --muted:#55625b;
 --line:#e2e6de;
 --line-2:#cfd6cc;

 /* -- one accent, used with restraint. --accent is a CHROME colour (borders, marks,
       filled grounds) and never carries text; --accent-text is the accented TEXT
       colour and clears 4.5:1 on every ground here. -- */
 --accent:#0e9fd0;
 --accent-strong:#0b7ba6;
 --accent-soft:rgba(14,159,208,.08);
 --accent-text:#0a7099;
 --on-accent:#fff;
 --link:color-mix(in oklab,var(--accent) 69%,var(--fg));

 /* -- the DNA base marks: the brand's categorical data palette -- */
 --base-a:#c77a24; --base-t:#2f72cf; --base-c:#0e9c8c; --base-g:#7a57c8;
 --s1:var(--base-t);    /* the record's own value */
 --s2:var(--base-a);    /* what it is measured against */

 --ok:#0f7a5a; --warn:#b4441d; --warnbg:#fbf0eb;
 --mark:#c9741c; --none:#7b877e;
 --none-text:#656f68; --mark-text:#8a5a00; --s2-text:#9f5713;

 --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
        Helvetica,Arial,sans-serif;
 --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

 /* -- one type scale. Every font-size on this page is one of these. -- */
 --t-micro:.68rem; --t-xs:.74rem; --t-sm:.84rem; --t-md:.94rem; --t-base:1rem;
 --t-lg:1.12rem;
 --t-h2:clamp(1.5rem,2.8vw,2.1rem);
 --t-h1:clamp(2.1rem,5.2vw,3.3rem);
 --t-lede:clamp(1.04rem,1.5vw,1.18rem);
 --t-metric:clamp(1.6rem,3.4vw,2.2rem);

 --sp-1:.35rem; --sp-2:.6rem; --sp-3:1rem; --sp-4:1.6rem; --sp-5:2.6rem; --sp-6:4rem;

 --measure:50.75rem;
 --container:860px;
 --radius:6px; --radius-sm:4px;
 --track:.1em;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
 --bg:#0d1512; --card:#121c17; --sunk:#0a1210;
 --fg:#e7ede8; --muted:#95a49b; --line:#22302a; --line-2:#33453c;
 --accent:#35b4e2; --accent-strong:#6ccbee; --accent-soft:rgba(53,180,226,.10);
 --accent-text:#35b4e2; --on-accent:#08120f;
 --link:color-mix(in oklab,var(--accent) 84%,var(--fg));
 --a-underline:underline;
 --base-a:#dfa055; --base-t:#6fa2e8;
 --ok:#4bbd93; --warn:#e08a63; --warnbg:#2a1a13;
 --mark:#dba24a; --none:#6f8177;
 --none-text:#9aa79f; --mark-text:#dba24a; --s2-text:#dfa055;
}}
:root[data-theme="dark"]{
 --bg:#0d1512; --card:#121c17; --sunk:#0a1210;
 --fg:#e7ede8; --muted:#95a49b; --line:#22302a; --line-2:#33453c;
 --accent:#35b4e2; --accent-strong:#6ccbee; --accent-soft:rgba(53,180,226,.10);
 --accent-text:#35b4e2; --on-accent:#08120f;
 --link:color-mix(in oklab,var(--accent) 84%,var(--fg));
 --a-underline:underline;
 --base-a:#dfa055; --base-t:#6fa2e8;
 --ok:#4bbd93; --warn:#e08a63; --warnbg:#2a1a13;
 --mark:#dba24a; --none:#6f8177;
 --none-text:#9aa79f; --mark-text:#dba24a; --s2-text:#dfa055;
}

/* ── base ──────────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--bg);color:var(--fg);
 font:var(--t-base)/1.62 var(--sans);
 overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img{max-width:100%}

a{color:var(--link);text-decoration-line:var(--a-underline,none);text-underline-offset:3px;
 text-decoration-thickness:1px;transition:color .15s ease}
a:hover{color:var(--accent-strong);text-decoration-line:underline}
::selection{background:var(--accent-strong);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

h1,h2,h3,h4{line-height:1.14;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.032em;line-height:1.04;
 margin:0 0 var(--sp-2);max-width:var(--measure)}
h2{font-size:var(--t-h2);font-weight:700;letter-spacing:-.026em;
 margin:var(--sp-6) 0 var(--sp-3);padding-bottom:var(--sp-1);
 border-bottom:1px solid var(--line);max-width:var(--measure)}
h2::before{content:"\25C6";color:var(--accent);font-size:.5em;vertical-align:.28em;
 margin-right:.7em;letter-spacing:0}
h3{font-size:var(--t-lg);font-weight:650;letter-spacing:-.012em;
 margin:var(--sp-4) 0 var(--sp-2);max-width:var(--measure)}
h4{font-size:var(--t-md);font-weight:650;margin:var(--sp-3) 0 var(--sp-1);max-width:var(--measure)}
p{max-width:var(--measure);margin:0 0 var(--sp-3)}
ul,ol{max-width:var(--measure)}
code{font-family:var(--mono);font-size:.875em}

/* THE UTILITY VOICE — mono, uppercase, wide-tracked. */
.mono-lab,.tile .k,.badge,.btn,.sitenav nav a,.seqbar button,.eyebrow{
 font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track);
 text-transform:uppercase;font-weight:500;
 /* Tracking treats a space like any other letter, so a multi-word label — FIND A
    PROMOTER, DOWNLOAD COMPLETE FASTA — ended up with gaps wider than its words. Pull the
    word gaps back by about what the tracking added; the tracking itself stays, because it
    is what makes this voice recognisable. */
 word-spacing:-.22em}

/* ONE container. Every section's inner div is this and nothing else. */
div.wrap{max-width:var(--container);margin:0 auto;padding:var(--sp-5) 1.5rem var(--sp-6)}

/* ── site header ───────────────────────────────────────────────────────────────────── */
.sitenav{position:sticky;top:0;z-index:40;
 background:color-mix(in srgb,var(--bg) 93%,transparent);
 backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
/* ONE LINE, ALWAYS. The bar carried five items — wordmark, product label and three nav
   entries — with a --sp-4 (25.6px) gap inside an 860px rail, and wrapped to two lines
   between roughly 700px and 900px. `flex-wrap:nowrap` is the guarantee; the gap steps down
   and the product label drops out below 900px so nothing has to wrap to fit. */
.sitenav-in{max-width:var(--container);margin:0 auto;padding:.6rem 1.5rem;display:flex;
 align-items:center;gap:var(--sp-3);flex-wrap:nowrap;min-height:56px}
.wordmark{text-decoration:none;color:var(--fg);display:inline-flex;align-items:center;gap:.6rem}
.wordmark:hover{color:var(--fg);text-decoration-line:none}
.wordmark img{height:26px}
.wordmark .sep{width:1px;height:20px;background:var(--line-2)}
.wordmark .prod{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track);
 text-transform:uppercase;color:var(--muted);word-spacing:-.22em}
.sitenav nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-3);
 flex-wrap:nowrap;white-space:nowrap}
.sitenav nav a{color:var(--muted);text-decoration:none}
.sitenav nav a:hover{color:var(--fg);text-decoration-line:none}
.sitenav nav a.btn{color:var(--on-accent)}
@media (max-width:900px){.wordmark .prod,.wordmark .sep{display:none}}
/* Below this the three items cannot share a line with the wordmark; the catalogue
   link goes first and the request button is the last thing to leave. */
@media (max-width:620px){.sitenav nav a[href="#why"]{display:none}}
@media (max-width:470px){.sitenav nav a:not(.btn){display:none}}
/* At 320px (the narrowest phone still in use) even the wordmark plus the button overran
   the rail and the bar grew a second line. Shrink both rather than dropping either. */
@media (max-width:380px){
 .sitenav-in{padding-inline:1rem;gap:var(--sp-2)}
 .wordmark img{height:22px}
 .sitenav nav a.btn{padding:.4rem .6rem;font-size:var(--t-micro)}
}

/* ── buttons ───────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
 text-decoration:none;text-align:center;
 padding:.62rem 1.05rem;border-radius:var(--radius);border:1px solid var(--accent-strong);
 background:var(--accent-strong);color:var(--on-accent);cursor:pointer;
 transition:all .2s ease;white-space:normal;max-width:100%;font-family:var(--mono)}
.btn:hover{background:color-mix(in oklab,var(--accent-strong) 82%,var(--fg));
 border-color:color-mix(in oklab,var(--accent-strong) 82%,var(--fg));
 color:var(--on-accent);text-decoration-line:none}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--accent-text);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
.btn-sm{padding:.42rem .7rem}

/* ── shared blocks ─────────────────────────────────────────────────────────────────── */
.eyebrow{color:var(--accent-text);margin:0 0 var(--sp-2)}
.lede{font-size:var(--t-lede);color:var(--muted);max-width:var(--measure);
 margin:var(--sp-3) 0 0;line-height:1.5}
.kv{font-size:var(--t-sm);color:var(--muted);line-height:1.6;overflow-wrap:anywhere;
 max-width:var(--measure)}
.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
 padding:var(--sp-3) 1.1rem;min-width:0;margin:var(--sp-3) 0}
.badge{display:inline-block;font-family:var(--mono);font-size:var(--t-micro);font-weight:600;
 padding:.12rem .45rem;border-radius:var(--radius-sm);border:1px solid var(--line-2);
 color:var(--muted);white-space:nowrap;vertical-align:middle;max-width:100%;
 overflow-wrap:anywhere;letter-spacing:.04em;text-transform:none}
.badge.on{border-color:var(--accent);color:var(--accent-text)}
.badge.new{border-color:var(--mark);color:var(--mark-text)}

.grid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
 margin:var(--sp-4) 0}
.tile{padding:1.1rem 1.15rem 1.2rem;background:var(--card);border:1px solid var(--line);
 border-radius:var(--radius);min-width:0;overflow-wrap:break-word}
.tile .k{color:var(--accent-text);display:block}
.tile .v{font-family:var(--sans);font-size:var(--t-metric);font-weight:750;
 letter-spacing:-.03em;line-height:1.02;margin:var(--sp-2) 0 0;font-variant-numeric:tabular-nums}
.tile .d{font-size:var(--t-sm);color:var(--muted);margin:var(--sp-1) 0 0;line-height:1.4}

.ticks{list-style:none;padding:0;margin:var(--sp-3) 0}
.ticks li{position:relative;padding-left:1.5rem;margin-bottom:var(--sp-2)}
.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;
 border-radius:2px;background:var(--accent)}
.two-col{columns:2;column-gap:var(--sp-4)}
@media (max-width:640px){.two-col{columns:1}}

.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:var(--sp-2);
 margin:var(--sp-3) 0}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
 padding:var(--sp-3) 1.05rem}
.case p{font-size:var(--t-sm);color:var(--muted);margin:0;max-width:none}
.case h4{margin:0 0 var(--sp-1)}
.case .k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track);
 text-transform:uppercase;color:var(--mark-text);display:block;margin-bottom:var(--sp-1)}

.econ{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--sp-2);align-items:stretch;
 margin:var(--sp-4) 0 var(--sp-2)}
@media (max-width:640px){.econ{grid-template-columns:1fr}.econ-arrow{display:none}}
.econ-col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
 padding:var(--sp-3) 1.05rem}
.econ-col.after{border-color:var(--accent);background:var(--accent-soft)}
.econ-col .k{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:var(--track);
 text-transform:uppercase;color:var(--muted);display:block}
.econ-col .v{font-size:1.7rem;font-weight:750;letter-spacing:-.03em;margin:var(--sp-1) 0}
.econ-col .d{font-size:var(--t-sm);color:var(--muted);margin:0}
.econ-arrow{align-self:center;color:var(--accent);font-size:1.4rem}

.valuegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--sp-3);
 margin:var(--sp-3) 0}
.value{border-left:2px solid var(--accent);padding-left:var(--sp-3)}
.value h4{margin:0 0 var(--sp-1)}
.value p{font-size:var(--t-sm);color:var(--muted);margin:0;max-width:none}

.workflow{counter-reset:step;list-style:none;display:grid;gap:var(--sp-1);
 grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
 padding:0;margin:var(--sp-4) 0 0;max-width:var(--measure)}
.workflow li{counter-increment:step;background:var(--card);
 border:1px solid var(--line);border-radius:var(--radius);padding:.55rem .7rem;
 font-size:var(--t-sm)}
.workflow li::before{content:counter(step);display:inline-flex;align-items:center;
 justify-content:center;width:18px;height:18px;margin-right:.45rem;border-radius:var(--radius-sm);
 background:var(--accent-soft);color:var(--accent-text);font-family:var(--mono);
 font-size:var(--t-micro)}

/* ── the pair form ─────────────────────────────────────────────────────────────────── */
.pairbar{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--sp-3);align-items:end;
 background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
 padding:var(--sp-3) 1.1rem;margin:var(--sp-4) 0 var(--sp-2)}
@media (max-width:700px){.pairbar{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--muted)}
.field-full{grid-column:1/-1}
select,input[type=text],input[type=email],textarea{
 width:100%;padding:.55rem .65rem;font:inherit;font-size:var(--t-md);
 color:var(--fg);background:var(--bg);border:1px solid var(--line-2);
 border-radius:var(--radius)}
textarea{min-height:88px;resize:vertical}
.req{color:var(--warn)}
.hp{position:absolute;left:-9999px;opacity:0}

/* ── a candidate record — the atlas's `.rec` shape ─────────────────────────────────── */
.rec{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);
 padding:.95rem 1.1rem;min-width:0;margin:var(--sp-2) 0}
.rec-head{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;min-width:0}
.rec-id{font-weight:650;font-size:var(--t-md)}
.rec-body{margin-top:var(--sp-2)}
.seqblk{margin-top:var(--sp-2)}
.seq{font-family:var(--mono);font-size:var(--t-micro);line-height:1.5;word-break:break-all;
 color:var(--muted);max-height:6.4rem;overflow:auto;background:var(--sunk);
 border:1px solid var(--line);border-radius:var(--radius-sm);padding:.5rem .6rem;
 letter-spacing:.04em}
.seqbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;margin-top:var(--sp-2);
 font-size:var(--t-sm);color:var(--muted)}
.more{font-size:var(--t-sm);color:var(--muted);margin:var(--sp-2) 0 var(--sp-4)}
.note{font-size:var(--t-sm);color:var(--muted);border-left:2px solid var(--line-2);
 padding-left:var(--sp-3);margin:var(--sp-3) 0 0;max-width:var(--measure)}
.requested{font-size:var(--t-md);background:var(--accent-soft);border:1px solid var(--accent);
 border-radius:var(--radius);padding:.5rem .75rem;margin:0 0 var(--sp-2);max-width:var(--measure)}

/* the chart: two bars on one axis — target cell vs off-target cell */
svg.chart{width:100%;max-width:100%;height:auto;display:block}
svg.chart .con{fill:var(--s1)}
svg.chart .coff{fill:var(--none)}
svg.chart .cax{stroke:currentColor;opacity:.28}
svg.chart .cref{stroke:var(--s2);stroke-dasharray:3 3;opacity:.9}
svg.chart .cval{font-family:var(--mono);font-size:12px;fill:var(--fg)}
svg.chart .ckey{font-family:var(--sans);font-size:12px;fill:var(--muted)}
svg.chart .ctext{font-family:var(--sans);font-size:10.5px;fill:var(--muted)}

/* ── result + status ───────────────────────────────────────────────────────────────── */
.result{margin-top:var(--sp-4)}
.leadform{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-3)}
@media (max-width:640px){.leadform{grid-template-columns:1fr}}
.formnote{grid-column:1/-1;font-size:var(--t-sm);color:var(--muted);margin:0}
.formactions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.status{grid-column:1/-1;font-size:var(--t-md);padding:.5rem .7rem;border-radius:var(--radius);margin:0}
.status-error{background:var(--warnbg);color:var(--warn)}
.status-ok{background:var(--accent-soft);color:var(--ok)}
.downloads{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}

/* ── footer ────────────────────────────────────────────────────────────────────────── */
.footer{background:var(--card);border-top:1px solid var(--line)}
.footer div.wrap{padding-top:var(--sp-4);padding-bottom:var(--sp-4)}
.footer-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-4)}
@media (max-width:700px){.footer-cols{grid-template-columns:1fr}}
.footer p{font-size:var(--t-sm);margin:0 0 var(--sp-1)}
.footer h5{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:var(--track);
 text-transform:uppercase;color:var(--muted);margin:0 0 var(--sp-2);font-weight:500}
.footer img{height:24px;margin-bottom:var(--sp-2)}
.ruo{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--line);
 font-size:var(--t-xs);color:var(--muted);line-height:1.55}
.copyright{font-size:var(--t-xs);color:var(--muted);margin-top:var(--sp-2)}