/* THIS FILE IS THE SOURCE OF TRUTH. `app/public/style.css` is a copy of it, made by the
   app build command in README.md. Edit it here and nowhere else: audit.mjs fails if the
   two ever differ, because they silently did for hours once, and the half that went stale
   was the half customers pay on. Anything the app needs DIFFERENTLY belongs in app.css,
   which loads after this one.

   smarticulate. Palette and contrast verified: ink 10.8:1 on paper, signal-deep 5.5:1,
   quiet 4.5:1. Signal is for graphics and type at 24px and above only, never body text. */

/* Self-hosted, so the site makes no third-party request at all. Both families are SIL
   Open Font License; the licences are in fonts/. Latin subsets only, 120KB in total.
   Google's CDN was doing nothing for us: browser caches have been partitioned per site
   for years, so there was no shared cache to benefit from, only an IP address sent to
   a third party on every visit. */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/outfit-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#34374C;
  --signal:#E0503A;
  --signal-deep:#B23A22;
  --paper:#F6F6F6;
  --quiet:#6B7089;
  --rule:#DEDFE6;
  --card:#FFFFFF;
  --display:"Outfit","Questrial","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --wide:1080px;
  --narrow:700px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:1.0625rem;line-height:1.65;
  font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.12;letter-spacing:-0.02em;margin:0 0 .5em}
h1{font-size:clamp(2.4rem,6vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:0}
h3{font-size:1.2rem;letter-spacing:-0.01em}
p{margin:0 0 1.15em}
a{color:var(--signal-deep);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ink)}
strong{font-weight:600}
small{font-size:.875rem;color:var(--quiet)}

.wrap{max-width:var(--wide);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:var(--narrow);margin-inline:auto}
.narrow.left{margin-inline:0}
/* prose and cards in the same section must share a left edge */
.wrap:has(> .grid) > .narrow,
.wrap:has(> .versus) > .narrow,
.wrap:has(> [id$="-mount"]) > .narrow{margin-inline:0}
.lede{font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.5;color:var(--ink)}
.quiet{color:var(--quiet)}

/* Reassurance sits WITH the paste box, not three screens below it: the objection
   arrives at the moment somebody is deciding whether to paste a board paper in. */
.assure{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--signal);
  border-radius:3px;padding:1rem 1.2rem;margin:0 0 1rem;font-size:.98rem;line-height:1.55}
.assure strong{font-family:var(--display);font-weight:600}

/* The outcome line that closes a section: what you end up with, in one sentence.
   Used sparingly. If every section had one they would all stop being read. */
.stake{font-family:var(--display);font-size:1.12rem;line-height:1.45;color:var(--ink);
  border-left:3px solid var(--signal);padding-left:1rem;margin:1.6rem 0 0}
.center{text-align:center}

/* header */
header.site{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:20}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:88px}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.brand img{width:225px;display:block}
nav.site{display:flex;gap:1.6rem;align-items:center;flex-wrap:wrap}
nav.site a{font-family:var(--display);font-size:.95rem;color:var(--ink);text-decoration:none;font-weight:500}
nav.site a:hover,nav.site a[aria-current="page"]{color:var(--signal-deep)}

/* hero */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(2.5rem,5vw,4rem)}
.hero .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero .split .narrow{margin-inline:0}
.hero .mark{width:100%;max-width:330px;justify-self:center;opacity:.96}
@media (max-width:900px){
  .hero .split{grid-template-columns:1fr}
  .hero .mark{display:none}
}
.hero h1{margin-bottom:.35em}
.hero .strap{font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);color:var(--signal);
  font-weight:500;letter-spacing:-0.01em;margin:0 0 1.6rem}

/* waveform rule, the mark's own motif */
/* The divider is the logo's own waveform, generated by brand/logos/make-wave.py from
   measurements off mark.svg. Height is 22px rather than 16 so the height pattern is
   legible: at 16 the bars flatten into a row of identical ticks. */
.wave{display:block;width:100%;height:26px;margin:clamp(1.8rem,4vw,3rem) 0;color:var(--rule)}
.wave.accent{color:var(--signal)}

section{padding:clamp(2.2rem,4vw,3.4rem) 0}
section.tint{background:var(--card);border-block:1px solid var(--rule)}
.eyebrow{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--quiet);margin:0 0 .9rem;font-weight:600}

/* buttons */
.btn{display:inline-block;font-family:var(--display);font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:2px;text-decoration:none;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--paper);cursor:pointer;transition:.15s}
.btn:hover{background:var(--signal-deep);border-color:var(--signal-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btns{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;margin-top:1.5rem}

/* grid + cards */
.grid{display:grid;gap:1.5rem}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}   /* 300, not 240: at 240 the browser fitted FOUR columns into a grid named three, and a      113-word card became a ribbon four words wide. Three at 300 fits 1080; four cannot. */
/* exactly four cards: auto-fit gives three across and orphans the fourth */
.grid.pairs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){.grid.pairs{grid-template-columns:1fr}}
.grid.pairs > .span{grid-column:1 / -1;border-left:3px solid var(--signal)}
/* The sentence a section turns on. It was only ever styled inside the versus grid, so a
   standalone one rendered as ordinary body text and the emphasis was lost. */
.turn{font-family:var(--display);font-size:1.22rem;line-height:1.42;letter-spacing:-.01em;
  max-width:56ch;margin:1.8rem 0 .9rem;padding-left:1rem;border-left:3px solid var(--signal)}
.grid.pairs > .span .turn{border-left:0;padding-left:0;max-width:none;font-family:var(--display);font-size:1.1rem;line-height:1.4;
  color:var(--ink);margin:.9rem 0 0}
.card{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:1.6rem 1.5rem}
.card h3{margin-top:0}
.card.soon{background:transparent;border-style:dashed}
.card.soon .price{color:var(--quiet)}

/* Badges say who does the work, not whether the thing exists. "Live" told a buyer nothing
   they could act on: everything except one item was live, so the label carried no
   information and the one that mattered read as an apology. These three carry the
   distinction the whole business rests on, so a buyer can see at a glance what they are
   paying for. Deliberately not colour-coded good-to-bad: judged is not an upgrade on
   measured, it is a different thing, and the price already says which costs more. */
.badge{display:inline-block;font-family:var(--display);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;padding:.22rem .5rem;border-radius:2px;
  background:var(--rule);color:var(--quiet);vertical-align:middle;white-space:nowrap}
/* Cool for the machine, warm for the person. The first pair of these measured deltaE 2.4
   apart, which is the threshold at which two colours stop being distinguishable, so they
   read as one label in two shades of nothing.
   "Measured and judged" is deliberately NOT a third hue sitting between the other two: a
   midpoint is close to both and hard on anyone who does not separate hues easily. It is
   the cool chip with the warm rule added, which is what the product is, and it differs
   from plain Measured by FORM, so it survives greyscale and colour blindness. */
.badge.measured{background:#DCE4F7;color:#2C3A6E}
.badge.both{background:#DCE4F7;color:#2C3A6E;border-left:5px solid var(--signal);padding-left:.45rem}
.badge.judged{background:#F8DDD2;color:#9A3618}
.badge.soon{background:transparent;color:var(--quiet);box-shadow:inset 0 0 0 1px var(--rule)}
/* The badge sits on its own line above the title so a long label never crowds the heading
   and every card's title starts at the same height. */
/* The card is a flex column, so every child stretches across it unless told not to: the
   badge rendered as a full-width bar rather than a chip. inline-block does not save you
   here, because a flex item's display is blockified. */
.card .badge{margin:0 0 .7rem;align-self:flex-start}

/* The three stages are a sequence, and they were not reading as one: three identical rows
   under three identical grey rules look like three lists, not first, then, and finally.
   The numeral does the work a heading could not. */
.rung{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.rung:first-of-type{border-top:0;padding-top:0}
.rung > header{display:flex;align-items:baseline;gap:.9rem;margin-bottom:.4rem}
.rung .step{font-family:var(--display);font-weight:600;font-size:2.6rem;line-height:1;
  color:var(--signal);letter-spacing:-.04em;flex:none}
.rung > header h3{font-size:1.45rem;margin:0}
.rung .lead{margin:0 0 1.3rem;max-width:52ch;color:var(--quiet)}
/* The link between stages, stated rather than implied by proximity. */
.rung .carries{margin:1.1rem 0 0;font-size:.9rem;color:var(--quiet);padding-left:.9rem;
  border-left:2px solid var(--rule)}
.rung.aside{border-top-style:dashed}
/* One card in an auto-fit three-column grid stretches to the full width and reads as a
   banner rather than a product. Cap it at roughly the width its neighbours would have. */
.rung .grid.three:has(> .card:only-child){grid-template-columns:minmax(0,calc(33.33% - 1rem))}
@media (max-width:720px){.rung .grid.three:has(> .card:only-child){grid-template-columns:1fr}}
.rung.aside .step{color:var(--quiet);font-size:1.6rem}
.card .price{font-family:var(--display);font-weight:600;color:var(--signal-deep);font-size:1.05rem;margin:.2rem 0 .8rem}
.card p:last-child{margin-bottom:0}

/* A card that can be bought needs a button, not a hyperlinked heading. A linked title
   reads as one more in-page link, which is exactly what Ian said it looked like. */
/* Cards in a row have different amounts of prose, so the actions land at different
   heights unless the card is a column with the action pushed to the bottom. */
/* Every card is a column so the actions can be pushed to the bottom. The buttons still did
   not line up, because one card carried a note UNDER its button: margin-top:auto bottomed
   the block, which pushed that card's button up by the height of the note. The note now
   sits above the button, so the button is the last thing in every card and they all land
   on the same line. */
.card{display:flex;flex-direction:column}
/* Exactly ONE element may claim the free space. Two elements with margin-top:auto in a
   flex column SPLIT it between them, which puts a gap above each and misaligns the row
   all over again. So the auto goes on whichever element starts the bottom block. */
.card .fallback{order:1}
.card .buy{order:2;margin:.9rem 0 0}
.card:not(:has(.fallback)) .buy{margin-top:auto}
.card:has(.fallback) .fallback{margin-top:auto}
.card .btn{font-size:.92rem;padding:.6rem 1.1rem;width:100%;text-align:center;justify-content:center}
/* The backup route, for when the calendar has nothing that suits. Quiet, but present:
   an empty calendar with no alternative is a dead end at the moment of intent. */
.card .fallback{margin-bottom:0;font-size:.88rem;line-height:1.45;color:var(--quiet)}
.card .fallback a{color:var(--signal-deep)}

/* pull quote */
blockquote.pull{margin:2.2rem 0;padding:0 0 0 1.4rem;border-left:3px solid var(--signal);
  font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.35;font-weight:500}
blockquote.pull p{margin:0}

/* two columns setting what is yours against what is anybody's */
.versus{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin:1.8rem 0}
.versus > div{border:1px solid var(--rule);border-radius:3px;padding:1.3rem 1.4rem;background:var(--card)}
.versus > div.mine{border-left:3px solid var(--signal)}
.versus > div.anyone{border-left:3px solid var(--quiet)}
.versus h3{font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 .7rem;color:var(--quiet)}
.versus .line{font-family:var(--display);font-size:1.08rem;line-height:1.4;margin:0 0 .6rem}
.versus p:last-child{margin-bottom:0;font-size:.94rem;color:var(--quiet)}

/* the definition block is the brand's signature device, used twice and deliberately:
   once for the name, once for the thing the product captures */
.lexicon.loud{border-left-width:5px;padding:2.2rem 2.4rem;background:var(--paper);border-color:var(--rule);
  border-left-color:var(--signal)}
.lexicon.loud .word{font-size:clamp(2.2rem,5.5vw,3.4rem);letter-spacing:-0.02em;margin-bottom:.1rem}
.lexicon.loud .pos{font-family:var(--display);color:var(--signal-deep);font-weight:600;font-size:1rem;
  margin:1.4rem 0 .1rem}
.lexicon.loud .pos:first-of-type{margin-top:.9rem}
.lexicon.loud .pron{font-size:1rem;margin:0 0 .5rem}
.lexicon.loud .sense{font-size:1.15rem;margin:0 0 .5rem}
.lexicon.loud .usage{color:var(--quiet);font-style:italic;margin:0}
/* definition block, the brand's own device */
.lexicon{background:var(--card);border:1px solid var(--rule);border-left:3px solid var(--signal);
  padding:1.5rem 1.6rem;border-radius:3px;margin:2rem 0}
.lexicon .word{font-family:var(--display);font-size:1.5rem;font-weight:600;margin:0}
.lexicon .pron{color:var(--quiet);font-size:.95rem;margin:.1rem 0 .8rem}
.lexicon p:last-child{margin-bottom:0}

/* the test */
.tester{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:1.6rem}
.tester textarea{width:100%;min-height:190px;padding:1rem;border:1px solid var(--rule);border-radius:2px;
  font-family:var(--body);font-size:1rem;line-height:1.6;color:var(--ink);background:var(--paper);resize:vertical}
.tester textarea:focus{outline:2px solid var(--signal);outline-offset:1px}
.tester label{display:block;font-size:.92rem;color:var(--quiet);margin:.9rem 0 .3rem}
.tester input[type=text],.tester input[type=email],.tester select{width:100%;padding:.75rem 1rem;
  border:1px solid var(--rule);border-radius:2px;font-family:var(--body);font-size:1rem;color:var(--ink);background:var(--paper)}
.tester input:focus,.tester select:focus{outline:2px solid var(--signal);outline-offset:1px}
.tester .row{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.9rem;flex-wrap:wrap}
.counter{font-family:var(--display);font-size:.9rem;color:var(--quiet)}
.counter.ready{color:var(--signal-deep);font-weight:600}

.result{margin-top:1.8rem;display:none;scroll-margin-top:96px}
.result.show{display:block}
.scoreline{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:.3rem}
.scorenum{font-family:var(--display);font-size:clamp(3rem,8vw,4.5rem);font-weight:600;line-height:1;color:var(--signal)}
.scoreof{color:var(--quiet);font-family:var(--display)}
.bandname{font-family:var(--display);font-size:1.2rem;font-weight:600}
.bars{margin:1.5rem 0 0;display:grid;gap:.7rem}
.bar{display:grid;grid-template-columns:9.5rem 1fr 3.4rem;gap:.8rem;align-items:center;font-size:.92rem}
.bar .track{height:9px;background:var(--rule);border-radius:9px;overflow:hidden}
.bar .fill{height:100%;background:var(--signal);border-radius:9px}
.bar .num{font-family:var(--display);text-align:right;color:var(--quiet)}
.bar.noisy .label::after{content:" *";color:var(--signal-deep)}
.finding{border-top:1px solid var(--rule);margin-top:1.5rem;padding-top:1.3rem}
.finding h3{font-family:var(--display);font-size:1rem;margin:0 0 .4rem}
.yourline{font-family:var(--display);font-size:1.15rem;line-height:1.4;border-left:3px solid var(--signal);
  padding-left:1rem;margin:.6rem 0}
.finding.offer{border-top:2px solid var(--signal);background:var(--paper);margin-left:-1rem;margin-right:-1rem;
  padding:1.4rem 1rem 0.6rem}
.finding.offer h4{font-size:1.15rem;color:var(--ink)}
.finding.offer .btn{margin-right:.6rem;margin-top:.4rem}
.refusal{border-left:3px solid var(--quiet);padding-left:1rem;color:var(--quiet)}

/* lists */
ul.ticks{list-style:none;padding:0;margin:0 0 1.2rem}
ul.ticks li{padding-left:1.5rem;position:relative;margin-bottom:.55rem}
ul.ticks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--signal)}

/* footer */
footer.site{border-top:1px solid var(--rule);margin-top:2rem;padding:2.5rem 0 3rem;color:var(--quiet);font-size:.95rem}
footer.site .wrap{display:flex;gap:2rem;justify-content:space-between;flex-wrap:wrap}
/* The currency note used to live inside the links column. Revealing it made that column
   wider than the flex line could hold, so the whole footer collapsed from two columns to
   one the moment somebody pressed USD: not a footer growing taller, a footer rearranging
   itself. It sits on its own full-width line now, so showing it only ever adds height. */
footer.site .footrow{flex:0 0 100%;order:3;margin-top:.4rem}
footer.site .footrow > p{margin:0 0 .6rem}
footer.site .footrow > p:last-child{margin-bottom:0}
footer.site .footrow .curnote{max-width:46rem}
footer.site a{color:var(--quiet)}
footer.site a:hover{color:var(--ink)}
footer.site svg{width:34px;color:var(--quiet);display:block;margin-bottom:.8rem}

/* The mobile header. Two rows: the mark and the currency toggle on the first, the links
   wrapping underneath.

   It used to be a column of three, with the links on one non-wrapping line that scrolled
   sideways. That clipped "Get in touch" at the viewport edge with no visual cue that
   anything scrolled, so it read as broken rather than as a scroller. Links wrap now.

   The header also stops sticking here: three rows of furniture pinned to the top eats a
   third of a phone screen. */
@media (max-width:760px){
  header.site{position:static}
  header.site .wrap{flex-wrap:wrap;align-items:center;gap:.55rem 1rem;min-height:0;padding-block:.85rem}
  .brand{flex:0 0 auto}
  .brand img{width:150px;height:auto}
  header.site .curtoggle{margin-left:auto}
  nav.site{flex:0 0 100%;order:3;flex-wrap:wrap;gap:.5rem 1.15rem;width:100%}
  nav.site a{font-size:.92rem;white-space:nowrap}
  .result{scroll-margin-top:8px}
}
@media (max-width:640px){
  .bar{grid-template-columns:6.6rem 1fr 3rem;font-size:.85rem;gap:.6rem}
  .btn{font-size:.95rem;padding:.8rem 1.2rem}
  .btns .btn{flex:1 1 auto;text-align:center}
  blockquote.pull{padding-left:1rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* FAQ. A details/summary list rather than a stack of headings: the first question is the
   one everybody arrives with, so it is open by default and the rest stay out of the way. */
.faq{margin-top:1.8rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{font-family:var(--display);font-weight:600;font-size:1.08rem;line-height:1.35;
  padding:1.05rem 2.2rem 1.05rem 0;cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.9rem;font-size:1.4rem;
  font-weight:400;color:var(--signal);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--signal-deep)}
.faq summary:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.faq .answer{padding:0 0 1.2rem;max-width:66ch}
.faq .answer p{margin:0 0 .8rem}
.faq .answer p:last-child{margin-bottom:0}

/* Currency toggle. Sterling is what is charged; dollars are a courtesy, and the footer note
   says so whenever dollars are showing. Everything happens in the reader's browser and
   nothing is sent anywhere, which is the same promise the Anyone Test makes. */
.curtoggle{display:inline-flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;flex:none}
.curtoggle button{
  font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  padding:.34rem .6rem;border:0;background:transparent;color:var(--quiet);cursor:pointer;
  line-height:1.4;
}
.curtoggle button + button{border-left:1px solid var(--rule)}
.curtoggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.curtoggle button:hover[aria-pressed="false"]{color:var(--ink)}
.curtoggle button:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
/* Empty until the script fills it, so it never leaves a hole for anyone without JavaScript. */
.curtoggle:empty{display:none}
.curnote{max-width:34rem;color:var(--quiet);margin:.6rem 0 .9rem}