/* Preview site: tokens and sizes taken from the Figma pages (Technology 375:2, TN-01..10). */
:root {
  --ink:#1A1A2E; --ink-2:#1C2130; --stone:#5A6070; --cloud:#F7F9FC; --cold:#EDF1F6; --sand:#F6F2EC; --white:#FFFFFF;
  --rule:#D0D5DE; --hair:#D5DCE6; --blue:#2D7DD2; --bronze:#C98A00; --bronze-text:#8A5E00; --plum-dark:#552A4A;
  --nav:#111120; --foot:#1A1A2E; --radius:16px; --ease:cubic-bezier(.2,.7,.2,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body { font-family:"DM Sans",system-ui,sans-serif; color:var(--ink); background:var(--cloud); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:1208px; margin:0 auto; padding:0 24px; }
.mono { font-family:"DM Mono",monospace; }

.preview-bar { background:#2E2E44; color:#E9E6F2; font:500 12px/1 "DM Mono",monospace; letter-spacing:.06em; text-align:center; padding:8px 16px; }

/* nav */
.nav { background:var(--nav); position:sticky; top:0; z-index:10; }
.nav-in { max-width:1208px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; gap:32px; }
.logo img { height:28px; width:auto; }
.navlinks { display:flex; gap:28px; margin-left:auto; }
.navlinks a { color:#D9DCE6; font-size:15px; } .navlinks a.on { color:#fff; }
.btn { display:inline-block; border-radius:8px; font-weight:700; font-size:16px; padding:13px 22px; text-decoration:none !important; }
.btn-sm { padding:8px 16px; font-size:15px; }
.btn-bronze { background:var(--bronze); color:var(--ink); }
.btn-outline { border:1px solid var(--rule); color:var(--ink); background:#fff; }
.btn-light { background:#fff; color:var(--ink); }
.btn-ghost { border:1px solid rgba(255,255,255,.6); color:#fff; }

/* type */
.eyebrow { font-size:13px; line-height:20px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze); }
.eyebrow.mono { font:500 13px/1 "DM Mono",monospace; letter-spacing:.08em; color:var(--stone); }
h1 { font-size:52px; line-height:58px; font-weight:700; letter-spacing:-.01em; }
h2 { font-size:28px; line-height:1.4; font-weight:700; }
.lead { color:var(--stone); font-size:18px; line-height:1.55; max-width:60ch; }

/* tech-note header */
.tn-head { background:var(--cold); padding:40px 0 56px; }
.crumb a { font-size:14px; font-weight:500; }
.tag { display:flex; align-items:center; gap:12px; margin:22px 0 18px; }
.pill { background:#fff; border:1px solid var(--hair); border-radius:999px; padding:6px 14px; color:var(--bronze-text); font-size:14px; font-weight:700; }
.tag .num { color:var(--stone); font-size:13px; font-weight:500; }
.meta { display:flex; flex-wrap:wrap; gap:16px 56px; margin-top:20px; }
.meta span { display:block; color:var(--stone); font-size:13px; font-weight:500; line-height:20px; }
.meta b { display:block; font-size:17px; font-weight:400; line-height:26px; margin-top:4px; }
.tn-head .lead { margin-top:14px; }

/* tech-note body: 860 reading column, 1160 figures */
.tn-body { padding:72px 24px 96px; display:flex; flex-direction:column; gap:40px; }
.tn-body > section.prose, .tn-body > .inshort, .tn-body > .caption { max-width:860px; }
.inshort { border-top:1px solid var(--rule); padding-top:28px; }
.inshort ul { margin-top:14px; padding-left:22px; color:var(--ink-2); font-size:18px; line-height:28px; }
.inshort li + li { margin-top:8px; }
.prose h2 { margin-top:14px; }
.prose p { color:var(--stone); font-size:18px; line-height:28px; margin-top:14px; }
.prose p strong { color:var(--ink); font-weight:700; }
.prose .eyebrow + h2 { margin-top:14px; }
.prose > p.eyebrow { margin-top:0; color:var(--bronze); }
.fig { margin:0; }
.fig img { width:100%; height:auto; border-radius:var(--radius); background:#EEF1F5; }   /* reserved, tinted box while the image loads */
.fig.narrow img { width:auto; max-width:100%; margin:0 auto; }
.fig figcaption, .caption { color:var(--stone); font-size:15px; line-height:20px; margin-top:16px; max-width:1160px; }
.tn-body > .caption { margin-top:-24px; }
.table { overflow-x:auto; -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; min-width:560px; }
th { text-align:left; font-size:13px; font-weight:700; color:var(--stone); padding:0 16px 12px 0; border-bottom:1px solid var(--rule); }
td { font-size:16px; line-height:24px; color:var(--ink); padding:14px 16px 14px 0; border-bottom:1px solid var(--hair); vertical-align:top; }
td:first-child { font-weight:500; }

/* related */
.related { margin-top:24px; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px; }
.card { color:inherit; text-decoration:none !important; }
.card .cover { border-radius:12px; overflow:hidden; background:var(--cold); }
.card .cover img { width:100%; }
.card-eb { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; letter-spacing:.06em; margin-top:18px; }
.dot { width:7px; height:7px; border-radius:50%; background:var(--bronze); }
.card h3 { font-size:20px; line-height:28px; margin-top:8px; }
.card p { color:var(--stone); font-size:14px; line-height:19px; margin-top:6px; }
.tags span { display:inline-block; border:1px solid var(--hair); border-radius:999px; font-size:11px; padding:3px 8px; margin-top:12px; color:var(--stone); }
.card:hover h3 { color:var(--blue); }

/* index */
.notes { padding:48px 24px 96px; }
.noterow { display:grid; grid-template-columns:80px 1fr auto; gap:16px; align-items:baseline; padding:20px 0; border-bottom:1px solid var(--hair); color:inherit; text-decoration:none !important; }
.noterow .num { color:var(--bronze-text); font-weight:700; font-size:14px; }
.noterow b { display:block; font-size:20px; } .noterow small { color:var(--stone); font-size:15px; }
.noterow .rt { color:var(--stone); font-size:14px; }
.noterow:hover b { color:var(--blue); }

/* technology page */
.band { padding:100px 0; } .sand { background:var(--sand); } .cloud { background:var(--cloud); } .white { background:#fff; }
.band h2 { font-size:clamp(30px,3.4vw,40px); line-height:1.2; letter-spacing:-.01em; margin-top:16px; max-width:24ch; }
.band .lead { margin-top:16px; }
.band .fig { margin-top:48px; }
.hero { padding:72px 0 64px; }
.hero .lockup { height:52px; width:auto; }
.display { font-size:clamp(40px,5.6vw,64px); line-height:1.08; letter-spacing:-.02em; margin-top:28px; max-width:14ch; }
.hero .lead { margin-top:20px; max-width:460px; }
.actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.proofline { color:var(--stone); font-size:14px; margin-top:20px; white-space:pre-wrap; }
.stack { position:relative; margin:64px 0 0; }
.stack > img:not(:first-child) { position:absolute; height:auto; }
.stack figcaption { color:var(--stone); font-size:15px; margin-top:12px; }
.decisions { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; margin-top:48px; border-top:1px solid var(--rule); padding-top:28px; }
.decision span { color:var(--bronze); font-size:14px; }
.decision h3 { font-size:21px; line-height:1.25; margin-top:10px; }
.decision p { color:var(--stone); font-size:16px; line-height:24px; margin-top:10px; }
.fold { border-top:1px solid var(--rule); padding:16px 0; margin-top:24px; }
.fold summary { cursor:pointer; font-weight:700; font-size:17px; }
.fold p { color:var(--stone); margin-top:14px; line-height:1.5; }
.fold .fig { margin-top:20px; }
.fold .table { margin-top:20px; }
.usecards { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:48px; }
.usecard { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.usecard img { border-radius:12px; }
.usecard p { color:var(--stone); line-height:1.5; margin-top:10px; }
.bio { margin-top:64px; max-width:860px; }
.bio .links a { margin-right:28px; font-weight:500; }
.bio .links { margin-top:16px; }
.configs { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:48px; }
.config img { border-radius:12px; }
.config h3 { font-size:24px; margin-top:8px; }
.config .eyebrow { margin-top:20px; }
.kv div { border-top:1px solid var(--hair); padding:12px 0; }
.kv span { display:block; color:var(--stone); font-size:13px; }
.kv b { display:block; font-weight:500; font-size:16px; margin-top:4px; line-height:1.4; }
.kv { margin-top:16px; }
.bigstat { font-size:28px; margin-top:20px; } .bigstat b { font-size:52px; }
.curvefig { margin-top:48px; }
.curvefig h3 { font-size:24px; }
svg.plot { width:100%; height:auto; display:block; overflow:visible; margin-top:24px; }
.plot text { font-family:"DM Mono",monospace; font-size:12px; fill:var(--stone); }
.plot .grid line { stroke:#E4DED5; stroke-width:1; }
.plot .marker { stroke:var(--rule); stroke-dasharray:3 4; }
.plot .data { fill:none; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.plot .fit { fill:none; stroke:var(--ink); stroke-width:1.1; opacity:0; transition:opacity .8s var(--ease); }
.plot .fade { opacity:0; transition:opacity .6s var(--ease); }
.plot .cursor { stroke:var(--ink); stroke-width:1; opacity:0; }
.shown .fit { opacity:.55; } .shown .fade, .axes-on .axes { opacity:1; }
.readout { display:flex; gap:40px; margin-top:28px; opacity:0; transform:translateY(8px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.shown .readout { opacity:1; transform:none; }
.readout div { font:500 28px/1 "DM Mono",monospace; }
.readout small { display:block; font:400 13px/1.4 "DM Sans",sans-serif; color:var(--stone); margin-top:8px; }
.curvefig .caption { margin-top:20px; max-width:70ch; }
.replay { background:none; border:0; font:inherit; color:var(--blue); cursor:pointer; margin-top:16px; font-size:15px; }
blockquote { font-size:24px; line-height:1.45; max-width:860px; margin-top:72px; }
blockquote cite { display:block; font-style:normal; color:var(--stone); font-size:14px; margin-top:14px; }

/* CTA + footer */
.cta { background:var(--plum-dark); color:#fff; padding:80px 0; }
.center { text-align:center; } .cta h2 { font-size:36px; }
.cta p { max-width:620px; margin:16px auto 0; color:#EBDDE7; font-size:18px; line-height:1.55; }
.cta .actions { justify-content:center; }
.foot { background:var(--foot); color:#C9CCD6; padding:64px 0 0; font-size:15px; }
.foot .cols { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px; }
.foot h4 { color:#fff; font-size:15px; margin-bottom:12px; }
.foot a { display:block; color:#C9CCD6; margin-top:12px; } .foot a.gold { color:var(--bronze); }
.foot p { margin-top:12px; line-height:1.5; }
.foot .bottom { border-top:1px solid #2E3044; margin-top:48px; padding:22px 0; font-size:14px; color:#8B8FA0; }

/* tablet / phone */
@media (max-width:960px) {
  .navlinks { display:none; } .nav-in .btn { margin-left:auto; }
  .cards, .configs, .decisions { grid-template-columns:1fr; }
  .usecards, .usecard { grid-template-columns:1fr; }
  .foot .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .wrap, .nav-in { padding-left:16px; padding-right:16px; }
  .tn-body { padding:48px 16px 64px; gap:32px; }
  h1 { font-size:36px; line-height:42px; } h2 { font-size:24px; }
  .meta { gap:32px; } .prose p, .inshort ul, .lead { font-size:17px; line-height:27px; }
  .band { padding:64px 0; } .readout { gap:20px; } .readout div { font-size:20px; }
  .foot .cols { grid-template-columns:1fr; } .bigstat b { font-size:40px; }
  .noterow { grid-template-columns:56px 1fr; } .noterow .rt { display:none; }
  .stack > img:last-of-type { display:none; }
}
@media (prefers-reduced-motion:reduce) { .plot *, .readout { transition:none !important; } }

/* animated explainer (explainer.js) */
.explainer { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; background:#fff; border-radius:var(--radius); padding:40px; }
.ex-panel h4 { font-size:17px; font-weight:700; margin-bottom:14px; } .ex-panel h4 span { margin-right:10px; }
.explainer svg { width:100%; height:auto; display:block; overflow:visible; }
.ex-lbl { font:400 11px "DM Sans",sans-serif; fill:#5A6070; } .ex-blue { fill:#2D7DD2; }
.ex-tick { font:400 11px "DM Mono",monospace; fill:#5A6070; }
.ex-val { font:600 12px "DM Sans",sans-serif; fill:#C98A00; }
.ex-legend { display:flex; align-items:center; gap:6px; color:var(--stone); font-size:13px; margin-top:10px; }
.ex-legend img { width:20px; height:auto; } .ex-legend img + img, .ex-legend img:nth-of-type(2) { margin-left:12px; }
.band .fig.anim .explainer { background:transparent; padding:0; }
@media (max-width:760px) { .explainer { grid-template-columns:1fr; padding:24px; gap:28px; } .ex-panel svg { max-width:420px; } }

/* text cards (TN-03 four pillars) */
.tcards { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tcard { border-top:1px solid var(--rule); padding-top:16px; }
.tcard h3 { font-size:17px; line-height:1.3; } .tcard p { color:var(--stone); font-size:15px; line-height:1.5; margin-top:8px; }
@media (max-width:960px) { .tcards { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .tcards { grid-template-columns:1fr; } }
picture { display:block; }

/* phone: each table row becomes a block, cells labelled with their column heading */
@media (max-width:600px) {
  .table table { min-width:0; } .table thead { display:none; }
  .table table, .table tbody { display:block; width:100%; }   /* else the table sizes to its longest cell and clips it */
  .table tr { display:block; border-bottom:1px solid var(--rule); padding:10px 0; }
  .table td { display:block; border:0; padding:4px 0; }
  .table td:first-child { font-size:17px; padding-top:6px; }
  .table td:not(:first-child)::before { content:attr(data-label); display:block; font-size:12px; font-weight:700; color:var(--stone); margin-bottom:2px; }
  .table td[data-label=""]::before { display:none; }
}

/* ---- auto-rendered site pages (auto.py) ---- */
.band.auto { padding:var(--pt) 0 var(--pb); }
.auto .t { font-size:var(--fs); margin:0; }
.auto .row { display:flex; } .auto .row.wrap { flex-wrap:wrap; }
.auto .col { display:flex; flex-direction:column; }
.auto .cell { min-width:0; } .auto .cell > * { width:100%; }
.auto .cell > .t { width:auto; }
.auto .pic { width:100%; height:auto; display:block; }
.auto video.pic { border-radius:12px; background:#fff; }
.auto a.arrow { text-decoration:none; } .auto a.arrow:hover { text-decoration:underline; }
.auto hr.rule { border:0; border-top:1px solid var(--rule); width:100%; margin:0; }
.phero { background-repeat:no-repeat; background-position:bottom center; background-size:100% 300px; padding:56px 0 64px; }
.phero-in { display:grid; grid-template-columns:460px 1fr; gap:48px; align-items:center; }
.phero-copy .t { font-size:var(--fs); }
.phero-visual { margin:0; } .phero-visual .stack { position:relative; width:100%; }
.phero-visual .stack img { position:absolute; height:auto; }
.phero-visual figcaption .t { margin-top:12px; }
.subnav { position:sticky; top:56px; z-index:9; background:rgba(255,255,255,.96); border-bottom:1px solid var(--hair); backdrop-filter:blur(6px); }
.subnav-in { display:flex; align-items:center; gap:24px; height:56px; }
.subnav-links { display:flex; gap:28px; margin-left:auto; overflow-x:auto; scrollbar-width:none; }
.subnav-links a { color:var(--stone); font-size:15px; white-space:nowrap; }
@media (max-width:960px) {
  .phero-in { grid-template-columns:1fr; }
  .auto .row { flex-direction:column; } .auto .cell { flex:1 1 auto !important; }
  .auto .row.wrap, .auto .row:has(> .cell > [data-n^="Button"]) { flex-direction:row; flex-wrap:wrap; }
  .auto .row:has(> .cell > [data-n^="Button"]) > .cell { flex:0 0 auto !important; }
  .subnav-in b { display:none; } .subnav-links { margin-left:0; }
}
@media (max-width:600px) {
  .band.auto { padding:calc(var(--pt) * .6) 0 calc(var(--pb) * .6); }
  .auto .t.xl, .phero-copy .t.xl { font-size:calc(var(--fs) * .66); }
  .auto .t.lg { font-size:calc(var(--fs) * .78); }
  .auto [style*="padding"] { padding-left:min(16px, 4vw) !important; padding-right:min(16px, 4vw) !important; }
}

.auto [data-n^="Button"] .t, .auto [data-n^="Button"] { white-space:nowrap; }
.curvefig.inline { margin-top:0; } .curvefig.inline svg.plot { margin-top:0; }
.phero-visual .buildup { position:absolute; }
.phero-visual .buildup .bu { position:absolute; height:auto; opacity:0; transform:translateY(4%); animation:bu-in .9s cubic-bezier(.2,.7,.2,1) forwards; }
.bu-p4spr { animation-delay:.3s !important; } .bu-pro, .bu-pump { animation-delay:1.3s !important; } .bu-nexas { animation-delay:2.3s !important; }
@keyframes bu-in { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .phero-visual .buildup .bu { animation:none; opacity:1; transform:none; } }

/* ---- imported app notes + protocols (note body) ---- */
.note-actions { margin-top:24px; }
.notes-h { font-size:22px; margin:8px 0 4px; }
.note-body { padding:56px 24px 96px; max-width:908px; }
.note-body h2 { font-size:28px; line-height:1.3; margin:48px 0 0; } .note-body h2:first-child { margin-top:0; }
.note-body h3 { font-size:20px; margin:32px 0 0; } .note-body h4 { font-size:17px; margin:24px 0 0; }
.note-body p, .note-body li { color:var(--stone); font-size:18px; line-height:28px; }
.note-body p { margin-top:14px; } .note-body ul, .note-body ol { margin:14px 0 0 22px; } .note-body li + li { margin-top:6px; }
.note-body strong { color:var(--ink); }
.note-body figure { margin:32px 0 0; background:#fff; border-radius:16px; padding:24px; }
.note-body figure img { width:auto; max-width:100%; height:auto; display:block; margin:0 auto; }   /* never upscale small originals */ .note-body figcaption { color:var(--stone); font-size:15px; line-height:21px; margin-top:12px; }
.note-body .table { margin-top:24px; } .note-body table { min-width:520px; }
.note-body .finding { border-left:3px solid var(--bronze); padding:4px 0 4px 20px; margin-top:28px; }
.note-body .finding p { color:var(--ink); }
.note-body .tcards { margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.note-body .tcard h4, .note-body .tcard h3 { margin-top:0; }
.note-body .notice, .note-body .notices { border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:12px 0; margin-top:20px; }
@media (max-width:600px) { .note-body { padding:40px 16px 64px; } .note-body .tcards { grid-template-columns:1fr; } .note-body figure { padding:12px; }
  .note-body h2 { font-size:23px; } .note-body p, .note-body li { font-size:17px; line-height:27px; } }

.note-body svg { max-width:100%; height:auto; }
@media (max-width:600px) { .meta { gap:12px 28px; } .meta b { font-size:15px; } }

.auto a.cardlink { display:block; color:inherit; text-decoration:none; border-radius:12px; transition:background .2s; }
.auto a.cardlink:hover { background:rgba(45,125,210,.05); } .auto a.cardlink:hover h3 { color:var(--blue); }
.auto a.cardlink > div::after { content:"Read the application note →"; color:var(--blue); font-size:14px; font-weight:500; margin-top:4px; }

/* imported note details (2026-10-11) */
.note-body p.caption { font-size:15px; line-height:21px; margin-top:12px; }
.note-body tr.hl td { background:#FBF3E2; font-weight:600; }
.note-body tr.group td { background:#F1F3F6; font-weight:700; }
.note-body td.muted { color:var(--stone); }
.note-body .callout-value { font-size:24px; font-weight:700; color:var(--ink); }
.note-body .ref, .note-body .ref p { font-size:14px; line-height:20px; color:var(--stone); }
.note-body .equation { font-family:"DM Mono",monospace; text-align:center; margin:20px 0; color:var(--ink); }
.note-body h3 + .table, .note-body h3 + figure { margin-top:16px; }

/* ---- guides / cheat sheets (build_guides, 2026-10-21): note header, tcards, related-card look, pill chips ---- */
[hidden] { display:none !important; }
.cs-body { padding:64px 24px 96px; display:flex; flex-direction:column; gap:56px; }
.cs-phases h2, .cs-group h2, .cs-related h2 { font-size:28px; }
.cs-fig { margin-top:24px; max-width:860px; } .cs-fig img { background:#fff; padding:24px; }
.cs-five { grid-template-columns:repeat(5,1fr); margin-top:28px; }
.cs-letter { font:500 22px/1 "DM Mono",monospace; color:var(--bronze-text); margin-bottom:10px; }
.cs-bar { position:sticky; top:56px; z-index:8; background:rgba(247,249,252,.96); backdrop-filter:blur(6px);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin:0 -24px; padding:14px 24px; }
.cs-bar-in { display:flex; align-items:center; gap:16px; }
.cs-ask { font-size:14px; font-weight:700; white-space:nowrap; }
.cs-chips { display:flex; flex-wrap:wrap; gap:8px; }
.cs-chip { font:500 14px/1 "DM Sans",sans-serif; color:var(--stone); background:#fff; border:1px solid var(--hair);
  border-radius:999px; padding:8px 14px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.cs-chip:hover { border-color:var(--stone); color:var(--ink); }
.cs-chip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.cs-clear { margin-left:auto; background:none; border:0; font:500 14px "DM Sans",sans-serif; color:var(--blue); cursor:pointer; white-space:nowrap; }
.cs-none { color:var(--stone); font-size:17px; }
.cs-group .lead { margin-top:10px; }
.cs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px 32px; margin-top:32px; }
.cs-card { scroll-margin-top:140px; border-radius:12px; transition:box-shadow .4s; }
.cs-card .cover { border-radius:12px; overflow:hidden; background:#fff; padding:14px; }
.cs-card .cover img { width:100%; }
.cs-card.nocover { border-top:1px solid var(--rule); padding-top:4px; }
.cs-card h3 { font-size:20px; line-height:28px; margin-top:8px; }
.cs-card .tags span { margin:10px 6px 0 0; }
.cs-lists { margin-top:16px; display:flex; flex-direction:column; gap:14px; }
.cs-lists h4 { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--stone); }
.cs-lists ul { margin:6px 0 0 18px; } .cs-lists li { font-size:15px; line-height:22px; color:var(--ink-2); } .cs-lists li + li { margin-top:4px; }
.cs-note { margin-top:14px; font-size:14px; line-height:20px; color:var(--stone); border-left:2px solid var(--bronze); padding-left:12px; }
.cs-card.flash { box-shadow:0 0 0 3px var(--blue); }
.cs-related .noterow { grid-template-columns:80px 1fr; }
@media (max-width:960px) { .cs-grid { grid-template-columns:1fr 1fr; } .cs-five { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) {
  .cs-body { padding:40px 16px 64px; gap:40px; }
  .cs-grid, .cs-five { grid-template-columns:1fr; }
  .cs-bar { margin:0 -16px; padding:10px 16px; } .cs-bar-in { flex-wrap:wrap; gap:8px 12px; }
  .cs-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%; order:3; padding-bottom:2px; }
  .cs-chip { white-space:nowrap; } .cs-clear { order:2; }
  .cs-fig img { padding:10px; } .cs-phases h2, .cs-group h2, .cs-related h2 { font-size:24px; }
}
.cs-fig { max-width:640px; }
.cs-card .cover img { aspect-ratio:5/3; object-fit:contain; }
.cs-five .cs-letter { color:var(--bronze-text); }
@media (max-width:600px) {
  .cs-five { gap:0; } .cs-five .tcard { display:grid; grid-template-columns:28px 1fr; column-gap:8px; padding:12px 0; }
  .cs-five .cs-letter { margin:0; grid-row:span 2; font-size:18px; line-height:22px; } .cs-five .tcard p:not(.cs-letter) { margin-top:2px; }
}

/* ---- note-style guides (2026-10-21): static vs kinetic, sensor selector, sensorgram explained ---- */
.note-body .tcard .eyebrow { margin:0 0 6px; color:var(--bronze); font-size:12px; }
.note-body .tcard-img { max-width:260px; width:100%; margin:16px 0 4px; }
.note-body .tcard svg { width:100%; max-width:320px; height:auto; display:block; margin:4px 0 12px; }
.note-body .tcard ul { margin-top:10px; } .note-body .tcard li { font-size:16px; line-height:24px; }
.note-body .ref { margin-top:16px; }
/* sensor selector (2026-10-21): three questions left, the answer sticks on the right; full sensor + kit tables below */
.note-body.guide-sensors-guide { max-width:1208px; }
.ss { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:48px; align-items:start; }
.ss-q { display:grid; grid-template-columns:40px 1fr; gap:16px; padding:28px 0; border-top:1px solid var(--rule); }
.ss-q:first-child { border-top:0; padding-top:0; }
.note-body .ss-n { margin:0; font:500 15px/32px "DM Mono",monospace; color:var(--bronze-text); width:32px; height:32px; border:1px solid var(--hair); border-radius:50%; text-align:center; background:#fff; }
.note-body .ss-q h2 { font-size:22px; line-height:32px; margin:0; }
.note-body .ss-hint { font-size:15px; line-height:22px; margin-top:4px; }
.ss-opts { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ss-opt { font:500 15px/20px "DM Sans",sans-serif; color:var(--ink); background:#fff; border:1px solid var(--hair); border-radius:999px;
  padding:9px 16px; cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.ss-opt:hover { border-color:var(--ink); }
.ss-opt[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.ss-opt:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.ss-res { position:sticky; top:84px; background:#fff; border-radius:16px; padding:28px; }
.note-body .ss-res .eyebrow { margin:0; }
.note-body .ss-empty-t { color:var(--stone); font-size:17px; margin-top:10px; }
.note-body .ss-name { font-size:28px; line-height:34px; margin:10px 0 0; }
.note-body .ss-part { font-size:14px; color:var(--stone); margin-top:4px; }
.note-body .ss-why { font-size:16px; line-height:24px; color:var(--ink); margin-top:14px; }
.ss-facts { min-width:0 !important; margin-top:18px; }
.ss-facts th, .ss-facts td { text-align:left; vertical-align:top; padding:10px 0; border-top:1px solid var(--rule); font-size:15px; line-height:22px; }
.ss-facts th { width:96px; color:var(--stone); font-weight:500; padding-right:12px; }
.ss-facts td { color:var(--ink); } .ss-facts .mono, .ss-also .mono { color:var(--stone); font-size:13px; white-space:nowrap; }
.ss-also { margin-top:6px; }
.note-body .ss-also-h { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-top:18px; }
.note-body .ss-also p:not(.ss-also-h) { font-size:15px; line-height:22px; margin-top:10px; }
.note-body .ss-also .mono { font-size:13px; }
.ss-cta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px; }
.ss-copy { background:none; border:0; padding:0; font:500 15px "DM Sans",sans-serif; color:var(--blue); cursor:pointer; }
.ss-all { margin-top:72px; }
.note-body .ss-all .lead { font-size:17px; }
.ss-table-wrap { overflow-x:auto; margin-top:20px; background:#fff; border-radius:16px; padding:8px 24px 16px; }
.ss-table { min-width:640px !important; }
.ss-table th, .ss-table td { text-align:left; vertical-align:top; padding:12px 16px 12px 0; border-top:1px solid var(--rule); font-size:15px; line-height:22px; }
.ss-table thead th { border-top:0; color:var(--stone); font-weight:500; font-size:13px; }
.ss-table td:first-child { font-weight:700; color:var(--ink); white-space:nowrap; }
.ss-table td { color:var(--stone); } .ss-table td.mono { font-size:13px; white-space:nowrap; }
.ss-table tr.fam th { padding-top:22px; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-text); border-top:0; }
.ss-table tr[data-id] { transition:background .3s; }
.ss-table tr.on td { background:#FBF3E2; } .ss-table tr.on td:first-child { box-shadow:inset 3px 0 0 var(--bronze); padding-left:12px; }
.ss-table tr.alt td { background:var(--cloud); }
.note-body .ss-more { font-size:16px; margin-top:20px; }
@media (max-width:960px) {
  .ss { grid-template-columns:1fr; gap:32px; } .ss-res { position:static; }
}
@media (max-width:600px) {
  .ss-q { grid-template-columns:1fr; gap:8px; padding:22px 0; } .note-body .ss-q h2 { font-size:20px; line-height:28px; }
  .ss-opt { font-size:14px; padding:8px 13px; } .ss-res { padding:20px; margin:0 -4px; }
  .ss-table-wrap { padding:4px 14px 12px; margin-left:-4px; margin-right:-4px; }
}
@media (max-width:600px) {   /* phone: chips wrap in a non-sticky bar (a sticky 3-row bar would hide the cards) */
  .cs-bar { position:static; } .cs-chips { flex-wrap:wrap; overflow:visible; } .cs-chip { padding:7px 12px; font-size:13px; }
}
.cs-fig figcaption { color:var(--stone); font-size:15px; line-height:21px; margin-top:12px; }
.auto a.cardlink.plain > div::after { content:none; }   /* homepage application rows: the row itself is the link */
.auto .vrule { display:block; width:1px; background:var(--rule); align-self:stretch; }   /* vertical hairline between columns */
@media (max-width:960px) { .auto .vrule { display:none; } }
@media (max-width:600px) {   /* phone: sensor and kit rows stack, no sideways scroll */
  .ss-table { min-width:0 !important; } .ss-table thead { display:none; }
  .ss-table, .ss-table tbody, .ss-table tr, .ss-table td, .ss-table th { display:block; width:100%; }
  .ss-table tr[data-id], .ss-kits-row { border-top:1px solid var(--rule); padding:10px 0; }
  .ss-table td { border:0; padding:2px 0; white-space:normal !important; } .ss-table tr.on td:first-child { box-shadow:none; padding-left:0; }
  .ss-table tr.fam th { border:0; padding:18px 0 4px; }
  #ss-kits tr { border-top:1px solid var(--rule); padding:10px 0; }
}

/* ---- reorganization step 1 (2026-10-21): menus, phone menu, Resources filters, field pages ---- */
.navlinks { align-items:center; }
.navlinks .dd { position:relative; }
.navlinks .dd > a::after { content:"▾"; font-size:11px; margin-left:5px; opacity:.7; }
.navlinks .panel { display:none; position:absolute; top:100%; left:-20px; padding:22px 20px 16px; min-width:240px; background:var(--nav);
  border-radius:0 0 12px 12px; box-shadow:0 12px 24px rgba(0,0,0,.25); z-index:20; }
.navlinks .dd:hover .panel, .navlinks .dd:focus-within .panel { display:block; }
.navlinks .panel a { display:block; padding:7px 0; font-size:15px; color:#D9DCE6; white-space:nowrap; }
.navlinks .panel a:hover { color:#fff; text-decoration:none; }
.mnav { display:none; }
.mnav summary { list-style:none; cursor:pointer; color:#fff; font:500 15px "DM Sans",sans-serif; padding:8px 4px; }
.mnav summary::-webkit-details-marker { display:none; }
.mnav[open] summary { color:var(--bronze); }
.mpanel { position:absolute; left:0; right:0; top:100%; background:var(--nav); padding:8px 16px 24px; max-height:calc(100vh - 60px); overflow-y:auto;
  border-top:1px solid #2E3044; }
.mgroup { padding:12px 0; border-bottom:1px solid #2E3044; }
.mgroup a { display:block; color:#D9DCE6; font-size:16px; padding:6px 0; }
.mgroup .mtop { display:block; color:#fff; font-weight:700; font-size:17px; padding:6px 0; }
@media (max-width:960px) {
  .nav-in { position:relative; gap:16px; } .mnav { display:block; }
}

.res-bar { position:sticky; top:56px; z-index:8; background:rgba(247,249,252,.96); backdrop-filter:blur(6px); border-bottom:1px solid var(--hair); padding:14px 0; }
.res-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .res-row + .res-row { margin-top:10px; }
.res-row > span { width:48px; font:500 12px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.res-bar button { font:500 14px/18px "DM Sans",sans-serif; color:var(--ink); background:#fff; border:1px solid var(--hair); border-radius:999px; padding:7px 14px; cursor:pointer; }
.res-bar button:hover { border-color:var(--ink); }
.res-bar button[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.notes[data-type] { padding-top:40px; padding-bottom:8px; scroll-margin-top:150px; }
.notes-sub { color:var(--stone); font-size:16px; margin-bottom:4px; }
.res-end { padding-top:24px; } .res-none, .res-more { color:var(--stone); font-size:16px; } .res-none { margin-bottom:12px; }
.field .notes-h { margin-top:40px; } .field .notes-h:first-child { margin-top:0; }
.field .noterow .num.mono { font-size:12px; font-weight:500; color:var(--stone); }
.field .noterow { grid-template-columns:120px 1fr auto; }
.field-more { margin-top:28px; font-size:16px; }
@media (max-width:600px) {
  .res-bar { position:static; } .res-row > span { width:100%; }
  .res-bar button { font-size:13px; padding:6px 12px; }
  .field .noterow { grid-template-columns:1fr; gap:2px; }
}

/* staging review notes panel (build.py add_review_notes) — never live */
.review { position:fixed; right:20px; bottom:20px; z-index:30; max-width:420px; font-family:"DM Sans",sans-serif; }
.review summary { list-style:none; cursor:pointer; margin-left:auto; width:max-content; background:#FFE8A3; color:var(--ink); border:1px solid #E2C46A;
  border-radius:999px; padding:9px 16px; font-size:14px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.15); }
.review summary::-webkit-details-marker { display:none; }
.review summary b { background:var(--ink); color:#fff; border-radius:999px; padding:1px 8px; margin-left:6px; font-size:12px; }
.review-in { margin-top:10px; background:#FFF8E1; border:1px solid #E2C46A; border-radius:12px; padding:16px 18px 14px; max-height:60vh; overflow-y:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.18); }
.review ol { margin:0 0 0 18px; } .review li { font-size:14px; line-height:20px; color:var(--ink); } .review li + li { margin-top:8px; }
.review-in p { font-size:12px; color:var(--stone); margin-top:12px; } .review code { font-size:11px; }
@media (max-width:600px) { .review { right:12px; bottom:12px; max-width:calc(100% - 24px); } .review-in { max-height:55vh; } }

/* Sensors & kits (2026-10-21): search, Add buttons, your list + quote form (sensors-guide) */
.ss-search { margin-top:72px; }
.ss-search input { width:100%; max-width:560px; font:400 16px "DM Sans",sans-serif; color:var(--ink); background:#fff; border:1px solid var(--hair);
  border-radius:999px; padding:12px 20px; }
.ss-search input:focus { outline:2px solid var(--blue); outline-offset:1px; }
.ss-search + .ss-all { margin-top:40px; }
.ss-add, .ss-del, .ss-qty button { font:500 14px "DM Sans",sans-serif; cursor:pointer; border-radius:999px; }
.ss-add { background:#fff; border:1px solid var(--hair); color:var(--ink); padding:5px 14px; white-space:nowrap; }
.ss-add:hover { border-color:var(--ink); }
.ss-add[aria-pressed="true"] { background:var(--cold); border-color:var(--cold); color:var(--stone); }
.ss-del { background:none; border:0; color:var(--blue); padding:4px 0; }
.ss-qty { display:inline-flex; align-items:center; gap:10px; }
.ss-qty button { width:28px; height:28px; border:1px solid var(--hair); background:#fff; color:var(--ink); padding:0; line-height:1; }
.ss-qty b { min-width:18px; text-align:center; color:var(--ink); }
#ss-list { min-width:520px !important; }
.ss-form { margin-top:24px; background:#fff; border-radius:16px; padding:24px; }
.ss-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; }
.ss-fields label { display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:500; color:var(--stone); }
.ss-fields .wide { grid-column:1 / -1; }
.ss-fields input, .ss-fields textarea { font:400 16px "DM Sans",sans-serif; color:var(--ink); border:1px solid var(--hair); border-radius:8px; padding:10px 12px; background:#fff; }
.ss-form button[type=submit] { border:0; cursor:pointer; font-family:inherit; }
.note-body .ss-small { font-size:14px; margin-top:10px; }
.ss-sent { margin-top:20px; background:var(--cold); border-radius:12px; padding:16px 20px; }
.note-body .ss-sent p { margin-top:0; font-size:16px; } .ss-sent pre { font:500 13px/20px "DM Mono",monospace; margin-top:8px; white-space:pre-wrap; }
.ss-pill { position:fixed; left:20px; bottom:20px; z-index:29; background:var(--ink); color:#fff !important; border-radius:999px; padding:10px 18px;
  font-size:14px; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,.2); text-decoration:none !important; }
.ss-pill.away { display:none; }
.ss-pill b { background:var(--bronze); color:var(--ink); border-radius:999px; padding:1px 8px; margin-left:6px; font-size:12px; }
@media (max-width:600px) {
  .ss-fields { grid-template-columns:1fr; } .ss-form { padding:18px; }
  #ss-list { min-width:0 !important; } .ss-pill { left:12px; bottom:12px; }
  .ss-table td:last-child { padding-top:8px; }
}

/* long links (reference URLs in imported posts) wrap instead of pushing the phone layout sideways */
.note-body a { overflow-wrap:anywhere; }

/* publications (2026-10-21) */
.pubfeat .t a { color:inherit; text-decoration:none; } .pubfeat .t a:hover b { color:var(--blue); }
.pubfeat .rt a { font-size:15px; font-weight:500; white-space:nowrap; }
.pub-find { margin-top:12px; } .pub-find input { flex:1; max-width:420px; font:400 15px "DM Sans",sans-serif; border:1px solid var(--hair);
  border-radius:999px; padding:8px 16px; background:#fff; color:var(--ink); }
.res-row.pub-find > span.pub-count { width:auto; margin-left:8px; text-transform:none; letter-spacing:0; font:500 14px "DM Sans",sans-serif; }
.pub-year { padding-top:32px; } .pub-year:first-child { padding-top:8px; }
.pubrow { display:block; padding:16px 0; border-bottom:1px solid var(--hair); color:inherit; text-decoration:none !important; }
.pubrow b { display:block; font-size:18px; line-height:26px; font-weight:500; color:var(--ink); }
.pubrow:hover b { color:var(--blue); }
.pubrow small { display:block; margin-top:4px; color:var(--stone); font-size:14px; } .pubrow i { font-style:normal; color:var(--bronze-text); }
.notes.pubs { padding-top:16px; }
@media (max-width:600px) { .pubrow b { font-size:16px; line-height:23px; } .pub-find input { max-width:none; } }

/* contact form (2026-10-21): live HTML in the Figma contact layout */
.cform { width:100%; max-width:644px; }
.ctopics { display:flex; flex-wrap:wrap; gap:8px; }
.ctopics button { font:500 14px/18px "DM Sans",sans-serif; color:var(--ink); background:#fff; border:1px solid var(--hair); border-radius:999px; padding:8px 14px; cursor:pointer; }
.ctopics button[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.cform .ch { font-size:28px; line-height:1.25; margin-top:28px; } .cform .csub { color:var(--stone); font-size:16px; margin-top:8px; }
.cform .ss-form { padding:0; background:none; margin-top:24px; }
.cform select { font:400 16px "DM Sans",sans-serif; color:var(--ink); border:1px solid var(--hair); border-radius:8px; padding:10px 12px; background:#fff; }
.cform .ss-small { font-size:14px; color:var(--stone); margin-top:12px; }
.cform label[hidden] { display:none; }

/* real photos (2026-10-21): lab + field mosaic, natural shapes, no uniform crop, no filters */
.band.mosaic { background:#fff; }
.mosaic-grid { columns:4 240px; column-gap:12px; margin-top:40px; }
.mosaic-grid img { width:100%; height:auto; margin:0 0 12px; border-radius:6px; break-inside:avoid; background:var(--cold); }
@media (max-width:600px) { .mosaic-grid { columns:2; column-gap:8px; } .mosaic-grid img { margin-bottom:8px; border-radius:4px; } }

/* real images (2026-10-21): partner logo wall, founders, journal logos — real colours */
.band.logos { background:#fff; padding:72px 0; }
.logo-g { font:500 12px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); margin-top:32px; }
.logo-row { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:24px 40px; margin-top:18px; }
.logo-row img { height:44px; width:auto; max-width:170px; object-fit:contain; }
.band.founders { background:var(--cloud); }
.people { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:36px; }
.person { display:flex; flex-direction:column; gap:4px; color:inherit; text-decoration:none !important; }
.person img { width:132px; height:132px; border-radius:50%; object-fit:cover; margin-bottom:12px; }
.person b { font-size:18px; color:var(--ink); } .person small { color:var(--stone); font-size:14px; line-height:20px; }
.person:hover b { color:var(--blue); }
.founders .more { margin-top:28px; font-size:16px; }
.journals { padding-top:40px; text-align:center; } .journals .logo-row img { height:40px; }
@media (max-width:600px) {
  .people { grid-template-columns:1fr 1fr; gap:24px; } .person img { width:104px; height:104px; }
  .logo-row { gap:18px 26px; } .logo-row img { height:34px; max-width:130px; }
}

/* captioned real photos (2026-10-21): About "Along the way", Careers "On the road" — natural shapes, year · place captions */
.band.moments { background:#fff; }
.moments-grid { columns:3 300px; column-gap:20px; margin-top:40px; }
.moments-grid figure { break-inside:avoid; margin:0 0 24px; }
.moments-grid img { width:100%; height:auto; border-radius:6px; background:var(--cold); }
.moments-grid figcaption { font-size:14px; line-height:20px; color:var(--stone); margin-top:8px; }
@media (max-width:600px) { .moments-grid { columns:1; } }

/* "Used in labs" (2026-10-21): one row of 6, each slot slowly crossfades to the next partner — calm, all 32 over time */
.logo-cycle { display:grid; grid-template-columns:repeat(6,1fr); gap:24px; align-items:center; margin-top:32px; }
.logo-cycle .slot { position:relative; height:60px; }
.logo-cycle img { position:absolute; inset:0; margin:auto; max-height:46px; max-width:150px; width:auto; height:auto; object-fit:contain;
  filter:grayscale(1); opacity:.72; transition:opacity .9s ease; }
.logo-cycle img.in, .logo-cycle img.out { opacity:0; }
@media (max-width:600px) { .logo-cycle { grid-template-columns:repeat(3,1fr); gap:16px; } .logo-cycle img { max-height:36px; max-width:100px; } }

/* photo galleries (2026-10-21): 1 large + 4 small tiles, each slowly crossfading through the real photos (replaces the photo dump) */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,260px); gap:12px; margin-top:40px; }
.gallery .tile { position:relative; overflow:hidden; border-radius:8px; background:var(--cold); }
.gallery .t0 { grid-column:span 2; grid-row:span 2; }
.gallery img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 1.2s ease; }
.gallery img.in, .gallery img.out { opacity:0; }
@media (max-width:960px) { .gallery { grid-template-rows:repeat(2,190px); } }
@media (max-width:600px) { .gallery { grid-template-columns:1fr 1fr; grid-template-rows:240px repeat(2,140px); gap:8px; }
  .gallery .t0 { grid-column:span 2; grid-row:span 1; } }
/* denser gallery (Ludo 2026-10-21: smaller, more dense): 8 columns, 120 px rows, one 2x2 tile + 12 small; phone 4 columns, 9 tiles */
.gallery { grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(2,120px); gap:6px; margin-top:28px; }
.gallery .tile { border-radius:5px; }
.gallery .t0 { grid-column:span 2; grid-row:span 2; }
@media (max-width:960px) { .gallery { grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(2,100px); } .gallery .tile:nth-child(n+10) { display:none; } }
@media (max-width:600px) { .gallery { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,84px); gap:4px; }
  .gallery .t0 { grid-column:span 2; grid-row:span 2; } .gallery .tile:nth-child(n+10) { display:none; } }
.band.mosaic { padding:64px 0; } @media (max-width:600px) { .band.mosaic { padding:48px 0; } }

/* personal touches (2026-10-21): a real contact person; SPR on the Road on the homepage */
.who { margin-top:28px; border-top:1px solid var(--rule); padding-top:20px; max-width:420px; }
.who[hidden] { display:none; }
.who-h { font:500 12px "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--stone); }
.who-in { display:flex; gap:14px; align-items:center; margin-top:12px; }
.who-in img { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.who-in b { display:block; font-size:17px; color:var(--ink); } .who-in small { color:var(--stone); font-size:14px; }
.who > p:last-child { color:var(--stone); font-size:15px; line-height:22px; margin-top:12px; }
.who-affibio { color:var(--stone); font-size:14px; line-height:21px; margin-top:24px; max-width:420px; }
.band.road { background:var(--sand); padding:80px 0; }
.road-grid { display:grid; grid-template-columns:3fr 2fr; gap:24px; margin-top:32px; align-items:start; }
.road-feat { display:flex; flex-direction:column; gap:8px; color:inherit; text-decoration:none !important; background:#fff; border-radius:12px; overflow:hidden; padding-bottom:20px; }
.road-feat img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.road-feat .road-tag, .road-feat b, .road-feat small, .road-feat .road-more { padding:0 22px; }
.road-tag { font:500 12px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze-text); margin-top:8px; }
.road-feat b { font-size:22px; line-height:1.3; color:var(--ink); } .road-feat small { color:var(--stone); font-size:15px; line-height:22px; }
.road-more { color:var(--blue); font-size:15px; font-weight:500; } .road-feat:hover b { color:var(--blue); }
.road-side { display:grid; gap:14px; }
.road-pic { display:grid; grid-template-columns:140px 1fr; gap:14px; align-items:center; color:inherit; text-decoration:none !important; }
.road-pic img { width:140px; height:96px; object-fit:cover; border-radius:6px; }
.road-pic small { color:var(--stone); font-size:14px; line-height:20px; }
@media (max-width:960px) { .road-grid { grid-template-columns:1fr; } }
@media (max-width:600px) { .road-pic { grid-template-columns:110px 1fr; } .road-pic img { width:110px; height:76px; } .band.road { padding:56px 0; } }

/* "Start here" (2026-10-21): four key resources — homepage section + pinned row on Resources */
.band.start { background:var(--cloud); padding:80px 0; }
.start-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:32px; }
.start-card { display:flex; flex-direction:column; gap:8px; background:#fff; border-radius:12px; padding:22px; color:inherit; text-decoration:none !important;
  border:1px solid transparent; transition:border-color .15s; }
.start-card:hover { border-color:var(--ink); }
.start-tag { font:500 12px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze-text); }
.start-card b { font-size:20px; line-height:1.25; color:var(--ink); } .start-card small { color:var(--stone); font-size:15px; line-height:22px; flex:1; }
.start-go { color:var(--blue); font-size:15px; font-weight:500; margin-top:4px; }
.start-more { margin-top:24px; font-size:16px; color:var(--stone); }
.res-start { padding-top:32px; padding-bottom:24px; }
.start-grid.compact { margin-top:14px; } .start-grid.compact .start-card { padding:16px 18px; } .start-grid.compact b { font-size:17px; }
.start-grid.compact small { font-size:14px; line-height:20px; } .start-grid.compact .start-go { display:none; }
@media (max-width:960px) { .start-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .band.start { padding:56px 0; } .start-grid.compact { grid-template-columns:1fr 1fr; gap:10px; } .start-grid.compact small { display:none; } }

/* AffiCoat on the homepage (2026-10-21): it is a product — copy left, our scheme right */
.band.affi { background:#fff; padding:88px 0; }
.affi-in { display:block; } .affi-copy .lead { max-width:62ch; }
.affi-copy h2 { margin-top:12px; } .affi-copy .lead { margin-top:16px; }
.affi-facts { list-style:none; margin:24px 0 28px; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px 24px; }
.affi-facts li { color:var(--stone); font-size:16px; line-height:24px; padding-left:18px; position:relative; }
.affi-facts li::before { content:""; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--bronze); }
.affi-facts b { color:var(--ink); font-weight:600; }
.affi-fig { margin:36px 0 0; border-radius:16px; overflow:hidden; background:#F7F9FC; }
.affi-fig img { width:100%; height:auto; } .affi-fig figcaption { color:var(--stone); font-size:14px; margin-top:10px; }
@media (max-width:960px) { .affi-facts { grid-template-columns:1fr; } .band.affi { padding:64px 0; } }

/* "SPR alongside other methods" (2026-10-21): Technology page; Applications links to it */
.band.methods { background:var(--cloud); padding:88px 0; }
.meth-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.meth { background:#fff; border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:8px; }
.meth-tag { font:500 12px "DM Mono",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--bronze-text); }
.meth h3 { font-size:19px; line-height:1.3; } .meth p:not(.meth-tag) { color:var(--stone); font-size:15px; line-height:22px; flex:1; }
.meth a { font-size:15px; font-weight:500; }
.meth-more { margin-top:24px; color:var(--stone); font-size:16px; }
.band.methods-link { padding:40px 0; background:#fff; } .band.methods-link p { color:var(--stone); font-size:17px; }
@media (max-width:960px) { .meth-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .meth-grid { grid-template-columns:1fr; } .band.methods { padding:56px 0; } }
/* Ask Dr. Live (2026-10-21): the retro board in a frame, full width under the note header */
.drlive-wrap { padding:0 0 64px; } .drlive { display:block; width:100%; min-height:900px; border:0; }
@media (max-width:600px) { .drlive-wrap { padding-bottom:32px; } }
.foot .bottom a { color:inherit; }
/* imported news / case-study section labels (2026-10-21) */
.note-body > p.eyebrow { margin:56px 0 0; font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-text); }
.note-body > p.eyebrow:first-child { margin-top:0; } .note-body > p.eyebrow + h2 { margin-top:8px; }
/* Resources rows with the live site's card thumbnails (2026-10-21); only the hub sections carry data-type */
.notes[data-type] .noterow { grid-template-columns:112px 72px 1fr auto; align-items:center; }
.noterow .thumb { width:112px; height:72px; border-radius:10px; overflow:hidden; background:#EDF1F6; display:block; }
.noterow .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:600px) { .notes[data-type] .noterow { grid-template-columns:72px 1fr; gap:4px 12px; } .noterow .thumb { width:72px; height:52px; grid-row:span 2; }
  .notes[data-type] .noterow .num, .notes[data-type] .noterow .t { grid-column:2; } }
/* Applications visuals (2026-10-21) */
.card-img { display:block; width:100%; aspect-ratio:3/2; border-radius:14px; overflow:hidden; margin-bottom:8px; }
.card-img img { width:100%; height:100%; display:block; }
.card-img.photo img { object-fit:cover; }
.card-img.fig { background:#fff; border:1px solid var(--hair); } .card-img.fig img { object-fit:contain; padding:12px; box-sizing:border-box; }
.cardlink:hover .card-img img { transform:scale(1.02); transition:transform .3s; }
p.t.mono .tube { vertical-align:middle; margin:-6px 10px 0 0; }
.methods-inline { margin-top:40px; color:var(--stone); font-size:16px; }
.foot .bottom a { display:inline; }
.card-img.icon { background:#F3EFE8; display:flex; align-items:center; justify-content:center; }
.card-img.icon img { width:auto; height:70%; max-width:72%; object-fit:contain; }
.card-img.icon.step { aspect-ratio:2/1; } .card-img.icon.step svg { height:62%; width:auto; aspect-ratio:1/1; overflow:visible; }
.cardlink:hover .card-img.icon { background:#EFE6EC; }
.step-ico { width:64px; height:64px; border-radius:50%; background:#fff; border:1px solid var(--hair); display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
/* STYLE-RULES V4: list rows with a thumbnail (Resources, field pages); type icons sit on the sand tile, figures on white */
.notes .noterow:has(> .thumb) { grid-template-columns:112px 72px 1fr auto; align-items:center; }
.noterow .thumb.icon { background:#F3EFE8; } .noterow .thumb.icon img { object-fit:contain; padding:8px; box-sizing:border-box; }
.noterow .thumb:not(.icon) { background:#fff; border:1px solid var(--hair); box-sizing:border-box; }
@media (max-width:600px) { .notes .noterow:has(> .thumb) { grid-template-columns:72px 1fr; gap:4px 12px; }
  .notes .noterow:has(> .thumb) .num, .notes .noterow:has(> .thumb) .t { grid-column:2; } }
/* cheat sheet key (2026-10-21 figkit redraw) */
.cs-key { margin-top:16px; color:var(--stone); font-size:15px; } .cs-key span { display:inline-block; vertical-align:middle; margin:0 4px 0 10px; }
.cs-key .k-seen { width:22px; height:3px; background:#1B3F6E; } .cs-key .k-exp { width:22px; border-top:2px dashed #B8BCC6; }
.cs-key .k-inj { width:16px; height:12px; background:#F3EEE4; } .cs-key .k-mark { width:9px; height:9px; border-radius:50%; background:#C98A00; }
/* cheat sheet: Plots / Original sketches switch (2026-10-22). Sketches = the live hand drawings, kept on purpose */
.cs-view { display:inline-flex; margin-left:auto; border:1px solid var(--rule); border-radius:999px; padding:2px; background:#fff; flex:none; }
.cs-view button { border:0; background:none; font:500 13px/1 'DM Sans',sans-serif; color:#5A6070; padding:7px 12px; border-radius:999px; cursor:pointer; }
.cs-view button[aria-pressed="true"] { background:#1A1A2E; color:#fff; }
.cs-body img.sketch { display:none; }
.cs-body.sketches img.sketch { display:block; }
.cs-body.sketches img.plot:has(+ img.sketch) { display:none; }
.cs-body.sketches .cs-key { visibility:hidden; }
@media (max-width:600px) { .cs-view { margin:8px 0 0; } }