/* SynapticSci website stylesheet: composition and site devices only.
   Tokens (colour, type, space, radius, motion) come from the design system, loaded before this file:
   ds/core.css + ds/theme-commercial.css (@synapticsci/design-system, pinned in ds/design-system.lock.json,
   updated only by `npm run ds:sync`). Never redeclare a design-system token here; design changes land in
   SynapticSci/SynapticSci-Design-System first. design-conformance.test.ts enforces this.
   Fonts are self-hosted (assets/fonts/fonts.css), the DS hand face (Reenie Beanie) included. */


/* ---- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:var(--lh-heading);font-weight:600;margin:0;text-wrap:balance}
a{color:var(--primary);text-decoration-thickness:1px;text-underline-offset:3px}
/* :where keeps this rule's weight and leaves DS buttons alone: on .ss-btn-primary the hover background is primary-deep,
   and this colour made the label vanish (Kristina, pin 356m9u). */
a:where(:not(.ss-btn)):hover{text-decoration-thickness:2px;color:var(--primary-deep)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
code,pre{font-family:var(--font-mono)}

/* ---- draft notice (chrome, removed at publish) ---- */
.draftnote{background:var(--ground-ink);color:var(--on-ink-text);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-align:center;padding:7px 16px}
.draftnote b{color:#e8b7c1;text-transform:uppercase;letter-spacing:.08em}

/* ---- masthead: centered lockup over a double hairline (canvas design) ----
   The nav rules moved to the "nav: locked 2026-09-04" block at the end of this file. */
.mast{text-align:center;padding:24px 48px 16px} /* rule and ground: DS .site-masthead--centred */

/* ---- layout ---- */
.inner{max-width:900px;margin:0 auto;padding:0 48px}
.wide{max-width:1320px;margin:0 auto;padding:0 48px}
.band-surface{background:var(--surface);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:56px 0}
@media (min-width:1500px){
  body{font-size:17.5px}
  .inner{max-width:980px}
  .wide{max-width:1500px}
  .nav-list{gap:12px}
  .bodyx{font-size:16px}
}
.tag{font-family:var(--font-display);font-style:italic;color:var(--ink-soft)}
/* section labels: DS .eyebrow (markup carries both; .sect stays as the audit hook) */
.bodyx{font-size:15px;line-height:1.65;color:var(--ink)}
.mono{font-family:var(--font-mono)}

/* ---- evidence line: DS .evidence-line + .evidence-label ---- */
.ev{text-align:left}
.ev code{font-family:var(--font-mono)}

/* ---- buttons: DS .ss-btn (.btn/.btnq stay as hooks) ---- */

/* ---- cards ---- */
/* cards: DS .index-card */
.offer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:18px;margin:28px 0 0;padding:0;list-style:none}
.offer-grid .card{text-align:left}
.offer-grid .card h3 a{text-decoration:none}
.offer-grid .card p{margin:0;font-size:14px}
.offer-grid .featured{border-top:3px solid var(--patina)}
/* four cards in a railed page's column: auto-fill made three columns and left the fourth card alone on a row (the problem
   catalog groups, Our science's commitments and "Read on"); two by two instead (review 2026-10-09) */
@media (min-width:760px){.spine-sec .offer-grid:has(> :nth-child(4):last-child),.spine-sec .tenets:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* The delivered-work proof line under every page H1 (D5, beat 1 TRUST): one sentence naming delivered work from the
   records. It sits in the first screen at 390 px, above the summary, so "have they done it before?" is answered there. */
.proof-line{font-family:var(--font-body);font-size:16px;line-height:1.45;font-weight:600;color:var(--ink);max-width:62ch;margin:10px 0 14px;padding:2px 0 2px 12px;border-left:3px solid var(--patina)}
.proof-line [data-tenure]{font-weight:inherit}
/* Step one rides in the proof-line block (D5, fixed probe): one block under the H1 answers "have they done it before?" and "what is step one?". */
.proof-line .step-clause{display:block;font-weight:400;margin-top:4px}
/* The lab-types line on shared pages (D5 "is this my problem?"): the four practices a visitor can recognize, each
   linking its hub. It sits under the H1, above the proof line. */
.lab-types{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);max-width:62ch;margin:10px 0 0}
.lab-types a{color:var(--patina-deep);text-decoration:underline;text-underline-offset:2px}
.lab-types + .proof-line{margin-top:10px}
/* The lab-types line as short bullets where it names three or more labs (TEAM-VOICE V6, PR #109). */
.lab-types-list{font-family:var(--font-body);font-size:16px;line-height:1.45;color:var(--ink);max-width:62ch;margin:10px 0 0;padding-left:20px}
.lab-types-list li{margin:3px 0;max-width:none}
.lab-types-list a{color:var(--patina-deep);text-decoration:underline;text-underline-offset:2px}
.lab-types-list + .proof-line{margin-top:12px}
/* The reader's own problem on the /trust/ pages (D5): IT and quality staff who must approve the system. */
.trust-problem{font-family:var(--font-body);font-size:16px;line-height:1.5;color:var(--ink);max-width:62ch;margin:10px 0 0}
.trust-problem + .lab-types{margin-top:8px}
.trust-problem + .lab-types-list{margin-top:6px}
/* A first step on each practice card on /practices/ (D5). */
.practice-card .practice-step{margin:12px 0 0;font-weight:600;color:var(--ink)}
.card-ev{margin-top:auto;padding-top:10px}
.subname{color:var(--primary)}

/* offering rows (offerings page) */
.orow{display:grid;grid-template-columns:5fr 7fr;margin:0 0 24px}
.orow .panel{background:var(--primary-wash);display:flex;align-items:center;justify-content:center;padding:28px;min-height:170px}
.orow .panel .big{font-family:var(--font-display);font-weight:600;font-size:34px;color:var(--ink)}
.orow .body{padding:28px 32px}
.orow h2{font-size:26px;margin:0 0 10px}


/* ---- dendrite motif ---- */
.syn{display:flex;align-items:center;justify-content:center;gap:10px}

/* ---- matted figure ---- */
.matte{margin:0 0 8px} /* ground, border, padding: DS .ss-matte */
.matte .pad{padding:22px}
/* captions and figure numbers: DS .ss-figcap / .ss-fign */

/* ---- dark band: DS .ss-band (the closing CTA partial) ---- */

/* ---- then/now: DS .ss-thennow (markup) + assets/thennow.css (site extras) + ds/behaviors.js ---- */

/* ---- FormSense scan demo ---- */
.demo{display:grid;grid-template-columns:minmax(min(260px,100%),5fr) minmax(56px,1fr) minmax(min(280px,100%),6fr);gap:0;align-items:center;text-align:left}
.sheet{position:relative;overflow:hidden;padding:22px 24px 26px} /* paper: DS .ss-paper */
.sheet-head{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);border-bottom:2px solid var(--ink);padding-bottom:8px;display:flex;justify-content:space-between;gap:12px}
.sheet-row{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);padding:12px 0 4px}
.sheet-row .lbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);min-width:82px}
.sheet-row .hand{font-family:var(--font-hand);font-size:25px;line-height:1;color:var(--pen);transform:rotate(-.6deg)}
.hand-messy{letter-spacing:.06em}
.scanbeam{position:absolute;left:-4px;right:-4px;top:-70px;height:58px;pointer-events:none;opacity:0;background:linear-gradient(to bottom,var(--scan-edge) 0%,var(--scan-mid) 45%,var(--scan-core) 50%,var(--scan-mid) 55%,var(--scan-edge) 100%)}
.scanbeam::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--patina)}
.demo.running .scanbeam{opacity:1;transition:top 2.6s linear}
.demo-flow{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--patina-deep)}
.demo-flow .arrow{font-size:28px;line-height:1}
.demo-flow .flowlbl{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--ink-soft)}
.record{background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--primary);box-shadow:var(--elevation-paper)}
.record-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:13px 16px;border-bottom:1px solid var(--rule)}
.record-head .rh-title{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep)}
.record-head .rh-id{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft)}
.rec-row{display:grid;grid-template-columns:88px minmax(0,1fr) auto;gap:6px 12px;padding:11px 16px;border-bottom:1px solid var(--rule);opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.rec-row.in{opacity:1;transform:none}
.rec-row .f{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.rec-row .v{font-weight:600;font-size:15px}
.rec-row .v .raw{display:block;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);font-weight:400;margin-top:2px}
.conf{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;font-weight:700;color:var(--patina-deep);border:1px solid currentColor;align-self:start;padding:2px 7px}
.rec-held{background:var(--held-bg)}
.rec-held .conf{color:var(--status-withheld)}
.rec-held .v .flag{display:inline-block;background:var(--status-withheld);color:var(--surface);font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px}
.rec-foot{padding:12px 16px;font-size:13.5px;color:var(--ink-soft);opacity:0;transition:opacity .6s;text-align:left}
.rec-foot.in{opacity:1}
.rec-foot strong{color:var(--patina-deep)}
.replay{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.04em;background:none;border:1px solid var(--rule);color:var(--ink-soft);padding:5px 12px;cursor:pointer;margin-left:12px}
.replay:hover{border-color:var(--patina-deep);color:var(--patina-deep)}

/* ---- a quotation from a record (the Maine DOT award statement): marked as a quotation, not loose indented paragraphs
   with browser-default 40px margins (review 2026-10-09) ---- */
.record-quote{margin:12px 0 0;padding:0 0 0 16px;border-left:2px solid var(--patina);font-family:var(--font-display);font-style:italic;line-height:1.45;max-width:62ch}
.record-quote + .record-quote{margin-top:10px}
.record-quote + .citation{margin-top:12px}

/* ---- pull quote ---- */
.pull{padding:72px 48px;text-align:center}
/* the measure belongs to the quote line: 24ch of the blockquote's body type was ~190px, four words a line (review 2026-10-09) */
.pull blockquote{margin:0 auto}
.pull .q{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.15;color:var(--primary-deep);max-width:24ch;margin-inline:auto}
.pull .q::before{content:"\201C";color:var(--patina)}
.pull .q::after{content:"\201D";color:var(--patina)}
.pull figcaption{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft);margin-top:20px;letter-spacing:.03em}

/* ---- gap diagram ---- */
.gap-diagram{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;text-align:left}
.gd-node{flex:1 1 160px;border:1px solid var(--rule);background:var(--paper);padding:16px 18px;min-width:150px}
.gd-node .t{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-deep);margin:0 0 6px}
.gd-node .d{font-size:13.5px;color:var(--ink);margin:0}
.gd-link{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 6px;min-width:120px}
.gd-link .ln{width:100%;border-top:2px solid var(--ink-soft);position:relative}
.gd-link .ln::after{content:"";position:absolute;right:-1px;top:-5px;border:4px solid transparent;border-left-color:var(--ink-soft)}
.gd-link.broken .ln{border-top:2px dashed var(--status-withheld)}
.gd-link.broken .ln::after{border-left-color:var(--status-withheld)}
.gd-link .lt{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;text-align:center}
.gd-link.broken .lt{color:var(--status-withheld);font-weight:700}

/* ---- UBAS synaptic cycle (SVG figure) ---- */
.ubas-fig{width:100%;height:auto;display:block}
.ubas-fig .loop{fill:none;stroke:var(--fig-dendrite);stroke-width:1.6}
.ubas-fig .loop2{fill:none;stroke:var(--fig-dendrite-soft);stroke-width:1}
.ubas-fig .soma{fill:var(--primary)}
.ubas-fig .soma-ring{fill:none;stroke:var(--primary);stroke-width:1.2;opacity:.35}
.ubas-fig .stage-num{font-family:var(--font-mono);font-size:13px;fill:var(--patina-deep);letter-spacing:.08em}
.ubas-fig .stage-name{font-family:var(--font-display);font-size:26px;font-weight:600;fill:var(--ink)}
.ubas-fig .stage-sci{font-family:var(--font-display);font-style:italic;font-size:17px;fill:var(--patina-deep)}
.ubas-fig .gate-badge{fill:var(--paper);stroke:var(--rule)}
.ubas-fig .gate-text{font-family:var(--font-mono);font-size:12px;fill:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase}
.ubas-fig .chev{fill:var(--patina)}
.ubas-fig .center-caps{font-family:var(--font-mono);font-size:12px;fill:var(--patina-deep);letter-spacing:.14em}
.ubas-fig .center-it{font-family:var(--font-display);font-style:italic;font-size:17px;fill:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.ubas-impulse{display:none}}
.deliv{font-family:var(--font-mono);font-size:12px;color:var(--patina-deep);margin:8px 0 0}
.deliv b{letter-spacing:.06em;text-transform:uppercase;font-weight:700}

/* ---- sustain request strip + coverage quadrants ---- */
.steps-strip{display:flex;gap:0;flex-wrap:wrap;margin-top:26px;text-align:left}
.steps-strip .st{flex:1 1 130px;border-top:2px solid var(--ink);padding:12px 14px 0 0;min-width:120px}
.steps-strip .st .n{font-family:var(--font-mono);font-size:13px;color:var(--primary);margin:0 0 4px}
.steps-strip .st h3{font-size:16px;font-family:var(--font-body);font-weight:700;margin:0 0 4px}
.steps-strip .st p{font-size:13px;margin:0;color:var(--ink-soft)}
.quad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:18px;margin-top:26px;text-align:left}
.quad .q{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--patina);padding:18px 20px}
.quad .q h3{font-size:14px;font-family:var(--font-mono);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--patina-deep);margin:0 0 10px}
.quad .q ul{margin:0;padding-left:16px;font-size:13.5px;display:flex;flex-direction:column;gap:5px}

/* ---- numbered method rows ---- */
.mrow{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--rule);text-align:left}
.mrow:last-of-type{border-bottom:1px solid var(--rule)}
.mrow .n{font-family:var(--font-mono);font-size:18px;color:var(--primary)}
.mrow h3{font-size:20px;margin:0 0 6px}
.mrow p{font-size:14px;margin:0}

/* ---- anatomy table ---- */
.anatomy{overflow-x:auto;text-align:left}
.anatomy table{min-width:720px} /* register styling: DS .ss-table */
.anatomy tr:last-child td{border-bottom:none}
.anatomy .raw{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft)}
.anatomy .ov{font-family:var(--font-mono);font-size:12px;color:var(--primary)}

/* ---- price-list table (spec-salesops-price-list, 2026-09-24): one per bucket, the shared terms typed once above it,
   a short unit under each item, prices right-aligned in tabular figures. Under 560px each row stacks — the item, then
   one label/value line per cell — so the table never scrolls the page sideways. ---- */
.price-table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}
.price-table th,.price-table td{padding:11px 13px;border-bottom:1px solid var(--rule);vertical-align:top;text-align:left}
.price-table thead th{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;border-bottom:2px solid var(--ink)}
/* the table also wears the DS .ss-table, whose th is a tracked uppercase label; a row header here is the item's name
   or a Service Level's element tile (Ag, not AG), so it keeps its own case and spacing */
.price-table tbody th{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:normal}
.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:none}
.price-table .num{text-align:right;font-variant-numeric:tabular-nums}
.price-table td.num{white-space:nowrap}
.price-table td.num .price{overflow-wrap:normal;font-weight:600}
/* a Service Level's periodic-table tile (spec-salesops-price-list-followups, 2026-09-25): atomic number, symbol, name and
   standard atomic mass, where a table lists the Levels. Only the name is read aloud; the rest is the drawing. */
.el-tile{display:inline-flex;flex-direction:column;align-items:center;min-width:76px;padding:5px 9px 6px;border:1.5px solid var(--ink);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);line-height:1;font-weight:400;vertical-align:top}
.el-tile .el-num{align-self:flex-start;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.el-tile .el-sym{margin-top:1px;font-family:var(--font-display);font-size:26px;font-weight:600;color:var(--primary-deep)}
/* the number, symbol and weight are drawn from data-v, so extracted text and screen readers get only the name (dress-rehearsal finding: "47 Ag Silver 107.87") */
.el-tile .el-num::before,.el-tile .el-sym::before,.el-tile .el-mass::before{content:attr(data-v) / ""}
.el-tile .el-name{margin-top:5px;font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--ink)}
.el-tile .el-mass{margin-top:3px;font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .price-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .price-table,.price-table tbody,.price-table tr,.price-table th,.price-table td{display:block;width:auto}
  .price-table tr{padding:10px 0;border-bottom:1px solid var(--rule)}
  .price-table tbody tr:last-child{border-bottom:none}
  .price-table th,.price-table td,.price-table tbody tr:last-child th,.price-table tbody tr:last-child td{border-bottom:none;padding:3px 10px}
  .price-table td{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right}
  .price-table td.num{white-space:normal}
  .price-table td::before{content:attr(data-label);flex:0 1 45%;text-align:left;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
}
.row-held td{background:var(--held-bg)}
.conf-cell{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-weight:700;color:var(--patina-deep)}
.row-held .conf-cell{color:var(--status-withheld)}
.held-flag{display:inline-block;background:var(--status-withheld);color:var(--surface);font-size:12px;font-family:var(--font-mono);letter-spacing:.06em;padding:2px 8px;text-transform:uppercase}

/* ---- entity fan ---- */
.fan{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px;text-align:left}
.fan-src{flex:0 0 auto;background:var(--surface);border:1px solid var(--rule);box-shadow:var(--elevation-paper);padding:14px 18px;transform:rotate(-1.2deg)}
.fan-src .hand{font-family:var(--font-hand);font-size:22px;color:var(--pen)}
.fan-src .lbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.fan-arrow{font-size:26px;color:var(--patina-deep)}
.fan-out{display:flex;flex-wrap:wrap;gap:9px;flex:1 1 300px}
.ent{font-size:13.5px;font-weight:600;background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--patina);padding:7px 13px}

/* ---- delivery paths ---- */
.paths{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:22px;margin-top:30px;margin-bottom:24px;text-align:left} /* the paragraph after the cards sat flush against them (review 2026-10-09) */
.path{background:var(--surface);border:1px solid var(--rule);padding:26px 28px}
.path.pilot{border-top:3px solid var(--patina)}
.path.prod{border-top:3px solid var(--primary)}
.path .pt{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px}
.path.pilot .pt{color:var(--patina-deep)}
.path.prod .pt{color:var(--primary-deep)}
.path h3{font-size:21px;margin:0 0 10px}
.path p{font-size:14.5px;margin:0}
.path .terms{margin-top:14px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink-soft)}

/* ---- proof + posture ---- */
.proof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:30px;text-align:left}
.proof-card{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--patina);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.proof-card p{margin:0;font-size:14.5px}
.proof-card .src{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin-top:auto;padding-top:8px;border-top:1px dashed var(--rule)}
.held-note{margin-top:26px;text-align:left} /* DS .held-note */

/* ---- casebook entries ---- */
.entry{border-top:1px solid var(--rule);padding:24px 0;text-align:left}
.entry:last-of-type{border-bottom:1px solid var(--rule)}
.entry .meta{font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);margin:0 0 8px}
.entry h2{font-size:25px;margin:0 0 8px}
.entry p{font-size:14px;margin:0}

/* ---- operator decision flags (draft chrome, removed at publish) ---- */
.decision{background:var(--held-bg);border:1px dashed var(--status-withheld);border-left:4px solid var(--status-withheld);padding:14px 18px;margin:24px auto 0;max-width:74ch;font-size:14px;text-align:left}
.decision .d-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--status-withheld);font-weight:700;margin:0 0 6px}
.decision p{margin:6px 0 0}
.decision .opt{font-weight:700}

/* ---- footer ---- */
.foot{text-align:center;padding:36px 48px;margin-top:0} /* ground: DS .site-footer */
.foot .tag{color:var(--on-ink-soft)}

/* ---- rise animation (canvas design) ---- */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
main>*{animation:rise 0.6s ease-out backwards}
main>*:nth-child(2){animation-delay:60ms}main>*:nth-child(3){animation-delay:120ms}main>*:nth-child(4){animation-delay:180ms}

@media (max-width:900px){
  .demo{grid-template-columns:1fr}
  .demo-flow{flex-direction:row;padding:16px 0;gap:12px}
  .demo-flow .arrow{transform:rotate(90deg)}
  .sheet{transform:none}
  .orow{grid-template-columns:1fr}
  .inner,.wide{padding:0 24px}
  .mast{padding:20px 24px 14px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .demo.running .scanbeam{opacity:0}
}

/* === nav: practice-led 2026-09-13 (story 34-8; supersedes the N-1 lock of 2026-09-04) === */
/* Labs we help | Problems we solve | Products & services | Pricing | Our Science + [Talk with an expert].
   Markup lives in draft-site/_partials/nav.html; behaviour in draft-site/ds/behaviors.js + draft-site/assets/masthead.js.
   Two states: `.mast.nav-ready` (masthead.js loaded: aria-expanded drives the popouts) and the
   no-script fallback (hover / focus-within open the popouts; the mobile accordion is open). */
.mast{padding:22px 48px 0}
.mast-top{display:flex;align-items:center;justify-content:center;position:relative}
.mast-logo{display:inline-block}
.mast-logo img{height:44px;margin:0 auto;vertical-align:top} /* inline, not block: dark mode swaps in the reverse lockup (DS .ss-when-light / .ss-when-dark, shown with display:revert) */
.nav-menu{display:none}
.mast .nav{display:block;margin:0}
.nav-list{list-style:none;margin:14px 0 0;padding:0;display:flex;justify-content:center;align-items:stretch;gap:6px;flex-wrap:wrap}
.nav-item{position:relative;margin:0}
.nav-btn{display:inline-block;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;background:none;border:0;border-bottom:2px solid transparent;padding:8px 12px 14px;cursor:pointer;line-height:1.2}
.nav-btn:hover{color:var(--primary)}
.nav-btn:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.has-pop>.nav-btn::after{content:"";display:inline-block;width:5px;height:5px;margin:0 0 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);vertical-align:middle;opacity:.7}
.has-pop>.nav-btn[aria-expanded="true"]{color:var(--primary)}
.has-pop>.nav-btn[aria-expanded="true"]::after{transform:rotate(225deg);margin-bottom:-2px}
.nav-item.is-here>.nav-btn,.nav-btn[aria-current="page"]{color:var(--primary);border-bottom-color:var(--primary)}
.nav-item-cta{display:flex;align-items:center;padding:0 0 8px 14px}
.mast .nav-cta{display:inline-block;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:none;border:1px solid var(--primary);color:var(--primary);padding:7px 14px;border-radius:2px;text-decoration:none;white-space:nowrap}
.mast .nav-cta:hover{background:var(--primary);color:var(--surface)}
/* .ss-nav-button is only the hook ds/behaviors.js binds (2026-09-26): the masthead keeps its own button metrics, so the DS
   NavMenu's min-height (--control-h) does not make the three popout buttons taller than the plain links beside them */
.mast .nav-btn.ss-nav-button{min-height:0}
/* popouts: journal plate — paper ground, hairline border, label in Source Sans 600, sentence in soft ink */
.nav-pop{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:60;min-width:320px;max-width:420px;background:var(--paper);border:1px solid var(--ink);border-top:3px double var(--ink);padding:8px 0;text-align:left;margin-top:-2px}
.nav-pop::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.pop-list{list-style:none;margin:0;padding:0}
.pop-link{display:block;padding:10px 20px;text-decoration:none;color:var(--ink);border-left:3px solid transparent}
.pop-link:hover,.pop-link:focus-visible{background:var(--surface);border-left-color:var(--patina);color:var(--ink);text-decoration:none}
.pop-link:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
/* WP2 (pin 8tpi, 2026-09-26): one marker color on every page; the current page's marker matches the hover marker */
.pop-link[aria-current="page"]{border-left-color:var(--patina)}
.pop-link[aria-current="page"] .pop-l{color:var(--primary)}
.pop-l{display:block;font-family:var(--font-body);font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink)}
.pop-s{display:block;font-size:13px;line-height:1.45;color:var(--ink-soft);margin-top:2px}
/* group labels (Products & services: Software · Bench Tools · Services): plain text, never a link or focusable, so
   ArrowDown still lands on the first .pop-link; padded like .pop-link, with a hairline before every group but the first */
.pop-h{margin:0;padding:10px 20px 2px;border-left:3px solid transparent;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.pop-list + .pop-h{margin-top:6px;padding-top:12px;border-top:1px solid var(--rule)}
/* open states */
.has-pop>.nav-btn[aria-expanded="true"]+.nav-pop{display:block}
.mast:not(.nav-ready) .has-pop:focus-within>.nav-pop{display:block}
@media (hover:hover) and (pointer:fine){
  .mast:not(.nav-ready) .has-pop:hover>.nav-pop{display:block}
  .has-pop:hover>.nav-btn{color:var(--primary)}
}
@media (max-width:900px){
  .mast{padding:16px 24px 0}
}
/* 760px and below: one accordion; the four items and the CTA stack under a Menu button */
@media (max-width:760px){
  .mast{padding:12px 20px 0}
  .mast-top{justify-content:space-between}
  .mast-logo img{height:36px;margin:0}
  .nav-menu{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:none;border:1px solid var(--rule);border-radius:2px;padding:8px 12px;cursor:pointer}
  .nav-menu-bars{display:inline-block;width:16px;height:2px;background:currentColor;position:relative}
  .nav-menu-bars::before,.nav-menu-bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
  .nav-menu-bars::before{top:-5px}.nav-menu-bars::after{top:5px}
  .nav-menu[aria-expanded="true"]{border-color:var(--primary);color:var(--primary)}
  .mast.nav-ready .nav{display:none}
  .mast.nav-ready.menu-open .nav{display:block}
  .nav-list{display:block;margin:10px 0 0;border-top:1px solid var(--rule)}
  .nav-item{border-bottom:1px solid var(--rule)}
  .nav-btn{display:block;width:100%;text-align:left;padding:13px 4px;border-bottom:0}
  .nav-item.is-here>.nav-btn,.nav-btn[aria-current="page"]{border-bottom:0;box-shadow:inset 3px 0 0 var(--primary);padding-left:12px}
  .has-pop>.nav-btn::after{float:right;margin-top:5px}
  .nav-pop{position:static;transform:none;min-width:0;max-width:none;border:0;border-top:0;box-shadow:none;background:var(--surface);padding:4px 0 8px;margin:0}
  .pop-link{padding:9px 14px 9px 16px}
  .pop-h{padding:9px 14px 2px 16px}
  .pop-list + .pop-h{padding-top:11px}
  .mast:not(.nav-ready) .nav-pop{display:block}
  .nav-item-cta{padding:14px 4px;border-bottom:0;justify-content:flex-start}
  .mast .nav-cta{padding:10px 16px;font-size:13px}
}

/* === footer: full graph 2026-09-05 (plan §3.5 under the four locked sections) === */
.foot{text-align:left;padding:44px 48px 32px}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 28px;max-width:1320px;margin:0 auto}
.foot-h{font-family:var(--font-body);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.foot-list a,.foot-line a{font-size:14px;line-height:1.4} /* colour, hover, current: DS .site-footer a */
.foot-logo{height:30px;display:block;margin:0 0 12px}
.foot-tag{font-size:14.5px;margin:0 0 10px}
.foot-line{font-size:14px;margin:0 0 6px}
.foot-cta{display:inline-block;border:1px solid var(--ink-soft);padding:6px 12px;border-radius:2px}
.foot-cta:hover{border-color:var(--patina)}
.foot-gov{font-size:12px;color:var(--on-ink-soft);margin:36px auto 0;max-width:1320px;padding-top:18px;border-top:1px solid}
.foot-gov a{color:var(--on-ink-text);text-decoration:none;border-bottom:1px solid var(--ink-soft)}
.foot-gov a:hover{border-bottom-color:var(--patina)}
.foot-copy{font-size:12px;color:var(--on-ink-soft);margin:8px auto 0;max-width:1320px}
.foot-mode{max-width:1320px;margin:0 auto}
.foot-mode .ss-mode-switch{margin-top:32px} /* DS ModeSwitch, once per site; hidden (no space) until behaviors.js shows it */
@media (max-width:900px){
  .foot{padding:36px 24px 28px}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .foot-grid{grid-template-columns:1fr;gap:26px}
}

/* === regulatory compliance block — added 2026-09-07 (append-only; no rule above is modified) ===
   A short banded component a page carries where an IT or quality reader asks the question. Four
   lines in a fixed order: the attribution (the platform attestations are Microsoft's, named), the
   boundary (the laboratory's accreditation is the laboratory's, and we hold neither), what the
   product does about it, and the question that links to /trust/compliance/.
   Journal-plate idiom borrowed from .procure and .held-note: surface ground, a double hairline at
   the top, hairline rules between the lines, tokens only, no shadow and no new colour. The two
   icons come from assets/figures/compliance-icons.svg by <use> at 28px; they are aria-hidden and
   decorative, so with the sprite absent the <svg> paints nothing and every line still reads.
   Not a figure: no .fig, no figcaption, no number. */
.rcb{background:var(--surface);border:1px solid var(--rule);border-top:3px double var(--ink);padding:18px 22px 16px;margin:28px 0 0;max-width:70ch;text-align:left}
.rcb-h{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--patina-deep);margin:0 0 12px}
.rcb-l{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:start;margin:0;padding:12px 0 0;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.55;max-width:none}
.rcb-l:first-of-type{border-top:0;padding-top:0}
.rcb-i{grid-column:1;width:28px;height:28px;display:block;margin-top:-1px}
.rcb-t{grid-column:2;min-width:0}
.rcb-t b{font-weight:600;color:var(--ink)}
.rcb-ask{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14.5px;line-height:1.5;max-width:none}
.rcb-ask a{color:var(--primary);text-decoration:none;border-bottom:1px solid var(--rule)}
.rcb-ask a:hover{color:var(--primary-deep);border-bottom-color:var(--primary)}
@media (max-width:560px){
  .rcb{padding:16px 16px 14px}
  .rcb-l{grid-template-columns:minmax(0,1fr);column-gap:0}
  .rcb-i{margin:0 0 7px}
  .rcb-t{grid-column:1}
}

/* ---- consent control (story 36-5, AD-46): rendered by assets/measure.js from the Measurement record where the
   recorded client heuristic places the visitor in the consent region list; a fixed bar at the foot of the page.
   Above the draft review bar (#bl-bar, z-index 70); measure.js also lifts it clear of that bar. Tokens only (AD-20).
   Allow and Decline are the same .btn: refusing is as easy as accepting. ---- */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:80;background:var(--surface);color:var(--ink);border-top:3px double var(--ink);padding:16px 48px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;font-size:var(--fs-caption);line-height:1.5}
.consent p{margin:0;max-width:var(--measure)}
.consent a{color:var(--primary)}
.consent .consent-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.consent .btn{font-size:var(--fs-caption);padding:9px 18px;border:0;cursor:pointer}
.consent:focus{outline:var(--focus-ring);outline-offset:-4px}
@media print{.consent{display:none}}

/* ---- display lane (launch L5, 2026-10-05) ---- */
/* L5.6: an address or a one-word title never pushes the page sideways */
[data-toggle] a[href^="mailto:"],a[href^="mailto:"],.wv,.spine-head h1,.spine-head h1 span,h1 span{overflow-wrap:anywhere}
/* L5.7: the then/now invite sits inside the caption sentence, not as a block that leaves a gap mid-line */
figcaption .ss-tn-invite,.figcap .ss-tn-invite{display:inline;min-height:0;padding:0;margin:0}
/* L5.4: one "Talk with an expert" on every page at phone width (partial footer.html). Home pattern, site-wide.
   Stack from the bottom: this bar, then the consent banner, then nothing else; the Curiosity button sits inside
   the bar's right end as an icon so the two never overlap. --sticky-talk-h is the bar's height. */
.site-talk{display:none}
@media (max-width:760px){
  :root{--sticky-talk-h:calc(64px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:var(--sticky-talk-h)}
  .site-talk{position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;align-items:center;min-height:var(--sticky-talk-h);box-sizing:border-box;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--rule)}
  .site-talk .ss-btn{flex:1;min-height:48px;justify-content:center;text-align:center}
  body:has(#curiosity-toggle) .site-talk{padding-right:72px}
  body #curiosity-toggle{left:auto;right:14px;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:48px;height:48px;max-width:none;padding:0;justify-content:center;z-index:76;border-radius:50%}
  body #curiosity-toggle .curiosity-word,body #curiosity-toggle .curiosity-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body #curiosity-toggle #curiosity-count{position:absolute;top:-4px;right:-4px;min-width:18px;padding:1px 4px;border-radius:9px;background:var(--ink);color:var(--paper);font-size:12px;line-height:16px;text-align:center}
  /* L5.5: the consent banner is a compact strip above the bar, at most 15% of a 390x844 first screen */
  .consent{bottom:var(--sticky-talk-h)!important;z-index:74;padding:8px 14px;gap:6px 12px;font-size:12px;line-height:1.35;border-top-width:2px}
  .consent p{max-width:none}
  .consent .btn{font-size:12px;padding:6px 14px;min-height:34px}
  .consent .consent-actions{gap:8px}
}
@media print{.site-talk{display:none}}
/* L5.2: the last 320px overflows found by the sweep (record rows, dendrite motif) */
.rec-row .v{min-width:0;overflow-wrap:anywhere}
.syn{max-width:100%}
.syn svg{flex:0 1 150px;min-width:0;max-width:150px;height:auto}