/* Margin landing pages. Loaded after app.css, which supplies the tokens, band, sheets, buttons and footer. */
.static .nav{display:flex}
.static .menubtn{display:none}
.static .bar .btn{flex:none;margin:0 0 0 auto}
@media (max-width:720px){
  .static .nav{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .static .bar .btn{display:none}
}

.eyebrow{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0 0 14px;color:var(--cover-ink-2);font-size:var(--t-1);letter-spacing:.02em}
.eyebrow a{color:inherit;text-decoration:none}
.eyebrow a:hover{color:var(--cover-ink);text-decoration:underline;text-underline-offset:3px}
.eyebrow span[aria-hidden]{opacity:.5}
.hero .row{margin-top:24px}
.hside{flex:none;display:grid;gap:14px;align-content:start;min-width:12rem;padding:20px 22px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hside div{display:grid;gap:2px}
.hside b{font-weight:500;font-size:var(--t4);letter-spacing:-.04em;line-height:1;color:var(--cover-ink);font-variant-numeric:tabular-nums}
.hside span{color:var(--cover-ink-2);font-size:var(--t-1)}
@media (max-width:820px){.hside{grid-auto-flow:column;justify-content:start;gap:28px;min-width:0}}

.doc h3{font-weight:600;font-size:var(--t1);letter-spacing:-.02em;margin:26px 0 8px}
.doc .katex-display{margin:.6em 0}
.lede{font-size:var(--t1);color:var(--ink);line-height:1.5;max-width:58ch}

/* worked examples */
.exs{display:grid;gap:14px}
.ex{border-radius:10px;background:var(--sheet-2);padding:18px 20px 16px;box-shadow:inset 0 0 0 1px var(--line)}
.ex-lv{display:flex;align-items:center;gap:8px;margin:0 0 10px;color:var(--ink-3);font-size:var(--t-1);font-weight:500;letter-spacing:.02em}
.ex-lv i{display:inline-flex;gap:3px}
.ex-lv i b{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.ex-lv i b.on{background:var(--dot)}
.ex-psg{margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid var(--line);font-family:"Noto Serif",Georgia,serif;font-size:1.02rem;line-height:1.65;color:var(--ink)}
.ex-psg p + p{margin-top:8px}
.ex .blank{display:inline-block;width:3.6em;height:1em;border-bottom:1.5px solid currentColor;vertical-align:-.12em;margin:0 .1em}
.ex-stem{font-size:1.02rem;line-height:1.6;color:var(--ink)}
.ex-ch{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.ex-ch li{display:flex;gap:10px;align-items:baseline;padding:8px 12px;border-radius:10px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line)}
.ex-ch li > b{flex:none;display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-3);font-size:.75rem;font-weight:600;color:var(--ink-2)}
.ex details{margin-top:12px}
.ex summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--accent-ink);font-weight:550;list-style:none}
.ex summary::-webkit-details-marker{display:none}
.ex summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.ex details[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.ex-ans{margin-top:10px;padding:12px 14px;border-radius:8px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);line-height:1.6}
.ex-ans .ok{display:block;margin-bottom:6px;color:var(--good);font-weight:600}
.ex-src{margin-top:10px;color:var(--ink-3);font-size:var(--t-1)}

/* tables and lists */
.kv{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.kv th,.kv td{padding:10px 12px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.kv thead th{border-top:0;color:var(--ink-3);font-size:var(--t-1);font-weight:500}
.kv th[scope="row"],.kv td.l,.kv thead th.l{text-align:left;white-space:normal;padding-left:0}
.kv th[scope="row"]{font-weight:500;color:var(--ink)}
.kv tr.grp th{padding-top:18px;color:var(--ink-3);font-size:var(--t-1);font-weight:600;text-align:left;padding-left:0;letter-spacing:.03em}
.kv tfoot td,.kv tfoot th{font-weight:600;color:var(--ink)}
.tablewrap{overflow-x:auto;margin:6px 0 0}
.ticks{list-style:none;padding:0;margin:4px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:26px;color:var(--ink-2);line-height:1.6;max-width:66ch}
.ticks li::before{content:"";position:absolute;left:3px;top:.48em;width:9px;height:5px;border-left:2px solid var(--dot);border-bottom:2px solid var(--dot);transform:rotate(-45deg)}
.ticks b{color:var(--ink);font-weight:600}
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.tiers div{padding:16px 18px;border-radius:10px;background:var(--sheet-2);display:grid;gap:4px}
.tiers b{font-weight:500;font-size:var(--t4);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.tiers span{color:var(--ink-2);font-weight:550}
.tiers small{color:var(--ink-3);font-size:var(--t-1);line-height:1.4}

/* test list */
.trow .tm{display:block;color:var(--ink-3);font-size:var(--t-1)}
.trow .tn{font-weight:550}
.st-tests .trow{grid-template-columns:minmax(0,1fr) auto}
.st-tests .trow .row{flex-wrap:nowrap}

/* calls to action and related links */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px}
.cta h2{font-weight:600;font-size:var(--t2);letter-spacing:-.03em;line-height:1.15}
.cta p{color:var(--ink-2);max-width:52ch;margin-top:6px}
.cn-grid .cn-card .cn-m{color:var(--ink-3);font-size:var(--t-1)}

/* about and privacy */
.legal p,.legal li{max-width:68ch}
.legal .updated{color:var(--ink-3);font-size:var(--t-1)}