/* PacSpace site. Instrument Warm, from the dashboard mock and BRAND GUIDE v1.7:
   warm paper, ink, hairlines, radius 0, no shadows, no gradients, no icons.
   Archivo for what a person reads; IBM Plex Mono for what the system says.
   Record blue appears once per view, on what PacSpace commits. */

@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/archivo-400.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/archivo-500.woff2) format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/archivo-600.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-mono-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/ibm-plex-mono-600.woff2) format('woff2')}

:root{
  --page:#F4F3EF; --card:#FBFAF7; --white:#FFFFFF;
  --ink:#131311; --muted:#57554F; --label:#726F67; --faint:#8A877F;
  --line:rgba(19,19,17,.11); --line2:rgba(19,19,17,.2); --div:rgba(19,19,17,.07);
  --rec:#1F4E79; --ok:#1A6F45; --bad:#A93227; --warn:#9C5C0C;
  --rec-ground:#0D0D0C; --rec-ink:#F3F1EB;
  --sans:Archivo,system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1); --arrive:cubic-bezier(.25,1,.5,1);
  --wrap:1180px; --pad:32px;
}
*,*::before,*::after{box-sizing:border-box;border-radius:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.locked{overflow:hidden}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,figure{margin:0}
.mono{font-family:var(--mono)}
.ink{color:var(--ink)}
.muted{color:var(--muted)}
.nw{white-space:nowrap}

/* Links: bare at rest, a hairline underline on hover drawn below the descenders. In running prose a link rests on a hairline. */
a{color:inherit;text-decoration:none}
.prose a,.art-body a,p a,.fq-a a,.fq-q a{border-bottom:1px solid var(--line2);transition:border-color 120ms linear}
.prose a:hover,.art-body a:hover,p a:hover,.fq-a a:hover,.fq-q a:hover{border-bottom-color:var(--ink)}
a.arrow,a.go,.go{border-bottom:0}
a.arrow:hover,.card-link:hover .go{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--page);padding:10px 14px;font-size:14px}
.skip:focus{left:8px}

/* Layout */
.wrap{max-width:calc(var(--wrap) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.wrap-narrow{max-width:calc(860px + var(--pad)*2)}
.wrap-art{max-width:calc(700px + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.band{padding:88px 0;border-top:1px solid var(--line)}
.band-tight{padding-top:24px;border-top:0}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.split>div:first-child .h2{max-width:none}
/* Words beside words share the first baseline: the label's, and the first line of the text beside it. A box beside the words keeps its top on the column's top. */
.split>div:first-child,.split>.prose{align-self:baseline}
.split>div:first-child .h2+p{margin-top:18px}
.prose{display:flex;flex-direction:column;gap:16px;max-width:66ch}
.prose p{color:var(--muted)}
.prose p.ink,.prose .lead.ink{color:var(--ink)}

/* Type */
.label{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--label);line-height:1.4}
.sub-label{margin:48px 0 6px}
/* Measures (2026-10-05, David: "We have the full width to play with"): headlines may run most of the column, so they
   fall in one or two lines; reading text stays near 70 characters a line, where it reads easiest. */
.h1{font-size:58px;font-weight:600;letter-spacing:-.038em;line-height:1.04;margin-top:18px;max-width:28ch;text-wrap:balance}
.h1-home{font-size:84px;letter-spacing:-.045em;line-height:.98;max-width:none}
.h2{font-size:38px;font-weight:600;letter-spacing:-.032em;line-height:1.1;margin-top:14px;max-width:34ch;text-wrap:balance}
.home .h2{font-size:46px;letter-spacing:-.036em;line-height:1.06}
.h2-wide{max-width:42ch}
.h4{font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.hero-sub{font-size:19px;line-height:1.55;color:var(--muted);margin-top:22px;max-width:64ch}
.hero-sub.ink{color:var(--ink)}
.lead{font-size:16.5px;line-height:1.6;color:var(--muted);margin-top:18px;max-width:68ch}
.lead.ink{color:var(--ink)}
.prose .lead{margin-top:0}
.note{font-size:13.5px;color:var(--muted);margin-top:18px;max-width:72ch}
.src{font-size:11.5px;line-height:1.7;color:var(--label);margin-top:28px;max-width:110ch}
.src a{color:var(--ink);border-bottom:1px solid var(--line2)}
.turn{font-size:26px;line-height:1.3;letter-spacing:-.022em;margin-top:56px;max-width:54ch;font-weight:500}
.nw{white-space:nowrap}
.turn span{display:block;color:var(--muted);font-weight:400;margin-top:8px}
.coda{margin-top:28px;max-width:72ch;font-size:16px;line-height:1.6;color:var(--muted)}
.coda+.coda{margin-top:14px}

/* Buttons: ink primary, hairline secondary. No blue button anywhere. */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 20px;font:500 14px/1 var(--sans);letter-spacing:-.005em;border:1px solid var(--ink);cursor:pointer;white-space:nowrap;transition:background-color 120ms linear,color 120ms linear,border-color 120ms linear}
.btn-ink{background:var(--ink);color:var(--page)}
.btn-ink:hover{background:#2A2A27;border-color:#2A2A27}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line2)}
.btn-line:hover{border-color:var(--ink)}
.btn-sm{height:36px;padding:0 14px;font-size:13px}
.btn[aria-pressed="true"]{background:var(--ink);color:var(--page);border-color:var(--ink)}

/* The lockup and its living mark (the mock's lockupHtml): a 16px mark of two 12px squares, a 9px gap, Archivo 19/600. */
.lockup{display:inline-flex;align-items:center;gap:9px;color:var(--ink);border:0}
.lk-mark{position:relative;display:block;width:16px;height:16px;flex:none}
.lk-mark .lk-a,.lk-mark .lk-b{position:absolute;left:0;top:0;width:12px;height:12px;will-change:transform;transform:translate(2px,2px)}
.lk-mark .lk-a{border:1px solid currentColor}
.lk-mark .lk-b{background:currentColor}
.lockup .lk-mark .lk-a,.lockup .lk-mark .lk-b{transform:translate(2px,2px)}
.lk-word{font-size:19px;font-weight:600;letter-spacing:-.05em;line-height:1}
/* A mark at rest that isn't the logo shows the offset: the claim as made, the record as committed. */
.lk-mark.sm{width:12px;height:12px}
.lk-mark.sm .lk-a,.lk-mark.sm .lk-b{width:9px;height:9px;transform:none}
.lk-mark.sm .lk-b{left:3px;top:3px}
.lk-mark.lg{width:32px;height:32px}
.lk-mark.lg .lk-a,.lk-mark.lg .lk-b{width:24px;height:24px;transform:none}
.lk-mark.lg .lk-a{border-width:2px}
.lk-mark.lg .lk-b{left:8px;top:8px}
.lk-mark.rec{color:var(--rec)}
.lk-mark.xl{width:56px;height:56px;margin-bottom:28px}
.lk-mark.xl .lk-a,.lk-mark.xl .lk-b{width:42px;height:42px;transform:none}
.lk-mark.xl .lk-a{border-width:4px}
.lk-mark.xl .lk-b{left:14px;top:14px}

/* Header: the whole width of the page. The lockup at the far left, the trays centered on the page, Talk to us at the far
   right. Every tray opens into one shared box under the header (.tray): it zooms in from the item, slides its contents
   toward the next item as the pointer or the focus moves along, and eases its height to fit. A tint slides behind the
   open item on a spring. Motion is site.js's, in the mock's values; nothing moves with reduced motion. */
.hdr{position:sticky;top:0;z-index:40;background:var(--page);border-bottom:1px solid transparent;--hh:64px;--tw:min(1100px,calc(100vw - 64px));--fw:300px}
/* The header has no line under it (David, 2026-10-05: "I just want that full width bottom border gone"). The short ink mark
   under the page you are on stays. The border is kept as 1px of the header's own color, so nothing on the page moves. */
/* On a section's pages the row of links under the header has its own line, which would run behind an open tray; it goes then */
.secnav{transition:border-bottom-color 160ms var(--ease)}
body:has(.hdr .nav-t[aria-expanded="true"]) .secnav{border-bottom-color:transparent}
.hdr-in{height:var(--hh);padding:0 32px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.hdr-in>.lockup{justify-self:start}
.nav{display:block}
.nav-l{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav-i{display:block}
.nav-t{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;background:none;border:0;font:400 14px/1 var(--sans);letter-spacing:-.005em;color:var(--ink);white-space:nowrap;cursor:pointer}
.nav-t .chev{width:7px;height:7px;margin:0 0 0 1px;opacity:.55}
.nav-t .chev::before{border-width:0 1.25px 1.25px 0;transition:transform 180ms var(--ease)}
.nav-t[aria-expanded="true"] .chev::before{transform:translate(0,30%) rotate(225deg)}
.nav-t[aria-expanded="true"] .chev,.nav-t:hover .chev{opacity:1}
.nav-t[aria-current]::after{content:"";position:absolute;left:13px;right:13px;bottom:calc((var(--hh) - 36px) / -2);height:2px;background:var(--ink)}
.nav-t:focus-visible{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.nav-hl{position:absolute;z-index:2;left:0;top:calc((var(--hh) - 36px) / 2);height:36px;width:0;background:rgba(19,19,17,.06);opacity:0;pointer-events:none}
.tray,.pane{position:absolute;top:calc(100% + 8px);left:calc(50% - var(--tw) / 2);width:var(--tw)}
.tray{display:none;z-index:2;height:0;background:var(--white);border:1px solid var(--line);overflow:hidden}
.tray::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--fw);background:var(--page);border-right:1px solid var(--line)}
.tray.is-open{display:block}
.pane{display:none;z-index:3}
.pane.is-open{display:block}
.pane::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.pane-in{display:grid;grid-template-columns:var(--fw) minmax(0,1fr)}
.pane-f{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:26px 28px 28px}
.pane-ft{margin:4px 0 0;font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.pane-fx{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pane-chip{margin-top:8px;max-width:100%;padding:7px 10px;border:1px solid var(--line);background:var(--white);font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pane-go{margin-top:auto;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;color:var(--ink);border:0}
.pane-go span{transition:transform 180ms var(--ease)}
.pane-go:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.pane-cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 28px;padding:24px 28px 22px}
.pane-col{display:flex;flex-direction:column;min-width:0}
.pane-col .label{padding:2px 10px 8px}
.pane-a,.mp-a{display:block;border:0;color:var(--ink)}
.pane-a{padding:9px 10px;transition:background-color 120ms linear}
.pane-a:hover,.pane-a:focus-visible{background:var(--page)}
.pane-a:focus-visible{outline:1.5px solid var(--ink);outline-offset:-1.5px}
.pane-a-t,.mp-a-t{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em;line-height:1.3}
.pane-a-d,.mp-a-d{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--muted)}
.pane-a-d.mono,.mp-a-d.mono{font-size:11.5px;letter-spacing:0}
.pane-a-q .pane-a-t{font-weight:400}
.pane-a[aria-current] .pane-a-t,.mp-a[aria-current] .mp-a-t{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.ext{margin-left:5px;font-size:.85em;color:var(--label);font-weight:400}
/* Without script the trays still open, each on its own box */
html:not(.js) .nav-i:hover>.pane,html:not(.js) .nav-i:focus-within>.pane{display:block;background:var(--white);border:1px solid var(--line)}
.hdr-end{justify-self:end;display:flex;align-items:center;gap:8px}
.mp-login{display:none}
.hdr-login[aria-disabled],.hdr-login[aria-disabled]:hover{color:var(--faint);border-color:var(--line);cursor:default}
.mp-login[aria-disabled]{color:var(--faint);cursor:default}
.pane-a[aria-disabled],.mp-a[aria-disabled]{cursor:default}
.pane-a[aria-disabled]:hover{background:transparent}
.pane-a[aria-disabled] .pane-a-t,.pane-a[aria-disabled] .pane-a-d,.mp-a[aria-disabled] .mp-a-t,.mp-a[aria-disabled] .mp-a-d{color:var(--faint)}
.ftr-col .ftr-app{font-size:13.5px;color:var(--muted)}
.ftr-col .ftr-app[aria-disabled]{color:var(--faint);cursor:default}
.menu{display:none;align-items:center;gap:10px;height:44px;min-width:44px;padding:0 10px;background:transparent;border:1px solid var(--line2);font:500 13px var(--sans);color:var(--ink);cursor:pointer}
.menu-x{position:relative;width:14px;height:10px;display:block}
.menu-x i{position:absolute;left:0;right:0;height:1.5px;background:var(--ink);transition:transform 200ms var(--ease),top 200ms var(--ease)}
.menu-x i:first-child{top:1px}.menu-x i:last-child{top:7px}
.menu[aria-expanded="true"] .menu-x i:first-child{top:4px;transform:rotate(45deg)}
.menu[aria-expanded="true"] .menu-x i:last-child{top:4px;transform:rotate(-45deg)}
/* The phone menu: the same lists, one section open at a time, under the header to the bottom of the screen */
.menu-panel{position:fixed;left:0;right:0;top:var(--hh);bottom:0;overflow-y:auto;overscroll-behavior:contain;background:var(--page)}
.menu-panel nav{display:flex;flex-direction:column;max-width:720px;padding:4px var(--pad) 40px}
.mp-sec{border-bottom:1px solid var(--line)}
.mp-t,.mp-link{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;padding:0;background:none;border:0;font:500 19px/1.2 var(--sans);letter-spacing:-.02em;color:var(--ink);text-align:left;cursor:pointer}
.mp-link{border-bottom:1px solid var(--line)}
.mp-t .chev{width:9px;height:9px;margin:0 4px 0 0}
.mp-t[aria-expanded="true"] .chev::before{transform:translate(0,15%) rotate(225deg)}
.mp-b{padding:0 0 18px;overflow:hidden}
.mp-b .label{padding:14px 0 4px}
.mp-a{padding:10px 0}
.mp-a-t{font-size:16px}
.mp-a-q .mp-a-t{font-weight:400}
[id]{scroll-margin-top:84px}


/* The home hero: the line across the page, then the words and the record side by side. The record is the hero figure
   card, on paper since 2026-10-06 (David: "Let's switch those to paper too"), as the Shared Record card on How it works is. */
.hero-home{padding:72px 0 104px}
.hero-home .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:56px;align-items:center}
.hero-home .h1-home{font-size:clamp(48px,5.15vw,74px);margin-top:20px}
.hero-home .hero-lede{margin-top:26px;font-size:24px;line-height:1.38;letter-spacing:-.015em;max-width:none}
.hero-lede .ln{display:block}
.hero-btns{margin-top:36px}
.btn-cmd{justify-content:center;gap:0;padding:0;background:var(--white);border-color:var(--line2);color:var(--ink);font:500 13px/1 var(--mono);letter-spacing:0}
.btn-cmd:hover{border-color:var(--ink)}
.btn-cmd:focus-visible{outline:1.5px solid var(--ink);outline-offset:2px}
.cmd-t{padding:0 18px;white-space:nowrap}
@media (min-width:1100px) and (max-width:1279px){.hero-btns .btn.btn-cmd{flex:1 1 100%}}
@media (max-width:719px){.hero-btns .btn{flex:1 1 auto}.hero-btns .btn.btn-cmd{flex:1 1 100%}}
@media (max-width:1099px){
  .hero-home .hero-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .hero-home .h1-home{font-size:clamp(44px,7vw,72px)}
  .hero-home .rcard{max-width:600px}
}
.btn-cmd.is-copied{border-color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-lede{font-size:20px;line-height:1.55;letter-spacing:-.005em;color:var(--ink);max-width:40ch}
.rcard{--cp:30px;background:var(--white);color:var(--ink);border:1px solid var(--line);min-width:0}
.rcard .lk-mark{color:var(--ink)}
.rcard .label{color:var(--label)}
.rcard-bar{height:42px;display:flex;align-items:center;gap:10px;padding:0 var(--cp);background:var(--card);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted);min-width:0}
.rcard-url{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rcard-tag{margin-left:auto;flex:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);border:1px solid var(--line2);padding:2px 6px}
.rcard-body{padding:30px var(--cp) 28px}
.rcard-t{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.rcard-s{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
.rcard-seal{margin-top:24px;padding:18px 0 0;border-top:1px solid var(--line)}
.rcard-sv{margin-top:10px;font-size:20px;font-weight:500;line-height:1.4;letter-spacing:0;color:var(--rec);white-space:nowrap}
.rcard-cap{margin-top:8px;font-size:13px;color:var(--muted)}
.rcard-rows{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.rc-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--div)}
.rc-n{font-size:11.5px;color:var(--label)}
.rc-k{display:block;font-size:11px;color:var(--label)}
.rc-tt{display:block;margin-top:3px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.rc-r{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:500;white-space:nowrap}
.rcard-status{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:15.5px;font-weight:500;line-height:1.45;min-height:45px}
.rcard-status .sq{margin-top:6px}
.rcard .sq{background:var(--ok);border-color:var(--ok)}
.rc-wait{display:none}
html.js .rcard[data-pending] .rc-row:not(.ok) .rc-wait,html.js .rcard[data-pending] .rcard-status .rc-wait{display:inline}
html.js .rcard[data-pending] .rc-row:not(.ok) .rc-ok,html.js .rcard[data-pending] .rcard-status .rc-ok{display:none}
html.js .rcard[data-pending] .rc-row:not(.ok) .sq,html.js .rcard[data-pending] .rcard-status .sq{background:transparent;border-color:var(--faint)}
html.js .rcard[data-pending] .rc-row:not(.ok) .rc-r{color:var(--muted);font-weight:400}


/* The live hero record: one line per entry, so every row is the same height and the list moves by transform alone */
.rc-win{margin-top:18px;overflow:hidden;border-top:1px solid var(--line);position:relative}
.rcard-live .rc-win{height:192px}
.rcard-live .rcard-sv{font-size:17px}
.rcard-live .rcard-status{min-height:0}
.rc-win .rcard-rows{margin:0;border-top:0;will-change:transform}
.rcard-live .rc-row{grid-template-columns:40px minmax(0,1fr) auto;align-items:center;height:64px;padding:0}
.rcard-live .rc-e{min-width:0}
.rcard-live .rc-k,.rcard-live .rc-tt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcard-live .rc-r{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.rc-st{display:inline-flex;align-items:center;gap:8px}
.rc-sl{font-size:11px;font-weight:400;color:var(--label);letter-spacing:0}
.rcard-live .rc-row .sq{transition:background-color 220ms var(--ease),border-color 220ms var(--ease)}
.rcard-live .rc-row[data-state="recording"] .sq{background:transparent;border-color:var(--faint)}
.rcard-live .rc-row[data-state="committed"] .sq,.rcard-live .rc-row[data-state="checking"] .sq{background:var(--rec);border-color:var(--rec)}
.rcard-live .rc-row[data-state="recording"] .rc-word,.rcard-live .rc-row[data-state="checking"] .rc-word{color:var(--muted);font-weight:400}
.rc-count{display:inline-block;vertical-align:top;height:1.45em;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-d{display:inline-block;vertical-align:top;overflow:hidden;height:1.45em;line-height:1.45em}
.rc-dc{display:block;will-change:transform}
.rc-dc>span{display:block;height:1.45em}

/* Why now: one number carries the screen */
.why-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:48px;border-top:1px solid var(--line2)}
.why-big{padding:28px 56px 0 0}
.fig-xl{margin-top:10px;font-size:216px;font-weight:600;letter-spacing:-.065em;line-height:.82;font-variant-numeric:tabular-nums}
.why-big p{margin-top:26px;font-size:20px;line-height:1.5;letter-spacing:-.005em;max-width:52ch}
.why-side{display:flex;flex-direction:column;border-left:1px solid var(--line);padding:28px 0 0 36px}
.why-side .fig{padding:0}
.why-side .fig+.fig{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.why-next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:72px;border-top:1px solid var(--line2)}
.why-next-a{padding:28px 56px 0 0}
.why-next-a p{margin-top:16px;font-size:20px;line-height:1.5;letter-spacing:-.005em;max-width:46ch}
.why-next-b{border-left:1px solid var(--line);padding:59px 0 28px 36px;margin-top:0;font-size:22px;line-height:1.35;letter-spacing:-.018em;font-weight:500;color:var(--ink)}
.why-next-b span{display:block;margin-top:10px;color:var(--muted);font-weight:400}

/* What changes: the turn is the biggest line in the section */
.split-top{align-items:start}
.pivot{border-top:2px solid var(--ink);padding-top:20px;display:flex;flex-direction:column;gap:16px}
/* What changes: four cards, one at a time. The track scrolls and snaps by itself; the dots and arrows come with script. */
.deck{min-width:0}
.deck-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.deck-track::-webkit-scrollbar{display:none}
.deck-card{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;background:var(--card);border:1px solid var(--line);padding:30px 32px 32px;display:flex;flex-direction:column;gap:18px;min-height:330px}
.deck-pac{border-top:2px solid var(--ink);padding-top:29px}
.deck-pac .label{color:var(--ink)}
.deck-big{font-size:26px;font-weight:500;letter-spacing:-.022em;line-height:1.3;color:var(--ink);max-width:42ch}
.deck-big span{display:block;margin-top:14px;font-size:17px;font-weight:400;letter-spacing:-.005em;line-height:1.55;color:var(--muted);max-width:58ch}
.deck-small{font-size:17px;line-height:1.55;color:var(--muted);max-width:58ch}
.deck-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
html:not(.js) .deck-nav{display:none}
.deck-dots{display:flex;margin-left:-18px}
.deck-dot{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;cursor:pointer}
.deck-dot span{width:8px;height:8px;border:1px solid var(--faint);background:transparent;transition:background-color 220ms var(--ease),border-color 220ms var(--ease)}
.deck-dot:hover span{border-color:var(--ink)}
.deck-dot[aria-current] span{background:var(--ink);border-color:var(--ink)}
.deck-arrows{display:flex;gap:8px}
.deck-arrow{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line2);background:transparent;color:var(--ink);font:500 15px var(--mono);cursor:pointer}
.deck-arrow:hover{border-color:var(--ink)}
.deck-arrow:disabled{color:var(--faint);border-color:var(--line);cursor:default}
.pivot-give{font-size:16.5px;line-height:1.6;color:var(--muted)}
.pivot-big{font-size:28px;font-weight:500;letter-spacing:-.022em;line-height:1.28;color:var(--ink)}
.pivot-keys{font-size:15px;line-height:1.6;color:var(--muted);max-width:60ch}

/* Hero */
.hero{padding:96px 0 88px}
.hero-page{padding:88px 0 80px}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.hero-art{min-width:0}
.hero-404{padding:120px 0 140px}

.sq{display:inline-block;width:8px;height:8px;flex:none;border:1px solid var(--faint);background:transparent}
.sq.ok,.ok .sq{background:var(--ok);border-color:var(--ok)}
.bad .sq{background:var(--bad);border-color:var(--bad)}

/* Figures */
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;border-top:1px solid var(--line2)}
.fig{padding:22px 28px 0 0}
.figs .fig+.fig{padding-left:28px;border-left:1px solid var(--line)}
.fig-n{font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fig-q{font-size:30px;letter-spacing:-.025em;line-height:1.15}
.fig p{margin-top:14px;font-size:14px;color:var(--muted)}
.fig-l{margin-bottom:14px}
.prose .label-gap{margin-top:14px}
.fig-inline{padding:0;margin-top:32px}
.fig-inline .fig-n{font-size:44px}
.fig-inline p{font-size:11.5px;color:var(--label);margin-top:10px;letter-spacing:.01em}

/* Three trails; PacSpace's column carries the 2px ink rule. */
.trails{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px}
.trail{border-top:1px solid var(--line2);padding-top:18px;display:flex;flex-direction:column;gap:10px}
.trail .h4{margin-top:4px}
.trail p{color:var(--muted);font-size:14.5px}
.trail-pac{border-top:2px solid var(--ink);padding-top:17px}
.trail-pac .label{color:var(--ink)}
.trail-l{display:flex;justify-content:space-between;align-items:center;gap:12px}
.trail-tag{display:inline-flex;align-items:center;gap:8px}
.trail .trail-turn{color:var(--ink);margin-top:6px}
.trail-go{font-size:14.5px;align-self:flex-start;margin-top:2px}
.trail-pac{--rw:2px;--rc:var(--ink)}
/* The three trails as tabs: all three stay in view, and the line under them answers for the one picked. The fair
   questions and the rows below sit on the same three columns, so every edge lines up. */
.tri{margin-top:44px}
.tri-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.tri-t{display:flex;flex-direction:column;gap:10px;width:100%;margin:0;padding:18px 0 0;border:0;border-top:1px solid var(--line2);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.tri-t:hover{border-top-color:var(--ink)}
.tri-t:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.tri-n{font-size:24px;font-weight:600;letter-spacing:-.025em;line-height:1.15;color:var(--label)}
.tri-d{font-size:14.5px;line-height:1.6;color:var(--muted)}
.tri-t[aria-selected="true"]{border-top:2px solid var(--ink);padding-top:17px;cursor:default}
.tri-t[aria-selected="true"] .label,.tri-t[aria-selected="true"] .tri-n{color:var(--ink)}
.tri-ps{display:grid;row-gap:40px;margin-top:56px}
.tri-w{font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1.04}
.tri-s{margin-top:18px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.tri-s.ink{color:var(--ink);margin-top:10px}
.tri-pl{margin-bottom:12px}
.js .tri-pl{display:none}
.js .tri-p{grid-area:1/1}
.js .tri-p:not(.on){opacity:0;visibility:hidden}
.js .tri-p.on{transition:opacity 180ms linear}
.fits .ask,.fits .row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;align-items:baseline}
.tri-b{margin-top:40px}
.tri-b .rows{margin-top:14px}
.tri-b .row-n{font-family:var(--sans);font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;color:var(--ink)}
.fits .row-b p,.fits .ask-a{font-size:15px;line-height:1.6}
.fits .asks{margin-top:8px}
.fits .ask{row-gap:0;padding:20px 0}
.fits .ask-w{margin-top:0}
.fits .ask-a,.fits .row-b{grid-column:2/4;padding-top:0;max-width:62ch}
.triple{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.triple .h4{font-size:34px;letter-spacing:-.035em;line-height:1}
.triple p{margin-top:12px;color:var(--muted);font-size:15px}

/* Numbered rows */
.rows{margin-top:36px;border-top:1px solid var(--line2)}
.split .rows{margin-top:0}
.row{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.row-n{font-size:11.5px;color:var(--label);letter-spacing:.04em}
.row-b{display:flex;flex-direction:column;gap:4px}
.row-b p{color:var(--muted)}
.row-b p.ink{color:var(--ink);font-weight:500}
.rows-tight{margin-top:20px}
.rows-tight .row{grid-template-columns:44px minmax(0,1fr);padding:12px 0}
/* Rows led by a word (How it works: Shared. Fixed. Private.) */
.rows-w .row{grid-template-columns:240px minmax(0,1fr);gap:28px;padding:26px 0}
.rows-w .row-n{font-size:30px;font-weight:600;letter-spacing:-.035em;line-height:1.05;color:var(--ink);padding-top:0}
.rows-w .row-b{gap:10px;max-width:68ch}
.rows-w .row-b p.ink{font-size:17px;line-height:1.5}

/* The two lines and the one link */
.steps{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line2)}
.step{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--line);align-items:center}
.step-l{display:flex;align-items:baseline;gap:14px}
.step-n{font-size:11.5px;color:var(--label)}
.step-t{font-size:16px;font-weight:600;letter-spacing:-.01em}
.step-r{min-width:0}
.step-seal{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;font-size:16px}
.seal-chip{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--white);padding:8px 12px;font-size:12.5px;color:var(--rec);white-space:nowrap}
.seal-chip .lk-mark{color:var(--ink)}
.browser{background:var(--white);border:1px solid var(--line)}
.browser-bar{padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser-row{display:flex;align-items:center;gap:14px;padding:12px;font-size:12.5px;flex-wrap:wrap}
.browser-row .res{margin-left:auto}
.res{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:500;white-space:nowrap}
.ease-foot{margin:28px 0 0 calc((100% - 28px) / 3 + 28px);max-width:68ch;color:var(--muted);font-size:16.5px;line-height:1.6}

/* Code on paper: a page-tint header naming the language, a white body, ink and muted only. */
.code{margin:0;border:1px solid var(--line);background:var(--white);min-width:0}
.code-h{display:flex;justify-content:space-between;gap:12px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);font:400 11.5px var(--mono);color:var(--label)}
.code-b{margin:0;padding:16px 14px;overflow-x:auto;font:400 12.5px/1.85 var(--mono);color:var(--ink);white-space:pre}
.code-b .k{font-weight:600}
.code-b .s{color:var(--muted)}
.cmd{border:1px solid var(--line);background:var(--white);padding:12px 14px;font-size:12.5px;line-height:1.6;overflow-x:auto;white-space:nowrap}
.cmd span{display:block;color:var(--label);font-size:11.5px}

/* Product cards, on one grid (David, 2026-10-05: "uses grid alignment to make things look orderly"). Two columns. The
   two cards side by side share their rows (subgrid), so labels, names, lines, the white boxes and the buttons sit level
   across them, and the boxes are the same height. The Records API card above divides on the same line as the two cards
   under it, so its code starts where the checker's words start, and the code box runs from the label to the button. */
.pcards{--pg:18px;--pp:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pg);margin-top:44px}
.pcard{background:var(--card);border:1px solid var(--line);padding:var(--pp);min-width:0;display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:14px;align-items:start}
.pcard-n{font-size:22px;font-weight:600;letter-spacing:-.025em;margin-top:-6px}
.pcard-l{color:var(--muted);font-size:14.5px}
.pcard .btn{justify-self:start}
.pcard .cmd{align-self:stretch}
.pcard-x{font-size:11.5px;color:var(--label)}
.pcard-wide{grid-column:1 / -1;grid-row:auto;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(var(--pg) + var(--pp) * 2 + 2px);
  grid-template-areas:"label code" "name code" "line code" "x code" "btn code";grid-auto-rows:auto}
.pcard-wide>.label{grid-area:label}
.pcard-wide>.pcard-n{grid-area:name}
.pcard-wide>.pcard-l{grid-area:line}
.pcard-wide>.pcard-x{grid-area:x}
.pcard-wide>.btn{grid-area:btn}
.pcard-wide>.code{grid-area:code;align-self:stretch}
.side-card{margin-top:32px;max-width:520px}
/* A split with a card under its heading: the rows beside it start on the card's top edge, not the heading's. */
.split-card{row-gap:32px}
.split-card>.side-card{grid-column:1;grid-row:2;margin-top:0}
.split-card>div:last-child{grid-column:2;grid-row:2}
.side-card .rcard-sv{font-size:16px}

/* The flow: four steps, each with the guarantee it leaves behind. PacSpace's step carries the ink rule. */
.flow{margin-top:40px;border-top:1px solid var(--line2)}
.flow-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;padding:12px 0;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--label);border-bottom:1px solid var(--line)}
.flow-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;padding:22px 0;border-bottom:1px solid var(--line)}
.flow-step{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:baseline}
.flow-step .h4{margin:6px 0 6px}
.flow-step p{color:var(--muted);font-size:14.5px;max-width:58ch}
.flow-n{font-size:11.5px;color:var(--label)}
/* the guarantee's first line sits on the step name's baseline: the label's line, the name's margin, and the two fonts' ascents */
.flow-g{display:flex;flex-direction:column;gap:4px;padding-top:21.7px}
.flow-g p{color:var(--muted);font-size:14.5px}
.flow-g p.ink{color:var(--ink);font-weight:500;font-size:15px}
.flow-pac{border-top:2px solid var(--ink);margin-top:-1px}
.flow + .lead{margin-top:28px}

/* Below 1240px the code no longer fits its half with room to spare, so it goes under the line, across the card: its edges are then the
   outer edges of the two boxes under it. */
@media (max-width:1239px){
  .pcard-wide{grid-template-columns:minmax(0,1fr);grid-template-areas:"label" "name" "line" "code" "x" "btn"}
  .pcard-wide>.code{align-self:start}
}
@media (max-width:859px){
  .flow-head{display:none}
  .flow-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .flow-g{padding:0 0 0 52px}
  .pcards{grid-template-columns:minmax(0,1fr)}
}

/* Cards that route a reader to their page */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.card{background:var(--card);border:1px solid var(--line);padding:28px 26px 24px;display:flex;flex-direction:column;gap:16px;min-height:236px}
.card-link{transition:border-color 120ms linear}
.card-link:hover{border-color:var(--ink)}
.card-q{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.35}
.go{margin-top:auto;font-size:13.5px;font-weight:500}

/* Cases with example entries */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:44px}
.case{border-top:1px solid var(--line2);padding-top:18px;display:flex;flex-direction:column;gap:10px;min-width:0}
.case>p{color:var(--muted);font-size:14.5px}
.ex{margin-top:8px;background:var(--white);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ex-r{display:flex;flex-direction:column;gap:2px;font-size:13.5px;min-width:0}
.ex-r .mono{font-size:11px;color:var(--label)}
.cases-plain{margin-top:20px}
.cases-plain .case>p{font-size:15px}
.h3.sub{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-top:64px}
.onpage{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;margin-top:44px;padding-top:18px;border-top:1px solid var(--line);max-width:860px}
.onpage .label{margin-right:4px}
.onpage a{font-size:14px;color:var(--ink);border-bottom:1px solid var(--line2);transition:border-color 120ms linear}
.onpage a:hover{border-bottom-color:var(--ink)}
.asks{margin-top:40px;border-top:1px solid var(--line2)}
.ask{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;padding:24px 0;border-bottom:1px solid var(--line)}
.ask-q .label a{color:inherit;border-bottom:1px solid var(--line2)}
.ask-q .label a:hover{border-bottom-color:var(--label)}
.ask-q .label sup.ref a{border-bottom:0}
.ask-w{margin-top:10px;font-size:18px;line-height:1.45;letter-spacing:-.01em;color:var(--ink);max-width:60ch}
.ask-a{color:var(--muted);font-size:15px;line-height:1.6;padding-top:25px}
/* The government section: a row of its own pages under the header, sticky, so every reference page is one click away */
.secnav{position:sticky;top:64px;z-index:30;background:var(--page);border-bottom:1px solid var(--line)}
.secnav-in{display:flex;align-items:center;gap:30px;overflow-x:auto;scrollbar-width:none}
.secnav-in::-webkit-scrollbar{display:none}
/* centered under the header's items; the auto margins center the row and still let it start at the left edge when it scrolls */
.secnav-in>:first-child{margin-left:auto}
.secnav-in>:last-child{margin-right:auto}
.secnav-t{font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;padding:15px 0}
.secnav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.secnav li a{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap;padding:16px 0 14px;border-bottom:2px solid transparent;transition:color 120ms linear}
.secnav li a:hover{color:var(--ink)}
.secnav li a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.sec-gov [id],.sec [id]{scroll-margin-top:132px}
.hero-sec{padding-top:72px}
/* sources: small numbers in the text, the list at the foot of the page */
sup.ref{line-height:0;font-size:.62em;vertical-align:super;margin-left:1px}
sup.ref a{color:var(--label);border-bottom:0;padding:0 1px;font-variant-numeric:tabular-nums}
sup.ref a:hover{color:var(--ink)}
.band-src{padding:44px 0 52px}
.sources{list-style:none;counter-reset:s;margin:14px 0 0;padding:0;columns:2;column-gap:56px;font-size:12.5px;line-height:1.55;color:var(--label)}
.sources li{counter-increment:s;break-inside:avoid;padding:0 0 10px 26px;position:relative}
.sources li::before{content:counter(s);position:absolute;left:0;top:0;font:500 11px/1.75 var(--mono);color:var(--faint)}
.sources a{color:var(--muted);border-bottom:1px solid var(--line)}
.sources a:hover{color:var(--ink);border-bottom-color:var(--line2)}
.sources li:target{color:var(--ink)}
/* the hub's index of reference pages */
.gindex{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line2)}
.gindex li{border-bottom:1px solid var(--line)}
/* The number, the title, the line and the arrow sit on one baseline, the first line's */
.gcard{display:grid;grid-template-columns:44px minmax(0,220px) minmax(0,1fr) 24px;gap:20px;align-items:baseline;padding:18px 0}
.gcard .n{font:500 11px/1.4 var(--mono);color:var(--label);letter-spacing:.04em}
.gcard h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.gcard p{color:var(--muted);font-size:15px;max-width:70ch}
.gcard .go{margin-top:0;color:var(--label);text-align:right;transition:transform 120ms linear}
a.gcard:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
a.gcard:hover .go{color:var(--ink);transform:translateX(3px)}
/* example previews, three equal cards on shared rows (subgrid): the label, the title, each entry's rule and the link sit
   level across the three, however the titles wrap */
.xprev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px}
.xp{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:12px;align-content:start;background:var(--white);border:1px solid var(--line);padding:20px 22px 22px;min-width:0}
.xp h3{font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.xp .ex-r{padding-top:10px;border-top:1px solid var(--div)}
.xp .go{align-self:end;padding-top:8px;font-size:14px}
a.xp:hover .go{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
/* five steps, side by side */
.steps5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 24px;margin:40px 0 0;padding:0}
.steps5 li{list-style:none;border-top:1px solid var(--line2);padding-top:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.steps5 .n{font:500 11px/1.4 var(--mono);color:var(--label);letter-spacing:.04em}
.steps5 b{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.steps5 span{color:var(--muted);font-size:14px}
.steps5.steps4{grid-template-columns:repeat(4,minmax(0,1fr))}
/* the examples page */
.xjump{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 28px;margin-top:44px}
.xjump .label{padding-bottom:10px;border-bottom:1px solid var(--line2);margin-bottom:8px}
.xjump a{display:flex;gap:12px;padding:7px 0;font-size:14.5px;border-bottom:1px solid var(--div)}
.xjump a .mono{font-size:11px;color:var(--label);padding-top:3px;min-width:18px}
.xjump a:hover span:last-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.xc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.xc-k{font:500 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.xc h2{font-size:30px;font-weight:600;letter-spacing:-.028em;line-height:1.15;margin-top:12px;max-width:none;text-wrap:balance}
.xc-s{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.6;max-width:58ch}
.xc-dl{margin-top:26px;border-top:1px solid var(--line2)}
.xc-dl div{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line);align-items:baseline}
.xc-dl dt{font:500 10.5px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--label)}
.xc-dl dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.xc-dl dd a{border-bottom:1px solid var(--line2)}
.xc-dl dd a:hover{border-bottom-color:var(--label)}
.rec{background:var(--white);border:1px solid var(--line);min-width:0}
.rec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.rec-t{font:500 12px/1.4 var(--mono);color:var(--ink);text-align:right}
.rec ol{list-style:none;margin:0;padding:0}
.rec li{display:grid;grid-template-columns:40px 72px minmax(0,1fr);gap:12px;padding:13px 18px;border-bottom:1px solid var(--div)}
.rec li:last-child{border-bottom:0}
.rec .n,.rec .t{font:500 11px/1.75 var(--mono);color:var(--label);font-variant-numeric:tabular-nums}
.rec .k{display:block;font:400 11px/1.6 var(--mono);color:var(--label)}
.rec .x{display:block;font-size:14.5px;line-height:1.45;color:var(--ink);margin-top:2px}
.rec-f{padding:11px 18px;border-top:1px solid var(--line);font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;color:var(--faint)}
/* questions as a reference: every answer open, every question addressable */
.qa{display:flex;flex-direction:column;gap:26px;max-width:70ch}
.qa h3{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.qa p{color:var(--muted);margin-top:6px}
.qa-n{font:500 11px/1.4 var(--mono);color:var(--label);letter-spacing:.04em;margin-bottom:6px}
.qa .qa-i:target h3{box-shadow:inset 3px 0 0 var(--ink);padding-left:12px}
/* case study template */
.cs{background:var(--white);border:1px solid var(--line);padding:26px 28px;margin-top:36px;max-width:860px}
.cs .xc-dl{margin-top:16px}
.cs .h3{font-size:22px;margin-top:10px}
.cs dd{color:var(--muted)}
/* what the prime brings to the bid: the rule on the left, what the record gives on the right */
.bids{margin-top:36px;border-top:1px solid var(--line2)}
.bid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.bid h3{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin-top:8px}
.bid p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:62ch}
/* news: one list per section, by month; the hub shows the newest three */
.nm{padding-top:8px}
.nm+.nm{margin-top:44px}
.nm-h{padding-bottom:12px;border-bottom:1px solid var(--line2)}
.news{list-style:none;margin:0;padding:0}
.ni{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:6px 40px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.ni-m{display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.5;color:var(--label);letter-spacing:.02em;grid-row:span 2}
.ni-m time{color:var(--ink)}
.ni-k{color:var(--faint);text-transform:uppercase;letter-spacing:.12em;font-size:10px}
.ni-h{font-size:17px;font-weight:600;letter-spacing:-.012em;line-height:1.35;color:var(--ink);text-wrap:pretty}
.ni-h:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.ni-h .ext{font-size:.8em;color:var(--faint);margin-left:4px}
.ni p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:70ch}
.news-latest{margin-top:28px;border-top:1px solid var(--line2)}
.news-latest .ni-m{flex-direction:row;flex-wrap:wrap;gap:4px 12px}
.news-latest .ni{grid-template-columns:minmax(0,1fr);gap:6px}
.news-latest .ni-m{grid-row:auto}
.news-intro{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:28px;font-size:13.5px;color:var(--muted)}
.stakes-end{margin-top:36px;max-width:72ch}
/* what people in the field say, in their words */
.quotes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:40px;border-top:1px solid var(--line2)}
.qt{margin:0;padding:24px 0 26px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.qt blockquote{margin:0;font-size:19px;line-height:1.45;letter-spacing:-.012em;color:var(--ink);text-wrap:pretty}
.qt figcaption{font-size:13px;color:var(--label)}
.clause p{font:400 15px/1.75 var(--mono);color:var(--ink);max-width:80ch}
/* a quiet onward link under a section */
.more{margin-top:28px}
.xjump.x3{grid-template-columns:repeat(3,minmax(0,1fr))}
.split .xc-dl{margin-top:4px}

/* Tables: mono heads, hairline rules, no row hover. A table is a document, not a menu. */
.tbl-scroll{overflow-x:auto;margin-top:36px;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:14px 18px 14px 0;border-bottom:1px solid var(--line)}
.tbl thead th{font:500 10.5px/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--label);border-bottom:1px solid var(--line2);padding-top:0}
.tbl tbody th{font-weight:600;width:22%}
.tbl td{color:var(--muted)}
.tbl-cmp td:last-child{color:var(--ink)}
.tbl-cmp thead th:last-child{color:var(--ink)}
.tbl-test td:first-child{color:var(--ink);font-weight:500;width:52%}
.tbl span.n{display:inline-block;width:34px;font-size:11.5px;color:var(--label);font-weight:400}

/* Buttons that wait, and their tooltips */
.btn:disabled{opacity:.4;cursor:default}
.btn-line:disabled:hover{border-color:var(--line2)}
.tool{position:relative;display:inline-flex}
.tip{display:none;position:absolute;left:0;top:calc(100% + 6px);width:max-content;max-width:300px;background:var(--ink);color:var(--page);font-size:12.5px;font-weight:400;line-height:1.45;padding:8px 10px;z-index:5}
.tool-end .tip{left:auto;right:0}
@media (hover:hover){.tool:hover .tip,.tool:focus-within .tip{display:block}}

/* The Shared Record, lite (home page, 2026-10-06): the dashboard prototype's Shared Record, smaller, for a visitor to
   explore. Its type, rules and colours are the prototype's (pacspace-dashboard-mock, app.css .srp-*). */
.lite-sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.lite-copy{position:sticky;top:96px}
.lite-try{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.lite-tools{display:flex;flex-wrap:wrap;gap:8px}
.lite-tools .tip{top:auto;bottom:calc(100% + 6px)}
.lite-say{min-height:46px;font-size:14px;line-height:1.55;color:var(--muted);max-width:44ch}
.lite-say.bad{color:var(--bad)}
.lite-note{font-size:12.5px;color:var(--label)}

.srl{border:1px solid var(--line2);background:var(--page);min-width:0;color:var(--ink)}
.srl-url{height:34px;display:flex;align-items:center;gap:10px;padding:0 24px;background:var(--card);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted);min-width:0}
.srl-url .mono:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.srl-tag{margin-left:auto;flex:none;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);border:1px solid var(--line2);padding:2px 6px}
.srl-bar{height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;border-bottom:1px solid var(--line)}
.srl-bar .lk-word{font-size:16px}
.srl-ref{font-size:11.5px;color:var(--muted);white-space:nowrap}
.srl-in{padding:28px 24px 24px;display:flex;flex-direction:column;min-width:0}
.srl-head{display:flex;flex-direction:column;gap:8px;padding-bottom:18px}
.srl-eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.srl-title{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.srl-strip{margin:0;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1.35fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1fr);border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.srl-strip>div{padding:11px 12px 11px 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.srl-strip dt{font-size:11.5px;color:var(--muted)}
.srl-strip dd{margin:0;text-wrap:pretty}
.srl-v{font-size:13.5px;font-weight:500;line-height:1.45}
.srl-s{font-size:12px;line-height:1.45;color:var(--muted)}
.srl-alert{margin-top:14px;display:flex;align-items:baseline;gap:10px;padding:10px 14px;border:1px solid var(--bad);background:var(--card);font-size:13px;line-height:1.5}
.srl-alert .srl-lk{margin-left:auto;flex:none}
.srl-tabs{margin-top:20px;display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.srl-tabs::-webkit-scrollbar{display:none}
.srl-tab{position:relative;flex:none;display:flex;align-items:center;gap:8px;height:42px;padding:0;background:none;border:0;font:400 13.5px var(--sans);color:var(--muted);cursor:pointer;white-space:nowrap}
.srl-tab:hover,.srl-tab[aria-selected="true"]{color:var(--ink)}
.srl-tab[aria-selected="true"]{font-weight:600}
.srl-tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.srl-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.srl-tn{font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:17px;min-width:17px;padding:0 4px;box-sizing:border-box;text-align:center;color:var(--muted);border:1px solid var(--line2)}
.srl-tn.on{color:var(--page);background:var(--ink);border-color:var(--ink)}
.srl-panel{padding-top:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.srl-fade{animation:srl-in 180ms linear}
@keyframes srl-in{from{opacity:0}to{opacity:1}}
.srl-sq{display:block;flex:none;box-sizing:border-box;width:7px;height:7px;border:1px solid var(--faint);background:transparent}
.srl-sq.ok{background:var(--ok);border-color:var(--ok)}
.srl-sq.bad{background:var(--bad);border-color:var(--bad)}
.srl-sq.busy{border-color:var(--ink)}
.srl-sq.ink{background:var(--ink);border-color:var(--ink)}
.srl-checking{display:flex;align-items:center;gap:10px;font-size:13.5px;min-height:38px}
.srl-res{display:grid;grid-template-columns:150px minmax(0,1fr) 116px;gap:0 14px;padding:11px 0;border-bottom:1px solid var(--div);align-items:baseline}
.srl-res>span:first-child{font-size:12.5px;color:var(--muted)}
.srl-res>span:nth-child(2){font-size:13.5px;line-height:1.5}
.srl-w{display:flex;align-items:center;gap:8px;font-size:12.5px;white-space:nowrap}
.srl-w.ok{color:var(--ok)}
.srl-w.bad{color:var(--bad)}
.srl-res-top{border-top:1px solid var(--line2)}
.srl-refl{font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--muted)}
.srl-refrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.srl-lk{font:400 12.5px var(--sans);color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line2);padding:0 0 1px;cursor:pointer}
.srl-lk:hover{border-bottom-color:var(--ink)}
.srl-lk:focus-visible,.srl-bo:focus-visible,.srl-btn:focus-visible,.srl-rec-row:focus-visible,.srl-step button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.srl-rec{display:flex;flex-direction:column;margin-top:6px}
.srl-rec-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:8px}
.srl-h4{margin:0;font-size:14px;font-weight:600;letter-spacing:-.01em}
.srl-mu{font-size:12.5px;color:var(--muted)}
.srl-rec-th,.srl-rec-row{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr) 56px 116px;gap:0 14px;align-items:center}
.srl-rec-th{min-height:30px;border-top:1px solid var(--line2);border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.srl-rec-th>span:first-child,.srl-ent-th>span:first-child{padding-left:18px}
.srl-rec-g{border-bottom:1px solid var(--div)}
.srl-rec-g.on{background:var(--card)}
.srl-rec-row{width:100%;min-height:40px;padding:0;border:0;background:transparent;color:var(--ink);font:400 13.5px var(--sans);text-align:left}
button.srl-rec-row{cursor:pointer}
button.srl-rec-row:hover{background:rgba(19,19,17,.035)}
.srl-no{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.srl-chev{flex:none;width:10px;height:10px;color:var(--faint)}
.srl-rec-row:hover .srl-chev,.srl-rec-row[aria-expanded="true"] .srl-chev{color:var(--ink)}
.srl-num{text-align:right;font-variant-numeric:tabular-nums}
.srl-st{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;white-space:nowrap}
.srl-st.bad{color:var(--bad)}
.srl-st.mu{color:var(--muted)}
.srl-ents{padding:0 0 10px}
.srl-ent{display:grid;grid-template-columns:64px minmax(0,1fr) 116px;gap:0 14px;align-items:center;min-height:32px;border-top:1px solid var(--div);font-size:12.5px}
.srl-ent-th{min-height:28px;font-size:11.5px;color:var(--muted);border-top-color:var(--line)}
.srl-ent .srl-no{padding-left:18px}
.srl-ent.bad{background:rgba(169,50,39,.06)}
.srl-ent.bad:focus{outline:none}
.srl-ent.bad:focus-visible{outline:2px solid var(--bad);outline-offset:-2px}
.srl-hash{font-family:var(--mono);font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.srl-hash mark,.srl-seal mark,.srl-fld mark{background:transparent;color:var(--bad);font-weight:600;box-shadow:inset 0 -1.5px 0 var(--bad)}
.srl-left{font-size:13.5px;color:var(--muted)}
.srl-left b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.srl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.srl-step{display:flex;align-items:center;border:1px solid var(--line2);background:var(--white)}
.srl-step button{font:400 15px var(--sans);width:32px;height:32px;background:none;border:0;cursor:pointer;color:var(--ink)}
.srl-step span{min-width:24px;text-align:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.srl-bo{font:500 13px var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line2);height:34px;padding:0 14px;cursor:pointer;flex:none}
.srl-bo:hover{border-color:var(--ink)}
.srl-btn{font:500 13px var(--sans);color:var(--page);background:var(--ink);border:1px solid var(--ink);height:36px;padding:0 16px;cursor:pointer;flex:none}
.srl-btn:disabled{opacity:.4;cursor:default}
.srl-picks{border-top:1px solid var(--line2)}
.srl-pick{display:grid;grid-template-columns:150px minmax(0,1fr) 60px;gap:0 14px;padding:9px 0;border-bottom:1px solid var(--div);align-items:center;font-size:13px}
.srl-pick .srl-lk{justify-self:end}
.srl-field{display:flex;flex-direction:column;gap:6px}
.srl-field>span{font-size:12.5px;color:var(--muted)}
.srl-ta{font:400 13.5px/1.5 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--line2);padding:8px 10px;min-height:52px;outline:none;resize:vertical;box-sizing:border-box;width:100%}
.srl-ta:focus{border-color:var(--ink)}
.srl-wait{display:flex;align-items:baseline;gap:10px;background:var(--card);border:1px solid var(--line);padding:12px 14px;font-size:13.5px;line-height:1.5}
.srl-ans{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column}
.srl-ans-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.srl-ans-h>span:first-child{font-size:14px;font-weight:600}
.srl-fld,.srl-kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:0 14px;padding:9px 14px;border-bottom:1px solid var(--div);font-size:13.5px;line-height:1.5}
.srl-kv{padding:10px 0}
.srl-fld>span:first-child,.srl-kv>span:first-child{font-size:12.5px;color:var(--muted)}
.srl-seal{padding:9px 14px 11px;font-family:var(--mono);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srl-stmt{background:var(--white);border:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.srl-stmt>span:first-child{font-size:11.5px;color:var(--muted)}
.srl-stmt p{margin:0;font-size:14px;line-height:1.6;text-wrap:pretty}
.srl-foot{margin:36px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--muted)}

@media (max-width:1099px){
  .lite-sec{grid-template-columns:minmax(0,1fr);gap:32px}
  .lite-copy{position:static}
}
@media (max-width:639px){
  .srl-bar,.srl-url{padding:0 16px}
  .srl-in{padding:22px 16px 18px}
  .srl-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .srl-strip>div{border-bottom:1px solid var(--div)}
  .srl-res{grid-template-columns:110px minmax(0,1fr)}
  .srl-res>span:last-child{grid-column:2}
  .srl-rec-th,.srl-rec-row{grid-template-columns:64px minmax(0,1fr) 40px 104px;gap:0 10px}
  .srl-rec-th>span:nth-child(3),.srl-rec-row>span:nth-child(3){display:none}
  .srl-ent{grid-template-columns:64px minmax(0,1fr) 104px;gap:0 10px}
  .srl-pick{grid-template-columns:minmax(0,1fr) auto}
  .srl-pick>span:nth-child(2){display:none}
  .srl-alert{flex-wrap:wrap;row-gap:6px}
  .srl-alert>span{flex:1 1 calc(100% - 17px)}
  .srl-alert .srl-lk{margin-left:17px}
  .srl-st{white-space:normal;line-height:1.35}
}
@media (prefers-reduced-motion:reduce){.srl-fade{animation:none}}

/* FAQ */
.faq-list{border-top:1px solid var(--line2)}
.faq{border-top:1px solid var(--line2);max-width:860px}
.fq,.fq-g{border-bottom:1px solid var(--line)}
.fq summary,.fq-g summary{list-style:none;display:flex;align-items:center;gap:14px;padding:18px 0;cursor:pointer;font-size:16px;font-weight:500;letter-spacing:-.01em}
.fq summary::-webkit-details-marker,.fq-g summary::-webkit-details-marker{display:none}
.fq-g summary{font-size:19px;font-weight:600;letter-spacing:-.02em;padding:22px 0}
.fq-n{font-size:11.5px;color:var(--label);font-weight:400;margin-left:auto}
.chev{position:relative;width:10px;height:10px;flex:none;margin-left:auto}
.fq-n+.chev{margin-left:14px}
.chev::before{content:"";position:absolute;inset:0;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translate(0,-25%) rotate(45deg);transition:transform 260ms var(--ease)}
details[open]>summary .chev::before{transform:translate(0,15%) rotate(225deg)}
.fq-a{padding:0 0 22px;max-width:68ch}
.fq-a p{color:var(--muted)}
.fq-qs{padding:4px 0 26px;display:flex;flex-direction:column;gap:24px;max-width:72ch}
.fq-q h3{font-size:16px;font-weight:600;letter-spacing:-.01em;margin-bottom:6px}
.fq-q p{color:var(--muted)}
.fq-q.linked h3{box-shadow:inset 3px 0 0 var(--ink);padding-left:12px}

/* About */
.team{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.tm{display:flex;flex-direction:column;min-width:0}
.tm img{width:100%;height:auto;aspect-ratio:5/6;object-fit:cover;background:var(--card)}
.tm-n{margin-top:14px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.tm-r{margin-top:2px;font-size:14px;color:var(--muted)}
.h2-full{max-width:none}
.lead-wide{max-width:none}
.commit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:40px}
.list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line2)}
.list li{padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;font-weight:500}

/* Field notes */
.talks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:16px}
.talk{background:var(--card);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:8px;transition:border-color 120ms linear}
.talk:hover{border-color:var(--ink)}
.fns{margin-top:16px;border-top:1px solid var(--line2)}
.fn{display:grid;grid-template-columns:150px minmax(0,1fr);grid-template-areas:"d t" ". s";column-gap:24px;row-gap:4px;padding:20px 0;border-bottom:1px solid var(--line);align-items:baseline}
.fn .note-d{grid-area:d;padding-top:0}
.fn .note-t{grid-area:t}
.fn .note-s{grid-area:s}
.note-d{font-size:11.5px;color:var(--label);padding-top:3px}
.note-t{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.35}
.note-s{color:var(--muted);font-size:14.5px;max-width:72ch}
.fn:hover .note-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.note-contact{font-size:12px;color:var(--label);margin-top:28px}
/* Pages of field notes: newer on the left, older on the right, the page numbers between */
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin-top:8px;font-size:12.5px}
.pager-a{display:inline-flex;align-items:center;min-height:44px;border-bottom:0;color:var(--ink);font-weight:500}
.pager-a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.pager-a.next{justify-self:end}
.pager-a[aria-disabled]{color:var(--faint);pointer-events:none}
.pager ol{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.pager ol a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-bottom:0;color:var(--label)}
.pager ol a:hover{color:var(--ink)}
.pager ol a[aria-current]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

/* Articles and legal pages */
.art{padding:72px 0 88px}
.art-head{display:flex;flex-direction:column;gap:0}
.art-back{font-size:12px;color:var(--muted);margin-bottom:36px;align-self:flex-start}
.art-back:hover{color:var(--ink)}
.art-h1{font-size:44px;letter-spacing:-.03em;line-height:1.1;max-width:none}
.art-by{font-size:12px;color:var(--label);margin-top:24px;padding-bottom:28px;border-bottom:1px solid var(--line2)}
.art-body{margin-top:36px;font-size:16.5px;line-height:1.72}
.art-body p{margin:0 0 18px;max-width:66ch}
.art-body h2{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:44px 0 14px}
.art-body h3{font-size:18px;font-weight:600;margin:32px 0 10px}
.art-body section{margin:0}
.art-body ul,.art-body ol{margin:0 0 18px;padding-left:22px}
.art-body li{margin:6px 0}
.art-body blockquote{margin:24px 0;padding:4px 0 4px 20px;border-left:2px solid var(--ink);font-size:18px}
.art-body .article-cite{font-size:13px;color:var(--muted)}
.art-body table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 24px}
.art-body th,.art-body td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.art-body th{font:500 10.5px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--label)}
.legal{font-size:15px;line-height:1.7}
.legal h2{font-size:20px;margin-top:40px}
.legal h3{font-size:16px}

/* The invitation, and the last words */
.invite .h2{max-width:30ch}
.closer{font-size:96px;font-weight:600;letter-spacing:-.05em;line-height:.98;margin-top:96px}

/* Footer */
.ftr{border-top:1px solid var(--line2);padding:56px 0 40px;background:var(--page)}
.ftr-top{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:40px}
.ftr-desc{margin-top:16px;font-size:13.5px;color:var(--muted);max-width:30ch}
.ftr-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.ftr-col{display:flex;flex-direction:column;gap:10px}
.ftr-col .label{margin-bottom:4px}
.ftr-col a{font-size:13.5px;color:var(--muted)}
.ftr-col a:hover,.ftr-links a:hover{color:var(--ink)}
.ftr-end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:56px;padding-top:20px;border-top:1px solid var(--line);font-size:11.5px;color:var(--label)}
.ftr-links{display:flex;flex-wrap:wrap;gap:18px}
.ftr-links a{color:var(--muted);font-size:12.5px}

/* Talk to us */
.cm[hidden]{display:none}
.cm{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:64px 16px;overflow-y:auto}
.cm-back{position:fixed;inset:0;background:rgba(19,19,17,.42)}
.cm-panel{position:relative;width:100%;max-width:620px;background:var(--page);border:1px solid var(--ink);padding:32px}
.cm-close{position:absolute;top:16px;right:16px;height:36px;padding:0 12px;background:transparent;border:1px solid var(--line2);font:500 13px var(--sans);cursor:pointer;color:var(--ink)}
.cm-close:hover{border-color:var(--ink)}
.cm-h{font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15;margin-top:12px;max-width:18ch}
.cm-p{margin-top:12px;color:var(--muted);font-size:14.5px}
.cm-form{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.cm-who{border:0;margin:0;padding:0;min-width:0}
.cm-who legend{font-size:13px;font-weight:500;margin-bottom:8px;padding:0}
.seg{position:relative;display:flex;flex-wrap:wrap;border:1px solid var(--line2);background:var(--white)}
.seg label{position:relative;flex:1 1 auto;display:flex}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{flex:1;display:flex;align-items:center;justify-content:center;height:40px;padding:0 12px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:color 200ms linear,background-color 200ms linear}
.seg input:checked+span{background:var(--ink);color:var(--page)}
.seg input:focus-visible+span{outline:2px solid var(--ink);outline-offset:-4px}
@media (max-width:639px){.xc-dl div{grid-template-columns:minmax(0,1fr);gap:4px}.rec li{grid-template-columns:24px 52px minmax(0,1fr);gap:8px;padding:12px 14px}.rec-h{padding:12px 14px}.xc h2{font-size:25px}.secnav-in{gap:22px}.secnav ul{gap:20px}.xjump.x3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:639px){.seg{display:grid;grid-template-columns:1fr 1fr}.seg span{height:auto;min-height:44px;padding:6px 10px;white-space:normal;text-align:center;line-height:1.25}}
.cm-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-size:13px;font-weight:500}
.opt{color:var(--label);font-weight:400}
.field input,.field textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--white);border:1px solid var(--line2);padding:10px 12px;outline:0;transition:border-color 120ms linear}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{border:1.5px solid var(--ink);padding:9.5px 11.5px}
.hp{position:absolute;left:-9999px}
.cm-foot{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cm-status{font-size:13.5px;color:var(--muted)}
.cm-status.err{color:var(--bad)}
.cm-status.sent{color:var(--ink);font-weight:500}
.cm-alt{font-size:12.5px;color:var(--label)}

/* Planned features and open decisions are in the page and hidden. Press P, or open the page with #planned. */
[data-planned]{display:none !important}
html.show-planned [data-planned]{display:revert !important;outline:1px dashed var(--warn);outline-offset:6px;position:relative}
html.show-planned [data-planned]::before{content:"Planned";position:absolute;top:-22px;right:0;font:500 9.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--warn)}
html.show-planned [data-decision]:not([data-planned]){outline:1px dashed var(--rec);outline-offset:6px}
.planned-flag{position:fixed;left:16px;bottom:16px;z-index:90;background:var(--warn);color:#fff;font:500 11px var(--mono);letter-spacing:.08em;padding:6px 10px;display:none}
html.show-planned .planned-flag{display:block}

/* Arrival: a section rises 16px and fades in once as it enters, siblings 90ms apart. Without script, everything is visible. */
.js .rv{opacity:0;transform:translateY(16px)}
.js .rv.in{opacity:1;transform:none;transition:opacity 550ms var(--arrive),transform 550ms var(--arrive)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  .js .tri-p,.js .tri-p.on{transition:none}
  *,*::before,*::after{transition-duration:0ms !important;animation:none !important}
}

/* Scroll moments (site.js, ruled 2026-10-05). Without script or with reduced motion the page is laid out as it always was. */
@media (min-width:860px){
  .scroll-moments .why-grid{align-items:start}
  .scroll-moments .why-big{position:sticky;top:118px}
  .scroll-moments .why-side{padding-bottom:16vh}
  .scroll-moments .why-side .fig:first-child{min-height:52vh}
  .scroll-moments .why-side .fig>*{opacity:var(--focus,1)}
}
.scroll-moments .flow{position:relative}
.scroll-moments .flow::before,.scroll-moments .flow::after{content:"";position:absolute;top:0;bottom:0;left:-28px;width:1px;background:var(--line2)}
.scroll-moments .flow::after{left:-28.5px;width:2px;background:var(--ink);transform-origin:50% 0;transform:scaleY(var(--read,0))}
.scroll-moments .flow-n{transition:color 180ms var(--ease)}
.scroll-moments .flow-row.is-read .flow-n{color:var(--ink)}
@media (max-width:1279px){.scroll-moments .flow::before{left:-14px}.scroll-moments .flow::after{left:-14.5px}}
@media (max-width:639px){.scroll-moments .flow::before{left:-10px}.scroll-moments .flow::after{left:-10.5px}}

/* Moments on the home page (site.js): rules draw left to right, numbers count up, words rise one after another, the check's
   result appears. site.js sets each waiting state itself, only for what is still below the fold, so without script, with
   reduced motion, or for what is already on screen, everything is simply there. */
.draw-wait{border-top-color:transparent !important;position:relative}
.draw-wait::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--rw,1px));height:var(--rw,1px);background:var(--rc,var(--line2));transform:scaleX(0);transform-origin:0 50%;transition:transform 900ms var(--ease) var(--d,0ms)}
.draw-wait.drawn::before{transform:none}
.w-wait .w{display:inline-block;opacity:0;transform:translateY(4px)}
.w-go .w{display:inline-block;opacity:1;transform:none;transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.tag-wait{opacity:0;transform:translateY(4px)}
.trail-tag{transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.res-wait{opacity:0;transform:translateY(4px)}
.res-wait .sq{background:transparent;border-color:var(--faint)}
.res{transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.res .sq{transition:background-color 220ms var(--ease),border-color 220ms var(--ease)}

/* Breakpoints: 1180 stops growing; 1024 full; 860 two columns stack; 640 one column. */
@media (max-width:1100px){
}
@media (max-width:1099px){.tri-w{font-size:44px}}
@media (max-width:1023px){
  .hdr-in{grid-template-columns:minmax(0,1fr) auto;padding:0 var(--pad)}
  .nav{display:none}
  .menu{display:inline-flex}
  .h1-home{font-size:64px}
  .fig-xl{font-size:168px}
  .closer{font-size:76px}
  .ftr-top{grid-template-columns:minmax(0,1fr);gap:32px}
  .ftr-cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
}

@media (max-width:859px){
  .split,.hero-grid,.hero-home .hero-grid,.ftr-top,.why-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .split-card>.side-card,.split-card>div:last-child{grid-column:auto;grid-row:auto}
  .why-big{padding-right:0}
  .why-side{border-left:0;padding:24px 0 0;margin-top:28px;border-top:1px solid var(--line)}
  .why-next{grid-template-columns:minmax(0,1fr);margin-top:56px}
  .why-next-a{padding-right:0}
  .why-next-b{border-left:0;padding:24px 0 0;margin-top:28px;border-top:1px solid var(--line)}
  .hero-lede,    .split>div:first-child .h2{max-width:26ch}
  .trails,.triple,.cards3,.cases,.commit,.talks{grid-template-columns:minmax(0,1fr)}
  .ask{grid-template-columns:minmax(0,1fr);gap:10px}
  .xprev,.quotes{grid-template-columns:minmax(0,1fr)}
  .bid{grid-template-columns:minmax(0,1fr);gap:10px}
  .ni{grid-template-columns:minmax(0,1fr);gap:6px}
  .ni-m{flex-direction:row;flex-wrap:wrap;gap:4px 12px;grid-row:auto}
  .gcard{grid-template-columns:32px minmax(0,1fr) 20px;gap:4px 12px}
  .gcard p{grid-column:2}
  .gcard .go{grid-row:1;grid-column:3}
  .steps5,.steps5.steps4{grid-template-columns:minmax(0,1fr);gap:0}
  .steps5 li{padding:14px 0 16px}
  .xjump,.xjump.x3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xc{grid-template-columns:minmax(0,1fr);gap:28px}
  .sources{columns:1}
  .ask-a{padding-top:0}
  .ask-w{font-size:17px}
  .figs{grid-template-columns:minmax(0,1fr)}
  .figs .fig+.fig{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:22px}
  .step{grid-template-columns:minmax(0,1fr);gap:14px}
  .rows-w .row{grid-template-columns:minmax(0,1fr);gap:10px;padding:22px 0}
  .tri-tabs{grid-template-columns:minmax(0,1fr);gap:0}
  .tri-t{padding:16px 0 18px}
  .tri-t[aria-selected="true"]{padding-top:15px}
  .fits .ask,.fits .row{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .fits .ask-a,.fits .row-b{grid-column:auto}
  .ease-foot{margin-left:0}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
}
@media (max-width:639px){
  :root{--pad:20px}
  .hdr{--hh:58px}
  .hdr-in{gap:12px;padding:0 20px}
  .hero,.hero-page{padding:56px 0 56px}
  .band{padding:64px 0}
  .band-tight{padding-top:8px}
  .h1{font-size:34px;letter-spacing:-.03em}
  .h1-home{font-size:44px;letter-spacing:-.04em}
  .hero-home{padding:44px 0 56px}
  .hero-home .hero-grid{margin-top:28px}
  .hero-lede{font-size:18px}
  .hero-home .hero-lede{font-size:20px}
  .hero-lede .ln{display:inline}
  .hero-btns .btn-cmd{flex:1 1 100%;min-width:0;max-width:100%;font-size:12px}
  .hero-btns .cmd-t{padding:0 12px;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .fig-xl{font-size:120px}
  .why-big p{font-size:18px}
  .why-next-a p{font-size:18px}
  .why-next-b{font-size:19px}
  .pivot-big{font-size:23px}
  .turn{font-size:21px}
  .rows-w .row-n{font-size:26px}
  .tri-n{font-size:20px}
  .tri-ps{margin-top:32px}
  .tri-w{font-size:34px;letter-spacing:-.035em}
  .deck-track{gap:12px}
  .deck-card{flex-basis:calc(100% - 28px);padding:24px 22px 26px;min-height:0}
  .deck-big{font-size:22px}
  .deck-big span,.deck-small{font-size:16px}
  .tm-n{font-size:15px}
  .tm-r{font-size:13px}
  .pager{grid-template-columns:auto 1fr auto;gap:8px}
  .pager ol{justify-content:center}
  .card{min-height:0}
  .card-q{font-size:19px}
  .triple .h4{font-size:28px}
  .rcard{--cp:20px}
  .rcard-body{padding:22px var(--cp) 20px}
  .rcard-sv{font-size:17px;white-space:normal}
  .rc-row{grid-template-columns:32px minmax(0,1fr);row-gap:6px}
  .rc-r{grid-column:2}
  .rcard-live .rc-row{grid-template-columns:32px minmax(0,1fr) auto;height:60px;row-gap:0}
  .rcard-live .rc-win{height:180px}
  .rcard-live .rcard-sv{font-size:16px}
  .rcard-live .rc-r{grid-column:auto}
  .rcard-live .rc-sl{display:none}
  .hero-home .h1-home{font-size:44px}
  .h2,.home .h2{font-size:26px;letter-spacing:-.025em}
  .hero-sub{font-size:17px}
  .fig-n{font-size:40px}
  .fig-q{font-size:24px}
  .closer{font-size:48px;margin-top:64px}
  .row{grid-template-columns:minmax(0,1fr);gap:6px}
  .fn{grid-template-columns:minmax(0,1fr);grid-template-areas:"d" "t" "s"}
  .cm{padding:12px}
  .cm-panel{padding:24px 20px}
  .cm-row{grid-template-columns:minmax(0,1fr)}
  .cm-h{font-size:24px}
  .sample{--cp:18px}
  .sample-tools .btn{height:44px}
  .art-h1{font-size:32px}
  .art-body{font-size:16px}
  .btns .btn{flex:1 1 auto}
  .hdr-end .btn-sm{height:44px}
  .hdr-login{display:none}
  .mp-link.mp-login{display:flex}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tbl th,.tbl td{padding-right:14px}
  .tbl-cmp{min-width:560px}
  .sample-tbl{min-width:640px}
}