/* Generated by build.mjs from the design canvas artboard. Do not edit by hand:
   change the canvas (or the production layer in build.mjs) and re-run the build. */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('./fonts/plus-jakarta-sans-var.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('./fonts/plus-jakarta-sans-var-ext.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  src:url('./fonts/archivo-var.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('./fonts/jetbrains-mono-var.woff2') format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:swap;
}

                :root{
  --color-carbon-black:#000000;
  --color-paper-white:#ffffff;
  --color-warm-canvas:#e5e5e5;
  --color-mist-gray:#f3f3f3;
  --color-smoke:#C3C3C3;
  --color-slate:#444444;
  --color-graphite:#2f2f2f;
  --color-amber:#FF8A28;


  --font-cond:'Plus Jakarta Sans','Archivo',system-ui,-apple-system,Arial,sans-serif;
  --font-sans:'Plus Jakarta Sans','Archivo',system-ui,-apple-system,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-caption:12px; --text-body-sm:14px; --text-body:16px;
  --text-subheading:18px; --text-subheading-lg:20px;
  --text-heading-sm:28px; --text-heading:40px; --text-heading-lg:48px;
  --text-display:80px; --text-display-xl:96px;

  --s8:8px; --s16:16px; --s24:24px; --s40:40px; --s64:64px; --s80:80px; --s96:96px;
  --page:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{margin:0;background:var(--color-warm-canvas)}
.page{
  background:var(--color-warm-canvas);
  color:var(--color-carbon-black);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:1.25;
  letter-spacing:-0.011em;
}
img{max-width:100%;display:block}

.wrap{max-width:var(--page);margin:0 auto;padding:0 var(--s24)}
.section{padding:var(--s80) 0}
.section + .section{padding-top:0}

.display-xl,.display,.heading-lg{
  font-family:var(--font-cond);font-weight:800;text-transform:uppercase;
  line-height:.9;letter-spacing:-.03em;
}
.display-xl{font-size:var(--text-display-xl)}
.display{font-size:var(--text-display)}
.heading-lg{font-size:var(--text-heading-lg)}
.heading{
  font-family:var(--font-sans);font-weight:500;text-transform:uppercase;
  font-size:var(--text-heading);line-height:1.1;letter-spacing:-.02em;
}
.heading-sm{font-size:var(--text-heading-sm);font-weight:500;line-height:1.3;letter-spacing:-.03em}
.sub-lg{font-size:var(--text-subheading-lg);line-height:1.2;letter-spacing:-.01em}
.sub{font-size:var(--text-subheading);line-height:1.33}
p{max-width:64ch;color:var(--color-slate)}
p.tight{max-width:52ch}
p + p{margin-top:var(--s16)}
.body-sm{font-size:var(--text-body-sm);line-height:1.3;letter-spacing:-.011em}
strong{font-weight:500;color:var(--color-carbon-black)}

.mono{
  font-family:var(--font-mono);font-weight:400;font-size:var(--text-caption);
  line-height:1.6;letter-spacing:-.03em;text-transform:uppercase;
  color:var(--color-slate);display:block;
}
.tag{
  display:inline-block;background:var(--color-amber);color:var(--color-carbon-black);
  border-radius:64px;padding:6px var(--s16);
  font-family:var(--font-mono);font-size:var(--text-caption);letter-spacing:-.03em;
  text-transform:uppercase;line-height:1.3;
}
.stop{color:var(--color-amber)}

.card{background:var(--color-paper-white);border-radius:32px;padding:var(--s40)}


.block-inverted.section--stack{padding-bottom:0}
.rstack{position:relative;
  --rpin:112px; --rnum:48px;

  --rgap:64px;
  --rblock:clamp(340px, calc(100vh - 240px), 470px);
  --rtail:clamp(0px, calc(100vh - var(--rpin) - var(--rblock) - var(--rgap)), var(--rblock));

  --rzone:1; --rband:45; --rdrift:32px}
.rstack__tail{height:var(--rtail)}


.rstack .rcount{position:sticky;top:var(--rnum);z-index:10;
  background:var(--color-carbon-black);padding-bottom:var(--s16);
  display:flex;align-items:baseline;gap:2px;
  font-family:var(--font-mono);font-weight:700;font-size:20px;line-height:1}

.block-inverted .rstack .rcount{color:var(--color-amber)}
.rstack .rcount__zero{opacity:.5}
.rstack .rcount__win{position:relative;display:block;width:1ch;height:1em;overflow:hidden}
.rstack .rcount__d{position:absolute;inset:0;display:block;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s cubic-bezier(.16,1,.3,1)}
.rstack .rcount__d[data-state="out"] {transform:translateY(-100%);opacity:0}
.rstack .rcount__d[data-state="in"]  {transform:translateY(0);opacity:1}
.rstack .rcount__d[data-state="wait"]{transform:translateY(100%);opacity:0}

.rstack__item{position:sticky;top:var(--rpin);
  background:var(--color-carbon-black);
  min-height:var(--rblock);
  display:flex;flex-direction:column;justify-content:flex-start}

.rstack__item:nth-child(2){z-index:1}
.rstack__item:nth-child(3){z-index:2}
.rstack__item:nth-child(4){z-index:3}

.rstack__inner{will-change:transform}


.rstack__item h3{margin:0;max-width:20ch;
  font-family:var(--font-cond);font-weight:800;
  text-transform:uppercase;font-size:var(--text-heading-lg);
  line-height:.92;letter-spacing:-.03em;color:var(--color-paper-white)}

.rstack__item p{margin:var(--s24) 0 0;max-width:55ch;
  font-size:var(--text-heading-sm);line-height:1.4;color:var(--color-smoke)}

.block-inverted .rstack__item .rstack__n{display:none;color:var(--color-amber);margin-bottom:var(--s16)}
.card--mist{background:var(--color-mist-gray)}
.card--inverted{background:var(--color-carbon-black);color:var(--color-paper-white)}
.card--inverted p{color:var(--color-smoke)}
.card--inverted strong{color:var(--color-paper-white)}
.card--inverted .mono{color:var(--color-smoke)}
.card--arc{border-radius:64px 64px 0 0}
.card--lg{border-radius:64px;padding:var(--s64)}




.section.section--paper{background:var(--color-paper-white);padding:var(--s96) 0}


.section.section--paper + .section{padding-top:var(--s80)}
.card--headline-fill{container-type:inline-size}

.display--fill{white-space:nowrap;font-size:5.6cqw}
.block-inverted{background:var(--color-carbon-black);color:var(--color-paper-white);padding:var(--s96) 0}
.block-inverted p{color:var(--color-smoke)}
.block-inverted .mono{color:var(--color-smoke)}
.block-inverted strong{color:var(--color-paper-white)}

.block-inverted .card:not(.card--inverted) p{color:var(--color-slate)}
.block-inverted .card:not(.card--inverted) .mono{color:var(--color-slate)}
.block-inverted .card:not(.card--inverted) strong{color:var(--color-carbon-black)}

.btn{
  display:inline-block;font-family:var(--font-sans);font-size:var(--text-body);font-weight:500;
  line-height:1;text-decoration:none;border:0;cursor:pointer;letter-spacing:-.011em;
  transition:background 120ms ease,color 120ms ease;
}
.btn--filled{background:var(--color-carbon-black);color:var(--color-paper-white);
  border-radius:8px;padding:var(--s16) var(--s24)}

.btn--filled:hover{background:var(--color-graphite);color:var(--color-amber)}
.block-inverted .btn--filled,.card--inverted .btn--filled{
  background:var(--color-paper-white);color:var(--color-carbon-black)}
.block-inverted .btn--filled:hover,.card--inverted .btn--filled:hover{background:var(--color-amber)}

.btn--white{background:var(--color-paper-white);color:var(--color-carbon-black)}
.btn--white:hover{background:var(--color-amber);color:var(--color-carbon-black)}



.nav{background:var(--color-paper-white)}

.section--hero .btn--white{background:var(--color-carbon-black);color:var(--color-paper-white)}
.section--hero .btn--white:hover{background:var(--color-graphite);color:var(--color-amber)}
.section--hero{background:var(--color-paper-white)}
.creds{background:var(--color-paper-white);padding:var(--s24) 0;overflow:hidden}
.creds__label{padding:0 var(--s24);max-width:var(--page);margin:0 auto var(--s16)}
.creds__viewport{overflow:hidden}
.creds__track{display:flex;width:max-content;gap:var(--s64);align-items:center;
  animation:creds-scroll 40s linear infinite;will-change:transform}

.creds__viewport:focus-within .creds__track{animation-play-state:paused}
.creds__item{display:flex;align-items:center;gap:var(--s16);flex:0 0 auto}

.creds__text{font-size:var(--text-body);font-weight:500;line-height:1.3;
  letter-spacing:-.011em;color:var(--color-carbon-black);white-space:nowrap}

.creds__logo{flex:0 0 auto;display:block;height:48px;width:auto}

.creds__logo--badge{height:72px}
.creds__verifylink{flex:0 0 auto;display:block;line-height:0;border-radius:8px}
.creds__verifylink:focus-visible{outline:3px solid var(--color-carbon-black);outline-offset:3px}
@keyframes creds-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--s80) / 2))}
}
@media (prefers-reduced-motion:reduce){

  .creds__track{animation:none;flex-wrap:wrap;width:auto;gap:var(--s40);
    max-width:var(--page);margin:0 auto;padding:0 var(--s24)}
  .creds__dup{display:none}
}
a{color:var(--color-carbon-black)}
a:hover{color:var(--color-slate)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--color-carbon-black);outline-offset:3px}
.block-inverted a:focus-visible,.card--inverted a:focus-visible{outline-color:var(--color-amber)}
.cta-note{font-size:var(--text-body-sm);color:var(--color-slate);margin-top:var(--s16);max-width:46ch}
.block-inverted .cta-note,.card--inverted .cta-note{color:var(--color-smoke)}
.cta-note a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px}

.nav{height:8rem;display:flex;align-items:center}
.nav .wrap{display:flex;align-items:center;gap:var(--s24);width:100%;position:relative}

.nav .name{font-family:var(--font-cond);font-weight:800;text-transform:uppercase;font-size:28px;
  letter-spacing:-.03em;line-height:1;text-decoration:none;color:inherit}

.nav .wrap > .btn{margin-left:auto}
.pill{background:var(--color-paper-white);border-radius:48px;padding:14px var(--s24);
  display:flex;gap:var(--s24);position:absolute;left:50%;transform:translateX(-50%)}
.pill a{font-size:var(--text-body);font-weight:500;color:var(--color-slate);
  text-decoration:none;letter-spacing:-.011em}
.pill a:hover{color:var(--color-carbon-black)}

.hero-centred{text-align:center}
.hero-centred p{margin-left:auto;margin-right:auto}
.split{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--s64);align-items:center}
.split--text{align-items:start}
.grid2{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:var(--s24);align-items:start}
.grid3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--s24);align-items:stretch}
.stack-24 > * + *{margin-top:var(--s24)}

.object{position:relative;height:440px;border-radius:64px;background:var(--color-paper-white);overflow:hidden}
.object i{position:absolute;display:block;border-radius:24px}
.o1{left:9%;top:14%;width:44%;height:44%;background:var(--color-carbon-black)}
.o2{right:12%;top:24%;width:30%;height:30%;background:var(--color-amber);border-radius:64px}
.o3{left:26%;bottom:12%;width:38%;height:26%;background:var(--color-mist-gray)}
.o4{right:20%;bottom:18%;width:12%;height:12%;border-radius:64px}
.o5{left:14%;top:8%;width:14%;height:8%;background:var(--color-smoke);border-radius:64px}

ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:var(--s16) 0;border-top:1.5px solid var(--color-smoke);
  font-size:var(--text-body-sm);line-height:1.3;color:var(--color-slate)}
ul.plain li:first-child{border-top:0;padding-top:0}
.card--inverted ul.plain li{border-color:var(--color-graphite);color:var(--color-smoke)}

.pricefig{font-family:var(--font-cond);font-weight:800;text-transform:uppercase;
  font-size:var(--text-display-xl);line-height:.9;letter-spacing:-.03em}
.pricefig--alt{font-size:var(--text-display);color:var(--color-slate)}


.portrait{width:100%;aspect-ratio:1;border-radius:32px;background:var(--color-carbon-black);
  overflow:hidden;display:block}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}

.faq{border-top:1.5px solid var(--color-smoke)}
.faq:last-of-type{border-bottom:1.5px solid var(--color-smoke)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:var(--s24);
  justify-content:space-between;align-items:flex-start;padding:var(--s24) 0;
  font-size:var(--text-heading-sm);font-weight:500;line-height:1.3;letter-spacing:-.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-mono);font-size:var(--text-heading-sm);line-height:1.3;flex:none}
.faq[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 var(--s24)}

.footer{background:var(--color-carbon-black);color:var(--color-paper-white);padding:var(--s64) 0 var(--s40)}
.footer p,.footer .mono{color:var(--color-smoke)}
.footer a{color:var(--color-paper-white);text-decoration:none;font-weight:500}
.footer a:hover{color:var(--color-amber);text-decoration:underline;text-underline-offset:3px}
.footlinks{display:flex;gap:var(--s24);flex-wrap:wrap}
.hair{border:0;border-top:1.5px solid var(--color-graphite);margin:var(--s40) 0}

@media (max-width:1024px){
  :root{--text-display-xl:96px;--text-display:64px;--text-heading:32px;--text-heading-lg:40px}
  .split{gap:var(--s40)}
}
@media (max-width:768px){
  :root{--text-display-xl:52px;--text-display:40px;--text-heading:26px;
        --text-heading-lg:32px;--text-heading-sm:22px}
  .nav{height:auto;padding:var(--s16) 0}
  .nav .wrap{flex-wrap:wrap;gap:var(--s16)}
  .pill{display:none}
  .split,.grid2,.grid3{grid-template-columns:repeat(1, minmax(0, 1fr));gap:var(--s24)}
  .section{padding:var(--s64) 0}

  .section.section--paper{padding:var(--s64) 0}
  .section.section--paper + .section{padding-top:var(--s64)}
  .card{padding:var(--s24);border-radius:24px}

  .block-inverted.section--stack{padding-bottom:var(--s64)}
  .rstack{--rpin:0px; --rtail:0px}
  .rstack__item{position:static;min-height:0;margin-bottom:var(--s64)}
  .rstack__item:last-of-type{margin-bottom:0}
  .rstack__item h3{font-size:var(--text-heading-sm)}
  .rstack__item p{font-size:var(--text-body);max-width:none}
  .rstack .rcount{display:none}
  .block-inverted .rstack__item .rstack__n{display:block}
  .card--lg{padding:var(--s40);border-radius:32px}
  .display--fill{white-space:normal;font-size:var(--text-display)}
  .object{height:280px;border-radius:32px}
  .block-inverted{padding:var(--s64) 0}
  .btn--filled{display:block;text-align:center}
}

/* ---- production layer, added by build.mjs, not part of the canvas ---- */

/* Keyboard users land here first. Off-screen until focused. */
.skip{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:var(--s24);top:var(--s16);width:auto;height:auto;
  z-index:10;background:var(--color-carbon-black);color:var(--color-paper-white);
  padding:var(--s16) var(--s24);border-radius:8px;font-weight:500;
  outline:3px solid var(--color-amber);outline-offset:3px}

/* The canvas covers links and summaries. Catch anything else focusable. */
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--color-carbon-black);outline-offset:3px}
.block-inverted button:focus-visible,.footer a:focus-visible{outline-color:var(--color-amber)}

/* Scroll reveal. One fade-and-slide per section, 200ms, no stagger, no
   re-trigger. The .js-reveal class is added by script, so with JavaScript
   off or broken every section is simply visible. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .reveal{opacity:0;transform:translateY(16px);
    transition:opacity 200ms ease,transform 200ms ease}
  .js-reveal .reveal.is-in{opacity:1;transform:none}
}

/* Pointer-tracked card tilt and the button ink fill. design-system V3.1,
   01/09/2026. Both are inert without JavaScript, both are switched off on
   touch and under prefers-reduced-motion, and neither is required to read
   the page. The transform and box-shadow are written by script, so nothing
   here needs a @keyframes or a library. */
.tilt{will-change:transform;transform-style:flat}
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
  .tilt{box-shadow:rgba(0,0,0,.18) 1px 5px 40px 0}
  .tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;
    z-index:0;pointer-events:none;opacity:0;transition:opacity 400ms cubic-bezier(.16,1,.3,1);
    background:radial-gradient(ellipse 500% 420% at var(--bx,50%) var(--by,50%),
      color-mix(in srgb, var(--color-amber) 14%, transparent) 0%, transparent 55%)}
  .tilt:hover::before{opacity:1}
  /* A black card keeps its black. The glow is amber at 14%, which over
     #000000 washes the card to a muddy brown rather than lighting it.
     Wes reported it 01/09/2026 and he is right: the tilt is the effect on
     these, the colour change is not. Inverted cards tilt with their shadow
     and nothing else. */
  .tilt.card--inverted::before{display:none}
  .tilt{position:relative;isolation:isolate}
  .tilt > *{position:relative;z-index:1}
}

/* The Book a call button fills from wherever the pointer crossed its edge. */
.btn--blob{position:relative;overflow:hidden}
.btn--blob .btn__label{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px}
/* The arrow is hidden until hover, so the button reads as a plain label at
   rest and gains the affordance on approach. Width is reserved either way,
   so nothing reflows when it appears. */
.btn--blob .btn__arrow{display:inline-block;opacity:0;transform:translate(-6px,4px);
  transition:opacity 400ms cubic-bezier(.16,1,.3,1),transform 400ms cubic-bezier(.16,1,.3,1)}
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
  .btn--blob:hover .btn__arrow{opacity:1;transform:translate(0,0)}
}
/* No hover on touch, so the arrow is simply always there. */
@media (hover: none){ .btn--blob .btn__arrow{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){ .btn--blob .btn__arrow{opacity:1;transform:none} }
/* The blob is the button's OWN hover colour, animated out from the cursor,
   not one accent for every button. A button that already holds black type
   fills amber; one holding white type fills Graphite and its label turns
   amber, which is exactly what the static hover always did.
   Found 01/09/2026: with a single amber blob everywhere, the hero's button
   filled amber while its label also turned amber, so the label disappeared
   into the fill and left an empty orange pill. */
.btn--blob .btn__blob{position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  width:320px;height:320px;background:var(--btn-blob-color, var(--color-amber));
  transform:translate(-50%,-50%) scale(0);
  transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.btn--filled.btn--blob{--btn-blob-color:var(--color-graphite)}
.block-inverted .btn--filled.btn--blob,
.card--inverted .btn--filled.btn--blob{--btn-blob-color:var(--color-amber)}
@media (pointer: fine) and (prefers-reduced-motion: no-preference){
  .btn--blob:hover .btn__blob{transform:translate(-50%,-50%) scale(1)}
  /* The button holds its resting background through the hover, so the blob
     is the only thing that changes it. Without this the existing hover rule
     flips the whole button instantly and the blob has nothing left to do.
     The label colours are the design system's own and are left alone. */
  .btn--filled.btn--blob:hover{background:var(--color-carbon-black)}
  .block-inverted .btn--filled.btn--blob:hover,
  .card--inverted .btn--filled.btn--blob:hover{background:var(--color-paper-white)}
  .section--hero .btn--white.btn--blob:hover{background:var(--color-carbon-black)}
}
@media (hover: none){ .btn--blob .btn__blob{display:none} }

/* Long-form policy pages. Same system, narrower measure. */
.prose{max-width:64ch}
.prose h2{font-family:var(--font-cond);font-weight:700;font-stretch:75%;
  text-transform:uppercase;font-size:var(--text-heading-lg);line-height:.9;
  letter-spacing:-.03em;margin-top:var(--s64)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:var(--text-heading-sm);font-weight:500;line-height:1.3;
  letter-spacing:-.03em;margin-top:var(--s40)}
.prose p{margin-top:var(--s16)}
.prose ul{margin-top:var(--s16);list-style:none}
.prose ul li{padding:var(--s16) 0;border-top:1.5px solid var(--color-smoke)}
.prose ul li:first-child{border-top:0}
.prose table{margin-top:var(--s24);width:100%;border-collapse:collapse;
  font-size:var(--text-body-sm);font-variant-numeric:tabular-nums}
.prose th,.prose td{text-align:left;vertical-align:top;padding:var(--s16) var(--s16) var(--s16) 0;
  border-top:1.5px solid var(--color-smoke)}
.prose th{font-weight:500;font-size:var(--text-caption);font-family:var(--font-mono);
  text-transform:uppercase;letter-spacing:-.03em;color:var(--color-slate);border-top:0}
.prose a{color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:2px}
/* A table is the one thing here that can be wider than a phone. Let it
   scroll inside its own box rather than pushing the page sideways. */
.table-scroll{overflow-x:auto}

/* The canvas hides the nav links below 768px and puts nothing in their place,
   which leaves a phone with no navigation at all. The fix is a second row:
   wordmark and button stay on the top line, the three links drop underneath
   as a full-width pill. No hamburger, because a hidden menu is an extra tap
   and an icon, and this system has no icons.
   It starts at 1024 rather than 768 because the wordmark carries its
   descriptor, which makes the left of the nav 315px wide: measured, it runs
   into the centred pill by 44px at 900px and 94px at 800px. 1024 is one of
   the system's two breakpoints, so this introduces none. */
@media (max-width:1024px){
  .nav{height:auto;padding:var(--s24) 0}
  .nav .wrap{flex-wrap:wrap;row-gap:var(--s16)}
  /* Out of the absolute centring it uses on wide screens and back into the
     flow, so it can take the second row. */
  .pill{display:flex;order:3;width:100%;margin:0;position:static;transform:none;
    justify-content:space-between}
}

@media (max-width:768px){
  .nav{padding:var(--s16) 0}
  .pill{padding:12px var(--s16);gap:var(--s8)}
  .pill a{font-size:var(--text-body-sm)}
  .prose table{font-size:var(--text-caption)}
}